@packyoung98/vcolor 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +302 -0
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/vcolor.css +2 -0
- package/dist/vcolor.js +1447 -0
- package/dist/vcolor.umd.cjs +1 -0
- package/package.json +38 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 packyoung98
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
# vcolor
|
|
2
|
+
|
|
3
|
+
Vue 3 전용 컬러 피커 라이브러리. 완전한 `v-model` 지원, CSS 변수 기반 커스터마이징, 그리고 13종의 피커 컴포넌트를 제공합니다.
|
|
4
|
+
|
|
5
|
+
react-color / vue-color의 컴포넌트 구성을 따르되, 내부는 `tinycolor` 같은 외부 의존성 없이 직접 구현한 색 변환 레이어 위에서 동작합니다.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 특징
|
|
10
|
+
|
|
11
|
+
- **완전한 `v-model`** — `defineModel()` 기반 양방향 바인딩
|
|
12
|
+
- **13종 피커** — 풀피처 / 경량 / 팔레트 / 슬라이더, 용도별로 선택
|
|
13
|
+
- **포맷 선택** — hex / rgb / hsl 중 원하는 형태로 값을 받음
|
|
14
|
+
- **CSS 변수 커스터마이징** — 클래스 없이 `--vc-*` 변수만으로 테마 변경
|
|
15
|
+
- **조립 가능한 원자 컴포넌트** — 직접 피커를 만들 수 있는 primitives 제공
|
|
16
|
+
- **스포이드** — 브라우저 네이티브 EyeDropper API 지원
|
|
17
|
+
- **Tree-shaking** — 쓰는 컴포넌트만 번들에 포함
|
|
18
|
+
- **의존성 0** — 색 변환을 직접 구현, peer dependency는 `vue`뿐
|
|
19
|
+
- **TypeScript** — 전체 타입 제공 (ESM + CJS + `.d.ts`)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 설치
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install vcolor
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
> `vue >= 3.3.0` 이 peer dependency입니다.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## 빠른 시작
|
|
34
|
+
|
|
35
|
+
스타일을 한 번 import한 뒤 컴포넌트를 사용합니다.
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
// main.ts
|
|
39
|
+
import "vcolor/style.css";
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
```vue
|
|
43
|
+
<script setup lang="ts">
|
|
44
|
+
import { ref } from "vue";
|
|
45
|
+
import { SketchPicker } from "vcolor";
|
|
46
|
+
|
|
47
|
+
const color = ref("#FF5733");
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<template>
|
|
51
|
+
<SketchPicker v-model="color" />
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## 컴포넌트
|
|
58
|
+
|
|
59
|
+
이름은 모두 named export로 가져옵니다.
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import { ChromePicker, SketchPicker, HueSlider } from "vcolor";
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
| 컴포넌트 | 카테고리 | Alpha | 설명 |
|
|
66
|
+
| ----------------- | -------- | :---: | -------------------------------------------------- |
|
|
67
|
+
| `ChromePicker` | 풀피처 | O | 팔레트 + Hue/Alpha + 입력칸 + 포맷 전환 + 스포이드 |
|
|
68
|
+
| `SketchPicker` | 풀피처 | O | Chrome 구성 + 프리셋 스워치 |
|
|
69
|
+
| `PhotoshopPicker` | 풀피처 | O | 팔레트 + Hue + new/current 비교 + OK/Cancel |
|
|
70
|
+
| `CompactPicker` | 경량 | – | 색상 그리드 + hex 입력 |
|
|
71
|
+
| `GrayscalePicker` | 경량 | – | 그레이스케일 그리드 |
|
|
72
|
+
| `MaterialPicker` | 경량 | – | hex + RGB 텍스트 입력 |
|
|
73
|
+
| `TwitterPicker` | 경량 | – | 소형 스워치 + hex 입력 |
|
|
74
|
+
| `SwatchesPicker` | 팔레트 | – | 대형 2D 팔레트 (색조 × 명암) |
|
|
75
|
+
| `HueSlider` | 슬라이더 | – | Hue 단독 슬라이더 (숫자 v-model) |
|
|
76
|
+
| `SliderPicker` | 슬라이더 | O | Hue + Lightness + Alpha |
|
|
77
|
+
| `RGBASliders` | 슬라이더 | O | R / G / B / A 개별 슬라이더 |
|
|
78
|
+
| `HSVSliders` | 슬라이더 | O | H / S / V / A 개별 슬라이더 |
|
|
79
|
+
| `HSLSliders` | 슬라이더 | O | H / S / L / A 개별 슬라이더 |
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## v-model
|
|
84
|
+
|
|
85
|
+
### 입력 형식
|
|
86
|
+
|
|
87
|
+
`v-model`에는 **hex 문자열** 또는 **색상 객체**를 넣을 수 있습니다.
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
const a = ref("#FF5733"); // hex (#RGB / #RRGGBB / #RRGGBBAA)
|
|
91
|
+
const b = ref({ r: 255, g: 87, b: 51, a: 1 }); // RGBA 객체
|
|
92
|
+
const c = ref({ h: 11, s: 80, v: 100, a: 1 }); // HSVA 객체
|
|
93
|
+
const d = ref({ h: 11, s: 100, l: 60, a: 1 }); // HSLA 객체
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
> `HueSlider`만 예외로 **숫자(0–360)** 를 받습니다: `const hue = ref(200)`
|
|
97
|
+
|
|
98
|
+
### 출력 형식 — `format`
|
|
99
|
+
|
|
100
|
+
`format` prop으로 v-model이 내보내는 형태를 정합니다.
|
|
101
|
+
|
|
102
|
+
```vue
|
|
103
|
+
<ChromePicker v-model="color" format="rgb" />
|
|
104
|
+
<!-- emit: { r: 255, g: 87, b: 51, a: 1 } -->
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
| `format` | 내보내는 값 |
|
|
108
|
+
| -------------- | ------------------ |
|
|
109
|
+
| `'hex'` (기본) | `'#FF5733'` 문자열 |
|
|
110
|
+
| `'rgb'` | `{ r, g, b, a }` |
|
|
111
|
+
| `'hsl'` | `{ h, s, l, a }` |
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## 공통 Props
|
|
116
|
+
|
|
117
|
+
| Prop | 타입 | 기본값 | 적용 |
|
|
118
|
+
| -------------- | ------------------------- | ---------------------- | ------------------------------- |
|
|
119
|
+
| `modelValue` | `string \| ColorObject` | – | 전 컴포넌트 (v-model) |
|
|
120
|
+
| `format` | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | 색상 피커 전체 |
|
|
121
|
+
| `disableAlpha` | `boolean` | `false` | Alpha 지원 피커 |
|
|
122
|
+
| `width` | `string` | `'var(--vc-width)'` | 전 컴포넌트 |
|
|
123
|
+
| `presetColors` | `string[] \| string[][]` | 컴포넌트별 기본 팔레트 | 스워치 피커 |
|
|
124
|
+
| `columns` | `number` | 6 (Gray 8) | `Compact` / `Gray` / `Swatches` |
|
|
125
|
+
| `inputFormats` | `('hex'\|'rgb'\|'hsl')[]` | 전부 | `ChromePicker` |
|
|
126
|
+
|
|
127
|
+
### 공통 Events
|
|
128
|
+
|
|
129
|
+
| Event | 페이로드 | 시점 |
|
|
130
|
+
| ------------------- | ----------------------- | ----------------------- |
|
|
131
|
+
| `update:modelValue` | `string \| ColorObject` | 색 변경 (v-model) |
|
|
132
|
+
| `input` | 〃 | 드래그/입력 중 실시간 |
|
|
133
|
+
| `change` | 〃 | 드래그 종료 / 입력 확정 |
|
|
134
|
+
|
|
135
|
+
> `PhotoshopPicker`는 추가로 `ok`, `cancel` 이벤트를 emit합니다.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 주요 기능
|
|
140
|
+
|
|
141
|
+
### 입력 포맷 전환 (ChromePicker)
|
|
142
|
+
|
|
143
|
+
`ChromePicker` 하단의 `▲▼`로 입력칸을 hex / rgb / hsl로 전환할 수 있습니다. 어떤 모드를 노출할지 `inputFormats`로 지정하고, 안 주면 셋 다 제공합니다.
|
|
144
|
+
|
|
145
|
+
```vue
|
|
146
|
+
<ChromePicker v-model="color" />
|
|
147
|
+
<!-- hex/rgb/hsl 전부 -->
|
|
148
|
+
<ChromePicker v-model="color" :input-formats="['hex', 'rgb']" />
|
|
149
|
+
<ChromePicker v-model="color" :input-formats="['hex']" />
|
|
150
|
+
<!-- 하나면 전환 버튼 숨김 -->
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
> `inputFormats`(입력칸 표시 포맷)와 `format`(emit 포맷)은 별개입니다.
|
|
154
|
+
|
|
155
|
+
### 스포이드 (EyeDropper)
|
|
156
|
+
|
|
157
|
+
`ChromePicker`는 브라우저가 지원하는 경우 미리보기 옆에 스포이드 버튼을 표시합니다. 누르면 화면 어디서든 색을 추출합니다.
|
|
158
|
+
|
|
159
|
+
> 네이티브 EyeDropper API 기반이라 **Chromium 계열(Chrome·Edge 등)에서만** 동작하며, 미지원 브라우저(Firefox·Safari)에서는 버튼이 자동으로 숨겨집니다.
|
|
160
|
+
|
|
161
|
+
컴포저블로 직접 사용할 수도 있습니다.
|
|
162
|
+
|
|
163
|
+
```ts
|
|
164
|
+
import { useEyeDropper } from "vcolor";
|
|
165
|
+
|
|
166
|
+
const { isSupported, open } = useEyeDropper();
|
|
167
|
+
const hex = await open(); // '#rrggbb' 또는 null(미지원/취소)
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### 스워치 색 지정
|
|
171
|
+
|
|
172
|
+
스워치 계열 피커는 `presetColors`로 **1차원 또는 2차원(행 단위)** 배열을 받습니다.
|
|
173
|
+
|
|
174
|
+
```vue
|
|
175
|
+
<!-- 1차원 + 열 수 지정 -->
|
|
176
|
+
<CompactPicker
|
|
177
|
+
v-model="color"
|
|
178
|
+
:preset-colors="['#F00', '#0F0', '#00F']"
|
|
179
|
+
:columns="3"
|
|
180
|
+
/>
|
|
181
|
+
|
|
182
|
+
<!-- 2차원: 행 = 색조, 열 = 명암 -->
|
|
183
|
+
<SwatchesPicker
|
|
184
|
+
v-model="color"
|
|
185
|
+
:preset-colors="[
|
|
186
|
+
['#FFEBEE', '#E57373', '#F44336', '#C62828'],
|
|
187
|
+
['#E3F2FD', '#42A5F5', '#2196F3', '#1565C0'],
|
|
188
|
+
]"
|
|
189
|
+
/>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## 커스터마이징
|
|
195
|
+
|
|
196
|
+
자유도는 세 단계로 열려 있습니다. (자세한 내용은 [`CUSTOMIZING.md`](./CUSTOMIZING.md))
|
|
197
|
+
|
|
198
|
+
### 1. 테마 — CSS 변수
|
|
199
|
+
|
|
200
|
+
상위 요소에 `--vc-*` 변수만 선언하면 적용됩니다.
|
|
201
|
+
|
|
202
|
+
```html
|
|
203
|
+
<div
|
|
204
|
+
style="--vc-width: 300px; --vc-border-radius: 16px; --vc-btn-apply-bg: #6c5ce7;"
|
|
205
|
+
>
|
|
206
|
+
<SketchPicker v-model="color" />
|
|
207
|
+
</div>
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
너비·모서리·그림자·폰트부터 팔레트 높이, 슬라이더 두께, 스워치 열 수, 버튼 색까지 변수로 노출되어 있습니다.
|
|
211
|
+
|
|
212
|
+
### 2. 배치·세부 스타일 — 클래스 오버라이드
|
|
213
|
+
|
|
214
|
+
모든 컴포넌트가 `vc-` BEM 클래스를 쓰고 scoped가 아니라서, 일반 CSS로 배치까지 덮어쓸 수 있습니다.
|
|
215
|
+
|
|
216
|
+
```css
|
|
217
|
+
.vc-chrome__fields {
|
|
218
|
+
order: -1;
|
|
219
|
+
} /* 입력칸을 맨 위로 */
|
|
220
|
+
.vc-chrome__mode {
|
|
221
|
+
display: none;
|
|
222
|
+
} /* 특정 부분 숨기기 */
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### 3. 완전 자유 배치 — primitives 조립
|
|
226
|
+
|
|
227
|
+
`useColor`와 원자 컴포넌트(`Saturation`, `Hue`, `Alpha`, `Swatch`, `EditableInput`)를 직접 조립하면 배치가 100% 자유롭습니다.
|
|
228
|
+
|
|
229
|
+
```vue
|
|
230
|
+
<script setup lang="ts">
|
|
231
|
+
import { useColor, Hue, Saturation } from "vcolor";
|
|
232
|
+
const c = useColor("#FF5733");
|
|
233
|
+
</script>
|
|
234
|
+
|
|
235
|
+
<template>
|
|
236
|
+
<Saturation
|
|
237
|
+
:hue="c.hsva.value.h"
|
|
238
|
+
:saturation="c.hsva.value.s"
|
|
239
|
+
:value="c.hsva.value.v"
|
|
240
|
+
@input="(p) => c.setSaturation(p.s, p.v)"
|
|
241
|
+
/>
|
|
242
|
+
<Hue :hue="c.hsva.value.h" @input="(h) => c.setHue(h)" />
|
|
243
|
+
</template>
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## 색 공간 / 변환 유틸
|
|
249
|
+
|
|
250
|
+
내부 상태는 HSVA를 단일 진실로 두고 hex/rgba/hsla를 파생합니다. 변환 함수는 따로 import해서 쓸 수 있습니다.
|
|
251
|
+
|
|
252
|
+
```ts
|
|
253
|
+
import {
|
|
254
|
+
hexToRgb,
|
|
255
|
+
rgbToHsv,
|
|
256
|
+
hsvToRgb,
|
|
257
|
+
rgbToHsl,
|
|
258
|
+
hslToRgb,
|
|
259
|
+
rgbToHex,
|
|
260
|
+
} from "vcolor";
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
| 포맷 | 예시 | 범위 |
|
|
264
|
+
| ---------- | ----------------------- | ------------------------------ |
|
|
265
|
+
| HEX / HEXA | `#FF5733` / `#FF573380` | 6 또는 8자리 |
|
|
266
|
+
| RGBA | `{ r, g, b, a }` | r,g,b: 0–255 / a: 0–1 |
|
|
267
|
+
| HSVA | `{ h, s, v, a }` | h: 0–360 / s,v: 0–100 / a: 0–1 |
|
|
268
|
+
| HSLA | `{ h, s, l, a }` | h: 0–360 / s,l: 0–100 / a: 0–1 |
|
|
269
|
+
|
|
270
|
+
> 변환은 내부적으로 반올림하지 않아 RGB↔HSV 왕복이 무손실입니다. 반올림은 표시/emit 시점에만 적용됩니다.
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## Composables
|
|
275
|
+
|
|
276
|
+
`vcolor` 또는 `vcolor/composables`에서 가져올 수 있습니다.
|
|
277
|
+
|
|
278
|
+
| 이름 | 설명 |
|
|
279
|
+
| ------------------------ | ------------------------------------------------ |
|
|
280
|
+
| `useColor(initial)` | 색상 상태(hsva) + 파생값(hex/rgba/hsla) + setter |
|
|
281
|
+
| `useDrag(onMove, onEnd)` | 포인터 드래그 → 정규화 좌표 |
|
|
282
|
+
| `useColorHistory(max)` | 최근 사용 색상 |
|
|
283
|
+
| `useEyeDropper()` | 네이티브 스포이드 래퍼 |
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
## 개발
|
|
288
|
+
|
|
289
|
+
```bash
|
|
290
|
+
npm install
|
|
291
|
+
npm run typecheck # vue-tsc 타입체크
|
|
292
|
+
npm run build # dist 생성 (ESM + CJS + .d.ts + style.css)
|
|
293
|
+
npx vitest run # 테스트
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
데모는 `App.demo.vue`에서 13종을 한눈에 확인할 수 있습니다.
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
300
|
+
## 라이선스
|
|
301
|
+
|
|
302
|
+
MIT
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|
package/dist/icons.svg
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
3
|
+
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
4
|
+
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
5
|
+
</symbol>
|
|
6
|
+
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
7
|
+
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
10
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
11
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
12
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
13
|
+
</symbol>
|
|
14
|
+
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
15
|
+
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
18
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
19
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
20
|
+
</symbol>
|
|
21
|
+
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
22
|
+
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
23
|
+
</symbol>
|
|
24
|
+
</svg>
|
package/dist/vcolor.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.vc-saturation{width:100%;height:var(--vc-panel-height,140px);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;position:relative;overflow:hidden}.vc-saturation:focus-visible{box-shadow:inset 0 0 0 2px var(--vc-active-color,#2196f3)}.vc-saturation__white{background:linear-gradient(90deg,#fff,#fff0);position:absolute;inset:0}.vc-saturation__black{background:linear-gradient(#0000,#000);position:absolute;inset:0}.vc-saturation__pointer{width:var(--vc-pointer-size,12px);height:var(--vc-pointer-size,12px);pointer-events:none;border:2px solid #fff;border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 1px #0009}.vc-hue{width:100%;height:var(--vc-slider-height,12px);border-radius:var(--vc-slider-radius,6px);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);position:relative}.vc-hue:focus-visible{outline:2px solid var(--vc-active-color,#2196f3);outline-offset:2px}.vc-hue__pointer{width:var(--vc-pointer-size,14px);height:var(--vc-pointer-size,14px);pointer-events:none;background:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px #00000080}.vc-alpha{width:100%;height:var(--vc-slider-height,12px);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;position:relative}.vc-alpha:focus-visible{outline:2px solid var(--vc-active-color,#2196f3);outline-offset:2px}.vc-alpha__track{border-radius:var(--vc-slider-radius,6px);position:absolute;inset:0;overflow:hidden}.vc-alpha__checker{background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;position:absolute;inset:0}.vc-alpha__grad{position:absolute;inset:0}.vc-alpha__pointer{width:var(--vc-pointer-size,14px);height:var(--vc-pointer-size,14px);pointer-events:none;background:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px #00000080}.vc-input{flex-direction:column;flex:1;align-items:center;gap:3px;min-width:0;display:flex}.vc-input__field{box-sizing:border-box;text-align:center;border:var(--vc-input-border,1px solid #e0e0e0);background:var(--vc-input-bg,#fff);width:100%;min-width:0;color:var(--vc-input-color,inherit);border-radius:var(--vc-input-radius,4px);font-size:var(--vc-input-font-size,12px);font-family:var(--vc-font-family,inherit);padding:4px 2px}.vc-input__field:focus-visible{outline:2px solid var(--vc-active-color,#2196f3);outline-offset:-1px}.vc-input__label{color:var(--vc-label-color,#999);text-transform:uppercase;font-size:11px}.vc-chrome{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);overflow:hidden}.vc-chrome__body{gap:var(--vc-gap,12px);padding:var(--vc-padding,12px);align-items:center;display:flex}.vc-chrome__preview{width:var(--vc-preview-size,28px);height:var(--vc-preview-size,28px);border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px #0000001a}.vc-chrome__eyedropper{width:var(--vc-preview-size,28px);height:var(--vc-preview-size,28px);border:var(--vc-input-border,1px solid #e0e0e0);border-radius:var(--vc-btn-radius,6px);background:var(--vc-btn-bg,#fff);color:var(--vc-btn-color,#555);cursor:pointer;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.vc-chrome__eyedropper:hover{color:var(--vc-btn-color-hover,#111)}.vc-chrome__sliders{flex-direction:column;flex:1;gap:10px;display:flex}.vc-chrome__fields{gap:var(--vc-gap,6px);padding:0 var(--vc-padding,12px);align-items:flex-start;display:flex}.vc-input--wide{flex:3}.vc-chrome__switch{flex-direction:column;justify-content:center;gap:1px;padding-top:1px;display:flex}.vc-chrome__chev{cursor:pointer;color:var(--vc-label-color,#999);background:0 0;border:none;padding:0 4px;font-size:9px;line-height:1}.vc-chrome__chev:hover{color:var(--vc-btn-color-hover,#333)}.vc-chrome__mode{text-align:center;color:var(--vc-label-color,#999);text-transform:uppercase;letter-spacing:.05em;padding:6px 0 12px;font-size:11px}.vc-swatch{width:var(--vc-swatch-size,20px);height:var(--vc-swatch-size,20px);border-radius:var(--vc-swatch-radius,4px);cursor:pointer;border:none;padding:0;box-shadow:inset 0 0 0 1px #0000001a}.vc-swatch.is-active{outline:2px solid var(--vc-active-color,#2196f3);outline-offset:1px}.vc-sketch{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);overflow:hidden}.vc-sketch__controls{align-items:center;gap:12px;padding:12px;display:flex}.vc-sketch__sliders{flex-direction:column;flex:1;gap:10px;display:flex}.vc-sketch__preview{border-radius:4px;flex:none;width:28px;height:28px;box-shadow:inset 0 0 0 1px #0000001a}.vc-sketch__field{padding:0 12px 8px}.vc-sketch__presets{grid-template-columns:repeat(auto-fill, var(--vc-swatch-size,20px));gap:var(--vc-swatch-gap,6px);padding:0 var(--vc-padding,12px) 12px;border-top:1px solid var(--vc-border-color,#eee);padding-top:10px;display:grid}.vc-ps{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);gap:12px;padding:12px;display:flex}.vc-ps__main{flex-direction:column;flex:1;gap:8px;display:flex}.vc-ps__hue{padding-top:2px}.vc-ps__side{flex-direction:column;gap:8px;width:80px;display:flex}.vc-ps__compare{border:1px solid #ddd;border-radius:4px;flex-direction:column;display:flex;overflow:hidden}.vc-ps__swatch{justify-content:flex-end;align-items:flex-start;height:34px;display:flex}.vc-ps__swatch span{background:#fffc;border-radius:0 0 0 3px;padding:1px 3px;font-size:10px}.vc-ps__btn{border:var(--vc-input-border,1px solid #ccc);border-radius:var(--vc-btn-radius,4px);background:var(--vc-btn-bg,#f5f5f5);color:var(--vc-btn-color,#333);cursor:pointer;padding:6px;font-size:13px}.vc-ps__btn--ok{background:var(--vc-btn-apply-bg,#111);color:var(--vc-btn-apply-color,#fff);border-color:#0000}.vc-compact{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);padding:var(--vc-padding,10px)}.vc-compact__grid{grid-template-columns:repeat(var(--vc-swatch-columns,6), 1fr);gap:var(--vc-swatch-gap,5px);display:grid}.vc-compact__field{align-items:center;gap:8px;margin-top:10px;display:flex}.vc-compact__preview{border-radius:4px;flex:none;width:24px;height:24px;box-shadow:inset 0 0 0 1px #0000001a}.vc-gray{grid-template-columns:repeat(var(--vc-swatch-columns,8), 1fr);gap:var(--vc-swatch-gap,4px);padding:var(--vc-padding,10px);background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);display:grid}.vc-gray>.vc-swatch{width:100%}.vc-material{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);border-top:3px solid;padding:14px}.vc-material__hex{margin-bottom:12px}.vc-material__rgb{gap:10px;display:flex}.vc-twitter{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);padding:var(--vc-padding,12px)}.vc-twitter__swatches{gap:var(--vc-swatch-gap,6px);flex-wrap:wrap;display:flex}.vc-twitter__field{border-top:1px solid var(--vc-border-color,#eee);align-items:center;gap:4px;margin-top:10px;padding-top:10px;display:flex}.vc-twitter__hash{color:var(--vc-label-color,#999);font-size:13px}.vc-swatches{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);padding:var(--vc-padding,14px);gap:var(--vc-swatch-gap,8px);flex-direction:column;display:flex}.vc-swatches__row{gap:var(--vc-swatch-gap,8px);display:flex}.vc-swatches__row>.vc-swatch{flex:1}.vc-swatches__grid{grid-template-columns:repeat(var(--vc-swatch-columns,6), 1fr);gap:var(--vc-swatch-gap,8px);display:grid}.vc-swatches__grid>.vc-swatch{width:100%}.vc-hue-slider{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);padding:12px}.vc-slider{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);flex-direction:column;gap:12px;padding:14px;display:flex}.vc-slider__row{align-items:center;gap:10px;display:flex}.vc-slider__label{color:#888;width:12px;font-size:12px}.vc-slider__range{flex:1}.vc-sliders{background:var(--vc-bg,#fff);border-radius:var(--vc-border-radius,8px);box-shadow:var(--vc-box-shadow,0 4px 20px #00000026);font-family:var(--vc-font-family,system-ui, sans-serif);flex-direction:column;gap:10px;padding:14px;display:flex}.vc-sliders__row{align-items:center;gap:10px;display:flex}.vc-sliders__label{color:#888;width:14px;font-size:12px}.vc-sliders__range{flex:1}.vc-sliders__value{text-align:right;color:#555;width:34px;font-size:12px}
|
|
2
|
+
/*$vite$:1*/
|