@ropav/styles 0.3.0 → 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.
Files changed (62) hide show
  1. package/README.md +155 -19
  2. package/dist/components/accordion.css +7 -0
  3. package/dist/components/alert.css +8 -0
  4. package/dist/components/autocomplete.css +8 -0
  5. package/dist/components/avatar.css +9 -0
  6. package/dist/components/badge.css +7 -0
  7. package/dist/components/button.css +27 -0
  8. package/dist/components/calendar-year-picker.css +1 -0
  9. package/dist/components/calendar.css +8 -0
  10. package/dist/components/card.css +21 -0
  11. package/dist/components/chip.css +21 -0
  12. package/dist/components/close-button.css +8 -0
  13. package/dist/components/color-input-group.css +9 -0
  14. package/dist/components/color-swatch-picker.css +11 -0
  15. package/dist/components/date-input-group.css +9 -0
  16. package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
  17. package/dist/components/dropdown/dropdown.styles.js +1 -1
  18. package/dist/components/dropdown.css +16 -11
  19. package/dist/components/input-group.css +9 -0
  20. package/dist/components/input.css +10 -0
  21. package/dist/components/menu.css +6 -0
  22. package/dist/components/meter.css +12 -0
  23. package/dist/components/number-field.css +8 -0
  24. package/dist/components/pagination.css +4 -0
  25. package/dist/components/progress-bar.css +12 -0
  26. package/dist/components/progress-circle.css +12 -0
  27. package/dist/components/radio.css +7 -0
  28. package/dist/components/range-calendar.css +28 -0
  29. package/dist/components/search-field.css +8 -0
  30. package/dist/components/select.css +9 -0
  31. package/dist/components/separator.css +18 -1
  32. package/dist/components/skeleton.css +9 -0
  33. package/dist/components/slider.css +61 -0
  34. package/dist/components/surface.css +24 -0
  35. package/dist/components/switch.css +30 -0
  36. package/dist/components/table.css +8 -0
  37. package/dist/components/tabs.css +28 -0
  38. package/dist/components/tag.css +10 -0
  39. package/dist/components/textarea.css +10 -0
  40. package/dist/components/toggle-button.css +10 -0
  41. package/dist/components/toolbar.css +7 -0
  42. package/dist/components/typography.css +21 -0
  43. package/dist/index.css +7 -2
  44. package/dist/ropav.min.css +1 -1
  45. package/dist/themes/airbnb.css +226 -0
  46. package/dist/themes/all.css +16 -0
  47. package/dist/themes/coinbase.css +226 -0
  48. package/dist/themes/{default/variables.css → default.css} +12 -5
  49. package/dist/themes/discord.css +226 -0
  50. package/dist/themes/lavender.css +226 -0
  51. package/dist/themes/mint.css +226 -0
  52. package/dist/themes/netflix.css +226 -0
  53. package/dist/themes/rabbit.css +226 -0
  54. package/dist/themes/sky.css +226 -0
  55. package/dist/themes/spotify.css +226 -0
  56. package/dist/themes/uber.css +226 -0
  57. package/dist/utilities/index.css +70 -0
  58. package/dist/variants/index.css +5 -15
  59. package/package.json +2 -3
  60. package/src/components/dropdown/dropdown.styles.ts +3 -1
  61. package/dist/themes/default/components/index.css +0 -6
  62. package/dist/themes/default/index.css +0 -8
package/dist/themes/spotify.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Spotify theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.7697, chroma 0.2124, hue 148.67, base 0.002.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/spotify.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="spotify"> light
15
+ * <html data-theme="spotify" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="spotify"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 0.125rem;
23
+ --radius: 0.5rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0.002 148.67);
27
+ --foreground: oklch(21.03% 0.002 148.67);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.0006 148.67);
31
+ --overlay-foreground: oklch(21.03% 0.002 148.67);
32
+ --surface: oklch(100% 0.001 148.67);
33
+ --surface-foreground: oklch(21.03% 0.002 148.67);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.0016 148.67);
36
+ --surface-secondary-foreground: oklch(21.03% 0.002 148.67);
37
+ --surface-tertiary: oklch(93.73% 0.0016 148.67);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.002 148.67);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.004 148.67);
42
+ --scrollbar: var(--scrollbar-thumb);
43
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
44
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
45
+
46
+ /* Default */
47
+ --default: oklch(94% 0.002 148.67);
48
+ --default-foreground: oklch(21.03% 0.0059 148.67);
49
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
50
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
51
+ --default-soft-foreground: var(--default-foreground);
52
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
53
+
54
+ /* Accent */
55
+ --accent: oklch(76.97% 0.2124 148.67);
56
+ --accent-foreground: oklch(15% 0.03 148.67);
57
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
58
+ --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
59
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
60
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
61
+ --focus: oklch(76.97% 0.2124 148.67);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.001 148.67);
65
+ --field-border: transparent;
66
+ --field-border-focus: color-mix(
67
+ in oklab,
68
+ var(--field-border, var(--border)) 74%,
69
+ var(--field-foreground, var(--foreground)) 22%
70
+ );
71
+ --field-border-hover: color-mix(
72
+ in oklab,
73
+ var(--field-border, var(--border)) 88%,
74
+ var(--field-foreground, var(--foreground)) 10%
75
+ );
76
+ --field-focus: var(--field-background, var(--default));
77
+ --field-foreground: oklch(21.03% 0.002 148.67);
78
+ --field-hover: color-mix(
79
+ in oklab,
80
+ var(--field-background, var(--default)) 90%,
81
+ var(--field-foreground, var(--foreground)) 2%
82
+ );
83
+ --field-placeholder: oklch(51.6% 0.004 148.67);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(0.5509 0.2166 25.29);
87
+ --danger-foreground: oklch(98% 0.02 25.29);
88
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
89
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
90
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
91
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
92
+ --success: oklch(0.6072 0.1647 149.02);
93
+ --success-foreground: oklch(98% 0.0165 149.02);
94
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
95
+ --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
96
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
97
+ --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
98
+ --warning: oklch(0.6972 0.1687 54.22);
99
+ --warning-foreground: oklch(15% 0.05 54.22);
100
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
101
+ --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
102
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
103
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
104
+
105
+ /* Component Colors */
106
+ --link: var(--foreground);
107
+ --segment: oklch(100% 0.002 148.67);
108
+ --segment-foreground: oklch(21.03% 0.002 148.67);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.002 148.67);
112
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
113
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
114
+ --separator: oklch(92% 0.002 148.67);
115
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
116
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
117
+
118
+ /* Other */
119
+ --background-inverse: var(--foreground);
120
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
121
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
122
+ }
123
+
124
+ [data-theme="spotify"].dark,
125
+ .dark [data-theme="spotify"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.002 148.67);
130
+ --foreground: oklch(99.11% 0.002 148.67);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.004 148.67);
134
+ --overlay-foreground: oklch(99.11% 0.002 148.67);
135
+ --surface: oklch(21.03% 0.004 148.67);
136
+ --surface-foreground: oklch(99.11% 0.002 148.67);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.003 148.67);
139
+ --surface-secondary-foreground: oklch(99.11% 0.002 148.67);
140
+ --surface-tertiary: oklch(27.21% 0.003 148.67);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.002 148.67);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.004 148.67);
145
+ --scrollbar: var(--scrollbar-thumb);
146
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
147
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
148
+
149
+ /* Default */
150
+ --default: oklch(27.4% 0.002 148.67);
151
+ --default-foreground: oklch(99.11% 0 0);
152
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
153
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
154
+ --default-soft-foreground: var(--default-foreground);
155
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
156
+
157
+ /* Accent */
158
+ --accent: oklch(76.97% 0.2124 148.67);
159
+ --accent-foreground: oklch(15% 0.03 148.67);
160
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
161
+ --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
162
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
163
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
164
+ --focus: oklch(76.97% 0.2124 148.67);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.004 148.67);
168
+ --field-border: transparent;
169
+ --field-border-focus: color-mix(
170
+ in oklab,
171
+ var(--field-border, var(--border)) 74%,
172
+ var(--field-foreground, var(--foreground)) 22%
173
+ );
174
+ --field-border-hover: color-mix(
175
+ in oklab,
176
+ var(--field-border, var(--border)) 88%,
177
+ var(--field-foreground, var(--foreground)) 10%
178
+ );
179
+ --field-focus: var(--field-background, var(--default));
180
+ --field-foreground: oklch(99.11% 0.002 148.67);
181
+ --field-hover: color-mix(
182
+ in oklab,
183
+ var(--field-background, var(--default)) 90%,
184
+ var(--field-foreground, var(--foreground)) 2%
185
+ );
186
+ --field-placeholder: oklch(70.5% 0.004 148.67);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(0.5931 0.2338 25.42);
190
+ --danger-foreground: oklch(98% 0.02 25.42);
191
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
192
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
193
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
194
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
195
+ --success: oklch(0.7697 0.2124 148.67);
196
+ --success-foreground: oklch(15% 0.05 148.67);
197
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
198
+ --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
199
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
200
+ --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
201
+ --warning: oklch(0.7921 0.1626 67.42);
202
+ --warning-foreground: oklch(15% 0.0488 67.42);
203
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
204
+ --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
205
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
206
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
207
+
208
+ /* Component Colors */
209
+ --link: var(--foreground);
210
+ --segment: oklch(39.64% 0.002 148.67);
211
+ --segment-foreground: oklch(99.11% 0.002 148.67);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.002 148.67);
215
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
216
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
217
+ --separator: oklch(25% 0.002 148.67);
218
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
219
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
220
+
221
+ /* Other */
222
+ --background-inverse: var(--foreground);
223
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
224
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
225
+ }
226
+ }
package/dist/themes/uber.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Uber theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0, chroma 0, hue 0, base 0.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/uber.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="uber"> light
15
+ * <html data-theme="uber" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="uber"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 0.25rem;
23
+ --radius: 0.25rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0 0);
27
+ --foreground: oklch(21.03% 0 0);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0 0);
31
+ --overlay-foreground: oklch(21.03% 0 0);
32
+ --surface: oklch(100% 0 0);
33
+ --surface-foreground: oklch(21.03% 0 0);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0 0);
36
+ --surface-secondary-foreground: oklch(21.03% 0 0);
37
+ --surface-tertiary: oklch(93.73% 0 0);
38
+ --surface-tertiary-foreground: oklch(21.03% 0 0);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0 0);
42
+ --scrollbar: var(--scrollbar-thumb);
43
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
44
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
45
+
46
+ /* Default */
47
+ --default: oklch(94% 0 0);
48
+ --default-foreground: oklch(21.03% 0.0059 0);
49
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
50
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
51
+ --default-soft-foreground: var(--default-foreground);
52
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
53
+
54
+ /* Accent */
55
+ --accent: oklch(0 0 0);
56
+ --accent-foreground: oklch(99.11% 0 0);
57
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
58
+ --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
59
+ --accent-soft-foreground: oklch(0 0 0);
60
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
61
+ --focus: oklch(0 0 0);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0 0);
65
+ --field-border: transparent;
66
+ --field-border-focus: color-mix(
67
+ in oklab,
68
+ var(--field-border, var(--border)) 74%,
69
+ var(--field-foreground, var(--foreground)) 22%
70
+ );
71
+ --field-border-hover: color-mix(
72
+ in oklab,
73
+ var(--field-border, var(--border)) 88%,
74
+ var(--field-foreground, var(--foreground)) 10%
75
+ );
76
+ --field-focus: var(--field-background, var(--default));
77
+ --field-foreground: oklch(21.03% 0 0);
78
+ --field-hover: color-mix(
79
+ in oklab,
80
+ var(--field-background, var(--default)) 90%,
81
+ var(--field-foreground, var(--foreground)) 2%
82
+ );
83
+ --field-placeholder: oklch(51.6% 0 0);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(0.573 0.2249 21.97);
87
+ --danger-foreground: oklch(98% 0.02 21.97);
88
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
89
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
90
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
91
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
92
+ --success: oklch(0.6277 0.1604 153.06);
93
+ --success-foreground: oklch(98% 0.016 153.06);
94
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
95
+ --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
96
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
97
+ --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
98
+ --warning: oklch(0.8446 0.1525 80.6);
99
+ --warning-foreground: oklch(15% 0.0457 80.6);
100
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
101
+ --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
102
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
103
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
104
+
105
+ /* Component Colors */
106
+ --link: var(--foreground);
107
+ --segment: oklch(100% 0 0);
108
+ --segment-foreground: oklch(21.03% 0 0);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0 0);
112
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
113
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
114
+ --separator: oklch(92% 0 0);
115
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
116
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
117
+
118
+ /* Other */
119
+ --background-inverse: var(--foreground);
120
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
121
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
122
+ }
123
+
124
+ [data-theme="uber"].dark,
125
+ .dark [data-theme="uber"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0 0);
130
+ --foreground: oklch(99.11% 0 0);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0 0);
134
+ --overlay-foreground: oklch(99.11% 0 0);
135
+ --surface: oklch(21.03% 0 0);
136
+ --surface-foreground: oklch(99.11% 0 0);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0 0);
139
+ --surface-secondary-foreground: oklch(99.11% 0 0);
140
+ --surface-tertiary: oklch(27.21% 0 0);
141
+ --surface-tertiary-foreground: oklch(99.11% 0 0);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0 0);
145
+ --scrollbar: var(--scrollbar-thumb);
146
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
147
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
148
+
149
+ /* Default */
150
+ --default: oklch(27.4% 0 0);
151
+ --default-foreground: oklch(99.11% 0 0);
152
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
153
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
154
+ --default-soft-foreground: var(--default-foreground);
155
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
156
+
157
+ /* Accent */
158
+ --accent: oklch(0.9848 0 0);
159
+ --accent-foreground: oklch(15% 0 0);
160
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
161
+ --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
162
+ --accent-soft-foreground: oklch(0.9848 0 0);
163
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
164
+ --focus: oklch(0.9848 0 0);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0 0);
168
+ --field-border: transparent;
169
+ --field-border-focus: color-mix(
170
+ in oklab,
171
+ var(--field-border, var(--border)) 74%,
172
+ var(--field-foreground, var(--foreground)) 22%
173
+ );
174
+ --field-border-hover: color-mix(
175
+ in oklab,
176
+ var(--field-border, var(--border)) 88%,
177
+ var(--field-foreground, var(--foreground)) 10%
178
+ );
179
+ --field-focus: var(--field-background, var(--default));
180
+ --field-foreground: oklch(99.11% 0 0);
181
+ --field-hover: color-mix(
182
+ in oklab,
183
+ var(--field-background, var(--default)) 90%,
184
+ var(--field-foreground, var(--foreground)) 2%
185
+ );
186
+ --field-placeholder: oklch(70.5% 0 0);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(0.7044 0.1872 23.19);
190
+ --danger-foreground: oklch(15% 0.05 23.19);
191
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
192
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
193
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
194
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
195
+ --success: oklch(0.6514 0.1321 156.22);
196
+ --success-foreground: oklch(15% 0.0396 156.22);
197
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
198
+ --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
199
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
200
+ --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
201
+ --warning: oklch(0.8803 0.1348 86.06);
202
+ --warning-foreground: oklch(15% 0.0404 86.06);
203
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
204
+ --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
205
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
206
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
207
+
208
+ /* Component Colors */
209
+ --link: var(--foreground);
210
+ --segment: oklch(39.64% 0 0);
211
+ --segment-foreground: oklch(99.11% 0 0);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0 0);
215
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
216
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
217
+ --separator: oklch(25% 0 0);
218
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
219
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
220
+
221
+ /* Other */
222
+ --background-inverse: var(--foreground);
223
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
224
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
225
+ }
226
+ }
package/dist/utilities/index.css CHANGED
@@ -1,14 +1,33 @@
1
1
  /* === Focus Ring === */
2
+ /*
3
+ * Every ring here is a `box-shadow` - that is what `ring-*` compiles to - and Forced Colors
4
+ * Mode strips `box-shadow` outright. Since `outline-none` has already given up the native
5
+ * outline, the two together leave no focus indicator at all, which is WCAG 2.4.7 across every
6
+ * component that focuses. Each utility therefore draws an outline back under
7
+ * `forced-colors: active`, in `Highlight`: system colours are exempt from the override, and
8
+ * `Highlight` is the one the platform reserves for the focused control.
9
+ */
2
10
  @utility focus-ring {
3
11
  @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
4
12
  /* Overrides the ring offset from the theme variables */
5
13
  --tw-ring-offset-width: var(--ring-offset-width);
14
+
15
+ @media (forced-colors: active) {
16
+ outline: 2px solid Highlight;
17
+ outline-offset: 2px;
18
+ }
6
19
  }
7
20
 
8
21
  @utility focus-field-ring {
9
22
  @apply ring-2 ring-focus ring-offset-0 outline-none;
10
23
  /* No separation - ring sits directly against the element */
11
24
  --tw-ring-offset-width: 0px;
25
+
26
+ /* Offset stays at 0, matching the ring this stands in for */
27
+ @media (forced-colors: active) {
28
+ outline: 2px solid Highlight;
29
+ outline-offset: 0;
30
+ }
12
31
  }
13
32
 
14
33
  @utility invalid-field-ring {
@@ -25,6 +44,15 @@
25
44
  &[data-focus-within="true"] {
26
45
  @apply ring-2 ring-danger ring-offset-0;
27
46
  --tw-ring-offset-width: 0px;
47
+
48
+ /* The unfocused outline above survives forced colors, but the ring marking focus does
49
+ * not - widen and recolour the outline instead, or a focused invalid field is
50
+ * indistinguishable from an unfocused one. The danger colour is not the loss it looks
51
+ * like: forced colors overrides it either way, and the error message carries it. */
52
+ @media (forced-colors: active) {
53
+ outline-width: 2px;
54
+ outline-color: Highlight;
55
+ }
28
56
  }
29
57
  }
30
58
 
@@ -49,12 +77,54 @@
49
77
  opacity: var(--disabled-opacity);
50
78
  cursor: var(--cursor-disabled);
51
79
  pointer-events: none;
80
+
81
+ /* Forced colors leaves `opacity` alone, so the element still reads as dimmed without this.
82
+ * `GrayText` is the signal the platform actually uses for a disabled control, and it
83
+ * inherits, which is what carries it to the label and description inside. */
84
+ @media (forced-colors: active) {
85
+ color: GrayText;
86
+ border-color: GrayText;
87
+ }
52
88
  }
53
89
 
54
90
  @utility status-pending {
55
91
  @apply pointer-events-none;
56
92
  }
57
93
 
94
+ /* === Forced Colors (Windows High Contrast Mode) === */
95
+
96
+ /*
97
+ * Restates "selected" for Forced Colors Mode.
98
+ *
99
+ * The mode replaces every author colour with the user's palette, so a state carried only by
100
+ * `background-color` - a selected tag, calendar day, table row - collapses into its neighbours
101
+ * and the selection becomes invisible. `Highlight` / `HighlightText` is the pair the platform
102
+ * reserves for a selected control and is exempt from the override, so restating the state
103
+ * with it survives.
104
+ *
105
+ * Only for elements whose selected state is a background and nothing else. Where selection
106
+ * also shows as a glyph or a moved thumb, the component's own `forced-colors` block handles
107
+ * it, because those parts need colours of their own.
108
+ *
109
+ * Apply it as a statement of its own, never folded into another `@apply` list: Tailwind sorts
110
+ * the utilities in one list and hoists the nested at-rule above the plain declarations, where
111
+ * the very `background-color` this is meant to override then wins.
112
+ */
113
+ @utility forced-selected {
114
+ @media (forced-colors: active) {
115
+ /* Chromium paints a `Canvas`-coloured backplate behind the text of any element that has
116
+ * one, so that text over an image stays legible. It goes on top of the element's own
117
+ * background, which means a `Highlight` fill with `HighlightText` on it renders as a
118
+ * solid plate with invisible text - the label disappears completely. Opting the element
119
+ * out of adjustment is what suppresses the backplate; the colours below are system
120
+ * colours either way, so the user's palette is still what gets used. */
121
+ forced-color-adjust: none;
122
+ background-color: Highlight;
123
+ border-color: Highlight;
124
+ color: HighlightText;
125
+ }
126
+ }
127
+
58
128
  /* === Scrollbars (standards-only; apply per scroll slot in component CSS) === */
59
129
  @utility scrollbar {
60
130
  scrollbar-width: var(--scrollbar-width);
package/dist/variants/index.css CHANGED
@@ -10,7 +10,7 @@
10
10
  * motion-safe:animate-spin - Full motion effects
11
11
  * dark:bg-gray-900 - Dark mode styles
12
12
  *
13
- * Priority: Explicit data attributes/classes → System preferences (fallback)
13
+ * Priority: Explicit data attributes → System preferences (fallback); `dark` is explicit-only
14
14
  * ================================================================================================
15
15
  */
16
16
 
@@ -79,10 +79,12 @@
79
79
 
80
80
  /* -------------------------------------------------------------------------------------------------
81
81
  * dark — Dark mode styles
82
- * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
82
+ * Explicit only: .dark class / data-theme="dark". No `prefers-color-scheme` fallback here — the
83
+ * token layer in `themes/` keys off these same selectors and has no media query of its own, so a
84
+ * fallback would flip the utilities while the colours stayed light. Apps read `matchMedia` and set
85
+ * the class themselves, which is also what a light/dark/system toggle needs.
83
86
  * ------------------------------------------------------------------------------------------------- */
84
87
  @custom-variant dark {
85
- /* Explicit: .dark class or data-theme="dark" on element or ancestor */
86
88
  &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
87
89
  @slot;
88
90
 
@@ -91,16 +93,4 @@
91
93
  @slot;
92
94
  }
93
95
  }
94
-
95
- /* Fallback: system prefers dark color scheme */
96
- @media (prefers-color-scheme: dark) {
97
- &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
98
- @slot;
99
-
100
- &::before,
101
- &::after {
102
- @slot;
103
- }
104
- }
105
- }
106
96
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ropav/styles",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Ropav core styles - framework-agnostic CSS and Tailwind variants",
5
5
  "keywords": [
6
6
  "css",
@@ -50,8 +50,7 @@
50
50
  "./base": "./dist/base/base.css",
51
51
  "./base/*.css": "./dist/base/*.css",
52
52
  "./components/*.css": "./dist/components/*.css",
53
- "./themes/default": "./dist/themes/default/index.css",
54
- "./themes/*/*.css": "./dist/themes/*/*.css",
53
+ "./themes/*": "./dist/themes/*.css",
55
54
  "./themes/*.css": "./dist/themes/*.css",
56
55
  "./utilities": "./dist/utilities/index.css",
57
56
  "./variants": "./dist/variants/index.css",
package/src/components/dropdown/dropdown.styles.ts CHANGED
@@ -4,7 +4,9 @@ import { tv } from "tailwind-variants";
4
4
 
5
5
  export const dropdownVariants = tv({
6
6
  slots: {
7
- menu: "dropdown__menu",
7
+ // The block is shared with the standalone menu; `dropdown__menu` is only the hook that
8
+ // `dropdown.css` and callers target.
9
+ menu: "menu dropdown__menu",
8
10
  popover: "dropdown__popover",
9
11
  root: "dropdown",
10
12
  trigger: "dropdown__trigger",
package/dist/themes/default/components/index.css DELETED
@@ -1,6 +0,0 @@
1
- /* Default theme component customizations */
2
- /*
3
- * This file can contain theme-specific overrides for component styles.
4
- * Since the default theme uses the base styles as-is, this file is empty.
5
- * Custom themes can override specific component styles here.
6
- */
package/dist/themes/default/index.css DELETED
@@ -1,8 +0,0 @@
1
- /* Declares the theme variables - @see https://tailwindcss.com/docs/theme */
2
- @import "../shared/theme.css";
3
-
4
- /* Default Theme */
5
- @import "./variables.css" layer(theme);
6
-
7
- /* Component customizations for default theme */
8
- @import "./components/index.css" layer(components);