@descope-ui/common 2.1.17 → 2.1.18

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.1.18](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.17...web-components-ui-2.1.18) (2025-10-26)
+
 ## [2.1.17](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.16...web-components-ui-2.1.17) (2025-10-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsMixins/mixins/createStyleMixin/helpers.js

@@ -1,16 +1,25 @@
 import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../../utils';
 import { getCssVarName } from '../../../componentsHelpers';
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+const createCssVar = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
     ? relativeSelectorOrSelectorFn(baseSelector)
-    : `${baseSelector}${
-        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-          ? ` ${relativeSelectorOrSelectorFn}`
-          : relativeSelectorOrSelectorFn
-      }`;
+    : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+      ? ` ${relativeSelectorOrSelectorFn}`
+      : relativeSelectorOrSelectorFn
+    }`;
 
 class StyleBuilder {
   constructor() {
@@ -50,6 +59,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(o
 
 export const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -69,7 +79,7 @@ export const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -96,6 +106,8 @@ export const createCssVarsList = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName(varName) },
       getFallbackVarsNames(attr, varName, mappings[attr])
     );
   }, {});