@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/netflix.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Netflix theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.5814, chroma 0.2349, hue 27.99, 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/netflix.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="netflix"> light
15
+ * <html data-theme="netflix" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="netflix"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 0.125rem;
23
+ --radius: 0.125rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0 27.99);
27
+ --foreground: oklch(21.03% 0 27.99);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0 27.99);
31
+ --overlay-foreground: oklch(21.03% 0 27.99);
32
+ --surface: oklch(100% 0 27.99);
33
+ --surface-foreground: oklch(21.03% 0 27.99);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0 27.99);
36
+ --surface-secondary-foreground: oklch(21.03% 0 27.99);
37
+ --surface-tertiary: oklch(93.73% 0 27.99);
38
+ --surface-tertiary-foreground: oklch(21.03% 0 27.99);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0 27.99);
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 27.99);
48
+ --default-foreground: oklch(21.03% 0.0059 27.99);
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(58.14% 0.2349 27.99);
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: 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(58.14% 0.2349 27.99);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0 27.99);
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 27.99);
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 27.99);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(0.4823 0.1938 27.64);
87
+ --danger-foreground: oklch(98% 0.0194 27.64);
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.5148 0.1337 146.82);
93
+ --success-foreground: oklch(98% 0.0134 146.82);
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.561 0.116571 78.9352);
99
+ --warning-foreground: oklch(98% 0.0117 78.94);
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 27.99);
108
+ --segment-foreground: oklch(21.03% 0 27.99);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0 27.99);
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 27.99);
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="netflix"].dark,
125
+ .dark [data-theme="netflix"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0 27.99);
130
+ --foreground: oklch(99.11% 0 27.99);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0 27.99);
134
+ --overlay-foreground: oklch(99.11% 0 27.99);
135
+ --surface: oklch(21.03% 0 27.99);
136
+ --surface-foreground: oklch(99.11% 0 27.99);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0 27.99);
139
+ --surface-secondary-foreground: oklch(99.11% 0 27.99);
140
+ --surface-tertiary: oklch(27.21% 0 27.99);
141
+ --surface-tertiary-foreground: oklch(99.11% 0 27.99);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0 27.99);
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 27.99);
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(58.14% 0.2349 27.99);
159
+ --accent-foreground: oklch(99.11% 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: 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(58.14% 0.2349 27.99);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0 27.99);
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 27.99);
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 27.99);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(0.4964 0.1994 28.56);
190
+ --danger-foreground: oklch(98% 0.0199 28.56);
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.7677 0.1899 148.1);
196
+ --success-foreground: oklch(15% 0.05 148.1);
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.8239 0.153 74.6);
202
+ --warning-foreground: oklch(15% 0.0459 74.6);
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 27.99);
211
+ --segment-foreground: oklch(99.11% 0 27.99);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0 27.99);
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 27.99);
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/rabbit.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Rabbit theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.6678, chroma 0.2232, hue 36.66, base 0.01.
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/rabbit.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="rabbit"> light
15
+ * <html data-theme="rabbit" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="rabbit"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 1rem;
23
+ --radius: 0.5rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0.01 36.66);
27
+ --foreground: oklch(21.03% 0.01 36.66);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.003 36.66);
31
+ --overlay-foreground: oklch(21.03% 0.01 36.66);
32
+ --surface: oklch(100% 0.005 36.66);
33
+ --surface-foreground: oklch(21.03% 0.01 36.66);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.008 36.66);
36
+ --surface-secondary-foreground: oklch(21.03% 0.01 36.66);
37
+ --surface-tertiary: oklch(93.73% 0.008 36.66);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.01 36.66);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.02 36.66);
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.01 36.66);
48
+ --default-foreground: oklch(21.03% 0.0059 36.66);
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(66.78% 0.2232 36.66);
56
+ --accent-foreground: oklch(15% 0.03 36.66);
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(66.78% 0.2232 36.66);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.005 36.66);
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.01 36.66);
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.02 36.66);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(0.6291 0.2565 29.09);
87
+ --danger-foreground: oklch(98% 0.02 29.09);
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.7113 0.2043 140.81);
93
+ --success-foreground: oklch(15% 0.05 140.81);
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(78.19% 0.1617 46.27);
99
+ --warning-foreground: oklch(21.03% 0.0059 46.27);
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.01 36.66);
108
+ --segment-foreground: oklch(21.03% 0.01 36.66);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.01 36.66);
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.01 36.66);
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="rabbit"].dark,
125
+ .dark [data-theme="rabbit"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.01 36.66);
130
+ --foreground: oklch(99.11% 0.01 36.66);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.02 36.66);
134
+ --overlay-foreground: oklch(99.11% 0.01 36.66);
135
+ --surface: oklch(21.03% 0.02 36.66);
136
+ --surface-foreground: oklch(99.11% 0.01 36.66);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.015 36.66);
139
+ --surface-secondary-foreground: oklch(99.11% 0.01 36.66);
140
+ --surface-tertiary: oklch(27.21% 0.015 36.66);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.01 36.66);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.02 36.66);
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.01 36.66);
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(66.78% 0.2232 36.66);
159
+ --accent-foreground: oklch(15% 0.03 36.66);
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(66.78% 0.2232 36.66);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.02 36.66);
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.01 36.66);
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.02 36.66);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(0.6291 0.2565 29.09);
190
+ --danger-foreground: oklch(98% 0.02 29.09);
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.7113 0.2043 140.81);
196
+ --success-foreground: oklch(15% 0.05 140.81);
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(82.03% 0.1416 50.28);
202
+ --warning-foreground: oklch(21.03% 0.0059 50.28);
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.01 36.66);
211
+ --segment-foreground: oklch(99.11% 0.01 36.66);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.01 36.66);
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.01 36.66);
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/sky.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Sky theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.78, chroma 0.16, hue 225, base 0.0015.
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/sky.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="sky"> light
15
+ * <html data-theme="sky" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="sky"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 0.75rem;
23
+ --radius: 0.5rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0.0015 225);
27
+ --foreground: oklch(21.03% 0.0015 225);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.0004 225);
31
+ --overlay-foreground: oklch(21.03% 0.0015 225);
32
+ --surface: oklch(100% 0.0008 225);
33
+ --surface-foreground: oklch(21.03% 0.0015 225);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.0012 225);
36
+ --surface-secondary-foreground: oklch(21.03% 0.0015 225);
37
+ --surface-tertiary: oklch(93.73% 0.0012 225);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.0015 225);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.003 225);
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.0015 225);
48
+ --default-foreground: oklch(21.03% 0.0059 225);
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(78% 0.16 225);
56
+ --accent-foreground: oklch(15% 0.03 225);
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(78% 0.16 225);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.0008 225);
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.0015 225);
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.003 225);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(65.32% 0.2335 22.28);
87
+ --danger-foreground: oklch(99.11% 0 0);
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(73.29% 0.1941 147.35);
93
+ --success-foreground: oklch(21.03% 0.0059 147.35);
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(78.19% 0.159 68.87);
99
+ --warning-foreground: oklch(21.03% 0.0059 68.87);
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.0015 225);
108
+ --segment-foreground: oklch(21.03% 0.0015 225);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.0015 225);
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.0015 225);
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="sky"].dark,
125
+ .dark [data-theme="sky"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.0015 225);
130
+ --foreground: oklch(99.11% 0.0015 225);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.003 225);
134
+ --overlay-foreground: oklch(99.11% 0.0015 225);
135
+ --surface: oklch(21.03% 0.003 225);
136
+ --surface-foreground: oklch(99.11% 0.0015 225);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.0023 225);
139
+ --surface-secondary-foreground: oklch(99.11% 0.0015 225);
140
+ --surface-tertiary: oklch(27.21% 0.0023 225);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.0015 225);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.003 225);
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.0015 225);
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(78% 0.16 225);
159
+ --accent-foreground: oklch(15% 0.03 225);
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(78% 0.16 225);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.003 225);
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.0015 225);
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.003 225);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(59.4% 0.1973 21.17);
190
+ --danger-foreground: oklch(99.11% 0 0);
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(73.29% 0.1941 147.35);
196
+ --success-foreground: oklch(21.03% 0.0059 147.35);
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(82.03% 0.1392 72.88);
202
+ --warning-foreground: oklch(21.03% 0.0059 72.88);
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.0015 225);
211
+ --segment-foreground: oklch(99.11% 0.0015 225);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.0015 225);
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.0015 225);
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
+ }