@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/discord.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Discord theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.5774, chroma 0.2091, hue 273.85, 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/discord.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="discord"> light
15
+ * <html data-theme="discord" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="discord"] {
20
+ color-scheme: light;
21
+
22
+ --field-radius: 0.75rem;
23
+ --radius: 0.25rem;
24
+
25
+ /* Base Colors */
26
+ --background: oklch(97.02% 0.01 273.85);
27
+ --foreground: oklch(21.03% 0.01 273.85);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.003 273.85);
31
+ --overlay-foreground: oklch(21.03% 0.01 273.85);
32
+ --surface: oklch(100% 0.005 273.85);
33
+ --surface-foreground: oklch(21.03% 0.01 273.85);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.008 273.85);
36
+ --surface-secondary-foreground: oklch(21.03% 0.01 273.85);
37
+ --surface-tertiary: oklch(93.73% 0.008 273.85);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.01 273.85);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.02 273.85);
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 273.85);
48
+ --default-foreground: oklch(21.03% 0.0059 273.85);
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(57.74% 0.2091 273.85);
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(57.74% 0.2091 273.85);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.005 273.85);
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 273.85);
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 273.85);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(0.5884 0.1993 24.39);
87
+ --danger-foreground: oklch(98% 0.0199 24.39);
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.532 0.1238 151.57);
93
+ --success-foreground: oklch(98% 0.0124 151.57);
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.9218 0.1571 99.87);
99
+ --warning-foreground: oklch(15% 0.0471 99.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.01 273.85);
108
+ --segment-foreground: oklch(21.03% 0.01 273.85);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.01 273.85);
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 273.85);
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="discord"].dark,
125
+ .dark [data-theme="discord"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.01 273.85);
130
+ --foreground: oklch(99.11% 0.01 273.85);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.02 273.85);
134
+ --overlay-foreground: oklch(99.11% 0.01 273.85);
135
+ --surface: oklch(21.03% 0.02 273.85);
136
+ --surface-foreground: oklch(99.11% 0.01 273.85);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.015 273.85);
139
+ --surface-secondary-foreground: oklch(99.11% 0.01 273.85);
140
+ --surface-tertiary: oklch(27.21% 0.015 273.85);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.01 273.85);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.02 273.85);
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 273.85);
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(57.74% 0.2091 273.85);
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(57.74% 0.2091 273.85);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.02 273.85);
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 273.85);
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 273.85);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(0.6318 0.2075 24.57);
190
+ --danger-foreground: oklch(98% 0.02 24.57);
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.8548 0.1967 150.16);
196
+ --success-foreground: oklch(15% 0.05 150.16);
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.9218 0.1571 99.87);
202
+ --warning-foreground: oklch(15% 0.0471 99.87);
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 273.85);
211
+ --segment-foreground: oklch(99.11% 0.01 273.85);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.01 273.85);
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 273.85);
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/lavender.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Lavender theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.77, chroma 0.13, hue 305, 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/lavender.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="lavender"> light
15
+ * <html data-theme="lavender" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="lavender"] {
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 305);
27
+ --foreground: oklch(21.03% 0.0015 305);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.0004 305);
31
+ --overlay-foreground: oklch(21.03% 0.0015 305);
32
+ --surface: oklch(100% 0.0008 305);
33
+ --surface-foreground: oklch(21.03% 0.0015 305);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.0012 305);
36
+ --surface-secondary-foreground: oklch(21.03% 0.0015 305);
37
+ --surface-tertiary: oklch(93.73% 0.0012 305);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.0015 305);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.003 305);
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 305);
48
+ --default-foreground: oklch(21.03% 0.0059 305);
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(77% 0.13 305);
56
+ --accent-foreground: oklch(15% 0.026 305);
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(77% 0.13 305);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.0008 305);
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 305);
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 305);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(65.32% 0.2335 31.88);
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 156.95);
93
+ --success-foreground: oklch(21.03% 0.0059 156.95);
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 78.47);
99
+ --warning-foreground: oklch(21.03% 0.0059 78.47);
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 305);
108
+ --segment-foreground: oklch(21.03% 0.0015 305);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.0015 305);
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 305);
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="lavender"].dark,
125
+ .dark [data-theme="lavender"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.0015 305);
130
+ --foreground: oklch(99.11% 0.0015 305);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.003 305);
134
+ --overlay-foreground: oklch(99.11% 0.0015 305);
135
+ --surface: oklch(21.03% 0.003 305);
136
+ --surface-foreground: oklch(99.11% 0.0015 305);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.0023 305);
139
+ --surface-secondary-foreground: oklch(99.11% 0.0015 305);
140
+ --surface-tertiary: oklch(27.21% 0.0023 305);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.0015 305);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.003 305);
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 305);
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(77% 0.13 305);
159
+ --accent-foreground: oklch(15% 0.026 305);
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(77% 0.13 305);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.003 305);
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 305);
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 305);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(59.4% 0.1973 30.77);
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 156.95);
196
+ --success-foreground: oklch(21.03% 0.0059 156.95);
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 82.48);
202
+ --warning-foreground: oklch(21.03% 0.0059 82.48);
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 305);
211
+ --segment-foreground: oklch(99.11% 0.0015 305);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.0015 305);
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 305);
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/mint.css ADDED
@@ -0,0 +1,226 @@
1
+ /**
2
+ * Mint theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.82, chroma 0.12, hue 155, 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/mint.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="mint"> light
15
+ * <html data-theme="mint" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="mint"] {
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 155);
27
+ --foreground: oklch(21.03% 0.0015 155);
28
+
29
+ /* Surfaces */
30
+ --overlay: oklch(100% 0.0004 155);
31
+ --overlay-foreground: oklch(21.03% 0.0015 155);
32
+ --surface: oklch(100% 0.0008 155);
33
+ --surface-foreground: oklch(21.03% 0.0015 155);
34
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
35
+ --surface-secondary: oklch(95.24% 0.0012 155);
36
+ --surface-secondary-foreground: oklch(21.03% 0.0015 155);
37
+ --surface-tertiary: oklch(93.73% 0.0012 155);
38
+ --surface-tertiary-foreground: oklch(21.03% 0.0015 155);
39
+
40
+ /* Muted and scrollbar */
41
+ --muted: oklch(51.6% 0.003 155);
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 155);
48
+ --default-foreground: oklch(21.03% 0.0059 155);
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(82% 0.12 155);
56
+ --accent-foreground: oklch(15% 0.024 155);
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(82% 0.12 155);
62
+
63
+ /* Form Fields */
64
+ --field-background: oklch(100% 0.0008 155);
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 155);
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 155);
84
+
85
+ /* Status Colors */
86
+ --danger: oklch(65.32% 0.2335 13.88);
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 138.95);
93
+ --success-foreground: oklch(21.03% 0.0059 138.95);
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 60.47);
99
+ --warning-foreground: oklch(21.03% 0.0059 60.47);
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 155);
108
+ --segment-foreground: oklch(21.03% 0.0015 155);
109
+
110
+ /* Borders and separators */
111
+ --border: oklch(90% 0.0015 155);
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 155);
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="mint"].dark,
125
+ .dark [data-theme="mint"] {
126
+ color-scheme: dark;
127
+
128
+ /* Base Colors */
129
+ --background: oklch(12% 0.0015 155);
130
+ --foreground: oklch(99.11% 0.0015 155);
131
+
132
+ /* Surfaces */
133
+ --overlay: oklch(21.03% 0.003 155);
134
+ --overlay-foreground: oklch(99.11% 0.0015 155);
135
+ --surface: oklch(21.03% 0.003 155);
136
+ --surface-foreground: oklch(99.11% 0.0015 155);
137
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
138
+ --surface-secondary: oklch(25.7% 0.0023 155);
139
+ --surface-secondary-foreground: oklch(99.11% 0.0015 155);
140
+ --surface-tertiary: oklch(27.21% 0.0023 155);
141
+ --surface-tertiary-foreground: oklch(99.11% 0.0015 155);
142
+
143
+ /* Muted and scrollbar */
144
+ --muted: oklch(70.5% 0.003 155);
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 155);
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(82% 0.12 155);
159
+ --accent-foreground: oklch(15% 0.024 155);
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(82% 0.12 155);
165
+
166
+ /* Form Fields */
167
+ --field-background: oklch(21.03% 0.003 155);
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 155);
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 155);
187
+
188
+ /* Status Colors */
189
+ --danger: oklch(59.4% 0.1973 12.77);
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 138.95);
196
+ --success-foreground: oklch(21.03% 0.0059 138.95);
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 64.48);
202
+ --warning-foreground: oklch(21.03% 0.0059 64.48);
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 155);
211
+ --segment-foreground: oklch(99.11% 0.0015 155);
212
+
213
+ /* Borders and separators */
214
+ --border: oklch(28% 0.0015 155);
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 155);
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
+ }