@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/lavender.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Lavender theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.77, chroma 0.13, hue 305, base 0.0015.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/lavender.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="lavender"> light
15
+ * <html data-theme="lavender" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="lavender"] {
20
+ color-scheme: light;
21
+
22
+ --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.0015 305);
28
+ --foreground: oklch(21.03% 0.0015 305);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0.0004 305);
32
+ --overlay-foreground: oklch(21.03% 0.0015 305);
33
+ --surface: oklch(100% 0.0008 305);
34
+ --surface-foreground: oklch(21.03% 0.0015 305);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0.0012 305);
37
+ --surface-secondary-foreground: oklch(21.03% 0.0015 305);
38
+ --surface-tertiary: oklch(93.73% 0.0012 305);
39
+ --surface-tertiary-foreground: oklch(21.03% 0.0015 305);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0.003 305);
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.0015 305);
49
+ --default-foreground: oklch(21.03% 0.0059 305);
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(77% 0.13 305);
57
+ --accent-foreground: oklch(15% 0.026 305);
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(77% 0.13 305);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0.0008 305);
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.0015 305);
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.003 305);
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(65.32% 0.2335 31.88);
91
+ --danger-foreground: oklch(99.11% 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(73.29% 0.1941 156.95);
97
+ --success-foreground: oklch(21.03% 0.0059 156.95);
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.159 78.47);
103
+ --warning-foreground: oklch(21.03% 0.0059 78.47);
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.0015 305);
112
+ --segment-foreground: oklch(21.03% 0.0015 305);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0.0015 305);
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.0015 305);
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="lavender"].dark,
129
+ .dark [data-theme="lavender"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0.0015 305);
134
+ --foreground: oklch(99.11% 0.0015 305);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0.003 305);
138
+ --overlay-foreground: oklch(99.11% 0.0015 305);
139
+ --surface: oklch(21.03% 0.003 305);
140
+ --surface-foreground: oklch(99.11% 0.0015 305);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0.0023 305);
143
+ --surface-secondary-foreground: oklch(99.11% 0.0015 305);
144
+ --surface-tertiary: oklch(27.21% 0.0023 305);
145
+ --surface-tertiary-foreground: oklch(99.11% 0.0015 305);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0.003 305);
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.0015 305);
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(77% 0.13 305);
163
+ --accent-foreground: oklch(15% 0.026 305);
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(77% 0.13 305);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0.003 305);
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.0015 305);
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.003 305);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(59.4% 0.1973 30.77);
195
+ --danger-foreground: oklch(99.11% 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(73.29% 0.1941 156.95);
201
+ --success-foreground: oklch(21.03% 0.0059 156.95);
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.1392 82.48);
207
+ --warning-foreground: oklch(21.03% 0.0059 82.48);
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.0015 305);
216
+ --segment-foreground: oklch(99.11% 0.0015 305);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0.0015 305);
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.0015 305);
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/mint.css ADDED
@@ -0,0 +1,231 @@
1
+ /**
2
+ * Mint theme — GENERATED, do not edit by hand.
3
+ *
4
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
5
+ * Seed values: lightness 0.82, chroma 0.12, hue 155, base 0.0015.
6
+ *
7
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
8
+ * `layer()` wrapper:
9
+ *
10
+ * @import "@ropav/styles";
11
+ * @import "@ropav/styles/themes/mint.css";
12
+ *
13
+ * Light is the default; dark needs the `dark` class alongside the attribute:
14
+ * <html data-theme="mint"> light
15
+ * <html data-theme="mint" class="dark"> dark
16
+ */
17
+
18
+ @layer theme {
19
+ [data-theme="mint"] {
20
+ color-scheme: light;
21
+
22
+ --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.0015 155);
28
+ --foreground: oklch(21.03% 0.0015 155);
29
+
30
+ /* Surfaces */
31
+ --overlay: oklch(100% 0.0004 155);
32
+ --overlay-foreground: oklch(21.03% 0.0015 155);
33
+ --surface: oklch(100% 0.0008 155);
34
+ --surface-foreground: oklch(21.03% 0.0015 155);
35
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
36
+ --surface-secondary: oklch(95.24% 0.0012 155);
37
+ --surface-secondary-foreground: oklch(21.03% 0.0015 155);
38
+ --surface-tertiary: oklch(93.73% 0.0012 155);
39
+ --surface-tertiary-foreground: oklch(21.03% 0.0015 155);
40
+
41
+ /* Muted and scrollbar */
42
+ --muted: oklch(51.6% 0.003 155);
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.0015 155);
49
+ --default-foreground: oklch(21.03% 0.0059 155);
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(82% 0.12 155);
57
+ --accent-foreground: oklch(15% 0.024 155);
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(82% 0.12 155);
63
+
64
+ /* Form Fields */
65
+ --field-background: oklch(100% 0.0008 155);
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.0015 155);
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.003 155);
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(65.32% 0.2335 13.88);
91
+ --danger-foreground: oklch(99.11% 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(73.29% 0.1941 138.95);
97
+ --success-foreground: oklch(21.03% 0.0059 138.95);
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.159 60.47);
103
+ --warning-foreground: oklch(21.03% 0.0059 60.47);
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.0015 155);
112
+ --segment-foreground: oklch(21.03% 0.0015 155);
113
+
114
+ /* Borders and separators */
115
+ --border: oklch(90% 0.0015 155);
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.0015 155);
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="mint"].dark,
129
+ .dark [data-theme="mint"] {
130
+ color-scheme: dark;
131
+
132
+ /* Base Colors */
133
+ --background: oklch(12% 0.0015 155);
134
+ --foreground: oklch(99.11% 0.0015 155);
135
+
136
+ /* Surfaces */
137
+ --overlay: oklch(21.03% 0.003 155);
138
+ --overlay-foreground: oklch(99.11% 0.0015 155);
139
+ --surface: oklch(21.03% 0.003 155);
140
+ --surface-foreground: oklch(99.11% 0.0015 155);
141
+ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
142
+ --surface-secondary: oklch(25.7% 0.0023 155);
143
+ --surface-secondary-foreground: oklch(99.11% 0.0015 155);
144
+ --surface-tertiary: oklch(27.21% 0.0023 155);
145
+ --surface-tertiary-foreground: oklch(99.11% 0.0015 155);
146
+
147
+ /* Muted and scrollbar */
148
+ --muted: oklch(70.5% 0.003 155);
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.0015 155);
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(82% 0.12 155);
163
+ --accent-foreground: oklch(15% 0.024 155);
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(82% 0.12 155);
169
+
170
+ /* Form Fields */
171
+ --field-background: oklch(21.03% 0.003 155);
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.0015 155);
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.003 155);
191
+ --field-shadow: 0 0 0 0 transparent inset;
192
+
193
+ /* Status Colors */
194
+ --danger: oklch(59.4% 0.1973 12.77);
195
+ --danger-foreground: oklch(99.11% 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(73.29% 0.1941 138.95);
201
+ --success-foreground: oklch(21.03% 0.0059 138.95);
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.1392 64.48);
207
+ --warning-foreground: oklch(21.03% 0.0059 64.48);
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.0015 155);
216
+ --segment-foreground: oklch(99.11% 0.0015 155);
217
+
218
+ /* Borders and separators */
219
+ --border: oklch(28% 0.0015 155);
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.0015 155);
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
+ }