@fastwork/xosmoz-theme 0.0.13 → 0.0.15

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.
Files changed (25) hide show
  1. package/README.md +47 -72
  2. package/dist/base.css +3 -3
  3. package/dist/{index-B3oQ5FIa.d.mts → index-D8kHN4dA.d.mts} +8 -25
  4. package/dist/{index-B3oQ5FIa.d.ts → index-D8kHN4dA.d.ts} +8 -25
  5. package/dist/index.d.mts +61 -73
  6. package/dist/index.d.ts +61 -73
  7. package/dist/index.js +532 -541
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +533 -523
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/themes/dark.css +174 -25
  12. package/dist/themes/light.css +175 -26
  13. package/dist/themes.css +349 -138
  14. package/dist/tokens.d.mts +1 -1
  15. package/dist/tokens.d.ts +1 -1
  16. package/dist/tokens.js +0 -244
  17. package/dist/tokens.js.map +1 -1
  18. package/dist/tokens.mjs +1 -234
  19. package/dist/tokens.mjs.map +1 -1
  20. package/dist/variables.css +144 -102
  21. package/dist/xosmoz.css +147 -105
  22. package/package.json +5 -5
  23. package/dist/themes/cyberpunk.css +0 -27
  24. package/dist/themes/forest.css +0 -27
  25. package/dist/themes/ocean.css +0 -27
package/README.md CHANGED
@@ -18,9 +18,6 @@ Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from p
18
18
 
19
19
  - **light** - Clean, modern light theme (default)
20
20
  - **dark** - Elegant dark theme
21
- - **cyberpunk** - Neon colors on dark background
22
- - **forest** - Natural greens and earthy tones
23
- - **ocean** - Deep blues and aqua tones
24
21
 
25
22
  #### Quick Start
26
23
 
@@ -35,7 +32,6 @@ Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from p
35
32
  /* OR import specific themes only */
36
33
  @import '@fastwork/xosmoz-theme/themes/light';
37
34
  @import '@fastwork/xosmoz-theme/themes/dark';
38
- @import '@fastwork/xosmoz-theme/themes/cyberpunk';
39
35
  ```
40
36
 
41
37
  Then set the theme via HTML attribute:
@@ -46,15 +42,6 @@ Then set the theme via HTML attribute:
46
42
 
47
43
  <!-- Dark theme -->
48
44
  <html data-theme="dark">...</html>
49
-
50
- <!-- Cyberpunk theme -->
51
- <html data-theme="cyberpunk">...</html>
52
-
53
- <!-- Forest theme -->
54
- <html data-theme="forest">...</html>
55
-
56
- <!-- Ocean theme -->
57
- <html data-theme="ocean">...</html>
58
45
  ```
59
46
 
60
47
  #### Using Theme Variables
@@ -63,22 +50,22 @@ All themes use the same semantic CSS variables, so your components work across a
63
50
 
64
51
  ```css
65
52
  .button {
66
- background-color: var(--xz-primary);
67
- color: var(--xz-primary-foreground);
53
+ background-color: var(--xz-color-primary-bg-100);
54
+ color: var(--xz-color-primary-fg);
68
55
  padding: var(--xz-spacing-4);
69
56
  border-radius: var(--xz-radius-md);
70
57
  }
71
58
 
72
59
  .card {
73
- background: var(--xz-card);
74
- color: var(--xz-card-foreground);
75
- border: 1px solid var(--xz-border);
60
+ background: var(--xz-color-bg-200);
61
+ color: var(--xz-color-content-100);
62
+ border: 1px solid var(--xz-color-border);
76
63
  box-shadow: var(--xz-shadow-md);
77
64
  }
78
65
 
79
66
  .alert-success {
80
- background: var(--xz-success);
81
- color: var(--xz-success-foreground);
67
+ background: var(--xz-color-success-bg-100);
68
+ color: var(--xz-color-success-fg);
82
69
  }
83
70
  ```
84
71
 
@@ -91,9 +78,8 @@ function setTheme(themeName) {
91
78
  }
92
79
 
93
80
  // Usage
94
- setTheme('dark'); // Switch to dark theme
95
- setTheme('cyberpunk'); // Switch to cyberpunk theme
96
- setTheme('light'); // Switch to light theme
81
+ setTheme('dark'); // Switch to dark theme
82
+ setTheme('light'); // Switch to light theme
97
83
 
98
84
  // Load saved theme on page load
99
85
  const savedTheme = localStorage.getItem('theme') || 'light';
@@ -108,12 +94,12 @@ You can create custom themes in two ways:
108
94
 
109
95
  ```css
110
96
  [data-theme="my-custom-theme"] {
111
- --xz-background: #ffffff;
112
- --xz-foreground: #000000;
113
- --xz-primary: #ff6b6b;
114
- --xz-primary-foreground: #ffffff;
115
- --xz-secondary: #4ecdc4;
116
- --xz-secondary-foreground: #ffffff;
97
+ --xz-color-bg-100: oklch(1.00 0 0);
98
+ --xz-color-bg-200: oklch(0.98 0 0);
99
+ --xz-color-content-100: oklch(0.20 0 0);
100
+ --xz-color-border: oklch(0.90 0.005 260);
101
+ --xz-color-primary-bg-100: oklch(0.58 .2524 30);
102
+ --xz-color-primary-fg: oklch(1 0 0);
117
103
  /* ... other theme variables */
118
104
  }
119
105
  ```
@@ -145,25 +131,28 @@ console.log(myTheme.colors.primary); // '#ff6b6b'
145
131
 
146
132
  All themes support these semantic CSS variables:
147
133
 
148
- - `--xz-background` / `--xz-foreground`
149
- - `--xz-primary` / `--xz-primary-foreground`
150
- - `--xz-secondary` / `--xz-secondary-foreground`
151
- - `--xz-accent` / `--xz-accent-foreground`
152
- - `--xz-success` / `--xz-success-foreground`
153
- - `--xz-warning` / `--xz-warning-foreground`
154
- - `--xz-destructive` / `--xz-destructive-foreground`
155
- - `--xz-muted` / `--xz-muted-foreground`
156
- - `--xz-card` / `--xz-card-foreground`
157
- - `--xz-popover` / `--xz-popover-foreground`
158
- - `--xz-border` / `--xz-input` / `--xz-ring`
134
+ **Base Colors:**
135
+ - `--xz-color-bg-100` / `--xz-color-bg-200` / `--xz-color-bg-300` / `--xz-color-bg-400` - Background shades
136
+ - `--xz-color-content-100` / `--xz-color-content-200` - Text/content colors
137
+ - `--xz-color-border` - Border color
138
+ - `--xz-color-input` - Input border color
139
+ - `--xz-color-ring` - Focus ring color
140
+
141
+ **Semantic Colors (primary, danger, success, warning, info):**
142
+ - `--xz-color-{name}-bg-100` - Main background color
143
+ - `--xz-color-{name}-bg-200` - Hover/darker background color
144
+ - `--xz-color-{name}-content-100` - Main content color
145
+ - `--xz-color-{name}-content-200` - Muted content color
146
+ - `--xz-color-{name}-fg` - Foreground/text color for use on background
159
147
 
160
148
  ### Using Design Tokens in JavaScript/TypeScript
161
149
 
162
150
  ```typescript
163
- import { colors, typography, spacing } from '@fastwork/xosmoz-theme';
151
+ import { lightTheme, darkTheme, typography, spacing } from '@fastwork/xosmoz-theme';
164
152
 
165
- // Access color tokens
166
- console.log(colors.primary[500]); // '#0ea5e9'
153
+ // Access color tokens from themes
154
+ console.log(lightTheme.colors.fastwork[500]); // 'oklch(0.72 .1881 260)'
155
+ console.log(darkTheme.colors.gray[300]); // 'oklch(0.90 0.005 260)'
167
156
 
168
157
  // Access typography
169
158
  console.log(typography.fontSize.lg); // '1.125rem'
@@ -172,38 +161,27 @@ console.log(typography.fontSize.lg); // '1.125rem'
172
161
  console.log(spacing[4]); // '1rem'
173
162
  ```
174
163
 
175
- ### Using the Theme Object
176
-
177
- ```typescript
178
- import { defaultTheme, createTheme } from '@fastwork/xosmoz-theme';
179
-
180
- // Use default theme
181
- console.log(defaultTheme);
182
-
183
- // Create custom theme
184
- const customTheme = createTheme({
185
- colors: {
186
- primary: {
187
- // Override primary colors
188
- 500: '#custom-color',
189
- // ... other shades
190
- },
191
- },
192
- });
193
- ```
194
-
195
164
  ### Generate CSS Variables Programmatically
196
165
 
197
166
  ```typescript
198
- import { generateCSSVariables, defaultTheme } from '@fastwork/xosmoz-theme';
167
+ import { generateCSSVariables, lightTheme, typography, spacing, borderRadius, shadows } from '@fastwork/xosmoz-theme';
168
+
169
+ // Construct a complete theme object
170
+ const themeObject = {
171
+ colors: lightTheme.colors,
172
+ typography,
173
+ spacing,
174
+ borderRadius,
175
+ shadows,
176
+ };
199
177
 
200
178
  // Generate CSS custom properties as a string
201
- const cssVars = generateCSSVariables(defaultTheme);
179
+ const cssVars = generateCSSVariables(themeObject);
202
180
  console.log(cssVars);
203
181
  // Output:
204
182
  // :root {
205
- // --xz-color-primary-50: #f0f9ff;
206
- // --xz-color-primary-100: #e0f2fe;
183
+ // --xosmoz-color-fastwork-100: oklch(0.96 .0223 260);
184
+ // --xosmoz-color-fastwork-200: oklch(0.94 .0299 260);
207
185
  // ...
208
186
  // }
209
187
  ```
@@ -245,13 +223,10 @@ After building, the following CSS files are generated in `dist/`:
245
223
  - **`base.css`** - Base styles and CSS resets
246
224
  - **`xosmoz.css`** - Complete legacy bundle (variables + semantic + base)
247
225
 
248
- ### Theme Files (DaisyUI-style)
249
- - **`themes.css`** - All 5 predefined themes in one file
226
+ ### Theme Files
227
+ - **`themes.css`** - All predefined themes in one file
250
228
  - **`themes/light.css`** - Light theme only
251
229
  - **`themes/dark.css`** - Dark theme only
252
- - **`themes/cyberpunk.css`** - Cyberpunk theme only
253
- - **`themes/forest.css`** - Forest theme only
254
- - **`themes/ocean.css`** - Ocean theme only
255
230
 
256
231
  ### Import Examples
257
232
 
package/dist/base.css CHANGED
@@ -15,9 +15,9 @@ html {
15
15
  }
16
16
 
17
17
  body {
18
- font-family: var(--xz-font-family-sans);
18
+ font-family: var(--xz-font-family-primary);
19
19
  font-size: var(--xz-font-size-base);
20
20
  line-height: var(--xz-line-height-normal);
21
- color: var(--xz-foreground);
22
- background-color: var(--xz-background);
21
+ color: var(--xz-color-content-100);
22
+ background-color: var(--xz-color-bg-100);
23
23
  }
package/dist/{index-B3oQ5FIa.d.mts → index-D8kHN4dA.d.mts} RENAMED
@@ -2,7 +2,6 @@
2
2
  * Theme type definitions
3
3
  */
4
4
  interface ColorToken {
5
- 50: string;
6
5
  100: string;
7
6
  200: string;
8
7
  300: string;
@@ -12,20 +11,20 @@ interface ColorToken {
12
11
  700: string;
13
12
  800: string;
14
13
  900: string;
15
- 1000?: string;
16
- 1100?: string;
14
+ 1000: string;
17
15
  }
18
16
  interface ThemeColors {
19
- primary: ColorToken;
20
- neutral: ColorToken;
17
+ fastwork: ColorToken;
18
+ gray: ColorToken;
21
19
  green: ColorToken;
22
- yellow: ColorToken;
20
+ mint: ColorToken;
21
+ amber: ColorToken;
23
22
  red: ColorToken;
24
23
  orange: ColorToken;
25
24
  purple: ColorToken;
26
25
  cyan: ColorToken;
27
- 'black-alpha': ColorToken;
28
- 'white-alpha': ColorToken;
26
+ blackAlpha: ColorToken;
27
+ whiteAlpha: ColorToken;
29
28
  }
30
29
  interface TypographyScale {
31
30
  50: string;
@@ -179,22 +178,6 @@ interface Theme {
179
178
  shadows: Shadows;
180
179
  }
181
180
 
182
- /**
183
- * Color design tokens
184
- */
185
-
186
- declare const primary: ColorToken;
187
- declare const neutral: ColorToken;
188
- declare const green: ColorToken;
189
- declare const yellow: ColorToken;
190
- declare const red: ColorToken;
191
- declare const orange: ColorToken;
192
- declare const purple: ColorToken;
193
- declare const cyan: ColorToken;
194
- declare const blackAlpha: ColorToken;
195
- declare const whiteAlpha: ColorToken;
196
- declare const colors: ThemeColors;
197
-
198
181
  /**
199
182
  * Typography design tokens
200
183
  */
@@ -256,4 +239,4 @@ declare const shadows: Shadows;
256
239
 
257
240
  declare const borderRadius: BorderRadius;
258
241
 
259
- export { type TitleTokens as A, type BodyTokens as B, type ColorToken as C, type SpacingScale as D, type BorderRadius as E, type FontWeights as F, type Shadows as G, type HeadingTokens as H, type SubtitleTokens as S, type Theme as T, purple as a, blackAlpha as b, cyan as c, colors as d, fontWeight as e, fontSize as f, green as g, fontFamily as h, headings as i, body as j, typography as k, lineHeight as l, spacing as m, neutral as n, orange as o, primary as p, shadows as q, red as r, subtitles as s, titles as t, borderRadius as u, type ThemeColors as v, whiteAlpha as w, type TypographyScale as x, yellow as y, type TypographyToken as z };
242
+ export { type BodyTokens as B, type ColorToken as C, type FontWeights as F, type HeadingTokens as H, type SubtitleTokens as S, type ThemeColors as T, fontWeight as a, fontFamily as b, body as c, typography as d, spacing as e, fontSize as f, shadows as g, headings as h, borderRadius as i, type TypographyScale as j, type TypographyToken as k, lineHeight as l, type TitleTokens as m, type SpacingScale as n, type BorderRadius as o, type Shadows as p, type Theme as q, subtitles as s, titles as t };
package/dist/{index-B3oQ5FIa.d.ts → index-D8kHN4dA.d.ts} RENAMED
@@ -2,7 +2,6 @@
2
2
  * Theme type definitions
3
3
  */
4
4
  interface ColorToken {
5
- 50: string;
6
5
  100: string;
7
6
  200: string;
8
7
  300: string;
@@ -12,20 +11,20 @@ interface ColorToken {
12
11
  700: string;
13
12
  800: string;
14
13
  900: string;
15
- 1000?: string;
16
- 1100?: string;
14
+ 1000: string;
17
15
  }
18
16
  interface ThemeColors {
19
- primary: ColorToken;
20
- neutral: ColorToken;
17
+ fastwork: ColorToken;
18
+ gray: ColorToken;
21
19
  green: ColorToken;
22
- yellow: ColorToken;
20
+ mint: ColorToken;
21
+ amber: ColorToken;
23
22
  red: ColorToken;
24
23
  orange: ColorToken;
25
24
  purple: ColorToken;
26
25
  cyan: ColorToken;
27
- 'black-alpha': ColorToken;
28
- 'white-alpha': ColorToken;
26
+ blackAlpha: ColorToken;
27
+ whiteAlpha: ColorToken;
29
28
  }
30
29
  interface TypographyScale {
31
30
  50: string;
@@ -179,22 +178,6 @@ interface Theme {
179
178
  shadows: Shadows;
180
179
  }
181
180
 
182
- /**
183
- * Color design tokens
184
- */
185
-
186
- declare const primary: ColorToken;
187
- declare const neutral: ColorToken;
188
- declare const green: ColorToken;
189
- declare const yellow: ColorToken;
190
- declare const red: ColorToken;
191
- declare const orange: ColorToken;
192
- declare const purple: ColorToken;
193
- declare const cyan: ColorToken;
194
- declare const blackAlpha: ColorToken;
195
- declare const whiteAlpha: ColorToken;
196
- declare const colors: ThemeColors;
197
-
198
181
  /**
199
182
  * Typography design tokens
200
183
  */
@@ -256,4 +239,4 @@ declare const shadows: Shadows;
256
239
 
257
240
  declare const borderRadius: BorderRadius;
258
241
 
259
- export { type TitleTokens as A, type BodyTokens as B, type ColorToken as C, type SpacingScale as D, type BorderRadius as E, type FontWeights as F, type Shadows as G, type HeadingTokens as H, type SubtitleTokens as S, type Theme as T, purple as a, blackAlpha as b, cyan as c, colors as d, fontWeight as e, fontSize as f, green as g, fontFamily as h, headings as i, body as j, typography as k, lineHeight as l, spacing as m, neutral as n, orange as o, primary as p, shadows as q, red as r, subtitles as s, titles as t, borderRadius as u, type ThemeColors as v, whiteAlpha as w, type TypographyScale as x, yellow as y, type TypographyToken as z };
242
+ export { type BodyTokens as B, type ColorToken as C, type FontWeights as F, type HeadingTokens as H, type SubtitleTokens as S, type ThemeColors as T, fontWeight as a, fontFamily as b, body as c, typography as d, spacing as e, fontSize as f, shadows as g, headings as h, borderRadius as i, type TypographyScale as j, type TypographyToken as k, lineHeight as l, type TitleTokens as m, type SpacingScale as n, type BorderRadius as o, type Shadows as p, type Theme as q, subtitles as s, titles as t };
package/dist/index.d.mts CHANGED
@@ -1,90 +1,82 @@
1
- import { T as Theme } from './index-B3oQ5FIa.mjs';
2
- export { B as BodyTokens, E as BorderRadius, C as ColorToken, F as FontWeights, H as HeadingTokens, G as Shadows, D as SpacingScale, S as SubtitleTokens, v as ThemeColors, A as TitleTokens, x as TypographyScale, z as TypographyToken, b as blackAlpha, j as body, u as borderRadius, d as colors, c as cyan, h as fontFamily, f as fontSize, e as fontWeight, g as green, i as headings, l as lineHeight, n as neutral, o as orange, p as primary, a as purple, r as red, q as shadows, m as spacing, s as subtitles, t as titles, k as typography, w as whiteAlpha, y as yellow } from './index-B3oQ5FIa.mjs';
3
-
4
- /**
5
- * Theme configuration
6
- */
7
-
8
- declare const defaultTheme: Theme;
9
- /**
10
- * Create a custom theme by merging with the default theme
11
- */
12
- declare function createTheme(overrides?: Partial<Theme>): Theme;
13
- /**
14
- * Generate CSS custom properties from theme
15
- */
16
- declare function themeToCSSVariables(theme: Theme): Record<string, string>;
17
- /**
18
- * Generate CSS string from theme
19
- */
20
- declare function generateCSSVariables(theme?: Theme): string;
1
+ import { C as ColorToken } from './index-D8kHN4dA.mjs';
2
+ export { B as BodyTokens, o as BorderRadius, F as FontWeights, H as HeadingTokens, p as Shadows, n as SpacingScale, S as SubtitleTokens, q as Theme, T as ThemeColors, m as TitleTokens, j as TypographyScale, k as TypographyToken, c as body, i as borderRadius, b as fontFamily, f as fontSize, a as fontWeight, h as headings, l as lineHeight, g as shadows, e as spacing, s as subtitles, t as titles, d as typography } from './index-D8kHN4dA.mjs';
21
3
 
22
4
  /**
23
5
  * Theme configuration types
24
6
  */
7
+
8
+ type ThemeColorShape = {
9
+ soft: {
10
+ 100: string;
11
+ 200: string;
12
+ 300: string;
13
+ };
14
+ line: {
15
+ 100: string;
16
+ 200: string;
17
+ 300: string;
18
+ };
19
+ bg: {
20
+ 100: string;
21
+ 200: string;
22
+ };
23
+ content: {
24
+ 100: string;
25
+ 200: string;
26
+ };
27
+ fg: string;
28
+ };
25
29
  interface ThemeConfig {
26
30
  name: string;
27
31
  colors: {
28
- background: string;
29
- foreground: string;
30
- muted: string;
31
- mutedForeground: string;
32
- border: string;
33
- input: string;
34
- ring: string;
35
- card: string;
36
- cardForeground: string;
37
- popover: string;
38
- popoverForeground: string;
39
- primary: string;
40
- primaryForeground: string;
41
- secondary: string;
42
- secondaryForeground: string;
43
- accent: string;
44
- accentForeground: string;
45
- destructive: string;
46
- destructiveForeground: string;
47
- success: string;
48
- successForeground: string;
49
- warning: string;
50
- warningForeground: string;
51
- info: string;
52
- infoForeground: string;
32
+ bg: {
33
+ 100: string;
34
+ 200: string;
35
+ 300: string;
36
+ 400: string;
37
+ };
38
+ content: {
39
+ 100: string;
40
+ 200: string;
41
+ };
42
+ line: {
43
+ 100: string;
44
+ 200: string;
45
+ 300: string;
46
+ };
47
+ primary: ThemeColorShape;
48
+ danger: ThemeColorShape;
49
+ success: ThemeColorShape;
50
+ warning: ThemeColorShape;
51
+ info: ThemeColorShape;
52
+ fastwork: ColorToken;
53
+ gray: ColorToken;
54
+ green: ColorToken;
55
+ mint: ColorToken;
56
+ amber: ColorToken;
57
+ red: ColorToken;
58
+ orange: ColorToken;
59
+ purple: ColorToken;
60
+ cyan: ColorToken;
61
+ blackAlpha: ColorToken;
62
+ whiteAlpha: ColorToken;
53
63
  };
54
64
  }
55
- type ThemeName = 'light' | 'dark' | 'cyberpunk' | 'forest' | 'ocean';
65
+ type ThemeName = 'light' | 'dark';
56
66
  type ThemeRegistry = Record<ThemeName, ThemeConfig>;
57
67
 
58
- /**
59
- * Light theme configuration
60
- */
61
-
62
68
  declare const lightTheme: ThemeConfig;
63
69
 
64
70
  /**
65
71
  * Dark theme configuration
72
+ * Leveraging OKLCH for optimal color management:
73
+ * - Uses inverted lightness (1-L) from light theme via CSS relative color syntax
74
+ * - Maintains same chroma and hue values for consistency
75
+ * - Ensures WCAG AA contrast ratios in dark environments
66
76
  */
67
77
 
68
78
  declare const darkTheme: ThemeConfig;
69
79
 
70
- /**
71
- * Cyberpunk theme - Neon colors on dark background
72
- */
73
-
74
- declare const cyberpunkTheme: ThemeConfig;
75
-
76
- /**
77
- * Forest theme - Natural greens and earthy tones
78
- */
79
-
80
- declare const forestTheme: ThemeConfig;
81
-
82
- /**
83
- * Ocean theme - Deep blues and aqua tones
84
- */
85
-
86
- declare const oceanTheme: ThemeConfig;
87
-
88
80
  /**
89
81
  * Theme registry and exports
90
82
  */
@@ -101,9 +93,5 @@ declare function getTheme(name: ThemeName): ThemeConfig;
101
93
  * Get all theme names
102
94
  */
103
95
  declare function getThemeNames(): ThemeName[];
104
- /**
105
- * Create a custom theme
106
- */
107
- declare function createCustomTheme(name: string, colors: Partial<ThemeConfig['colors']>, baseTheme?: ThemeName): ThemeConfig;
108
96
 
109
- export { Theme, type ThemeConfig, type ThemeName, type ThemeRegistry, createCustomTheme, createTheme, cyberpunkTheme, darkTheme, defaultTheme, forestTheme, generateCSSVariables, getTheme, getThemeNames, lightTheme, oceanTheme, themeToCSSVariables, themes };
97
+ export { ColorToken, type ThemeConfig, type ThemeName, type ThemeRegistry, darkTheme, getTheme, getThemeNames, lightTheme, themes };
package/dist/index.d.ts CHANGED
@@ -1,90 +1,82 @@
1
- import { T as Theme } from './index-B3oQ5FIa.js';
2
- export { B as BodyTokens, E as BorderRadius, C as ColorToken, F as FontWeights, H as HeadingTokens, G as Shadows, D as SpacingScale, S as SubtitleTokens, v as ThemeColors, A as TitleTokens, x as TypographyScale, z as TypographyToken, b as blackAlpha, j as body, u as borderRadius, d as colors, c as cyan, h as fontFamily, f as fontSize, e as fontWeight, g as green, i as headings, l as lineHeight, n as neutral, o as orange, p as primary, a as purple, r as red, q as shadows, m as spacing, s as subtitles, t as titles, k as typography, w as whiteAlpha, y as yellow } from './index-B3oQ5FIa.js';
3
-
4
- /**
5
- * Theme configuration
6
- */
7
-
8
- declare const defaultTheme: Theme;
9
- /**
10
- * Create a custom theme by merging with the default theme
11
- */
12
- declare function createTheme(overrides?: Partial<Theme>): Theme;
13
- /**
14
- * Generate CSS custom properties from theme
15
- */
16
- declare function themeToCSSVariables(theme: Theme): Record<string, string>;
17
- /**
18
- * Generate CSS string from theme
19
- */
20
- declare function generateCSSVariables(theme?: Theme): string;
1
+ import { C as ColorToken } from './index-D8kHN4dA.js';
2
+ export { B as BodyTokens, o as BorderRadius, F as FontWeights, H as HeadingTokens, p as Shadows, n as SpacingScale, S as SubtitleTokens, q as Theme, T as ThemeColors, m as TitleTokens, j as TypographyScale, k as TypographyToken, c as body, i as borderRadius, b as fontFamily, f as fontSize, a as fontWeight, h as headings, l as lineHeight, g as shadows, e as spacing, s as subtitles, t as titles, d as typography } from './index-D8kHN4dA.js';
21
3
 
22
4
  /**
23
5
  * Theme configuration types
24
6
  */
7
+
8
+ type ThemeColorShape = {
9
+ soft: {
10
+ 100: string;
11
+ 200: string;
12
+ 300: string;
13
+ };
14
+ line: {
15
+ 100: string;
16
+ 200: string;
17
+ 300: string;
18
+ };
19
+ bg: {
20
+ 100: string;
21
+ 200: string;
22
+ };
23
+ content: {
24
+ 100: string;
25
+ 200: string;
26
+ };
27
+ fg: string;
28
+ };
25
29
  interface ThemeConfig {
26
30
  name: string;
27
31
  colors: {
28
- background: string;
29
- foreground: string;
30
- muted: string;
31
- mutedForeground: string;
32
- border: string;
33
- input: string;
34
- ring: string;
35
- card: string;
36
- cardForeground: string;
37
- popover: string;
38
- popoverForeground: string;
39
- primary: string;
40
- primaryForeground: string;
41
- secondary: string;
42
- secondaryForeground: string;
43
- accent: string;
44
- accentForeground: string;
45
- destructive: string;
46
- destructiveForeground: string;
47
- success: string;
48
- successForeground: string;
49
- warning: string;
50
- warningForeground: string;
51
- info: string;
52
- infoForeground: string;
32
+ bg: {
33
+ 100: string;
34
+ 200: string;
35
+ 300: string;
36
+ 400: string;
37
+ };
38
+ content: {
39
+ 100: string;
40
+ 200: string;
41
+ };
42
+ line: {
43
+ 100: string;
44
+ 200: string;
45
+ 300: string;
46
+ };
47
+ primary: ThemeColorShape;
48
+ danger: ThemeColorShape;
49
+ success: ThemeColorShape;
50
+ warning: ThemeColorShape;
51
+ info: ThemeColorShape;
52
+ fastwork: ColorToken;
53
+ gray: ColorToken;
54
+ green: ColorToken;
55
+ mint: ColorToken;
56
+ amber: ColorToken;
57
+ red: ColorToken;
58
+ orange: ColorToken;
59
+ purple: ColorToken;
60
+ cyan: ColorToken;
61
+ blackAlpha: ColorToken;
62
+ whiteAlpha: ColorToken;
53
63
  };
54
64
  }
55
- type ThemeName = 'light' | 'dark' | 'cyberpunk' | 'forest' | 'ocean';
65
+ type ThemeName = 'light' | 'dark';
56
66
  type ThemeRegistry = Record<ThemeName, ThemeConfig>;
57
67
 
58
- /**
59
- * Light theme configuration
60
- */
61
-
62
68
  declare const lightTheme: ThemeConfig;
63
69
 
64
70
  /**
65
71
  * Dark theme configuration
72
+ * Leveraging OKLCH for optimal color management:
73
+ * - Uses inverted lightness (1-L) from light theme via CSS relative color syntax
74
+ * - Maintains same chroma and hue values for consistency
75
+ * - Ensures WCAG AA contrast ratios in dark environments
66
76
  */
67
77
 
68
78
  declare const darkTheme: ThemeConfig;
69
79
 
70
- /**
71
- * Cyberpunk theme - Neon colors on dark background
72
- */
73
-
74
- declare const cyberpunkTheme: ThemeConfig;
75
-
76
- /**
77
- * Forest theme - Natural greens and earthy tones
78
- */
79
-
80
- declare const forestTheme: ThemeConfig;
81
-
82
- /**
83
- * Ocean theme - Deep blues and aqua tones
84
- */
85
-
86
- declare const oceanTheme: ThemeConfig;
87
-
88
80
  /**
89
81
  * Theme registry and exports
90
82
  */
@@ -101,9 +93,5 @@ declare function getTheme(name: ThemeName): ThemeConfig;
101
93
  * Get all theme names
102
94
  */
103
95
  declare function getThemeNames(): ThemeName[];
104
- /**
105
- * Create a custom theme
106
- */
107
- declare function createCustomTheme(name: string, colors: Partial<ThemeConfig['colors']>, baseTheme?: ThemeName): ThemeConfig;
108
96
 
109
- export { Theme, type ThemeConfig, type ThemeName, type ThemeRegistry, createCustomTheme, createTheme, cyberpunkTheme, darkTheme, defaultTheme, forestTheme, generateCSSVariables, getTheme, getThemeNames, lightTheme, oceanTheme, themeToCSSVariables, themes };
97
+ export { ColorToken, type ThemeConfig, type ThemeName, type ThemeRegistry, darkTheme, getTheme, getThemeNames, lightTheme, themes };