@stigmer/theme 0.0.92 → 0.0.94

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 (12) hide show
  1. package/README.md +9 -10
  2. package/package.json +1 -1
  3. package/presets/corporate.css +18 -2
  4. package/presets/fintech.css +18 -2
  5. package/presets/friendly.css +18 -2
  6. package/presets/startup.css +18 -2
  7. package/src/presets/corporate.css +18 -2
  8. package/src/presets/fintech.css +18 -2
  9. package/src/presets/friendly.css +18 -2
  10. package/src/presets/startup.css +18 -2
  11. package/src/tokens.css +17 -1
  12. package/tokens.css +17 -1
package/README.md CHANGED
@@ -18,7 +18,7 @@ Import the base token stylesheet to get all Stigmer design variables (light and
18
18
  @import "@stigmer/theme/tokens.css";
19
19
  ```
20
20
 
21
- This defines CSS custom properties on `:root` (light) and `.dark` (dark mode). All properties use the `--stgm-*` namespace to avoid collisions with host application styles.
21
+ This defines CSS custom properties on `:root` (light) and `[data-stgm-color-mode="dark"]` (dark mode). All properties use the `--stgm-*` namespace to avoid collisions with host application styles.
22
22
 
23
23
  ### Token Reference
24
24
 
@@ -121,11 +121,7 @@ Each preset overrides the full token surface — radius, all surface colors, bor
121
121
  <html class="stgm-theme-corporate">
122
122
  ```
123
123
 
124
- For dark mode, both classes coexist:
125
-
126
- ```html
127
- <html class="stgm-theme-corporate dark">
128
- ```
124
+ Dark mode is controlled by the `data-stgm-color-mode` attribute, which `StigmerProvider` sets automatically from its `colorMode` prop. Preset dark tokens activate when `data-stgm-color-mode="dark"` is present on the same element or an ancestor.
129
125
 
130
126
  3. All components consuming `--stgm-*` variables automatically pick up the new colors.
131
127
 
@@ -156,7 +152,8 @@ You can create your own theme by overriding `--stgm-*` variables. Only override
156
152
  --stgm-sidebar-ring: oklch(0.55 0.15 220);
157
153
  }
158
154
 
159
- .my-custom-theme.dark {
155
+ .my-custom-theme[data-stgm-color-mode="dark"],
156
+ [data-stgm-color-mode="dark"] .my-custom-theme {
160
157
  --stgm-primary: oklch(0.75 0.18 220);
161
158
  --stgm-primary-foreground: oklch(0.145 0 0);
162
159
  --stgm-sidebar-primary: oklch(0.75 0.18 220);
@@ -165,10 +162,12 @@ You can create your own theme by overriding `--stgm-*` variables. Only override
165
162
  }
166
163
  ```
167
164
 
168
- Apply it the same way:
165
+ Apply via `className` on `StigmerProvider`:
169
166
 
170
- ```html
171
- <html class="my-custom-theme dark">
167
+ ```tsx
168
+ <StigmerProvider client={client} className="my-custom-theme" colorMode="dark">
169
+ {children}
170
+ </StigmerProvider>
172
171
  ```
173
172
 
174
173
  ### What a Full Preset Overrides
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stigmer/theme",
3
- "version": "0.0.92",
3
+ "version": "0.0.94",
4
4
  "description": "Design tokens, CSS custom properties, and utility functions for Stigmer UI components",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
package/presets/corporate.css CHANGED
@@ -36,6 +36,14 @@
36
36
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
37
37
  --stgm-muted-subtle: oklch(0.95 0.01 250);
38
38
  --stgm-muted-foreground-subtle: oklch(0.58 0.03 250);
39
+ --stgm-accent-hover: oklch(0.94 0.02 250);
40
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
41
+ --stgm-foreground-hover: oklch(0.25 0.03 250);
42
+ --stgm-border-muted: oklch(0.90 0.02 250);
43
+ --stgm-muted-faint: oklch(0.96 0.01 250);
44
+ --stgm-primary-muted: oklch(0.58 0.10 250);
45
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
46
+ --stgm-muted-foreground-faint: oklch(0.68 0.02 250);
39
47
  --stgm-backdrop: oklch(0.97 0.01 250 / 80%);
40
48
  --stgm-sidebar: oklch(0.20 0.06 250);
41
49
  --stgm-sidebar-foreground: oklch(0.93 0 0);
@@ -49,8 +57,8 @@
49
57
  --stgm-sidebar-ring: oklch(0.48 0.15 250);
50
58
  }
51
59
 
52
- .dark .stgm-theme-corporate,
53
- .stgm-theme-corporate.dark {
60
+ [data-stgm-color-mode="dark"] .stgm-theme-corporate,
61
+ .stgm-theme-corporate[data-stgm-color-mode="dark"] {
54
62
  --stgm-background: oklch(0.16 0.04 250);
55
63
  --stgm-foreground: oklch(0.93 0.01 250);
56
64
  --stgm-card: oklch(0.22 0.05 250);
@@ -81,6 +89,14 @@
81
89
  --stgm-destructive-subtle: oklch(0.24 0.04 22);
82
90
  --stgm-muted-subtle: oklch(0.21 0.03 250);
83
91
  --stgm-muted-foreground-subtle: oklch(0.55 0.04 250);
92
+ --stgm-accent-hover: oklch(0.24 0.04 250);
93
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
94
+ --stgm-foreground-hover: oklch(0.85 0.01 250);
95
+ --stgm-border-muted: oklch(0.32 0.04 250);
96
+ --stgm-muted-faint: oklch(0.19 0.03 250);
97
+ --stgm-primary-muted: oklch(0.60 0.10 250);
98
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
99
+ --stgm-muted-foreground-faint: oklch(0.48 0.03 250);
84
100
  --stgm-backdrop: oklch(0.16 0.04 250 / 80%);
85
101
  --stgm-sidebar: oklch(0.13 0.05 250);
86
102
  --stgm-sidebar-foreground: oklch(0.93 0 0);
package/presets/fintech.css CHANGED
@@ -37,6 +37,14 @@
37
37
  --stgm-destructive-subtle: oklch(0.96 0.03 27);
38
38
  --stgm-muted-subtle: oklch(0.97 0.005 280);
39
39
  --stgm-muted-foreground-subtle: oklch(0.60 0.03 280);
40
+ --stgm-accent-hover: oklch(0.955 0.01 280);
41
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
42
+ --stgm-foreground-hover: oklch(0.22 0.04 280);
43
+ --stgm-border-muted: oklch(0.93 0.008 280);
44
+ --stgm-muted-faint: oklch(0.975 0.003 280);
45
+ --stgm-primary-muted: oklch(0.58 0.14 280);
46
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
47
+ --stgm-muted-foreground-faint: oklch(0.70 0.02 280);
40
48
  --stgm-backdrop: oklch(0.98 0.005 280 / 80%);
41
49
  --stgm-sidebar: oklch(0.12 0.06 280);
42
50
  --stgm-sidebar-foreground: oklch(0.90 0.01 280);
@@ -50,8 +58,8 @@
50
58
  --stgm-sidebar-ring: oklch(0.48 0.18 280);
51
59
  }
52
60
 
53
- .dark .stgm-theme-fintech,
54
- .stgm-theme-fintech.dark {
61
+ [data-stgm-color-mode="dark"] .stgm-theme-fintech,
62
+ .stgm-theme-fintech[data-stgm-color-mode="dark"] {
55
63
  --stgm-background: oklch(0.12 0.05 280);
56
64
  --stgm-foreground: oklch(0.92 0.01 280);
57
65
  --stgm-card: oklch(0.18 0.06 280);
@@ -82,6 +90,14 @@
82
90
  --stgm-destructive-subtle: oklch(0.18 0.04 22);
83
91
  --stgm-muted-subtle: oklch(0.17 0.04 280);
84
92
  --stgm-muted-foreground-subtle: oklch(0.48 0.04 280);
93
+ --stgm-accent-hover: oklch(0.20 0.04 280);
94
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
95
+ --stgm-foreground-hover: oklch(0.84 0.01 280);
96
+ --stgm-border-muted: oklch(0.28 0.04 280);
97
+ --stgm-muted-faint: oklch(0.15 0.04 280);
98
+ --stgm-primary-muted: oklch(0.60 0.14 280);
99
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
100
+ --stgm-muted-foreground-faint: oklch(0.42 0.03 280);
85
101
  --stgm-backdrop: oklch(0.12 0.05 280 / 80%);
86
102
  --stgm-sidebar: oklch(0.08 0.06 280);
87
103
  --stgm-sidebar-foreground: oklch(0.88 0.01 280);
package/presets/friendly.css CHANGED
@@ -36,6 +36,14 @@
36
36
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
37
37
  --stgm-muted-subtle: oklch(0.95 0.02 65);
38
38
  --stgm-muted-foreground-subtle: oklch(0.60 0.03 50);
39
+ --stgm-accent-hover: oklch(0.945 0.02 65);
40
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
41
+ --stgm-foreground-hover: oklch(0.28 0.03 50);
42
+ --stgm-border-muted: oklch(0.92 0.015 65);
43
+ --stgm-muted-faint: oklch(0.96 0.015 65);
44
+ --stgm-primary-muted: oklch(0.68 0.12 40);
45
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
46
+ --stgm-muted-foreground-faint: oklch(0.70 0.02 50);
39
47
  --stgm-backdrop: oklch(0.97 0.015 65 / 80%);
40
48
  --stgm-sidebar: oklch(0.95 0.02 65);
41
49
  --stgm-sidebar-foreground: oklch(0.22 0.03 50);
@@ -49,8 +57,8 @@
49
57
  --stgm-sidebar-ring: oklch(0.62 0.15 40);
50
58
  }
51
59
 
52
- .dark .stgm-theme-friendly,
53
- .stgm-theme-friendly.dark {
60
+ [data-stgm-color-mode="dark"] .stgm-theme-friendly,
61
+ .stgm-theme-friendly[data-stgm-color-mode="dark"] {
54
62
  --stgm-background: oklch(0.18 0.03 50);
55
63
  --stgm-foreground: oklch(0.93 0.01 65);
56
64
  --stgm-card: oklch(0.24 0.04 50);
@@ -81,6 +89,14 @@
81
89
  --stgm-destructive-subtle: oklch(0.26 0.04 22);
82
90
  --stgm-muted-subtle: oklch(0.22 0.02 50);
83
91
  --stgm-muted-foreground-subtle: oklch(0.52 0.03 50);
92
+ --stgm-accent-hover: oklch(0.26 0.03 50);
93
+ --stgm-destructive-hover: oklch(0.64 0.16 22);
94
+ --stgm-foreground-hover: oklch(0.85 0.01 65);
95
+ --stgm-border-muted: oklch(0.30 0.03 50);
96
+ --stgm-muted-faint: oklch(0.20 0.02 50);
97
+ --stgm-primary-muted: oklch(0.62 0.10 40);
98
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
99
+ --stgm-muted-foreground-faint: oklch(0.45 0.02 50);
84
100
  --stgm-backdrop: oklch(0.18 0.03 50 / 80%);
85
101
  --stgm-sidebar: oklch(0.15 0.03 50);
86
102
  --stgm-sidebar-foreground: oklch(0.90 0.01 65);
package/presets/startup.css CHANGED
@@ -35,6 +35,14 @@
35
35
  --stgm-destructive-subtle: oklch(0.96 0.03 27);
36
36
  --stgm-muted-subtle: oklch(0.97 0 0);
37
37
  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
38
+ --stgm-accent-hover: oklch(0.965 0 0);
39
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
40
+ --stgm-foreground-hover: oklch(0.18 0 0);
41
+ --stgm-border-muted: oklch(0.95 0 0);
42
+ --stgm-muted-faint: oklch(0.98 0 0);
43
+ --stgm-primary-muted: oklch(0.58 0.14 285);
44
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
45
+ --stgm-muted-foreground-faint: oklch(0.72 0 0);
38
46
  --stgm-backdrop: oklch(0.99 0 0 / 80%);
39
47
  --stgm-sidebar: oklch(0.97 0 0);
40
48
  --stgm-sidebar-foreground: oklch(0.13 0 0);
@@ -48,8 +56,8 @@
48
56
  --stgm-sidebar-ring: oklch(0.50 0.18 285);
49
57
  }
50
58
 
51
- .dark .stgm-theme-startup,
52
- .stgm-theme-startup.dark {
59
+ [data-stgm-color-mode="dark"] .stgm-theme-startup,
60
+ .stgm-theme-startup[data-stgm-color-mode="dark"] {
53
61
  --stgm-background: oklch(0.09 0 0);
54
62
  --stgm-foreground: oklch(0.90 0 0);
55
63
  --stgm-card: oklch(0.13 0 0);
@@ -80,6 +88,14 @@
80
88
  --stgm-destructive-subtle: oklch(0.16 0.04 22);
81
89
  --stgm-muted-subtle: oklch(0.12 0 0);
82
90
  --stgm-muted-foreground-subtle: oklch(0.45 0 0);
91
+ --stgm-accent-hover: oklch(0.15 0 0);
92
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
93
+ --stgm-foreground-hover: oklch(0.82 0 0);
94
+ --stgm-border-muted: oklch(0.17 0 0);
95
+ --stgm-muted-faint: oklch(0.11 0 0);
96
+ --stgm-primary-muted: oklch(0.62 0.12 285);
97
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
98
+ --stgm-muted-foreground-faint: oklch(0.38 0 0);
83
99
  --stgm-backdrop: oklch(0.09 0 0 / 80%);
84
100
  --stgm-sidebar: oklch(0.07 0 0);
85
101
  --stgm-sidebar-foreground: oklch(0.85 0 0);
package/src/presets/corporate.css CHANGED
@@ -36,6 +36,14 @@
36
36
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
37
37
  --stgm-muted-subtle: oklch(0.95 0.01 250);
38
38
  --stgm-muted-foreground-subtle: oklch(0.58 0.03 250);
39
+ --stgm-accent-hover: oklch(0.94 0.02 250);
40
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
41
+ --stgm-foreground-hover: oklch(0.25 0.03 250);
42
+ --stgm-border-muted: oklch(0.90 0.02 250);
43
+ --stgm-muted-faint: oklch(0.96 0.01 250);
44
+ --stgm-primary-muted: oklch(0.58 0.10 250);
45
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
46
+ --stgm-muted-foreground-faint: oklch(0.68 0.02 250);
39
47
  --stgm-backdrop: oklch(0.97 0.01 250 / 80%);
40
48
  --stgm-sidebar: oklch(0.20 0.06 250);
41
49
  --stgm-sidebar-foreground: oklch(0.93 0 0);
@@ -49,8 +57,8 @@
49
57
  --stgm-sidebar-ring: oklch(0.48 0.15 250);
50
58
  }
51
59
 
52
- .dark .stgm-theme-corporate,
53
- .stgm-theme-corporate.dark {
60
+ [data-stgm-color-mode="dark"] .stgm-theme-corporate,
61
+ .stgm-theme-corporate[data-stgm-color-mode="dark"] {
54
62
  --stgm-background: oklch(0.16 0.04 250);
55
63
  --stgm-foreground: oklch(0.93 0.01 250);
56
64
  --stgm-card: oklch(0.22 0.05 250);
@@ -81,6 +89,14 @@
81
89
  --stgm-destructive-subtle: oklch(0.24 0.04 22);
82
90
  --stgm-muted-subtle: oklch(0.21 0.03 250);
83
91
  --stgm-muted-foreground-subtle: oklch(0.55 0.04 250);
92
+ --stgm-accent-hover: oklch(0.24 0.04 250);
93
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
94
+ --stgm-foreground-hover: oklch(0.85 0.01 250);
95
+ --stgm-border-muted: oklch(0.32 0.04 250);
96
+ --stgm-muted-faint: oklch(0.19 0.03 250);
97
+ --stgm-primary-muted: oklch(0.60 0.10 250);
98
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
99
+ --stgm-muted-foreground-faint: oklch(0.48 0.03 250);
84
100
  --stgm-backdrop: oklch(0.16 0.04 250 / 80%);
85
101
  --stgm-sidebar: oklch(0.13 0.05 250);
86
102
  --stgm-sidebar-foreground: oklch(0.93 0 0);
package/src/presets/fintech.css CHANGED
@@ -37,6 +37,14 @@
37
37
  --stgm-destructive-subtle: oklch(0.96 0.03 27);
38
38
  --stgm-muted-subtle: oklch(0.97 0.005 280);
39
39
  --stgm-muted-foreground-subtle: oklch(0.60 0.03 280);
40
+ --stgm-accent-hover: oklch(0.955 0.01 280);
41
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
42
+ --stgm-foreground-hover: oklch(0.22 0.04 280);
43
+ --stgm-border-muted: oklch(0.93 0.008 280);
44
+ --stgm-muted-faint: oklch(0.975 0.003 280);
45
+ --stgm-primary-muted: oklch(0.58 0.14 280);
46
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
47
+ --stgm-muted-foreground-faint: oklch(0.70 0.02 280);
40
48
  --stgm-backdrop: oklch(0.98 0.005 280 / 80%);
41
49
  --stgm-sidebar: oklch(0.12 0.06 280);
42
50
  --stgm-sidebar-foreground: oklch(0.90 0.01 280);
@@ -50,8 +58,8 @@
50
58
  --stgm-sidebar-ring: oklch(0.48 0.18 280);
51
59
  }
52
60
 
53
- .dark .stgm-theme-fintech,
54
- .stgm-theme-fintech.dark {
61
+ [data-stgm-color-mode="dark"] .stgm-theme-fintech,
62
+ .stgm-theme-fintech[data-stgm-color-mode="dark"] {
55
63
  --stgm-background: oklch(0.12 0.05 280);
56
64
  --stgm-foreground: oklch(0.92 0.01 280);
57
65
  --stgm-card: oklch(0.18 0.06 280);
@@ -82,6 +90,14 @@
82
90
  --stgm-destructive-subtle: oklch(0.18 0.04 22);
83
91
  --stgm-muted-subtle: oklch(0.17 0.04 280);
84
92
  --stgm-muted-foreground-subtle: oklch(0.48 0.04 280);
93
+ --stgm-accent-hover: oklch(0.20 0.04 280);
94
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
95
+ --stgm-foreground-hover: oklch(0.84 0.01 280);
96
+ --stgm-border-muted: oklch(0.28 0.04 280);
97
+ --stgm-muted-faint: oklch(0.15 0.04 280);
98
+ --stgm-primary-muted: oklch(0.60 0.14 280);
99
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
100
+ --stgm-muted-foreground-faint: oklch(0.42 0.03 280);
85
101
  --stgm-backdrop: oklch(0.12 0.05 280 / 80%);
86
102
  --stgm-sidebar: oklch(0.08 0.06 280);
87
103
  --stgm-sidebar-foreground: oklch(0.88 0.01 280);
package/src/presets/friendly.css CHANGED
@@ -36,6 +36,14 @@
36
36
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
37
37
  --stgm-muted-subtle: oklch(0.95 0.02 65);
38
38
  --stgm-muted-foreground-subtle: oklch(0.60 0.03 50);
39
+ --stgm-accent-hover: oklch(0.945 0.02 65);
40
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
41
+ --stgm-foreground-hover: oklch(0.28 0.03 50);
42
+ --stgm-border-muted: oklch(0.92 0.015 65);
43
+ --stgm-muted-faint: oklch(0.96 0.015 65);
44
+ --stgm-primary-muted: oklch(0.68 0.12 40);
45
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
46
+ --stgm-muted-foreground-faint: oklch(0.70 0.02 50);
39
47
  --stgm-backdrop: oklch(0.97 0.015 65 / 80%);
40
48
  --stgm-sidebar: oklch(0.95 0.02 65);
41
49
  --stgm-sidebar-foreground: oklch(0.22 0.03 50);
@@ -49,8 +57,8 @@
49
57
  --stgm-sidebar-ring: oklch(0.62 0.15 40);
50
58
  }
51
59
 
52
- .dark .stgm-theme-friendly,
53
- .stgm-theme-friendly.dark {
60
+ [data-stgm-color-mode="dark"] .stgm-theme-friendly,
61
+ .stgm-theme-friendly[data-stgm-color-mode="dark"] {
54
62
  --stgm-background: oklch(0.18 0.03 50);
55
63
  --stgm-foreground: oklch(0.93 0.01 65);
56
64
  --stgm-card: oklch(0.24 0.04 50);
@@ -81,6 +89,14 @@
81
89
  --stgm-destructive-subtle: oklch(0.26 0.04 22);
82
90
  --stgm-muted-subtle: oklch(0.22 0.02 50);
83
91
  --stgm-muted-foreground-subtle: oklch(0.52 0.03 50);
92
+ --stgm-accent-hover: oklch(0.26 0.03 50);
93
+ --stgm-destructive-hover: oklch(0.64 0.16 22);
94
+ --stgm-foreground-hover: oklch(0.85 0.01 65);
95
+ --stgm-border-muted: oklch(0.30 0.03 50);
96
+ --stgm-muted-faint: oklch(0.20 0.02 50);
97
+ --stgm-primary-muted: oklch(0.62 0.10 40);
98
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
99
+ --stgm-muted-foreground-faint: oklch(0.45 0.02 50);
84
100
  --stgm-backdrop: oklch(0.18 0.03 50 / 80%);
85
101
  --stgm-sidebar: oklch(0.15 0.03 50);
86
102
  --stgm-sidebar-foreground: oklch(0.90 0.01 65);
package/src/presets/startup.css CHANGED
@@ -35,6 +35,14 @@
35
35
  --stgm-destructive-subtle: oklch(0.96 0.03 27);
36
36
  --stgm-muted-subtle: oklch(0.97 0 0);
37
37
  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
38
+ --stgm-accent-hover: oklch(0.965 0 0);
39
+ --stgm-destructive-hover: oklch(0.52 0.22 27);
40
+ --stgm-foreground-hover: oklch(0.18 0 0);
41
+ --stgm-border-muted: oklch(0.95 0 0);
42
+ --stgm-muted-faint: oklch(0.98 0 0);
43
+ --stgm-primary-muted: oklch(0.58 0.14 285);
44
+ --stgm-destructive-muted: oklch(0.65 0.12 27);
45
+ --stgm-muted-foreground-faint: oklch(0.72 0 0);
38
46
  --stgm-backdrop: oklch(0.99 0 0 / 80%);
39
47
  --stgm-sidebar: oklch(0.97 0 0);
40
48
  --stgm-sidebar-foreground: oklch(0.13 0 0);
@@ -48,8 +56,8 @@
48
56
  --stgm-sidebar-ring: oklch(0.50 0.18 285);
49
57
  }
50
58
 
51
- .dark .stgm-theme-startup,
52
- .stgm-theme-startup.dark {
59
+ [data-stgm-color-mode="dark"] .stgm-theme-startup,
60
+ .stgm-theme-startup[data-stgm-color-mode="dark"] {
53
61
  --stgm-background: oklch(0.09 0 0);
54
62
  --stgm-foreground: oklch(0.90 0 0);
55
63
  --stgm-card: oklch(0.13 0 0);
@@ -80,6 +88,14 @@
80
88
  --stgm-destructive-subtle: oklch(0.16 0.04 22);
81
89
  --stgm-muted-subtle: oklch(0.12 0 0);
82
90
  --stgm-muted-foreground-subtle: oklch(0.45 0 0);
91
+ --stgm-accent-hover: oklch(0.15 0 0);
92
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
93
+ --stgm-foreground-hover: oklch(0.82 0 0);
94
+ --stgm-border-muted: oklch(0.17 0 0);
95
+ --stgm-muted-faint: oklch(0.11 0 0);
96
+ --stgm-primary-muted: oklch(0.62 0.12 285);
97
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
98
+ --stgm-muted-foreground-faint: oklch(0.38 0 0);
83
99
  --stgm-backdrop: oklch(0.09 0 0 / 80%);
84
100
  --stgm-sidebar: oklch(0.07 0 0);
85
101
  --stgm-sidebar-foreground: oklch(0.85 0 0);
package/src/tokens.css CHANGED
@@ -43,6 +43,14 @@
43
43
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
44
44
  --stgm-muted-subtle: oklch(0.96 0 0);
45
45
  --stgm-muted-foreground-subtle: oklch(0.64 0 0);
46
+ --stgm-accent-hover: oklch(0.96 0 0);
47
+ --stgm-destructive-hover: oklch(0.52 0.22 27.325);
48
+ --stgm-foreground-hover: oklch(0.20 0 0);
49
+ --stgm-border-muted: oklch(0.92 0 0);
50
+ --stgm-muted-faint: oklch(0.975 0 0);
51
+ --stgm-primary-muted: oklch(0.62 0.08 190);
52
+ --stgm-destructive-muted: oklch(0.65 0.12 27.325);
53
+ --stgm-muted-foreground-faint: oklch(0.72 0 0);
46
54
  --stgm-backdrop: oklch(0.98 0 0 / 80%);
47
55
  --stgm-sidebar: oklch(0.97 0 0);
48
56
  --stgm-sidebar-foreground: oklch(0.145 0 0);
@@ -56,7 +64,7 @@
56
64
  --stgm-sidebar-ring: oklch(0.55 0.1 190);
57
65
  }
58
66
 
59
- .dark {
67
+ [data-stgm-color-mode="dark"] {
60
68
  --stgm-background: oklch(0.145 0 0);
61
69
  --stgm-foreground: oklch(0.985 0 0);
62
70
  --stgm-card: oklch(0.205 0 0);
@@ -95,6 +103,14 @@
95
103
  --stgm-destructive-subtle: oklch(0.24 0.04 22);
96
104
  --stgm-muted-subtle: oklch(0.21 0 0);
97
105
  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
106
+ --stgm-accent-hover: oklch(0.30 0 0);
107
+ --stgm-destructive-hover: oklch(0.64 0.17 22.216);
108
+ --stgm-foreground-hover: oklch(0.90 0 0);
109
+ --stgm-border-muted: oklch(1 0 0 / 8%);
110
+ --stgm-muted-faint: oklch(0.19 0 0);
111
+ --stgm-primary-muted: oklch(0.65 0.08 190);
112
+ --stgm-destructive-muted: oklch(0.60 0.10 22.216);
113
+ --stgm-muted-foreground-faint: oklch(0.55 0 0);
98
114
  --stgm-backdrop: oklch(0.145 0 0 / 80%);
99
115
  --stgm-sidebar: oklch(0.12 0 0);
100
116
  --stgm-sidebar-foreground: oklch(0.985 0 0);
package/tokens.css CHANGED
@@ -43,6 +43,14 @@
43
43
  --stgm-destructive-subtle: oklch(0.95 0.03 27);
44
44
  --stgm-muted-subtle: oklch(0.96 0 0);
45
45
  --stgm-muted-foreground-subtle: oklch(0.64 0 0);
46
+ --stgm-accent-hover: oklch(0.96 0 0);
47
+ --stgm-destructive-hover: oklch(0.52 0.22 27.325);
48
+ --stgm-foreground-hover: oklch(0.20 0 0);
49
+ --stgm-border-muted: oklch(0.92 0 0);
50
+ --stgm-muted-faint: oklch(0.975 0 0);
51
+ --stgm-primary-muted: oklch(0.62 0.08 190);
52
+ --stgm-destructive-muted: oklch(0.65 0.12 27.325);
53
+ --stgm-muted-foreground-faint: oklch(0.72 0 0);
46
54
  --stgm-backdrop: oklch(0.98 0 0 / 80%);
47
55
  --stgm-sidebar: oklch(0.97 0 0);
48
56
  --stgm-sidebar-foreground: oklch(0.145 0 0);
@@ -56,7 +64,7 @@
56
64
  --stgm-sidebar-ring: oklch(0.55 0.1 190);
57
65
  }
58
66
 
59
- .dark {
67
+ [data-stgm-color-mode="dark"] {
60
68
  --stgm-background: oklch(0.145 0 0);
61
69
  --stgm-foreground: oklch(0.985 0 0);
62
70
  --stgm-card: oklch(0.205 0 0);
@@ -95,6 +103,14 @@
95
103
  --stgm-destructive-subtle: oklch(0.24 0.04 22);
96
104
  --stgm-muted-subtle: oklch(0.21 0 0);
97
105
  --stgm-muted-foreground-subtle: oklch(0.60 0 0);
106
+ --stgm-accent-hover: oklch(0.30 0 0);
107
+ --stgm-destructive-hover: oklch(0.64 0.17 22.216);
108
+ --stgm-foreground-hover: oklch(0.90 0 0);
109
+ --stgm-border-muted: oklch(1 0 0 / 8%);
110
+ --stgm-muted-faint: oklch(0.19 0 0);
111
+ --stgm-primary-muted: oklch(0.65 0.08 190);
112
+ --stgm-destructive-muted: oklch(0.60 0.10 22.216);
113
+ --stgm-muted-foreground-faint: oklch(0.55 0 0);
98
114
  --stgm-backdrop: oklch(0.145 0 0 / 80%);
99
115
  --stgm-sidebar: oklch(0.12 0 0);
100
116
  --stgm-sidebar-foreground: oklch(0.985 0 0);