From b27280d7d09dcd3c0af6dc3998ac754fd1b5dddf Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Tue, 30 Jan 2024 17:54:04 -0500 Subject: [PATCH 1/5] refactor(breadcrumb): use new step color tokens --- .../components/breadcrumb/breadcrumb.ios.vars.scss | 14 +++++++------- .../components/breadcrumb/breadcrumb.md.vars.scss | 14 +++++++------- .../src/components/breadcrumb/breadcrumb.vars.scss | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 3b495309db9..7c14481503f 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, #2d4665) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-850, #2d4665)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, rgba(233, 237, 243, 0.7)) !default; +$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50,rgba(233, 237, 243, 0.7))) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, #92a0b3) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-400, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, #242d39) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-850, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, #445b78) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-750, #445b78)) !default; /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; @@ -28,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color ! $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, #e9edf3) !default; +$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, #d9e0ea) !default; +$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 81fc146e489..a076bfa40b4 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, #677483) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-600, #677483)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, #35404e) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-800, #35404e)) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, #fff) !default; +$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, #7d8894) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-550, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, #222d3a) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-850, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px !default; @@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, #eef1f3) !default; +$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, #dfe5e8) !default; +$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 3322672a5bd..5dbfb2a7588 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, #73849a) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-text-color-step-550, #73849a)) !default; From 337d6f46b5d3c95759d98ceebf37209f21caca37 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 31 Jan 2024 11:15:25 -0500 Subject: [PATCH 2/5] subract from 1000 --- .../src/components/breadcrumb/breadcrumb.ios.vars.scss | 10 +++++----- core/src/components/breadcrumb/breadcrumb.md.vars.scss | 8 ++++---- core/src/components/breadcrumb/breadcrumb.vars.scss | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 7c14481503f..f2c8087ec2a 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-850, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-150, var(--ion-text-color-step-850, #2d4665)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50,rgba(233, 237, 243, 0.7))) !default; +$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-400, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-850, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-150, var(--ion-text-color-step-850, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-750, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-250, var(--ion-text-color-step-750, #445b78)) !default; /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index a076bfa40b4..46fb7fa596f 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-600, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #677483)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-800, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-200, var(--ion-text-color-step-800, #35404e)) !default; /// @prop - Background color of the focused breadcrumb $breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-550, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-450, var(--ion-text-color-step-550, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-850, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-150, var(--ion-text-color-step-850, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px !default; diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 5dbfb2a7588..6eb2ae5293d 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-text-color-step-550, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-450, var(--icon-text-color-step-550, #73849a)) !default; From 8f5905a192bed97adafcc6057911aac3cbae494b Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 31 Jan 2024 14:50:15 -0500 Subject: [PATCH 3/5] use background color --- core/src/components/breadcrumb/breadcrumb.ios.vars.scss | 8 ++++---- core/src/components/breadcrumb/breadcrumb.md.vars.scss | 8 ++++---- core/src/components/breadcrumb/breadcrumb.vars.scss | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index f2c8087ec2a..1b249dfa5b0 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-150, var(--ion-text-color-step-850, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-background-color-step-850, #2d4665)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; @@ -13,13 +13,13 @@ $breadcrumb-ios-color-active: var(--ion-text-color, #03060b $breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-background-color-step-400, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-150, var(--ion-text-color-step-850, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-background-color-step-850, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-250, var(--ion-text-color-step-750, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-background-color-step-750, #445b78)) !default; /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 46fb7fa596f..dd6cedb762f 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-background-color-step-600, #677483)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-200, var(--ion-text-color-step-800, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-background-color-step-800, #35404e)) !default; /// @prop - Background color of the focused breadcrumb $breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-450, var(--ion-text-color-step-550, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-150, var(--ion-text-color-step-850, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-background-color-step-850, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px !default; diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 6eb2ae5293d..a166eeeee5b 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-450, var(--icon-text-color-step-550, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-background-color-step-550, #73849a)) !default; From 86ce5d1803930a8c1d8a1b9c6c94e19a6779e28f Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 31 Jan 2024 15:43:33 -0500 Subject: [PATCH 4/5] change text back to text tokens --- core/src/components/breadcrumb/breadcrumb.ios.vars.scss | 2 +- core/src/components/breadcrumb/breadcrumb.md.vars.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 1b249dfa5b0..ecb71e2a968 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-background-color-step-850, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index dd6cedb762f..c9e900929f2 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-background-color-step-600, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-background-color-step-800, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; /// @prop - Background color of the focused breadcrumb $breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; From 21dedc8cce11f20a47add1b2fe260afdf66ef083 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 31 Jan 2024 15:53:07 -0500 Subject: [PATCH 5/5] change icons to use text colors --- core/src/components/breadcrumb/breadcrumb.ios.vars.scss | 6 +++--- core/src/components/breadcrumb/breadcrumb.md.vars.scss | 4 ++-- core/src/components/breadcrumb/breadcrumb.vars.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index ecb71e2a968..97a91a74ccf 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -13,13 +13,13 @@ $breadcrumb-ios-color-active: var(--ion-text-color, #03060b $breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-background-color-step-400, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-background-color-step-850, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-background-color-step-750, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index c9e900929f2..d638047353d 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -16,10 +16,10 @@ $breadcrumb-md-color-focused: var(--ion-color-step-800, v $breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-background-color-step-850, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px !default; diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index a166eeeee5b..17a4b56ee9f 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-background-color-step-550, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-text-color-step-450, #73849a)) !default;