Skip to content

Commit 863c21f

Browse files
thetaPCthetaPC
authored
feat(themes): remove deprecated color steps and update bg and text steps (#31035)
Issue number: internal
1 parent e2d6a54 commit 863c21f

File tree

47 files changed

+590
-841
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+590
-841
lines changed

‎BREAKING.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,20 @@ This is a comprehensive list of the breaking changes introduced in the major ver
1414

1515
## Version 9.x
1616

17+
- [Global Styles](#version-9x-global-styles)
1718
- [Components](#version-9x-components)
1819
- [Button](#version-9x-button)
1920
- [Card](#version-9x-card)
2021
- [Chip](#version-9x-chip)
2122
- [Grid](#version-9x-grid)
2223
- [Spinner](#version-9x-spinner)
2324

25+
<h2 id="version-9x-global-styles">Global Styles</h2>
26+
27+
<h4 id="version-9x-color-steps">Color Steps</h4>
28+
29+
- The deprecated color step CSS variables, `--ion-color-step-[number]`, have been removed and should be replaced with either `--ion-background-color-step-[number]` or `--ion-text-color-step-[number]` depending on the specific use case, as outlined in the [migration guide](https://ionicframework.com/docs/updating/8-0#step-color-tokens).
30+
2431
<h2 id="version-9x-components">Components</h2>
2532

2633
<h4 id="version-9x-button">Button</h4>

‎core/src/components/action-sheet/action-sheet.ios.vars.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient(
115115
$action-sheet-ios-button-background-activated: $text-color;
116116

117117
/// @prop - Background color of the selected action sheet button
118-
$action-sheet-ios-button-background-selected: var(
119-
--ion-color-step-150,
120-
var(--ion-background-color-step-150, $background-color)
121-
);
118+
$action-sheet-ios-button-background-selected: var(--ion-background-color-step-150, $background-color);
122119

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

‎core/src/components/breadcrumb/breadcrumb.ios.vars.scss‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,22 @@
44
// --------------------------------------------------
55

66
/// @prop - Color of the breadcrumb
7-
$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
7+
$breadcrumb-ios-color: var(--ion-text-color-step-150, #2d4665);
88

99
/// @prop - Color of the active breadcrumb
1010
$breadcrumb-ios-color-active: var(--ion-text-color, #03060b);
1111

1212
/// @prop - Background color of the focused breadcrumb
13-
$breadcrumb-ios-background-focused: var(
14-
--ion-color-step-50,
15-
var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))
16-
);
13+
$breadcrumb-ios-background-focused: var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7));
1714

1815
/// @prop - Color of the breadcrumb icon
19-
$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
16+
$breadcrumb-ios-icon-color: var(--ion-text-color-step-600, #92a0b3);
2017

2118
/// @prop - Color of the breadcrumb icon when active
22-
$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
19+
$breadcrumb-ios-icon-color-active: var(--ion-text-color-step-150, #242d39);
2320

2421
/// @prop - Color of the breadcrumb icon when focused
25-
$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
22+
$breadcrumb-ios-icon-color-focused: var(--ion-text-color-step-250, #445b78);
2623

2724
/// @prop - Color of the breadcrumb separator
2825
$breadcrumb-ios-separator-color: $breadcrumb-separator-color;
@@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
3128
$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color;
3229

3330
/// @prop - Background color of the breadcrumb indicator
34-
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
31+
$breadcrumb-ios-indicator-background: var(--ion-background-color-step-100, #e9edf3);
3532

3633
/// @prop - Background color of the breadcrumb indicator when focused
37-
$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
34+
$breadcrumb-ios-indicator-background-focused: var(--ion-background-color-step-150, #d9e0ea);

‎core/src/components/breadcrumb/breadcrumb.md.vars.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
// --------------------------------------------------
55

66
/// @prop - Color of the breadcrumb
7-
$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
7+
$breadcrumb-md-color: var(--ion-text-color-step-400, #677483);
88

99
/// @prop - Color of the active breadcrumb
1010
$breadcrumb-md-color-active: var(--ion-text-color, #03060b);
1111

1212
/// @prop - Color of the focused breadcrumb
13-
$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
13+
$breadcrumb-md-color-focused: var(--ion-text-color-step-200, #35404e);
1414

1515
/// @prop - Background color of the focused breadcrumb
16-
$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
16+
$breadcrumb-md-background-focused: var(--ion-background-color-step-50, #fff);
1717

1818
/// @prop - Color of the breadcrumb icon
19-
$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
19+
$breadcrumb-md-icon-color: var(--ion-text-color-step-450, #7d8894);
2020

2121
/// @prop - Color of the breadcrumb icon when active
22-
$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
22+
$breadcrumb-md-icon-color-active: var(--ion-text-color-step-150, #222d3a);
2323

2424
/// @prop - Margin top of the breadcrumb separator
2525
$breadcrumb-md-separator-margin-top: -1px;
@@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color;
4040
$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color;
4141

4242
/// @prop - Background color of the breadcrumb indicator
43-
$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
43+
$breadcrumb-md-indicator-background: var(--ion-background-color-step-100, #eef1f3);
4444

4545
/// @prop - Background color of the breadcrumb indicator when focused
46-
$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
46+
$breadcrumb-md-indicator-background-focused: var(--ion-background-color-step-150, #dfe5e8);

‎core/src/components/breadcrumb/breadcrumb.vars.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px;
1212
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size);
1313

1414
/// @prop - Color of the breadcrumb separator
15-
$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
15+
$breadcrumb-separator-color: var(--ion-text-color-step-450, #73849a);

‎core/src/components/checkbox/test/validation/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
font-size: 12px;
2525
font-weight: normal;
2626

27-
color: var(--ion-color-step-600);
27+
color: var(--ion-text-color-step-400);
2828

2929
margin-top: 10px;
3030
margin-bottom: 5px;

‎core/src/components/datetime-button/datetime-button.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
border: none;
2525

26-
background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
26+
background: var(--ion-background-color-step-300, #edeef0);
2727

2828
color: $text-color;
2929

‎core/src/components/datetime/datetime.md.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// --------------------------------------------------
77

88
:host {
9-
--background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
9+
--background: var(--ion-background-color-step-100, #ffffff);
1010
--title-color: #{current-color(contrast)};
1111
}
1212

‎core/src/components/datetime/datetime.native.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
@include globals.border-radius(8px);
9494
@include globals.padding(6px, 12px, 6px, 12px);
9595

96-
background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
96+
background: var(--ion-background-color-step-300, #edeef0);
9797

9898
color: globals.$text-color;
9999
}

‎core/src/components/input/test/validation/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
font-size: 12px;
2525
font-weight: normal;
2626

27-
color: var(--ion-color-step-600);
27+
color: var(--ion-text-color-step-400);
2828

2929
margin-top: 10px;
3030
margin-bottom: 5px;

0 commit comments

Comments
 (0)