javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 00:21:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(theming): remove Sass default flag & update guidelines (#29458)

Browse Source 
Remove a missed `!default` flag in the themes directory and update the
Sass variable guidelines docs to eliminate the `!default` flag from the
code examples, except for in the historic usage section which includes
examples from previous versions where the `!default` flag was used.

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
This commit is contained in:
Brandy Carney
2024-05-03 19:15:39 -04:00
committed by GitHub
parent dfb72d7ea0
commit a57ca8d5b4
2 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/themes/ionic.theme.default.ios.scss
View File

@ -13,7 +13,7 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
// --------------------------------------------------
$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2)))) )!default;
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2)))));
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400);
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));

84
docs/sass-guidelines.md
View File

@ -71,16 +71,16 @@ $alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !de
The abundance of Sass variables currently in Ionic Framework is a result of their historical usage, being used to rebuild the CSS and customize Ionic Framework components.
The comments for Sass variables are also still visible today in [v7.7.0](https://github.com/ionic-team/ionic-framework/blob/v7.7.0/core/src/components/alert/alert.ios.vars.scss), even though they are no longer used by any documentation generators:
The comments for Sass variables are also still visible today in [v8.1.0](https://github.com/ionic-team/ionic-framework/blob/v8.1.0/core/src/components/alert/alert.ios.vars.scss), even though they are no longer used by any documentation generators:
```scss
// alert.ios.vars.scss
/// @prop - Max width of the alert
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default;
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2);
/// @prop - Border radius of the alert
$alert-ios-border-radius: 13px !default;
$alert-ios-border-radius: 13px;
```
These comments aren't necessary when the naming describes its use thoroughly. The comments for the variables above do not need to be there, as it is fairly obvious what they are used for.
@ -91,7 +91,7 @@ However, the comment for the following variable might be helpful in explaining w
// action-sheet.ios.vars.scss
/// @prop - Font weight of the action sheet title when it has a sub title
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
$action-sheet-ios-title-with-sub-title-font-weight: 600;
```
It could be argued though that the comment doesn't really help, as seeing the variable in use will explain its purpose the best. Additionally, this is an example of a variable that isn't necessary, given it is only used in one place, which is why it is so specific in the first place.
@ -110,7 +110,7 @@ We should update the comments for Sass variables in one of the following ways:
-/// @prop - Border radius of the alert
+// Border radius of the alert
$alert-ios-border-radius: 13px !default;
$alert-ios-border-radius: 13px;
```
2. If we don't find the comments to be helpful, and want to stick with keeping the variable names specific, we should remove the comments entirely:
@ -118,7 +118,7 @@ We should update the comments for Sass variables in one of the following ways:
// alert.ios.vars.scss
-/// @prop - Border radius of the alert
$alert-ios-border-radius: 13px !default;
$alert-ios-border-radius: 13px;
```
3. If we find the comments to be helpful for certain variables or situations, like when there are math calculations involved, we should keep only the comments that are necessary to explain what is going on:
@ -133,7 +133,7 @@ We should update the comments for Sass variables in one of the following ways:
* a hairline (<1px) width, this will cause subpixel rendering
* differences across browsers.
*/
$alert-ios-button-height: dynamic-font-min(1, 44px) !default;
$alert-ios-button-height: dynamic-font-min(1, 44px);
```
### Variables
@ -161,11 +161,11 @@ Example of global variables:
```scss
// ionic.globals.scss
$font-family-base: var(--ion-font-family, inherit) !default;
$font-family-base: var(--ion-font-family, inherit);
$hairlines-width: .55px !default;
$hairlines-width: .55px;
$placeholder-opacity: 0.6 !default;
$placeholder-opacity: 0.6;
```
#### ✅ Theming
@ -177,23 +177,23 @@ Example of theme variables:
```scss
// ionic.theme.default.scss
$background-color-value: #fff !default;
$background-color-rgb-value: 255, 255, 255 !default;
$background-color-value: #fff;
$background-color-rgb-value: 255, 255, 255;
$text-color-value: #000 !default;
$text-color-rgb-value: 0, 0, 0 !default;
$text-color-value: #000;
$text-color-rgb-value: 0, 0, 0;
$background-color: var(--ion-background-color, $background-color-value) !default;
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default;
$text-color: var(--ion-text-color, $text-color-value) !default;
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default;
$background-color: var(--ion-background-color, $background-color-value);
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value);
$text-color: var(--ion-text-color, $text-color-value);
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
```
```scss
// ionic.theme.default.ios.scss
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
$backdrop-ios-color: var(--ion-backdrop-color, #000);
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
```
#### ✅ Reusable values
@ -216,10 +216,10 @@ Example of reusable values:
// alert.ios.vars.scss
/// @prop - Padding end of the alert head
$alert-ios-head-padding-end: 16px !default;
$alert-ios-head-padding-end: 16px;
/// @prop - Padding start of the alert head
$alert-ios-head-padding-start: $alert-ios-head-padding-end !default;
$alert-ios-head-padding-start: $alert-ios-head-padding-end;
```
```scss
@ -248,10 +248,10 @@ $alert-ios-head-padding-start: $alert-ios-head-padding-end !default;
// alert.ios.vars.scss
/// @prop - Padding top of the alert head
$alert-ios-head-padding-top: 12px !default;
$alert-ios-head-padding-top: 12px;
/// @prop - Padding bottom of the alert head
$alert-ios-head-padding-bottom: 7px !default;
$alert-ios-head-padding-bottom: 7px;
```
```scss
@ -292,10 +292,10 @@ $global-md-item-padding-start: $global-md-item-padding-end;
@import "../../themes/ionic.globals.md";
/// @prop - Padding end for the item content
$item-md-padding-end: $global-md-item-padding-end !default;
$item-md-padding-end: $global-md-item-padding-end;
/// @prop - Padding start for the item content
$item-md-padding-start: $global-md-item-padding-start !default;
$item-md-padding-start: $global-md-item-padding-start;
```
```scss
@ -304,10 +304,10 @@ $item-md-padding-start: $global-md-item-padding-start !default;
@import "../../themes/ionic.globals.md";
/// @prop - Padding start for the divider
$item-divider-md-padding-start: $global-md-item-padding-start !default;
$item-divider-md-padding-start: $global-md-item-padding-start;
/// @prop - Padding end for the divider
$item-divider-md-padding-end: $global-md-item-padding-end !default;
$item-divider-md-padding-end: $global-md-item-padding-end;
```
</td>
@ -327,10 +327,10 @@ $item-divider-md-padding-end: $global-md-item-padding-end !default;
@import "../../themes/ionic.globals.md";
/// @prop - Padding end for the item content
$item-md-padding-end: 16px !default;
$item-md-padding-end: 16px;
/// @prop - Padding start for the item content
$item-md-padding-start: 16px !default;
$item-md-padding-start: 16px;
```
```scss
@ -340,10 +340,10 @@ $item-md-padding-start: 16px !default;
@import "../item/item.md.vars";
/// @prop - Padding start for the divider
$item-divider-md-padding-start: $item-md-padding-start !default;
$item-divider-md-padding-start: $item-md-padding-start;
/// @prop - Padding end for the divider
$item-divider-md-padding-end: $item-md-padding-end !default;
$item-divider-md-padding-end: $item-md-padding-end;
```
</td>
@ -370,7 +370,7 @@ $screen-breakpoints: (
md: 768px,
lg: 992px,
xl: 1200px
) !default;
);
```
#### ✅ Dynamic calculations
@ -418,7 +418,7 @@ $chip-avatar-size: math.div(24em, $chip-base-font-size);
// alert.vars.scss
/// @prop - Font size of the alert button
$alert-button-font-size: dynamic-font(14px) !default;
$alert-button-font-size: dynamic-font(14px);
```
</td>
@ -445,7 +445,7 @@ For example, the color of the label changes when focused in `md` mode. However,
// label.md.vars.scss
/// @prop - Text color of the stacked/floating label when it is focused
$label-md-text-color-focused: ion-color(primary, base) !default;
$label-md-text-color-focused: ion-color(primary, base);
```
```scss
@ -474,7 +474,7 @@ $label-md-text-color-focused: ion-color(primary, base) !default;
// label.ios.vars.scss
/// @prop - Text color of the stacked/floating label when it is focused
$label-ios-text-color-focused: null !default;
$label-ios-text-color-focused: null;
```
```scss
@ -526,7 +526,7 @@ A text alignment property should not be stored in a Sass variable, even if it is
// action-sheet.ios.vars.scss
/// @prop - Text align of the action sheet
$action-sheet-ios-text-align: center !default;
$action-sheet-ios-text-align: center;
```
```scss
@ -588,10 +588,10 @@ Variables should not be used when they are structural changes of an element. Thi
// alert.ios.vars.scss
/// @prop - Flex wrap of the alert button group
$alert-ios-button-group-flex-wrap: wrap !default;
$alert-ios-button-group-flex-wrap: wrap;
/// @prop - Flex of the alert button
$alert-ios-button-flex: 1 1 auto !default;
$alert-ios-button-flex: 1 1 auto;
```
```scss
@ -653,13 +653,13 @@ We shouldn't use variables for changing things such as `font-size` or `font-weig
// action-sheet.ios.vars.scss
/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px);
/// @prop - Font weight of the action sheet title
$action-sheet-ios-title-font-weight: 400 !default;
$action-sheet-ios-title-font-weight: 400;
/// @prop - Font size of the action sheet sub title
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px);
```
```scss