ropav 0.0.7 → 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 (191) hide show
  1. package/dist/accordion.css +10 -10
  2. package/dist/accordion.js +2 -4
  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 -18
  11. package/dist/base.css +609 -180
  12. package/dist/bem.js +0 -2
  13. package/dist/button-group.js +0 -2
  14. package/dist/button-link.css +161 -0
  15. package/dist/button-link.js +108 -0
  16. package/dist/button.css +50 -229
  17. package/dist/button.js +7 -11
  18. package/dist/card.css +50 -30
  19. package/dist/card.js +69 -38
  20. package/dist/check.js +12 -0
  21. package/dist/checkbox.css +16 -57
  22. package/dist/checkbox.js +14 -33
  23. package/dist/collapse.css +8 -8
  24. package/dist/collapse.js +4 -10
  25. package/dist/color-input.css +108 -0
  26. package/dist/color-input.js +344 -0
  27. package/dist/color-picker.css +304 -0
  28. package/dist/color-picker.js +717 -0
  29. package/dist/color-picker2.js +18 -0
  30. package/dist/color-swatch.css +50 -0
  31. package/dist/color-swatch.js +73 -0
  32. package/dist/color.js +190 -0
  33. package/dist/componentColors.js +206 -15
  34. package/dist/components/alert/alert.d.ts +30 -0
  35. package/dist/components/alert/index.d.ts +3 -0
  36. package/dist/components/alert/index.js +2 -0
  37. package/dist/components/alert/types.d.ts +20 -0
  38. package/dist/components/alert/useAlertColor.d.ts +3 -0
  39. package/dist/components/aspect-ratio/aspect-ratio.d.ts +21 -0
  40. package/dist/components/aspect-ratio/index.d.ts +2 -0
  41. package/dist/components/aspect-ratio/index.js +2 -0
  42. package/dist/components/aspect-ratio/types.d.ts +3 -0
  43. package/dist/components/avatar/avatar.d.ts +24 -0
  44. package/dist/components/avatar/index.d.ts +3 -0
  45. package/dist/components/avatar/index.js +2 -0
  46. package/dist/components/avatar/types.d.ts +20 -0
  47. package/dist/components/avatar/useAvatarColor.d.ts +3 -0
  48. package/dist/components/badge/types.d.ts +2 -1
  49. package/dist/components/badge/useBadgeColor.d.ts +3 -8
  50. package/dist/components/button/types.d.ts +1 -0
  51. package/dist/components/button/useButtonColor.d.ts +3 -13
  52. package/dist/components/button-link/button-link.d.ts +27 -0
  53. package/dist/components/button-link/index.d.ts +2 -0
  54. package/dist/components/button-link/index.js +2 -0
  55. package/dist/components/button-link/types.d.ts +20 -0
  56. package/dist/components/card/card.d.ts +4 -0
  57. package/dist/components/card/types.d.ts +4 -0
  58. package/dist/components/checkbox/types.d.ts +1 -0
  59. package/dist/components/checkbox/useCheckbox.d.ts +2 -4
  60. package/dist/components/collapse/types.d.ts +0 -2
  61. package/dist/components/color-input/color-input.d.ts +29 -0
  62. package/dist/components/color-input/index.d.ts +2 -0
  63. package/dist/components/color-input/index.js +2 -0
  64. package/dist/components/color-input/types.d.ts +34 -0
  65. package/dist/components/color-input/useColorInput.d.ts +27 -0
  66. package/dist/components/color-input/useColorInputEyeDropper.d.ts +13 -0
  67. package/dist/components/color-input/useColorInputPopover.d.ts +11 -0
  68. package/dist/components/color-input/useColorInputValue.d.ts +8 -0
  69. package/dist/components/color-picker/color-picker-saturation.d.ts +21 -0
  70. package/dist/components/color-picker/color-picker-slider.d.ts +21 -0
  71. package/dist/components/color-picker/color-picker-utils.d.ts +23 -0
  72. package/dist/components/color-picker/color-picker.d.ts +23 -0
  73. package/dist/components/color-picker/index.d.ts +3 -0
  74. package/dist/components/color-picker/index.js +3 -0
  75. package/dist/components/color-picker/types.d.ts +39 -0
  76. package/dist/components/color-picker/useColorPickerDrag.d.ts +11 -0
  77. package/dist/components/color-picker/useColorPickerSwatches.d.ts +21 -0
  78. package/dist/components/color-picker/useColorPickerValue.d.ts +15 -0
  79. package/dist/components/color-swatch/color-swatch.d.ts +21 -0
  80. package/dist/components/color-swatch/index.d.ts +2 -0
  81. package/dist/components/color-swatch/index.js +2 -0
  82. package/dist/components/color-swatch/types.d.ts +6 -0
  83. package/dist/components/color-swatch/useColorSwatchColor.d.ts +5 -0
  84. package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
  85. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +1 -1
  86. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -1
  87. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +1 -1
  88. package/dist/components/field/types.d.ts +0 -2
  89. package/dist/components/field/useField.d.ts +1 -2
  90. package/dist/components/icon-button/types.d.ts +1 -0
  91. package/dist/components/input/types.d.ts +3 -0
  92. package/dist/components/modal/types.d.ts +0 -1
  93. package/dist/components/number-input/index.d.ts +2 -0
  94. package/dist/components/number-input/index.js +2 -0
  95. package/dist/components/number-input/number-input.d.ts +29 -0
  96. package/dist/components/number-input/types.d.ts +34 -0
  97. package/dist/components/number-input/useNumberInput.d.ts +31 -0
  98. package/dist/components/popover/index.d.ts +1 -0
  99. package/dist/components/popover/index.js +2 -1
  100. package/dist/components/popover/types.d.ts +6 -2
  101. package/dist/components/popover/usePopover.d.ts +5 -2
  102. package/dist/components/progress/types.d.ts +1 -1
  103. package/dist/components/radio/types.d.ts +3 -0
  104. package/dist/components/radio/useRadio.d.ts +2 -4
  105. package/dist/components/select/index.d.ts +1 -1
  106. package/dist/components/select/types.d.ts +3 -0
  107. package/dist/components/slider/index.d.ts +2 -1
  108. package/dist/components/slider/index.js +2 -2
  109. package/dist/components/slider/range-slider.d.ts +45 -0
  110. package/dist/components/slider/types.d.ts +14 -2
  111. package/dist/components/slider/useRangeSlider.d.ts +59 -0
  112. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +7 -0
  113. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +4 -0
  114. package/dist/components/switch/useSwitch.d.ts +2 -3
  115. package/dist/components/tooltip/types.d.ts +1 -0
  116. package/dist/dropdown-menu.css +17 -17
  117. package/dist/dropdown-menu.js +0 -2
  118. package/dist/field.css +17 -17
  119. package/dist/field.js +56 -51
  120. package/dist/icon-button.css +57 -236
  121. package/dist/icon-button.js +5 -8
  122. package/dist/index.d.ts +8 -0
  123. package/dist/index.js +16 -4
  124. package/dist/input.css +40 -46
  125. package/dist/input.js +39 -23
  126. package/dist/minus.js +12 -0
  127. package/dist/modal.css +37 -37
  128. package/dist/modal.js +10 -16
  129. package/dist/number-input.css +86 -0
  130. package/dist/number-input.js +350 -0
  131. package/dist/overlay.css +5 -5
  132. package/dist/overlay.js +3 -5
  133. package/dist/popover.css +62 -29
  134. package/dist/popover.js +25 -12
  135. package/dist/popover2.js +17 -0
  136. package/dist/progress.css +9 -30
  137. package/dist/progress.js +3 -8
  138. package/dist/radio.css +34 -62
  139. package/dist/radio.js +28 -18
  140. package/dist/select.css +105 -61
  141. package/dist/select.js +12 -10
  142. package/dist/slider.css +508 -41
  143. package/dist/slider.js +1122 -50
  144. package/dist/switch.css +19 -44
  145. package/dist/switch.js +4 -7
  146. package/dist/tabs.css +36 -36
  147. package/dist/tabs.js +1 -3
  148. package/dist/textarea.css +33 -25
  149. package/dist/textarea.js +0 -2
  150. package/dist/tooltip.css +7 -35
  151. package/dist/tooltip.js +13 -10
  152. package/dist/useButtonColor.js +16 -16
  153. package/dist/useClickOutside.js +0 -2
  154. package/dist/useCollapse.js +1 -3
  155. package/dist/useControlState.js +0 -2
  156. package/dist/useRequiredInject.js +0 -2
  157. package/dist/x.js +0 -2
  158. package/package.json +43 -7
  159. package/src/styles/_mixins.scss +25 -41
  160. package/src/styles/_tokens.scss +615 -182
  161. package/src/styles/_variables.scss +177 -49
  162. package/dist/accordion.js.map +0 -1
  163. package/dist/badge.js.map +0 -1
  164. package/dist/bem.js.map +0 -1
  165. package/dist/button-group.js.map +0 -1
  166. package/dist/button.js.map +0 -1
  167. package/dist/card.js.map +0 -1
  168. package/dist/checkbox.js.map +0 -1
  169. package/dist/collapse.js.map +0 -1
  170. package/dist/componentColors.js.map +0 -1
  171. package/dist/dropdown-menu.js.map +0 -1
  172. package/dist/field.js.map +0 -1
  173. package/dist/icon-button.js.map +0 -1
  174. package/dist/input.js.map +0 -1
  175. package/dist/modal.js.map +0 -1
  176. package/dist/overlay.js.map +0 -1
  177. package/dist/popover.js.map +0 -1
  178. package/dist/progress.js.map +0 -1
  179. package/dist/radio.js.map +0 -1
  180. package/dist/select.js.map +0 -1
  181. package/dist/slider.js.map +0 -1
  182. package/dist/switch.js.map +0 -1
  183. package/dist/tabs.js.map +0 -1
  184. package/dist/textarea.js.map +0 -1
  185. package/dist/tooltip.js.map +0 -1
  186. package/dist/useButtonColor.js.map +0 -1
  187. package/dist/useClickOutside.js.map +0 -1
  188. package/dist/useCollapse.js.map +0 -1
  189. package/dist/useControlState.js.map +0 -1
  190. package/dist/useRequiredInject.js.map +0 -1
  191. package/dist/x.js.map +0 -1
package/dist/color-picker.css ADDED
@@ -0,0 +1,304 @@
1
+ .rp-color-picker__saturation[data-v-0ff88f34] {
2
+ position: relative;
3
+ box-sizing: border-box;
4
+ width: var(--_rp-color-picker-control-width);
5
+ height: var(--_rp-color-picker-saturation-control-height);
6
+ margin-block: var(--_rp-color-picker-thumb-radius);
7
+ margin-inline: var(--_rp-color-picker-thumb-radius);
8
+ overflow: visible;
9
+ touch-action: none;
10
+ cursor: crosshair;
11
+ }
12
+ .rp-color-picker__saturation[data-v-0ff88f34]:focus-visible {
13
+ outline: none;
14
+ }
15
+ .rp-color-picker__saturation[data-readonly=true][data-v-0ff88f34] {
16
+ cursor: default;
17
+ }
18
+ .rp-color-picker__axis-input[data-v-0ff88f34] {
19
+ position: absolute;
20
+ width: 1px;
21
+ height: 1px;
22
+ padding: 0;
23
+ margin: -1px;
24
+ overflow: hidden;
25
+ clip: rect(0, 0, 0, 0);
26
+ white-space: nowrap;
27
+ border-width: 0;
28
+ pointer-events: none;
29
+ }
30
+ .rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-0ff88f34] {
31
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
32
+ }
33
+ .rp-color-picker__surface[data-v-0ff88f34] {
34
+ position: absolute;
35
+ inset: calc(-1 * var(--_rp-color-picker-thumb-radius));
36
+ overflow: hidden;
37
+ border-radius: var(--_rp-color-picker-saturation-radius);
38
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
39
+ background: linear-gradient(to top, #000 0 var(--_rp-color-picker-thumb-radius), rgba(0, 0, 0, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), linear-gradient(to right, #fff 0 var(--_rp-color-picker-thumb-radius), rgba(255, 255, 255, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), hsl(var(--_rp-color-picker-hue), 100%, 50%);
40
+ }
41
+ .rp-color-picker__handle[data-v-0ff88f34] {
42
+ position: absolute;
43
+ top: var(--_rp-color-picker-saturation-y);
44
+ left: var(--_rp-color-picker-saturation-x);
45
+ box-sizing: border-box;
46
+ width: var(--_rp-color-picker-thumb-size);
47
+ height: var(--_rp-color-picker-thumb-size);
48
+ z-index: 1;
49
+ background-color: var(--_rp-color-picker-current);
50
+ border: 2px solid var(--rp-color-white);
51
+ border-radius: var(--rp-radius-full);
52
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
53
+ pointer-events: none;
54
+ transform: translate(-50%, -50%);
55
+ }.rp-color-picker__hue[data-v-d0c81f73], .rp-color-picker__opacity[data-v-d0c81f73] {
56
+ position: relative;
57
+ box-sizing: border-box;
58
+ width: var(--_rp-color-picker-control-width);
59
+ height: max(var(--_rp-color-picker-target-min-size), var(--_rp-color-picker-hue-height), var(--_rp-color-picker-thumb-size));
60
+ margin-inline: var(--_rp-color-picker-thumb-radius);
61
+ overflow: visible;
62
+ touch-action: none;
63
+ cursor: pointer;
64
+ }
65
+ .rp-color-picker__hue[data-v-d0c81f73]:focus-visible, .rp-color-picker__opacity[data-v-d0c81f73]:focus-visible {
66
+ outline: none;
67
+ }
68
+ .rp-color-picker__hue[data-readonly=true][data-v-d0c81f73], .rp-color-picker__opacity[data-readonly=true][data-v-d0c81f73] {
69
+ cursor: default;
70
+ }
71
+ .rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73] {
72
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
73
+ }
74
+ .rp-color-picker__hue[data-v-d0c81f73] {
75
+ margin-block-start: var(--_rp-color-picker-saturation-slider-gap);
76
+ }
77
+ .rp-color-picker__opacity[data-v-d0c81f73] {
78
+ margin-block-start: var(--_rp-color-picker-slider-gap);
79
+ }
80
+ .rp-color-picker__slider-surface[data-v-d0c81f73] {
81
+ position: absolute;
82
+ top: 50%;
83
+ right: calc(-1 * var(--_rp-color-picker-thumb-radius));
84
+ left: calc(-1 * var(--_rp-color-picker-thumb-radius));
85
+ height: var(--_rp-color-picker-hue-height);
86
+ overflow: hidden;
87
+ border-radius: var(--rp-radius-full);
88
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
89
+ transform: translateY(-50%);
90
+ }
91
+ .rp-color-picker__hue-surface[data-v-d0c81f73] {
92
+ background: hsl(0, 100%, 50%);
93
+ }
94
+ .rp-color-picker__hue-surface[data-v-d0c81f73]::before {
95
+ position: absolute;
96
+ inset: 0 var(--_rp-color-picker-thumb-radius);
97
+ content: "";
98
+ background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
99
+ }
100
+ .rp-color-picker__opacity-surface[data-v-d0c81f73] {
101
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--_rp-color-picker-opacity-color)), var(--_rp-color-picker-checkerboard);
102
+ background-size: auto, var(--_rp-color-picker-checkerboard-size);
103
+ }
104
+ .rp-color-picker__slider-handle[data-v-d0c81f73] {
105
+ position: absolute;
106
+ top: 50%;
107
+ left: var(--_rp-color-picker-slider-x);
108
+ box-sizing: border-box;
109
+ width: var(--_rp-color-picker-thumb-size);
110
+ height: var(--_rp-color-picker-thumb-size);
111
+ z-index: 1;
112
+ border: 2px solid var(--rp-color-white);
113
+ border-radius: var(--rp-radius-full);
114
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
115
+ pointer-events: none;
116
+ transform: translate(-50%, -50%);
117
+ }
118
+ .rp-color-picker__hue-handle[data-v-d0c81f73] {
119
+ background-color: hsl(var(--_rp-color-picker-hue), 100%, 50%);
120
+ }
121
+ .rp-color-picker__opacity-handle[data-v-d0c81f73] {
122
+ background-color: var(--_rp-color-picker-opacity-color);
123
+ }.rp-color-picker[data-v-38eeea2b] {
124
+ --_rp-color-picker-saturation-width: 220px;
125
+ --_rp-color-picker-saturation-height: 160px;
126
+ --_rp-color-picker-hue-height: 14px;
127
+ --_rp-color-picker-saturation-slider-gap: var(--rp-spacing-4);
128
+ --_rp-color-picker-slider-gap: var(--rp-spacing-2);
129
+ --_rp-color-picker-header-gap: var(--rp-spacing-2);
130
+ --_rp-color-picker-swatches-gap: var(--rp-spacing-1);
131
+ --_rp-color-picker-swatches-margin: var(--rp-spacing-3);
132
+ --_rp-color-picker-swatch-size: 24px;
133
+ --_rp-color-picker-thumb-size: 14px;
134
+ --_rp-color-picker-target-min-size: 24px;
135
+ --_rp-color-picker-font-size: var(--rp-font-size-md);
136
+ --_rp-color-picker-thumb-radius: calc(var(--_rp-color-picker-thumb-size) / 2);
137
+ --_rp-color-picker-saturation-radius: var(--_rp-color-picker-thumb-radius);
138
+ --_rp-color-picker-size: var(--_rp-color-picker-saturation-width);
139
+ --_rp-color-picker-control-width: max(0px, calc(100% - var(--_rp-color-picker-thumb-size)));
140
+ --_rp-color-picker-saturation-control-height: max(
141
+ 0px,
142
+ calc(var(--_rp-color-picker-saturation-height) - var(--_rp-color-picker-thumb-size))
143
+ );
144
+ --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-3);
145
+ --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-white);
146
+ --_rp-color-picker-checkerboard: conic-gradient(
147
+ var(--_rp-color-picker-checkerboard-tile) 25%,
148
+ var(--_rp-color-picker-checkerboard-tile-alt) 0 50%,
149
+ var(--_rp-color-picker-checkerboard-tile) 0 75%,
150
+ var(--_rp-color-picker-checkerboard-tile-alt) 0
151
+ );
152
+ --_rp-color-picker-checkerboard-size: var(--_rp-color-picker-hue-height)
153
+ var(--_rp-color-picker-hue-height);
154
+ display: inline-grid;
155
+ box-sizing: border-box;
156
+ width: var(--_rp-color-picker-size);
157
+ max-width: 100%;
158
+ row-gap: 0;
159
+ font-family: var(--rp-font-family);
160
+ font-size: var(--_rp-color-picker-font-size);
161
+ font-weight: var(--rp-font-weight-normal);
162
+ color: var(--rp-color-text);
163
+ user-select: none;
164
+ vertical-align: top;
165
+ }
166
+ html.dark .rp-color-picker[data-v-38eeea2b], [data-rp-color-scheme=dark] .rp-color-picker[data-v-38eeea2b] {
167
+ --_rp-color-picker-checkerboard-tile: var(--rp-color-dark-6);
168
+ --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-dark-4);
169
+ }
170
+ .rp-color-picker--readonly[data-v-38eeea2b] {
171
+ cursor: default;
172
+ }
173
+ .rp-color-picker--size-xs[data-v-38eeea2b] {
174
+ --_rp-color-picker-saturation-width: 160px;
175
+ --_rp-color-picker-saturation-height: 120px;
176
+ --_rp-color-picker-hue-height: 10px;
177
+ --_rp-color-picker-saturation-slider-gap: 8px;
178
+ --_rp-color-picker-slider-gap: 4px;
179
+ --_rp-color-picker-header-gap: 4px;
180
+ --_rp-color-picker-swatches-gap: 2px;
181
+ --_rp-color-picker-swatches-margin: 8px;
182
+ --_rp-color-picker-swatch-size: 16px;
183
+ --_rp-color-picker-thumb-size: 10px;
184
+ --_rp-color-picker-font-size: var(--rp-font-size-xs);
185
+ }
186
+ .rp-color-picker--size-sm[data-v-38eeea2b] {
187
+ --_rp-color-picker-saturation-width: 190px;
188
+ --_rp-color-picker-saturation-height: 140px;
189
+ --_rp-color-picker-hue-height: 12px;
190
+ --_rp-color-picker-saturation-slider-gap: 12px;
191
+ --_rp-color-picker-slider-gap: 6px;
192
+ --_rp-color-picker-header-gap: 6px;
193
+ --_rp-color-picker-swatches-gap: 3px;
194
+ --_rp-color-picker-swatches-margin: 10px;
195
+ --_rp-color-picker-swatch-size: 20px;
196
+ --_rp-color-picker-thumb-size: 12px;
197
+ --_rp-color-picker-font-size: var(--rp-font-size-sm);
198
+ }
199
+ .rp-color-picker--size-md[data-v-38eeea2b] {
200
+ --_rp-color-picker-saturation-width: 220px;
201
+ --_rp-color-picker-saturation-height: 160px;
202
+ --_rp-color-picker-hue-height: 14px;
203
+ --_rp-color-picker-saturation-slider-gap: 16px;
204
+ --_rp-color-picker-slider-gap: 8px;
205
+ --_rp-color-picker-header-gap: 8px;
206
+ --_rp-color-picker-swatches-gap: 4px;
207
+ --_rp-color-picker-swatches-margin: 12px;
208
+ --_rp-color-picker-swatch-size: 24px;
209
+ --_rp-color-picker-thumb-size: 14px;
210
+ --_rp-color-picker-font-size: var(--rp-font-size-md);
211
+ }
212
+ .rp-color-picker--size-lg[data-v-38eeea2b] {
213
+ --_rp-color-picker-saturation-width: 260px;
214
+ --_rp-color-picker-saturation-height: 190px;
215
+ --_rp-color-picker-hue-height: 18px;
216
+ --_rp-color-picker-saturation-slider-gap: 20px;
217
+ --_rp-color-picker-slider-gap: 10px;
218
+ --_rp-color-picker-header-gap: 10px;
219
+ --_rp-color-picker-swatches-gap: 5px;
220
+ --_rp-color-picker-swatches-margin: 16px;
221
+ --_rp-color-picker-swatch-size: 30px;
222
+ --_rp-color-picker-thumb-size: 18px;
223
+ --_rp-color-picker-font-size: var(--rp-font-size-lg);
224
+ }
225
+ .rp-color-picker--size-xl[data-v-38eeea2b] {
226
+ --_rp-color-picker-saturation-width: 300px;
227
+ --_rp-color-picker-saturation-height: 220px;
228
+ --_rp-color-picker-hue-height: 22px;
229
+ --_rp-color-picker-saturation-slider-gap: 24px;
230
+ --_rp-color-picker-slider-gap: 12px;
231
+ --_rp-color-picker-header-gap: 12px;
232
+ --_rp-color-picker-swatches-gap: 6px;
233
+ --_rp-color-picker-swatches-margin: 20px;
234
+ --_rp-color-picker-swatch-size: 36px;
235
+ --_rp-color-picker-thumb-size: 22px;
236
+ --_rp-color-picker-font-size: var(--rp-font-size-xl);
237
+ }
238
+ .rp-color-picker__label[data-v-38eeea2b] {
239
+ display: block;
240
+ overflow: hidden;
241
+ color: var(--rp-color-text);
242
+ line-height: var(--rp-line-height-sm);
243
+ text-overflow: ellipsis;
244
+ white-space: nowrap;
245
+ }
246
+ .rp-color-picker__header[data-v-38eeea2b] {
247
+ margin-block-end: var(--_rp-color-picker-header-gap);
248
+ }
249
+ .rp-color-picker__swatches[data-v-38eeea2b] {
250
+ display: flex;
251
+ flex-wrap: wrap;
252
+ gap: var(--_rp-color-picker-swatches-gap);
253
+ }
254
+ .rp-color-picker__swatches[data-with-picker=true][data-v-38eeea2b] {
255
+ margin-block-start: var(--_rp-color-picker-swatches-margin);
256
+ }
257
+ .rp-color-picker__swatches[data-fill=true][data-v-38eeea2b] {
258
+ display: grid;
259
+ grid-template-columns: repeat(var(--_rp-color-picker-swatches-per-row), minmax(var(--_rp-color-picker-target-min-size), 1fr));
260
+ width: 100%;
261
+ overflow-x: auto;
262
+ }
263
+ .rp-color-picker__swatch[data-v-38eeea2b] {
264
+ position: relative;
265
+ box-sizing: border-box;
266
+ display: inline-flex;
267
+ align-items: center;
268
+ justify-content: center;
269
+ min-width: var(--_rp-color-picker-target-min-size);
270
+ min-height: var(--_rp-color-picker-target-min-size);
271
+ padding: 0;
272
+ flex: 0 0 auto;
273
+ appearance: none;
274
+ cursor: pointer;
275
+ background: transparent;
276
+ border: 0;
277
+ border-radius: var(--rp-radius-sm);
278
+ box-shadow: none;
279
+ line-height: 0;
280
+ }
281
+ .rp-color-picker__swatch[data-v-38eeea2b]:focus-visible {
282
+ outline: none;
283
+ border-color: var(--rp-color-control-border-focus);
284
+ box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
285
+ }
286
+ .rp-color-picker__swatch[data-v-38eeea2b]:disabled {
287
+ opacity: var(--rp-opacity-disabled);
288
+ cursor: not-allowed;
289
+ cursor: default;
290
+ }
291
+ .rp-color-picker__swatch[data-v-38eeea2b] > .rp-color-swatch {
292
+ pointer-events: none;
293
+ }
294
+ .rp-color-picker__swatch-check[data-v-38eeea2b] {
295
+ stroke-width: 3;
296
+ }
297
+ .rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-38eeea2b] {
298
+ width: 100%;
299
+ aspect-ratio: 1;
300
+ }
301
+ .rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-38eeea2b] > .rp-color-swatch {
302
+ width: 100%;
303
+ height: 100%;
304
+ }