refactor(themes): update config structure and interface

Author: brandyscarney

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

@@ -11,8 +11,10 @@ export const defaultTheme: DefaultTheme = {
     dark: darkTheme,
   },
 
-  formHighlight: false,
-  rippleEffect: false,
+  config: {
+    formHighlight: false,
+    rippleEffect: false,
+  },
 
   spacing: {
     0: '0px',

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

@@ -14,8 +14,9 @@ export const defaultTheme: DefaultTheme = {
     dark: darkTheme,
   },
 
-  formHighlight: false,
-  rippleEffect: false,
+  config: {
+    formHighlight: true,
+  },
 
   // TODO(FW-6745): see if we can remove this after the md tokens are added
   fontFamily: 'initial',

core/src/themes/themes.interfaces.ts

@@ -1,12 +1,10 @@
+import type { IonicConfig } from '../utils/config';
+
 // Platform-specific theme
 export type PlatformTheme = Omit<BaseTheme, 'ios' | 'md'>;
 
 // Base tokens for all palettes
 export type BaseTheme = {
-  // CONFIG TOKENS
-  rippleEffect?: boolean;
-  formHighlight?: boolean;
-
   // GLOBAL THEME TOKENS
   backgroundColor?: string;
   backgroundColorRgb?: string;
@@ -205,4 +203,6 @@ export type DefaultTheme = BaseTheme & {
     light?: LightTheme;
     dark?: DarkTheme;
   };
+
+  config?: IonicConfig;
 };

core/src/utils/config.ts

@@ -12,6 +12,12 @@ export interface IonicConfig {
    */
   animated?: boolean;
 
+  /**
+   * When it's set to `false`, it disables the form highlight effect across the app.
+   * Defaults to `false`.
+   */
+  formHighlight?: boolean;
+
   /**
    * When it's set to `false`, it disables all material-design ripple-effects across the app.
    * Defaults to `true`.

core/src/utils/test/theme.spec.ts

@@ -186,6 +186,7 @@ describe('getCustomTheme', () => {
 describe('generateCSSVars', () => {
   it('should not generate CSS variables for an empty theme', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {},
         dark: {},
@@ -198,14 +199,17 @@ describe('generateCSSVars', () => {
 
   it('should generate CSS variables for a given theme', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {},
         dark: {
           enabled: 'system',
         },
       },
-      rippleEffect: true,
-      formHighlight: true,
+      config: {
+        rippleEffect: true,
+        formHighlight: true,
+      },
       borderWidth: {
         sm: '4px',
       },
@@ -309,6 +313,7 @@ describe('injectCSS', () => {
 describe('generateGlobalThemeCSS', () => {
   it('should generate global CSS for a given theme', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {},
         dark: {
@@ -339,6 +344,7 @@ describe('generateGlobalThemeCSS', () => {
 
   it('should generate global CSS for a given theme with light palette', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {
           color: {
@@ -425,6 +431,7 @@ describe('generateGlobalThemeCSS', () => {
 
   it('should not include component or palette variables in global CSS', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {},
         dark: {
@@ -479,6 +486,7 @@ describe('generateGlobalThemeCSS', () => {
 
   it('should generate global CSS for a given theme with dark palette enabled for system preference', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {},
         dark: {
@@ -598,6 +606,7 @@ describe('generateColorClasses', () => {
 
   it('should generate color classes for a given theme', () => {
     const theme = {
+      name: 'test',
       palette: {
         light: {
           color: {

core/src/utils/theme.ts

@@ -87,7 +87,7 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
       }
 
       // Do not generate CSS variables for excluded keys
-      const excludedKeys = ['enabled', 'ripple-effect', 'form-highlight'];
+      const excludedKeys = ['name', 'enabled', 'config'];
       if (excludedKeys.includes(key)) {
         return [];
       }