ropav 0.1.8 → 0.2.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 (67) hide show
  1. package/README.md +13 -4
  2. package/dist/base.css +570 -773
  3. package/dist/calendar.css +45 -34
  4. package/dist/calendar.js +108 -83
  5. package/dist/color-input.css +3 -7
  6. package/dist/color-picker.css +2 -6
  7. package/dist/color-swatch.css +2 -6
  8. package/dist/combobox.css +5 -5
  9. package/dist/componentColors.js +29 -25
  10. package/dist/components/alert/types.d.ts +1 -1
  11. package/dist/components/avatar/types.d.ts +1 -1
  12. package/dist/components/badge/types.d.ts +1 -1
  13. package/dist/components/calendar/index.d.ts +1 -1
  14. package/dist/components/calendar/types.d.ts +3 -0
  15. package/dist/components/date-picker/index.d.ts +1 -1
  16. package/dist/components/date-picker/types.d.ts +3 -1
  17. package/dist/components/pagination/types.d.ts +1 -1
  18. package/dist/components/progress/types.d.ts +1 -1
  19. package/dist/components/segmented-control/types.d.ts +1 -1
  20. package/dist/components/slider/types.d.ts +1 -1
  21. package/dist/components/slider/useSlider.d.ts +1 -1
  22. package/dist/components/slider/useSliderPointer.d.ts +15 -0
  23. package/dist/components/slider/useSliderValueState.d.ts +1 -0
  24. package/dist/components/toast/types.d.ts +1 -1
  25. package/dist/components/toolbar/index.d.ts +3 -0
  26. package/dist/components/toolbar/index.js +2 -0
  27. package/dist/components/toolbar/toolbar.d.ts +24 -0
  28. package/dist/components/toolbar/types.d.ts +12 -0
  29. package/dist/components/toolbar/useToolbar.d.ts +7 -0
  30. package/dist/date-picker.css +9 -9
  31. package/dist/date-picker.js +4 -2
  32. package/dist/dropdown-menu.css +7 -7
  33. package/dist/field.css +1 -1
  34. package/dist/focusNavigation.js +12 -6
  35. package/dist/hover-card.css +1 -1
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +2 -1
  38. package/dist/modal.css +1 -1
  39. package/dist/multi-select.css +5 -5
  40. package/dist/pagination.css +1 -1
  41. package/dist/popover.css +2 -2
  42. package/dist/select.css +5 -5
  43. package/dist/slider.css +80 -71
  44. package/dist/slider.js +91 -16
  45. package/dist/tabs.css +3 -3
  46. package/dist/tags-input.css +1 -1
  47. package/dist/textarea.css +1 -1
  48. package/dist/toast.css +1 -1
  49. package/dist/toolbar.css +15 -0
  50. package/dist/toolbar.js +143 -0
  51. package/dist/tooltip.css +1 -1
  52. package/dist/utils/componentColors.d.ts +2 -4
  53. package/dist/utils/dom/focusNavigation.d.ts +4 -1
  54. package/docs/code-architecture.md +30 -1
  55. package/docs/public-styles-api.md +11 -6
  56. package/docs/releasing.md +39 -0
  57. package/package.json +52 -39
  58. package/src/styles/_mixins.scss +2 -6
  59. package/src/styles/_tokens.scss +4 -833
  60. package/src/styles/generated/showcase.html +274 -0
  61. package/src/styles/generated/tokens.css +592 -0
  62. package/src/styles/generated/tokens.md +583 -0
  63. package/src/styles/generated/tokens.scss +1134 -0
  64. package/tokens/manifest.json +6164 -0
  65. package/docs/public-tokens.md +0 -685
  66. package/src/styles/_variables.scss +0 -243
  67. package/src/styles/styles-manifest.json +0 -5244
@@ -1,835 +1,6 @@
1
- // This file is generated by Style Dictionary.
2
- // Do not edit directly; update tokens/**/*.tokens.json instead.
3
-
4
- @use 'variables' as *;
1
+ // Design tokens are generated by umberkit (`pnpm tokens:build`) into
2
+ // src/styles/generated/. This shim inlines the emitted CSS and establishes
3
+ // the public cascade-layer order consumers rely on.
4
+ @use './generated/tokens.css';
5
5
 
6
6
  @layer ropav.tokens, ropav.components;
7
-
8
- @layer ropav.tokens {
9
- :root {
10
- // Font family
11
- --rp-font-family: #{$font-family-base};
12
-
13
- // Colors
14
- --rp-color-white : #{$color-white};
15
- --rp-color-black : #{$color-black};
16
- --rp-color-dark-0 : #{$color-dark-0};
17
- --rp-color-dark-1 : #{$color-dark-1};
18
- --rp-color-dark-2 : #{$color-dark-2};
19
- --rp-color-dark-3 : #{$color-dark-3};
20
- --rp-color-dark-4 : #{$color-dark-4};
21
- --rp-color-dark-5 : #{$color-dark-5};
22
- --rp-color-dark-6 : #{$color-dark-6};
23
- --rp-color-dark-7 : #{$color-dark-7};
24
- --rp-color-dark-8 : #{$color-dark-8};
25
- --rp-color-dark-9 : #{$color-dark-9};
26
- --rp-color-gray-0 : #{$color-gray-0};
27
- --rp-color-gray-1 : #{$color-gray-1};
28
- --rp-color-gray-2 : #{$color-gray-2};
29
- --rp-color-gray-3 : #{$color-gray-3};
30
- --rp-color-gray-4 : #{$color-gray-4};
31
- --rp-color-gray-5 : #{$color-gray-5};
32
- --rp-color-gray-6 : #{$color-gray-6};
33
- --rp-color-gray-7 : #{$color-gray-7};
34
- --rp-color-gray-8 : #{$color-gray-8};
35
- --rp-color-gray-9 : #{$color-gray-9};
36
- --rp-color-red-0 : #{$color-red-0};
37
- --rp-color-red-1 : #{$color-red-1};
38
- --rp-color-red-2 : #{$color-red-2};
39
- --rp-color-red-3 : #{$color-red-3};
40
- --rp-color-red-4 : #{$color-red-4};
41
- --rp-color-red-5 : #{$color-red-5};
42
- --rp-color-red-6 : #{$color-red-6};
43
- --rp-color-red-7 : #{$color-red-7};
44
- --rp-color-red-8 : #{$color-red-8};
45
- --rp-color-red-9 : #{$color-red-9};
46
- --rp-color-pink-0 : #{$color-pink-0};
47
- --rp-color-pink-1 : #{$color-pink-1};
48
- --rp-color-pink-2 : #{$color-pink-2};
49
- --rp-color-pink-3 : #{$color-pink-3};
50
- --rp-color-pink-4 : #{$color-pink-4};
51
- --rp-color-pink-5 : #{$color-pink-5};
52
- --rp-color-pink-6 : #{$color-pink-6};
53
- --rp-color-pink-7 : #{$color-pink-7};
54
- --rp-color-pink-8 : #{$color-pink-8};
55
- --rp-color-pink-9 : #{$color-pink-9};
56
- --rp-color-grape-0 : #{$color-grape-0};
57
- --rp-color-grape-1 : #{$color-grape-1};
58
- --rp-color-grape-2 : #{$color-grape-2};
59
- --rp-color-grape-3 : #{$color-grape-3};
60
- --rp-color-grape-4 : #{$color-grape-4};
61
- --rp-color-grape-5 : #{$color-grape-5};
62
- --rp-color-grape-6 : #{$color-grape-6};
63
- --rp-color-grape-7 : #{$color-grape-7};
64
- --rp-color-grape-8 : #{$color-grape-8};
65
- --rp-color-grape-9 : #{$color-grape-9};
66
- --rp-color-violet-0: #{$color-violet-0};
67
- --rp-color-violet-1: #{$color-violet-1};
68
- --rp-color-violet-2: #{$color-violet-2};
69
- --rp-color-violet-3: #{$color-violet-3};
70
- --rp-color-violet-4: #{$color-violet-4};
71
- --rp-color-violet-5: #{$color-violet-5};
72
- --rp-color-violet-6: #{$color-violet-6};
73
- --rp-color-violet-7: #{$color-violet-7};
74
- --rp-color-violet-8: #{$color-violet-8};
75
- --rp-color-violet-9: #{$color-violet-9};
76
- --rp-color-indigo-0: #{$color-indigo-0};
77
- --rp-color-indigo-1: #{$color-indigo-1};
78
- --rp-color-indigo-2: #{$color-indigo-2};
79
- --rp-color-indigo-3: #{$color-indigo-3};
80
- --rp-color-indigo-4: #{$color-indigo-4};
81
- --rp-color-indigo-5: #{$color-indigo-5};
82
- --rp-color-indigo-6: #{$color-indigo-6};
83
- --rp-color-indigo-7: #{$color-indigo-7};
84
- --rp-color-indigo-8: #{$color-indigo-8};
85
- --rp-color-indigo-9: #{$color-indigo-9};
86
- --rp-color-blue-0 : #{$color-blue-0};
87
- --rp-color-blue-1 : #{$color-blue-1};
88
- --rp-color-blue-2 : #{$color-blue-2};
89
- --rp-color-blue-3 : #{$color-blue-3};
90
- --rp-color-blue-4 : #{$color-blue-4};
91
- --rp-color-blue-5 : #{$color-blue-5};
92
- --rp-color-blue-6 : #{$color-blue-6};
93
- --rp-color-blue-7 : #{$color-blue-7};
94
- --rp-color-blue-8 : #{$color-blue-8};
95
- --rp-color-blue-9 : #{$color-blue-9};
96
- --rp-color-cyan-0 : #{$color-cyan-0};
97
- --rp-color-cyan-1 : #{$color-cyan-1};
98
- --rp-color-cyan-2 : #{$color-cyan-2};
99
- --rp-color-cyan-3 : #{$color-cyan-3};
100
- --rp-color-cyan-4 : #{$color-cyan-4};
101
- --rp-color-cyan-5 : #{$color-cyan-5};
102
- --rp-color-cyan-6 : #{$color-cyan-6};
103
- --rp-color-cyan-7 : #{$color-cyan-7};
104
- --rp-color-cyan-8 : #{$color-cyan-8};
105
- --rp-color-cyan-9 : #{$color-cyan-9};
106
- --rp-color-teal-0 : #{$color-teal-0};
107
- --rp-color-teal-1 : #{$color-teal-1};
108
- --rp-color-teal-2 : #{$color-teal-2};
109
- --rp-color-teal-3 : #{$color-teal-3};
110
- --rp-color-teal-4 : #{$color-teal-4};
111
- --rp-color-teal-5 : #{$color-teal-5};
112
- --rp-color-teal-6 : #{$color-teal-6};
113
- --rp-color-teal-7 : #{$color-teal-7};
114
- --rp-color-teal-8 : #{$color-teal-8};
115
- --rp-color-teal-9 : #{$color-teal-9};
116
- --rp-color-green-0 : #{$color-green-0};
117
- --rp-color-green-1 : #{$color-green-1};
118
- --rp-color-green-2 : #{$color-green-2};
119
- --rp-color-green-3 : #{$color-green-3};
120
- --rp-color-green-4 : #{$color-green-4};
121
- --rp-color-green-5 : #{$color-green-5};
122
- --rp-color-green-6 : #{$color-green-6};
123
- --rp-color-green-7 : #{$color-green-7};
124
- --rp-color-green-8 : #{$color-green-8};
125
- --rp-color-green-9 : #{$color-green-9};
126
- --rp-color-lime-0 : #{$color-lime-0};
127
- --rp-color-lime-1 : #{$color-lime-1};
128
- --rp-color-lime-2 : #{$color-lime-2};
129
- --rp-color-lime-3 : #{$color-lime-3};
130
- --rp-color-lime-4 : #{$color-lime-4};
131
- --rp-color-lime-5 : #{$color-lime-5};
132
- --rp-color-lime-6 : #{$color-lime-6};
133
- --rp-color-lime-7 : #{$color-lime-7};
134
- --rp-color-lime-8 : #{$color-lime-8};
135
- --rp-color-lime-9 : #{$color-lime-9};
136
- --rp-color-yellow-0: #{$color-yellow-0};
137
- --rp-color-yellow-1: #{$color-yellow-1};
138
- --rp-color-yellow-2: #{$color-yellow-2};
139
- --rp-color-yellow-3: #{$color-yellow-3};
140
- --rp-color-yellow-4: #{$color-yellow-4};
141
- --rp-color-yellow-5: #{$color-yellow-5};
142
- --rp-color-yellow-6: #{$color-yellow-6};
143
- --rp-color-yellow-7: #{$color-yellow-7};
144
- --rp-color-yellow-8: #{$color-yellow-8};
145
- --rp-color-yellow-9: #{$color-yellow-9};
146
- --rp-color-orange-0: #{$color-orange-0};
147
- --rp-color-orange-1: #{$color-orange-1};
148
- --rp-color-orange-2: #{$color-orange-2};
149
- --rp-color-orange-3: #{$color-orange-3};
150
- --rp-color-orange-4: #{$color-orange-4};
151
- --rp-color-orange-5: #{$color-orange-5};
152
- --rp-color-orange-6: #{$color-orange-6};
153
- --rp-color-orange-7: #{$color-orange-7};
154
- --rp-color-orange-8: #{$color-orange-8};
155
- --rp-color-orange-9: #{$color-orange-9};
156
-
157
- // Derived colors
158
- --rp-primary-color-0 : var(--rp-color-blue-0);
159
- --rp-primary-color-1 : var(--rp-color-blue-1);
160
- --rp-primary-color-2 : var(--rp-color-blue-2);
161
- --rp-primary-color-3 : var(--rp-color-blue-3);
162
- --rp-primary-color-4 : var(--rp-color-blue-4);
163
- --rp-primary-color-5 : var(--rp-color-blue-5);
164
- --rp-primary-color-6 : var(--rp-color-blue-6);
165
- --rp-primary-color-7 : var(--rp-color-blue-7);
166
- --rp-primary-color-8 : var(--rp-color-blue-8);
167
- --rp-primary-color-9 : var(--rp-color-blue-9);
168
- --rp-primary-color-filled : var(--rp-color-blue-filled);
169
- --rp-primary-color-filled-hover : var(--rp-color-blue-filled-hover);
170
- --rp-primary-color-contrast : var(--rp-color-blue-contrast);
171
- --rp-primary-color-light : var(--rp-color-blue-light);
172
- --rp-primary-color-light-hover : var(--rp-color-blue-light-hover);
173
- --rp-primary-color-light-color : var(--rp-color-blue-light-color);
174
- --rp-primary-color-outline : var(--rp-color-blue-outline);
175
- --rp-primary-color-outline-hover : var(--rp-color-blue-outline-hover);
176
- --rp-color-dark-0-contrast : var(--rp-color-black);
177
- --rp-color-dark-0-active-contrast : var(--rp-color-black);
178
- --rp-color-dark-1-contrast : var(--rp-color-black);
179
- --rp-color-dark-1-active-contrast : var(--rp-color-black);
180
- --rp-color-dark-2-contrast : var(--rp-color-black);
181
- --rp-color-dark-2-active-contrast : var(--rp-color-white);
182
- --rp-color-dark-3-contrast : var(--rp-color-white);
183
- --rp-color-dark-3-active-contrast : var(--rp-color-white);
184
- --rp-color-dark-4-contrast : var(--rp-color-white);
185
- --rp-color-dark-4-active-contrast : var(--rp-color-white);
186
- --rp-color-dark-5-contrast : var(--rp-color-white);
187
- --rp-color-dark-5-active-contrast : var(--rp-color-white);
188
- --rp-color-dark-6-contrast : var(--rp-color-white);
189
- --rp-color-dark-6-active-contrast : var(--rp-color-white);
190
- --rp-color-dark-7-contrast : var(--rp-color-white);
191
- --rp-color-dark-7-active-contrast : var(--rp-color-white);
192
- --rp-color-dark-8-contrast : var(--rp-color-white);
193
- --rp-color-dark-8-active-contrast : var(--rp-color-white);
194
- --rp-color-dark-9-contrast : var(--rp-color-white);
195
- --rp-color-dark-9-active-contrast : var(--rp-color-white);
196
- --rp-color-gray-0-contrast : var(--rp-color-black);
197
- --rp-color-gray-0-active-contrast : var(--rp-color-black);
198
- --rp-color-gray-1-contrast : var(--rp-color-black);
199
- --rp-color-gray-1-active-contrast : var(--rp-color-black);
200
- --rp-color-gray-2-contrast : var(--rp-color-black);
201
- --rp-color-gray-2-active-contrast : var(--rp-color-black);
202
- --rp-color-gray-3-contrast : var(--rp-color-black);
203
- --rp-color-gray-3-active-contrast : var(--rp-color-black);
204
- --rp-color-gray-4-contrast : var(--rp-color-black);
205
- --rp-color-gray-4-active-contrast : var(--rp-color-black);
206
- --rp-color-gray-5-contrast : var(--rp-color-black);
207
- --rp-color-gray-5-active-contrast : var(--rp-color-black);
208
- --rp-color-gray-6-contrast : var(--rp-color-black);
209
- --rp-color-gray-6-active-contrast : var(--rp-color-white);
210
- --rp-color-gray-7-contrast : var(--rp-color-white);
211
- --rp-color-gray-7-active-contrast : var(--rp-color-white);
212
- --rp-color-gray-8-contrast : var(--rp-color-white);
213
- --rp-color-gray-8-active-contrast : var(--rp-color-white);
214
- --rp-color-gray-9-contrast : var(--rp-color-white);
215
- --rp-color-gray-9-active-contrast : var(--rp-color-white);
216
- --rp-color-red-0-contrast : var(--rp-color-black);
217
- --rp-color-red-0-active-contrast : var(--rp-color-black);
218
- --rp-color-red-1-contrast : var(--rp-color-black);
219
- --rp-color-red-1-active-contrast : var(--rp-color-black);
220
- --rp-color-red-2-contrast : var(--rp-color-black);
221
- --rp-color-red-2-active-contrast : var(--rp-color-black);
222
- --rp-color-red-3-contrast : var(--rp-color-black);
223
- --rp-color-red-3-active-contrast : var(--rp-color-black);
224
- --rp-color-red-4-contrast : var(--rp-color-black);
225
- --rp-color-red-4-active-contrast : var(--rp-color-black);
226
- --rp-color-red-5-contrast : var(--rp-color-black);
227
- --rp-color-red-5-active-contrast : var(--rp-color-black);
228
- --rp-color-red-6-contrast : var(--rp-color-black);
229
- --rp-color-red-6-active-contrast : var(--rp-color-white);
230
- --rp-color-red-7-contrast : var(--rp-color-black);
231
- --rp-color-red-7-active-contrast : var(--rp-color-white);
232
- --rp-color-red-8-contrast : var(--rp-color-black);
233
- --rp-color-red-8-active-contrast : var(--rp-color-white);
234
- --rp-color-red-9-contrast : var(--rp-color-white);
235
- --rp-color-red-9-active-contrast : var(--rp-color-white);
236
- --rp-color-pink-0-contrast : var(--rp-color-black);
237
- --rp-color-pink-0-active-contrast : var(--rp-color-black);
238
- --rp-color-pink-1-contrast : var(--rp-color-black);
239
- --rp-color-pink-1-active-contrast : var(--rp-color-black);
240
- --rp-color-pink-2-contrast : var(--rp-color-black);
241
- --rp-color-pink-2-active-contrast : var(--rp-color-black);
242
- --rp-color-pink-3-contrast : var(--rp-color-black);
243
- --rp-color-pink-3-active-contrast : var(--rp-color-black);
244
- --rp-color-pink-4-contrast : var(--rp-color-black);
245
- --rp-color-pink-4-active-contrast : var(--rp-color-black);
246
- --rp-color-pink-5-contrast : var(--rp-color-black);
247
- --rp-color-pink-5-active-contrast : var(--rp-color-black);
248
- --rp-color-pink-6-contrast : var(--rp-color-black);
249
- --rp-color-pink-6-active-contrast : var(--rp-color-white);
250
- --rp-color-pink-7-contrast : var(--rp-color-white);
251
- --rp-color-pink-7-active-contrast : var(--rp-color-white);
252
- --rp-color-pink-8-contrast : var(--rp-color-white);
253
- --rp-color-pink-8-active-contrast : var(--rp-color-white);
254
- --rp-color-pink-9-contrast : var(--rp-color-white);
255
- --rp-color-pink-9-active-contrast : var(--rp-color-white);
256
- --rp-color-grape-0-contrast : var(--rp-color-black);
257
- --rp-color-grape-0-active-contrast : var(--rp-color-black);
258
- --rp-color-grape-1-contrast : var(--rp-color-black);
259
- --rp-color-grape-1-active-contrast : var(--rp-color-black);
260
- --rp-color-grape-2-contrast : var(--rp-color-black);
261
- --rp-color-grape-2-active-contrast : var(--rp-color-black);
262
- --rp-color-grape-3-contrast : var(--rp-color-black);
263
- --rp-color-grape-3-active-contrast : var(--rp-color-black);
264
- --rp-color-grape-4-contrast : var(--rp-color-black);
265
- --rp-color-grape-4-active-contrast : var(--rp-color-black);
266
- --rp-color-grape-5-contrast : var(--rp-color-black);
267
- --rp-color-grape-5-active-contrast : var(--rp-color-white);
268
- --rp-color-grape-6-contrast : var(--rp-color-black);
269
- --rp-color-grape-6-active-contrast : var(--rp-color-white);
270
- --rp-color-grape-7-contrast : var(--rp-color-white);
271
- --rp-color-grape-7-active-contrast : var(--rp-color-white);
272
- --rp-color-grape-8-contrast : var(--rp-color-white);
273
- --rp-color-grape-8-active-contrast : var(--rp-color-white);
274
- --rp-color-grape-9-contrast : var(--rp-color-white);
275
- --rp-color-grape-9-active-contrast : var(--rp-color-white);
276
- --rp-color-violet-0-contrast : var(--rp-color-black);
277
- --rp-color-violet-0-active-contrast: var(--rp-color-black);
278
- --rp-color-violet-1-contrast : var(--rp-color-black);
279
- --rp-color-violet-1-active-contrast: var(--rp-color-black);
280
- --rp-color-violet-2-contrast : var(--rp-color-black);
281
- --rp-color-violet-2-active-contrast: var(--rp-color-black);
282
- --rp-color-violet-3-contrast : var(--rp-color-black);
283
- --rp-color-violet-3-active-contrast: var(--rp-color-black);
284
- --rp-color-violet-4-contrast : var(--rp-color-black);
285
- --rp-color-violet-4-active-contrast: var(--rp-color-white);
286
- --rp-color-violet-5-contrast : var(--rp-color-black);
287
- --rp-color-violet-5-active-contrast: var(--rp-color-white);
288
- --rp-color-violet-6-contrast : var(--rp-color-white);
289
- --rp-color-violet-6-active-contrast: var(--rp-color-white);
290
- --rp-color-violet-7-contrast : var(--rp-color-white);
291
- --rp-color-violet-7-active-contrast: var(--rp-color-white);
292
- --rp-color-violet-8-contrast : var(--rp-color-white);
293
- --rp-color-violet-8-active-contrast: var(--rp-color-white);
294
- --rp-color-violet-9-contrast : var(--rp-color-white);
295
- --rp-color-violet-9-active-contrast: var(--rp-color-white);
296
- --rp-color-indigo-0-contrast : var(--rp-color-black);
297
- --rp-color-indigo-0-active-contrast: var(--rp-color-black);
298
- --rp-color-indigo-1-contrast : var(--rp-color-black);
299
- --rp-color-indigo-1-active-contrast: var(--rp-color-black);
300
- --rp-color-indigo-2-contrast : var(--rp-color-black);
301
- --rp-color-indigo-2-active-contrast: var(--rp-color-black);
302
- --rp-color-indigo-3-contrast : var(--rp-color-black);
303
- --rp-color-indigo-3-active-contrast: var(--rp-color-black);
304
- --rp-color-indigo-4-contrast : var(--rp-color-black);
305
- --rp-color-indigo-4-active-contrast: var(--rp-color-black);
306
- --rp-color-indigo-5-contrast : var(--rp-color-black);
307
- --rp-color-indigo-5-active-contrast: var(--rp-color-white);
308
- --rp-color-indigo-6-contrast : var(--rp-color-black);
309
- --rp-color-indigo-6-active-contrast: var(--rp-color-white);
310
- --rp-color-indigo-7-contrast : var(--rp-color-white);
311
- --rp-color-indigo-7-active-contrast: var(--rp-color-white);
312
- --rp-color-indigo-8-contrast : var(--rp-color-white);
313
- --rp-color-indigo-8-active-contrast: var(--rp-color-white);
314
- --rp-color-indigo-9-contrast : var(--rp-color-white);
315
- --rp-color-indigo-9-active-contrast: var(--rp-color-white);
316
- --rp-color-blue-0-contrast : var(--rp-color-black);
317
- --rp-color-blue-0-active-contrast : var(--rp-color-black);
318
- --rp-color-blue-1-contrast : var(--rp-color-black);
319
- --rp-color-blue-1-active-contrast : var(--rp-color-black);
320
- --rp-color-blue-2-contrast : var(--rp-color-black);
321
- --rp-color-blue-2-active-contrast : var(--rp-color-black);
322
- --rp-color-blue-3-contrast : var(--rp-color-black);
323
- --rp-color-blue-3-active-contrast : var(--rp-color-black);
324
- --rp-color-blue-4-contrast : var(--rp-color-black);
325
- --rp-color-blue-4-active-contrast : var(--rp-color-black);
326
- --rp-color-blue-5-contrast : var(--rp-color-black);
327
- --rp-color-blue-5-active-contrast : var(--rp-color-black);
328
- --rp-color-blue-6-contrast : var(--rp-color-black);
329
- --rp-color-blue-6-active-contrast : var(--rp-color-white);
330
- --rp-color-blue-7-contrast : var(--rp-color-black);
331
- --rp-color-blue-7-active-contrast : var(--rp-color-white);
332
- --rp-color-blue-8-contrast : var(--rp-color-white);
333
- --rp-color-blue-8-active-contrast : var(--rp-color-white);
334
- --rp-color-blue-9-contrast : var(--rp-color-white);
335
- --rp-color-blue-9-active-contrast : var(--rp-color-white);
336
- --rp-color-cyan-0-contrast : var(--rp-color-black);
337
- --rp-color-cyan-0-active-contrast : var(--rp-color-black);
338
- --rp-color-cyan-1-contrast : var(--rp-color-black);
339
- --rp-color-cyan-1-active-contrast : var(--rp-color-black);
340
- --rp-color-cyan-2-contrast : var(--rp-color-black);
341
- --rp-color-cyan-2-active-contrast : var(--rp-color-black);
342
- --rp-color-cyan-3-contrast : var(--rp-color-black);
343
- --rp-color-cyan-3-active-contrast : var(--rp-color-black);
344
- --rp-color-cyan-4-contrast : var(--rp-color-black);
345
- --rp-color-cyan-4-active-contrast : var(--rp-color-black);
346
- --rp-color-cyan-5-contrast : var(--rp-color-black);
347
- --rp-color-cyan-5-active-contrast : var(--rp-color-black);
348
- --rp-color-cyan-6-contrast : var(--rp-color-black);
349
- --rp-color-cyan-6-active-contrast : var(--rp-color-black);
350
- --rp-color-cyan-7-contrast : var(--rp-color-black);
351
- --rp-color-cyan-7-active-contrast : var(--rp-color-white);
352
- --rp-color-cyan-8-contrast : var(--rp-color-black);
353
- --rp-color-cyan-8-active-contrast : var(--rp-color-white);
354
- --rp-color-cyan-9-contrast : var(--rp-color-white);
355
- --rp-color-cyan-9-active-contrast : var(--rp-color-white);
356
- --rp-color-teal-0-contrast : var(--rp-color-black);
357
- --rp-color-teal-0-active-contrast : var(--rp-color-black);
358
- --rp-color-teal-1-contrast : var(--rp-color-black);
359
- --rp-color-teal-1-active-contrast : var(--rp-color-black);
360
- --rp-color-teal-2-contrast : var(--rp-color-black);
361
- --rp-color-teal-2-active-contrast : var(--rp-color-black);
362
- --rp-color-teal-3-contrast : var(--rp-color-black);
363
- --rp-color-teal-3-active-contrast : var(--rp-color-black);
364
- --rp-color-teal-4-contrast : var(--rp-color-black);
365
- --rp-color-teal-4-active-contrast : var(--rp-color-black);
366
- --rp-color-teal-5-contrast : var(--rp-color-black);
367
- --rp-color-teal-5-active-contrast : var(--rp-color-black);
368
- --rp-color-teal-6-contrast : var(--rp-color-black);
369
- --rp-color-teal-6-active-contrast : var(--rp-color-black);
370
- --rp-color-teal-7-contrast : var(--rp-color-black);
371
- --rp-color-teal-7-active-contrast : var(--rp-color-white);
372
- --rp-color-teal-8-contrast : var(--rp-color-black);
373
- --rp-color-teal-8-active-contrast : var(--rp-color-white);
374
- --rp-color-teal-9-contrast : var(--rp-color-white);
375
- --rp-color-teal-9-active-contrast : var(--rp-color-white);
376
- --rp-color-green-0-contrast : var(--rp-color-black);
377
- --rp-color-green-0-active-contrast : var(--rp-color-black);
378
- --rp-color-green-1-contrast : var(--rp-color-black);
379
- --rp-color-green-1-active-contrast : var(--rp-color-black);
380
- --rp-color-green-2-contrast : var(--rp-color-black);
381
- --rp-color-green-2-active-contrast : var(--rp-color-black);
382
- --rp-color-green-3-contrast : var(--rp-color-black);
383
- --rp-color-green-3-active-contrast : var(--rp-color-black);
384
- --rp-color-green-4-contrast : var(--rp-color-black);
385
- --rp-color-green-4-active-contrast : var(--rp-color-black);
386
- --rp-color-green-5-contrast : var(--rp-color-black);
387
- --rp-color-green-5-active-contrast : var(--rp-color-black);
388
- --rp-color-green-6-contrast : var(--rp-color-black);
389
- --rp-color-green-6-active-contrast : var(--rp-color-black);
390
- --rp-color-green-7-contrast : var(--rp-color-black);
391
- --rp-color-green-7-active-contrast : var(--rp-color-black);
392
- --rp-color-green-8-contrast : var(--rp-color-black);
393
- --rp-color-green-8-active-contrast : var(--rp-color-white);
394
- --rp-color-green-9-contrast : var(--rp-color-black);
395
- --rp-color-green-9-active-contrast : var(--rp-color-white);
396
- --rp-color-lime-0-contrast : var(--rp-color-black);
397
- --rp-color-lime-0-active-contrast : var(--rp-color-black);
398
- --rp-color-lime-1-contrast : var(--rp-color-black);
399
- --rp-color-lime-1-active-contrast : var(--rp-color-black);
400
- --rp-color-lime-2-contrast : var(--rp-color-black);
401
- --rp-color-lime-2-active-contrast : var(--rp-color-black);
402
- --rp-color-lime-3-contrast : var(--rp-color-black);
403
- --rp-color-lime-3-active-contrast : var(--rp-color-black);
404
- --rp-color-lime-4-contrast : var(--rp-color-black);
405
- --rp-color-lime-4-active-contrast : var(--rp-color-black);
406
- --rp-color-lime-5-contrast : var(--rp-color-black);
407
- --rp-color-lime-5-active-contrast : var(--rp-color-black);
408
- --rp-color-lime-6-contrast : var(--rp-color-black);
409
- --rp-color-lime-6-active-contrast : var(--rp-color-black);
410
- --rp-color-lime-7-contrast : var(--rp-color-black);
411
- --rp-color-lime-7-active-contrast : var(--rp-color-black);
412
- --rp-color-lime-8-contrast : var(--rp-color-black);
413
- --rp-color-lime-8-active-contrast : var(--rp-color-black);
414
- --rp-color-lime-9-contrast : var(--rp-color-black);
415
- --rp-color-lime-9-active-contrast : var(--rp-color-white);
416
- --rp-color-yellow-0-contrast : var(--rp-color-black);
417
- --rp-color-yellow-0-active-contrast: var(--rp-color-black);
418
- --rp-color-yellow-1-contrast : var(--rp-color-black);
419
- --rp-color-yellow-1-active-contrast: var(--rp-color-black);
420
- --rp-color-yellow-2-contrast : var(--rp-color-black);
421
- --rp-color-yellow-2-active-contrast: var(--rp-color-black);
422
- --rp-color-yellow-3-contrast : var(--rp-color-black);
423
- --rp-color-yellow-3-active-contrast: var(--rp-color-black);
424
- --rp-color-yellow-4-contrast : var(--rp-color-black);
425
- --rp-color-yellow-4-active-contrast: var(--rp-color-black);
426
- --rp-color-yellow-5-contrast : var(--rp-color-black);
427
- --rp-color-yellow-5-active-contrast: var(--rp-color-black);
428
- --rp-color-yellow-6-contrast : var(--rp-color-black);
429
- --rp-color-yellow-6-active-contrast: var(--rp-color-black);
430
- --rp-color-yellow-7-contrast : var(--rp-color-black);
431
- --rp-color-yellow-7-active-contrast: var(--rp-color-black);
432
- --rp-color-yellow-8-contrast : var(--rp-color-black);
433
- --rp-color-yellow-8-active-contrast: var(--rp-color-black);
434
- --rp-color-yellow-9-contrast : var(--rp-color-black);
435
- --rp-color-yellow-9-active-contrast: var(--rp-color-black);
436
- --rp-color-orange-0-contrast : var(--rp-color-black);
437
- --rp-color-orange-0-active-contrast: var(--rp-color-black);
438
- --rp-color-orange-1-contrast : var(--rp-color-black);
439
- --rp-color-orange-1-active-contrast: var(--rp-color-black);
440
- --rp-color-orange-2-contrast : var(--rp-color-black);
441
- --rp-color-orange-2-active-contrast: var(--rp-color-black);
442
- --rp-color-orange-3-contrast : var(--rp-color-black);
443
- --rp-color-orange-3-active-contrast: var(--rp-color-black);
444
- --rp-color-orange-4-contrast : var(--rp-color-black);
445
- --rp-color-orange-4-active-contrast: var(--rp-color-black);
446
- --rp-color-orange-5-contrast : var(--rp-color-black);
447
- --rp-color-orange-5-active-contrast: var(--rp-color-black);
448
- --rp-color-orange-6-contrast : var(--rp-color-black);
449
- --rp-color-orange-6-active-contrast: var(--rp-color-black);
450
- --rp-color-orange-7-contrast : var(--rp-color-black);
451
- --rp-color-orange-7-active-contrast: var(--rp-color-black);
452
- --rp-color-orange-8-contrast : var(--rp-color-black);
453
- --rp-color-orange-8-active-contrast: var(--rp-color-white);
454
- --rp-color-orange-9-contrast : var(--rp-color-black);
455
- --rp-color-orange-9-active-contrast: var(--rp-color-white);
456
- --rp-color-dark-filled : var(--rp-color-dark-6);
457
- --rp-color-dark-filled-hover : var(--rp-color-dark-7);
458
- --rp-color-dark-contrast : var(--rp-color-white);
459
- --rp-color-dark-light : var(--rp-color-dark-1);
460
- --rp-color-dark-light-hover : var(--rp-color-dark-2);
461
- --rp-color-dark-light-color : var(--rp-color-dark-9);
462
- --rp-color-dark-outline : var(--rp-color-dark-6);
463
- --rp-color-dark-outline-hover : color-mix(in srgb, var(--rp-color-dark-6) 5%, transparent);
464
- --rp-color-gray-filled : var(--rp-color-gray-7);
465
- --rp-color-gray-filled-hover : var(--rp-color-gray-8);
466
- --rp-color-gray-contrast : var(--rp-color-white);
467
- --rp-color-gray-light : var(--rp-color-gray-1);
468
- --rp-color-gray-light-hover : var(--rp-color-gray-2);
469
- --rp-color-gray-light-color : var(--rp-color-gray-9);
470
- --rp-color-gray-outline : var(--rp-color-gray-6);
471
- --rp-color-gray-outline-hover : color-mix(in srgb, var(--rp-color-gray-6) 5%, transparent);
472
- --rp-color-red-filled : var(--rp-color-red-8);
473
- --rp-color-red-filled-hover : var(--rp-color-red-9);
474
- --rp-color-red-contrast : var(--rp-color-white);
475
- --rp-color-red-light : var(--rp-color-red-1);
476
- --rp-color-red-light-hover : var(--rp-color-red-2);
477
- --rp-color-red-light-color : color-mix(in srgb, var(--rp-color-red-9) 89%, var(--rp-color-black));
478
- --rp-color-red-outline : var(--rp-color-red-6);
479
- --rp-color-red-outline-hover : color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
480
- --rp-color-pink-filled : var(--rp-color-pink-7);
481
- --rp-color-pink-filled-hover : var(--rp-color-pink-8);
482
- --rp-color-pink-contrast : var(--rp-color-white);
483
- --rp-color-pink-light : var(--rp-color-pink-1);
484
- --rp-color-pink-light-hover : var(--rp-color-pink-2);
485
- --rp-color-pink-light-color : var(--rp-color-pink-9);
486
- --rp-color-pink-outline : var(--rp-color-pink-6);
487
- --rp-color-pink-outline-hover : color-mix(in srgb, var(--rp-color-pink-6) 5%, transparent);
488
- --rp-color-grape-filled : var(--rp-color-grape-7);
489
- --rp-color-grape-filled-hover : var(--rp-color-grape-8);
490
- --rp-color-grape-contrast : var(--rp-color-white);
491
- --rp-color-grape-light : var(--rp-color-grape-1);
492
- --rp-color-grape-light-hover : var(--rp-color-grape-2);
493
- --rp-color-grape-light-color : var(--rp-color-grape-9);
494
- --rp-color-grape-outline : var(--rp-color-grape-6);
495
- --rp-color-grape-outline-hover : color-mix(in srgb, var(--rp-color-grape-6) 5%, transparent);
496
- --rp-color-violet-filled : var(--rp-color-violet-6);
497
- --rp-color-violet-filled-hover : var(--rp-color-violet-7);
498
- --rp-color-violet-contrast : var(--rp-color-white);
499
- --rp-color-violet-light : var(--rp-color-violet-1);
500
- --rp-color-violet-light-hover : var(--rp-color-violet-2);
501
- --rp-color-violet-light-color : color-mix(in srgb, var(--rp-color-violet-9) 96%, var(--rp-color-black));
502
- --rp-color-violet-outline : var(--rp-color-violet-6);
503
- --rp-color-violet-outline-hover : color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
504
- --rp-color-indigo-filled : var(--rp-color-indigo-7);
505
- --rp-color-indigo-filled-hover : var(--rp-color-indigo-8);
506
- --rp-color-indigo-contrast : var(--rp-color-white);
507
- --rp-color-indigo-light : var(--rp-color-indigo-1);
508
- --rp-color-indigo-light-hover : var(--rp-color-indigo-2);
509
- --rp-color-indigo-light-color : color-mix(in srgb, var(--rp-color-indigo-9) 93%, var(--rp-color-black));
510
- --rp-color-indigo-outline : var(--rp-color-indigo-6);
511
- --rp-color-indigo-outline-hover : color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
512
- --rp-color-blue-filled : var(--rp-color-blue-8);
513
- --rp-color-blue-filled-hover : var(--rp-color-blue-9);
514
- --rp-color-blue-contrast : var(--rp-color-white);
515
- --rp-color-blue-light : var(--rp-color-blue-1);
516
- --rp-color-blue-light-hover : var(--rp-color-blue-2);
517
- --rp-color-blue-light-color : color-mix(in srgb, var(--rp-color-blue-9) 92%, var(--rp-color-black));
518
- --rp-color-blue-outline : var(--rp-color-blue-6);
519
- --rp-color-blue-outline-hover : color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
520
- --rp-color-cyan-filled : var(--rp-color-cyan-9);
521
- --rp-color-cyan-filled-hover : color-mix(in srgb, var(--rp-color-cyan-9) 90%, var(--rp-color-black));
522
- --rp-color-cyan-contrast : var(--rp-color-white);
523
- --rp-color-cyan-light : var(--rp-color-cyan-1);
524
- --rp-color-cyan-light-hover : var(--rp-color-cyan-2);
525
- --rp-color-cyan-light-color : color-mix(in srgb, var(--rp-color-cyan-9) 93%, var(--rp-color-black));
526
- --rp-color-cyan-outline : var(--rp-color-cyan-6);
527
- --rp-color-cyan-outline-hover : color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
528
- --rp-color-teal-filled : var(--rp-color-teal-9);
529
- --rp-color-teal-filled-hover : color-mix(in srgb, var(--rp-color-teal-9) 90%, var(--rp-color-black));
530
- --rp-color-teal-contrast : var(--rp-color-white);
531
- --rp-color-teal-light : var(--rp-color-teal-1);
532
- --rp-color-teal-light-hover : var(--rp-color-teal-2);
533
- --rp-color-teal-light-color : color-mix(in srgb, var(--rp-color-teal-9) 89%, var(--rp-color-black));
534
- --rp-color-teal-outline : var(--rp-color-teal-6);
535
- --rp-color-teal-outline-hover : color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
536
- --rp-color-green-filled : color-mix(in srgb, var(--rp-color-green-9) 98%, var(--rp-color-black));
537
- --rp-color-green-filled-hover : color-mix(in srgb, var(--rp-color-green-9) 88%, var(--rp-color-black));
538
- --rp-color-green-contrast : var(--rp-color-white);
539
- --rp-color-green-light : var(--rp-color-green-1);
540
- --rp-color-green-light-hover : var(--rp-color-green-2);
541
- --rp-color-green-light-color : color-mix(in srgb, var(--rp-color-green-9) 84%, var(--rp-color-black));
542
- --rp-color-green-outline : var(--rp-color-green-6);
543
- --rp-color-green-outline-hover : color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
544
- --rp-color-lime-filled : var(--rp-color-lime-6);
545
- --rp-color-lime-filled-hover : var(--rp-color-lime-7);
546
- --rp-color-lime-contrast : var(--rp-color-lime-6-contrast);
547
- --rp-color-lime-light : var(--rp-color-lime-1);
548
- --rp-color-lime-light-hover : var(--rp-color-lime-2);
549
- --rp-color-lime-light-color : color-mix(in srgb, var(--rp-color-lime-9) 79%, var(--rp-color-black));
550
- --rp-color-lime-outline : var(--rp-color-lime-6);
551
- --rp-color-lime-outline-hover : color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
552
- --rp-color-yellow-filled : var(--rp-color-yellow-6);
553
- --rp-color-yellow-filled-hover : var(--rp-color-yellow-7);
554
- --rp-color-yellow-contrast : var(--rp-color-yellow-6-contrast);
555
- --rp-color-yellow-light : var(--rp-color-yellow-1);
556
- --rp-color-yellow-light-hover : var(--rp-color-yellow-2);
557
- --rp-color-yellow-light-color : color-mix(in srgb, var(--rp-color-yellow-9) 72%, var(--rp-color-black));
558
- --rp-color-yellow-outline : var(--rp-color-yellow-6);
559
- --rp-color-yellow-outline-hover : color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
560
- --rp-color-orange-filled : color-mix(in srgb, var(--rp-color-orange-9) 97%, var(--rp-color-black));
561
- --rp-color-orange-filled-hover : color-mix(in srgb, var(--rp-color-orange-9) 87%, var(--rp-color-black));
562
- --rp-color-orange-contrast : var(--rp-color-white);
563
- --rp-color-orange-light : var(--rp-color-orange-1);
564
- --rp-color-orange-light-hover : var(--rp-color-orange-2);
565
- --rp-color-orange-light-color : color-mix(in srgb, var(--rp-color-orange-9) 81%, var(--rp-color-black));
566
- --rp-color-orange-outline : var(--rp-color-orange-6);
567
- --rp-color-orange-outline-hover : color-mix(in srgb, var(--rp-color-orange-6) 5%, transparent);
568
- --rp-color-scheme : light;
569
- --rp-color-bright : var(--rp-color-black);
570
- --rp-color-text : var(--rp-color-black);
571
- --rp-color-body : var(--rp-color-white);
572
- --rp-color-placeholder : var(--rp-color-gray-7);
573
- --rp-color-default : var(--rp-color-white);
574
- --rp-color-default-hover : var(--rp-color-gray-1);
575
- --rp-color-default-color : var(--rp-color-black);
576
- --rp-color-default-border : var(--rp-color-gray-4);
577
- --rp-color-default-border-hover : var(--rp-color-gray-5);
578
- --rp-color-dimmed : var(--rp-color-gray-7);
579
- --rp-color-disabled : var(--rp-color-gray-2);
580
- --rp-color-disabled-color : var(--rp-color-gray-5);
581
- --rp-color-disabled-border : var(--rp-color-gray-3);
582
- --rp-color-focus-ring : color-mix(in srgb, var(--rp-primary-color-filled) 32%, transparent);
583
- --rp-color-control-bg : var(--rp-color-default);
584
- --rp-color-control-readonly-bg : var(--rp-color-default-hover);
585
- --rp-color-control-fg : var(--rp-color-default-color);
586
- --rp-color-control-placeholder : var(--rp-color-placeholder);
587
- --rp-color-control-icon : var(--rp-color-dimmed);
588
- --rp-color-control-border : var(--rp-color-default-border);
589
- --rp-color-control-border-hover : var(--rp-color-default-border-hover);
590
- --rp-color-control-border-focus : var(--rp-primary-color-filled);
591
- --rp-color-control-track-bg : var(--rp-color-disabled-border);
592
- --rp-color-control-thumb-bg : var(--rp-color-white);
593
- --rp-color-control-selected-bg : var(--rp-primary-color-filled);
594
- --rp-color-control-selected-fg : var(--rp-primary-color-contrast);
595
-
596
- // Font sizes
597
- --rp-font-size-xs: #{$font-size-xs};
598
- --rp-font-size-sm: #{$font-size-sm};
599
- --rp-font-size-md: #{$font-size-md};
600
- --rp-font-size-lg: #{$font-size-lg};
601
- --rp-font-size-xl: #{$font-size-xl};
602
-
603
- // Font weights
604
- --rp-font-weight-normal : #{$font-weight-normal};
605
- --rp-font-weight-medium : #{$font-weight-medium};
606
- --rp-font-weight-semibold: #{$font-weight-semibold};
607
- --rp-font-weight-bold : #{$font-weight-bold};
608
-
609
- // Headings
610
- --rp-h1-font-size : #{$heading-h1-font-size};
611
- --rp-h1-line-height: #{$heading-h1-line-height};
612
- --rp-h1-font-weight: #{$heading-h1-font-weight};
613
- --rp-h2-font-size : #{$heading-h2-font-size};
614
- --rp-h2-line-height: #{$heading-h2-line-height};
615
- --rp-h2-font-weight: #{$heading-h2-font-weight};
616
- --rp-h3-font-size : #{$heading-h3-font-size};
617
- --rp-h3-line-height: #{$heading-h3-line-height};
618
- --rp-h3-font-weight: #{$heading-h3-font-weight};
619
- --rp-h4-font-size : #{$heading-h4-font-size};
620
- --rp-h4-line-height: #{$heading-h4-line-height};
621
- --rp-h4-font-weight: #{$heading-h4-font-weight};
622
- --rp-h5-font-size : #{$heading-h5-font-size};
623
- --rp-h5-line-height: #{$heading-h5-line-height};
624
- --rp-h5-font-weight: #{$heading-h5-font-weight};
625
- --rp-h6-font-size : #{$heading-h6-font-size};
626
- --rp-h6-line-height: #{$heading-h6-line-height};
627
- --rp-h6-font-weight: #{$heading-h6-font-weight};
628
-
629
- // Line heights
630
- --rp-line-height-xs: #{$line-height-xs};
631
- --rp-line-height-sm: #{$line-height-sm};
632
- --rp-line-height-md: #{$line-height-md};
633
- --rp-line-height-lg: #{$line-height-lg};
634
- --rp-line-height-xl: #{$line-height-xl};
635
-
636
- // Spacing
637
- --rp-spacing-0 : #{$spacing-0};
638
- --rp-spacing-1 : #{$spacing-1};
639
- --rp-spacing-2 : #{$spacing-2};
640
- --rp-spacing-3 : #{$spacing-3};
641
- --rp-spacing-4 : #{$spacing-4};
642
- --rp-spacing-5 : #{$spacing-5};
643
- --rp-spacing-6 : #{$spacing-6};
644
- --rp-spacing-8 : #{$spacing-8};
645
- --rp-spacing-10: #{$spacing-10};
646
- --rp-spacing-12: #{$spacing-12};
647
-
648
- // Border radius
649
- --rp-radius-none: #{$radius-none};
650
- --rp-radius-xs : #{$radius-xs};
651
- --rp-radius-sm : #{$radius-sm};
652
- --rp-radius-md : #{$radius-md};
653
- --rp-radius-lg : #{$radius-lg};
654
- --rp-radius-xl : #{$radius-xl};
655
- --rp-radius-full: #{$radius-full};
656
-
657
- // Border widths
658
- --rp-border-width-thin : #{$border-width-thin};
659
- --rp-border-width-medium: #{$border-width-medium};
660
-
661
- // Control sizes
662
- --rp-size-control-xs: #{$size-control-xs};
663
- --rp-size-control-sm: #{$size-control-sm};
664
- --rp-size-control-md: #{$size-control-md};
665
- --rp-size-control-lg: #{$size-control-lg};
666
- --rp-size-control-xl: #{$size-control-xl};
667
-
668
- // Opacity
669
- --rp-opacity-disabled: #{$opacity-disabled};
670
-
671
- // Shadows
672
- --rp-shadow-sm : #{$shadow-sm};
673
- --rp-shadow-base: #{$shadow-base};
674
- --rp-shadow-md : #{$shadow-md};
675
- --rp-shadow-lg : #{$shadow-lg};
676
-
677
- // Transitions
678
- --rp-transition-fast: #{$transition-fast};
679
- --rp-transition-base: #{$transition-base};
680
- --rp-transition-slow: #{$transition-slow};
681
-
682
- }
683
-
684
- html.dark,
685
- [data-rp-color-scheme="dark"] {
686
- // Derived colors
687
- --rp-color-dark-filled : var(--rp-color-dark-8);
688
- --rp-color-dark-filled-hover : var(--rp-color-dark-9);
689
- --rp-color-dark-contrast : var(--rp-color-white);
690
- --rp-color-dark-light : color-mix(in srgb, var(--rp-color-dark-9) 50%, var(--rp-color-black));
691
- --rp-color-dark-light-hover : color-mix(in srgb, var(--rp-color-dark-9) 70%, var(--rp-color-black));
692
- --rp-color-dark-light-color : var(--rp-color-dark-0);
693
- --rp-color-dark-outline : var(--rp-color-dark-4);
694
- --rp-color-dark-outline-hover : color-mix(in srgb, var(--rp-color-dark-4) 5%, transparent);
695
- --rp-color-gray-filled : var(--rp-color-gray-8);
696
- --rp-color-gray-filled-hover : var(--rp-color-gray-9);
697
- --rp-color-gray-contrast : var(--rp-color-white);
698
- --rp-color-gray-light : color-mix(in srgb, var(--rp-color-gray-9) 50%, var(--rp-color-black));
699
- --rp-color-gray-light-hover : color-mix(in srgb, var(--rp-color-gray-9) 70%, var(--rp-color-black));
700
- --rp-color-gray-light-color : var(--rp-color-gray-0);
701
- --rp-color-gray-outline : var(--rp-color-gray-4);
702
- --rp-color-gray-outline-hover : color-mix(in srgb, var(--rp-color-gray-4) 5%, transparent);
703
- --rp-color-red-filled : var(--rp-color-red-8);
704
- --rp-color-red-filled-hover : var(--rp-color-red-9);
705
- --rp-color-red-contrast : var(--rp-color-white);
706
- --rp-color-red-light : color-mix(in srgb, var(--rp-color-red-9) 50%, var(--rp-color-black));
707
- --rp-color-red-light-hover : color-mix(in srgb, var(--rp-color-red-9) 70%, var(--rp-color-black));
708
- --rp-color-red-light-color : var(--rp-color-red-0);
709
- --rp-color-red-outline : var(--rp-color-red-4);
710
- --rp-color-red-outline-hover : color-mix(in srgb, var(--rp-color-red-4) 5%, transparent);
711
- --rp-color-pink-filled : var(--rp-color-pink-8);
712
- --rp-color-pink-filled-hover : var(--rp-color-pink-9);
713
- --rp-color-pink-contrast : var(--rp-color-white);
714
- --rp-color-pink-light : color-mix(in srgb, var(--rp-color-pink-9) 50%, var(--rp-color-black));
715
- --rp-color-pink-light-hover : color-mix(in srgb, var(--rp-color-pink-9) 70%, var(--rp-color-black));
716
- --rp-color-pink-light-color : var(--rp-color-pink-0);
717
- --rp-color-pink-outline : var(--rp-color-pink-4);
718
- --rp-color-pink-outline-hover : color-mix(in srgb, var(--rp-color-pink-4) 5%, transparent);
719
- --rp-color-grape-filled : var(--rp-color-grape-8);
720
- --rp-color-grape-filled-hover : var(--rp-color-grape-9);
721
- --rp-color-grape-contrast : var(--rp-color-white);
722
- --rp-color-grape-light : color-mix(in srgb, var(--rp-color-grape-9) 50%, var(--rp-color-black));
723
- --rp-color-grape-light-hover : color-mix(in srgb, var(--rp-color-grape-9) 70%, var(--rp-color-black));
724
- --rp-color-grape-light-color : var(--rp-color-grape-0);
725
- --rp-color-grape-outline : var(--rp-color-grape-4);
726
- --rp-color-grape-outline-hover : color-mix(in srgb, var(--rp-color-grape-4) 5%, transparent);
727
- --rp-color-violet-filled : var(--rp-color-violet-8);
728
- --rp-color-violet-filled-hover : var(--rp-color-violet-9);
729
- --rp-color-violet-contrast : var(--rp-color-white);
730
- --rp-color-violet-light : color-mix(in srgb, var(--rp-color-violet-9) 50%, var(--rp-color-black));
731
- --rp-color-violet-light-hover : color-mix(in srgb, var(--rp-color-violet-9) 70%, var(--rp-color-black));
732
- --rp-color-violet-light-color : var(--rp-color-violet-0);
733
- --rp-color-violet-outline : var(--rp-color-violet-4);
734
- --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-4) 5%, transparent);
735
- --rp-color-indigo-filled : var(--rp-color-indigo-8);
736
- --rp-color-indigo-filled-hover : var(--rp-color-indigo-9);
737
- --rp-color-indigo-contrast : var(--rp-color-white);
738
- --rp-color-indigo-light : color-mix(in srgb, var(--rp-color-indigo-9) 50%, var(--rp-color-black));
739
- --rp-color-indigo-light-hover : color-mix(in srgb, var(--rp-color-indigo-9) 70%, var(--rp-color-black));
740
- --rp-color-indigo-light-color : var(--rp-color-indigo-0);
741
- --rp-color-indigo-outline : var(--rp-color-indigo-4);
742
- --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-4) 5%, transparent);
743
- --rp-color-blue-filled : var(--rp-color-blue-8);
744
- --rp-color-blue-filled-hover : var(--rp-color-blue-9);
745
- --rp-color-blue-contrast : var(--rp-color-white);
746
- --rp-color-blue-light : color-mix(in srgb, var(--rp-color-blue-9) 50%, var(--rp-color-black));
747
- --rp-color-blue-light-hover : color-mix(in srgb, var(--rp-color-blue-9) 70%, var(--rp-color-black));
748
- --rp-color-blue-light-color : var(--rp-color-blue-0);
749
- --rp-color-blue-outline : var(--rp-color-blue-4);
750
- --rp-color-blue-outline-hover : color-mix(in srgb, var(--rp-color-blue-4) 5%, transparent);
751
- --rp-color-cyan-filled : var(--rp-color-cyan-9);
752
- --rp-color-cyan-filled-hover : color-mix(in srgb, var(--rp-color-cyan-9) 90%, var(--rp-color-black));
753
- --rp-color-cyan-contrast : var(--rp-color-white);
754
- --rp-color-cyan-light : color-mix(in srgb, var(--rp-color-cyan-9) 50%, var(--rp-color-black));
755
- --rp-color-cyan-light-hover : color-mix(in srgb, var(--rp-color-cyan-9) 70%, var(--rp-color-black));
756
- --rp-color-cyan-light-color : var(--rp-color-cyan-0);
757
- --rp-color-cyan-outline : var(--rp-color-cyan-4);
758
- --rp-color-cyan-outline-hover : color-mix(in srgb, var(--rp-color-cyan-4) 5%, transparent);
759
- --rp-color-teal-filled : var(--rp-color-teal-9);
760
- --rp-color-teal-filled-hover : color-mix(in srgb, var(--rp-color-teal-9) 90%, var(--rp-color-black));
761
- --rp-color-teal-contrast : var(--rp-color-white);
762
- --rp-color-teal-light : color-mix(in srgb, var(--rp-color-teal-9) 50%, var(--rp-color-black));
763
- --rp-color-teal-light-hover : color-mix(in srgb, var(--rp-color-teal-9) 70%, var(--rp-color-black));
764
- --rp-color-teal-light-color : var(--rp-color-teal-0);
765
- --rp-color-teal-outline : var(--rp-color-teal-4);
766
- --rp-color-teal-outline-hover : color-mix(in srgb, var(--rp-color-teal-4) 5%, transparent);
767
- --rp-color-green-filled : color-mix(in srgb, var(--rp-color-green-9) 98%, var(--rp-color-black));
768
- --rp-color-green-filled-hover : color-mix(in srgb, var(--rp-color-green-9) 88%, var(--rp-color-black));
769
- --rp-color-green-contrast : var(--rp-color-white);
770
- --rp-color-green-light : color-mix(in srgb, var(--rp-color-green-9) 50%, var(--rp-color-black));
771
- --rp-color-green-light-hover : color-mix(in srgb, var(--rp-color-green-9) 70%, var(--rp-color-black));
772
- --rp-color-green-light-color : var(--rp-color-green-0);
773
- --rp-color-green-outline : var(--rp-color-green-4);
774
- --rp-color-green-outline-hover : color-mix(in srgb, var(--rp-color-green-4) 5%, transparent);
775
- --rp-color-lime-filled : var(--rp-color-lime-8);
776
- --rp-color-lime-filled-hover : var(--rp-color-lime-9);
777
- --rp-color-lime-contrast : var(--rp-color-lime-8-contrast);
778
- --rp-color-lime-light : color-mix(in srgb, var(--rp-color-lime-9) 50%, var(--rp-color-black));
779
- --rp-color-lime-light-hover : color-mix(in srgb, var(--rp-color-lime-9) 70%, var(--rp-color-black));
780
- --rp-color-lime-light-color : var(--rp-color-lime-0);
781
- --rp-color-lime-outline : var(--rp-color-lime-4);
782
- --rp-color-lime-outline-hover : color-mix(in srgb, var(--rp-color-lime-4) 5%, transparent);
783
- --rp-color-yellow-filled : var(--rp-color-yellow-8);
784
- --rp-color-yellow-filled-hover : var(--rp-color-yellow-9);
785
- --rp-color-yellow-contrast : var(--rp-color-yellow-8-contrast);
786
- --rp-color-yellow-light : color-mix(in srgb, var(--rp-color-yellow-9) 50%, var(--rp-color-black));
787
- --rp-color-yellow-light-hover : color-mix(in srgb, var(--rp-color-yellow-9) 70%, var(--rp-color-black));
788
- --rp-color-yellow-light-color : var(--rp-color-yellow-0);
789
- --rp-color-yellow-outline : var(--rp-color-yellow-4);
790
- --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-4) 5%, transparent);
791
- --rp-color-orange-filled : color-mix(in srgb, var(--rp-color-orange-9) 97%, var(--rp-color-black));
792
- --rp-color-orange-filled-hover : color-mix(in srgb, var(--rp-color-orange-9) 87%, var(--rp-color-black));
793
- --rp-color-orange-contrast : var(--rp-color-white);
794
- --rp-color-orange-light : color-mix(in srgb, var(--rp-color-orange-9) 50%, var(--rp-color-black));
795
- --rp-color-orange-light-hover : color-mix(in srgb, var(--rp-color-orange-9) 70%, var(--rp-color-black));
796
- --rp-color-orange-light-color : var(--rp-color-orange-0);
797
- --rp-color-orange-outline : var(--rp-color-orange-4);
798
- --rp-color-orange-outline-hover: color-mix(in srgb, var(--rp-color-orange-4) 5%, transparent);
799
- --rp-color-scheme : dark;
800
- --rp-color-bright : var(--rp-color-white);
801
- --rp-color-text : var(--rp-color-dark-0);
802
- --rp-color-body : var(--rp-color-dark-7);
803
- --rp-color-placeholder : var(--rp-color-dark-1);
804
- --rp-color-default : var(--rp-color-dark-6);
805
- --rp-color-default-hover : var(--rp-color-dark-5);
806
- --rp-color-default-color : var(--rp-color-white);
807
- --rp-color-default-border : var(--rp-color-dark-4);
808
- --rp-color-default-border-hover: var(--rp-color-dark-3);
809
- --rp-color-dimmed : var(--rp-color-dark-1);
810
- --rp-color-disabled : var(--rp-color-dark-6);
811
- --rp-color-disabled-color : var(--rp-color-dark-3);
812
- --rp-color-disabled-border : var(--rp-color-dark-4);
813
- --rp-color-focus-ring : color-mix(in srgb, var(--rp-primary-color-filled) 45%, transparent);
814
- --rp-color-control-bg : var(--rp-color-default);
815
- --rp-color-control-readonly-bg : var(--rp-color-default-hover);
816
- --rp-color-control-fg : var(--rp-color-default-color);
817
- --rp-color-control-placeholder : var(--rp-color-placeholder);
818
- --rp-color-control-icon : var(--rp-color-dimmed);
819
- --rp-color-control-border : var(--rp-color-default-border);
820
- --rp-color-control-border-hover: var(--rp-color-default-border-hover);
821
- --rp-color-control-border-focus: var(--rp-primary-color-filled);
822
- --rp-color-control-track-bg : var(--rp-color-disabled-border);
823
- --rp-color-control-thumb-bg : var(--rp-color-white);
824
- --rp-color-control-selected-bg : var(--rp-primary-color-filled);
825
- --rp-color-control-selected-fg : var(--rp-primary-color-contrast);
826
-
827
- // Shadows
828
- --rp-shadow-sm : 0 1px 2px 0 rgba(0, 0, 0, 0.3);
829
- --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
830
- --rp-shadow-md : 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
831
- --rp-shadow-lg : 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
832
-
833
- }
834
-
835
- }