feat(item, item-divider, list-header): use gray tokens

Author: thetaPC

core/src/components/item-divider/item-divider.ios.vars.scss

@@ -14,10 +14,10 @@ $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: var(--ion-color-gray-100);
 
 /// @prop - Color for the divider
-$item-divider-ios-color: $text-color-step-150;
+$item-divider-ios-color: var(--ion-color-gray-850);
 
 /// @prop - Padding start for the divider
 $item-divider-ios-padding-start: $item-ios-padding-start;

core/src/components/item-divider/item-divider.md.vars.scss

@@ -8,7 +8,7 @@
 $item-divider-md-min-height: 30px;
 
 /// @prop - Color for the divider
-$item-divider-md-color: $text-color-step-600;
+$item-divider-md-color: var(--ion-color-gray-400);
 
 /// @prop - Background for the divider
 $item-divider-md-background: $background-color;

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

@@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
 $item-ios-paragraph-font-size: dynamic-font(14px);
 
 /// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
+$item-ios-paragraph-text-color: var(--ion-components-ion-item-paragraph-text-color);
 
 /// @prop - Width of the avatar in the item
 $item-ios-avatar-width: 36px;

core/src/components/item/item.md.vars.scss

@@ -7,7 +7,7 @@
 $item-md-min-height: 48px;
 
 /// @prop - Color of the item paragraph
-$item-md-paragraph-text-color: $text-color-step-400;
+$item-md-paragraph-text-color: var(--ion-color-gray-600);
 
 /// @prop - Font size of the item
 $item-md-font-size: 16px;

core/src/components/list-header/list-header.ios.vars.scss

@@ -17,7 +17,7 @@ $list-header-ios-font-weight: 700;
 $list-header-ios-letter-spacing: 0;
 
 /// @prop - Text color of the list header
-$list-header-ios-color: $text-color-step-150;
+$list-header-ios-color: var(--ion-color-gray-850);
 
 /// @prop - Background color of the list header
 $list-header-ios-background-color: transparent;

core/src/themes/ios/dark.tokens.ts

@@ -66,6 +66,7 @@ export const darkTheme: DarkTheme = {
     },
     IonItem: {
       background: '#000000',
+      paragraphTextColor: colors.gray['450']!,
     },
     IonModal: {
       background: 'var(--ion-background-color-step-100)',

core/src/themes/ios/light.tokens.ts

@@ -24,5 +24,8 @@ export const lightTheme: LightTheme = {
       indicatorBgFocused: '#d9e0ea',
       separatorColor: '#73849a',
     },
+    IonItem: {
+      paragraphTextColor: '#a3a3a3',
+    },
   },
 };