@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/styles/theme/createTheme/createComponents.types.d.ts

@@ -95,6 +95,13 @@ export type ComponentVarsFromSchema<TSchema> = {
  * for the theme components.
  */
 export declare const componentsSchema: {
+    readonly border: {
+        readonly vars: {
+            readonly light: "";
+            readonly medium: "";
+            readonly dark: "";
+        };
+    };
     readonly price: {
         readonly vars: {
             readonly color: "";
@@ -107,6 +114,130 @@ export declare const componentsSchema: {
             readonly textColor: "";
         };
     };
+    readonly input: {
+        readonly vars: {
+            readonly background: "";
+            readonly border: "";
+        };
+    };
+    readonly separatorLine: {
+        readonly vars: {
+            readonly borderColor: "";
+        };
+    };
+    readonly ctaButton: {
+        readonly vars: {
+            readonly background: "";
+            readonly color: "";
+        };
+    };
+    readonly appBar: {
+        readonly vars: {
+            readonly background: "";
+            readonly color: "";
+        };
+    };
+    readonly badge: {
+        readonly vars: {
+            readonly background: "";
+        };
+    };
+    readonly discountBadge: {
+        readonly vars: {
+            readonly background: "";
+        };
+    };
+    readonly icon: {
+        readonly vars: {
+            readonly xsmall: "";
+            readonly small: "";
+            readonly medium: "";
+            readonly large: "";
+        };
+    };
+    readonly snackbar: {
+        readonly vars: {
+            readonly background: "";
+            readonly contrastText: "";
+        };
+    };
+    readonly tabBar: {
+        readonly vars: {
+            readonly background: "";
+            readonly minHeight: "";
+            readonly border: "";
+            readonly inactive: "";
+            readonly active: "";
+            readonly floatingBorderRadius: "";
+            readonly floatingBoxShadow: "";
+            readonly floatingMinHeight: "";
+            readonly badgeColor: "";
+            readonly badgeBackground: "";
+            readonly badgeBorderRadius: "";
+            readonly badgeTop: "";
+            readonly badgeLeft: "";
+        };
+    };
+    readonly ratingStars: {
+        readonly vars: {
+            readonly filled: "";
+            readonly empty: "";
+        };
+    };
+    readonly swiper: {
+        readonly vars: {
+            readonly paginationBulletColor: "";
+            readonly paginationBulletActiveColor: "";
+            readonly paginationFractionBackground: "";
+            readonly paginationProgressbarBackground: "";
+            readonly paginationProgressbarActiveColor: "";
+        };
+    };
+    readonly navigator: {
+        readonly vars: {
+            readonly height: "";
+        };
+    };
+    readonly filterBar: {
+        readonly vars: {
+            readonly height: "";
+        };
+    };
+    readonly cards: {
+        readonly vars: {
+            readonly borderRadius: "";
+            readonly backgroundColor: "";
+            readonly borderWidth: "";
+            readonly borderColor: "";
+            readonly border: "";
+            readonly shadowColor: "";
+        };
+    };
+    readonly productCard: {
+        readonly vars: {
+            readonly padding: "";
+            readonly textPadding: "";
+            readonly imagePadding: "";
+        };
+    };
+    readonly tiles: {
+        readonly vars: {
+            readonly borderRadius: "";
+            readonly backgroundColor: "";
+            readonly borderWidth: "";
+            readonly borderColor: "";
+            readonly border: "";
+            readonly padding: "";
+            readonly textPadding: "";
+            readonly textPaddingTop: "";
+            readonly imagePadding: "";
+        };
+    };
+    readonly productImage: {
+        readonly vars: {
+            readonly borderRadius: "";
+        };
+    };
 };
 /**
  * Default component tokens.
@@ -117,11 +248,146 @@ export declare const componentsSchema: {
  * - functions get proper `Theme` typing
  */
 export declare const componentsDefaults: {
+    button: {
+        vars: {
+            borderRadius: string;
+        };
+    };
+    border: {
+        vars: {
+            light: string;
+            medium: string;
+            dark: string;
+        };
+    };
     price: {
         vars: {
             color: (t: Theme) => string;
         };
     };
+    input: {
+        vars: {
+            background: string;
+            border: string;
+        };
+    };
+    separatorLine: {
+        vars: {
+            borderColor: string;
+        };
+    };
+    ctaButton: {
+        vars: {
+            background: (t: Theme) => string;
+            color: (t: Theme) => string;
+        };
+    };
+    appBar: {
+        vars: {
+            background: string;
+            color: (t: Theme) => string;
+        };
+    };
+    badge: {
+        vars: {
+            background: (t: Theme) => string;
+        };
+    };
+    discountBadge: {
+        vars: {
+            background: string;
+        };
+    };
+    icon: {
+        vars: {
+            xsmall: string;
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    snackbar: {
+        vars: {
+            background: string;
+        };
+    };
+    tabBar: {
+        vars: {
+            background: string;
+            minHeight: string;
+            border: string;
+            inactive: string;
+            active: (t: Theme) => string;
+            floatingBorderRadius: string;
+            floatingBoxShadow: string;
+            floatingMinHeight: string;
+            badgeColor: string;
+            badgeBackground: (t: Theme) => string;
+            badgeBorderRadius: string;
+            badgeTop: string;
+            badgeLeft: string;
+        };
+    };
+    ratingStars: {
+        vars: {
+            filled: (t: Theme) => string;
+            empty: string;
+        };
+    };
+    swiper: {
+        vars: {
+            paginationBulletColor: (t: Theme) => string;
+            paginationBulletActiveColor: (t: Theme) => string;
+            paginationFractionBackground: (t: Theme) => string;
+            paginationProgressbarBackground: (t: Theme) => string;
+            paginationProgressbarActiveColor: (t: Theme) => string;
+        };
+    };
+    navigator: {
+        vars: {
+            height: number;
+        };
+    };
+    filterBar: {
+        vars: {
+            height: number;
+        };
+    };
+    cards: {
+        vars: {
+            borderRadius: string;
+            backgroundColor: (t: Theme) => string;
+            borderWidth: number;
+            borderColor: string;
+            border: string;
+            shadowColor: (t: Theme) => string;
+        };
+    };
+    productCard: {
+        vars: {
+            padding: number;
+            textPadding: number;
+            imagePadding: number;
+        };
+    };
+    tiles: {
+        vars: {
+            borderRadius: string;
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+            border: string;
+            padding: number;
+            textPadding: number;
+            textPaddingTop: string;
+            imagePadding: number;
+        };
+    };
+    productImage: {
+        vars: {
+            borderRadius: string;
+        };
+    };
 };
 /** Internal defaults type (must cover full schema). */
 export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;

package/styles/theme/createTheme/createComponents.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAE3C;;;GAGG;AACH,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,CAAC,MAAM,IAClC,MAAM,GACN,MAAM,GACN,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,IACtC,OAAO,SAAS,IAAI,GAAG,MAAM,GAC3B,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,oBAAoB,CAAC,CAAC,CAAC,EAAE,GACzE,OAAO,SAAS,MAAM,GAAG;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CAAE,GACnF,MAAM,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACpB;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC1E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAElC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACpB;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC3E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,uBAAuB,CAAC,OAAO,IAAI;KAC5C,CAAC,IAAI,MAAM,OAAO,GACjB,OAAO,CAAC,CAAC,CAAC,SAAS;QAAE,IAAI,EAAE,MAAM,KAAK,CAAA;KAAE,GACpC,oBAAoB,CAAC,KAAK,CAAC,GAC3B,KAAK;CACZ,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAanB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;CAMD,CAAC;AAE/B,uDAAuD;AACvD,MAAM,MAAM,kBAAkB,GAC5B,4BAA4B,CAAC,OAAO,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAG/D,MAAM,MAAM,iBAAiB,GAC3B,4BAA4B,CAAC,OAAO,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAG/D,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,uBAAuB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/createComponents.types.js

@@ -83,6 +83,13 @@
  * for the theme components.
  */
 export const componentsSchema = {
+  border: {
+    vars: {
+      light: '',
+      medium: '',
+      dark: ''
+    }
+  },
   price: {
     vars: {
       color: ''
@@ -94,6 +101,130 @@ export const componentsSchema = {
       color: '',
       textColor: ''
     }
+  },
+  input: {
+    vars: {
+      background: '',
+      border: ''
+    }
+  },
+  separatorLine: {
+    vars: {
+      borderColor: ''
+    }
+  },
+  ctaButton: {
+    vars: {
+      background: '',
+      color: ''
+    }
+  },
+  appBar: {
+    vars: {
+      background: '',
+      color: ''
+    }
+  },
+  badge: {
+    vars: {
+      background: ''
+    }
+  },
+  discountBadge: {
+    vars: {
+      background: ''
+    }
+  },
+  icon: {
+    vars: {
+      xsmall: '',
+      small: '',
+      medium: '',
+      large: ''
+    }
+  },
+  snackbar: {
+    vars: {
+      background: '',
+      contrastText: ''
+    }
+  },
+  tabBar: {
+    vars: {
+      background: '',
+      minHeight: '',
+      border: '',
+      inactive: '',
+      active: '',
+      floatingBorderRadius: '',
+      floatingBoxShadow: '',
+      floatingMinHeight: '',
+      badgeColor: '',
+      badgeBackground: '',
+      badgeBorderRadius: '',
+      badgeTop: '',
+      badgeLeft: ''
+    }
+  },
+  ratingStars: {
+    vars: {
+      filled: '',
+      empty: ''
+    }
+  },
+  swiper: {
+    vars: {
+      paginationBulletColor: '',
+      paginationBulletActiveColor: '',
+      paginationFractionBackground: '',
+      paginationProgressbarBackground: '',
+      paginationProgressbarActiveColor: ''
+    }
+  },
+  navigator: {
+    vars: {
+      height: ''
+    }
+  },
+  filterBar: {
+    vars: {
+      height: ''
+    }
+  },
+  cards: {
+    vars: {
+      borderRadius: '',
+      backgroundColor: '',
+      borderWidth: '',
+      borderColor: '',
+      border: '',
+      shadowColor: ''
+    }
+  },
+  productCard: {
+    vars: {
+      padding: '',
+      textPadding: '',
+      imagePadding: ''
+    }
+  },
+  tiles: {
+    vars: {
+      borderRadius: '',
+      backgroundColor: '',
+      borderWidth: '',
+      borderColor: '',
+      border: '',
+      padding: '',
+      textPadding: '',
+      textPaddingTop: '',
+      imagePadding: ''
+    }
+  },
+  productImage: {
+    vars: {
+      borderRadius: ''
+    }
   }
 };
 
@@ -106,10 +237,145 @@ export const componentsSchema = {
  * - functions get proper `Theme` typing
  */
 export const componentsDefaults = {
+  button: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius, 4px)'
+    }
+  },
+  border: {
+    vars: {
+      light: '#F2F2F2',
+      medium: '#b5b5b5',
+      dark: '#747474'
+    }
+  },
   price: {
     vars: {
       color: t => t.palette.primary.main
     }
+  },
+  input: {
+    vars: {
+      background: '#F2F2F2',
+      border: '#CCCCCC'
+    }
+  },
+  separatorLine: {
+    vars: {
+      borderColor: '#EBEBEF'
+    }
+  },
+  ctaButton: {
+    vars: {
+      background: t => t.palette.primary.main,
+      color: t => t.contrastColor('var(--sg-components-ctaButton-background)')
+    }
+  },
+  appBar: {
+    vars: {
+      background: '#FFFFFF',
+      color: t => t.contrastColor('var(--sg-components-appBar-background)')
+    }
+  },
+  badge: {
+    vars: {
+      background: t => t.palette.secondary.main
+    }
+  },
+  discountBadge: {
+    vars: {
+      background: '#FF0000'
+    }
+  },
+  icon: {
+    vars: {
+      xsmall: '0.75rem',
+      small: '1.25rem',
+      medium: '1.5rem',
+      large: '2rem'
+    }
+  },
+  snackbar: {
+    vars: {
+      background: '#323232'
+    }
+  },
+  tabBar: {
+    vars: {
+      background: '#FFFFFF',
+      minHeight: '0px',
+      border: '#E6E6E6',
+      inactive: '#747474',
+      active: t => t.palette.secondary.main,
+      floatingBorderRadius: '16px',
+      floatingBoxShadow: '0 0 12px rgba(0, 0, 0, 0.24)',
+      floatingMinHeight: '59px',
+      badgeColor: '#FFFFFF',
+      badgeBackground: t => t.palette.secondary.main,
+      badgeBorderRadius: '8px',
+      badgeTop: '-8px',
+      badgeLeft: 'calc(50% + 20px)'
+    }
+  },
+  ratingStars: {
+    vars: {
+      filled: t => t.palette.primary.main,
+      empty: '#CCCCCC'
+    }
+  },
+  swiper: {
+    vars: {
+      paginationBulletColor: t => t.palette.grey.medium,
+      paginationBulletActiveColor: t => t.palette.grey.dark,
+      paginationFractionBackground: t => t.palette.grey.light,
+      paginationProgressbarBackground: t => t.palette.grey.light,
+      paginationProgressbarActiveColor: t => t.palette.common.black
+    }
+  },
+  navigator: {
+    vars: {
+      height: 44
+    }
+  },
+  filterBar: {
+    vars: {
+      height: 48
+    }
+  },
+  cards: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)',
+      backgroundColor: t => t.palette.background.surface,
+      borderWidth: 0,
+      borderColor: 'transparent',
+      border: 'var(--sg-components-cards-borderWidth) solid var(--sg-components-cards-borderColor)',
+      shadowColor: t => t.palette.shadow
+    }
+  },
+  productCard: {
+    vars: {
+      padding: 0,
+      textPadding: 16,
+      imagePadding: 0
+    }
+  },
+  tiles: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)',
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      borderColor: 'transparent',
+      border: 'var(--sg-components-tiles-borderWidth) solid var(--sg-components-tiles-borderColor)',
+      padding: 0,
+      textPadding: 0,
+      textPaddingTop: 'max(var(--sg-components-tiles-textPadding), 12px)',
+      imagePadding: 0
+    }
+  },
+  productImage: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)'
+    }
   }
 };
 

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA8E9C"}
+{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CAmH9C"}

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js

@@ -1,4 +1,7 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.reduce.js";
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 import { cssVarsParser, cssVarsColorAugmentation } from "./helpers";
 import { resolveComponentsValues, flattenComponentVars } from "./createComponents";
 /**
@@ -33,12 +36,18 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
       varsWithDefaults,
       varNames
     } = cssVarsColorAugmentation(cssVarsParser(rest, {
-      prefix: cssVarPrefix
+      prefix: cssVarPrefix,
+      // Keep as literal strings, not `:root` vars, so their inline `var(--sg-palette-shadow)`
+      // resolves on the element using the shadow (recolorable) instead of freezing against `:root`.
+      shouldSkipGeneratingVar: keys => ['shadows', 'shadowSizes'].includes(keys[0])
       // @ts-expect-error - We are sure about the type here
-    }), rest);
+    }), rest, cssVarPrefix);
 
     // Resolve component token values to actual CSS variable references
-    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, vars));
+    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, {
+      ...rest,
+      ...vars
+    }));
     const {
       css: componentsCss,
       vars: componentsVars,
@@ -56,16 +65,43 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
       varNames: merge({}, varNames, componentsVarNames)
     };
     if (Array.isArray(styleSheets)) {
-      // Create a style sheet selector for the color scheme with the generated CSS variables
+      styleSheets.push({
+        ':root': {
+          // use double underscore to indicate that these are private variables
+          '--__l-threshold': '0.7',
+          '--__l': 'clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)',
+          '--__a': 'clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)' // 0.87 is the default alpha value for black text.
+        }
+      });
+
+      // Create a style sheet selector for the color scheme with the generated CSS variables.
+      // `only` opts the page out of the browser applying a color scheme of its own on top of the
+      // active one - forced dark repaints the palette's own colors and inverts light surfaces.
       styleSheets.push({
         [`${schemeName === 'light' ? ':root, ' : ''}${getColorSchemeSelector(schemeName)}`]: {
+          colorScheme: `only ${schemeName}`,
           ...colorSchemeMap[schemeName].css
         }
       });
     }
   });
+
+  // Keep `components`, but remove each nested `vars` object because those raw values
+  // should not leak into the final cssVars theme object.
+  const componentsWithoutVars = Object.entries(colorSchemes.light.components || {}).reduce((acc, [key, value]) => {
+    if (value && typeof value === 'object') {
+      acc[key] = omit(value, ['vars']);
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const lightSchemeWithoutComponentVars = {
+    ...colorSchemes.light,
+    components: componentsWithoutVars
+  };
   return {
-    cssVarsTheme: merge({}, colorSchemes.light, colorSchemeMap.light.vars, {
+    cssVarsTheme: merge({}, lightSchemeWithoutComponentVars, colorSchemeMap.light.vars, {
       vars: colorSchemeMap.light.varNames
     }),
     generateStyleSheets: () => styleSheets