From 6498f168e132e5c2397fc8f8f52fd9a5a6a49d8b Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 3 Oct 2025 16:32:06 -0400 Subject: [PATCH 01/14] feat(themes): add new tokens and definitions --- core/src/themes/base/dark.tokens.ts | 58 +++++++++++++ core/src/themes/base/default.tokens.ts | 99 ++++++++++++++++------ core/src/themes/themes.interfaces.ts | 111 +++++++++++++++++++------ 3 files changed, 219 insertions(+), 49 deletions(-) diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 0a185044154..a2f248959a2 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -161,4 +161,62 @@ export const darkTheme: DarkTheme = { }, }, }, + + backgroundColor: '#000000', + backgroundColorRgb: '0, 0, 0', + textColor: '#ffffff', + textColorRgb: '255, 255, 255', + + backgroundColorStep: { + 50: '#0d0d0d', + 100: '#1a1a1a', + 150: '#262626', + 200: '#333333', + 250: '#404040', + 300: '#4d4d4d', + 350: '#595959', + 400: '#666666', + 450: '#737373', + 500: '#898989', + 550: '#8c8c8c', + 600: '#999999', + 650: '#a6a6a6', + 700: '#b3b3b3', + 750: '#bfbfbf', + 800: '#cccccc', + 850: '#d9d9d9', + 900: '#e6e6e6', + 950: '#f2f2f2', + }, + + textColorStep: { + 50: '#f2f2f2', + 100: '#e6e6e6', + 150: '#d9d9d9', + 200: '#cccccc', + 250: '#bfbfbf', + 300: '#b3b3b3', + 350: '#a6a6a6', + 400: '#999999', + 450: '#8c8c8c', + 500: '#808080', + 550: '#737373', + 600: '#666666', + 650: '#595959', + 700: '#4d4d4d', + 750: '#404040', + 800: '#333333', + 850: '#262626', + 900: '#1a1a1a', + 950: '#0d0d0d', + }, + + components: { + IonCard: { + background: '#1c1c1d', + }, + IonItem: { + background: '#000000', + }, + } }; diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index e6009c9c4e4..edc175cb542 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -4,24 +4,49 @@ import { darkTheme } from './dark.tokens'; import { lightTheme } from './light.tokens'; export const defaultTheme: DefaultTheme = { + name: 'base', + palette: { light: lightTheme, dark: darkTheme, }, + formHighlight: false, + rippleEffect: false, + spacing: { - none: '0', - xxs: '4px', - xs: '6px', - sm: '8px', - md: '12px', - lg: '16px', - xl: '24px', - xxl: '32px', + 0: '0px', + 50: '2px', + 100: '4px', + 150: '6px', + 200: '8px', + 250: '10px', + 300: '12px', + 350: '14px', + 400: '16px', + 450: '18px', + 500: '20px', + 550: '22px', + 600: '24px', + 650: '26px', + 700: '28px', + 750: '30px', + 800: '32px', + 850: '34px', + 900: '36px', + 950: '38px', + 1000: '40px', + 1050: '42px', + 1100: '44px', + 1150: '46px', + 1200: '48px', }, scaling: { - 0: '0', + 0: '0px', + 25: '1px', + 50: '2px', + 75: '3px', 100: '4px', 150: '6px', 200: '8px', @@ -39,28 +64,52 @@ export const defaultTheme: DefaultTheme = { 800: '32px', 850: '34px', 900: '36px', + 950: '38px', + 1000: '40px', + 1050: '42px', + 1100: '44px', + 1150: '46px', + 1200: '48px', + 1400: '56px', + 1600: '64px', + 1800: '72px', + 2000: '80px', + 2400: '96px', + 2800: '112px', + 3200: '128px', + 3400: '136px', + 3600: '144px', + 4000: '160px', + 5000: '200px', + 6200: '248px', + 7400: '296px', + 9000: '360px', }, borderWidth: { - none: '0', - xxs: '1px', - xs: '2px', - sm: '4px', - md: '6px', - lg: '8px', - xl: '10px', - xxl: '12px', + 25: '1px', + 50: '2px', + 75: '3px', + 100: '4px', + 150: '6px', + 200: '8px', + 250: '10px', + 300: '12px', + 350: '14px', + 400: '16px', }, radii: { - none: '0', - xxs: '1px', - xs: '2px', - sm: '4px', - md: '8px', - lg: '12px', - xl: '16px', - xxl: '32px', + 0: '0px', + 25: '2px', + 100: '4px', + 200: '8px', + 300: '12px', + 400: '16px', + 500: '20px', + 800: '32px', + 1000: '40px', + 'full': '999px', }, dynamicFont: '-apple-system-body', diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index 3d5ac09a4e0..ecdbd8a4304 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -3,20 +3,56 @@ export type PlatformTheme = Omit; // Base tokens for all palettes export type BaseTheme = { + // CONFIG TOKENS + rippleEffect?: boolean; + formHighlight?: boolean; + + // GLOBAL THEME TOKENS + backgroundColor?: string; + backgroundColorRgb?: string; + textColor?: string; + textColorRgb?: string; + backgroundColorStep?: { + [key: string]: string; + } + textColorStep?: { + [key: string]: string; + } + // SPACE TOKENS spacing?: { - none?: string; - xxs?: string; - xs?: string; - sm?: string; - md?: string; - lg?: string; - xl?: string; - xxl?: string; + 0?: string; + 50?: string; + 100?: string; + 150?: string; + 200?: string; + 250?: string; + 300?: string; + 350?: string; + 400?: string; + 450?: string; + 500?: string; + 550?: string; + 600?: string; + 650?: string; + 700?: string; + 750?: string; + 800?: string; + 850?: string; + 900?: string; + 950?: string; + 1000?: string; + 1050?: string; + 1100?: string; + 1150?: string; + 1200?: string; }; scaling?: { 0?: string; + 25?: string; + 50?: string; + 75?: string; 100?: string; 150?: string; 200?: string; @@ -34,29 +70,54 @@ export type BaseTheme = { 800?: string; 850?: string; 900?: string; + 950?: string; + 1000?: string; + 1050?: string; + 1100?: string; + 1150?: string; + 1200?: string; + 1400?: string; + 1600?: string; + 1800?: string; + 2000?: string; + 2400?: string; + 2800?: string; + 3200?: string; + 3400?: string; + 3600?: string; + 4000?: string; + 5000?: string; + 6200?: string; + 7400?: string; + 9000?: string; }; // APPEARANCE TOKENS borderWidth?: { - none?: string; - xxs?: string; - xs?: string; - sm?: string; - md?: string; - lg?: string; - xl?: string; - xxl?: string; + 0?: string; + 25?: string; + 50?: string; + 75?: string; + 100?: string; + 150?: string; + 200?: string; + 250?: string; + 300?: string; + 350?: string; + 400?: string; }; radii?: { - none?: string; - xxs?: string; - xs?: string; - sm?: string; - md?: string; - lg?: string; - xl?: string; - xxl?: string; + 0?: string; + 25?: string; + 100?: string; + 200?: string; + 300?: string; + 400?: string; + 500?: string; + 800?: string; + 1000?: string; + full?: string; }; // TYPOGRAPHY TOKENS @@ -138,6 +199,8 @@ export type LightTheme = BaseTheme; // Default theme interface export type DefaultTheme = BaseTheme & { + name?: string; + palette?: { light?: LightTheme; dark?: DarkTheme; From f16b58b36cc5f97337a4dddbce6c98d66016d94a Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 3 Oct 2025 16:32:44 -0400 Subject: [PATCH 02/14] feat(themes): add ionic theme tokens --- core/src/themes/ionic/dark.tokens.ts | 3 +- core/src/themes/ionic/default.tokens.ts | 103 +++++++++++++++ core/src/themes/ionic/light.tokens.ts | 166 +++--------------------- 3 files changed, 124 insertions(+), 148 deletions(-) diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts index be0b93d4947..8e7222b581a 100644 --- a/core/src/themes/ionic/dark.tokens.ts +++ b/core/src/themes/ionic/dark.tokens.ts @@ -1,5 +1,6 @@ +import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; export const darkTheme: DarkTheme = { - enabled: 'never', + ...baseDarkTheme, }; diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index 15df8d0c2c1..0f35043ab43 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -1,11 +1,114 @@ +import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; import { lightTheme } from './light.tokens'; export const defaultTheme: DefaultTheme = { + ...baseDefaultTheme, + + name: 'ionic', + palette: { light: lightTheme, dark: darkTheme, }, + + formHighlight: false, + rippleEffect: false, + + spacing: { + 0: '0px', + 50: '2px', + 100: '4px', + 150: '6px', + 200: '8px', + 250: '10px', + 300: '12px', + 350: '14px', + 400: '16px', + 450: '18px', + 500: '20px', + 550: '22px', + 600: '24px', + 650: '26px', + 700: '28px', + 750: '30px', + 800: '32px', + 850: '34px', + 900: '36px', + 950: '38px', + 1000: '40px', + 1050: '42px', + 1100: '44px', + 1150: '46px', + 1200: '48px', + }, + + scaling: { + 0: '0px', + 25: '1px', + 50: '2px', + 75: '3px', + 100: '4px', + 150: '6px', + 200: '8px', + 250: '10px', + 300: '12px', + 350: '14px', + 400: '16px', + 450: '18px', + 500: '20px', + 550: '22px', + 600: '24px', + 650: '26px', + 700: '28px', + 750: '30px', + 800: '32px', + 850: '34px', + 900: '36px', + 950: '38px', + 1000: '40px', + 1050: '42px', + 1100: '44px', + 1150: '46px', + 1200: '48px', + 1400: '56px', + 1600: '64px', + 1800: '72px', + 2000: '80px', + 2400: '96px', + 2800: '112px', + 3200: '128px', + 3400: '136px', + 3600: '144px', + 4000: '160px', + 5000: '200px', + 6200: '248px', + 7400: '296px', + 9000: '360px', + }, + + radii: { + 0: '0px', + 25: '2px', + 100: '4px', + 200: '8px', + 300: '12px', + 400: '16px', + 500: '20px', + 800: '32px', + 1000: '40px', + 'full': '999px', + }, + + borderWidth: { + 0: '0', + 25: '1px', + 50: '2px', + 75: '3px', + 100: '4px', + 150: '6px', + 200: '8px', + }, }; diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts index 2ef8696a576..43e441325f1 100644 --- a/core/src/themes/ionic/light.tokens.ts +++ b/core/src/themes/ionic/light.tokens.ts @@ -1,151 +1,23 @@ import type { LightTheme } from '../themes.interfaces'; -// TODO(): this should be removed when we update the ionic theme export const lightTheme: LightTheme = { - color: { - primary: { - bold: { - base: '#105cef', // $ion-bg-primary-base-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#0d4bc3', // $ion-bg-primary-base-press - tint: '#6986f2', // $ion-semantics-primary-600 - foreground: '#0d4bc3', // $ion-text-primary - }, - subtle: { - base: '#f2f4fd', // $ion-bg-primary-subtle-default - contrast: '#0d4bc3', // $ion-text-primary - shade: '#d0d7fa', // $ion-bg-primary-subtle-press - tint: '#e9ecfc', // $ion-semantics-primary-200 - foreground: '#0d4bc3', // $ion-text-primary - }, - }, - secondary: { - bold: { - base: '#0d4bc3', // $ion-bg-info-base-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#09358a', // $ion-bg-info-base-press - tint: '#105cef', // $ion-semantics-info-700 - foreground: '#0d4bc3', // $ion-text-info - }, - subtle: { - base: '#f2f4fd', // $ion-bg-info-subtle-default - contrast: '#0d4bc3', // $ion-text-info - shade: '#d0d7fa', // $ion-bg-info-subtle-press - tint: '#e9ecfc', // $ion-semantics-info-200 - foreground: '#0d4bc3', // $ion-text-info - }, - }, - tertiary: { - bold: { - base: '#7c20f2', // $ion-primitives-violet-700 - contrast: '#ffffff', // $ion-text-inverse - shade: '#711ddd', // $ion-primitives-violet-800 - tint: '#9a6cf4', // $ion-primitives-violet-600 - foreground: '#7c20f2', // $ion-primitives-violet-700 - }, - subtle: { - base: '#f5f2fe', // $ion-primitives-violet-100 - contrast: '#7c20f2', // $ion-primitives-violet-700 - shade: '#dcd1fb', // $ion-primitives-violet-300 - tint: '#eee9fd', // $ion-primitives-violet-200 - foreground: '#7c20f2', // $ion-primitives-violet-700 - }, - }, - success: { - bold: { - base: '#126f23', // $ion-bg-success-base-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#093811', // $ion-bg-success-base-press - tint: '#178a2b', // $ion-semantics-success-800 - foreground: '#126f23', // $ion-text-success - }, - subtle: { - base: '#ebf9ec', // $ion-bg-success-subtle-default - contrast: '#126f23', // $ion-text-success - shade: '#b3ebb7', // $ion-bg-success-subtle-press - tint: '#dcf5de', // $ion-semantics-success-200 - foreground: '#126f23', // $ion-text-success - }, - }, - warning: { - bold: { - base: '#ffd600', // $ion-bg-warning-base-default - contrast: '#242424', // $ion-text-default - shade: '#df9c00', // $ion-bg-warning-base-press - tint: '#ffebb1', // $ion-primitives-yellow-300 - foreground: '#704b02', // $ion-text-warning - }, - subtle: { - base: '#fff5db', // $ion-bg-warning-subtle-default - contrast: '#704b02', // $ion-text-warning - shade: '#ffe07b', // $ion-bg-warning-subtle-press - tint: '#fff9ea', // $ion-primitives-yellow-100 - foreground: '#704b02', // $ion-text-warning - }, - }, - danger: { - bold: { - base: '#bf2222', // $ion-bg-danger-base-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#761515', // $ion-bg-danger-base-press - tint: '#e52929', // $ion-semantics-danger-700 - foreground: '#991b1b', // $ion-text-danger - }, - subtle: { - base: '#feeded', // $ion-bg-danger-subtle-default - contrast: '#991b1b', // $ion-text-danger - shade: '#fcc1c1', // $ion-bg-danger-subtle-press - tint: '#fde1e1', // $ion-semantics-danger-200 - foreground: '#991b1b', // $ion-text-danger - }, - }, - light: { - bold: { - base: '#a2a2a2', // $ion-bg-neutral-base-default - contrast: '#242424', // $ion-text-default - shade: '#8c8c8c', // $ion-primitives-neutral-600 - tint: '#d5d5d5', // $ion-primitives-neutral-400 - foreground: '#242424', // $ion-text-default - }, - subtle: { - base: '#ffffff', // $ion-bg-neutral-subtlest-default - contrast: '#242424', // $ion-text-default - shade: '#efefef', // $ion-bg-neutral-subtlest-press - tint: '#f5f5f5', // $ion-primitives-neutral-100 - foreground: '#242424', // $ion-text-default - }, - }, - medium: { - bold: { - base: '#3b3b3b', // $ion-bg-neutral-bold-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#242424', // $ion-bg-neutral-bold-press - tint: '#4e4e4e', // $ion-primitives-neutral-900 - foreground: '#242424', // $ion-text-default - }, - subtle: { - base: '#efefef', // $ion-bg-neutral-subtle-default - contrast: '#626262', // $ion-text-subtlest - shade: '#d5d5d5', // $ion-bg-neutral-subtle-press - tint: '#f5f5f5', // $ion-primitives-neutral-100 - foreground: '#242424', // $ion-text-default - }, - }, - dark: { - bold: { - base: '#242424', // $ion-bg-neutral-boldest-default - contrast: '#ffffff', // $ion-text-inverse - shade: '#111111', // $ion-bg-neutral-boldest-press - tint: '#292929', // $ion-primitives-neutral-1100 - foreground: '#242424', // $ion-text-default - }, - subtle: { - base: '#efefef', // $ion-bg-neutral-subtle-default - contrast: '#3b3b3b', // $ion-text-subtle - shade: '#d5d5d5', // $ion-bg-neutral-subtle-press - tint: '#f5f5f5', // $ion-primitives-neutral-100 - foreground: '#242424', // $ion-text-default - }, - }, - }, + backgroundColor: '#ffffff', + textColor: '#000000', + + components: { + IonCard: { + background: '#ffffff', + }, + IonItem: { + background: '#ffffff', + }, + IonTabBar: { + background: 'var(--ion-tab-bar-background, #ffffff)', + backgroundActivated: 'var(--ion-tab-bar-background-activated, #f2f4fd)', + backgroundFocused: 'var(--ion-tab-bar-background-focused, transparent)', + color: 'var(--ion-tab-bar-color, #626262)', + colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)', + borderColor: 'var(--ion-tab-bar-border-color, transparent)', + } + } }; From 1a81b0fd2735c240d6a297caf59e6c9b53e52064 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 3 Oct 2025 16:34:58 -0400 Subject: [PATCH 03/14] test(themes): update basic test for new tokens --- core/src/themes/test/basic/index.html | 302 ++++++++------------------ 1 file changed, 91 insertions(+), 211 deletions(-) diff --git a/core/src/themes/test/basic/index.html b/core/src/themes/test/basic/index.html index 81bfba8139f..ef11dac4dad 100644 --- a/core/src/themes/test/basic/index.html +++ b/core/src/themes/test/basic/index.html @@ -16,11 +16,25 @@ @@ -211,78 +95,74 @@
-
-

Scaling

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Spacing

-
-
none
+
+
+

Border Width

+
-
-
xxs
+
+

Radii

+
-
-
xs
-
-
-
sm
-
-
-
md
-
-
-
lg
-
-
-
xl
+
+
+
+

Scaling

+
-
-
xxl
+
+

Spacing

+
-
-

Radii

-
none
-
xxs
-
xs
-
sm
-
md
-
lg
-
xl
-
xxl
-
-
-

Border Width

-
none
-
xxs
-
xs
-
sm
-
md
-
lg
-
xl
-
xxl
-
+ + From 6390d17012eebdaa9e37ba8eb86cbdbdc304811d Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 6 Oct 2025 16:13:37 -0400 Subject: [PATCH 04/14] refactor(themes): exclude certain keys from generated css variables --- core/src/utils/test/theme.spec.ts | 4 ++-- core/src/utils/theme.ts | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/core/src/utils/test/theme.spec.ts b/core/src/utils/test/theme.spec.ts index 63382768cf4..d8426de908e 100644 --- a/core/src/utils/test/theme.spec.ts +++ b/core/src/utils/test/theme.spec.ts @@ -204,6 +204,8 @@ describe('generateCSSVars', () => { enabled: 'system', }, }, + rippleEffect: true, + formHighlight: true, borderWidth: { sm: '4px', }, @@ -233,7 +235,6 @@ describe('generateCSSVars', () => { const css = generateCSSVars(theme); - expect(css).toContain('--ion-palette-dark-enabled: system;'); expect(css).toContain('--ion-border-width-sm: 4px;'); expect(css).toContain('--ion-spacing-md: 12px;'); expect(css).toContain('--ion-scaling-0: 0;'); @@ -521,7 +522,6 @@ describe('generateGlobalThemeCSS', () => { @media(prefers-color-scheme: dark) { :root { - --ion-enabled: system; --ion-color-primary-bold: #0054e9; --ion-color-primary-bold-rgb: 0, 84, 233; --ion-color-primary-bold-contrast: #ffffff; diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 419cb99d814..c91c082406f 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -81,6 +81,12 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX): return []; } + // Do not generate CSS variables for excluded keys + const excludedKeys = ['enabled', 'ripple-effect', 'form-highlight']; + if (excludedKeys.includes(key)) { + return []; + } + // if key is camelCase, convert to kebab-case if (key.match(/([a-z])([A-Z])/g)) { key = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); From e34253076061474729295e9f6aad9f753dc641d4 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 6 Oct 2025 16:14:26 -0400 Subject: [PATCH 05/14] fix(themes): remove testing overrides for global variables in ionic theme --- core/scripts/testing/styles.css | 16 +++------------- core/src/themes/ionic/default.tokens.ts | 3 +++ 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css index 295303dbd1c..708a47e0680 100644 --- a/core/scripts/testing/styles.css +++ b/core/scripts/testing/styles.css @@ -36,31 +36,21 @@ --ion-dynamic-font: var(--ion-default-dynamic-font); } +/* TODO(FW-6745): Remove this after adding the md tokens */ :root, html, -html.md.md { +html.md.md:not(.ionic) { --ion-font-family: Roboto, "mdTestingFont", sans-serif; font-family: Roboto, "mdTestingFont", sans-serif; } +/* TODO(FW-6744): Remove this after adding the ios tokens */ :root.ios.ios, html.ios.ios { --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif; } -/* Override above styles for testing scopes */ -:root.ionic, -:root.ionic.ios, -:root.ionic.md, -html.ionic, -html.ionic.ios, -html.ionic.md { - /* TODO: remove this with the ionic theme updates */ - --ion-background-color: var(--background); - --ion-font-family: initial; -} - /** * Button styles should only be applied * to native buttons that are not part of the diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index 0f35043ab43..fb1cc197957 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -17,6 +17,9 @@ export const defaultTheme: DefaultTheme = { formHighlight: false, rippleEffect: false, + // TODO(FW-6745): see if we can remove this after the md tokens are added + fontFamily: 'initial', + spacing: { 0: '0px', 50: '2px', From 56b9a5b0f6baedec410c3acffcbd209db607fc3e Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 6 Oct 2025 16:47:43 -0400 Subject: [PATCH 06/14] style: lint --- core/src/themes/base/dark.tokens.ts | 2 +- core/src/themes/base/default.tokens.ts | 2 +- core/src/themes/ionic/default.tokens.ts | 2 +- core/src/themes/ionic/light.tokens.ts | 4 ++-- core/src/themes/test/basic/index.html | 18 ++++++++++++------ core/src/themes/themes.interfaces.ts | 4 ++-- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index a2f248959a2..1b611610c66 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -218,5 +218,5 @@ export const darkTheme: DarkTheme = { IonItem: { background: '#000000', }, - } + }, }; diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index edc175cb542..c2420a7ea4b 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -109,7 +109,7 @@ export const defaultTheme: DefaultTheme = { 500: '20px', 800: '32px', 1000: '40px', - 'full': '999px', + full: '999px', }, dynamicFont: '-apple-system-body', diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index fb1cc197957..3325f7aaef7 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -102,7 +102,7 @@ export const defaultTheme: DefaultTheme = { 500: '20px', 800: '32px', 1000: '40px', - 'full': '999px', + full: '999px', }, borderWidth: { diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts index 43e441325f1..94c96baeb90 100644 --- a/core/src/themes/ionic/light.tokens.ts +++ b/core/src/themes/ionic/light.tokens.ts @@ -18,6 +18,6 @@ export const lightTheme: LightTheme = { color: 'var(--ion-tab-bar-color, #626262)', colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)', borderColor: 'var(--ion-tab-bar-border-color, transparent)', - } - } + }, + }, }; diff --git a/core/src/themes/test/basic/index.html b/core/src/themes/test/basic/index.html index ef11dac4dad..c6cd4821425 100644 --- a/core/src/themes/test/basic/index.html +++ b/core/src/themes/test/basic/index.html @@ -122,11 +122,17 @@

Spacing