feat(breadcrumb): use gray tokens

Author: thetaPC

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

@@ -4,25 +4,22 @@
 // --------------------------------------------------
 
 /// @prop - Color of the breadcrumb
-$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
+$breadcrumb-ios-color: var(--ion-components-ion-breadcrumb-color);
 
 /// @prop - Color of the active breadcrumb
 $breadcrumb-ios-color-active: var(--ion-text-color, #03060b);
 
 /// @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))
-);
+$breadcrumb-ios-background-focused: var(--ion-components-ion-breadcrumb-bg-focused);
 
 /// @prop - Color of the breadcrumb icon
-$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
+$breadcrumb-ios-icon-color: var(--ion-components-ion-breadcrumb-icon-color);
 
 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
+$breadcrumb-ios-icon-color-active: var(--ion-components-ion-breadcrumb-icon-color-active);
 
 /// @prop - Color of the breadcrumb icon when focused
-$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
+$breadcrumb-ios-icon-color-focused: var(--ion-components-ion-breadcrumb-icon-color-focused);
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
@@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
 $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color;
 
 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
+$breadcrumb-ios-indicator-background: var(--ion-components-ion-breadcrumb-indicator-bg);
 
 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
+$breadcrumb-ios-indicator-background-focused: var(--ion-components-ion-breadcrumb-indicator-bg-focused);

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-400, #677483));
+$breadcrumb-md-color: var(--ion-components-ion-breadcrumb-color);
 
 /// @prop - Color of the active breadcrumb
 $breadcrumb-md-color-active: var(--ion-text-color, #03060b);
 
 /// @prop - Color of the focused breadcrumb
-$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
+$breadcrumb-md-color-focused: var(--ion-components-ion-breadcrumb-color-focused);
 
 /// @prop - Background color of the focused breadcrumb
-$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
+$breadcrumb-md-background-focused: var(--ion-components-ion-breadcrumb-bg-focused);
 
 /// @prop - Color of the breadcrumb icon
-$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
+$breadcrumb-md-icon-color: var(--ion-components-ion-breadcrumb-icon-color);
 
 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
+$breadcrumb-md-icon-color-active: var(--ion-components-ion-breadcrumb-icon-color-active);
 
 /// @prop - Margin top of the breadcrumb separator
 $breadcrumb-md-separator-margin-top: -1px;
@@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color;
 $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color;
 
 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
+$breadcrumb-md-indicator-background: var(--ion-components-ion-breadcrumb-indicator-bg);
 
 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
+$breadcrumb-md-indicator-background-focused: var(--ion-components-ion-breadcrumb-indicator-bg-focused);

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

@@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px;
 $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size);
 
 /// @prop - Color of the breadcrumb separator
-$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+$breadcrumb-separator-color: var(--ion-components-ion-breadcrumb-separator-color);