@ropav/styles 0.3.0 → 0.5.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 (163) hide show
  1. package/README.md +160 -19
  2. package/dist/components/accordion.css +12 -5
  3. package/dist/components/alert-dialog.css +1 -1
  4. package/dist/components/alert.css +9 -1
  5. package/dist/components/autocomplete/autocomplete.styles.d.ts +33 -0
  6. package/dist/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
  7. package/dist/components/autocomplete/autocomplete.styles.js +12 -0
  8. package/dist/components/autocomplete.css +39 -3
  9. package/dist/components/avatar.css +9 -0
  10. package/dist/components/badge.css +7 -0
  11. package/dist/components/button-group.css +6 -6
  12. package/dist/components/button.css +34 -11
  13. package/dist/components/calendar-year-picker.css +2 -1
  14. package/dist/components/calendar.css +8 -0
  15. package/dist/components/card.css +22 -1
  16. package/dist/components/chip.css +21 -0
  17. package/dist/components/close-button.css +8 -0
  18. package/dist/components/color-input-group/color-input-group.styles.d.ts +27 -0
  19. package/dist/components/color-input-group/color-input-group.styles.d.ts.map +1 -1
  20. package/dist/components/color-input-group/color-input-group.styles.js +6 -0
  21. package/dist/components/color-input-group.css +30 -1
  22. package/dist/components/color-swatch-picker.css +11 -0
  23. package/dist/components/combo-box/combo-box.styles.d.ts +27 -0
  24. package/dist/components/combo-box/combo-box.styles.d.ts.map +1 -1
  25. package/dist/components/combo-box/combo-box.styles.js +17 -7
  26. package/dist/components/combo-box.css +21 -1
  27. package/dist/components/date-input-group/date-input-group.styles.d.ts +27 -0
  28. package/dist/components/date-input-group/date-input-group.styles.d.ts.map +1 -1
  29. package/dist/components/date-input-group/date-input-group.styles.js +6 -0
  30. package/dist/components/date-input-group.css +30 -1
  31. package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
  32. package/dist/components/dropdown/dropdown.styles.js +1 -1
  33. package/dist/components/dropdown.css +17 -12
  34. package/dist/components/index.css +4 -0
  35. package/dist/components/index.d.ts +4 -0
  36. package/dist/components/index.d.ts.map +1 -1
  37. package/dist/components/input/input.styles.d.ts +15 -0
  38. package/dist/components/input/input.styles.d.ts.map +1 -1
  39. package/dist/components/input/input.styles.js +6 -0
  40. package/dist/components/input-group/input-group.styles.d.ts +27 -0
  41. package/dist/components/input-group/input-group.styles.d.ts.map +1 -1
  42. package/dist/components/input-group/input-group.styles.js +6 -0
  43. package/dist/components/input-group.css +32 -1
  44. package/dist/components/input.css +23 -1
  45. package/dist/components/list-box/list-box.styles.d.ts +15 -0
  46. package/dist/components/list-box/list-box.styles.d.ts.map +1 -1
  47. package/dist/components/list-box/list-box.styles.js +15 -5
  48. package/dist/components/list-box-item.css +4 -2
  49. package/dist/components/list-box.css +19 -0
  50. package/dist/components/menu/menu.styles.d.ts +19 -1
  51. package/dist/components/menu/menu.styles.d.ts.map +1 -1
  52. package/dist/components/menu/menu.styles.js +9 -1
  53. package/dist/components/menu.css +25 -0
  54. package/dist/components/meter.css +12 -0
  55. package/dist/components/modal.css +1 -1
  56. package/dist/components/number-field/number-field.styles.d.ts +27 -0
  57. package/dist/components/number-field/number-field.styles.d.ts.map +1 -1
  58. package/dist/components/number-field/number-field.styles.js +6 -0
  59. package/dist/components/number-field.css +68 -1
  60. package/dist/components/pagination.css +10 -6
  61. package/dist/components/popover.css +15 -1
  62. package/dist/components/progress-bar.css +12 -0
  63. package/dist/components/progress-circle.css +12 -0
  64. package/dist/components/radio.css +7 -0
  65. package/dist/components/range-calendar.css +28 -0
  66. package/dist/components/search-field/search-field.styles.d.ts +27 -0
  67. package/dist/components/search-field/search-field.styles.d.ts.map +1 -1
  68. package/dist/components/search-field/search-field.styles.js +6 -0
  69. package/dist/components/search-field.css +33 -1
  70. package/dist/components/segmented-control/index.d.ts +2 -0
  71. package/dist/components/segmented-control/index.d.ts.map +1 -0
  72. package/dist/components/segmented-control/index.js +2 -0
  73. package/dist/components/segmented-control/segmented-control.styles.d.ts +73 -0
  74. package/dist/components/segmented-control/segmented-control.styles.d.ts.map +1 -0
  75. package/dist/components/segmented-control/segmented-control.styles.js +27 -0
  76. package/dist/components/segmented-control.css +193 -0
  77. package/dist/components/select/select.styles.d.ts +33 -0
  78. package/dist/components/select/select.styles.d.ts.map +1 -1
  79. package/dist/components/select/select.styles.js +12 -0
  80. package/dist/components/select.css +40 -3
  81. package/dist/components/separator.css +18 -1
  82. package/dist/components/sidebar/index.d.ts +2 -0
  83. package/dist/components/sidebar/index.d.ts.map +1 -0
  84. package/dist/components/sidebar/index.js +2 -0
  85. package/dist/components/sidebar/sidebar.styles.d.ts +190 -0
  86. package/dist/components/sidebar/sidebar.styles.d.ts.map +1 -0
  87. package/dist/components/sidebar/sidebar.styles.js +52 -0
  88. package/dist/components/sidebar.css +510 -0
  89. package/dist/components/skeleton.css +9 -0
  90. package/dist/components/slider.css +61 -0
  91. package/dist/components/splitter/index.d.ts +2 -0
  92. package/dist/components/splitter/index.d.ts.map +1 -0
  93. package/dist/components/splitter/index.js +2 -0
  94. package/dist/components/splitter/splitter.styles.d.ts +61 -0
  95. package/dist/components/splitter/splitter.styles.d.ts.map +1 -0
  96. package/dist/components/splitter/splitter.styles.js +26 -0
  97. package/dist/components/splitter.css +241 -0
  98. package/dist/components/surface.css +24 -0
  99. package/dist/components/switch.css +30 -0
  100. package/dist/components/table.css +11 -3
  101. package/dist/components/tabs.css +30 -2
  102. package/dist/components/tag.css +10 -0
  103. package/dist/components/textarea/textarea.styles.d.ts +15 -0
  104. package/dist/components/textarea/textarea.styles.d.ts.map +1 -1
  105. package/dist/components/textarea/textarea.styles.js +6 -0
  106. package/dist/components/textarea.css +23 -1
  107. package/dist/components/toast.css +1 -1
  108. package/dist/components/toggle-button-group.css +7 -7
  109. package/dist/components/toggle-button.css +17 -11
  110. package/dist/components/toolbar.css +8 -1
  111. package/dist/components/tooltip.css +15 -2
  112. package/dist/components/typography.css +21 -0
  113. package/dist/components/virtualizer/index.d.ts +2 -0
  114. package/dist/components/virtualizer/index.d.ts.map +1 -0
  115. package/dist/components/virtualizer/index.js +2 -0
  116. package/dist/components/virtualizer/virtualizer.styles.d.ts +44 -0
  117. package/dist/components/virtualizer/virtualizer.styles.d.ts.map +1 -0
  118. package/dist/components/virtualizer/virtualizer.styles.js +15 -0
  119. package/dist/components/virtualizer.css +64 -0
  120. package/dist/index.css +7 -2
  121. package/dist/index.js +5 -1
  122. package/dist/ropav.min.css +2 -2
  123. package/dist/themes/airbnb.css +231 -0
  124. package/dist/themes/all.css +17 -0
  125. package/dist/themes/coinbase.css +231 -0
  126. package/dist/themes/{default/variables.css → default.css} +28 -9
  127. package/dist/themes/discord.css +231 -0
  128. package/dist/themes/hero.css +262 -0
  129. package/dist/themes/lavender.css +231 -0
  130. package/dist/themes/mint.css +231 -0
  131. package/dist/themes/netflix.css +231 -0
  132. package/dist/themes/rabbit.css +231 -0
  133. package/dist/themes/shared/theme.css +19 -2
  134. package/dist/themes/sky.css +231 -0
  135. package/dist/themes/spotify.css +231 -0
  136. package/dist/themes/uber.css +231 -0
  137. package/dist/utilities/index.css +97 -0
  138. package/dist/variants/index.css +5 -15
  139. package/package.json +2 -3
  140. package/src/components/autocomplete/autocomplete.styles.ts +12 -0
  141. package/src/components/color-input-group/color-input-group.styles.ts +10 -0
  142. package/src/components/combo-box/combo-box.styles.ts +12 -0
  143. package/src/components/date-input-group/date-input-group.styles.ts +10 -0
  144. package/src/components/dropdown/dropdown.styles.ts +3 -1
  145. package/src/components/index.ts +4 -0
  146. package/src/components/input/input.styles.ts +6 -0
  147. package/src/components/input-group/input-group.styles.ts +10 -0
  148. package/src/components/list-box/list-box.styles.ts +6 -0
  149. package/src/components/menu/menu.styles.ts +10 -0
  150. package/src/components/number-field/number-field.styles.ts +10 -0
  151. package/src/components/search-field/search-field.styles.ts +10 -0
  152. package/src/components/segmented-control/index.ts +1 -0
  153. package/src/components/segmented-control/segmented-control.styles.ts +37 -0
  154. package/src/components/select/select.styles.ts +12 -0
  155. package/src/components/sidebar/index.ts +1 -0
  156. package/src/components/sidebar/sidebar.styles.ts +94 -0
  157. package/src/components/splitter/index.ts +1 -0
  158. package/src/components/splitter/splitter.styles.ts +44 -0
  159. package/src/components/textarea/textarea.styles.ts +6 -0
  160. package/src/components/virtualizer/index.ts +1 -0
  161. package/src/components/virtualizer/virtualizer.styles.ts +15 -0
  162. package/dist/themes/default/components/index.css +0 -6
  163. package/dist/themes/default/index.css +0 -8
package/dist/themes/discord.css ADDED
@@ -0,0 +1,231 @@
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
+ --component-radius: calc(var(--radius) * 3);
23
+ --field-radius: 0.75rem;
24
+ --radius: 0.25rem;
25
+
26
+ /* Base Colors */
27
+ --background: oklch(97.02% 0.01 273.85);
28
+ --foreground: oklch(21.03% 0.01 273.85);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0.003 273.85);
32
+ --overlay-foreground: oklch(21.03% 0.01 273.85);
33
+ --surface: oklch(100% 0.005 273.85);
34
+ --surface-foreground: oklch(21.03% 0.01 273.85);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0.008 273.85);
37
+ --surface-secondary-foreground: oklch(21.03% 0.01 273.85);
38
+ --surface-tertiary: oklch(93.73% 0.008 273.85);
39
+ --surface-tertiary-foreground: oklch(21.03% 0.01 273.85);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0.02 273.85);
43
+ --scrollbar: var(--scrollbar-thumb);
44
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
45
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
46
+
47
+ /* Default */
48
+ --default: oklch(94% 0.01 273.85);
49
+ --default-foreground: oklch(21.03% 0.0059 273.85);
50
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
51
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
52
+ --default-soft-foreground: var(--default-foreground);
53
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
54
+
55
+ /* Accent */
56
+ --accent: oklch(57.74% 0.2091 273.85);
57
+ --accent-foreground: oklch(99.11% 0 0);
58
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
59
+ --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
60
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
61
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
62
+ --focus: oklch(57.74% 0.2091 273.85);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0.005 273.85);
66
+ --field-border: transparent;
67
+ --field-border-focus: color-mix(
68
+ in oklab,
69
+ var(--field-border, var(--border)) 74%,
70
+ var(--field-foreground, var(--foreground)) 22%
71
+ );
72
+ --field-border-hover: color-mix(
73
+ in oklab,
74
+ var(--field-border, var(--border)) 88%,
75
+ var(--field-foreground, var(--foreground)) 10%
76
+ );
77
+ --field-focus: var(--field-background, var(--default));
78
+ --field-foreground: oklch(21.03% 0.01 273.85);
79
+ --field-hover: color-mix(
80
+ in oklab,
81
+ var(--field-background, var(--default)) 90%,
82
+ var(--field-foreground, var(--foreground)) 2%
83
+ );
84
+ --field-placeholder: oklch(51.6% 0.02 273.85);
85
+ --field-shadow:
86
+ 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
87
+ 0 0 1px 0 rgba(0, 0, 0, 0.06);
88
+
89
+ /* Status Colors */
90
+ --danger: oklch(0.5884 0.1993 24.39);
91
+ --danger-foreground: oklch(98% 0.0199 24.39);
92
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
93
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
94
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
95
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
96
+ --success: oklch(0.532 0.1238 151.57);
97
+ --success-foreground: oklch(98% 0.0124 151.57);
98
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
99
+ --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
100
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
101
+ --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
102
+ --warning: oklch(0.9218 0.1571 99.87);
103
+ --warning-foreground: oklch(15% 0.0471 99.87);
104
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
105
+ --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
106
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
107
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
108
+
109
+ /* Component Colors */
110
+ --link: var(--foreground);
111
+ --segment: oklch(100% 0.01 273.85);
112
+ --segment-foreground: oklch(21.03% 0.01 273.85);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0.01 273.85);
116
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
117
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
118
+ --separator: oklch(92% 0.01 273.85);
119
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
120
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
121
+
122
+ /* Other */
123
+ --background-inverse: var(--foreground);
124
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
125
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
126
+ }
127
+
128
+ [data-theme="discord"].dark,
129
+ .dark [data-theme="discord"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0.01 273.85);
134
+ --foreground: oklch(99.11% 0.01 273.85);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0.02 273.85);
138
+ --overlay-foreground: oklch(99.11% 0.01 273.85);
139
+ --surface: oklch(21.03% 0.02 273.85);
140
+ --surface-foreground: oklch(99.11% 0.01 273.85);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0.015 273.85);
143
+ --surface-secondary-foreground: oklch(99.11% 0.01 273.85);
144
+ --surface-tertiary: oklch(27.21% 0.015 273.85);
145
+ --surface-tertiary-foreground: oklch(99.11% 0.01 273.85);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0.02 273.85);
149
+ --scrollbar: var(--scrollbar-thumb);
150
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
151
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
152
+
153
+ /* Default */
154
+ --default: oklch(27.4% 0.01 273.85);
155
+ --default-foreground: oklch(99.11% 0 0);
156
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
157
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
158
+ --default-soft-foreground: var(--default-foreground);
159
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
160
+
161
+ /* Accent */
162
+ --accent: oklch(57.74% 0.2091 273.85);
163
+ --accent-foreground: oklch(99.11% 0 0);
164
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
165
+ --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
166
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
167
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
168
+ --focus: oklch(57.74% 0.2091 273.85);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0.02 273.85);
172
+ --field-border: transparent;
173
+ --field-border-focus: color-mix(
174
+ in oklab,
175
+ var(--field-border, var(--border)) 74%,
176
+ var(--field-foreground, var(--foreground)) 22%
177
+ );
178
+ --field-border-hover: color-mix(
179
+ in oklab,
180
+ var(--field-border, var(--border)) 88%,
181
+ var(--field-foreground, var(--foreground)) 10%
182
+ );
183
+ --field-focus: var(--field-background, var(--default));
184
+ --field-foreground: oklch(99.11% 0.01 273.85);
185
+ --field-hover: color-mix(
186
+ in oklab,
187
+ var(--field-background, var(--default)) 90%,
188
+ var(--field-foreground, var(--foreground)) 2%
189
+ );
190
+ --field-placeholder: oklch(70.5% 0.02 273.85);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(0.6318 0.2075 24.57);
195
+ --danger-foreground: oklch(98% 0.02 24.57);
196
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
197
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
198
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
199
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
200
+ --success: oklch(0.8548 0.1967 150.16);
201
+ --success-foreground: oklch(15% 0.05 150.16);
202
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
203
+ --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
204
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
205
+ --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
206
+ --warning: oklch(0.9218 0.1571 99.87);
207
+ --warning-foreground: oklch(15% 0.0471 99.87);
208
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
209
+ --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
210
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
211
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
212
+
213
+ /* Component Colors */
214
+ --link: var(--foreground);
215
+ --segment: oklch(39.64% 0.01 273.85);
216
+ --segment-foreground: oklch(99.11% 0.01 273.85);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0.01 273.85);
220
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
221
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
222
+ --separator: oklch(25% 0.01 273.85);
223
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
224
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
225
+
226
+ /* Other */
227
+ --background-inverse: var(--foreground);
228
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
229
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
230
+ }
231
+ }
package/dist/themes/hero.css ADDED
@@ -0,0 +1,262 @@
1
+ /**
2
+ * Hero theme — hand-written.
3
+ *
4
+ * HeroUI v3's own palette — the one Ropav's style layer was vendored from, offered under its own
5
+ * `data-theme` alongside the other brand themes.
6
+ *
7
+ * Not generated. The generator derives every grey from one hue and one chroma, and this palette
8
+ * does neither: its greys sit around hue 286 while its accent is at 253.83, its grey chroma runs
9
+ * from 0 (`--background`) to 0.0138 (`--muted`), and `--surface-tertiary` strays to 247.91 on
10
+ * dark. Its `scripts/themes/presets.ts` entry records the accent seeds and the radius pair, which
11
+ * is what the theme list and the Storybook toolbar read; `pnpm generate:themes` skips it.
12
+ *
13
+ * Colours, radii and the field shadow, like every other theme — `--spacing`, `--cursor-*`, the
14
+ * primitives, the surface and overlay shadows and `--backdrop` stay on `:root` / `.dark` in
15
+ * `themes/default.css`, which keeps matching an element that carries a `data-theme`. The primitive *values* are spelled out rather than
16
+ * aliased through `var(--eclipse)`, so this palette holds whatever the default theme is tuned to.
17
+ *
18
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
19
+ * `layer()` wrapper:
20
+ *
21
+ * @import "@ropav/styles";
22
+ * @import "@ropav/styles/themes/hero.css";
23
+ *
24
+ * Light is the default; dark needs the `dark` class alongside the attribute:
25
+ * <html data-theme="hero"> light
26
+ * <html data-theme="hero" class="dark"> dark
27
+ */
28
+ @layer theme {
29
+ [data-theme="hero"] {
30
+ color-scheme: light;
31
+
32
+ /* Radius */
33
+ --radius: 0.5rem;
34
+ --field-radius: calc(var(--radius) * 1.5);
35
+ --component-radius: calc(var(--radius) * 3);
36
+
37
+ /* == Light Theme Variables == */
38
+
39
+ /* Base Colors */
40
+ --background: oklch(0.9702 0 0);
41
+ --foreground: oklch(0.2103 0.0059 285.89);
42
+
43
+ /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
44
+ --surface: oklch(100% 0 0);
45
+ --surface-foreground: var(--foreground);
46
+
47
+ --surface-secondary: oklch(0.9524 0.0013 286.37);
48
+ --surface-secondary-foreground: var(--foreground);
49
+
50
+ --surface-tertiary: oklch(0.9373 0.0013 286.37);
51
+ --surface-tertiary-foreground: var(--foreground);
52
+
53
+ /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
54
+ --overlay: oklch(100% 0 0);
55
+ --overlay-foreground: var(--foreground);
56
+
57
+ --muted: oklch(0.516 0.0138 285.94);
58
+
59
+ --scrollbar: var(--scrollbar-thumb);
60
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
61
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
62
+
63
+ --default: oklch(94% 0.001 286.375);
64
+ --default-foreground: oklch(0.2103 0.0059 285.89);
65
+
66
+ --accent: oklch(0.6204 0.195 253.83);
67
+ --accent-foreground: oklch(0.9911 0 0);
68
+
69
+ /* Form Fields */
70
+ --field-background: oklch(100% 0 0);
71
+ --field-foreground: oklch(0.2103 0.0059 285.89);
72
+ --field-placeholder: var(--muted);
73
+ --field-border: transparent; /* no border by default on form fields */
74
+ --field-shadow:
75
+ 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
76
+ 0 0 1px 0 rgba(0, 0, 0, 0.06);
77
+
78
+ /* Status Colors */
79
+ --success: oklch(0.7329 0.1935 150.81);
80
+ --success-foreground: oklch(0.2103 0.0059 285.89);
81
+
82
+ --warning: oklch(0.7819 0.1585 72.33);
83
+ --warning-foreground: oklch(0.2103 0.0059 285.89);
84
+
85
+ --danger: oklch(0.6532 0.2328 25.74);
86
+ --danger-foreground: oklch(0.9911 0 0);
87
+
88
+ /* Component Colors */
89
+ --segment: oklch(100% 0 0);
90
+ --segment-foreground: oklch(0.2103 0.0059 285.89);
91
+
92
+ /* Misc Colors */
93
+ --border: oklch(90% 0.004 286.32);
94
+ --separator: oklch(92% 0.004 286.32);
95
+ --focus: var(--accent);
96
+ --link: var(--foreground);
97
+
98
+ /* Calculated Colors */
99
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
100
+
101
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
102
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
103
+ --background-inverse: var(--foreground);
104
+
105
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
106
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
107
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
108
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
109
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
110
+
111
+ --field-hover: color-mix(
112
+ in oklab,
113
+ var(--field-background, var(--default)) 90%,
114
+ var(--field-foreground, var(--foreground)) 2%
115
+ );
116
+ --field-focus: var(--field-background, var(--default));
117
+ --field-border-hover: color-mix(
118
+ in oklab,
119
+ var(--field-border, var(--border)) 88%,
120
+ var(--field-foreground, var(--foreground)) 10%
121
+ );
122
+ --field-border-focus: color-mix(
123
+ in oklab,
124
+ var(--field-border, var(--border)) 74%,
125
+ var(--field-foreground, var(--foreground)) 22%
126
+ );
127
+
128
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
129
+ --default-soft-foreground: var(--default-foreground);
130
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
131
+
132
+ --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
133
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
134
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
135
+
136
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
137
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
138
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
139
+
140
+ --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
141
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
142
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
143
+
144
+ --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
145
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
146
+ --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
147
+
148
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
149
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
150
+
151
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
152
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
153
+ }
154
+
155
+ [data-theme="hero"].dark,
156
+ .dark [data-theme="hero"] {
157
+ color-scheme: dark;
158
+ /* == Dark Theme Variables == */
159
+
160
+ /* Base Colors */
161
+ --background: oklch(12% 0.005 285.823);
162
+ --foreground: oklch(0.9911 0 0);
163
+
164
+ /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
165
+ --surface: oklch(0.2103 0.0059 285.89);
166
+ --surface-foreground: var(--foreground);
167
+
168
+ --surface-secondary: oklch(0.257 0.0037 286.14);
169
+ --surface-tertiary: oklch(0.2721 0.0024 247.91);
170
+
171
+ /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
172
+ --overlay: oklch(0.2103 0.0059 285.89);
173
+ --overlay-foreground: var(--foreground);
174
+
175
+ --muted: oklch(70.5% 0.015 286.067);
176
+
177
+ --scrollbar: var(--scrollbar-thumb);
178
+ --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
179
+ --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
180
+
181
+ --default: oklch(27.4% 0.006 286.033);
182
+ --default-foreground: oklch(0.9911 0 0);
183
+
184
+ /* Form Fields */
185
+ --field-background: oklch(0.2103 0.0059 285.89);
186
+ --field-foreground: var(--foreground);
187
+ --field-shadow: 0 0 0 0 transparent inset; /* placeholder, so ring utilities still compose */
188
+
189
+ /* Status Colors */
190
+ --warning: oklch(0.8203 0.1388 76.34);
191
+ --warning-foreground: oklch(0.2103 0.0059 285.89);
192
+
193
+ --danger: oklch(0.594 0.1967 24.63);
194
+ --danger-foreground: oklch(0.9911 0 0);
195
+
196
+ /* Component Colors */
197
+ --segment: oklch(0.3964 0.01 285.93);
198
+ --segment-foreground: var(--foreground);
199
+
200
+ /* Misc Colors */
201
+ --border: oklch(28% 0.006 286.033);
202
+ --separator: oklch(25% 0.006 286.033);
203
+ --focus: var(--accent);
204
+ --link: var(--foreground);
205
+
206
+ /* Calculated Colors */
207
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
208
+
209
+ --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
210
+ --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
211
+ --background-inverse: var(--foreground);
212
+
213
+ --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
214
+ --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
215
+ --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
216
+ --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
217
+ --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
218
+
219
+ --field-hover: color-mix(
220
+ in oklab,
221
+ var(--field-background, var(--default)) 90%,
222
+ var(--field-foreground, var(--foreground)) 2%
223
+ );
224
+ --field-focus: var(--field-background, var(--default));
225
+ --field-border-hover: color-mix(
226
+ in oklab,
227
+ var(--field-border, var(--border)) 88%,
228
+ var(--field-foreground, var(--foreground)) 10%
229
+ );
230
+ --field-border-focus: color-mix(
231
+ in oklab,
232
+ var(--field-border, var(--border)) 74%,
233
+ var(--field-foreground, var(--foreground)) 22%
234
+ );
235
+
236
+ --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
237
+ --default-soft-foreground: var(--default-foreground);
238
+ --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
239
+
240
+ --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
241
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
242
+ --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
243
+
244
+ --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
245
+ --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
246
+ --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
247
+
248
+ --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
249
+ --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
250
+ --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
251
+
252
+ --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
253
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
254
+ --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
255
+
256
+ --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
257
+ --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
258
+
259
+ --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
260
+ --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
261
+ }
262
+ }