javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tokens): change background step naming

Browse Source
This commit is contained in:
Maria Hutt
2026-02-27 16:35:08 -08:00
parent 60c0f48862
commit 606b577e56
20 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/alert/alert.ios.vars.scss
View File

@@ -114,7 +114,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end;
$alert-ios-input-placeholder-color: $placeholder-text-color;
/// @prop - Border color of the alert input
$alert-ios-input-border-color: $background-color-step-250;
$alert-ios-input-border-color: $gray-color-250;
/// @prop - Border of the alert input
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color;

6
core/src/components/alert/alert.md.vars.scss
View File

@@ -104,7 +104,7 @@ $alert-md-input-border-width: 1px;
$alert-md-input-border-style: solid;
/// @prop - Border color of the alert input
$alert-md-input-border-color: $background-color-step-150;
$alert-md-input-border-color: $gray-color-150;
/// @prop - Text color of the alert input
$alert-md-input-text-color: $text-color;
@@ -209,7 +209,7 @@ $alert-md-radio-border-style: solid;
$alert-md-radio-border-radius: 50%;
/// @prop - Border color of the alert radio when off
$alert-md-radio-border-color-off: $background-color-step-550;
$alert-md-radio-border-color-off: $gray-color-550;
/// @prop - Border color of the alert radio when on
$alert-md-radio-border-color-on: $alert-md-button-text-color;
@@ -281,7 +281,7 @@ $alert-md-checkbox-border-style: solid;
$alert-md-checkbox-border-radius: 2px;
/// @prop - Border color of the checkbox in the alert when off
$alert-md-checkbox-border-color-off: $background-color-step-550;
$alert-md-checkbox-border-color-off: $gray-color-550;
/// @prop - Border color of the checkbox in the alert when on
$alert-md-checkbox-border-color-on: $alert-md-button-text-color;

2
core/src/components/alert/alert.scss
View File

@@ -181,7 +181,7 @@
.alert-button.ion-focused,
.alert-tappable.ion-focused {
background: $background-color-step-100;
background: $gray-color-100;
}
.alert-button-inner {

2
core/src/components/datetime/datetime.ios.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Border color for dividers between header and footer
$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200;
$datetime-ios-border-color: 0.55px solid globals.$gray-color-200;
/// @prop - Padding for content
$datetime-ios-padding: 16px;

2
core/src/components/input-otp/input-otp.md.scss
View File

@@ -16,5 +16,5 @@
// --------------------------------------------------
:host(.input-otp-fill-outline) {
--border-color: #{$background-color-step-300};
--border-color: #{$gray-color-300};
}

16
core/src/components/input-otp/input-otp.native.scss
View File

@@ -14,7 +14,7 @@
--border-style: solid;
--separator-width: 8px;
--separator-border-radius: 999px;
--separator-color: #{$background-color-step-150};
--separator-color: #{$gray-color-150};
--highlight-color-focused: #{ion-color(primary, base)};
--highlight-color-valid: #{ion-color(success, base)};
--highlight-color-invalid: #{ion-color(danger, base)};
@@ -83,8 +83,8 @@
}
:host(.input-otp-fill-solid) {
--border-color: #{$background-color-step-50};
--background: #{$background-color-step-50};
--border-color: #{$gray-color-50};
--background: #{$gray-color-50};
}
// States
@@ -95,18 +95,18 @@
}
:host(.input-otp-fill-outline.input-otp-disabled) {
--background: #{$background-color-step-50};
--border-color: #{$background-color-step-100};
--background: #{$gray-color-50};
--border-color: #{$gray-color-100};
}
:host(.input-otp-fill-outline.input-otp-readonly) {
--background: #{$background-color-step-50};
--background: #{$gray-color-50};
}
:host(.input-otp-fill-solid.input-otp-disabled),
:host(.input-otp-fill-solid.input-otp-readonly) {
--border-color: #{$background-color-step-100};
--background: #{$background-color-step-100};
--border-color: #{$gray-color-100};
--background: #{$gray-color-100};
}
// Colors

4
core/src/components/input/input.md.outline.scss
View File

@@ -2,7 +2,7 @@
// ----------------------------------------------------------------
:host(.input-fill-outline) {
--border-color: #{$background-color-step-300};
--border-color: #{$gray-color-300};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -31,7 +31,7 @@
*/
@media (any-hover: hover) {
:host(.input-fill-outline:hover) {
--border-color: #{$background-color-step-750};
--border-color: #{$gray-color-750};
}
}

12
core/src/components/input/input.md.solid.scss
View File

@@ -2,8 +2,8 @@
// ----------------------------------------------------------------
:host(.input-fill-solid) {
--background: #{$background-color-step-50};
--border-color: #{$background-color-step-500};
--background: #{$gray-color-50};
--border-color: #{$gray-color-500};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -44,8 +44,8 @@
*/
@media (any-hover: hover) {
:host(.input-fill-solid:hover) {
--background: #{$background-color-step-100};
--border-color: #{$background-color-step-750};
--background: #{$gray-color-100};
--border-color: #{$gray-color-750};
}
}
@@ -54,8 +54,8 @@
* much darker on focus.
*/
:host(.input-fill-solid.has-focus) {
--background: #{$background-color-step-150};
--border-color: #{$background-color-step-750};
--background: #{$gray-color-150};
--border-color: #{$gray-color-750};
}
:host(.input-fill-solid) .input-wrapper {

2
core/src/components/item-divider/item-divider.ios.vars.scss
View File

@@ -14,7 +14,7 @@ $item-divider-ios-font-size: dynamic-font(17px);
$item-divider-ios-font-weight: 600;
/// @prop - Background for the divider
$item-divider-ios-background: $background-color-step-100;
$item-divider-ios-background: $gray-color-100;
/// @prop - Color for the divider
$item-divider-ios-color: $text-color-150;

2
core/src/components/loading/loading.md.vars.scss
View File

@@ -31,7 +31,7 @@ $loading-md-border-radius: 2px;
$loading-md-text-color: $text-color-150;
/// @prop - Background of the loading wrapper
$loading-md-background: $background-color-step-50;
$loading-md-background: $gray-color-50;
/// @prop - Box shadow color of the loading wrapper
$loading-md-box-shadow-color: rgba(0, 0, 0, 0.4);

2
core/src/components/popover/popover.ios.vars.scss
View File

@@ -25,4 +25,4 @@ $popover-ios-translucent-filter: saturate(180%) blur(20px);
$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
/// $prop - Border of popover content on desktop
$popover-ios-desktop-border: 0.5px solid $background-color-step-100;
$popover-ios-desktop-border: 0.5px solid $gray-color-100;

2
core/src/components/progress-bar/progress-bar.ios.scss
View File

@@ -18,5 +18,5 @@
* solid (with a buffer value of 1). This maintains
* the custom Ionic appearance for a buffered progress bar.
*/
--background: #{$background-color-step-100};
--background: #{$gray-color-100};
}

2
core/src/components/range/range.md.vars.scss
View File

@@ -20,7 +20,7 @@ $range-md-slider-height: 42px;
$range-md-bar-height: 2px;
/// @prop - Background of the range bar
$range-md-bar-background-color: $background-color-step-250;
$range-md-bar-background-color: $gray-color-250;
/// @prop - Font size of the range pin
$range-md-pin-font-size: dynamic-font(12px);

4
core/src/components/select/select.md.outline.scss
View File

@@ -4,7 +4,7 @@
// ----------------------------------------------------------------
:host(.select-fill-outline) {
--border-color: #{$background-color-step-300};
--border-color: #{$gray-color-300};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -33,7 +33,7 @@
*/
@media (any-hover: hover) {
:host(.select-fill-outline:hover) {
--border-color: #{$background-color-step-750};
--border-color: #{$gray-color-750};
}
}

10
core/src/components/select/select.md.solid.scss
View File

@@ -4,8 +4,8 @@
// ----------------------------------------------------------------
:host(.select-fill-solid) {
--background: #{$background-color-step-50};
--border-color: #{$background-color-step-500};
--background: #{$gray-color-50};
--border-color: #{$gray-color-500};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -47,8 +47,8 @@
*/
@media (any-hover: hover) {
:host(.select-fill-solid:hover) {
--background: #{$background-color-step-100};
--border-color: #{$background-color-step-750};
--background: #{$gray-color-100};
--border-color: #{$gray-color-750};
}
}
@@ -58,7 +58,7 @@
*/
:host(.select-fill-solid.select-expanded),
:host(.select-fill-solid.has-focus) {
--background: #{$background-color-step-150};
--background: #{$gray-color-150};
--border-color: var(--highlight-color);
}

4
core/src/components/textarea/textarea.md.outline.scss
View File

@@ -4,7 +4,7 @@
// ----------------------------------------------------------------
:host(.textarea-fill-outline) {
--border-color: #{$background-color-step-300};
--border-color: #{$gray-color-300};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -33,7 +33,7 @@
*/
@media (any-hover: hover) {
:host(.textarea-fill-outline:hover) {
--border-color: #{$background-color-step-750};
--border-color: #{$gray-color-750};
}
}

12
core/src/components/textarea/textarea.md.solid.scss
View File

@@ -4,8 +4,8 @@
// ----------------------------------------------------------------
:host(.textarea-fill-solid) {
--background: #{$background-color-step-50};
--border-color: #{$background-color-step-500};
--background: #{$gray-color-50};
--border-color: #{$gray-color-500};
--border-radius: 4px;
--padding-start: 16px;
--padding-end: 16px;
@@ -46,8 +46,8 @@
*/
@media (any-hover: hover) {
:host(.textarea-fill-solid:hover) {
--background: #{$background-color-step-100};
--border-color: #{$background-color-step-750};
--background: #{$gray-color-100};
--border-color: #{$gray-color-750};
}
}
@@ -56,8 +56,8 @@
* much darker on focus.
*/
:host(.textarea-fill-solid.has-focus) {
--background: #{$background-color-step-150};
--border-color: #{$background-color-step-750};
--background: #{$gray-color-150};
--border-color: #{$gray-color-750};
}
:host(.textarea-fill-solid) .textarea-wrapper {

2
core/src/components/toast/toast.ios.vars.scss
View File

@@ -9,7 +9,7 @@
$toast-ios-max-height: 478px;
/// @prop - Background Color of the toast wrapper
$toast-ios-background-color: $background-color-step-50;
$toast-ios-background-color: $gray-color-50;
/// @prop - Background Color alpha of the toast wrapper when translucent
$toast-ios-translucent-background-color-alpha: 0.8;

2
core/src/components/toast/toast.md.vars.scss
View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Background of the toast
$toast-md-background: $background-color-step-800;
$toast-md-background: $gray-color-800;
/// @prop - Box shadow of the toast
$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),

44
core/src/themes/native/native.theme.default.scss
View File

@@ -24,29 +24,29 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards their contrasting color.
// For example, $text-color-XXX will be $text-color stepping towards $background-color,
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
// but a $gray-color-XXX will be $background-color stepping towards $text-color.
$background-color-step-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%));
$background-color-step-50: var(--ion-color-gray-50, mix($text-color-value, $background-color-value, 5%));
$background-color-step-100: var(--ion-color-gray-100, mix($text-color-value, $background-color-value, 10%));
$background-color-step-150: var(--ion-color-gray-150, mix($text-color-value, $background-color-value, 15%));
$background-color-step-200: var(--ion-color-gray-200, mix($text-color-value, $background-color-value, 20%));
$background-color-step-250: var(--ion-color-gray-250, mix($text-color-value, $background-color-value, 25%));
$background-color-step-300: var(--ion-color-gray-300, mix($text-color-value, $background-color-value, 30%));
$background-color-step-350: var(--ion-color-gray-350, mix($text-color-value, $background-color-value, 35%));
$background-color-step-400: var(--ion-color-gray-400, mix($text-color-value, $background-color-value, 40%));
$background-color-step-450: var(--ion-color-gray-450, mix($text-color-value, $background-color-value, 45%));
$background-color-step-500: var(--ion-color-gray-500, mix($text-color-value, $background-color-value, 50%));
$background-color-step-550: var(--ion-color-gray-550, mix($text-color-value, $background-color-value, 55%));
$background-color-step-600: var(--ion-color-gray-600, mix($text-color-value, $background-color-value, 60%));
$background-color-step-650: var(--ion-color-gray-650, mix($text-color-value, $background-color-value, 65%));
$background-color-step-700: var(--ion-color-gray-700, mix($text-color-value, $background-color-value, 70%));
$background-color-step-750: var(--ion-color-gray-750, mix($text-color-value, $background-color-value, 75%));
$background-color-step-800: var(--ion-color-gray-800, mix($text-color-value, $background-color-value, 80%));
$background-color-step-850: var(--ion-color-gray-850, mix($text-color-value, $background-color-value, 85%));
$background-color-step-900: var(--ion-color-gray-900, mix($text-color-value, $background-color-value, 90%));
$background-color-step-950: var(--ion-color-gray-950, mix($text-color-value, $background-color-value, 95%));
$background-color-step-1000: var(--ion-color-gray-1000, mix($text-color-value, $background-color-value, 100%));
$gray-color-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%));
$gray-color-50: var(--ion-color-gray-50, mix($text-color-value, $background-color-value, 5%));
$gray-color-100: var(--ion-color-gray-100, mix($text-color-value, $background-color-value, 10%));
$gray-color-150: var(--ion-color-gray-150, mix($text-color-value, $background-color-value, 15%));
$gray-color-200: var(--ion-color-gray-200, mix($text-color-value, $background-color-value, 20%));
$gray-color-250: var(--ion-color-gray-250, mix($text-color-value, $background-color-value, 25%));
$gray-color-300: var(--ion-color-gray-300, mix($text-color-value, $background-color-value, 30%));
$gray-color-350: var(--ion-color-gray-350, mix($text-color-value, $background-color-value, 35%));
$gray-color-400: var(--ion-color-gray-400, mix($text-color-value, $background-color-value, 40%));
$gray-color-450: var(--ion-color-gray-450, mix($text-color-value, $background-color-value, 45%));
$gray-color-500: var(--ion-color-gray-500, mix($text-color-value, $background-color-value, 50%));
$gray-color-550: var(--ion-color-gray-550, mix($text-color-value, $background-color-value, 55%));
$gray-color-600: var(--ion-color-gray-600, mix($text-color-value, $background-color-value, 60%));
$gray-color-650: var(--ion-color-gray-650, mix($text-color-value, $background-color-value, 65%));
$gray-color-700: var(--ion-color-gray-700, mix($text-color-value, $background-color-value, 70%));
$gray-color-750: var(--ion-color-gray-750, mix($text-color-value, $background-color-value, 75%));
$gray-color-800: var(--ion-color-gray-800, mix($text-color-value, $background-color-value, 80%));
$gray-color-850: var(--ion-color-gray-850, mix($text-color-value, $background-color-value, 85%));
$gray-color-900: var(--ion-color-gray-900, mix($text-color-value, $background-color-value, 90%));
$gray-color-950: var(--ion-color-gray-950, mix($text-color-value, $background-color-value, 95%));
$gray-color-1000: var(--ion-color-gray-1000, mix($text-color-value, $background-color-value, 100%));
$text-color-0: var(--ion-color-text-0, mix($background-color-value, $text-color-value, 0%));
$text-color-50: var(--ion-color-text-50, mix($background-color-value, $text-color-value, 5%));
$text-color-100: var(--ion-color-text-100, mix($background-color-value, $text-color-value, 10%));