@rolster/react-components 19.12.0 → 19.12.2

package/dist/cjs/index.cjs

@@ -1253,13 +1253,18 @@ function generateThemeCSS(colors, theme) {
     const rgb900 = rgbChannels(parseHex(colors['900']));
     const rgb700 = rgbChannels(parseHex(colors['700']));
     const rgb500 = rgbChannels(parseHex(colors['500']));
+    const rgb300 = rgbChannels(parseHex(colors['300']));
     const colorProps = SHADE_LABELS.map((label) => prop(`color-${label}`, colors[label]));
     const gradientProps = GRADIENT_LABELS.map((label) => {
         const darker = SHADE_LABELS[SHADE_LABELS.indexOf(label) - 1];
         return prop(`gradient-${label}`, `linear-gradient(180deg, ${colors[label]} 15%, ${colors[darker]} 85%)`);
     });
     const backdropProps = BACKDROP_LABELS.map((label) => prop(`backdrop-${label}`, `rgba(${rgb900}, ${Number(label) / 1000})`));
-    const skeletonProps = Object.entries(SKELETON_OPACITY).map(([label, opacity]) => prop(`skeleton-${label}`, `rgba(${rgb700}, ${opacity})`));
+    const skeletonOpacities = Object.entries(SKELETON_OPACITY);
+    const skeletonProps = skeletonOpacities.map(([label, opacity]) => prop(`skeleton-${label}`, `rgba(${rgb700}, ${opacity})`));
+    // Skeleton tokens for dark surfaces, taken from the light step that mirrors
+    // color-700 around color-500, as the foundations mixin does.
+    const skeletonDarkProps = skeletonOpacities.map(([label, opacity]) => prop(`skeleton-dark-${label}`, `rgba(${rgb300}, ${opacity})`));
     const shadowProps = [
         prop('shadow-color-500', `rgba(${rgb500}, 0.24)`),
         prop('shadow-500', `0px 0px 0px 3px rgba(${rgb500}, 0.24)`)
@@ -1269,6 +1274,7 @@ function generateThemeCSS(colors, theme) {
         ...gradientProps,
         ...backdropProps,
         ...skeletonProps,
+        ...skeletonDarkProps,
         ...shadowProps
     ];
 }
@@ -1338,12 +1344,69 @@ function setThemeColor(baseColor, theme = 'primary') {
     if (typeof document === 'undefined') {
         return;
     }
+    resetTheme(theme);
     const { properties } = generateThemePalette(baseColor, theme);
     const target = document.body || document.documentElement;
     properties.forEach(({ name, value }) => {
         target.style.setProperty(name, value);
     });
 }
+const ALIAS_LABELS = [
+    '900',
+    '800',
+    '700',
+    '600',
+    '500',
+    '400',
+    '300',
+    '200',
+    '100'
+];
+const SKELETON_LABELS = Object.keys(SKELETON_OPACITY);
+const ALIAS_TOKENS = [
+    ...SHADE_LABELS.map((label) => `color-${label}`),
+    ...ALIAS_LABELS.map((label) => `gradient-${label}`),
+    ...ALIAS_LABELS.map((label) => `backdrop-${label}`),
+    ...SKELETON_LABELS.map((label) => `skeleton-${label}`),
+    ...SKELETON_LABELS.map((label) => `skeleton-dark-${label}`),
+    'shadow-color-500',
+    'shadow-500'
+];
+function resetTheme(theme = 'primary') {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const target = document.body || document.documentElement;
+    ALIAS_TOKENS.forEach((token) => {
+        target.style.removeProperty(`--rls-${theme}-${token}`);
+    });
+}
+function generateThemeAlias(source, theme = 'primary') {
+    const properties = ALIAS_TOKENS.map((token) => ({
+        name: `--rls-${theme}-${token}`,
+        value: `var(--rls-${source}-${token})`
+    }));
+    return {
+        source,
+        theme,
+        properties,
+        css: properties.map((p) => `${p.name}: ${p.value};`).join('\n')
+    };
+}
+function setThemeAlias(source, theme = 'primary') {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (source === theme) {
+        resetTheme(theme);
+        return;
+    }
+    const { properties } = generateThemeAlias(source, theme);
+    const target = document.body || document.documentElement;
+    properties.forEach(({ name, value }) => {
+        target.style.setProperty(name, value);
+    });
+}
 const DEFAULT_COLOR = '#1780e0';
 
 const CONTENT_BACKGROUND = '--pvt-content-background';
@@ -5633,6 +5696,7 @@ exports.RlsTabs = RlsTabs;
 exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.calculateImgDimension = calculateImgDimension;
+exports.generateThemeAlias = generateThemeAlias;
 exports.generateThemePalette = generateThemePalette;
 exports.getAppTheme = getAppTheme;
 exports.getRemSize = getRemSize$1;
@@ -5646,12 +5710,14 @@ exports.hsvToRgb = hsvToRgb;
 exports.normalizeHex = normalizeHex;
 exports.rangeFormatTemplate = rangeFormatTemplate;
 exports.renderClassStatus = renderClassStatus;
+exports.resetTheme = resetTheme;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsl = rgbToHsl;
 exports.rgbToHsv = rgbToHsv;
 exports.setAppTheme = setAppTheme;
 exports.setDesignSystem = setDesignSystem;
 exports.setErrorsI18n = setErrorsI18n;
+exports.setThemeAlias = setThemeAlias;
 exports.setThemeColor = setThemeColor;
 exports.toggleAppTheme = toggleAppTheme;
 exports.useAppThemeController = useAppThemeController;