@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/airbnb.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Airbnb theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.6579, chroma 0.2309, hue 17.07, 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/airbnb.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="airbnb"> light
15
+ * <html data-theme="airbnb" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="airbnb"] {
20
+ color-scheme: light;
21
+
22
+ --component-radius: calc(var(--radius) * 3);
23
+ --field-radius: 0.75rem;
24
+ --radius: 0.5rem;
25
+
26
+ /* Base Colors */
27
+ --background: oklch(97.02% 0 17.07);
28
+ --foreground: oklch(21.03% 0 17.07);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0 17.07);
32
+ --overlay-foreground: oklch(21.03% 0 17.07);
33
+ --surface: oklch(100% 0 17.07);
34
+ --surface-foreground: oklch(21.03% 0 17.07);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0 17.07);
37
+ --surface-secondary-foreground: oklch(21.03% 0 17.07);
38
+ --surface-tertiary: oklch(93.73% 0 17.07);
39
+ --surface-tertiary-foreground: oklch(21.03% 0 17.07);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0 17.07);
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 17.07);
49
+ --default-foreground: oklch(21.03% 0.0059 17.07);
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(65.79% 0.2309 17.07);
57
+ --accent-foreground: oklch(0.9911 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(65.79% 0.2309 17.07);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0 17.07);
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 17.07);
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 17.07);
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.5392 0.1816 33.72);
91
+ --danger-foreground: oklch(0.9911 0 0);
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.5573 0.0947 199.48);
97
+ --success-foreground: oklch(0.9911 0 0);
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.6904 0.1972 38.75);
103
+ --warning-foreground: oklch(0.9911 0 0);
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 17.07);
112
+ --segment-foreground: oklch(21.03% 0 17.07);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0 17.07);
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 17.07);
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="airbnb"].dark,
129
+ .dark [data-theme="airbnb"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0 17.07);
134
+ --foreground: oklch(99.11% 0 17.07);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0 17.07);
138
+ --overlay-foreground: oklch(99.11% 0 17.07);
139
+ --surface: oklch(21.03% 0 17.07);
140
+ --surface-foreground: oklch(99.11% 0 17.07);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0 17.07);
143
+ --surface-secondary-foreground: oklch(99.11% 0 17.07);
144
+ --surface-tertiary: oklch(27.21% 0 17.07);
145
+ --surface-tertiary-foreground: oklch(99.11% 0 17.07);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0 17.07);
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 17.07);
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(65.79% 0.2309 17.07);
163
+ --accent-foreground: oklch(0.9911 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(65.79% 0.2309 17.07);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0 17.07);
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 17.07);
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 17.07);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(0.5392 0.1816 33.72);
195
+ --danger-foreground: oklch(0.9911 0 0);
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.652 0.114864 185.0749);
201
+ --success-foreground: oklch(0.9911 0 0);
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.8197 0.170602 78.4658);
207
+ --warning-foreground: oklch(15% 0.05 78.47);
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 17.07);
216
+ --segment-foreground: oklch(99.11% 0 17.07);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0 17.07);
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 17.07);
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/all.css ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Every bundled theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Convenience for docs and playgrounds. Apps should import only the themes they offer.
5
+ * Import without a `layer()` wrapper.
6
+ */
7
+ @import "./hero.css";
8
+ @import "./sky.css";
9
+ @import "./lavender.css";
10
+ @import "./mint.css";
11
+ @import "./netflix.css";
12
+ @import "./uber.css";
13
+ @import "./spotify.css";
14
+ @import "./coinbase.css";
15
+ @import "./airbnb.css";
16
+ @import "./discord.css";
17
+ @import "./rabbit.css";
package/dist/themes/coinbase.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Coinbase theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.5282, chroma 0.2628, hue 262.87, base 0.002.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/coinbase.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="coinbase"> light
15
+ * <html data-theme="coinbase" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="coinbase"] {
20
+ color-scheme: light;
21
+
22
+ --component-radius: calc(var(--radius) * 3);
23
+ --field-radius: 0.125rem;
24
+ --radius: 0.5rem;
25
+
26
+ /* Base Colors */
27
+ --background: oklch(97.02% 0.002 262.87);
28
+ --foreground: oklch(21.03% 0.002 262.87);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0.0006 262.87);
32
+ --overlay-foreground: oklch(21.03% 0.002 262.87);
33
+ --surface: oklch(100% 0.001 262.87);
34
+ --surface-foreground: oklch(21.03% 0.002 262.87);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0.0016 262.87);
37
+ --surface-secondary-foreground: oklch(21.03% 0.002 262.87);
38
+ --surface-tertiary: oklch(93.73% 0.0016 262.87);
39
+ --surface-tertiary-foreground: oklch(21.03% 0.002 262.87);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0.004 262.87);
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.002 262.87);
49
+ --default-foreground: oklch(21.03% 0.0059 262.87);
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(52.82% 0.2628 262.87);
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(52.82% 0.2628 262.87);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0.001 262.87);
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.002 262.87);
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.004 262.87);
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.5507 0.2062 24);
91
+ --danger-foreground: oklch(98% 0.02 24);
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.5438 0.1268 157.17);
97
+ --success-foreground: oklch(98% 0.0127 157.17);
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.8095 0.1119 61.69);
103
+ --warning-foreground: oklch(15% 0.0336 61.69);
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.002 262.87);
112
+ --segment-foreground: oklch(21.03% 0.002 262.87);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0.002 262.87);
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.002 262.87);
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="coinbase"].dark,
129
+ .dark [data-theme="coinbase"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0.002 262.87);
134
+ --foreground: oklch(99.11% 0.002 262.87);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0.004 262.87);
138
+ --overlay-foreground: oklch(99.11% 0.002 262.87);
139
+ --surface: oklch(21.03% 0.004 262.87);
140
+ --surface-foreground: oklch(99.11% 0.002 262.87);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0.003 262.87);
143
+ --surface-secondary-foreground: oklch(99.11% 0.002 262.87);
144
+ --surface-tertiary: oklch(27.21% 0.003 262.87);
145
+ --surface-tertiary-foreground: oklch(99.11% 0.002 262.87);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0.004 262.87);
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.002 262.87);
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(52.82% 0.2628 262.87);
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(52.82% 0.2628 262.87);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0.004 262.87);
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.002 262.87);
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.004 262.87);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(0.6545 0.2145 22.31);
195
+ --danger-foreground: oklch(15% 0.05 22.31);
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.7574 0.180554 156.931);
201
+ --success-foreground: oklch(15% 0.05 156.93);
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.8095 0.1119 61.69);
207
+ --warning-foreground: oklch(15% 0.0336 61.69);
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.002 262.87);
216
+ --segment-foreground: oklch(99.11% 0.002 262.87);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0.002 262.87);
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.002 262.87);
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/{default/variables.css → default.css} RENAMED
@@ -1,5 +1,12 @@
1
- @layer base {
2
- /* Ropav Default Theme */
1
+ /**
2
+ * Ropav default theme — hand-written.
3
+ *
4
+ * Also the base layer every other theme sits on: the structural tokens declared here
5
+ * (`--spacing`, `--radius`, `--cursor-*`, the primitives, the shadows, `--backdrop`) are
6
+ * not repeated by the generated themes, which only swap colours. `:root` and `.dark` keep
7
+ * matching an element that carries a `data-theme`, so those tokens still come through.
8
+ */
9
+ @layer theme {
3
10
  :root,
4
11
  .light,
5
12
  .default,
@@ -32,7 +39,8 @@
32
39
 
33
40
  /* Radius */
34
41
  --radius: 0.5rem;
35
- --field-radius: calc(var(--radius) * 1.5);
42
+ --field-radius: calc(var(--radius) * 0.75);
43
+ --component-radius: var(--field-radius);
36
44
 
37
45
  /* == Light Theme Variables == */
38
46
 
@@ -54,7 +62,7 @@
54
62
  --overlay: var(--white);
55
63
  --overlay-foreground: var(--foreground);
56
64
 
57
- --muted: oklch(0.5517 0.0138 285.94);
65
+ --muted: oklch(0.516 0.0138 285.94);
58
66
 
59
67
  --scrollbar: var(--scrollbar-thumb);
60
68
  --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
@@ -66,7 +74,7 @@
66
74
  --default: oklch(94% 0.001 286.375);
67
75
  --default-foreground: var(--eclipse);
68
76
 
69
- --accent: oklch(0.6204 0.195 253.83);
77
+ --accent: oklch(0.62 0.2 260);
70
78
  --accent-foreground: var(--snow);
71
79
 
72
80
  /* Form Fields */
@@ -133,7 +141,7 @@
133
141
  --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
134
142
 
135
143
  --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
136
- --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
144
+ --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
137
145
  --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
138
146
 
139
147
  --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
@@ -145,7 +153,7 @@
145
153
  --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
146
154
 
147
155
  --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
148
- --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
156
+ --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
149
157
  --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
150
158
 
151
159
  --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
@@ -163,9 +171,16 @@
163
171
  --overlay-shadow:
164
172
  0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
165
173
  0 14px 28px 0 rgba(0, 0, 0, 0.08);
174
+ /* The edge of an overlay that has an arrow, as a filter over the combined silhouette:
175
+ * `--overlay-shadow` restated as drop-shadows, so the shadow wraps the arrow too. A theme
176
+ * whose overlays wear a hairline instead points this at `url(#ropav-overlay-edge)` — the
177
+ * filter every arrow carries — and colours the line with `--overlay-edge-line`. */
178
+ --overlay-edge: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06))
179
+ drop-shadow(0 -6px 12px rgba(0, 0, 0, 0.03)) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.08));
180
+ --overlay-edge-line: transparent;
166
181
  --field-shadow:
167
- 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
168
- 0 0 1px 0 rgba(0, 0, 0, 0.06);
182
+ 0 2px 4px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.03),
183
+ 0 0 1px 0 rgba(0, 0, 0, 0.03);
169
184
  /* Skeleton Default Global Animation */
170
185
  --skeleton-animation: shimmer; /* shimmer, pulse, none */
171
186
 
@@ -233,6 +248,10 @@
233
248
  /* Shadows */
234
249
  --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
235
250
  --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
251
+ /* The arrowed overlays' edge: the same hairline, drawn by the filter the arrow carries so it
252
+ * follows the arrow's silhouette as well as the body's. */
253
+ --overlay-edge: url(#ropav-overlay-edge);
254
+ --overlay-edge-line: rgba(255, 255, 255, 0.3);
236
255
  --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
237
256
 
238
257
  /* Calculated Colors */