@rolster/react-components 19.12.0 → 19.12.2

package/dist/es/index.mjs

@@ -1251,13 +1251,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)`)
@@ -1267,6 +1272,7 @@ function generateThemeCSS(colors, theme) {
         ...gradientProps,
         ...backdropProps,
         ...skeletonProps,
+        ...skeletonDarkProps,
         ...shadowProps
     ];
 }
@@ -1336,12 +1342,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';
@@ -5509,5 +5572,5 @@ function useTabsController(options) {
     return useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
-export { APP_THEMES, ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsAppThemeTabs, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChip, RlsChipGroup, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsLedColor, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useAppThemeController, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
+export { APP_THEMES, ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsAppThemeTabs, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChip, RlsChipGroup, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsLedColor, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemeAlias, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, resetTheme, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeAlias, setThemeColor, toggleAppTheme, useAppThemeController, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map