@srcroot/ui 0.0.44 → 0.0.45

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 (16) hide show
  1. package/package.json +1 -1
  2. package/src/registry/analytics/google-tag-manager.tsx +1 -1
  3. package/src/registry/themes/v4/blue.css +34 -36
  4. package/src/registry/themes/v4/gray.css +36 -38
  5. package/src/registry/themes/v4/green.css +34 -36
  6. package/src/registry/themes/v4/neutral.css +36 -38
  7. package/src/registry/themes/v4/orange.css +34 -36
  8. package/src/registry/themes/v4/rose.css +34 -36
  9. package/src/registry/themes/v4/slate.css +36 -38
  10. package/src/registry/themes/v4/stone.css +36 -38
  11. package/src/registry/themes/v4/violet.css +36 -38
  12. package/src/registry/themes/v4/zinc.css +34 -36
  13. package/src/registry/ui/chart.tsx +17 -15
  14. package/src/registry/ui/dropdown-menu.tsx +92 -15
  15. package/src/registry/ui/sidebar.tsx +159 -0
  16. package/src/registry/ui/theme-switcher.tsx +66 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@srcroot/ui",
3
- "version": "0.0.44",
3
+ "version": "0.0.45",
4
4
  "description": "A UI library with polymorphic, accessible React components",
5
5
  "type": "module",
6
6
  "bin": {
package/src/registry/analytics/google-tag-manager.tsx CHANGED
@@ -48,7 +48,7 @@ const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
48
48
  {containers.map(({ gtmId, tagServerUrl = defaultServer }) => (
49
49
  <iframe
50
50
  key={gtmId}
51
- src={`${tagServer}/ns.html?id=${gtmId}`}
51
+ src={`${tagServerUrl}/ns.html?id=${gtmId}`}
52
52
  height="0"
53
53
  width="0"
54
54
  style={{ display: 'none', visibility: 'hidden' }}
package/src/registry/themes/v4/blue.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(221.2 40% 6%);
132
- --foreground: hsl(210 40% 98%);
129
+ .dark {
130
+ --background: hsl(221.2 40% 6%);
131
+ --foreground: hsl(210 40% 98%);
133
132
 
134
- --card: hsl(221.2 40% 8%);
135
- --card-foreground: hsl(210 40% 98%);
133
+ --card: hsl(221.2 40% 8%);
134
+ --card-foreground: hsl(210 40% 98%);
136
135
 
137
- --popover: hsl(221.2 40% 8%);
138
- --popover-foreground: hsl(210 40% 98%);
136
+ --popover: hsl(221.2 40% 8%);
137
+ --popover-foreground: hsl(210 40% 98%);
139
138
 
140
- --primary: hsl(221.2 83.2% 53.3%);
141
- --primary-foreground: hsl(210 40% 98%);
139
+ --primary: hsl(221.2 83.2% 53.3%);
140
+ --primary-foreground: hsl(210 40% 98%);
142
141
 
143
- --secondary: hsl(221.2 30% 15%);
144
- --secondary-foreground: hsl(210 40% 98%);
142
+ --secondary: hsl(221.2 30% 15%);
143
+ --secondary-foreground: hsl(210 40% 98%);
145
144
 
146
- --muted: hsl(221.2 30% 15%);
147
- --muted-foreground: hsl(221.2 20% 65%);
145
+ --muted: hsl(221.2 30% 15%);
146
+ --muted-foreground: hsl(221.2 20% 65%);
148
147
 
149
- --accent: hsl(221.2 30% 15%);
150
- --accent-foreground: hsl(210 40% 98%);
148
+ --accent: hsl(221.2 30% 15%);
149
+ --accent-foreground: hsl(210 40% 98%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(0 0% 100%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 100%);
154
153
 
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(221.2 83.2% 53.3%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(221.2 83.2% 53.3%);
157
156
 
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(221.2 83.2% 53.3%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(221.2 83.2% 53.3%);
160
159
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(221.2 83.2% 53.3%);
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(221.2 83.2% 53.3%);
163
162
 
164
- --border: hsl(221.2 30% 18%);
165
- --input: hsl(221.2 30% 18%);
166
- --ring: hsl(221.2 83.2% 53.3%);
163
+ --border: hsl(221.2 30% 18%);
164
+ --input: hsl(221.2 30% 18%);
165
+ --ring: hsl(221.2 83.2% 53.3%);
167
166
 
168
- --sidebar-background: hsl(221.2 40% 10%);
169
- --sidebar-foreground: hsl(210 40% 98%);
170
- --sidebar-primary: hsl(221.2 83.2% 53.3%);
171
- --sidebar-primary-foreground: hsl(210 40% 98%);
172
- --sidebar-accent: hsl(221.2 30% 15%);
173
- --sidebar-accent-foreground: hsl(210 40% 98%);
174
- --sidebar-border: hsl(221.2 30% 18%);
175
- --sidebar-ring: hsl(221.2 83.2% 53.3%);
176
- }
167
+ --sidebar-background: hsl(221.2 40% 10%);
168
+ --sidebar-foreground: hsl(210 40% 98%);
169
+ --sidebar-primary: hsl(221.2 83.2% 53.3%);
170
+ --sidebar-primary-foreground: hsl(210 40% 98%);
171
+ --sidebar-accent: hsl(221.2 30% 15%);
172
+ --sidebar-accent-foreground: hsl(210 40% 98%);
173
+ --sidebar-border: hsl(221.2 30% 18%);
174
+ --sidebar-ring: hsl(221.2 83.2% 53.3%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/gray.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(224 71.4% 4.1%);
132
- --foreground: hsl(210 20% 98%);
129
+ .dark {
130
+ --background: hsl(224 71.4% 4.1%);
131
+ --foreground: hsl(210 20% 98%);
133
132
 
134
- --card: hsl(224 71.4% 4.1%);
135
- --card-foreground: hsl(210 20% 98%);
133
+ --card: hsl(224 71.4% 4.1%);
134
+ --card-foreground: hsl(210 20% 98%);
136
135
 
137
- --popover: hsl(224 71.4% 4.1%);
138
- --popover-foreground: hsl(210 20% 98%);
136
+ --popover: hsl(224 71.4% 4.1%);
137
+ --popover-foreground: hsl(210 20% 98%);
139
138
 
140
- --primary: hsl(210 20% 98%);
141
- --primary-foreground: hsl(220.9 39.3% 11%);
139
+ --primary: hsl(210 20% 98%);
140
+ --primary-foreground: hsl(220.9 39.3% 11%);
142
141
 
143
- --secondary: hsl(215 27.9% 16.9%);
144
- --secondary-foreground: hsl(210 20% 98%);
142
+ --secondary: hsl(215 27.9% 16.9%);
143
+ --secondary-foreground: hsl(210 20% 98%);
145
144
 
146
- --muted: hsl(215 27.9% 16.9%);
147
- --muted-foreground: hsl(217.9 10.6% 64.9%);
145
+ --muted: hsl(215 27.9% 16.9%);
146
+ --muted-foreground: hsl(217.9 10.6% 64.9%);
148
147
 
149
- --accent: hsl(215 27.9% 16.9%);
150
- --accent-foreground: hsl(210 20% 98%);
148
+ --accent: hsl(215 27.9% 16.9%);
149
+ --accent-foreground: hsl(210 20% 98%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(210 20% 98%);
154
-
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(220.9 39.3% 11%);
157
-
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(220.9 39.3% 11%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(210 20% 98%);
160
153
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(220.9 39.3% 11%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(220.9 39.3% 11%);
163
156
 
164
- --border: hsl(215 27.9% 16.9%);
165
- --input: hsl(215 27.9% 16.9%);
166
- --ring: hsl(216 12.2% 83.9%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(220.9 39.3% 11%);
167
159
 
168
- --sidebar-background: hsl(224 71.4% 10%);
169
- --sidebar-foreground: hsl(210 20% 98%);
170
- --sidebar-primary: hsl(210 20% 98%);
171
- --sidebar-primary-foreground: hsl(220.9 39.3% 11%);
172
- --sidebar-accent: hsl(215 27.9% 16.9%);
173
- --sidebar-accent-foreground: hsl(210 20% 98%);
174
- --sidebar-border: hsl(215 27.9% 16.9%);
175
- --sidebar-ring: hsl(216 12.2% 83.9%);
176
- }
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(220.9 39.3% 11%);
162
+
163
+ --border: hsl(215 27.9% 16.9%);
164
+ --input: hsl(215 27.9% 16.9%);
165
+ --ring: hsl(216 12.2% 83.9%);
166
+
167
+ --sidebar-background: hsl(224 71.4% 10%);
168
+ --sidebar-foreground: hsl(210 20% 98%);
169
+ --sidebar-primary: hsl(210 20% 98%);
170
+ --sidebar-primary-foreground: hsl(220.9 39.3% 11%);
171
+ --sidebar-accent: hsl(215 27.9% 16.9%);
172
+ --sidebar-accent-foreground: hsl(210 20% 98%);
173
+ --sidebar-border: hsl(215 27.9% 16.9%);
174
+ --sidebar-ring: hsl(216 12.2% 83.9%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/green.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(142.1 40% 6%);
132
- --foreground: hsl(355.7 100% 97.3%);
129
+ .dark {
130
+ --background: hsl(142.1 40% 6%);
131
+ --foreground: hsl(355.7 100% 97.3%);
133
132
 
134
- --card: hsl(142.1 40% 8%);
135
- --card-foreground: hsl(355.7 100% 97.3%);
133
+ --card: hsl(142.1 40% 8%);
134
+ --card-foreground: hsl(355.7 100% 97.3%);
136
135
 
137
- --popover: hsl(142.1 40% 8%);
138
- --popover-foreground: hsl(355.7 100% 97.3%);
136
+ --popover: hsl(142.1 40% 8%);
137
+ --popover-foreground: hsl(355.7 100% 97.3%);
139
138
 
140
- --primary: hsl(142.1 76.2% 36.3%);
141
- --primary-foreground: hsl(355.7 100% 97.3%);
139
+ --primary: hsl(142.1 76.2% 36.3%);
140
+ --primary-foreground: hsl(355.7 100% 97.3%);
142
141
 
143
- --secondary: hsl(142.1 30% 15%);
144
- --secondary-foreground: hsl(355.7 100% 97.3%);
142
+ --secondary: hsl(142.1 30% 15%);
143
+ --secondary-foreground: hsl(355.7 100% 97.3%);
145
144
 
146
- --muted: hsl(142.1 30% 15%);
147
- --muted-foreground: hsl(142.1 20% 65%);
145
+ --muted: hsl(142.1 30% 15%);
146
+ --muted-foreground: hsl(142.1 20% 65%);
148
147
 
149
- --accent: hsl(142.1 30% 15%);
150
- --accent-foreground: hsl(355.7 100% 97.3%);
148
+ --accent: hsl(142.1 30% 15%);
149
+ --accent-foreground: hsl(355.7 100% 97.3%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(0 0% 100%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 100%);
154
153
 
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(142.1 76.2% 36.3%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(142.1 76.2% 36.3%);
157
156
 
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(142.1 76.2% 36.3%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(142.1 76.2% 36.3%);
160
159
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(142.1 76.2% 36.3%);
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(142.1 76.2% 36.3%);
163
162
 
164
- --border: hsl(142.1 30% 18%);
165
- --input: hsl(142.1 30% 18%);
166
- --ring: hsl(142.1 76.2% 36.3%);
163
+ --border: hsl(142.1 30% 18%);
164
+ --input: hsl(142.1 30% 18%);
165
+ --ring: hsl(142.1 76.2% 36.3%);
167
166
 
168
- --sidebar-background: hsl(142.1 40% 10%);
169
- --sidebar-foreground: hsl(355.7 100% 97.3%);
170
- --sidebar-primary: hsl(142.1 76.2% 36.3%);
171
- --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
172
- --sidebar-accent: hsl(142.1 30% 15%);
173
- --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
174
- --sidebar-border: hsl(142.1 30% 18%);
175
- --sidebar-ring: hsl(142.1 76.2% 36.3%);
176
- }
167
+ --sidebar-background: hsl(142.1 40% 10%);
168
+ --sidebar-foreground: hsl(355.7 100% 97.3%);
169
+ --sidebar-primary: hsl(142.1 76.2% 36.3%);
170
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
171
+ --sidebar-accent: hsl(142.1 30% 15%);
172
+ --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
173
+ --sidebar-border: hsl(142.1 30% 18%);
174
+ --sidebar-ring: hsl(142.1 76.2% 36.3%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/neutral.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(0 0% 3.9%);
132
- --foreground: hsl(0 0% 98%);
129
+ .dark {
130
+ --background: hsl(0 0% 3.9%);
131
+ --foreground: hsl(0 0% 98%);
133
132
 
134
- --card: hsl(0 0% 3.9%);
135
- --card-foreground: hsl(0 0% 98%);
133
+ --card: hsl(0 0% 3.9%);
134
+ --card-foreground: hsl(0 0% 98%);
136
135
 
137
- --popover: hsl(0 0% 3.9%);
138
- --popover-foreground: hsl(0 0% 98%);
136
+ --popover: hsl(0 0% 3.9%);
137
+ --popover-foreground: hsl(0 0% 98%);
139
138
 
140
- --primary: hsl(0 0% 98%);
141
- --primary-foreground: hsl(0 0% 9%);
139
+ --primary: hsl(0 0% 98%);
140
+ --primary-foreground: hsl(0 0% 9%);
142
141
 
143
- --secondary: hsl(0 0% 14.9%);
144
- --secondary-foreground: hsl(0 0% 98%);
142
+ --secondary: hsl(0 0% 14.9%);
143
+ --secondary-foreground: hsl(0 0% 98%);
145
144
 
146
- --muted: hsl(0 0% 14.9%);
147
- --muted-foreground: hsl(0 0% 63.9%);
145
+ --muted: hsl(0 0% 14.9%);
146
+ --muted-foreground: hsl(0 0% 63.9%);
148
147
 
149
- --accent: hsl(0 0% 14.9%);
150
- --accent-foreground: hsl(0 0% 98%);
148
+ --accent: hsl(0 0% 14.9%);
149
+ --accent-foreground: hsl(0 0% 98%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(0 0% 98%);
154
-
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(0 0% 9%);
157
-
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(0 0% 9%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 98%);
160
153
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(0 0% 9%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(0 0% 9%);
163
156
 
164
- --border: hsl(0 0% 14.9%);
165
- --input: hsl(0 0% 14.9%);
166
- --ring: hsl(0 0% 83.1%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(0 0% 9%);
167
159
 
168
- --sidebar-background: hsl(0 0% 10%);
169
- --sidebar-foreground: hsl(0 0% 98%);
170
- --sidebar-primary: hsl(0 0% 98%);
171
- --sidebar-primary-foreground: hsl(0 0% 9%);
172
- --sidebar-accent: hsl(0 0% 14.9%);
173
- --sidebar-accent-foreground: hsl(0 0% 98%);
174
- --sidebar-border: hsl(0 0% 14.9%);
175
- --sidebar-ring: hsl(0 0% 83.1%);
176
- }
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(0 0% 9%);
162
+
163
+ --border: hsl(0 0% 14.9%);
164
+ --input: hsl(0 0% 14.9%);
165
+ --ring: hsl(0 0% 83.1%);
166
+
167
+ --sidebar-background: hsl(0 0% 10%);
168
+ --sidebar-foreground: hsl(0 0% 98%);
169
+ --sidebar-primary: hsl(0 0% 98%);
170
+ --sidebar-primary-foreground: hsl(0 0% 9%);
171
+ --sidebar-accent: hsl(0 0% 14.9%);
172
+ --sidebar-accent-foreground: hsl(0 0% 98%);
173
+ --sidebar-border: hsl(0 0% 14.9%);
174
+ --sidebar-ring: hsl(0 0% 83.1%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/orange.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(24.6 40% 6%);
132
- --foreground: hsl(355.7 100% 97.3%);
129
+ .dark {
130
+ --background: hsl(24.6 40% 6%);
131
+ --foreground: hsl(355.7 100% 97.3%);
133
132
 
134
- --card: hsl(24.6 40% 8%);
135
- --card-foreground: hsl(355.7 100% 97.3%);
133
+ --card: hsl(24.6 40% 8%);
134
+ --card-foreground: hsl(355.7 100% 97.3%);
136
135
 
137
- --popover: hsl(24.6 40% 8%);
138
- --popover-foreground: hsl(355.7 100% 97.3%);
136
+ --popover: hsl(24.6 40% 8%);
137
+ --popover-foreground: hsl(355.7 100% 97.3%);
139
138
 
140
- --primary: hsl(24.6 95% 53.1%);
141
- --primary-foreground: hsl(355.7 100% 97.3%);
139
+ --primary: hsl(24.6 95% 53.1%);
140
+ --primary-foreground: hsl(355.7 100% 97.3%);
142
141
 
143
- --secondary: hsl(24.6 30% 15%);
144
- --secondary-foreground: hsl(355.7 100% 97.3%);
142
+ --secondary: hsl(24.6 30% 15%);
143
+ --secondary-foreground: hsl(355.7 100% 97.3%);
145
144
 
146
- --muted: hsl(24.6 30% 15%);
147
- --muted-foreground: hsl(24.6 20% 65%);
145
+ --muted: hsl(24.6 30% 15%);
146
+ --muted-foreground: hsl(24.6 20% 65%);
148
147
 
149
- --accent: hsl(24.6 30% 15%);
150
- --accent-foreground: hsl(355.7 100% 97.3%);
148
+ --accent: hsl(24.6 30% 15%);
149
+ --accent-foreground: hsl(355.7 100% 97.3%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(0 0% 100%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 100%);
154
153
 
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(24.6 95% 53.1%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(24.6 95% 53.1%);
157
156
 
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(24.6 95% 53.1%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(24.6 95% 53.1%);
160
159
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(24.6 95% 53.1%);
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(24.6 95% 53.1%);
163
162
 
164
- --border: hsl(24.6 30% 18%);
165
- --input: hsl(24.6 30% 18%);
166
- --ring: hsl(24.6 95% 53.1%);
163
+ --border: hsl(24.6 30% 18%);
164
+ --input: hsl(24.6 30% 18%);
165
+ --ring: hsl(24.6 95% 53.1%);
167
166
 
168
- --sidebar-background: hsl(24.6 40% 10%);
169
- --sidebar-foreground: hsl(355.7 100% 97.3%);
170
- --sidebar-primary: hsl(24.6 95% 53.1%);
171
- --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
172
- --sidebar-accent: hsl(24.6 30% 15%);
173
- --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
174
- --sidebar-border: hsl(24.6 30% 18%);
175
- --sidebar-ring: hsl(24.6 95% 53.1%);
176
- }
167
+ --sidebar-background: hsl(24.6 40% 10%);
168
+ --sidebar-foreground: hsl(355.7 100% 97.3%);
169
+ --sidebar-primary: hsl(24.6 95% 53.1%);
170
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
171
+ --sidebar-accent: hsl(24.6 30% 15%);
172
+ --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
173
+ --sidebar-border: hsl(24.6 30% 18%);
174
+ --sidebar-ring: hsl(24.6 95% 53.1%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/rose.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(346.8 40% 6%);
132
- --foreground: hsl(355.7 100% 97.3%);
129
+ .dark {
130
+ --background: hsl(346.8 40% 6%);
131
+ --foreground: hsl(355.7 100% 97.3%);
133
132
 
134
- --card: hsl(346.8 40% 8%);
135
- --card-foreground: hsl(355.7 100% 97.3%);
133
+ --card: hsl(346.8 40% 8%);
134
+ --card-foreground: hsl(355.7 100% 97.3%);
136
135
 
137
- --popover: hsl(346.8 40% 8%);
138
- --popover-foreground: hsl(355.7 100% 97.3%);
136
+ --popover: hsl(346.8 40% 8%);
137
+ --popover-foreground: hsl(355.7 100% 97.3%);
139
138
 
140
- --primary: hsl(346.8 77.2% 49.8%);
141
- --primary-foreground: hsl(355.7 100% 97.3%);
139
+ --primary: hsl(346.8 77.2% 49.8%);
140
+ --primary-foreground: hsl(355.7 100% 97.3%);
142
141
 
143
- --secondary: hsl(346.8 30% 15%);
144
- --secondary-foreground: hsl(355.7 100% 97.3%);
142
+ --secondary: hsl(346.8 30% 15%);
143
+ --secondary-foreground: hsl(355.7 100% 97.3%);
145
144
 
146
- --muted: hsl(346.8 30% 15%);
147
- --muted-foreground: hsl(346.8 20% 65%);
145
+ --muted: hsl(346.8 30% 15%);
146
+ --muted-foreground: hsl(346.8 20% 65%);
148
147
 
149
- --accent: hsl(346.8 30% 15%);
150
- --accent-foreground: hsl(355.7 100% 97.3%);
148
+ --accent: hsl(346.8 30% 15%);
149
+ --accent-foreground: hsl(355.7 100% 97.3%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(0 0% 100%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(0 0% 100%);
154
153
 
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(346.8 77.2% 49.8%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(346.8 77.2% 49.8%);
157
156
 
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(346.8 77.2% 49.8%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(346.8 77.2% 49.8%);
160
159
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(346.8 77.2% 49.8%);
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(346.8 77.2% 49.8%);
163
162
 
164
- --border: hsl(346.8 30% 18%);
165
- --input: hsl(346.8 30% 18%);
166
- --ring: hsl(346.8 77.2% 49.8%);
163
+ --border: hsl(346.8 30% 18%);
164
+ --input: hsl(346.8 30% 18%);
165
+ --ring: hsl(346.8 77.2% 49.8%);
167
166
 
168
- --sidebar-background: hsl(346.8 40% 10%);
169
- --sidebar-foreground: hsl(355.7 100% 97.3%);
170
- --sidebar-primary: hsl(346.8 77.2% 49.8%);
171
- --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
172
- --sidebar-accent: hsl(346.8 30% 15%);
173
- --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
174
- --sidebar-border: hsl(346.8 30% 18%);
175
- --sidebar-ring: hsl(346.8 77.2% 49.8%);
176
- }
167
+ --sidebar-background: hsl(346.8 40% 10%);
168
+ --sidebar-foreground: hsl(355.7 100% 97.3%);
169
+ --sidebar-primary: hsl(346.8 77.2% 49.8%);
170
+ --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
171
+ --sidebar-accent: hsl(346.8 30% 15%);
172
+ --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
173
+ --sidebar-border: hsl(346.8 30% 18%);
174
+ --sidebar-ring: hsl(346.8 77.2% 49.8%);
177
175
  }
178
176
 
179
177
  body {
package/src/registry/themes/v4/slate.css CHANGED
@@ -126,54 +126,52 @@
126
126
  }
127
127
  }
128
128
 
129
- @media (prefers-color-scheme: dark) {
130
- :root {
131
- --background: hsl(222.2 84% 4.9%);
132
- --foreground: hsl(210 40% 98%);
129
+ .dark {
130
+ --background: hsl(222.2 84% 4.9%);
131
+ --foreground: hsl(210 40% 98%);
133
132
 
134
- --card: hsl(222.2 84% 4.9%);
135
- --card-foreground: hsl(210 40% 98%);
133
+ --card: hsl(222.2 84% 4.9%);
134
+ --card-foreground: hsl(210 40% 98%);
136
135
 
137
- --popover: hsl(222.2 84% 4.9%);
138
- --popover-foreground: hsl(210 40% 98%);
136
+ --popover: hsl(222.2 84% 4.9%);
137
+ --popover-foreground: hsl(210 40% 98%);
139
138
 
140
- --primary: hsl(210 40% 98%);
141
- --primary-foreground: hsl(222.2 47.4% 11.2%);
139
+ --primary: hsl(210 40% 98%);
140
+ --primary-foreground: hsl(222.2 47.4% 11.2%);
142
141
 
143
- --secondary: hsl(217.2 32.6% 17.5%);
144
- --secondary-foreground: hsl(210 40% 98%);
142
+ --secondary: hsl(217.2 32.6% 17.5%);
143
+ --secondary-foreground: hsl(210 40% 98%);
145
144
 
146
- --muted: hsl(217.2 32.6% 17.5%);
147
- --muted-foreground: hsl(215 20.2% 65.1%);
145
+ --muted: hsl(217.2 32.6% 17.5%);
146
+ --muted-foreground: hsl(215 20.2% 65.1%);
148
147
 
149
- --accent: hsl(217.2 32.6% 17.5%);
150
- --accent-foreground: hsl(210 40% 98%);
148
+ --accent: hsl(217.2 32.6% 17.5%);
149
+ --accent-foreground: hsl(210 40% 98%);
151
150
 
152
- --destructive: hsl(0 62.8% 30.6%);
153
- --destructive-foreground: hsl(210 40% 98%);
154
-
155
- --success: hsl(142.1 70.6% 45.3%);
156
- --success-foreground: hsl(222.2 47.4% 11.2%);
157
-
158
- --warning: hsl(48 96.5% 53.1%);
159
- --warning-foreground: hsl(222.2 47.4% 11.2%);
151
+ --destructive: hsl(0 62.8% 30.6%);
152
+ --destructive-foreground: hsl(210 40% 98%);
160
153
 
161
- --info: hsl(199.4 95.5% 53.8%);
162
- --info-foreground: hsl(222.2 47.4% 11.2%);
154
+ --success: hsl(142.1 70.6% 45.3%);
155
+ --success-foreground: hsl(222.2 47.4% 11.2%);
163
156
 
164
- --border: hsl(217.2 32.6% 17.5%);
165
- --input: hsl(217.2 32.6% 17.5%);
166
- --ring: hsl(212.7 26.8% 83.9%);
157
+ --warning: hsl(48 96.5% 53.1%);
158
+ --warning-foreground: hsl(222.2 47.4% 11.2%);
167
159
 
168
- --sidebar-background: hsl(222.2 84% 10%);
169
- --sidebar-foreground: hsl(210 40% 98%);
170
- --sidebar-primary: hsl(210 40% 98%);
171
- --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
172
- --sidebar-accent: hsl(217.2 32.6% 17.5%);
173
- --sidebar-accent-foreground: hsl(210 40% 98%);
174
- --sidebar-border: hsl(217.2 32.6% 17.5%);
175
- --sidebar-ring: hsl(212.7 26.8% 83.9%);
176
- }
160
+ --info: hsl(199.4 95.5% 53.8%);
161
+ --info-foreground: hsl(222.2 47.4% 11.2%);
162
+
163
+ --border: hsl(217.2 32.6% 17.5%);
164
+ --input: hsl(217.2 32.6% 17.5%);
165
+ --ring: hsl(212.7 26.8% 83.9%);
166
+
167
+ --sidebar-background: hsl(222.2 84% 10%);
168
+ --sidebar-foreground: hsl(210 40% 98%);
169
+ --sidebar-primary: hsl(210 40% 98%);
170
+ --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
171
+ --sidebar-accent: hsl(217.2 32.6% 17.5%);
172
+ --sidebar-accent-foreground: hsl(210 40% 98%);
173
+ --sidebar-border: hsl(217.2 32.6% 17.5%);
174
+ --sidebar-ring: hsl(212.7 26.8% 83.9%);
177
175
  }
178
176
 
179
177
  body {