ropav 0.0.9 → 0.0.11

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