colbrush 1.0.0 → 1.0.2
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/README.md +130 -0
- package/dist/cli.cjs +40 -10
- package/dist/client.js +398 -116
- package/package.json +10 -14
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# colbrush
|
|
2
|
+
#### A React theme switching library that makes it easy to apply color-blind accessible UI themes.
|
|
3
|
+
<img width="1440" height="900" alt="Angular Gradient" src="https://github.com/user-attachments/assets/37e4ffb9-1840-4828-949c-0ffe5e14903e" />
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- ✅ Support for color blindness types: `protanopia`, `deuteranopia`, `tritanopia`
|
|
11
|
+
- ⚙️ Automatic CSS variable generation via PostCSS (`@theme` syntax supported)
|
|
12
|
+
- 🎛 Provides a `ThemeProvider` based on React Context
|
|
13
|
+
- 🎨 Accessible `ThemeSwitcher` component included
|
|
14
|
+
- 🧩 Built-in hooks for runtime updates:
|
|
15
|
+
- `useUpdateTheme` – change the current theme (including color-blind modes)
|
|
16
|
+
- `useUpdateLanguage` – change the language context
|
|
17
|
+
- 🧪 Customizable color scales and transformation algorithms
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm add colbrush
|
|
25
|
+
# or
|
|
26
|
+
npm install colbrush
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
## Usage
|
|
31
|
+
### 1. Define CSS variables (index.css or global CSS)
|
|
32
|
+
```
|
|
33
|
+
@theme {
|
|
34
|
+
--color-primary-500: #7fe4c1;
|
|
35
|
+
--color-secondary-yellow: #fdfa91;
|
|
36
|
+
--color-default-gray-500: #c3c3c3;
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
### 2. Generate color-blind themes
|
|
40
|
+
|
|
41
|
+
**Prerequisite:** Define your base palette **in a CSS file (e.g., `src/index.css`) using HEX colors (`#RRGGBB`)**.
|
|
42
|
+
Variables can be declared inside an `@theme { ... }` block (recommended) or `:root { ... }`.
|
|
43
|
+
|
|
44
|
+
Example (`src/index.css`):
|
|
45
|
+
```css
|
|
46
|
+
@theme {
|
|
47
|
+
--color-primary-500: #7fe4c1;
|
|
48
|
+
--color-secondary-yellow: #fdfa91;
|
|
49
|
+
--color-default-gray-500: #c3c3c3;
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
Then run the generator:
|
|
53
|
+
|
|
54
|
+
#### Default: reads/writes to src/index.css
|
|
55
|
+
```
|
|
56
|
+
npx colbrush --generate
|
|
57
|
+
```
|
|
58
|
+
Use a different file (optional):
|
|
59
|
+
```
|
|
60
|
+
npx colbrush --generate --css=path/to/your.css
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
#### Notes
|
|
64
|
+
|
|
65
|
+
Only HEX values are processed (e.g., #7fe4c1). Named colors, rgb()/hsl() are ignored.
|
|
66
|
+
If --css is omitted, Colbrush uses src/index.css by default.
|
|
67
|
+
Generated color-blind variants are appended to the same file below your @theme block.
|
|
68
|
+
|
|
69
|
+
### 3. Wrap your app with ThemeProvider
|
|
70
|
+
```
|
|
71
|
+
import { ThemeProvider } from 'colbrush/client';
|
|
72
|
+
|
|
73
|
+
function App() {
|
|
74
|
+
return (
|
|
75
|
+
<ThemeProvider>
|
|
76
|
+
<YourApp />
|
|
77
|
+
</ThemeProvider>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
### 4. Use the ThemeSwitcher component
|
|
82
|
+
```
|
|
83
|
+
import { ThemeSwitcher } from 'colbrush/client';
|
|
84
|
+
import 'colbrush/styles.css';
|
|
85
|
+
|
|
86
|
+
function Settings() {
|
|
87
|
+
return <ThemeSwitcher />;
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
### 5. Use hooks for theme and language switching
|
|
91
|
+
```
|
|
92
|
+
import { useUpdateLanguage, useUpdateTheme } from 'colbrush/client';
|
|
93
|
+
|
|
94
|
+
export default function TestPage() {
|
|
95
|
+
const updateTheme = useUpdateTheme();
|
|
96
|
+
const updateLanguage = useUpdateLanguage();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<div className="flex">
|
|
100
|
+
<button onClick={() => updateTheme('tritanopia')}>색맹 유형 변경</button>
|
|
101
|
+
<button onClick={() => updateLanguage('English')}>언어 변경</button>
|
|
102
|
+
</div>
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
## Supported Vision Types
|
|
107
|
+
| **Vision Type** | **설명** |
|
|
108
|
+
| --------------- | ------ |
|
|
109
|
+
| protanopia | 적색맹 |
|
|
110
|
+
| deuteranopia | 녹색맹 |
|
|
111
|
+
| tritanopia | 청색맹 |
|
|
112
|
+
|
|
113
|
+
## 👥 Team
|
|
114
|
+
|
|
115
|
+
|  |  |  |  |  |
|
|
116
|
+
| ---------------------------------------- | ------------------------------------------- | ------------------------------------------- | -------------------------------------------- | ------------------------------------------ |
|
|
117
|
+
| **윤수호** | **노하영** | [**김연진**](https://github.com/yeonjin719) | [**윤혜성**](https://github.com/hyesngy) | [**이준희**](https://github.com/jjjuni) |
|
|
118
|
+
| PM | Designer | Frontend · Library Engineer | Frontend · Library Engineer | Frontend · Library Engineer |
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
# 📜 License
|
|
122
|
+
|
|
123
|
+
Copyright (c) 2025 Team Colbrush
|
|
124
|
+
|
|
125
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
126
|
+
|
|
127
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
128
|
+
|
|
129
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
130
|
+
|
package/dist/cli.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
+
#!/usr/bin/env node
|
|
2
3
|
"use strict";
|
|
3
4
|
var __create = Object.create;
|
|
4
5
|
var __defProp = Object.defineProperty;
|
|
@@ -141,10 +142,24 @@ function upsertBlock(root, selector, kv) {
|
|
|
141
142
|
});
|
|
142
143
|
for (const [prop, value] of remain) rule.append({ prop, value });
|
|
143
144
|
}
|
|
145
|
+
function getColorVariablesFromRoot(root) {
|
|
146
|
+
const vars = {};
|
|
147
|
+
root.walkDecls((decl) => {
|
|
148
|
+
const name = decl.prop.trim();
|
|
149
|
+
const value = decl.value.trim();
|
|
150
|
+
if (name.startsWith("--color")) {
|
|
151
|
+
vars[name] = value;
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
return vars;
|
|
155
|
+
}
|
|
144
156
|
function applyThemes(input, cssPath = CSS_PATH) {
|
|
145
157
|
const root = loadRoot(cssPath);
|
|
146
|
-
const
|
|
158
|
+
const originalVars = getColorVariablesFromRoot(root);
|
|
147
159
|
const varsForTheme = {};
|
|
160
|
+
for (const [varName, value] of Object.entries(originalVars)) {
|
|
161
|
+
varsForTheme[varName] = value;
|
|
162
|
+
}
|
|
148
163
|
for (const [varName, val] of Object.entries(input.variables)) {
|
|
149
164
|
const rich = typeof val === "string" ? inferRich(varName, val) : val;
|
|
150
165
|
const m = varName.match(variationRegex);
|
|
@@ -153,15 +168,10 @@ function applyThemes(input, cssPath = CSS_PATH) {
|
|
|
153
168
|
const [, token] = m;
|
|
154
169
|
const keys = rich.keys && rich.keys.length ? rich.keys : getExistingKeysForToken(root, token).length ? getExistingKeysForToken(root, token) : Array.from(DEFAULT_KEYS);
|
|
155
170
|
if (rich.scale !== false) {
|
|
156
|
-
const scaleMap = buildScaleFromBaseHex(rich.base, {
|
|
157
|
-
keys
|
|
158
|
-
});
|
|
171
|
+
const scaleMap = buildScaleFromBaseHex(rich.base, { keys });
|
|
159
172
|
for (const k of keys) {
|
|
160
173
|
const hex = scaleMap[k];
|
|
161
|
-
varsForTheme[`--${token}-${k}`] = toThemeColor(
|
|
162
|
-
hex,
|
|
163
|
-
input.vision
|
|
164
|
-
);
|
|
174
|
+
varsForTheme[`--${token}-${k}`] = toThemeColor(hex, input.vision);
|
|
165
175
|
}
|
|
166
176
|
} else {
|
|
167
177
|
varsForTheme[varName] = toThemeColor(rich.base, input.vision);
|
|
@@ -170,7 +180,7 @@ function applyThemes(input, cssPath = CSS_PATH) {
|
|
|
170
180
|
varsForTheme[varName] = toThemeColor(rich.base, input.vision);
|
|
171
181
|
}
|
|
172
182
|
}
|
|
173
|
-
upsertBlock(root,
|
|
183
|
+
upsertBlock(root, `[data-theme='${input.vision}']`, varsForTheme);
|
|
174
184
|
import_node_fs.default.writeFileSync(cssPath, root.toString(), "utf8");
|
|
175
185
|
console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
|
|
176
186
|
}
|
|
@@ -326,6 +336,23 @@ function removeExistingThemeBlocks(content) {
|
|
|
326
336
|
}
|
|
327
337
|
|
|
328
338
|
// src/node/runThemeApply.ts
|
|
339
|
+
function hexToRgb(hex) {
|
|
340
|
+
let clean = hex.replace("#", "").toLowerCase();
|
|
341
|
+
if (clean.length === 3) {
|
|
342
|
+
clean = clean.split("").map((c) => c + c).join("");
|
|
343
|
+
}
|
|
344
|
+
if (clean.length !== 6) return null;
|
|
345
|
+
const r = parseInt(clean.substring(0, 2), 16);
|
|
346
|
+
const g = parseInt(clean.substring(2, 4), 16);
|
|
347
|
+
const b = parseInt(clean.substring(4, 6), 16);
|
|
348
|
+
return [r, g, b];
|
|
349
|
+
}
|
|
350
|
+
function isNeutralColor(value) {
|
|
351
|
+
const rgb = hexToRgb(value);
|
|
352
|
+
if (!rgb) return false;
|
|
353
|
+
const [r, g, b] = rgb;
|
|
354
|
+
return r === g && g === b;
|
|
355
|
+
}
|
|
329
356
|
function isBlackOrWhite(hexColor) {
|
|
330
357
|
const hex = hexColor.toLowerCase().replace("#", "");
|
|
331
358
|
const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
|
|
@@ -353,7 +380,10 @@ async function runThemeApply(cssPath) {
|
|
|
353
380
|
while ((match = variableRegex.exec(content)) !== null) {
|
|
354
381
|
const [, key, value] = match;
|
|
355
382
|
const cleanKey = key.trim();
|
|
356
|
-
const cleanValue = value.trim();
|
|
383
|
+
const cleanValue = value.trim().toLowerCase();
|
|
384
|
+
if (isNeutralColor(cleanValue)) {
|
|
385
|
+
continue;
|
|
386
|
+
}
|
|
357
387
|
const scale = calculateScale(cleanKey, cleanValue);
|
|
358
388
|
const rich = {
|
|
359
389
|
base: cleanValue,
|
package/dist/client.js
CHANGED
|
@@ -86,136 +86,418 @@ var THEMES = THEME_LABEL;
|
|
|
86
86
|
// src/components/ThemeSwitcher.tsx
|
|
87
87
|
import { useEffect as useEffect2, useRef, useState as useState2, useMemo as useMemo2 } from "react";
|
|
88
88
|
|
|
89
|
-
// src/
|
|
90
|
-
import * as React from "react";
|
|
91
|
-
import { forwardRef } from "react";
|
|
89
|
+
// src/icons/Logo.tsx
|
|
92
90
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
93
|
-
var SvgLogo = (props
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
91
|
+
var SvgLogo = (props) => /* @__PURE__ */ jsxs(
|
|
92
|
+
"svg",
|
|
93
|
+
{
|
|
94
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
95
|
+
width: 77,
|
|
96
|
+
height: 78,
|
|
97
|
+
fill: "none",
|
|
98
|
+
...props,
|
|
99
|
+
children: [
|
|
100
|
+
/* @__PURE__ */ jsx2("path", { fill: "#CE78A9", d: "m0 34.605 3.032-7.028L36.656 11.73l-2.618 6.615z" }),
|
|
101
|
+
/* @__PURE__ */ jsx2(
|
|
102
|
+
"path",
|
|
103
|
+
{
|
|
104
|
+
fill: "#D55D00",
|
|
105
|
+
d: "m5.375 47.421-4.272-9.784 28.112-14.194-2.756 6.753-18.466 9.37 4.96 11.438z"
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
/* @__PURE__ */ jsx2(
|
|
109
|
+
"path",
|
|
110
|
+
{
|
|
111
|
+
fill: "#E59F01",
|
|
112
|
+
d: "m43.55.478 6.992 3.112 15.464 33.802-6.584-2.693z"
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ jsx2(
|
|
116
|
+
"path",
|
|
117
|
+
{
|
|
118
|
+
fill: "#000",
|
|
119
|
+
d: "m30.673 5.706 9.832-4.16L54.38 29.818l-6.721-2.833-9.16-18.571-11.494 4.83z"
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
/* @__PURE__ */ jsx2(
|
|
123
|
+
"path",
|
|
124
|
+
{
|
|
125
|
+
fill: "#0072B1",
|
|
126
|
+
d: "m33.071 77.49-6.987-3.126-15.397-33.833 6.58 2.706z"
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ jsx2(
|
|
130
|
+
"path",
|
|
131
|
+
{
|
|
132
|
+
fill: "#F0E442",
|
|
133
|
+
d: "m45.958 72.287-9.84 4.14L22.3 48.128l6.715 2.846 9.124 18.59 11.503-4.808z"
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
/* @__PURE__ */ jsx2(
|
|
137
|
+
"path",
|
|
138
|
+
{
|
|
139
|
+
fill: "#009F73",
|
|
140
|
+
d: "m76.778 43.424-2.964 7.057-33.468 16.174 2.553-6.64z"
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
/* @__PURE__ */ jsx2(
|
|
144
|
+
"path",
|
|
145
|
+
{
|
|
146
|
+
fill: "#56B4E8",
|
|
147
|
+
d: "m71.279 30.661 4.367 9.742L47.673 54.87l2.69-6.78 18.374-9.549-5.072-11.389z"
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
);
|
|
153
|
+
var Logo_default = SvgLogo;
|
|
105
154
|
|
|
106
|
-
// src/
|
|
107
|
-
import * as React2 from "react";
|
|
108
|
-
import { forwardRef as forwardRef2 } from "react";
|
|
155
|
+
// src/icons/Us.tsx
|
|
109
156
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
110
|
-
var SvgUs = (props
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
/* @__PURE__ */
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
157
|
+
var SvgUs = (props) => /* @__PURE__ */ jsxs2(
|
|
158
|
+
"svg",
|
|
159
|
+
{
|
|
160
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
161
|
+
width: 50,
|
|
162
|
+
height: 38,
|
|
163
|
+
fill: "none",
|
|
164
|
+
...props,
|
|
165
|
+
children: [
|
|
166
|
+
/* @__PURE__ */ jsxs2("g", { clipPath: "url(#US_svg__a)", filter: "url(#US_svg__b)", children: [
|
|
167
|
+
/* @__PURE__ */ jsx3("path", { fill: "#fff", d: "M7 7h35.785v23.857H7z" }),
|
|
168
|
+
/* @__PURE__ */ jsx3(
|
|
169
|
+
"path",
|
|
170
|
+
{
|
|
171
|
+
fill: "#D80027",
|
|
172
|
+
d: "M7 7h35.785v1.835H7zm0 3.67h35.785v1.834H7zm0 3.668h35.785v1.835H7zm0 3.67h35.785v1.834H7zm0 3.676h35.785v1.834H7zm0 3.669h35.785v1.834H7zm0 3.669h35.785v1.835H7z"
|
|
173
|
+
}
|
|
174
|
+
),
|
|
175
|
+
/* @__PURE__ */ jsx3("path", { fill: "#2E52B2", d: "M7 7h17.892v12.842H7z" }),
|
|
176
|
+
/* @__PURE__ */ jsx3(
|
|
177
|
+
"path",
|
|
178
|
+
{
|
|
179
|
+
fill: "#fff",
|
|
180
|
+
d: "m10.334 16.69-.279-.894-.307.893h-.92l.746.537-.279.893.76-.55.74.55-.286-.893.76-.537zm3.928 0-.286-.894-.293.893h-.921l.746.537-.279.893.747-.55.753.55-.28-.893.747-.537zm3.94 0-.3-.894-.278.893h-.942l.767.537-.293.893.747-.55.767.55-.293-.893.747-.537zm3.921 0-.279-.894-.293.893h-.928l.754.537-.28.893.747-.55.753.55-.3-.893.768-.537zm-8.147-4.437-.293.893h-.921l.746.55-.279.88.747-.544.753.544-.28-.88.747-.55h-.934zm-3.92 0-.308.893h-.92l.746.55-.279.88.76-.544.74.544-.286-.88.76-.55h-.935zm7.847 0-.28.893h-.94l.766.55-.293.88.747-.544.767.544-.293-.88.747-.55h-.921zm3.941 0-.293.893h-.928l.754.55-.28.88.747-.544.753.544-.3-.88.768-.55h-.942zm-11.789-3.53-.307.88h-.92l.746.55-.279.886.76-.551.74.551-.286-.886.76-.55h-.935zm3.92 0-.292.88h-.921l.746.55-.279.886.747-.551.753.551-.28-.886.747-.55h-.934zm3.928 0-.28.88h-.94l.766.55-.293.886.747-.551.767.551-.293-.886.747-.55h-.921zm3.941 0-.293.88h-.928l.754.55-.28.886.747-.551.753.551-.3-.886.768-.55h-.942z"
|
|
181
|
+
}
|
|
182
|
+
)
|
|
183
|
+
] }),
|
|
184
|
+
/* @__PURE__ */ jsxs2("defs", { children: [
|
|
185
|
+
/* @__PURE__ */ jsx3("clipPath", { id: "US_svg__a", children: /* @__PURE__ */ jsx3("path", { fill: "#fff", d: "M7 7h35.785v23.857H7z" }) }),
|
|
186
|
+
/* @__PURE__ */ jsxs2(
|
|
187
|
+
"filter",
|
|
188
|
+
{
|
|
189
|
+
id: "US_svg__b",
|
|
190
|
+
width: 48.261,
|
|
191
|
+
height: 36.333,
|
|
192
|
+
x: 0.762,
|
|
193
|
+
y: 0.762,
|
|
194
|
+
colorInterpolationFilters: "sRGB",
|
|
195
|
+
filterUnits: "userSpaceOnUse",
|
|
196
|
+
children: [
|
|
197
|
+
/* @__PURE__ */ jsx3("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
|
|
198
|
+
/* @__PURE__ */ jsx3(
|
|
199
|
+
"feColorMatrix",
|
|
200
|
+
{
|
|
201
|
+
in: "SourceAlpha",
|
|
202
|
+
result: "hardAlpha",
|
|
203
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
/* @__PURE__ */ jsx3("feOffset", {}),
|
|
207
|
+
/* @__PURE__ */ jsx3("feGaussianBlur", { stdDeviation: 3.119 }),
|
|
208
|
+
/* @__PURE__ */ jsx3("feComposite", { in2: "hardAlpha", operator: "out" }),
|
|
209
|
+
/* @__PURE__ */ jsx3("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
|
|
210
|
+
/* @__PURE__ */ jsx3("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_85_779" }),
|
|
211
|
+
/* @__PURE__ */ jsx3(
|
|
212
|
+
"feBlend",
|
|
213
|
+
{
|
|
214
|
+
in: "SourceGraphic",
|
|
215
|
+
in2: "effect1_dropShadow_85_779",
|
|
216
|
+
result: "shape"
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
]
|
|
220
|
+
}
|
|
221
|
+
)
|
|
222
|
+
] })
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
);
|
|
226
|
+
var Us_default = SvgUs;
|
|
133
227
|
|
|
134
|
-
// src/
|
|
135
|
-
import * as React3 from "react";
|
|
136
|
-
import { forwardRef as forwardRef3 } from "react";
|
|
228
|
+
// src/icons/Kr.tsx
|
|
137
229
|
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
138
|
-
var SvgKr = (props
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
230
|
+
var SvgKr = (props) => /* @__PURE__ */ jsxs3(
|
|
231
|
+
"svg",
|
|
232
|
+
{
|
|
233
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
234
|
+
width: 42,
|
|
235
|
+
height: 30,
|
|
236
|
+
fill: "none",
|
|
237
|
+
...props,
|
|
238
|
+
children: [
|
|
239
|
+
/* @__PURE__ */ jsxs3("g", { clipPath: "url(#KR_svg__a)", filter: "url(#KR_svg__b)", children: [
|
|
240
|
+
/* @__PURE__ */ jsx4("path", { fill: "#fff", d: "M3 3h36v24H3z" }),
|
|
241
|
+
/* @__PURE__ */ jsx4(
|
|
242
|
+
"path",
|
|
243
|
+
{
|
|
244
|
+
fill: "#000",
|
|
245
|
+
fillRule: "evenodd",
|
|
246
|
+
d: "m8.496 10.27 3.328-4.992.876.584-3.328 4.992zm1.248.832 3.328-4.992.876.584-3.328 4.992zm1.248.832 3.328-4.992.876.584-3.328 4.992zm15.81 10.54 3.327-4.993.876.584-3.328 4.992zm1.247.831 3.329-4.992.875.584-3.328 4.992zm5.452-3.576-3.328 4.992-.876-.584 3.329-4.992z",
|
|
247
|
+
clipRule: "evenodd"
|
|
248
|
+
}
|
|
249
|
+
),
|
|
250
|
+
/* @__PURE__ */ jsx4(
|
|
251
|
+
"path",
|
|
252
|
+
{
|
|
253
|
+
fill: "#fff",
|
|
254
|
+
fillRule: "evenodd",
|
|
255
|
+
d: "m31.988 22.853-4.16-2.774.487-.73 4.16 2.774z",
|
|
256
|
+
clipRule: "evenodd"
|
|
257
|
+
}
|
|
258
|
+
),
|
|
259
|
+
/* @__PURE__ */ jsx4(
|
|
260
|
+
"path",
|
|
261
|
+
{
|
|
262
|
+
fill: "#CA163A",
|
|
263
|
+
d: "M25.992 18.328a6 6 0 1 0-9.985-6.657 6 6 0 0 0 9.984 6.657"
|
|
264
|
+
}
|
|
265
|
+
),
|
|
266
|
+
/* @__PURE__ */ jsx4(
|
|
267
|
+
"path",
|
|
268
|
+
{
|
|
269
|
+
fill: "#0E4896",
|
|
270
|
+
d: "M16.007 11.671A3.001 3.001 0 0 0 20.999 15a3.001 3.001 0 0 1 4.993 3.328 6 6 0 0 1-8.321 1.664 6 6 0 0 1-1.664-8.32"
|
|
271
|
+
}
|
|
272
|
+
),
|
|
273
|
+
/* @__PURE__ */ jsx4(
|
|
274
|
+
"path",
|
|
275
|
+
{
|
|
276
|
+
fill: "#000",
|
|
277
|
+
fillRule: "evenodd",
|
|
278
|
+
d: "m30.173 5.277 3.328 4.993-.875.584-3.329-4.993zm-1.248.832 3.328 4.993-.875.584-3.329-4.993zm-1.248.832 3.328 4.993-.876.584-3.328-4.993zm-15.809 10.54 3.328 4.992-.876.584-3.328-4.992zm-1.248.832 3.328 4.992-.876.584-3.328-4.992zm-1.248.832 3.328 4.992-.876.584-3.328-4.992z",
|
|
279
|
+
clipRule: "evenodd"
|
|
280
|
+
}
|
|
281
|
+
),
|
|
282
|
+
/* @__PURE__ */ jsx4(
|
|
283
|
+
"path",
|
|
284
|
+
{
|
|
285
|
+
fill: "#000",
|
|
286
|
+
d: "m11.224 21.516 1.248-.832zm16.847-11.232 1.458-.971zm2.706-1.804 1.248-.832z"
|
|
287
|
+
}
|
|
288
|
+
),
|
|
289
|
+
/* @__PURE__ */ jsx4(
|
|
290
|
+
"path",
|
|
291
|
+
{
|
|
292
|
+
fill: "#fff",
|
|
293
|
+
fillRule: "evenodd",
|
|
294
|
+
d: "m32.269 8.013-1.248.832-.487-.73 1.248-.832zm-2.496 1.664-1.458.972-.487-.73 1.458-.972zM12.716 21.05l-1.248.832-.487-.73 1.248-.832z",
|
|
295
|
+
clipRule: "evenodd"
|
|
296
|
+
}
|
|
297
|
+
)
|
|
298
|
+
] }),
|
|
299
|
+
/* @__PURE__ */ jsxs3("defs", { children: [
|
|
300
|
+
/* @__PURE__ */ jsx4("clipPath", { id: "KR_svg__a", children: /* @__PURE__ */ jsx4("path", { fill: "#fff", d: "M3 3h36v24H3z" }) }),
|
|
301
|
+
/* @__PURE__ */ jsxs3(
|
|
302
|
+
"filter",
|
|
303
|
+
{
|
|
304
|
+
id: "KR_svg__b",
|
|
305
|
+
width: 40.684,
|
|
306
|
+
height: 28.684,
|
|
307
|
+
x: 0.658,
|
|
308
|
+
y: 0.658,
|
|
309
|
+
colorInterpolationFilters: "sRGB",
|
|
310
|
+
filterUnits: "userSpaceOnUse",
|
|
311
|
+
children: [
|
|
312
|
+
/* @__PURE__ */ jsx4("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
|
|
313
|
+
/* @__PURE__ */ jsx4(
|
|
314
|
+
"feColorMatrix",
|
|
315
|
+
{
|
|
316
|
+
in: "SourceAlpha",
|
|
317
|
+
result: "hardAlpha",
|
|
318
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
319
|
+
}
|
|
320
|
+
),
|
|
321
|
+
/* @__PURE__ */ jsx4("feOffset", {}),
|
|
322
|
+
/* @__PURE__ */ jsx4("feGaussianBlur", { stdDeviation: 1.171 }),
|
|
323
|
+
/* @__PURE__ */ jsx4("feComposite", { in2: "hardAlpha", operator: "out" }),
|
|
324
|
+
/* @__PURE__ */ jsx4("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
|
|
325
|
+
/* @__PURE__ */ jsx4("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_85_784" }),
|
|
326
|
+
/* @__PURE__ */ jsx4(
|
|
327
|
+
"feBlend",
|
|
328
|
+
{
|
|
329
|
+
in: "SourceGraphic",
|
|
330
|
+
in2: "effect1_dropShadow_85_784",
|
|
331
|
+
result: "shape"
|
|
332
|
+
}
|
|
333
|
+
)
|
|
334
|
+
]
|
|
335
|
+
}
|
|
336
|
+
)
|
|
337
|
+
] })
|
|
338
|
+
]
|
|
339
|
+
}
|
|
340
|
+
);
|
|
341
|
+
var Kr_default = SvgKr;
|
|
165
342
|
|
|
166
|
-
// src/
|
|
167
|
-
import * as React4 from "react";
|
|
168
|
-
import { forwardRef as forwardRef4 } from "react";
|
|
343
|
+
// src/icons/theme/Tritanopia.tsx
|
|
169
344
|
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
170
|
-
var SvgTritanopia = (props
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
345
|
+
var SvgTritanopia = (props) => /* @__PURE__ */ jsxs4(
|
|
346
|
+
"svg",
|
|
347
|
+
{
|
|
348
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
349
|
+
width: 28,
|
|
350
|
+
height: 29,
|
|
351
|
+
fill: "none",
|
|
352
|
+
...props,
|
|
353
|
+
children: [
|
|
354
|
+
/* @__PURE__ */ jsx5(
|
|
355
|
+
"rect",
|
|
356
|
+
{
|
|
357
|
+
width: 26.18,
|
|
358
|
+
height: 26.18,
|
|
359
|
+
x: 0.91,
|
|
360
|
+
y: 1.41,
|
|
361
|
+
stroke: "currentColor",
|
|
362
|
+
strokeWidth: 1.82,
|
|
363
|
+
rx: 13.09
|
|
364
|
+
}
|
|
365
|
+
),
|
|
366
|
+
/* @__PURE__ */ jsx5(
|
|
367
|
+
"path",
|
|
368
|
+
{
|
|
369
|
+
fill: "currentColor",
|
|
370
|
+
d: "M8.64 7.152h5.21q1.508 0 2.532.513 1.026.513 1.528 1.405.513.892.513 2.02 0 1.333-.667 2.081-.666.74-1.753 1.036v.144q.717.04 1.415.492.698.45 1.148 1.282.452.819.452 1.938 0 1.158-.534 2.04-.522.882-1.64 1.395-1.118.502-2.81.502H8.641zm5.374 13.207q1.65 0 2.43-.635.79-.636.79-1.682 0-.758-.39-1.395a2.63 2.63 0 0 0-1.097-1.015q-.709-.38-1.63-.38h-3.63v5.107zm-.226-6.706q.8 0 1.456-.307.657-.319 1.036-.892.38-.585.38-1.344 0-1.024-.708-1.671-.708-.646-2.102-.646h-3.364v4.86z"
|
|
371
|
+
}
|
|
372
|
+
),
|
|
373
|
+
/* @__PURE__ */ jsx5(
|
|
374
|
+
"path",
|
|
375
|
+
{
|
|
376
|
+
stroke: "currentColor",
|
|
377
|
+
strokeWidth: 1.517,
|
|
378
|
+
d: "m3.5 1.666 23.333 23.333"
|
|
379
|
+
}
|
|
380
|
+
)
|
|
381
|
+
]
|
|
382
|
+
}
|
|
383
|
+
);
|
|
384
|
+
var Tritanopia_default = SvgTritanopia;
|
|
177
385
|
|
|
178
|
-
// src/
|
|
179
|
-
import * as React5 from "react";
|
|
180
|
-
import { forwardRef as forwardRef5 } from "react";
|
|
386
|
+
// src/icons/theme/Default.tsx
|
|
181
387
|
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
182
|
-
var SvgDefault = (props
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
388
|
+
var SvgDefault = (props) => /* @__PURE__ */ jsxs5(
|
|
389
|
+
"svg",
|
|
390
|
+
{
|
|
391
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
392
|
+
width: 31,
|
|
393
|
+
height: 31,
|
|
394
|
+
fill: "none",
|
|
395
|
+
...props,
|
|
396
|
+
children: [
|
|
397
|
+
/* @__PURE__ */ jsx6(
|
|
398
|
+
"path",
|
|
399
|
+
{
|
|
400
|
+
fill: "currentColor",
|
|
401
|
+
d: "M30.5 15.5s-5.625-10.312-15-10.312S.5 15.5.5 15.5s5.625 10.313 15 10.313 15-10.313 15-10.313m-27.801 0q.16-.245.365-.54c.628-.9 1.554-2.098 2.746-3.29 2.417-2.417 5.716-4.607 9.69-4.607s7.273 2.19 9.69 4.607A24.6 24.6 0 0 1 28.3 15.5q-.16.245-.365.54c-.628.9-1.554 2.098-2.746 3.29-2.417 2.417-5.716 4.608-9.69 4.608s-7.273-2.19-9.69-4.608A24.6 24.6 0 0 1 2.7 15.5"
|
|
402
|
+
}
|
|
403
|
+
),
|
|
404
|
+
/* @__PURE__ */ jsx6(
|
|
405
|
+
"path",
|
|
406
|
+
{
|
|
407
|
+
fill: "currentColor",
|
|
408
|
+
d: "M15.5 10.813a4.688 4.688 0 1 0 0 9.375 4.688 4.688 0 0 0 0-9.375M8.938 15.5a6.562 6.562 0 1 1 13.124 0 6.562 6.562 0 0 1-13.125 0"
|
|
409
|
+
}
|
|
410
|
+
)
|
|
411
|
+
]
|
|
412
|
+
}
|
|
413
|
+
);
|
|
414
|
+
var Default_default = SvgDefault;
|
|
188
415
|
|
|
189
|
-
// src/
|
|
190
|
-
import * as React6 from "react";
|
|
191
|
-
import { forwardRef as forwardRef6 } from "react";
|
|
416
|
+
// src/icons/theme/Protanopia.tsx
|
|
192
417
|
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
193
|
-
var SvgProtanopia = (props
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
418
|
+
var SvgProtanopia = (props) => /* @__PURE__ */ jsxs6(
|
|
419
|
+
"svg",
|
|
420
|
+
{
|
|
421
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
422
|
+
width: 28,
|
|
423
|
+
height: 29,
|
|
424
|
+
fill: "none",
|
|
425
|
+
...props,
|
|
426
|
+
children: [
|
|
427
|
+
/* @__PURE__ */ jsx7(
|
|
428
|
+
"rect",
|
|
429
|
+
{
|
|
430
|
+
width: 26.18,
|
|
431
|
+
height: 26.18,
|
|
432
|
+
x: 0.91,
|
|
433
|
+
y: 1.41,
|
|
434
|
+
stroke: "currentColor",
|
|
435
|
+
strokeWidth: 1.82,
|
|
436
|
+
rx: 13.09
|
|
437
|
+
}
|
|
438
|
+
),
|
|
439
|
+
/* @__PURE__ */ jsx7(
|
|
440
|
+
"path",
|
|
441
|
+
{
|
|
442
|
+
fill: "currentColor",
|
|
443
|
+
d: "M9.252 7.152h5.045q1.692 0 2.83.585 1.14.575 1.682 1.61.554 1.024.554 2.379 0 1.507-.697 2.594-.688 1.086-2.072 1.569L19.937 22h-2.153l-3.107-5.773-.36.01h-3.219V22H9.252zm4.984 7.404q1.711 0 2.502-.728.8-.729.8-2.102 0-1.395-.8-2.164t-2.523-.769h-3.117v5.763z"
|
|
444
|
+
}
|
|
445
|
+
),
|
|
446
|
+
/* @__PURE__ */ jsx7(
|
|
447
|
+
"path",
|
|
448
|
+
{
|
|
449
|
+
stroke: "currentColor",
|
|
450
|
+
strokeWidth: 1.517,
|
|
451
|
+
d: "m3.5 1.666 23.333 23.333"
|
|
452
|
+
}
|
|
453
|
+
)
|
|
454
|
+
]
|
|
455
|
+
}
|
|
456
|
+
);
|
|
457
|
+
var Protanopia_default = SvgProtanopia;
|
|
200
458
|
|
|
201
|
-
// src/
|
|
202
|
-
import * as React7 from "react";
|
|
203
|
-
import { forwardRef as forwardRef7 } from "react";
|
|
459
|
+
// src/icons/theme/Deuteranopia.tsx
|
|
204
460
|
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
205
|
-
var SvgDeuteranopia = (props
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
461
|
+
var SvgDeuteranopia = (props) => /* @__PURE__ */ jsxs7(
|
|
462
|
+
"svg",
|
|
463
|
+
{
|
|
464
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
465
|
+
width: 28,
|
|
466
|
+
height: 29,
|
|
467
|
+
fill: "none",
|
|
468
|
+
...props,
|
|
469
|
+
children: [
|
|
470
|
+
/* @__PURE__ */ jsx8(
|
|
471
|
+
"rect",
|
|
472
|
+
{
|
|
473
|
+
width: 26.18,
|
|
474
|
+
height: 26.18,
|
|
475
|
+
x: 0.91,
|
|
476
|
+
y: 1.41,
|
|
477
|
+
stroke: "currentColor",
|
|
478
|
+
strokeWidth: 1.82,
|
|
479
|
+
rx: 13.09
|
|
480
|
+
}
|
|
481
|
+
),
|
|
482
|
+
/* @__PURE__ */ jsx8(
|
|
483
|
+
"path",
|
|
484
|
+
{
|
|
485
|
+
fill: "currentColor",
|
|
486
|
+
d: "M18.272 11.787q-.493-1.466-1.58-2.287-1.076-.83-2.625-.83-1.332 0-2.41.687-1.065.687-1.691 2.02-.615 1.333-.615 3.2 0 1.865.625 3.198.625 1.334 1.723 2.02 1.097.687 2.491.687 1.252 0 2.205-.523a3.74 3.74 0 0 0 1.497-1.507q.543-.984.564-2.276H14.58v-1.62h5.68v1.6q0 1.814-.779 3.188a5.4 5.4 0 0 1-2.163 2.123q-1.374.738-3.128.738-1.967 0-3.476-.923-1.497-.933-2.327-2.655-.82-1.734-.82-4.05 0-2.308.82-4.03.83-1.734 2.307-2.667t3.373-.933q1.55 0 2.84.615a5.76 5.76 0 0 1 2.144 1.703 5.9 5.9 0 0 1 1.128 2.522z"
|
|
487
|
+
}
|
|
488
|
+
)
|
|
489
|
+
]
|
|
490
|
+
}
|
|
491
|
+
);
|
|
492
|
+
var Deuteranopia_default = SvgDeuteranopia;
|
|
211
493
|
|
|
212
494
|
// src/components/ThemeSwitcher.tsx
|
|
213
495
|
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
214
496
|
var THEME_ICON = {
|
|
215
|
-
default:
|
|
216
|
-
protanopia:
|
|
217
|
-
deuteranopia:
|
|
218
|
-
tritanopia:
|
|
497
|
+
default: Default_default,
|
|
498
|
+
protanopia: Protanopia_default,
|
|
499
|
+
deuteranopia: Deuteranopia_default,
|
|
500
|
+
tritanopia: Tritanopia_default
|
|
219
501
|
};
|
|
220
502
|
function ThemeSwitcher({ options, className }) {
|
|
221
503
|
const { theme, updateTheme, language, updateLanguage } = useTheme();
|
|
@@ -260,7 +542,7 @@ function ThemeSwitcher({ options, className }) {
|
|
|
260
542
|
"w-[60px] h-[60px] p-[10px] bg-[#ffffff] rounded-full flex justify-center items-center",
|
|
261
543
|
isOpen ? "hidden" : "block"
|
|
262
544
|
].join(" "),
|
|
263
|
-
children: /* @__PURE__ */ jsx9(
|
|
545
|
+
children: /* @__PURE__ */ jsx9(Logo_default, { className: "self-center", width: 40, height: 40 })
|
|
264
546
|
}
|
|
265
547
|
),
|
|
266
548
|
isOpen && /* @__PURE__ */ jsxs8(
|
|
@@ -314,7 +596,7 @@ function ThemeSwitcher({ options, className }) {
|
|
|
314
596
|
children: [
|
|
315
597
|
/* @__PURE__ */ jsx9("span", { className: "absolute top-[-20px] left-[0px] text-[#3D4852] text-[8px] px-[9px] py-[2px] rounded-[13px] bg-[#D9D9D9]", children: "Language" }),
|
|
316
598
|
/* @__PURE__ */ jsx9(
|
|
317
|
-
|
|
599
|
+
Us_default,
|
|
318
600
|
{
|
|
319
601
|
className: "self-center",
|
|
320
602
|
width: 30,
|
|
@@ -333,7 +615,7 @@ function ThemeSwitcher({ options, className }) {
|
|
|
333
615
|
onClick: () => updateLanguage("Korean"),
|
|
334
616
|
children: [
|
|
335
617
|
/* @__PURE__ */ jsx9(
|
|
336
|
-
|
|
618
|
+
Kr_default,
|
|
337
619
|
{
|
|
338
620
|
className: "self-center",
|
|
339
621
|
width: 30,
|
package/package.json
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "colbrush",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/
|
|
7
|
-
"module": "./dist/
|
|
8
|
-
"types": "./dist/
|
|
6
|
+
"main": "./dist/client.cjs",
|
|
7
|
+
"module": "./dist/client.js",
|
|
8
|
+
"types": "./dist/client.d.ts",
|
|
9
9
|
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.browser.d.ts",
|
|
12
|
-
"import": "./dist/index.browser.js",
|
|
13
|
-
"require": "./dist/index.browser.cjs"
|
|
14
|
-
},
|
|
15
10
|
"./styles.css": "./dist/styles.css",
|
|
16
11
|
"./client": {
|
|
17
12
|
"types": "./dist/client.d.ts",
|
|
@@ -23,7 +18,7 @@
|
|
|
23
18
|
"typesVersions": {
|
|
24
19
|
"*": {
|
|
25
20
|
"*": [
|
|
26
|
-
"./dist/
|
|
21
|
+
"./dist/client.d.ts"
|
|
27
22
|
]
|
|
28
23
|
}
|
|
29
24
|
},
|
|
@@ -37,10 +32,10 @@
|
|
|
37
32
|
"colbrush": "./dist/cli.js"
|
|
38
33
|
},
|
|
39
34
|
"scripts": {
|
|
40
|
-
"
|
|
35
|
+
"svgr": "svgr src/assets --out-dir src/icons --typescript",
|
|
41
36
|
"build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
37
|
+
"build": "pnpm svgr && tsup --config tsup.config.ts && pnpm build:css",
|
|
38
|
+
"dev": "tsup --config tsup.config.ts --watch",
|
|
44
39
|
"prepublishOnly": "pnpm build"
|
|
45
40
|
},
|
|
46
41
|
"keywords": [],
|
|
@@ -59,6 +54,7 @@
|
|
|
59
54
|
"react-dom": ">=17"
|
|
60
55
|
},
|
|
61
56
|
"devDependencies": {
|
|
57
|
+
"@svgr/cli": "^8.1.0",
|
|
62
58
|
"@tailwindcss/cli": "^4.1.12",
|
|
63
59
|
"@types/chroma-js": "^3.1.1",
|
|
64
60
|
"@types/jest": "^30.0.0",
|
|
@@ -72,9 +68,9 @@
|
|
|
72
68
|
"eslint-plugin-import": "^2.32.0",
|
|
73
69
|
"jest": "^30.0.5",
|
|
74
70
|
"prettier": "^3.6.2",
|
|
71
|
+
"tailwindcss": "^4.1.12",
|
|
75
72
|
"ts-jest": "^29.4.0",
|
|
76
73
|
"tsup": "^8.5.0",
|
|
77
|
-
"tailwindcss": "^4.1.12",
|
|
78
74
|
"typescript": "^5.8.3"
|
|
79
75
|
}
|
|
80
76
|
}
|