mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
feat(ionic-theme): improve scss architecture for ionic theme (#29345)
Issue number: None --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> This PR follows the architectural changes defined on the _SCSS Architecture Design Doc_. Due to some of the developments done in the meantime, not everything that was defined on that document was followed and some sections were simplified. Overall, there were two guidelines that supported the work on this PR: - Have no impact on the current scss partials & CSS architecture for the `md/iOS` themes. - Make everything related to the new `Ionic` Theme separated. Based on these, here're the changes made: **On Themes folder (private):** - Renamed current internal scss partials on src/themes, related to md/iOS, to `native.*.scss` and move them to a new folder, called `native`. Updated imports on all framework. - Removed the ionic prefix from the name of the mixins and function partials on src/themes. Updated imports on all framework. - Created new folder, named ionic, inside src/themes. This holds the `ionic.globals.scss`, with all the mixins and functions forwarded, to be used on other scopes. - Replaced on already created Ionic theme files, the usage of tokens and mixins with @use, to instead _@use "../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an equal approach is followed everywhere and also makes it easier to change the files imported or paths, in the future, as its all in the same global file. - Updated the foundations `readMe` file, with the new process for using globals.  **On css folder (public):** - Created new folder, named `ionic`, inside src/css. This holds all the files related exclusively to Ionic Theme, following the same structure as exists now for md/iOS, with a core, a bundle, utils, etc. Some files were a bit duplicated, to eliminate imports from ios or md theme partials. The only file common to both Themes is the `normalize.scss`. - No folder structure or renamings were done on the existing output, to prevent breaking-changes for developers already making imports from this folder. - Updated typography and link partials to use globals instead of tokens. - Changed `font-size` styles on typography to be on `body`, instead of `html`, to enable correct support of accessibility features on browsers and devices, related to `font-size`.  **Other changes related to global styles new architecture:** - Updated margin & padding utility-classed generated by token, to include css variables and padding/margin mixins. - Updated link test to use new global Ionic bundle, correct utility-class on ion-content and updated snapshots. The font-size changed to 16, as its now the default on the body. - Updated typography snapshots. - Updated prettier format on all scss files. Later on we should make sure this is equal for all team members. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> --------- Co-authored-by: Sean Perkins <sean@ionic.io>
This commit is contained in:
Bernardo Cardoso
@ -28,7 +28,6 @@
|
||||
font-size: $fab-ios-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB buttons in a list
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -40,15 +39,13 @@
|
||||
--color: #{$fab-ios-list-button-text-color};
|
||||
--color-activated: #{$fab-ios-list-button-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
--transition: #{transform 200ms ease 10ms,
|
||||
opacity 200ms ease 10ms};
|
||||
--transition: #{transform 200ms ease 10ms, opacity 200ms ease 10ms};
|
||||
}
|
||||
|
||||
:host(.fab-button-in-list) ::slotted(ion-icon) {
|
||||
font-size: $fab-ios-list-button-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -76,7 +73,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Translucent FAB buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -1,61 +1,61 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "../../themes/native/native.globals.ios";
|
||||
|
||||
// iOS FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow of the FAB button
|
||||
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default;
|
||||
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated FAB button
|
||||
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
|
||||
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
|
||||
|
||||
/// @prop - Transform of the FAB button
|
||||
$fab-ios-transform: scale(1.1) !default;
|
||||
$fab-ios-transform: scale(1.1) !default;
|
||||
|
||||
/// @prop - Transition of the FAB button
|
||||
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
|
||||
$fab-ios-transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59) !default;
|
||||
|
||||
/// @prop - Transition of the activated FAB button
|
||||
$fab-ios-transition-activated: .2s transform ease-out !default;
|
||||
$fab-ios-transition-activated: 0.2s transform ease-out !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-ios-background-color: ion-color(primary, base) !default;
|
||||
$fab-ios-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
|
||||
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-ios-text-color: ion-color(primary, contrast) !default;
|
||||
$fab-ios-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon
|
||||
$fab-ios-icon-font-size: 28px !default;
|
||||
$fab-ios-icon-font-size: 28px !default;
|
||||
|
||||
/// @prop - Background color of the button in a list
|
||||
$fab-ios-list-button-background-color: ion-color(light, base) !default;
|
||||
$fab-ios-list-button-background-color: ion-color(light, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
|
||||
/// @prop - Background color of the hovered button in a list
|
||||
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
|
||||
/// @prop - Text color of the button in a list
|
||||
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
|
||||
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon in a list
|
||||
$fab-ios-list-button-icon-font-size: 18px !default;
|
||||
$fab-ios-list-button-icon-font-size: 18px !default;
|
||||
|
||||
// Translucent FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Backdrop filter of the translucent button
|
||||
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background
|
||||
$fab-ios-translucent-background-alpha: .9 !default;
|
||||
$fab-ios-translucent-background-alpha: 0.9 !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background on hover
|
||||
$fab-ios-translucent-background-alpha-hover: .8 !default;
|
||||
$fab-ios-translucent-background-alpha-hover: 0.8 !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background on focus
|
||||
$fab-ios-translucent-background-alpha-focused: .82 !default;
|
||||
$fab-ios-translucent-background-alpha-focused: 0.82 !default;
|
||||
|
||||
@ -10,17 +10,12 @@
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .24;
|
||||
--background-hover-opacity: .08;
|
||||
--background-focused-opacity: 0.24;
|
||||
--background-hover-opacity: 0.08;
|
||||
--color: #{$fab-md-text-color};
|
||||
--box-shadow: #{$fab-md-box-shadow};
|
||||
--transition: #{
|
||||
box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
|
||||
background-color 280ms cubic-bezier(.4, 0, .2, 1),
|
||||
color 280ms cubic-bezier(.4, 0, .2, 1),
|
||||
opacity 15ms linear 30ms,
|
||||
transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
|
||||
};
|
||||
--transition: #{box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms};
|
||||
--close-icon-font-size: #{$fab-md-icon-font-size};
|
||||
}
|
||||
|
||||
@ -32,7 +27,6 @@
|
||||
font-size: $fab-md-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB buttons in a list
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -50,7 +44,6 @@
|
||||
font-size: $fab-md-list-button-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -78,4 +71,4 @@
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,36 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "../../themes/native/native.globals.md";
|
||||
|
||||
// Material Design FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow of the FAB button
|
||||
$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default;
|
||||
$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated FAB button
|
||||
$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default;
|
||||
$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
|
||||
0 5px 22px 4px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-md-background-color: ion-color(primary, base) !default;
|
||||
$fab-md-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-text-color: ion-color(primary, contrast) !default;
|
||||
$fab-md-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon
|
||||
$fab-md-icon-font-size: 24px !default;
|
||||
$fab-md-icon-font-size: 24px !default;
|
||||
|
||||
/// @prop - Background color of the button in a list
|
||||
$fab-md-list-button-background-color: ion-color(light, base) !default;
|
||||
$fab-md-list-button-background-color: ion-color(light, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
|
||||
/// @prop - Text color of the button in a list
|
||||
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
|
||||
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
|
||||
|
||||
/// @prop - Font size of the button icon in a list
|
||||
$fab-md-list-button-icon-font-size: 18px !default;
|
||||
$fab-md-list-button-icon-font-size: 18px !default;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--background-hover: #{ion-color(primary, contrast)};
|
||||
--background-hover-opacity: .08;
|
||||
--background-hover-opacity: 0.08;
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
@ -68,7 +68,6 @@
|
||||
font-kerning: none;
|
||||
}
|
||||
|
||||
|
||||
.button-native {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@ -132,17 +131,15 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.fab-button-disabled) {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -158,7 +155,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -172,7 +168,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -186,7 +181,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Content
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -194,7 +188,6 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
// FAB small (mini
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -216,7 +209,7 @@
|
||||
|
||||
height: 100%;
|
||||
|
||||
transform: scale(.4) rotateZ(-45deg);
|
||||
transform: scale(0.4) rotateZ(-45deg);
|
||||
|
||||
transition: all ease-in-out 300ms;
|
||||
transition-property: transform, opacity;
|
||||
@ -228,7 +221,6 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
// FAB Animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -239,7 +231,7 @@
|
||||
}
|
||||
|
||||
:host(.fab-button-close-active) .button-inner {
|
||||
transform: scale(.4) rotateZ(45deg);
|
||||
transform: scale(0.4) rotateZ(45deg);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
@ -257,7 +249,6 @@ ion-ripple-effect {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "../../themes/native/native.globals";
|
||||
|
||||
// Floating Action Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width and height of the FAB button
|
||||
$fab-size: 56px !default;
|
||||
$fab-size: 56px !default;
|
||||
|
||||
/// @prop - Width and height of the mini FAB button
|
||||
$fab-small-size: 40px !default;
|
||||
$fab-small-size: 40px !default;
|
||||
|
||||
/// @prop - Border radius of the FAB button
|
||||
$fab-border-radius: 50% !default;
|
||||
$fab-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Margin applied to the small FAB button
|
||||
$fab-button-small-margin: 8px !default;
|
||||
|
||||
Reference in New Issue
Block a user