Skip to content

Commit

Permalink
chore(theming): remove Sass default flags (#29401)
Browse files Browse the repository at this point in the history 
Issue number: N/A

---------

## What is the current behavior?
Currently, every Sass variable in Ionic has the `!default` flag added to
the end.

From the [Sass variables
documentation](https://sass-lang.com/documentation/variables/):

> Normally when you assign a value to a variable, if that variable
already had a value, its old value is overwritten. But if you’re writing
a Sass library, you might want to allow your users to configure your
library’s variables before you use them to generate CSS.
> 
> To make this possible, Sass provides the `!default` flag. This assigns
a value to a variable only if that variable isn’t defined or its value
is [null](https://sass-lang.com/documentation/values/null). Otherwise,
the existing value will be used.

In past versions of Ionic Framework, developers wrote Sass variables to
rebuild Ionic Framework using their own values. In the latest versions
of Ionic Framework, this is not possible.

## What is the new behavior?
Removes the `!default` flag from all Sass variables.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

-------

Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
  • Loading branch information
@liamdebeasi @brandyscarney
liamdebeasi and brandyscarney committed Apr 25, 2024
1 parent 0873dc2 commit 6e8bf49
Show file tree
Hide file tree
Showing 127 changed files with 1,301 additions and 1,301 deletions.
6 changes: 3 additions & 3 deletions core/src/components/accordion/accordion.md.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
// --------------------------------------------------

/// @prop - Border radius applied to the accordion
$accordion-md-border-radius: 6px !default;
$accordion-md-border-radius: 6px;

/// @prop - Box shadow of the accordion
$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

/// @prop - Margin of the expanded accordion
$accordion-md-expanded-margin: 16px !default;
$accordion-md-expanded-margin: 16px;
10 changes: 5 additions & 5 deletions core/src/components/accordion/accordion.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
// --------------------------------------------------

/// @prop - Background color of the accordion
$accordion-background-color: var(--ion-background-color, #ffffff) !default;
$accordion-background-color: var(--ion-background-color, #ffffff);

/// @prop - Duration of the accordion transition
$accordion-transition-duration: 300ms !default;
$accordion-transition-duration: 300ms;

/// @prop - Timing function of the accordion transition
$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default;
$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);

/// @prop - Opacity of the disabled accordion
$accordion-disabled-opacity: 0.4 !default;
$accordion-disabled-opacity: 0.4;

/// @prop - Margin of the inset accordion
$accordion-inset-margin: 16px !default;
$accordion-inset-margin: 16px;
86 changes: 43 additions & 43 deletions core/src/components/action-sheet/action-sheet.ios.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,145 +4,145 @@
// --------------------------------------------------

/// @prop - Text align of the action sheet
$action-sheet-ios-text-align: center !default;
$action-sheet-ios-text-align: center;

/// @prop - Padding top of the action sheet
$action-sheet-ios-padding-top: 0 !default;
$action-sheet-ios-padding-top: 0;

/// @prop - Padding end of the action sheet
$action-sheet-ios-padding-end: 8px !default;
$action-sheet-ios-padding-end: 8px;

/// @prop - Padding bottom of the action sheet
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top;

/// @prop - Padding start of the action sheet
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end;

/// @prop - Top margin of the action sheet button group
$action-sheet-ios-group-margin-top: 10px !default;
$action-sheet-ios-group-margin-top: 10px;

/// @prop - Bottom margin of the action sheet button group
$action-sheet-ios-group-margin-bottom: 10px !default;
$action-sheet-ios-group-margin-bottom: 10px;

/// @prop - Background color of the action sheet
$action-sheet-ios-background-color: $overlay-ios-background-color !default;
$action-sheet-ios-background-color: $overlay-ios-background-color;

/// @prop - Border radius of the action sheet
$action-sheet-ios-border-radius: 13px !default;
$action-sheet-ios-border-radius: 13px;


// Action Sheet Title
// --------------------------------------------------

/// @prop - Padding top of the action sheet title
$action-sheet-ios-title-padding-top: 14px !default;
$action-sheet-ios-title-padding-top: 14px;

/// @prop - Padding end of the action sheet title
$action-sheet-ios-title-padding-end: 10px !default;
$action-sheet-ios-title-padding-end: 10px;

/// @prop - Padding bottom of the action sheet title
$action-sheet-ios-title-padding-bottom: 13px !default;
$action-sheet-ios-title-padding-bottom: 13px;

/// @prop - Padding start of the action sheet title
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default;
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end;

/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: $text-color-step-600 !default;
$action-sheet-ios-title-color: $text-color-step-600;

/// @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 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;

// Action Sheet Subtitle
// --------------------------------------------------

/// @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);

/// @prop - Padding top of the action sheet sub title
$action-sheet-ios-sub-title-padding-top: 6px !default;
$action-sheet-ios-sub-title-padding-top: 6px;

/// @prop - Padding end of the action sheet sub title
$action-sheet-ios-sub-title-padding-end: 0 !default;
$action-sheet-ios-sub-title-padding-end: 0;

/// @prop - Padding bottom of the action sheet sub title
$action-sheet-ios-sub-title-padding-bottom: 0 !default;
$action-sheet-ios-sub-title-padding-bottom: 0;

/// @prop - Padding start of the action sheet sub title
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default;
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end;


// Action Sheet Button
// --------------------------------------------------

/// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-height: 56px !default;
$action-sheet-ios-button-height: 56px;

/// @prop - Padding of the action sheet button
$action-sheet-ios-button-padding: 14px !default;
$action-sheet-ios-button-padding: 14px;

/// @prop - Text color of the action sheet button
$action-sheet-ios-button-text-color: ion-color(primary, base) !default;
$action-sheet-ios-button-text-color: ion-color(primary, base);

/// @prop - Font size of the action sheet button icon
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default;
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px);

/// @prop - Padding right of the action sheet button icon
$action-sheet-ios-button-icon-padding-right: .3em !default;
$action-sheet-ios-button-icon-padding-right: .3em;

/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px);

/// @prop - Border color alpha of the action sheet button
$action-sheet-ios-button-border-color-alpha: .08 !default;
$action-sheet-ios-button-border-color-alpha: .08;

/// @prop - Border color of the action sheet button
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha);

/// @prop - Background color of the action sheet button
$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent;

/// @prop - Background color of the activated action sheet button
$action-sheet-ios-button-background-activated: $text-color !default;
$action-sheet-ios-button-background-activated: $text-color;

/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default;
$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color));

/// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base);

/// @prop - Font weight of the action sheet cancel button
$action-sheet-ios-button-cancel-font-weight: 600 !default;
$action-sheet-ios-button-cancel-font-weight: 600;


// Action Sheet Translucent
// --------------------------------------------------

/// @prop - Background color alpha of the action sheet when translucent
$action-sheet-ios-translucent-background-color-alpha: .8 !default;
$action-sheet-ios-translucent-background-color-alpha: .8;

/// @prop - Background color of the action sheet when translucent
$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default;
$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha);

/// @prop - Border color alpha of the action sheet when translucent
$action-sheet-ios-translucent-border-color-alpha: .4 !default;
$action-sheet-ios-translucent-border-color-alpha: .4;

/// @prop - Border color of the action sheet when translucent
$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default;
$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha);

/// @prop - Background color alpha of the activated action sheet when translucent
$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default;
$action-sheet-ios-translucent-background-color-activated-alpha: .7;

/// @prop - Background color of the activated action sheet when translucent
$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default;
$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha);

/// @prop - Filter of the translucent action-sheet group
$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default;
$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px);

/// @prop - Filter of the translucent action-sheet button
$action-sheet-ios-button-translucent-filter: saturate(120%) !default;
$action-sheet-ios-button-translucent-filter: saturate(120%);
56 changes: 28 additions & 28 deletions core/src/components/action-sheet/action-sheet.md.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,100 +4,100 @@
// --------------------------------------------------

/// @prop - Text align of the action sheet
$action-sheet-md-text-align: start !default;
$action-sheet-md-text-align: start;

/// @prop - Background color of the action sheet
$action-sheet-md-background-color: $overlay-md-background-color !default;
$action-sheet-md-background-color: $overlay-md-background-color;

/// @prop - Padding top of the action sheet
$action-sheet-md-padding-top: 0 !default;
$action-sheet-md-padding-top: 0;

/// @prop - Padding bottom of the action sheet
$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default;
$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom);


// Action Sheet Title
// --------------------------------------------------

/// @prop - Height of the action sheet title
$action-sheet-md-title-height: 60px !default;
$action-sheet-md-title-height: 60px;

/// @prop - Color of the action sheet title
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54);

/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: dynamic-font(16px) !default;
$action-sheet-md-title-font-size: dynamic-font(16px);

/// @prop - Padding top of the action sheet title
$action-sheet-md-title-padding-top: 20px !default;
$action-sheet-md-title-padding-top: 20px;

/// @prop - Padding end of the action sheet title
$action-sheet-md-title-padding-end: 16px !default;
$action-sheet-md-title-padding-end: 16px;

/// @prop - Padding bottom of the action sheet title
$action-sheet-md-title-padding-bottom: 17px !default;
$action-sheet-md-title-padding-bottom: 17px;

/// @prop - Padding start of the action sheet title
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default;
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end;


// Action Sheet Subtitle
// --------------------------------------------------

/// @prop - Font size of the action sheet sub title
$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default;
$action-sheet-md-sub-title-font-size: dynamic-font(14px);

/// @prop - Padding top of the action sheet sub title
$action-sheet-md-sub-title-padding-top: 16px !default;
$action-sheet-md-sub-title-padding-top: 16px;

/// @prop - Padding end of the action sheet sub title
$action-sheet-md-sub-title-padding-end: 0 !default;
$action-sheet-md-sub-title-padding-end: 0;

/// @prop - Padding bottom of the action sheet sub title
$action-sheet-md-sub-title-padding-bottom: 0 !default;
$action-sheet-md-sub-title-padding-bottom: 0;

/// @prop - Padding start of the action sheet sub title
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default;
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end;


// Action Sheet Button
// --------------------------------------------------

/// @prop - Minimum height of the action sheet button
$action-sheet-md-button-height: 52px !default;
$action-sheet-md-button-height: 52px;

/// @prop - Text color of the action sheet button
$action-sheet-md-button-text-color: $text-color-step-150 !default;
$action-sheet-md-button-text-color: $text-color-step-150;

/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
$action-sheet-md-button-font-size: dynamic-font(16px);

/// @prop - Padding top of the action sheet button
$action-sheet-md-button-padding-top: 12px !default;
$action-sheet-md-button-padding-top: 12px;

/// @prop - Padding end of the action sheet button
$action-sheet-md-button-padding-end: 16px !default;
$action-sheet-md-button-padding-end: 16px;

/// @prop - Padding bottom of the action sheet button
$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default;
$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top;

/// @prop - Padding start of the action sheet button
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end;

// Action Sheet Icon
// --------------------------------------------------

/// @prop - Font size of the icon in the action sheet button
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
$action-sheet-md-icon-font-size: dynamic-font(24px);

/// @prop - Margin top of the icon in the action sheet button
$action-sheet-md-icon-margin-top: 0 !default;
$action-sheet-md-icon-margin-top: 0;

/// @prop - Margin end of the icon in the action sheet button
$action-sheet-md-icon-margin-end: 32px !default;
$action-sheet-md-icon-margin-end: 32px;

/// @prop - Margin bottom of the icon in the action sheet button
$action-sheet-md-icon-margin-bottom: 0 !default;
$action-sheet-md-icon-margin-bottom: 0;

/// @prop - Margin start of the icon in the action sheet button
$action-sheet-md-icon-margin-start: 0 !default;
$action-sheet-md-icon-margin-start: 0;
4 changes: 2 additions & 2 deletions core/src/components/action-sheet/action-sheet.vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// --------------------------------------------------

/// @prop - Width of the action sheet
$action-sheet-width: 100% !default;
$action-sheet-width: 100%;

/// @prop - Maximum width of the action sheet
$action-sheet-max-width: 500px !default;
$action-sheet-max-width: 500px;
Loading

0 comments on commit 6e8bf49

Please sign in to comment.