colbrush 1.0.1 → 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/{KR-VDUE5A52.svg → KR-BEBXLJC6.svg} +27 -27
- package/dist/{US-2H6JMPYF.svg → US-H2QUNREB.svg} +23 -23
- package/dist/cli.cjs +1 -0
- package/dist/cli.js +10 -39
- package/dist/client.cjs +140 -36
- package/dist/client.js +420 -36
- package/dist/{default-T73GN6PX.svg → default-EPJEL445.svg} +4 -4
- package/dist/{deuteranopia-FN5I5CZS.svg → deuteranopia-C23MR6FZ.svg} +4 -4
- package/dist/{logo-LPQG253V.svg → logo-RY5YYL6A.svg} +10 -10
- package/dist/{protanopia-CBWKRHAO.svg → protanopia-HOT6PUHN.svg} +5 -5
- package/dist/{tritanopia-O4QXTOPG.svg → tritanopia-MTE6DBJL.svg} +5 -5
- package/package.json +76 -80
- package/dist/chunk-4UJAETSM.js +0 -63
- package/dist/chunk-MPTI2JBC.js +0 -103
- package/dist/index.browser.cjs +0 -267
- package/dist/index.browser.d.cts +0 -78
- package/dist/index.browser.d.ts +0 -78
- package/dist/index.browser.js +0 -223
- package/dist/index.node.cjs +0 -190
- package/dist/index.node.d.cts +0 -5
- package/dist/index.node.d.ts +0 -5
- package/dist/index.node.js +0 -153
- package/dist/types-1AdZPAhd.d.cts +0 -20
- package/dist/types-1AdZPAhd.d.ts +0 -20
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
|
+
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
<svg width="42" height="30" viewBox="0 0 42 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_85_784)" filter="url(#filter0_d_85_784)">
|
|
3
|
-
<path d="M3 3H39V27H3V3Z" fill="white"/>
|
|
4
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.49609 10.27L11.8243 5.27771L12.7001 5.86161L9.37194 10.8539L8.49609 10.27ZM9.74417 11.1021L13.0724 6.10976L13.9482 6.69366L10.62 11.686L9.74417 11.1021ZM10.9922 11.9341L14.3204 6.94181L15.1963 7.52571L11.8681 12.518L10.9922 11.9341ZM26.8012 22.4734L30.1294 17.4811L31.0053 18.065L27.6771 23.0573L26.8012 22.4734ZM28.0493 23.3055L31.3775 18.3131L32.2533 18.897L28.9251 23.8893L28.0493 23.3055ZM33.5014 19.7291L30.1732 24.7214L29.2974 24.1375L32.6256 19.1452L33.5014 19.7291Z" fill="black"/>
|
|
5
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9884 22.8526L27.8281 20.0791L28.3147 19.3492L32.475 22.1227L31.9884 22.8526Z" fill="white"/>
|
|
6
|
-
<path d="M25.9915 18.3277C27.8296 15.5705 27.0846 11.8453 24.3274 10.0072C21.5702 8.16905 17.845 8.9141 16.0069 11.6713C14.1688 14.4284 14.9138 18.1537 17.671 19.9918C20.4282 21.8299 24.1534 21.0848 25.9915 18.3277Z" fill="#CA163A"/>
|
|
7
|
-
<path d="M16.0069 11.6713C15.0883 13.0491 15.4611 14.9129 16.839 15.8315C18.2168 16.7501 20.0806 16.3773 20.9992 14.9995C21.9178 13.6216 23.7816 13.2488 25.1595 14.1674C26.5373 15.086 26.9101 16.9498 25.9915 18.3277C24.1544 21.0834 20.4268 21.8289 17.671 19.9918C14.9153 18.1546 14.1697 14.427 16.0069 11.6713Z" fill="#0E4896"/>
|
|
8
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1732 5.27734L33.5014 10.2697L32.6255 10.8536L29.2973 5.86124L30.1732 5.27734ZM28.9251 6.10942L32.2533 11.1017L31.3775 11.6856L28.0493 6.69332L28.9251 6.10942ZM27.677 6.94146L31.0052 11.9337L30.1294 12.5176L26.8012 7.52536L27.677 6.94146ZM11.868 17.4807L15.1962 22.4731L14.3204 23.057L10.9922 18.0646L11.868 17.4807ZM10.6199 18.3128L13.9481 23.3051L13.0723 23.889L9.74409 18.8967L10.6199 18.3128ZM9.37194 19.1449L12.7001 24.1372L11.8243 24.7211L8.49609 19.7288L9.37194 19.1449Z" fill="black"/>
|
|
9
|
-
<path d="M11.2241 21.5159L12.4722 20.6839L11.2241 21.5159ZM28.0714 10.2844L29.5292 9.31252L28.0714 10.2844ZM30.7773 8.48048L32.0254 7.64844L30.7773 8.48048Z" fill="black"/>
|
|
10
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.2688 8.01308L31.0207 8.84512L30.5341 8.11524L31.7822 7.2832L32.2688 8.01308ZM29.7726 9.67715L28.3148 10.649L27.8283 9.91912L29.286 8.94728L29.7726 9.67715ZM12.7156 21.0486L11.4675 21.8806L10.981 21.1507L12.229 20.3187L12.7156 21.0486Z" fill="white"/>
|
|
11
|
-
</g>
|
|
12
|
-
<defs>
|
|
13
|
-
<filter id="filter0_d_85_784" x="0.658202" y="0.658202" width="40.6836" height="28.6836" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
14
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
15
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
16
|
-
<feOffset/>
|
|
17
|
-
<feGaussianBlur stdDeviation="1.1709"/>
|
|
18
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
19
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
20
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_85_784"/>
|
|
21
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_85_784" result="shape"/>
|
|
22
|
-
</filter>
|
|
23
|
-
<clipPath id="clip0_85_784">
|
|
24
|
-
<rect width="36" height="24" fill="white" transform="translate(3 3)"/>
|
|
25
|
-
</clipPath>
|
|
26
|
-
</defs>
|
|
27
|
-
</svg>
|
|
1
|
+
<svg width="42" height="30" viewBox="0 0 42 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_85_784)" filter="url(#filter0_d_85_784)">
|
|
3
|
+
<path d="M3 3H39V27H3V3Z" fill="white"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.49609 10.27L11.8243 5.27771L12.7001 5.86161L9.37194 10.8539L8.49609 10.27ZM9.74417 11.1021L13.0724 6.10976L13.9482 6.69366L10.62 11.686L9.74417 11.1021ZM10.9922 11.9341L14.3204 6.94181L15.1963 7.52571L11.8681 12.518L10.9922 11.9341ZM26.8012 22.4734L30.1294 17.4811L31.0053 18.065L27.6771 23.0573L26.8012 22.4734ZM28.0493 23.3055L31.3775 18.3131L32.2533 18.897L28.9251 23.8893L28.0493 23.3055ZM33.5014 19.7291L30.1732 24.7214L29.2974 24.1375L32.6256 19.1452L33.5014 19.7291Z" fill="black"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9884 22.8526L27.8281 20.0791L28.3147 19.3492L32.475 22.1227L31.9884 22.8526Z" fill="white"/>
|
|
6
|
+
<path d="M25.9915 18.3277C27.8296 15.5705 27.0846 11.8453 24.3274 10.0072C21.5702 8.16905 17.845 8.9141 16.0069 11.6713C14.1688 14.4284 14.9138 18.1537 17.671 19.9918C20.4282 21.8299 24.1534 21.0848 25.9915 18.3277Z" fill="#CA163A"/>
|
|
7
|
+
<path d="M16.0069 11.6713C15.0883 13.0491 15.4611 14.9129 16.839 15.8315C18.2168 16.7501 20.0806 16.3773 20.9992 14.9995C21.9178 13.6216 23.7816 13.2488 25.1595 14.1674C26.5373 15.086 26.9101 16.9498 25.9915 18.3277C24.1544 21.0834 20.4268 21.8289 17.671 19.9918C14.9153 18.1546 14.1697 14.427 16.0069 11.6713Z" fill="#0E4896"/>
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1732 5.27734L33.5014 10.2697L32.6255 10.8536L29.2973 5.86124L30.1732 5.27734ZM28.9251 6.10942L32.2533 11.1017L31.3775 11.6856L28.0493 6.69332L28.9251 6.10942ZM27.677 6.94146L31.0052 11.9337L30.1294 12.5176L26.8012 7.52536L27.677 6.94146ZM11.868 17.4807L15.1962 22.4731L14.3204 23.057L10.9922 18.0646L11.868 17.4807ZM10.6199 18.3128L13.9481 23.3051L13.0723 23.889L9.74409 18.8967L10.6199 18.3128ZM9.37194 19.1449L12.7001 24.1372L11.8243 24.7211L8.49609 19.7288L9.37194 19.1449Z" fill="black"/>
|
|
9
|
+
<path d="M11.2241 21.5159L12.4722 20.6839L11.2241 21.5159ZM28.0714 10.2844L29.5292 9.31252L28.0714 10.2844ZM30.7773 8.48048L32.0254 7.64844L30.7773 8.48048Z" fill="black"/>
|
|
10
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.2688 8.01308L31.0207 8.84512L30.5341 8.11524L31.7822 7.2832L32.2688 8.01308ZM29.7726 9.67715L28.3148 10.649L27.8283 9.91912L29.286 8.94728L29.7726 9.67715ZM12.7156 21.0486L11.4675 21.8806L10.981 21.1507L12.229 20.3187L12.7156 21.0486Z" fill="white"/>
|
|
11
|
+
</g>
|
|
12
|
+
<defs>
|
|
13
|
+
<filter id="filter0_d_85_784" x="0.658202" y="0.658202" width="40.6836" height="28.6836" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
14
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
15
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
16
|
+
<feOffset/>
|
|
17
|
+
<feGaussianBlur stdDeviation="1.1709"/>
|
|
18
|
+
<feComposite in2="hardAlpha" operator="out"/>
|
|
19
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
20
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_85_784"/>
|
|
21
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_85_784" result="shape"/>
|
|
22
|
+
</filter>
|
|
23
|
+
<clipPath id="clip0_85_784">
|
|
24
|
+
<rect width="36" height="24" fill="white" transform="translate(3 3)"/>
|
|
25
|
+
</clipPath>
|
|
26
|
+
</defs>
|
|
27
|
+
</svg>
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
<svg width="50" height="38" viewBox="0 0 50 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_85_779)" filter="url(#filter0_d_85_779)">
|
|
3
|
-
<path d="M7 7H42.7847V30.8565H7V7Z" fill="white"/>
|
|
4
|
-
<path d="M7 7H42.7847V8.83458H7V7ZM7 10.6692H42.7847V12.5037H7V10.6692ZM7 14.3383H42.7847V16.1729H7V14.3383ZM7 18.0075H42.7847V19.842H7V18.0075ZM7 21.6836H42.7847V23.5182H7V21.6836ZM7 25.3527H42.7847V27.1873H7V25.3527ZM7 29.0219H42.7847V30.8565H7V29.0219Z" fill="#D80027"/>
|
|
5
|
-
<path d="M7 7H24.8923V19.842H7V7Z" fill="#2E52B2"/>
|
|
6
|
-
<path d="M10.3344 16.6892L10.0553 15.7964L9.74841 16.6892H8.82764L9.57402 17.2264L9.295 18.1192L10.0553 17.5682L10.7947 18.1192L10.5087 17.2264L11.2691 16.6892H10.3344ZM14.2616 16.6892L13.9756 15.7964L13.6826 16.6892H12.7619L13.5082 17.2264L13.2292 18.1192L13.9756 17.5682L14.729 18.1192L14.4499 17.2264L15.1963 16.6892H14.2616ZM18.2028 16.6892L17.9029 15.7964L17.6238 16.6892H16.6821L17.4494 17.2264L17.1565 18.1192L17.9029 17.5682L18.6702 18.1192L18.3772 17.2264L19.1236 16.6892H18.2028ZM22.1231 16.6892L21.8441 15.7964L21.5511 16.6892H20.6233L21.3767 17.2264L21.0977 18.1192L21.8441 17.5682L22.5974 18.1192L22.2975 17.2264L23.0648 16.6892H22.1231ZM13.9756 12.2528L13.6826 13.1457H12.7619L13.5082 13.6967L13.2292 14.5757L13.9756 14.0316L14.729 14.5757L14.4499 13.6967L15.1963 13.1457H14.2616L13.9756 12.2528ZM10.0553 12.2528L9.74841 13.1457H8.82764L9.57402 13.6967L9.295 14.5757L10.0553 14.0316L10.7947 14.5757L10.5087 13.6967L11.2691 13.1457H10.3344L10.0553 12.2528ZM17.9029 12.2528L17.6238 13.1457H16.6821L17.4494 13.6967L17.1565 14.5757L17.9029 14.0316L18.6702 14.5757L18.3772 13.6967L19.1236 13.1457H18.2028L17.9029 12.2528ZM21.8441 12.2528L21.5511 13.1457H20.6233L21.3767 13.6967L21.0977 14.5757L21.8441 14.0316L22.5974 14.5757L22.2975 13.6967L23.0648 13.1457H22.1231L21.8441 12.2528ZM10.0553 8.72314L9.74841 9.60207H8.82764L9.57402 10.1531L9.295 11.039L10.0553 10.488L10.7947 11.039L10.5087 10.1531L11.2691 9.60207H10.3344L10.0553 8.72314ZM13.9756 8.72314L13.6826 9.60207H12.7619L13.5082 10.1531L13.2292 11.039L13.9756 10.488L14.729 11.039L14.4499 10.1531L15.1963 9.60207H14.2616L13.9756 8.72314ZM17.9029 8.72314L17.6238 9.60207H16.6821L17.4494 10.1531L17.1565 11.039L17.9029 10.488L18.6702 11.039L18.3772 10.1531L19.1236 9.60207H18.2028L17.9029 8.72314ZM21.8441 8.72314L21.5511 9.60207H20.6233L21.3767 10.1531L21.0977 11.039L21.8441 10.488L22.5974 11.039L22.2975 10.1531L23.0648 9.60207H22.1231L21.8441 8.72314Z" fill="white"/>
|
|
7
|
-
</g>
|
|
8
|
-
<defs>
|
|
9
|
-
<filter id="filter0_d_85_779" x="0.761634" y="0.761634" width="48.2614" height="36.3332" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
10
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
11
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
12
|
-
<feOffset/>
|
|
13
|
-
<feGaussianBlur stdDeviation="3.11918"/>
|
|
14
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
15
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
16
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_85_779"/>
|
|
17
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_85_779" result="shape"/>
|
|
18
|
-
</filter>
|
|
19
|
-
<clipPath id="clip0_85_779">
|
|
20
|
-
<rect width="35.7847" height="23.8565" fill="white" transform="translate(7 7)"/>
|
|
21
|
-
</clipPath>
|
|
22
|
-
</defs>
|
|
23
|
-
</svg>
|
|
1
|
+
<svg width="50" height="38" viewBox="0 0 50 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_85_779)" filter="url(#filter0_d_85_779)">
|
|
3
|
+
<path d="M7 7H42.7847V30.8565H7V7Z" fill="white"/>
|
|
4
|
+
<path d="M7 7H42.7847V8.83458H7V7ZM7 10.6692H42.7847V12.5037H7V10.6692ZM7 14.3383H42.7847V16.1729H7V14.3383ZM7 18.0075H42.7847V19.842H7V18.0075ZM7 21.6836H42.7847V23.5182H7V21.6836ZM7 25.3527H42.7847V27.1873H7V25.3527ZM7 29.0219H42.7847V30.8565H7V29.0219Z" fill="#D80027"/>
|
|
5
|
+
<path d="M7 7H24.8923V19.842H7V7Z" fill="#2E52B2"/>
|
|
6
|
+
<path d="M10.3344 16.6892L10.0553 15.7964L9.74841 16.6892H8.82764L9.57402 17.2264L9.295 18.1192L10.0553 17.5682L10.7947 18.1192L10.5087 17.2264L11.2691 16.6892H10.3344ZM14.2616 16.6892L13.9756 15.7964L13.6826 16.6892H12.7619L13.5082 17.2264L13.2292 18.1192L13.9756 17.5682L14.729 18.1192L14.4499 17.2264L15.1963 16.6892H14.2616ZM18.2028 16.6892L17.9029 15.7964L17.6238 16.6892H16.6821L17.4494 17.2264L17.1565 18.1192L17.9029 17.5682L18.6702 18.1192L18.3772 17.2264L19.1236 16.6892H18.2028ZM22.1231 16.6892L21.8441 15.7964L21.5511 16.6892H20.6233L21.3767 17.2264L21.0977 18.1192L21.8441 17.5682L22.5974 18.1192L22.2975 17.2264L23.0648 16.6892H22.1231ZM13.9756 12.2528L13.6826 13.1457H12.7619L13.5082 13.6967L13.2292 14.5757L13.9756 14.0316L14.729 14.5757L14.4499 13.6967L15.1963 13.1457H14.2616L13.9756 12.2528ZM10.0553 12.2528L9.74841 13.1457H8.82764L9.57402 13.6967L9.295 14.5757L10.0553 14.0316L10.7947 14.5757L10.5087 13.6967L11.2691 13.1457H10.3344L10.0553 12.2528ZM17.9029 12.2528L17.6238 13.1457H16.6821L17.4494 13.6967L17.1565 14.5757L17.9029 14.0316L18.6702 14.5757L18.3772 13.6967L19.1236 13.1457H18.2028L17.9029 12.2528ZM21.8441 12.2528L21.5511 13.1457H20.6233L21.3767 13.6967L21.0977 14.5757L21.8441 14.0316L22.5974 14.5757L22.2975 13.6967L23.0648 13.1457H22.1231L21.8441 12.2528ZM10.0553 8.72314L9.74841 9.60207H8.82764L9.57402 10.1531L9.295 11.039L10.0553 10.488L10.7947 11.039L10.5087 10.1531L11.2691 9.60207H10.3344L10.0553 8.72314ZM13.9756 8.72314L13.6826 9.60207H12.7619L13.5082 10.1531L13.2292 11.039L13.9756 10.488L14.729 11.039L14.4499 10.1531L15.1963 9.60207H14.2616L13.9756 8.72314ZM17.9029 8.72314L17.6238 9.60207H16.6821L17.4494 10.1531L17.1565 11.039L17.9029 10.488L18.6702 11.039L18.3772 10.1531L19.1236 9.60207H18.2028L17.9029 8.72314ZM21.8441 8.72314L21.5511 9.60207H20.6233L21.3767 10.1531L21.0977 11.039L21.8441 10.488L22.5974 11.039L22.2975 10.1531L23.0648 9.60207H22.1231L21.8441 8.72314Z" fill="white"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<filter id="filter0_d_85_779" x="0.761634" y="0.761634" width="48.2614" height="36.3332" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
10
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
11
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
12
|
+
<feOffset/>
|
|
13
|
+
<feGaussianBlur stdDeviation="3.11918"/>
|
|
14
|
+
<feComposite in2="hardAlpha" operator="out"/>
|
|
15
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
16
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_85_779"/>
|
|
17
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_85_779" result="shape"/>
|
|
18
|
+
</filter>
|
|
19
|
+
<clipPath id="clip0_85_779">
|
|
20
|
+
<rect width="35.7847" height="23.8565" fill="white" transform="translate(7 7)"/>
|
|
21
|
+
</clipPath>
|
|
22
|
+
</defs>
|
|
23
|
+
</svg>
|
package/dist/cli.cjs
CHANGED
package/dist/cli.js
CHANGED
|
@@ -118,24 +118,10 @@ function upsertBlock(root, selector, kv) {
|
|
|
118
118
|
});
|
|
119
119
|
for (const [prop, value] of remain) rule.append({ prop, value });
|
|
120
120
|
}
|
|
121
|
-
function getColorVariablesFromRoot(root) {
|
|
122
|
-
const vars = {};
|
|
123
|
-
root.walkDecls((decl) => {
|
|
124
|
-
const name = decl.prop.trim();
|
|
125
|
-
const value = decl.value.trim();
|
|
126
|
-
if (name.startsWith("--color")) {
|
|
127
|
-
vars[name] = value;
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
return vars;
|
|
131
|
-
}
|
|
132
121
|
function applyThemes(input, cssPath = CSS_PATH) {
|
|
133
122
|
const root = loadRoot(cssPath);
|
|
134
|
-
const
|
|
123
|
+
const selector = `[data-theme='${input.vision}']`;
|
|
135
124
|
const varsForTheme = {};
|
|
136
|
-
for (const [varName, value] of Object.entries(originalVars)) {
|
|
137
|
-
varsForTheme[varName] = value;
|
|
138
|
-
}
|
|
139
125
|
for (const [varName, val] of Object.entries(input.variables)) {
|
|
140
126
|
const rich = typeof val === "string" ? inferRich(varName, val) : val;
|
|
141
127
|
const m = varName.match(variationRegex);
|
|
@@ -144,10 +130,15 @@ function applyThemes(input, cssPath = CSS_PATH) {
|
|
|
144
130
|
const [, token] = m;
|
|
145
131
|
const keys = rich.keys && rich.keys.length ? rich.keys : getExistingKeysForToken(root, token).length ? getExistingKeysForToken(root, token) : Array.from(DEFAULT_KEYS);
|
|
146
132
|
if (rich.scale !== false) {
|
|
147
|
-
const scaleMap = buildScaleFromBaseHex(rich.base, {
|
|
133
|
+
const scaleMap = buildScaleFromBaseHex(rich.base, {
|
|
134
|
+
keys
|
|
135
|
+
});
|
|
148
136
|
for (const k of keys) {
|
|
149
137
|
const hex = scaleMap[k];
|
|
150
|
-
varsForTheme[`--${token}-${k}`] = toThemeColor(
|
|
138
|
+
varsForTheme[`--${token}-${k}`] = toThemeColor(
|
|
139
|
+
hex,
|
|
140
|
+
input.vision
|
|
141
|
+
);
|
|
151
142
|
}
|
|
152
143
|
} else {
|
|
153
144
|
varsForTheme[varName] = toThemeColor(rich.base, input.vision);
|
|
@@ -156,7 +147,7 @@ function applyThemes(input, cssPath = CSS_PATH) {
|
|
|
156
147
|
varsForTheme[varName] = toThemeColor(rich.base, input.vision);
|
|
157
148
|
}
|
|
158
149
|
}
|
|
159
|
-
upsertBlock(root,
|
|
150
|
+
upsertBlock(root, selector, varsForTheme);
|
|
160
151
|
fs.writeFileSync(cssPath, root.toString(), "utf8");
|
|
161
152
|
console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
|
|
162
153
|
}
|
|
@@ -312,23 +303,6 @@ function removeExistingThemeBlocks(content) {
|
|
|
312
303
|
}
|
|
313
304
|
|
|
314
305
|
// src/node/runThemeApply.ts
|
|
315
|
-
function hexToRgb(hex) {
|
|
316
|
-
let clean = hex.replace("#", "").toLowerCase();
|
|
317
|
-
if (clean.length === 3) {
|
|
318
|
-
clean = clean.split("").map((c) => c + c).join("");
|
|
319
|
-
}
|
|
320
|
-
if (clean.length !== 6) return null;
|
|
321
|
-
const r = parseInt(clean.substring(0, 2), 16);
|
|
322
|
-
const g = parseInt(clean.substring(2, 4), 16);
|
|
323
|
-
const b = parseInt(clean.substring(4, 6), 16);
|
|
324
|
-
return [r, g, b];
|
|
325
|
-
}
|
|
326
|
-
function isNeutralColor(value) {
|
|
327
|
-
const rgb = hexToRgb(value);
|
|
328
|
-
if (!rgb) return false;
|
|
329
|
-
const [r, g, b] = rgb;
|
|
330
|
-
return r === g && g === b;
|
|
331
|
-
}
|
|
332
306
|
function isBlackOrWhite(hexColor) {
|
|
333
307
|
const hex = hexColor.toLowerCase().replace("#", "");
|
|
334
308
|
const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
|
|
@@ -356,10 +330,7 @@ async function runThemeApply(cssPath) {
|
|
|
356
330
|
while ((match = variableRegex.exec(content)) !== null) {
|
|
357
331
|
const [, key, value] = match;
|
|
358
332
|
const cleanKey = key.trim();
|
|
359
|
-
const cleanValue = value.trim()
|
|
360
|
-
if (isNeutralColor(cleanValue)) {
|
|
361
|
-
continue;
|
|
362
|
-
}
|
|
333
|
+
const cleanValue = value.trim();
|
|
363
334
|
const scale = calculateScale(cleanKey, cleanValue);
|
|
364
335
|
const rich = {
|
|
365
336
|
base: cleanValue,
|