refactor(themes): clean up colors

Author: thetaPC

core/src/themes/base/dark.tokens.primitives.ts

@@ -1,9 +1,9 @@
-import { mix } from '../../utils/theme';
+import { mix, generateColorSteps } from '../../utils/theme';
 import type { DarkTheme } from '../themes.interfaces';
 
-import { darkPrimitiveColors } from './dark.tokens.primitives';
+import { colors as defaultColors } from './default.tokens';
 
-const colors = {
+export const colors = {
   primary: '#4d8dff',
   secondary: '#46b1ff',
   tertiary: '#8482fb',
@@ -13,7 +13,7 @@ const colors = {
   light: '#222428',
   medium: '#989aa2',
   dark: '#f4f5f8',
-  ...darkPrimitiveColors,
+  gray: generateColorSteps(defaultColors.white, defaultColors.black, true),
 };
 
 export const darkTheme: DarkTheme = {

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

@@ -1,11 +1,17 @@
+import { generateColorSteps } from '../../utils/theme';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
-import { defaultPrimitiveColors } from './default.tokens.primitives';
 import { highContrastDarkTheme } from './high-contrast-dark.tokens';
 import { highContrastTheme } from './high-contrast.tokens';
 import { lightTheme } from './light.tokens';
 
+export const colors = {
+  white: '#ffffff',
+  black: '#000000',
+  gray: generateColorSteps('#fff', '#000'),
+};
+
 export const defaultTheme: DefaultTheme = {
   name: 'base',
 
@@ -166,11 +172,11 @@ export const defaultTheme: DefaultTheme = {
     xxl: '2.4',
   },
 
-  // TODO: Note to self: these colors are applied to all themes unless overridden in a specific theme
   color: {
-    ...defaultPrimitiveColors,
-    text: defaultPrimitiveColors.gray,
+    ...colors,
+    text: colors.gray,
   },
+
   components: {
     IonBreadcrumb: {
       separatorColor: 'var(--ion-color-text-550)',

core/src/themes/base/default.tokens.primitives.ts

@@ -1,7 +1,8 @@
 import { generateColorSteps, mix } from '../../utils/theme';
 import type { HighContrastDarkTheme } from '../themes.interfaces';
 
-import { darkPrimitiveColors as baseDarkPrimitiveColors } from './dark.tokens.primitives';
+import { colors as defaultDarkColors } from './dark.tokens';
+import { colors as defaultColors } from './default.tokens';
 
 const colors = {
   primary: '#7cabff',
@@ -13,7 +14,7 @@ const colors = {
   light: '#222428',
   medium: '#a8aab3',
   dark: '#f4f5f8',
-  ...baseDarkPrimitiveColors,
+  gray: defaultDarkColors.gray,
 };
 
 export const highContrastDarkTheme: HighContrastDarkTheme = {
@@ -167,8 +168,8 @@ export const highContrastDarkTheme: HighContrastDarkTheme = {
     text: generateColorSteps('#ffffff', '#888888', true),
   },
 
-  backgroundColor: '#000000',
+  backgroundColor: defaultColors.black,
   backgroundColorRgb: '0, 0, 0',
-  textColor: '#ffffff',
+  textColor: defaultColors.white,
   textColorRgb: '255, 255, 255',
 };

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

@@ -1,6 +1,8 @@
 import { generateColorSteps, mix } from '../../utils/theme';
 import type { HighContrastTheme } from '../themes.interfaces';
 
+import { colors as defaultColors } from './default.tokens';
+
 const colors = {
   primary: '#003fae',
   secondary: '#01487b',
@@ -160,11 +162,11 @@ export const highContrastTheme: HighContrastTheme = {
         tint: mix('#fff', colors.dark, '4%'),
       },
     },
-    text: generateColorSteps('#888888', '#000000'),
+    text: generateColorSteps('#888888', defaultColors.black),
   },
 
-  backgroundColor: '#ffffff',
+  backgroundColor: defaultColors.white,
   backgroundColorRgb: '255, 255, 255',
-  textColor: '#000000',
+  textColor: defaultColors.black,
   textColorRgb: '0, 0, 0',
 };

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

@@ -1,11 +1,11 @@
-import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
-import { darkPrimitiveColors as baseDarkPrimitiveColors } from '../base/dark.tokens.primitives';
+import { darkTheme as baseDarkTheme, colors as defaultDarkColors } from '../base/dark.tokens';
+import { colors as defaultColors } from '../base/default.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
 const colors = {
-  background: '#000000',
-  textColor: '#ffffff',
-  gray: baseDarkPrimitiveColors.gray,
+  background: defaultColors.black,
+  textColor: defaultColors.white,
+  gray: defaultDarkColors.gray,
 };
 
 export const darkTheme: DarkTheme = {

core/src/themes/base/high-contrast.tokens.ts

@@ -1,8 +1,8 @@
-import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
+import { colors as defaultColors } from '../base/default.tokens';
 import type { LightTheme } from '../themes.interfaces';
 
 const colors = {
-  gray: defaultPrimitiveColors.gray,
+  gray: defaultColors.gray,
 };
 
 export const lightTheme: LightTheme = {
@@ -12,7 +12,7 @@ export const lightTheme: LightTheme = {
   },
   components: {
     IonActionSheet: {
-      buttonBgSelected: `var(--ion-background-color, ${defaultPrimitiveColors.white})`,
+      buttonBgSelected: `var(--ion-background-color, ${defaultColors.white})`,
     },
     IonDatetime: {
       timeBodyBg: '#edeef0',
@@ -44,7 +44,7 @@ export const lightTheme: LightTheme = {
       nativeSpinnerColor: '#747577', // Available only in iOS
     },
     IonSegmentButton: {
-      checkedIndicatorBg: defaultPrimitiveColors.white, // Available only in iOS
+      checkedIndicatorBg: defaultColors.white, // Available only in iOS
     },
     IonTabbar: {
       bg: 'var(--ion-tab-bar-background-color, #f7f7f7)',

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

@@ -1,9 +1,10 @@
 import { generateColorSteps } from '../../utils/theme';
 import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
+import { colors as defaultColors } from '../base/default.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
 const colors = {
-  gray: generateColorSteps('#ffffff', '#121212', true),
+  gray: generateColorSteps(defaultColors.white, '#121212', true),
 };
 
 export const darkTheme: DarkTheme = {

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

@@ -1,11 +1,11 @@
-import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
+import { colors as defaultColors } from '../base/default.tokens';
 import type { LightTheme } from '../themes.interfaces';
 
 export const lightTheme: LightTheme = {
   components: {
     IonBreadcrumb: {
       color: '#677483',
-      bgFocused: defaultPrimitiveColors.white,
+      bgFocused: defaultColors.white,
       iconColor: '#7d8894',
       iconColorActive: '#222d3a',
       indicatorBg: '#eef1f3',
@@ -14,7 +14,7 @@ export const lightTheme: LightTheme = {
       separatorColor: '#73849a',
     },
     IonDatetime: {
-      bg: defaultPrimitiveColors.white,
+      bg: defaultColors.white,
       timeBodyBg: '#edeef0',
     },
     IonItem: {