@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/netflix.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Netflix theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.5814, chroma 0.2349, hue 27.99, base 0.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/netflix.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="netflix"> light
15
+ * <html data-theme="netflix" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="netflix"] {
20
+ color-scheme: light;
21
+
22
+ --component-radius: calc(var(--radius) * 3);
23
+ --field-radius: 0.125rem;
24
+ --radius: 0.125rem;
25
+
26
+ /* Base Colors */
27
+ --background: oklch(97.02% 0 27.99);
28
+ --foreground: oklch(21.03% 0 27.99);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0 27.99);
32
+ --overlay-foreground: oklch(21.03% 0 27.99);
33
+ --surface: oklch(100% 0 27.99);
34
+ --surface-foreground: oklch(21.03% 0 27.99);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0 27.99);
37
+ --surface-secondary-foreground: oklch(21.03% 0 27.99);
38
+ --surface-tertiary: oklch(93.73% 0 27.99);
39
+ --surface-tertiary-foreground: oklch(21.03% 0 27.99);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0 27.99);
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 27.99);
49
+ --default-foreground: oklch(21.03% 0.0059 27.99);
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(58.14% 0.2349 27.99);
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(58.14% 0.2349 27.99);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0 27.99);
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 27.99);
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 27.99);
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.4823 0.1938 27.64);
91
+ --danger-foreground: oklch(98% 0.0194 27.64);
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.5148 0.1337 146.82);
97
+ --success-foreground: oklch(98% 0.0134 146.82);
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.561 0.116571 78.9352);
103
+ --warning-foreground: oklch(98% 0.0117 78.94);
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 27.99);
112
+ --segment-foreground: oklch(21.03% 0 27.99);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0 27.99);
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 27.99);
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="netflix"].dark,
129
+ .dark [data-theme="netflix"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0 27.99);
134
+ --foreground: oklch(99.11% 0 27.99);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0 27.99);
138
+ --overlay-foreground: oklch(99.11% 0 27.99);
139
+ --surface: oklch(21.03% 0 27.99);
140
+ --surface-foreground: oklch(99.11% 0 27.99);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0 27.99);
143
+ --surface-secondary-foreground: oklch(99.11% 0 27.99);
144
+ --surface-tertiary: oklch(27.21% 0 27.99);
145
+ --surface-tertiary-foreground: oklch(99.11% 0 27.99);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0 27.99);
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 27.99);
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(58.14% 0.2349 27.99);
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(58.14% 0.2349 27.99);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0 27.99);
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 27.99);
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 27.99);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(0.4964 0.1994 28.56);
195
+ --danger-foreground: oklch(98% 0.0199 28.56);
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.7677 0.1899 148.1);
201
+ --success-foreground: oklch(15% 0.05 148.1);
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.8239 0.153 74.6);
207
+ --warning-foreground: oklch(15% 0.0459 74.6);
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 27.99);
216
+ --segment-foreground: oklch(99.11% 0 27.99);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0 27.99);
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 27.99);
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/rabbit.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Rabbit theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.6678, chroma 0.2232, hue 36.66, base 0.01.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/rabbit.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="rabbit"> light
15
+ * <html data-theme="rabbit" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="rabbit"] {
20
+ color-scheme: light;
21
+
22
+ --component-radius: calc(var(--radius) * 3);
23
+ --field-radius: 1rem;
24
+ --radius: 0.5rem;
25
+
26
+ /* Base Colors */
27
+ --background: oklch(97.02% 0.01 36.66);
28
+ --foreground: oklch(21.03% 0.01 36.66);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0.003 36.66);
32
+ --overlay-foreground: oklch(21.03% 0.01 36.66);
33
+ --surface: oklch(100% 0.005 36.66);
34
+ --surface-foreground: oklch(21.03% 0.01 36.66);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0.008 36.66);
37
+ --surface-secondary-foreground: oklch(21.03% 0.01 36.66);
38
+ --surface-tertiary: oklch(93.73% 0.008 36.66);
39
+ --surface-tertiary-foreground: oklch(21.03% 0.01 36.66);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0.02 36.66);
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 36.66);
49
+ --default-foreground: oklch(21.03% 0.0059 36.66);
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(66.78% 0.2232 36.66);
57
+ --accent-foreground: oklch(15% 0.03 36.66);
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(66.78% 0.2232 36.66);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0.005 36.66);
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 36.66);
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 36.66);
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.6291 0.2565 29.09);
91
+ --danger-foreground: oklch(98% 0.02 29.09);
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.7113 0.2043 140.81);
97
+ --success-foreground: oklch(15% 0.05 140.81);
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(78.19% 0.1617 46.27);
103
+ --warning-foreground: oklch(21.03% 0.0059 46.27);
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 36.66);
112
+ --segment-foreground: oklch(21.03% 0.01 36.66);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0.01 36.66);
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 36.66);
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="rabbit"].dark,
129
+ .dark [data-theme="rabbit"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0.01 36.66);
134
+ --foreground: oklch(99.11% 0.01 36.66);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0.02 36.66);
138
+ --overlay-foreground: oklch(99.11% 0.01 36.66);
139
+ --surface: oklch(21.03% 0.02 36.66);
140
+ --surface-foreground: oklch(99.11% 0.01 36.66);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0.015 36.66);
143
+ --surface-secondary-foreground: oklch(99.11% 0.01 36.66);
144
+ --surface-tertiary: oklch(27.21% 0.015 36.66);
145
+ --surface-tertiary-foreground: oklch(99.11% 0.01 36.66);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0.02 36.66);
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 36.66);
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(66.78% 0.2232 36.66);
163
+ --accent-foreground: oklch(15% 0.03 36.66);
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(66.78% 0.2232 36.66);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0.02 36.66);
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 36.66);
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 36.66);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(0.6291 0.2565 29.09);
195
+ --danger-foreground: oklch(98% 0.02 29.09);
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.7113 0.2043 140.81);
201
+ --success-foreground: oklch(15% 0.05 140.81);
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(82.03% 0.1416 50.28);
207
+ --warning-foreground: oklch(21.03% 0.0059 50.28);
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 36.66);
216
+ --segment-foreground: oklch(99.11% 0.01 36.66);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0.01 36.66);
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 36.66);
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/shared/theme.css CHANGED
@@ -52,7 +52,7 @@
52
52
  --color-field-foreground: var(--field-foreground, var(--foreground));
53
53
  --color-field-placeholder: var(--field-placeholder, var(--muted));
54
54
  --color-field-border: var(--field-border, var(--border));
55
- --radius-field: var(--field-radius, calc(var(--radius) * 1.5));
55
+ --radius-field: var(--field-radius, calc(var(--radius) * 0.75));
56
56
  --border-width-field: var(--field-border-width, var(--border-width));
57
57
 
58
58
  /* Color Tokens */
@@ -100,7 +100,13 @@
100
100
  --color-border-secondary: var(--border-secondary);
101
101
  --color-border-tertiary: var(--border-tertiary);
102
102
 
103
- /* Radius and default sizes - defaults can change by just changing the --radius */
103
+ /* Radius and default sizes - defaults can change by just changing the --radius.
104
+ *
105
+ * `inline` is what makes that work in a subtree: the value is substituted into the utility, so
106
+ * `rounded-3xl` compiles to `calc(var(--radius) * 3)` and resolves against the element wearing
107
+ * the class. A `data-theme` that sets its own `--radius` gets the whole scale for free, with
108
+ * nothing to re-declare - unlike the colour tokens, which are real properties on `:root` and do
109
+ * have to be re-emitted per theme. */
104
110
  --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
105
111
  --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
106
112
  --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
@@ -110,6 +116,17 @@
110
116
  --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
111
117
  --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
112
118
 
119
+ /* The one radius every control and surface reads, so a theme can pair them with its fields
120
+ * instead. Unset falls through to the pill-ish 3x that every theme but `default` still wants.
121
+ * Kept off the `--radius-*` scale on purpose: overriding a scale step would leave `2xl`
122
+ * larger than `3xl`.
123
+ *
124
+ * This alias is for the utilities only - `inline` substitutes it into `rounded-component`, so
125
+ * the var() resolves at the element wearing the class. Raw CSS must say
126
+ * `var(--component-radius)` instead: read through this alias, the var() resolves here on
127
+ * `:root` and then inherits the root theme's value into every `data-theme` subtree. */
128
+ --radius-component: var(--component-radius, calc(var(--radius) * 3));
129
+
113
130
  /* Transition Timing Functions */
114
131
  --ease-smooth: ease; /* same as transition: ease; */
115
132
  /* These custom curves are made by https://twitter.com/bdc */