feat(many): remove last bit of steps

Author: thetaPC

core/src/components/modal/modal.ios.scss

@@ -5,6 +5,10 @@
 // --------------------------------------------------
 
 :host {
+  --ion-background-color: var(--ion-components-ion-modal-bg);
+  --ion-toolbar-background: var(--ion-components-ion-modal-toolbar-background);
+  --ion-toolbar-border-color: var(--ion-components-ion-modal-toolbar-border-color);
+
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 }
 

core/src/css/palettes/dark.scss

@@ -138,12 +138,6 @@ $colors: (
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
   }
-
-  & ion-modal {
-    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
-    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
-    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
-  }
 }
 
 @mixin dark-md-palette() {

core/src/css/palettes/high-contrast-dark.scss

@@ -129,9 +129,6 @@ $lightest-text-color: $text-color;
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
 
-    /// Only the item borders should increase in contrast
-    /// Borders for elements like toolbars should remain the same
-    --ion-item-border-color: var(--ion-background-color-step-400);
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -171,16 +168,6 @@ $lightest-text-color: $text-color;
     --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};
     --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};
   }
-
-  // Modal
-  // --------------------------------------------------
-
-  // TODO(FW-4005): Implement these to ionic modular
-  & ion-modal {
-    --ion-background-color: var(--ion-background-color-step-100);
-    --ion-toolbar-background: var(--ion-background-color-step-150);
-    --ion-toolbar-border-color: var(--ion-background-color-step-250);
-  }
 }
 
 @mixin high-contrast-dark-md-palette() {
@@ -197,10 +184,6 @@ $lightest-text-color: $text-color;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
     --ion-card-background: #1e1e1e;
-    // TODO(FW-4005): Implement these to ionic modular
-    /// Only the item borders should increase in contrast
-    /// Borders for elements like toolbars should remain the same
-    --ion-item-border-color: var(--ion-background-color-step-400);
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};

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

@@ -26,8 +26,8 @@ export const darkTheme: DarkTheme = {
       background: '#000000',
     },
     IonModal: {
-      background: 'var(--ion-color-gray-100)',
-      toolbarBackground: 'var(--ion-color-gray-150)',
+      bg: 'var(--ion-color-gray-100)',
+      toolbarBg: 'var(--ion-color-gray-150)',
       toolbarBorderColor: 'var(--ion-color-gray-250)',
     },
   },

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

@@ -100,7 +100,7 @@ export const defaultTheme: DefaultTheme = {
     },
     IonItem: {
       paragraphTextColor: 'var(--ion-color-text-450)',
-      borderColor: 'var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-250)))',
+      borderColor: 'var(--ion-components-ion-item-border-color, var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-250))))',
     },
     IonModal: {
       handleBg: 'var(--ion-color-gray-350)',

core/src/themes/ios/high-contrast-dark.tokens.ts

@@ -3,4 +3,17 @@ import type { HighContrastDarkTheme } from '../themes.interfaces';
 
 export const highContrastDarkTheme: HighContrastDarkTheme = {
   ...baseHighContrastDarkTheme,
+
+  components: {
+    IonItem: {
+      /// Only the item borders should increase in contrast
+      /// Borders for elements like toolbars should remain the same
+      borderColor: 'var(--ion-color-gray-400)',
+    },
+    IonModal: {
+      bg: 'var(--ion-color-gray-100)',
+      toolbarBg: 'var(--ion-color-gray-150)',
+      toolbarBorderColor: 'var(--ion-color-gray-250)',
+    },
+  }
 };

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

@@ -29,7 +29,7 @@ export const lightTheme: LightTheme = {
     },
     IonItem: {
       paragraphTextColor: '#a3a3a3',
-      borderColor: 'var(--ion-item-border-color, var(--ion-border-color, #c8c7cc))',
+      borderColor: 'var(--ion-components-ion-item-border-color, var(--ion-item-border-color, var(--ion-border-color, #c8c7cc)))',
     },
     IonModal: {
       handleBg: '#c0c0be',

core/src/themes/md/default.tokens.ts

@@ -100,7 +100,7 @@ export const defaultTheme: DefaultTheme = {
       bg: 'var(--ion-color-gray-300)',
     },
     IonItem: {
-      borderColor: 'var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
+      borderColor: 'var(--ion-components-ion-item-border-color, var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-150))))',
     },
     IonModal: {
       handleBg: 'var(--ion-color-gray-350)',

core/src/themes/md/high-contrast-dark.tokens.ts

@@ -3,4 +3,12 @@ import type { HighContrastDarkTheme } from '../themes.interfaces';
 
 export const highContrastDarkTheme: HighContrastDarkTheme = {
   ...baseHighContrastDarkTheme,
+
+  components: {
+    IonItem: {
+      /// Only the item borders should increase in contrast
+      /// Borders for elements like toolbars should remain the same
+      borderColor: 'var(--ion-color-gray-400)',
+    }
+  }
 };

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

@@ -18,7 +18,7 @@ export const lightTheme: LightTheme = {
       timeBodyBg: '#edeef0',
     },
     IonItem: {
-      borderColor: 'var(--ion-item-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.13)))',
+      borderColor: 'var(--ion-components-ion-item-border-color, var(--ion-item-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.13))))',
     },
     IonModal: {
       handleBg: '#c0c0be',