@shohojdhara/atomix 0.3.15 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build-tools/index.d.ts +31 -30
- package/build-tools/package.json +4 -21
- package/dist/atomix.css +20924 -2611
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +76 -2
- package/dist/atomix.min.css.map +1 -1
- package/dist/build-tools/index.d.ts +31 -30
- package/dist/build-tools/package.json +4 -21
- package/dist/charts.js.map +1 -1
- package/dist/core.js.map +1 -1
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +144 -18
- package/dist/index.esm.js +110 -55
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +110 -55
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/layout.js.map +1 -1
- package/dist/theme.d.ts +9 -9
- package/dist/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.stories.tsx +32 -23
- package/src/components/Accordion/Accordion.test.tsx +70 -50
- package/src/components/Accordion/Accordion.tsx +99 -94
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +1 -1
- package/src/components/AtomixGlass/GlassFilter.tsx +9 -16
- package/src/components/AtomixGlass/glass-utils.ts +4 -3
- package/src/components/AtomixGlass/shader-utils.ts +128 -52
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +1 -1
- package/src/components/AtomixGlass/stories/Shaders.stories.tsx +1 -1
- package/src/components/Avatar/Avatar.stories.tsx +45 -62
- package/src/components/Avatar/Avatar.tsx +58 -56
- package/src/components/Badge/Badge.stories.tsx +20 -9
- package/src/components/Badge/Badge.test.tsx +41 -41
- package/src/components/Badge/Badge.tsx +64 -62
- package/src/components/Block/Block.stories.tsx +14 -4
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +9 -8
- package/src/components/Breadcrumb/Breadcrumb.tsx +62 -60
- package/src/components/Button/Button.stories.tsx +13 -22
- package/src/components/Button/Button.test.tsx +97 -81
- package/src/components/Button/Button.tsx +46 -14
- package/src/components/Button/ButtonGroup.stories.tsx +37 -32
- package/src/components/Button/ButtonGroup.tsx +4 -15
- package/src/components/Callout/Callout.stories.tsx +109 -16
- package/src/components/Card/Card.stories.tsx +67 -36
- package/src/components/Card/Card.tsx +30 -14
- package/src/components/Chart/AreaChart.tsx +1 -1
- package/src/components/Chart/CandlestickChart.tsx +23 -16
- package/src/components/Chart/Chart.stories.tsx +4 -9
- package/src/components/Chart/Chart.tsx +40 -44
- package/src/components/Chart/ChartRenderer.tsx +39 -12
- package/src/components/Chart/ChartToolbar.tsx +21 -5
- package/src/components/Chart/DonutChart.tsx +1 -1
- package/src/components/Chart/FunnelChart.tsx +4 -1
- package/src/components/Chart/GaugeChart.tsx +3 -1
- package/src/components/Chart/HeatmapChart.tsx +50 -37
- package/src/components/Chart/LineChart.tsx +3 -2
- package/src/components/Chart/MultiAxisChart.tsx +24 -16
- package/src/components/Chart/RadarChart.tsx +19 -17
- package/src/components/Chart/ScatterChart.tsx +29 -21
- package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +6 -2
- package/src/components/ColorModeToggle/ColorModeToggle.tsx +15 -3
- package/src/components/Countdown/Countdown.stories.tsx +7 -7
- package/src/components/DataTable/DataTable.stories.tsx +43 -38
- package/src/components/DataTable/DataTable.test.tsx +26 -148
- package/src/components/DataTable/DataTable.tsx +485 -456
- package/src/components/DatePicker/DatePicker.stories.tsx +32 -47
- package/src/components/DatePicker/DatePicker.tsx +31 -26
- package/src/components/Dropdown/Dropdown.stories.tsx +2 -5
- package/src/components/Dropdown/Dropdown.tsx +313 -299
- package/src/components/EdgePanel/EdgePanel.stories.tsx +6 -19
- package/src/components/EdgePanel/EdgePanel.tsx +1 -3
- package/src/components/Footer/Footer.stories.tsx +21 -16
- package/src/components/Footer/Footer.tsx +130 -128
- package/src/components/Footer/FooterLink.tsx +2 -2
- package/src/components/Form/Checkbox.test.tsx +49 -49
- package/src/components/Form/Checkbox.tsx +108 -100
- package/src/components/Form/Form.stories.tsx +2 -10
- package/src/components/Form/Input.stories.tsx +22 -39
- package/src/components/Form/Input.test.tsx +38 -44
- package/src/components/Form/Radio.stories.tsx +6 -12
- package/src/components/Form/Radio.tsx +68 -66
- package/src/components/Form/Select.tsx +184 -182
- package/src/components/Form/Textarea.test.tsx +27 -32
- package/src/components/Hero/Hero.stories.tsx +56 -23
- package/src/components/Hero/Hero.tsx +201 -55
- package/src/components/Icon/index.ts +7 -1
- package/src/components/List/List.tsx +19 -23
- package/src/components/Modal/Modal.stories.tsx +2 -1
- package/src/components/Modal/Modal.tsx +130 -127
- package/src/components/Navigation/Menu/MegaMenu.tsx +70 -70
- package/src/components/Navigation/Nav/NavDropdown.tsx +1 -5
- package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +128 -28
- package/src/components/Navigation/SideMenu/SideMenu.tsx +5 -7
- package/src/components/Navigation/SideMenu/SideMenuItem.tsx +4 -5
- package/src/components/Pagination/Pagination.stories.tsx +7 -4
- package/src/components/Pagination/Pagination.tsx +199 -202
- package/src/components/PhotoViewer/PhotoViewer.tsx +4 -1
- package/src/components/Popover/Popover.stories.tsx +99 -192
- package/src/components/Popover/Popover.tsx +41 -37
- package/src/components/Progress/Progress.stories.tsx +35 -44
- package/src/components/River/River.stories.tsx +2 -1
- package/src/components/SectionIntro/SectionIntro.stories.tsx +71 -71
- package/src/components/Slider/Slider.stories.tsx +12 -4
- package/src/components/Spinner/Spinner.stories.tsx +3 -1
- package/src/components/Spinner/Spinner.test.tsx +23 -23
- package/src/components/Spinner/Spinner.tsx +43 -46
- package/src/components/Steps/Steps.stories.tsx +8 -6
- package/src/components/Tabs/Tabs.stories.tsx +12 -9
- package/src/components/Tabs/Tabs.tsx +74 -72
- package/src/components/Toggle/Toggle.stories.tsx +27 -13
- package/src/components/Toggle/Toggle.test.tsx +65 -70
- package/src/components/Toggle/Toggle.tsx +4 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +24 -20
- package/src/components/Tooltip/Tooltip.tsx +104 -106
- package/src/components/Upload/Upload.stories.tsx +129 -127
- package/src/components/Upload/Upload.tsx +287 -283
- package/src/components/VideoPlayer/VideoPlayer.tsx +6 -1
- package/src/components/index.ts +13 -2
- package/src/layouts/Grid/Grid.stories.tsx +9 -3
- package/src/layouts/MasonryGrid/MasonryGrid.tsx +5 -1
- package/src/lib/__tests__/theme-tools.test.ts +32 -6
- package/src/lib/composables/shared-mouse-tracker.ts +13 -14
- package/src/lib/composables/useAtomixGlass.ts +106 -49
- package/src/lib/composables/useChartExport.ts +1 -1
- package/src/lib/composables/useDataTable.ts +29 -17
- package/src/lib/composables/useHero.ts +58 -14
- package/src/lib/composables/useHeroBackgroundSlider.ts +2 -9
- package/src/lib/composables/useInput.ts +10 -8
- package/src/lib/composables/useSideMenu.ts +6 -5
- package/src/lib/composables/useTooltip.ts +1 -2
- package/src/lib/composables/useVideoPlayer.ts +44 -35
- package/src/lib/config/index.ts +154 -154
- package/src/lib/constants/cssVariables.ts +29 -29
- package/src/lib/hooks/__tests__/useComponentCustomization.test.ts +2 -6
- package/src/lib/hooks/index.ts +1 -1
- package/src/lib/hooks/useComponentCustomization.ts +11 -17
- package/src/lib/hooks/usePerformanceMonitor.ts +6 -7
- package/src/lib/patterns/__tests__/slots.test.ts +1 -1
- package/src/lib/patterns/index.ts +1 -1
- package/src/lib/patterns/slots.tsx +8 -13
- package/src/lib/storybook/InteractiveDemo.tsx +13 -18
- package/src/lib/storybook/PreviewContainer.tsx +1 -1
- package/src/lib/storybook/VariantsGrid.tsx +3 -7
- package/src/lib/storybook/index.ts +1 -1
- package/src/lib/theme/adapters/cssVariableMapper.ts +47 -74
- package/src/lib/theme/adapters/index.ts +3 -9
- package/src/lib/theme/adapters/themeAdapter.ts +41 -26
- package/src/lib/theme/config/index.ts +1 -1
- package/src/lib/theme/config/types.ts +2 -2
- package/src/lib/theme/config/validator.ts +10 -5
- package/src/lib/theme/constants/constants.ts +2 -2
- package/src/lib/theme/constants/index.ts +1 -2
- package/src/lib/theme/core/__tests__/createTheme.test.ts +20 -22
- package/src/lib/theme/core/composeTheme.ts +32 -26
- package/src/lib/theme/core/createTheme.ts +1 -1
- package/src/lib/theme/core/createThemeObject.ts +308 -301
- package/src/lib/theme/core/index.ts +3 -3
- package/src/lib/theme/devtools/CLI.ts +106 -104
- package/src/lib/theme/devtools/Comparator.tsx +50 -32
- package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +50 -48
- package/src/lib/theme/devtools/DesignTokensCustomizer.tsx +257 -63
- package/src/lib/theme/devtools/Inspector.tsx +75 -60
- package/src/lib/theme/devtools/LiveEditor.tsx +97 -76
- package/src/lib/theme/devtools/Preview.tsx +150 -106
- package/src/lib/theme/devtools/ThemeValidator.ts +29 -21
- package/src/lib/theme/devtools/index.ts +3 -9
- package/src/lib/theme/devtools/useHistory.ts +23 -21
- package/src/lib/theme/errors/errors.ts +12 -11
- package/src/lib/theme/errors/index.ts +2 -7
- package/src/lib/theme/generators/generateCSS.ts +9 -13
- package/src/lib/theme/generators/generateCSSNested.ts +1 -6
- package/src/lib/theme/generators/generateCSSVariables.ts +673 -630
- package/src/lib/theme/generators/index.ts +1 -4
- package/src/lib/theme/i18n/index.ts +1 -1
- package/src/lib/theme/i18n/rtl.ts +13 -13
- package/src/lib/theme/index.ts +7 -16
- package/src/lib/theme/runtime/ThemeApplicator.ts +4 -4
- package/src/lib/theme/runtime/ThemeContext.tsx +1 -1
- package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +19 -23
- package/src/lib/theme/runtime/ThemeProvider.tsx +230 -239
- package/src/lib/theme/runtime/__tests__/ThemeProvider.integration.test.tsx +1 -1
- package/src/lib/theme/runtime/__tests__/ThemeProvider.test.tsx +24 -29
- package/src/lib/theme/runtime/index.ts +2 -5
- package/src/lib/theme/runtime/useTheme.ts +18 -18
- package/src/lib/theme/runtime/useThemeTokens.ts +22 -22
- package/src/lib/theme/test/testTheme.ts +15 -16
- package/src/lib/theme/tokens/index.ts +2 -7
- package/src/lib/theme/tokens/tokens.ts +25 -24
- package/src/lib/theme/types.ts +428 -411
- package/src/lib/theme/utils/__tests__/themeValidation.test.ts +3 -3
- package/src/lib/theme/utils/componentTheming.ts +18 -18
- package/src/lib/theme/utils/domUtils.ts +277 -289
- package/src/lib/theme/utils/index.ts +1 -2
- package/src/lib/theme/utils/injectCSS.ts +10 -14
- package/src/lib/theme/utils/naming.ts +20 -16
- package/src/lib/theme/utils/themeHelpers.ts +10 -12
- package/src/lib/theme/utils/themeUtils.ts +85 -86
- package/src/lib/theme/utils/themeValidation.ts +82 -33
- package/src/lib/theme-tools.ts +8 -6
- package/src/lib/types/components.ts +172 -71
- package/src/lib/types/partProps.ts +1 -1
- package/src/lib/utils/__tests__/csv.test.ts +1 -1
- package/src/lib/utils/componentUtils.ts +8 -12
- package/src/lib/utils/csv.ts +3 -1
- package/src/lib/utils/dataTableExport.ts +1 -5
- package/src/lib/utils/fontPreloader.ts +10 -19
- package/src/lib/utils/icons.ts +4 -1
- package/src/lib/utils/index.ts +2 -6
- package/src/lib/utils/memoryMonitor.ts +10 -8
- package/src/lib/utils/themeNaming.ts +2 -2
- package/src/styles/01-settings/_index.scss +0 -1
- package/src/styles/01-settings/_settings.colors.scss +8 -8
- package/src/styles/01-settings/_settings.design-tokens.scss +61 -50
- package/src/styles/01-settings/_settings.navbar.scss +1 -1
- package/src/styles/01-settings/_settings.spacing.scss +3 -4
- package/src/styles/01-settings/_settings.tooltip.scss +1 -1
- package/src/styles/01-settings/_settings.typography.scss +1 -1
- package/src/styles/02-tools/_tools.button.scss +51 -21
- package/src/styles/02-tools/_tools.utility-api.scss +30 -18
- package/src/styles/03-generic/_generic.root.scss +4 -3
- package/src/styles/06-components/_components.atomix-glass.scss +13 -9
- package/src/styles/06-components/_components.button.scss +16 -4
- package/src/styles/06-components/_components.callout.scss +27 -21
- package/src/styles/06-components/_components.card.scss +5 -14
- package/src/styles/06-components/_components.chart.scss +22 -19
- package/src/styles/06-components/_components.checkbox.scss +3 -1
- package/src/styles/06-components/_components.color-mode-toggle.scss +3 -1
- package/src/styles/06-components/_components.edge-panel.scss +9 -2
- package/src/styles/06-components/_components.footer.scss +1 -1
- package/src/styles/06-components/_components.side-menu.scss +5 -5
- package/src/styles/06-components/_components.toggle.scss +18 -0
- package/src/styles/06-components/_index.scss +1 -1
- package/src/styles/06-components/old.chart.styles.scss +0 -2
- package/src/styles/99-utilities/_utilities.border.scss +69 -27
- package/src/styles/99-utilities/_utilities.display.scss +1 -1
- package/src/styles/99-utilities/_utilities.opacity.scss +10 -0
- package/src/styles/99-utilities/_utilities.position.scss +16 -9
- package/src/styles/99-utilities/_utilities.scss +1 -1
- package/src/styles/99-utilities/_utilities.sizes.scss +47 -18
- package/src/styles/99-utilities/_utilities.spacing.scss +118 -66
- package/src/styles/99-utilities/_utilities.text-gradient.scss +30 -30
- package/src/styles/99-utilities/_utilities.text.scss +67 -46
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* useHistory Hook
|
|
3
|
-
*
|
|
3
|
+
*
|
|
4
4
|
* React hook for managing undo/redo history
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -34,9 +34,9 @@ export interface UseHistoryReturn<T> {
|
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* useHistory hook
|
|
37
|
-
*
|
|
37
|
+
*
|
|
38
38
|
* Provides undo/redo functionality for state management
|
|
39
|
-
*
|
|
39
|
+
*
|
|
40
40
|
* @example
|
|
41
41
|
* ```tsx
|
|
42
42
|
* const { state, setState, undo, redo, canUndo, canRedo } = useHistory({
|
|
@@ -47,7 +47,7 @@ export interface UseHistoryReturn<T> {
|
|
|
47
47
|
*/
|
|
48
48
|
export function useHistory<T>(options: UseHistoryOptions = {}): UseHistoryReturn<T> {
|
|
49
49
|
const { maxHistorySize = 50, initialState } = options;
|
|
50
|
-
|
|
50
|
+
|
|
51
51
|
const [state, setStateInternal] = useState<T>(initialState as T);
|
|
52
52
|
const historyRef = useRef<T[]>([initialState as T]);
|
|
53
53
|
const currentIndexRef = useRef<number>(0);
|
|
@@ -59,25 +59,28 @@ export function useHistory<T>(options: UseHistoryOptions = {}): UseHistoryReturn
|
|
|
59
59
|
setCanRedo(currentIndexRef.current < historyRef.current.length - 1);
|
|
60
60
|
}, []);
|
|
61
61
|
|
|
62
|
-
const setState = useCallback(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
const setState = useCallback(
|
|
63
|
+
(newState: T) => {
|
|
64
|
+
// Remove any future history if we're not at the end
|
|
65
|
+
if (currentIndexRef.current < historyRef.current.length - 1) {
|
|
66
|
+
historyRef.current = historyRef.current.slice(0, currentIndexRef.current + 1);
|
|
67
|
+
}
|
|
67
68
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
// Add new state to history
|
|
70
|
+
historyRef.current.push(newState);
|
|
71
|
+
currentIndexRef.current = historyRef.current.length - 1;
|
|
71
72
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
// Limit history size
|
|
74
|
+
if (historyRef.current.length > maxHistorySize) {
|
|
75
|
+
historyRef.current.shift();
|
|
76
|
+
currentIndexRef.current--;
|
|
77
|
+
}
|
|
77
78
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
setStateInternal(newState);
|
|
80
|
+
updateHistoryState();
|
|
81
|
+
},
|
|
82
|
+
[maxHistorySize, updateHistoryState]
|
|
83
|
+
);
|
|
81
84
|
|
|
82
85
|
const undo = useCallback(() => {
|
|
83
86
|
if (currentIndexRef.current > 0) {
|
|
@@ -127,4 +130,3 @@ export function useHistory<T>(options: UseHistoryOptions = {}): UseHistoryReturn
|
|
|
127
130
|
getHistoryStats,
|
|
128
131
|
};
|
|
129
132
|
}
|
|
130
|
-
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Theme System Error Handling
|
|
3
|
-
*
|
|
3
|
+
*
|
|
4
4
|
* Centralized error handling for the Atomix theme system.
|
|
5
5
|
* Provides custom error classes and logging utilities.
|
|
6
6
|
*/
|
|
@@ -114,7 +114,7 @@ export interface LoggerConfig {
|
|
|
114
114
|
|
|
115
115
|
/**
|
|
116
116
|
* Theme Logger
|
|
117
|
-
*
|
|
117
|
+
*
|
|
118
118
|
* Centralized logging for the theme system.
|
|
119
119
|
* Replaces console statements with structured logging.
|
|
120
120
|
*/
|
|
@@ -128,7 +128,11 @@ export class ThemeLogger {
|
|
|
128
128
|
|
|
129
129
|
constructor(config: LoggerConfig = {}) {
|
|
130
130
|
this.config = {
|
|
131
|
-
level:
|
|
131
|
+
level:
|
|
132
|
+
config.level ??
|
|
133
|
+
(typeof process !== 'undefined' && process.env?.NODE_ENV === 'production'
|
|
134
|
+
? LogLevel.WARN
|
|
135
|
+
: LogLevel.INFO),
|
|
132
136
|
enableConsole: config.enableConsole ?? true,
|
|
133
137
|
onError: config.onError,
|
|
134
138
|
onWarn: config.onWarn,
|
|
@@ -140,19 +144,16 @@ export class ThemeLogger {
|
|
|
140
144
|
/**
|
|
141
145
|
* Log an error
|
|
142
146
|
*/
|
|
143
|
-
error(
|
|
144
|
-
message: string,
|
|
145
|
-
error?: Error | ThemeError,
|
|
146
|
-
context?: Record<string, unknown>
|
|
147
|
-
): void {
|
|
147
|
+
error(message: string, error?: Error | ThemeError, context?: Record<string, unknown>): void {
|
|
148
148
|
if (this.config.level < LogLevel.ERROR) {
|
|
149
149
|
return;
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
const errorObj = error instanceof Error ? error : new Error(message);
|
|
153
|
-
const themeError =
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
const themeError =
|
|
154
|
+
error instanceof ThemeError
|
|
155
|
+
? error
|
|
156
|
+
: new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
|
|
156
157
|
|
|
157
158
|
if (this.config.enableConsole) {
|
|
158
159
|
console.error(`[ThemeError] ${message}`, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* CSS Variable Generator
|
|
3
|
-
*
|
|
3
|
+
*
|
|
4
4
|
* Generates CSS custom properties from design tokens.
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -18,20 +18,20 @@ export interface GenerateCSSVariablesOptions {
|
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* Generate CSS variables from tokens
|
|
21
|
-
*
|
|
21
|
+
*
|
|
22
22
|
* Converts flat token object to CSS custom properties.
|
|
23
|
-
*
|
|
23
|
+
*
|
|
24
24
|
* @param tokens - Design tokens object
|
|
25
25
|
* @param options - Generation options
|
|
26
26
|
* @returns CSS string with custom properties
|
|
27
|
-
*
|
|
27
|
+
*
|
|
28
28
|
* @example
|
|
29
29
|
* ```typescript
|
|
30
30
|
* const tokens = {
|
|
31
31
|
* 'primary': '#7c3aed',
|
|
32
32
|
* 'spacing-4': '1rem',
|
|
33
33
|
* };
|
|
34
|
-
*
|
|
34
|
+
*
|
|
35
35
|
* const css = generateCSSVariables(tokens);
|
|
36
36
|
* // Returns: ":root {\n --atomix-primary: #7c3aed;\n --atomix-spacing-4: 1rem;\n}"
|
|
37
37
|
* ```
|
|
@@ -40,10 +40,7 @@ export function generateCSSVariables(
|
|
|
40
40
|
tokens: DesignTokens,
|
|
41
41
|
options: GenerateCSSVariablesOptions = {}
|
|
42
42
|
): string {
|
|
43
|
-
const {
|
|
44
|
-
selector = ':root',
|
|
45
|
-
prefix = 'atomix',
|
|
46
|
-
} = options;
|
|
43
|
+
const { selector = ':root', prefix = 'atomix' } = options;
|
|
47
44
|
|
|
48
45
|
// Filter out undefined values and generate CSS variables
|
|
49
46
|
const variables = Object.entries(tokens)
|
|
@@ -62,14 +59,14 @@ export function generateCSSVariables(
|
|
|
62
59
|
|
|
63
60
|
/**
|
|
64
61
|
* Generate CSS variables with custom selector
|
|
65
|
-
*
|
|
62
|
+
*
|
|
66
63
|
* Useful for theme-specific selectors like `[data-theme="dark"]`
|
|
67
|
-
*
|
|
64
|
+
*
|
|
68
65
|
* @param tokens - Design tokens object
|
|
69
66
|
* @param selector - CSS selector (e.g., '[data-theme="dark"]')
|
|
70
67
|
* @param prefix - CSS variable prefix
|
|
71
68
|
* @returns CSS string
|
|
72
|
-
*
|
|
69
|
+
*
|
|
73
70
|
* @example
|
|
74
71
|
* ```typescript
|
|
75
72
|
* const css = generateCSSVariablesForSelector(
|
|
@@ -86,4 +83,3 @@ export function generateCSSVariablesForSelector(
|
|
|
86
83
|
): string {
|
|
87
84
|
return generateCSSVariables(tokens, { selector, prefix });
|
|
88
85
|
}
|
|
89
|
-
|
|
@@ -58,12 +58,7 @@ export function generateNestedCSSVariables(
|
|
|
58
58
|
tokens: DesignTokens,
|
|
59
59
|
options: GenerateNestedCSSVariablesOptions = {}
|
|
60
60
|
): string {
|
|
61
|
-
const {
|
|
62
|
-
selector = ':root',
|
|
63
|
-
prefix = 'atomix',
|
|
64
|
-
separator = '-',
|
|
65
|
-
flatten = true,
|
|
66
|
-
} = options;
|
|
61
|
+
const { selector = ':root', prefix = 'atomix', separator = '-', flatten = true } = options;
|
|
67
62
|
|
|
68
63
|
// Flatten nested token structure
|
|
69
64
|
const flattened = flatten ? flattenTokens(tokens, separator) : tokens;
|