ropav 0.0.8 → 0.0.9

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 (146) hide show
  1. package/dist/accordion.css +10 -10
  2. package/dist/accordion.js +2 -2
  3. package/dist/alert.css +109 -0
  4. package/dist/alert.js +168 -0
  5. package/dist/aspect-ratio.css +17 -0
  6. package/dist/aspect-ratio.js +26 -0
  7. package/dist/avatar.css +97 -0
  8. package/dist/avatar.js +161 -0
  9. package/dist/badge.css +40 -115
  10. package/dist/badge.js +19 -16
  11. package/dist/base.css +609 -180
  12. package/dist/button-link.css +161 -0
  13. package/dist/button-link.js +108 -0
  14. package/dist/button.css +50 -229
  15. package/dist/button.js +7 -9
  16. package/dist/card.css +12 -12
  17. package/dist/check.js +12 -0
  18. package/dist/checkbox.css +16 -57
  19. package/dist/checkbox.js +14 -31
  20. package/dist/collapse.css +2 -2
  21. package/dist/collapse.js +1 -1
  22. package/dist/color-input.css +108 -0
  23. package/dist/color-input.js +344 -0
  24. package/dist/color-picker.css +304 -0
  25. package/dist/color-picker.js +717 -0
  26. package/dist/color-picker2.js +18 -0
  27. package/dist/color-swatch.css +50 -0
  28. package/dist/color-swatch.js +73 -0
  29. package/dist/color.js +190 -0
  30. package/dist/componentColors.js +206 -13
  31. package/dist/components/alert/alert.d.ts +30 -0
  32. package/dist/components/alert/index.d.ts +3 -0
  33. package/dist/components/alert/index.js +2 -0
  34. package/dist/components/alert/types.d.ts +20 -0
  35. package/dist/components/alert/useAlertColor.d.ts +3 -0
  36. package/dist/components/aspect-ratio/aspect-ratio.d.ts +21 -0
  37. package/dist/components/aspect-ratio/index.d.ts +2 -0
  38. package/dist/components/aspect-ratio/index.js +2 -0
  39. package/dist/components/aspect-ratio/types.d.ts +3 -0
  40. package/dist/components/avatar/avatar.d.ts +24 -0
  41. package/dist/components/avatar/index.d.ts +3 -0
  42. package/dist/components/avatar/index.js +2 -0
  43. package/dist/components/avatar/types.d.ts +20 -0
  44. package/dist/components/avatar/useAvatarColor.d.ts +3 -0
  45. package/dist/components/badge/types.d.ts +2 -1
  46. package/dist/components/badge/useBadgeColor.d.ts +3 -8
  47. package/dist/components/button/types.d.ts +1 -0
  48. package/dist/components/button/useButtonColor.d.ts +3 -13
  49. package/dist/components/button-link/button-link.d.ts +27 -0
  50. package/dist/components/button-link/index.d.ts +2 -0
  51. package/dist/components/button-link/index.js +2 -0
  52. package/dist/components/button-link/types.d.ts +20 -0
  53. package/dist/components/checkbox/types.d.ts +1 -0
  54. package/dist/components/checkbox/useCheckbox.d.ts +2 -4
  55. package/dist/components/color-input/color-input.d.ts +29 -0
  56. package/dist/components/color-input/index.d.ts +2 -0
  57. package/dist/components/color-input/index.js +2 -0
  58. package/dist/components/color-input/types.d.ts +34 -0
  59. package/dist/components/color-input/useColorInput.d.ts +27 -0
  60. package/dist/components/color-input/useColorInputEyeDropper.d.ts +13 -0
  61. package/dist/components/color-input/useColorInputPopover.d.ts +11 -0
  62. package/dist/components/color-input/useColorInputValue.d.ts +8 -0
  63. package/dist/components/color-picker/color-picker-saturation.d.ts +21 -0
  64. package/dist/components/color-picker/color-picker-slider.d.ts +21 -0
  65. package/dist/components/color-picker/color-picker-utils.d.ts +23 -0
  66. package/dist/components/color-picker/color-picker.d.ts +23 -0
  67. package/dist/components/color-picker/index.d.ts +3 -0
  68. package/dist/components/color-picker/index.js +3 -0
  69. package/dist/components/color-picker/types.d.ts +39 -0
  70. package/dist/components/color-picker/useColorPickerDrag.d.ts +11 -0
  71. package/dist/components/color-picker/useColorPickerSwatches.d.ts +21 -0
  72. package/dist/components/color-picker/useColorPickerValue.d.ts +15 -0
  73. package/dist/components/color-swatch/color-swatch.d.ts +21 -0
  74. package/dist/components/color-swatch/index.d.ts +2 -0
  75. package/dist/components/color-swatch/index.js +2 -0
  76. package/dist/components/color-swatch/types.d.ts +6 -0
  77. package/dist/components/color-swatch/useColorSwatchColor.d.ts +5 -0
  78. package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
  79. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +1 -1
  80. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -1
  81. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +1 -1
  82. package/dist/components/field/types.d.ts +0 -2
  83. package/dist/components/field/useField.d.ts +0 -2
  84. package/dist/components/icon-button/types.d.ts +1 -0
  85. package/dist/components/input/types.d.ts +3 -0
  86. package/dist/components/number-input/index.d.ts +2 -0
  87. package/dist/components/number-input/index.js +2 -0
  88. package/dist/components/number-input/number-input.d.ts +29 -0
  89. package/dist/components/number-input/types.d.ts +34 -0
  90. package/dist/components/number-input/useNumberInput.d.ts +31 -0
  91. package/dist/components/popover/index.d.ts +1 -0
  92. package/dist/components/popover/index.js +2 -1
  93. package/dist/components/popover/types.d.ts +2 -1
  94. package/dist/components/progress/types.d.ts +1 -1
  95. package/dist/components/radio/types.d.ts +3 -0
  96. package/dist/components/radio/useRadio.d.ts +2 -4
  97. package/dist/components/select/index.d.ts +1 -1
  98. package/dist/components/select/types.d.ts +3 -0
  99. package/dist/components/slider/index.d.ts +2 -1
  100. package/dist/components/slider/index.js +2 -2
  101. package/dist/components/slider/range-slider.d.ts +45 -0
  102. package/dist/components/slider/types.d.ts +14 -2
  103. package/dist/components/slider/useRangeSlider.d.ts +59 -0
  104. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +7 -0
  105. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +4 -0
  106. package/dist/components/switch/useSwitch.d.ts +2 -3
  107. package/dist/components/tooltip/types.d.ts +1 -0
  108. package/dist/dropdown-menu.css +17 -17
  109. package/dist/field.css +15 -18
  110. package/dist/field.js +17 -35
  111. package/dist/icon-button.css +57 -236
  112. package/dist/icon-button.js +5 -6
  113. package/dist/index.d.ts +8 -0
  114. package/dist/index.js +16 -4
  115. package/dist/input.css +40 -46
  116. package/dist/input.js +39 -21
  117. package/dist/minus.js +12 -0
  118. package/dist/modal.css +9 -9
  119. package/dist/modal.js +1 -1
  120. package/dist/number-input.css +86 -0
  121. package/dist/number-input.js +350 -0
  122. package/dist/overlay.css +5 -5
  123. package/dist/overlay.js +3 -3
  124. package/dist/popover.css +54 -21
  125. package/dist/popover.js +8 -5
  126. package/dist/popover2.js +17 -0
  127. package/dist/progress.css +9 -30
  128. package/dist/progress.js +3 -6
  129. package/dist/radio.css +34 -62
  130. package/dist/radio.js +28 -16
  131. package/dist/select.css +105 -61
  132. package/dist/select.js +12 -8
  133. package/dist/slider.css +508 -41
  134. package/dist/slider.js +1122 -48
  135. package/dist/switch.css +19 -44
  136. package/dist/switch.js +4 -5
  137. package/dist/tabs.css +36 -36
  138. package/dist/tabs.js +1 -1
  139. package/dist/textarea.css +33 -25
  140. package/dist/tooltip.css +7 -35
  141. package/dist/tooltip.js +13 -8
  142. package/dist/useButtonColor.js +16 -14
  143. package/package.json +40 -8
  144. package/src/styles/_mixins.scss +25 -41
  145. package/src/styles/_tokens.scss +615 -182
  146. package/src/styles/_variables.scss +177 -49
package/dist/base.css CHANGED
@@ -1,120 +1,476 @@
1
1
  :root {
2
2
  --rp-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
3
- --rp-color-primary: #0d74ce;
4
- --rp-color-secondary: #6550b9;
5
- --rp-color-success: #218358;
6
- --rp-color-warning: #cc4e00;
7
- --rp-color-danger: #ce2c31;
8
- --rp-color-info: #107d98;
9
- --rp-color-neutral: #646464;
10
- --rp-color-text: #202020;
11
- --rp-color-text-secondary: #646464;
12
- --rp-color-text-disabled: #8d8d8d;
13
- --rp-color-text-inverted: #ffffff;
14
- --rp-color-background: #f9f9f9;
15
- --rp-color-surface: #fcfcfc;
16
- --rp-color-surface-raised: #ffffff;
17
- --rp-color-surface-muted: #f9f9f9;
18
- --rp-color-surface-hover: #f0f0f0;
19
- --rp-color-button-default-bg: var(--rp-color-surface);
20
- --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
21
- --rp-color-button-default-bg-active: #e8e8e8;
22
- --rp-color-surface-inverted: #202020;
23
- --rp-color-overlay: rgba(17, 17, 17, 0.55);
24
- --rp-color-border: #d9d9d9;
25
- --rp-color-border-hover: #bbbbbb;
26
- --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
27
- --rp-color-control-bg: var(--rp-color-surface);
28
- --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
29
- --rp-color-control-fg: var(--rp-color-text);
30
- --rp-color-control-placeholder: var(--rp-color-text-secondary);
31
- --rp-color-control-icon: var(--rp-color-text-secondary);
32
- --rp-color-control-border: var(--rp-color-border);
33
- --rp-color-control-border-hover: var(--rp-color-border-hover);
34
- --rp-color-control-border-focus: var(--rp-color-primary);
35
- --rp-color-control-track-bg: var(--rp-color-border);
36
- --rp-color-control-thumb-bg: #ffffff;
37
- --rp-color-control-selected-bg: var(--rp-color-primary);
38
- --rp-color-control-selected-fg: var(--rp-color-on-primary);
39
- --rp-color-on-primary: #ffffff;
40
- --rp-color-on-secondary: #ffffff;
41
- --rp-color-on-success: #ffffff;
42
- --rp-color-on-warning: #ffffff;
43
- --rp-color-on-danger: #ffffff;
44
- --rp-color-on-info: #ffffff;
45
- --rp-color-on-neutral: #ffffff;
46
- --rp-color-primary-hover: color-mix(in srgb, var(--rp-color-primary) 90%, #111111);
47
- --rp-color-primary-active: color-mix(in srgb, var(--rp-color-primary) 80%, #111111);
48
- --rp-color-primary-subtle-bg: #e6f4fe;
49
- --rp-color-primary-subtle-bg-hover: #d5efff;
50
- --rp-color-primary-subtle-bg-active: #c2e5ff;
51
- --rp-color-primary-border: #8ec8f6;
52
- --rp-color-primary-border-hover: #5eb1ef;
53
- --rp-color-primary-fg: #113264;
54
- --rp-color-secondary-hover: color-mix(in srgb, var(--rp-color-secondary) 90%, #111111);
55
- --rp-color-secondary-active: color-mix(in srgb, var(--rp-color-secondary) 80%, #111111);
56
- --rp-color-secondary-subtle-bg: #f4f0fe;
57
- --rp-color-secondary-subtle-bg-hover: #ebe4ff;
58
- --rp-color-secondary-subtle-bg-active: #e1d9ff;
59
- --rp-color-secondary-border: #c2b5f5;
60
- --rp-color-secondary-border-hover: #aa99ec;
61
- --rp-color-secondary-fg: #2f265f;
62
- --rp-color-success-hover: color-mix(in srgb, var(--rp-color-success) 90%, #111111);
63
- --rp-color-success-active: color-mix(in srgb, var(--rp-color-success) 80%, #111111);
64
- --rp-color-success-subtle-bg: #e6f6eb;
65
- --rp-color-success-subtle-bg-hover: #d6f1df;
66
- --rp-color-success-subtle-bg-active: #c4e8d1;
67
- --rp-color-success-border: #8eceaa;
68
- --rp-color-success-border-hover: #5bb98b;
69
- --rp-color-success-fg: #193b2d;
70
- --rp-color-warning-hover: color-mix(in srgb, var(--rp-color-warning) 90%, #111111);
71
- --rp-color-warning-active: color-mix(in srgb, var(--rp-color-warning) 80%, #111111);
72
- --rp-color-warning-subtle-bg: #ffefd6;
73
- --rp-color-warning-subtle-bg-hover: #ffdfb5;
74
- --rp-color-warning-subtle-bg-active: #ffd19a;
75
- --rp-color-warning-border: #f5ae73;
76
- --rp-color-warning-border-hover: #ec9455;
77
- --rp-color-warning-fg: #582d1d;
78
- --rp-color-danger-hover: color-mix(in srgb, var(--rp-color-danger) 90%, #111111);
79
- --rp-color-danger-active: color-mix(in srgb, var(--rp-color-danger) 80%, #111111);
80
- --rp-color-danger-subtle-bg: #feebec;
81
- --rp-color-danger-subtle-bg-hover: #ffdbdc;
82
- --rp-color-danger-subtle-bg-active: #ffcdce;
83
- --rp-color-danger-border: #f4a9aa;
84
- --rp-color-danger-border-hover: #eb8e90;
85
- --rp-color-danger-fg: #641723;
86
- --rp-color-info-hover: color-mix(in srgb, var(--rp-color-info) 90%, #111111);
87
- --rp-color-info-active: color-mix(in srgb, var(--rp-color-info) 80%, #111111);
88
- --rp-color-info-subtle-bg: #def7f9;
89
- --rp-color-info-subtle-bg-hover: #caf1f6;
90
- --rp-color-info-subtle-bg-active: #b5e9f0;
91
- --rp-color-info-border: #7dcedc;
92
- --rp-color-info-border-hover: #3db9cf;
93
- --rp-color-info-fg: #0d3c48;
94
- --rp-color-neutral-hover: color-mix(in srgb, var(--rp-color-neutral) 90%, #111111);
95
- --rp-color-neutral-active: color-mix(in srgb, var(--rp-color-neutral) 80%, #111111);
96
- --rp-color-neutral-subtle-bg: #f0f0f0;
97
- --rp-color-neutral-subtle-bg-hover: #e8e8e8;
98
- --rp-color-neutral-subtle-bg-active: #e0e0e0;
99
- --rp-color-neutral-border: #cecece;
100
- --rp-color-neutral-border-hover: #bbbbbb;
101
- --rp-color-neutral-fg: #202020;
3
+ --rp-color-white: #ffffff;
4
+ --rp-color-black: #000000;
5
+ --rp-color-dark-0: #C9C9C9;
6
+ --rp-color-dark-1: #b8b8b8;
7
+ --rp-color-dark-2: #828282;
8
+ --rp-color-dark-3: #696969;
9
+ --rp-color-dark-4: #424242;
10
+ --rp-color-dark-5: #3b3b3b;
11
+ --rp-color-dark-6: #2e2e2e;
12
+ --rp-color-dark-7: #242424;
13
+ --rp-color-dark-8: #1f1f1f;
14
+ --rp-color-dark-9: #141414;
15
+ --rp-color-gray-0: #f8f9fa;
16
+ --rp-color-gray-1: #f1f3f5;
17
+ --rp-color-gray-2: #e9ecef;
18
+ --rp-color-gray-3: #dee2e6;
19
+ --rp-color-gray-4: #ced4da;
20
+ --rp-color-gray-5: #adb5bd;
21
+ --rp-color-gray-6: #868e96;
22
+ --rp-color-gray-7: #495057;
23
+ --rp-color-gray-8: #343a40;
24
+ --rp-color-gray-9: #212529;
25
+ --rp-color-red-0: #fff5f5;
26
+ --rp-color-red-1: #ffe3e3;
27
+ --rp-color-red-2: #ffc9c9;
28
+ --rp-color-red-3: #ffa8a8;
29
+ --rp-color-red-4: #ff8787;
30
+ --rp-color-red-5: #ff6b6b;
31
+ --rp-color-red-6: #fa5252;
32
+ --rp-color-red-7: #f03e3e;
33
+ --rp-color-red-8: #e03131;
34
+ --rp-color-red-9: #c92a2a;
35
+ --rp-color-pink-0: #fff0f6;
36
+ --rp-color-pink-1: #ffdeeb;
37
+ --rp-color-pink-2: #fcc2d7;
38
+ --rp-color-pink-3: #faa2c1;
39
+ --rp-color-pink-4: #f783ac;
40
+ --rp-color-pink-5: #f06595;
41
+ --rp-color-pink-6: #e64980;
42
+ --rp-color-pink-7: #d6336c;
43
+ --rp-color-pink-8: #c2255c;
44
+ --rp-color-pink-9: #a61e4d;
45
+ --rp-color-grape-0: #f8f0fc;
46
+ --rp-color-grape-1: #f3d9fa;
47
+ --rp-color-grape-2: #eebefa;
48
+ --rp-color-grape-3: #e599f7;
49
+ --rp-color-grape-4: #da77f2;
50
+ --rp-color-grape-5: #cc5de8;
51
+ --rp-color-grape-6: #be4bdb;
52
+ --rp-color-grape-7: #ae3ec9;
53
+ --rp-color-grape-8: #9c36b5;
54
+ --rp-color-grape-9: #862e9c;
55
+ --rp-color-violet-0: #f3f0ff;
56
+ --rp-color-violet-1: #e5dbff;
57
+ --rp-color-violet-2: #d0bfff;
58
+ --rp-color-violet-3: #b197fc;
59
+ --rp-color-violet-4: #9775fa;
60
+ --rp-color-violet-5: #845ef7;
61
+ --rp-color-violet-6: #7950f2;
62
+ --rp-color-violet-7: #7048e8;
63
+ --rp-color-violet-8: #6741d9;
64
+ --rp-color-violet-9: #5f3dc4;
65
+ --rp-color-indigo-0: #edf2ff;
66
+ --rp-color-indigo-1: #dbe4ff;
67
+ --rp-color-indigo-2: #bac8ff;
68
+ --rp-color-indigo-3: #91a7ff;
69
+ --rp-color-indigo-4: #748ffc;
70
+ --rp-color-indigo-5: #5c7cfa;
71
+ --rp-color-indigo-6: #4c6ef5;
72
+ --rp-color-indigo-7: #4263eb;
73
+ --rp-color-indigo-8: #3b5bdb;
74
+ --rp-color-indigo-9: #364fc7;
75
+ --rp-color-blue-0: #e7f5ff;
76
+ --rp-color-blue-1: #d0ebff;
77
+ --rp-color-blue-2: #a5d8ff;
78
+ --rp-color-blue-3: #74c0fc;
79
+ --rp-color-blue-4: #4dabf7;
80
+ --rp-color-blue-5: #339af0;
81
+ --rp-color-blue-6: #228be6;
82
+ --rp-color-blue-7: #1c7ed6;
83
+ --rp-color-blue-8: #1971c2;
84
+ --rp-color-blue-9: #1864ab;
85
+ --rp-color-cyan-0: #e3fafc;
86
+ --rp-color-cyan-1: #c5f6fa;
87
+ --rp-color-cyan-2: #99e9f2;
88
+ --rp-color-cyan-3: #66d9e8;
89
+ --rp-color-cyan-4: #3bc9db;
90
+ --rp-color-cyan-5: #22b8cf;
91
+ --rp-color-cyan-6: #15aabf;
92
+ --rp-color-cyan-7: #1098ad;
93
+ --rp-color-cyan-8: #0c8599;
94
+ --rp-color-cyan-9: #0b7285;
95
+ --rp-color-teal-0: #e6fcf5;
96
+ --rp-color-teal-1: #c3fae8;
97
+ --rp-color-teal-2: #96f2d7;
98
+ --rp-color-teal-3: #63e6be;
99
+ --rp-color-teal-4: #38d9a9;
100
+ --rp-color-teal-5: #20c997;
101
+ --rp-color-teal-6: #12b886;
102
+ --rp-color-teal-7: #0ca678;
103
+ --rp-color-teal-8: #099268;
104
+ --rp-color-teal-9: #087f5b;
105
+ --rp-color-green-0: #ebfbee;
106
+ --rp-color-green-1: #d3f9d8;
107
+ --rp-color-green-2: #b2f2bb;
108
+ --rp-color-green-3: #8ce99a;
109
+ --rp-color-green-4: #69db7c;
110
+ --rp-color-green-5: #51cf66;
111
+ --rp-color-green-6: #40c057;
112
+ --rp-color-green-7: #37b24d;
113
+ --rp-color-green-8: #2f9e44;
114
+ --rp-color-green-9: #2b8a3e;
115
+ --rp-color-lime-0: #f4fce3;
116
+ --rp-color-lime-1: #e9fac8;
117
+ --rp-color-lime-2: #d8f5a2;
118
+ --rp-color-lime-3: #c0eb75;
119
+ --rp-color-lime-4: #a9e34b;
120
+ --rp-color-lime-5: #94d82d;
121
+ --rp-color-lime-6: #82c91e;
122
+ --rp-color-lime-7: #74b816;
123
+ --rp-color-lime-8: #66a80f;
124
+ --rp-color-lime-9: #5c940d;
125
+ --rp-color-yellow-0: #fff9db;
126
+ --rp-color-yellow-1: #fff3bf;
127
+ --rp-color-yellow-2: #ffec99;
128
+ --rp-color-yellow-3: #ffe066;
129
+ --rp-color-yellow-4: #ffd43b;
130
+ --rp-color-yellow-5: #fcc419;
131
+ --rp-color-yellow-6: #fab005;
132
+ --rp-color-yellow-7: #f59f00;
133
+ --rp-color-yellow-8: #f08c00;
134
+ --rp-color-yellow-9: #e67700;
135
+ --rp-color-orange-0: #fff4e6;
136
+ --rp-color-orange-1: #ffe8cc;
137
+ --rp-color-orange-2: #ffd8a8;
138
+ --rp-color-orange-3: #ffc078;
139
+ --rp-color-orange-4: #ffa94d;
140
+ --rp-color-orange-5: #ff922b;
141
+ --rp-color-orange-6: #fd7e14;
142
+ --rp-color-orange-7: #f76707;
143
+ --rp-color-orange-8: #e8590c;
144
+ --rp-color-orange-9: #d9480f;
145
+ --rp-primary-color-0: var(--rp-color-blue-0);
146
+ --rp-primary-color-1: var(--rp-color-blue-1);
147
+ --rp-primary-color-2: var(--rp-color-blue-2);
148
+ --rp-primary-color-3: var(--rp-color-blue-3);
149
+ --rp-primary-color-4: var(--rp-color-blue-4);
150
+ --rp-primary-color-5: var(--rp-color-blue-5);
151
+ --rp-primary-color-6: var(--rp-color-blue-6);
152
+ --rp-primary-color-7: var(--rp-color-blue-7);
153
+ --rp-primary-color-8: var(--rp-color-blue-8);
154
+ --rp-primary-color-9: var(--rp-color-blue-9);
155
+ --rp-primary-color-filled: var(--rp-color-blue-filled);
156
+ --rp-primary-color-filled-hover: var(--rp-color-blue-filled-hover);
157
+ --rp-primary-color-contrast: var(--rp-color-blue-contrast);
158
+ --rp-primary-color-light: var(--rp-color-blue-light);
159
+ --rp-primary-color-light-hover: var(--rp-color-blue-light-hover);
160
+ --rp-primary-color-light-color: var(--rp-color-blue-light-color);
161
+ --rp-primary-color-outline: var(--rp-color-blue-outline);
162
+ --rp-primary-color-outline-hover: var(--rp-color-blue-outline-hover);
163
+ --rp-color-dark-0-contrast: var(--rp-color-black);
164
+ --rp-color-dark-1-contrast: var(--rp-color-black);
165
+ --rp-color-dark-2-contrast: var(--rp-color-black);
166
+ --rp-color-dark-3-contrast: var(--rp-color-white);
167
+ --rp-color-dark-4-contrast: var(--rp-color-white);
168
+ --rp-color-dark-5-contrast: var(--rp-color-white);
169
+ --rp-color-dark-6-contrast: var(--rp-color-white);
170
+ --rp-color-dark-7-contrast: var(--rp-color-white);
171
+ --rp-color-dark-8-contrast: var(--rp-color-white);
172
+ --rp-color-dark-9-contrast: var(--rp-color-white);
173
+ --rp-color-gray-0-contrast: var(--rp-color-black);
174
+ --rp-color-gray-1-contrast: var(--rp-color-black);
175
+ --rp-color-gray-2-contrast: var(--rp-color-black);
176
+ --rp-color-gray-3-contrast: var(--rp-color-black);
177
+ --rp-color-gray-4-contrast: var(--rp-color-black);
178
+ --rp-color-gray-5-contrast: var(--rp-color-black);
179
+ --rp-color-gray-6-contrast: var(--rp-color-black);
180
+ --rp-color-gray-7-contrast: var(--rp-color-white);
181
+ --rp-color-gray-8-contrast: var(--rp-color-white);
182
+ --rp-color-gray-9-contrast: var(--rp-color-white);
183
+ --rp-color-red-0-contrast: var(--rp-color-black);
184
+ --rp-color-red-1-contrast: var(--rp-color-black);
185
+ --rp-color-red-2-contrast: var(--rp-color-black);
186
+ --rp-color-red-3-contrast: var(--rp-color-black);
187
+ --rp-color-red-4-contrast: var(--rp-color-black);
188
+ --rp-color-red-5-contrast: var(--rp-color-black);
189
+ --rp-color-red-6-contrast: var(--rp-color-black);
190
+ --rp-color-red-7-contrast: var(--rp-color-black);
191
+ --rp-color-red-8-contrast: var(--rp-color-black);
192
+ --rp-color-red-9-contrast: var(--rp-color-white);
193
+ --rp-color-pink-0-contrast: var(--rp-color-black);
194
+ --rp-color-pink-1-contrast: var(--rp-color-black);
195
+ --rp-color-pink-2-contrast: var(--rp-color-black);
196
+ --rp-color-pink-3-contrast: var(--rp-color-black);
197
+ --rp-color-pink-4-contrast: var(--rp-color-black);
198
+ --rp-color-pink-5-contrast: var(--rp-color-black);
199
+ --rp-color-pink-6-contrast: var(--rp-color-black);
200
+ --rp-color-pink-7-contrast: var(--rp-color-white);
201
+ --rp-color-pink-8-contrast: var(--rp-color-white);
202
+ --rp-color-pink-9-contrast: var(--rp-color-white);
203
+ --rp-color-grape-0-contrast: var(--rp-color-black);
204
+ --rp-color-grape-1-contrast: var(--rp-color-black);
205
+ --rp-color-grape-2-contrast: var(--rp-color-black);
206
+ --rp-color-grape-3-contrast: var(--rp-color-black);
207
+ --rp-color-grape-4-contrast: var(--rp-color-black);
208
+ --rp-color-grape-5-contrast: var(--rp-color-black);
209
+ --rp-color-grape-6-contrast: var(--rp-color-black);
210
+ --rp-color-grape-7-contrast: var(--rp-color-white);
211
+ --rp-color-grape-8-contrast: var(--rp-color-white);
212
+ --rp-color-grape-9-contrast: var(--rp-color-white);
213
+ --rp-color-violet-0-contrast: var(--rp-color-black);
214
+ --rp-color-violet-1-contrast: var(--rp-color-black);
215
+ --rp-color-violet-2-contrast: var(--rp-color-black);
216
+ --rp-color-violet-3-contrast: var(--rp-color-black);
217
+ --rp-color-violet-4-contrast: var(--rp-color-black);
218
+ --rp-color-violet-5-contrast: var(--rp-color-black);
219
+ --rp-color-violet-6-contrast: var(--rp-color-white);
220
+ --rp-color-violet-7-contrast: var(--rp-color-white);
221
+ --rp-color-violet-8-contrast: var(--rp-color-white);
222
+ --rp-color-violet-9-contrast: var(--rp-color-white);
223
+ --rp-color-indigo-0-contrast: var(--rp-color-black);
224
+ --rp-color-indigo-1-contrast: var(--rp-color-black);
225
+ --rp-color-indigo-2-contrast: var(--rp-color-black);
226
+ --rp-color-indigo-3-contrast: var(--rp-color-black);
227
+ --rp-color-indigo-4-contrast: var(--rp-color-black);
228
+ --rp-color-indigo-5-contrast: var(--rp-color-black);
229
+ --rp-color-indigo-6-contrast: var(--rp-color-black);
230
+ --rp-color-indigo-7-contrast: var(--rp-color-white);
231
+ --rp-color-indigo-8-contrast: var(--rp-color-white);
232
+ --rp-color-indigo-9-contrast: var(--rp-color-white);
233
+ --rp-color-blue-0-contrast: var(--rp-color-black);
234
+ --rp-color-blue-1-contrast: var(--rp-color-black);
235
+ --rp-color-blue-2-contrast: var(--rp-color-black);
236
+ --rp-color-blue-3-contrast: var(--rp-color-black);
237
+ --rp-color-blue-4-contrast: var(--rp-color-black);
238
+ --rp-color-blue-5-contrast: var(--rp-color-black);
239
+ --rp-color-blue-6-contrast: var(--rp-color-black);
240
+ --rp-color-blue-7-contrast: var(--rp-color-black);
241
+ --rp-color-blue-8-contrast: var(--rp-color-white);
242
+ --rp-color-blue-9-contrast: var(--rp-color-white);
243
+ --rp-color-cyan-0-contrast: var(--rp-color-black);
244
+ --rp-color-cyan-1-contrast: var(--rp-color-black);
245
+ --rp-color-cyan-2-contrast: var(--rp-color-black);
246
+ --rp-color-cyan-3-contrast: var(--rp-color-black);
247
+ --rp-color-cyan-4-contrast: var(--rp-color-black);
248
+ --rp-color-cyan-5-contrast: var(--rp-color-black);
249
+ --rp-color-cyan-6-contrast: var(--rp-color-black);
250
+ --rp-color-cyan-7-contrast: var(--rp-color-black);
251
+ --rp-color-cyan-8-contrast: var(--rp-color-black);
252
+ --rp-color-cyan-9-contrast: var(--rp-color-white);
253
+ --rp-color-teal-0-contrast: var(--rp-color-black);
254
+ --rp-color-teal-1-contrast: var(--rp-color-black);
255
+ --rp-color-teal-2-contrast: var(--rp-color-black);
256
+ --rp-color-teal-3-contrast: var(--rp-color-black);
257
+ --rp-color-teal-4-contrast: var(--rp-color-black);
258
+ --rp-color-teal-5-contrast: var(--rp-color-black);
259
+ --rp-color-teal-6-contrast: var(--rp-color-black);
260
+ --rp-color-teal-7-contrast: var(--rp-color-black);
261
+ --rp-color-teal-8-contrast: var(--rp-color-black);
262
+ --rp-color-teal-9-contrast: var(--rp-color-white);
263
+ --rp-color-green-0-contrast: var(--rp-color-black);
264
+ --rp-color-green-1-contrast: var(--rp-color-black);
265
+ --rp-color-green-2-contrast: var(--rp-color-black);
266
+ --rp-color-green-3-contrast: var(--rp-color-black);
267
+ --rp-color-green-4-contrast: var(--rp-color-black);
268
+ --rp-color-green-5-contrast: var(--rp-color-black);
269
+ --rp-color-green-6-contrast: var(--rp-color-black);
270
+ --rp-color-green-7-contrast: var(--rp-color-black);
271
+ --rp-color-green-8-contrast: var(--rp-color-black);
272
+ --rp-color-green-9-contrast: var(--rp-color-black);
273
+ --rp-color-lime-0-contrast: var(--rp-color-black);
274
+ --rp-color-lime-1-contrast: var(--rp-color-black);
275
+ --rp-color-lime-2-contrast: var(--rp-color-black);
276
+ --rp-color-lime-3-contrast: var(--rp-color-black);
277
+ --rp-color-lime-4-contrast: var(--rp-color-black);
278
+ --rp-color-lime-5-contrast: var(--rp-color-black);
279
+ --rp-color-lime-6-contrast: var(--rp-color-black);
280
+ --rp-color-lime-7-contrast: var(--rp-color-black);
281
+ --rp-color-lime-8-contrast: var(--rp-color-black);
282
+ --rp-color-lime-9-contrast: var(--rp-color-black);
283
+ --rp-color-yellow-0-contrast: var(--rp-color-black);
284
+ --rp-color-yellow-1-contrast: var(--rp-color-black);
285
+ --rp-color-yellow-2-contrast: var(--rp-color-black);
286
+ --rp-color-yellow-3-contrast: var(--rp-color-black);
287
+ --rp-color-yellow-4-contrast: var(--rp-color-black);
288
+ --rp-color-yellow-5-contrast: var(--rp-color-black);
289
+ --rp-color-yellow-6-contrast: var(--rp-color-black);
290
+ --rp-color-yellow-7-contrast: var(--rp-color-black);
291
+ --rp-color-yellow-8-contrast: var(--rp-color-black);
292
+ --rp-color-yellow-9-contrast: var(--rp-color-black);
293
+ --rp-color-orange-0-contrast: var(--rp-color-black);
294
+ --rp-color-orange-1-contrast: var(--rp-color-black);
295
+ --rp-color-orange-2-contrast: var(--rp-color-black);
296
+ --rp-color-orange-3-contrast: var(--rp-color-black);
297
+ --rp-color-orange-4-contrast: var(--rp-color-black);
298
+ --rp-color-orange-5-contrast: var(--rp-color-black);
299
+ --rp-color-orange-6-contrast: var(--rp-color-black);
300
+ --rp-color-orange-7-contrast: var(--rp-color-black);
301
+ --rp-color-orange-8-contrast: var(--rp-color-black);
302
+ --rp-color-orange-9-contrast: var(--rp-color-black);
303
+ --rp-color-dark-filled: var(--rp-color-dark-6);
304
+ --rp-color-dark-filled-hover: var(--rp-color-dark-7);
305
+ --rp-color-dark-contrast: var(--rp-color-white);
306
+ --rp-color-dark-light: var(--rp-color-dark-1);
307
+ --rp-color-dark-light-hover: var(--rp-color-dark-2);
308
+ --rp-color-dark-light-color: var(--rp-color-dark-9);
309
+ --rp-color-dark-outline: var(--rp-color-dark-6);
310
+ --rp-color-dark-outline-hover: color-mix(in srgb, var(--rp-color-dark-6) 5%, transparent);
311
+ --rp-color-gray-filled: var(--rp-color-gray-6);
312
+ --rp-color-gray-filled-hover: var(--rp-color-gray-7);
313
+ --rp-color-gray-contrast: var(--rp-color-black);
314
+ --rp-color-gray-light: var(--rp-color-gray-1);
315
+ --rp-color-gray-light-hover: var(--rp-color-gray-2);
316
+ --rp-color-gray-light-color: var(--rp-color-gray-9);
317
+ --rp-color-gray-outline: var(--rp-color-gray-6);
318
+ --rp-color-gray-outline-hover: color-mix(in srgb, var(--rp-color-gray-6) 5%, transparent);
319
+ --rp-color-red-filled: var(--rp-color-red-6);
320
+ --rp-color-red-filled-hover: var(--rp-color-red-7);
321
+ --rp-color-red-contrast: var(--rp-color-black);
322
+ --rp-color-red-light: var(--rp-color-red-1);
323
+ --rp-color-red-light-hover: var(--rp-color-red-2);
324
+ --rp-color-red-light-color: var(--rp-color-red-9);
325
+ --rp-color-red-outline: var(--rp-color-red-6);
326
+ --rp-color-red-outline-hover: color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
327
+ --rp-color-pink-filled: var(--rp-color-pink-6);
328
+ --rp-color-pink-filled-hover: var(--rp-color-pink-7);
329
+ --rp-color-pink-contrast: var(--rp-color-black);
330
+ --rp-color-pink-light: var(--rp-color-pink-1);
331
+ --rp-color-pink-light-hover: var(--rp-color-pink-2);
332
+ --rp-color-pink-light-color: var(--rp-color-pink-9);
333
+ --rp-color-pink-outline: var(--rp-color-pink-6);
334
+ --rp-color-pink-outline-hover: color-mix(in srgb, var(--rp-color-pink-6) 5%, transparent);
335
+ --rp-color-grape-filled: var(--rp-color-grape-6);
336
+ --rp-color-grape-filled-hover: var(--rp-color-grape-7);
337
+ --rp-color-grape-contrast: var(--rp-color-black);
338
+ --rp-color-grape-light: var(--rp-color-grape-1);
339
+ --rp-color-grape-light-hover: var(--rp-color-grape-2);
340
+ --rp-color-grape-light-color: var(--rp-color-grape-9);
341
+ --rp-color-grape-outline: var(--rp-color-grape-6);
342
+ --rp-color-grape-outline-hover: color-mix(in srgb, var(--rp-color-grape-6) 5%, transparent);
343
+ --rp-color-violet-filled: var(--rp-color-violet-6);
344
+ --rp-color-violet-filled-hover: var(--rp-color-violet-7);
345
+ --rp-color-violet-contrast: var(--rp-color-white);
346
+ --rp-color-violet-light: var(--rp-color-violet-1);
347
+ --rp-color-violet-light-hover: var(--rp-color-violet-2);
348
+ --rp-color-violet-light-color: var(--rp-color-violet-9);
349
+ --rp-color-violet-outline: var(--rp-color-violet-6);
350
+ --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
351
+ --rp-color-indigo-filled: var(--rp-color-indigo-6);
352
+ --rp-color-indigo-filled-hover: var(--rp-color-indigo-7);
353
+ --rp-color-indigo-contrast: var(--rp-color-black);
354
+ --rp-color-indigo-light: var(--rp-color-indigo-1);
355
+ --rp-color-indigo-light-hover: var(--rp-color-indigo-2);
356
+ --rp-color-indigo-light-color: var(--rp-color-indigo-9);
357
+ --rp-color-indigo-outline: var(--rp-color-indigo-6);
358
+ --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
359
+ --rp-color-blue-filled: var(--rp-color-blue-6);
360
+ --rp-color-blue-filled-hover: var(--rp-color-blue-7);
361
+ --rp-color-blue-contrast: var(--rp-color-black);
362
+ --rp-color-blue-light: var(--rp-color-blue-1);
363
+ --rp-color-blue-light-hover: var(--rp-color-blue-2);
364
+ --rp-color-blue-light-color: var(--rp-color-blue-9);
365
+ --rp-color-blue-outline: var(--rp-color-blue-6);
366
+ --rp-color-blue-outline-hover: color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
367
+ --rp-color-cyan-filled: var(--rp-color-cyan-6);
368
+ --rp-color-cyan-filled-hover: var(--rp-color-cyan-7);
369
+ --rp-color-cyan-contrast: var(--rp-color-black);
370
+ --rp-color-cyan-light: var(--rp-color-cyan-1);
371
+ --rp-color-cyan-light-hover: var(--rp-color-cyan-2);
372
+ --rp-color-cyan-light-color: var(--rp-color-cyan-9);
373
+ --rp-color-cyan-outline: var(--rp-color-cyan-6);
374
+ --rp-color-cyan-outline-hover: color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
375
+ --rp-color-teal-filled: var(--rp-color-teal-6);
376
+ --rp-color-teal-filled-hover: var(--rp-color-teal-7);
377
+ --rp-color-teal-contrast: var(--rp-color-black);
378
+ --rp-color-teal-light: var(--rp-color-teal-1);
379
+ --rp-color-teal-light-hover: var(--rp-color-teal-2);
380
+ --rp-color-teal-light-color: var(--rp-color-teal-9);
381
+ --rp-color-teal-outline: var(--rp-color-teal-6);
382
+ --rp-color-teal-outline-hover: color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
383
+ --rp-color-green-filled: var(--rp-color-green-6);
384
+ --rp-color-green-filled-hover: var(--rp-color-green-7);
385
+ --rp-color-green-contrast: var(--rp-color-black);
386
+ --rp-color-green-light: var(--rp-color-green-1);
387
+ --rp-color-green-light-hover: var(--rp-color-green-2);
388
+ --rp-color-green-light-color: var(--rp-color-green-9);
389
+ --rp-color-green-outline: var(--rp-color-green-6);
390
+ --rp-color-green-outline-hover: color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
391
+ --rp-color-lime-filled: var(--rp-color-lime-6);
392
+ --rp-color-lime-filled-hover: var(--rp-color-lime-7);
393
+ --rp-color-lime-contrast: var(--rp-color-black);
394
+ --rp-color-lime-light: var(--rp-color-lime-1);
395
+ --rp-color-lime-light-hover: var(--rp-color-lime-2);
396
+ --rp-color-lime-light-color: var(--rp-color-lime-9);
397
+ --rp-color-lime-outline: var(--rp-color-lime-6);
398
+ --rp-color-lime-outline-hover: color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
399
+ --rp-color-yellow-filled: var(--rp-color-yellow-6);
400
+ --rp-color-yellow-filled-hover: var(--rp-color-yellow-7);
401
+ --rp-color-yellow-contrast: var(--rp-color-black);
402
+ --rp-color-yellow-light: var(--rp-color-yellow-1);
403
+ --rp-color-yellow-light-hover: var(--rp-color-yellow-2);
404
+ --rp-color-yellow-light-color: var(--rp-color-yellow-9);
405
+ --rp-color-yellow-outline: var(--rp-color-yellow-6);
406
+ --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
407
+ --rp-color-orange-filled: var(--rp-color-orange-6);
408
+ --rp-color-orange-filled-hover: var(--rp-color-orange-7);
409
+ --rp-color-orange-contrast: var(--rp-color-black);
410
+ --rp-color-orange-light: var(--rp-color-orange-1);
411
+ --rp-color-orange-light-hover: var(--rp-color-orange-2);
412
+ --rp-color-orange-light-color: var(--rp-color-orange-9);
413
+ --rp-color-orange-outline: var(--rp-color-orange-6);
414
+ --rp-color-orange-outline-hover: color-mix(in srgb, var(--rp-color-orange-6) 5%, transparent);
415
+ --rp-color-scheme: light;
416
+ --rp-color-bright: var(--rp-color-black);
417
+ --rp-color-text: var(--rp-color-black);
418
+ --rp-color-body: var(--rp-color-white);
419
+ --rp-color-placeholder: var(--rp-color-gray-5);
420
+ --rp-color-default: var(--rp-color-white);
421
+ --rp-color-default-hover: var(--rp-color-gray-1);
422
+ --rp-color-default-color: var(--rp-color-black);
423
+ --rp-color-default-border: var(--rp-color-gray-4);
424
+ --rp-color-default-border-hover: var(--rp-color-gray-5);
425
+ --rp-color-dimmed: var(--rp-color-gray-6);
426
+ --rp-color-disabled: var(--rp-color-gray-2);
427
+ --rp-color-disabled-color: var(--rp-color-gray-5);
428
+ --rp-color-disabled-border: var(--rp-color-gray-3);
429
+ --rp-color-focus-ring: color-mix(in srgb, var(--rp-primary-color-filled) 32%, transparent);
430
+ --rp-color-control-bg: var(--rp-color-default);
431
+ --rp-color-control-readonly-bg: var(--rp-color-default-hover);
432
+ --rp-color-control-fg: var(--rp-color-default-color);
433
+ --rp-color-control-placeholder: var(--rp-color-placeholder);
434
+ --rp-color-control-icon: var(--rp-color-dimmed);
435
+ --rp-color-control-border: var(--rp-color-default-border);
436
+ --rp-color-control-border-hover: var(--rp-color-default-border-hover);
437
+ --rp-color-control-border-focus: var(--rp-primary-color-filled);
438
+ --rp-color-control-track-bg: var(--rp-color-disabled-border);
439
+ --rp-color-control-thumb-bg: var(--rp-color-white);
440
+ --rp-color-control-selected-bg: var(--rp-primary-color-filled);
441
+ --rp-color-control-selected-fg: var(--rp-color-white);
102
442
  --rp-font-size-xs: 0.75rem;
103
443
  --rp-font-size-sm: 0.875rem;
104
- --rp-font-size-base: 1rem;
444
+ --rp-font-size-md: 1rem;
105
445
  --rp-font-size-lg: 1.125rem;
106
446
  --rp-font-size-xl: 1.25rem;
107
- --rp-font-size-2xl: 1.5rem;
108
- --rp-font-size-3xl: 1.875rem;
109
447
  --rp-font-weight-normal: 400;
110
448
  --rp-font-weight-medium: 500;
111
449
  --rp-font-weight-semibold: 600;
112
450
  --rp-font-weight-bold: 700;
113
- --rp-line-height-none: 1;
114
- --rp-line-height-tight: 1.25;
115
- --rp-line-height-normal: 1.4;
116
- --rp-line-height-relaxed: 1.5;
117
- --rp-line-height-loose: 1.6;
451
+ --rp-h1-font-size: 2.125rem;
452
+ --rp-h1-line-height: 1.3;
453
+ --rp-h1-font-weight: 700;
454
+ --rp-h2-font-size: 1.625rem;
455
+ --rp-h2-line-height: 1.35;
456
+ --rp-h2-font-weight: 700;
457
+ --rp-h3-font-size: 1.375rem;
458
+ --rp-h3-line-height: 1.4;
459
+ --rp-h3-font-weight: 700;
460
+ --rp-h4-font-size: 1.125rem;
461
+ --rp-h4-line-height: 1.45;
462
+ --rp-h4-font-weight: 700;
463
+ --rp-h5-font-size: 1rem;
464
+ --rp-h5-line-height: 1.5;
465
+ --rp-h5-font-weight: 700;
466
+ --rp-h6-font-size: 0.875rem;
467
+ --rp-h6-line-height: 1.5;
468
+ --rp-h6-font-weight: 700;
469
+ --rp-line-height-xs: 1.4;
470
+ --rp-line-height-sm: 1.45;
471
+ --rp-line-height-md: 1.55;
472
+ --rp-line-height-lg: 1.6;
473
+ --rp-line-height-xl: 1.65;
118
474
  --rp-spacing-0: 0;
119
475
  --rp-spacing-1: 0.25rem;
120
476
  --rp-spacing-2: 0.5rem;
@@ -134,9 +490,11 @@
134
490
  --rp-radius-full: 9999px;
135
491
  --rp-border-width-thin: 1px;
136
492
  --rp-border-width-medium: 2px;
137
- --rp-size-control-sm: 32px;
138
- --rp-size-control-md: 40px;
139
- --rp-size-control-lg: 48px;
493
+ --rp-size-control-xs: 30px;
494
+ --rp-size-control-sm: 36px;
495
+ --rp-size-control-md: 42px;
496
+ --rp-size-control-lg: 50px;
497
+ --rp-size-control-xl: 60px;
140
498
  --rp-opacity-disabled: 0.5;
141
499
  --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
142
500
  --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -147,76 +505,147 @@
147
505
  --rp-transition-slow: 300ms ease;
148
506
  }
149
507
 
150
- html.dark {
151
- --rp-color-text: #eeeeee;
152
- --rp-color-text-secondary: #b4b4b4;
153
- --rp-color-text-disabled: #6e6e6e;
154
- --rp-color-text-inverted: #202020;
155
- --rp-color-background: #191919;
156
- --rp-color-surface: #222222;
157
- --rp-color-surface-raised: #2a2a2a;
158
- --rp-color-surface-muted: #222222;
159
- --rp-color-surface-hover: #2a2a2a;
160
- --rp-color-button-default-bg: var(--rp-color-surface);
161
- --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
162
- --rp-color-button-default-bg-active: #313131;
163
- --rp-color-surface-inverted: #f9f9f9;
164
- --rp-color-overlay: rgba(17, 17, 17, 0.75);
165
- --rp-color-border: #3a3a3a;
166
- --rp-color-border-hover: #606060;
167
- --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
168
- --rp-color-control-bg: var(--rp-color-surface);
169
- --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
170
- --rp-color-control-fg: #eeeeee;
171
- --rp-color-control-placeholder: #6e6e6e;
172
- --rp-color-control-icon: #b4b4b4;
173
- --rp-color-control-border: #3a3a3a;
174
- --rp-color-control-border-hover: #606060;
175
- --rp-color-control-border-focus: var(--rp-color-primary);
176
- --rp-color-control-track-bg: var(--rp-color-border);
177
- --rp-color-control-thumb-bg: var(--rp-color-surface-inverted);
178
- --rp-color-primary-subtle-bg: #0d2847;
179
- --rp-color-primary-subtle-bg-hover: #003362;
180
- --rp-color-primary-subtle-bg-active: #004074;
181
- --rp-color-primary-border: #205d9e;
182
- --rp-color-primary-border-hover: #2870bd;
183
- --rp-color-primary-fg: #70b8ff;
184
- --rp-color-secondary-subtle-bg: #291f43;
185
- --rp-color-secondary-subtle-bg-hover: #33255b;
186
- --rp-color-secondary-subtle-bg-active: #3c2e69;
187
- --rp-color-secondary-border: #56468b;
188
- --rp-color-secondary-border-hover: #6958ad;
189
- --rp-color-secondary-fg: #baa7ff;
190
- --rp-color-success-subtle-bg: #132d21;
191
- --rp-color-success-subtle-bg-hover: #113b29;
192
- --rp-color-success-subtle-bg-active: #174933;
193
- --rp-color-success-border: #28684a;
194
- --rp-color-success-border-hover: #2f7c57;
195
- --rp-color-success-fg: #3dd68c;
196
- --rp-color-warning-subtle-bg: #331e0b;
197
- --rp-color-warning-subtle-bg-hover: #462100;
198
- --rp-color-warning-subtle-bg-active: #562800;
199
- --rp-color-warning-border: #7e451d;
200
- --rp-color-warning-border-hover: #a35829;
201
- --rp-color-warning-fg: #ffa057;
202
- --rp-color-danger-subtle-bg: #3b1219;
203
- --rp-color-danger-subtle-bg-hover: #500f1c;
204
- --rp-color-danger-subtle-bg-active: #611623;
205
- --rp-color-danger-border: #8c333a;
206
- --rp-color-danger-border-hover: #b54548;
207
- --rp-color-danger-fg: #ff9592;
208
- --rp-color-info-subtle-bg: #082c36;
209
- --rp-color-info-subtle-bg-hover: #003848;
210
- --rp-color-info-subtle-bg-active: #004558;
211
- --rp-color-info-border: #12677e;
212
- --rp-color-info-border-hover: #11809c;
213
- --rp-color-info-fg: #4ccce6;
214
- --rp-color-neutral-subtle-bg: #222222;
215
- --rp-color-neutral-subtle-bg-hover: #2a2a2a;
216
- --rp-color-neutral-subtle-bg-active: #313131;
217
- --rp-color-neutral-border: #484848;
218
- --rp-color-neutral-border-hover: #606060;
219
- --rp-color-neutral-fg: #eeeeee;
508
+ html.dark,
509
+ [data-rp-color-scheme=dark] {
510
+ --rp-color-dark-filled: var(--rp-color-dark-8);
511
+ --rp-color-dark-filled-hover: var(--rp-color-dark-9);
512
+ --rp-color-dark-contrast: var(--rp-color-white);
513
+ --rp-color-dark-light: color-mix(in srgb, var(--rp-color-dark-9) 50%, var(--rp-color-black));
514
+ --rp-color-dark-light-hover: color-mix(in srgb, var(--rp-color-dark-9) 70%, var(--rp-color-black));
515
+ --rp-color-dark-light-color: var(--rp-color-dark-0);
516
+ --rp-color-dark-outline: var(--rp-color-dark-4);
517
+ --rp-color-dark-outline-hover: color-mix(in srgb, var(--rp-color-dark-4) 5%, transparent);
518
+ --rp-color-gray-filled: var(--rp-color-gray-8);
519
+ --rp-color-gray-filled-hover: var(--rp-color-gray-9);
520
+ --rp-color-gray-contrast: var(--rp-color-white);
521
+ --rp-color-gray-light: color-mix(in srgb, var(--rp-color-gray-9) 50%, var(--rp-color-black));
522
+ --rp-color-gray-light-hover: color-mix(in srgb, var(--rp-color-gray-9) 70%, var(--rp-color-black));
523
+ --rp-color-gray-light-color: var(--rp-color-gray-0);
524
+ --rp-color-gray-outline: var(--rp-color-gray-4);
525
+ --rp-color-gray-outline-hover: color-mix(in srgb, var(--rp-color-gray-4) 5%, transparent);
526
+ --rp-color-red-filled: var(--rp-color-red-8);
527
+ --rp-color-red-filled-hover: var(--rp-color-red-9);
528
+ --rp-color-red-contrast: var(--rp-color-black);
529
+ --rp-color-red-light: color-mix(in srgb, var(--rp-color-red-9) 50%, var(--rp-color-black));
530
+ --rp-color-red-light-hover: color-mix(in srgb, var(--rp-color-red-9) 70%, var(--rp-color-black));
531
+ --rp-color-red-light-color: var(--rp-color-red-0);
532
+ --rp-color-red-outline: var(--rp-color-red-4);
533
+ --rp-color-red-outline-hover: color-mix(in srgb, var(--rp-color-red-4) 5%, transparent);
534
+ --rp-color-pink-filled: var(--rp-color-pink-8);
535
+ --rp-color-pink-filled-hover: var(--rp-color-pink-9);
536
+ --rp-color-pink-contrast: var(--rp-color-white);
537
+ --rp-color-pink-light: color-mix(in srgb, var(--rp-color-pink-9) 50%, var(--rp-color-black));
538
+ --rp-color-pink-light-hover: color-mix(in srgb, var(--rp-color-pink-9) 70%, var(--rp-color-black));
539
+ --rp-color-pink-light-color: var(--rp-color-pink-0);
540
+ --rp-color-pink-outline: var(--rp-color-pink-4);
541
+ --rp-color-pink-outline-hover: color-mix(in srgb, var(--rp-color-pink-4) 5%, transparent);
542
+ --rp-color-grape-filled: var(--rp-color-grape-8);
543
+ --rp-color-grape-filled-hover: var(--rp-color-grape-9);
544
+ --rp-color-grape-contrast: var(--rp-color-white);
545
+ --rp-color-grape-light: color-mix(in srgb, var(--rp-color-grape-9) 50%, var(--rp-color-black));
546
+ --rp-color-grape-light-hover: color-mix(in srgb, var(--rp-color-grape-9) 70%, var(--rp-color-black));
547
+ --rp-color-grape-light-color: var(--rp-color-grape-0);
548
+ --rp-color-grape-outline: var(--rp-color-grape-4);
549
+ --rp-color-grape-outline-hover: color-mix(in srgb, var(--rp-color-grape-4) 5%, transparent);
550
+ --rp-color-violet-filled: var(--rp-color-violet-8);
551
+ --rp-color-violet-filled-hover: var(--rp-color-violet-9);
552
+ --rp-color-violet-contrast: var(--rp-color-white);
553
+ --rp-color-violet-light: color-mix(in srgb, var(--rp-color-violet-9) 50%, var(--rp-color-black));
554
+ --rp-color-violet-light-hover: color-mix(in srgb, var(--rp-color-violet-9) 70%, var(--rp-color-black));
555
+ --rp-color-violet-light-color: var(--rp-color-violet-0);
556
+ --rp-color-violet-outline: var(--rp-color-violet-4);
557
+ --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-4) 5%, transparent);
558
+ --rp-color-indigo-filled: var(--rp-color-indigo-8);
559
+ --rp-color-indigo-filled-hover: var(--rp-color-indigo-9);
560
+ --rp-color-indigo-contrast: var(--rp-color-white);
561
+ --rp-color-indigo-light: color-mix(in srgb, var(--rp-color-indigo-9) 50%, var(--rp-color-black));
562
+ --rp-color-indigo-light-hover: color-mix(in srgb, var(--rp-color-indigo-9) 70%, var(--rp-color-black));
563
+ --rp-color-indigo-light-color: var(--rp-color-indigo-0);
564
+ --rp-color-indigo-outline: var(--rp-color-indigo-4);
565
+ --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-4) 5%, transparent);
566
+ --rp-color-blue-filled: var(--rp-color-blue-8);
567
+ --rp-color-blue-filled-hover: var(--rp-color-blue-9);
568
+ --rp-color-blue-contrast: var(--rp-color-white);
569
+ --rp-color-blue-light: color-mix(in srgb, var(--rp-color-blue-9) 50%, var(--rp-color-black));
570
+ --rp-color-blue-light-hover: color-mix(in srgb, var(--rp-color-blue-9) 70%, var(--rp-color-black));
571
+ --rp-color-blue-light-color: var(--rp-color-blue-0);
572
+ --rp-color-blue-outline: var(--rp-color-blue-4);
573
+ --rp-color-blue-outline-hover: color-mix(in srgb, var(--rp-color-blue-4) 5%, transparent);
574
+ --rp-color-cyan-filled: var(--rp-color-cyan-8);
575
+ --rp-color-cyan-filled-hover: var(--rp-color-cyan-9);
576
+ --rp-color-cyan-contrast: var(--rp-color-black);
577
+ --rp-color-cyan-light: color-mix(in srgb, var(--rp-color-cyan-9) 50%, var(--rp-color-black));
578
+ --rp-color-cyan-light-hover: color-mix(in srgb, var(--rp-color-cyan-9) 70%, var(--rp-color-black));
579
+ --rp-color-cyan-light-color: var(--rp-color-cyan-0);
580
+ --rp-color-cyan-outline: var(--rp-color-cyan-4);
581
+ --rp-color-cyan-outline-hover: color-mix(in srgb, var(--rp-color-cyan-4) 5%, transparent);
582
+ --rp-color-teal-filled: var(--rp-color-teal-8);
583
+ --rp-color-teal-filled-hover: var(--rp-color-teal-9);
584
+ --rp-color-teal-contrast: var(--rp-color-black);
585
+ --rp-color-teal-light: color-mix(in srgb, var(--rp-color-teal-9) 50%, var(--rp-color-black));
586
+ --rp-color-teal-light-hover: color-mix(in srgb, var(--rp-color-teal-9) 70%, var(--rp-color-black));
587
+ --rp-color-teal-light-color: var(--rp-color-teal-0);
588
+ --rp-color-teal-outline: var(--rp-color-teal-4);
589
+ --rp-color-teal-outline-hover: color-mix(in srgb, var(--rp-color-teal-4) 5%, transparent);
590
+ --rp-color-green-filled: var(--rp-color-green-8);
591
+ --rp-color-green-filled-hover: var(--rp-color-green-9);
592
+ --rp-color-green-contrast: var(--rp-color-black);
593
+ --rp-color-green-light: color-mix(in srgb, var(--rp-color-green-9) 50%, var(--rp-color-black));
594
+ --rp-color-green-light-hover: color-mix(in srgb, var(--rp-color-green-9) 70%, var(--rp-color-black));
595
+ --rp-color-green-light-color: var(--rp-color-green-0);
596
+ --rp-color-green-outline: var(--rp-color-green-4);
597
+ --rp-color-green-outline-hover: color-mix(in srgb, var(--rp-color-green-4) 5%, transparent);
598
+ --rp-color-lime-filled: var(--rp-color-lime-8);
599
+ --rp-color-lime-filled-hover: var(--rp-color-lime-9);
600
+ --rp-color-lime-contrast: var(--rp-color-black);
601
+ --rp-color-lime-light: color-mix(in srgb, var(--rp-color-lime-9) 50%, var(--rp-color-black));
602
+ --rp-color-lime-light-hover: color-mix(in srgb, var(--rp-color-lime-9) 70%, var(--rp-color-black));
603
+ --rp-color-lime-light-color: var(--rp-color-lime-0);
604
+ --rp-color-lime-outline: var(--rp-color-lime-4);
605
+ --rp-color-lime-outline-hover: color-mix(in srgb, var(--rp-color-lime-4) 5%, transparent);
606
+ --rp-color-yellow-filled: var(--rp-color-yellow-8);
607
+ --rp-color-yellow-filled-hover: var(--rp-color-yellow-9);
608
+ --rp-color-yellow-contrast: var(--rp-color-black);
609
+ --rp-color-yellow-light: color-mix(in srgb, var(--rp-color-yellow-9) 50%, var(--rp-color-black));
610
+ --rp-color-yellow-light-hover: color-mix(in srgb, var(--rp-color-yellow-9) 70%, var(--rp-color-black));
611
+ --rp-color-yellow-light-color: var(--rp-color-yellow-0);
612
+ --rp-color-yellow-outline: var(--rp-color-yellow-4);
613
+ --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-4) 5%, transparent);
614
+ --rp-color-orange-filled: var(--rp-color-orange-8);
615
+ --rp-color-orange-filled-hover: var(--rp-color-orange-9);
616
+ --rp-color-orange-contrast: var(--rp-color-black);
617
+ --rp-color-orange-light: color-mix(in srgb, var(--rp-color-orange-9) 50%, var(--rp-color-black));
618
+ --rp-color-orange-light-hover: color-mix(in srgb, var(--rp-color-orange-9) 70%, var(--rp-color-black));
619
+ --rp-color-orange-light-color: var(--rp-color-orange-0);
620
+ --rp-color-orange-outline: var(--rp-color-orange-4);
621
+ --rp-color-orange-outline-hover: color-mix(in srgb, var(--rp-color-orange-4) 5%, transparent);
622
+ --rp-color-scheme: dark;
623
+ --rp-color-bright: var(--rp-color-white);
624
+ --rp-color-text: var(--rp-color-dark-0);
625
+ --rp-color-body: var(--rp-color-dark-7);
626
+ --rp-color-placeholder: var(--rp-color-dark-3);
627
+ --rp-color-default: var(--rp-color-dark-6);
628
+ --rp-color-default-hover: var(--rp-color-dark-5);
629
+ --rp-color-default-color: var(--rp-color-white);
630
+ --rp-color-default-border: var(--rp-color-dark-4);
631
+ --rp-color-default-border-hover: var(--rp-color-dark-3);
632
+ --rp-color-dimmed: var(--rp-color-dark-2);
633
+ --rp-color-disabled: var(--rp-color-dark-6);
634
+ --rp-color-disabled-color: var(--rp-color-dark-3);
635
+ --rp-color-disabled-border: var(--rp-color-dark-4);
636
+ --rp-color-focus-ring: color-mix(in srgb, var(--rp-primary-color-filled) 45%, transparent);
637
+ --rp-color-control-bg: var(--rp-color-default);
638
+ --rp-color-control-readonly-bg: var(--rp-color-default-hover);
639
+ --rp-color-control-fg: var(--rp-color-default-color);
640
+ --rp-color-control-placeholder: var(--rp-color-placeholder);
641
+ --rp-color-control-icon: var(--rp-color-dimmed);
642
+ --rp-color-control-border: var(--rp-color-default-border);
643
+ --rp-color-control-border-hover: var(--rp-color-default-border-hover);
644
+ --rp-color-control-border-focus: var(--rp-primary-color-filled);
645
+ --rp-color-control-track-bg: var(--rp-color-disabled-border);
646
+ --rp-color-control-thumb-bg: var(--rp-color-white);
647
+ --rp-color-control-selected-bg: var(--rp-primary-color-filled);
648
+ --rp-color-control-selected-fg: var(--rp-color-white);
220
649
  --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
221
650
  --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
222
651
  --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);