colbrush 1.12.0 → 1.14.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/README.md +105 -36
- package/dist/cli.cjs +4 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
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
2
|
|
|
3
|
+
#### A React theme switching library that makes it easy to apply color-blind accessible UI themes.
|
|
4
|
+
|
|
5
|
+
<img width="1434" height="314" alt="colbrush" src="https://github.com/user-attachments/assets/c009bd8c-974c-4e99-b28b-86acb9df26d9" />
|
|
5
6
|
|
|
6
7
|
---
|
|
7
8
|
|
|
@@ -11,9 +12,18 @@
|
|
|
11
12
|
- ⚙️ Automatic CSS variable generation via PostCSS (`@theme` syntax supported)
|
|
12
13
|
- 🎛 Provides a `ThemeProvider` based on React Context
|
|
13
14
|
- 🎨 Accessible `ThemeSwitcher` component included
|
|
14
|
-
- 🧩 Built-in
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
- 🧩 Built-in hook for runtime updates:
|
|
16
|
+
- `useTheme()` – provides access to theme and language states
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
const { theme, useUpdateTheme, language, useUpdateLanguage } =
|
|
20
|
+
useTheme();
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
- `theme`: currently active theme name
|
|
24
|
+
- `updateTheme(theme: ThemeType)`: update the current theme (supports color-blind modes)
|
|
25
|
+
- `language`: current language setting (currently supports **Korean** and **English**)
|
|
26
|
+
- `updateLanguage(language: TLanguage)`: update the language context
|
|
17
27
|
- 🧪 Customizable color scales and transformation algorithms
|
|
18
28
|
|
|
19
29
|
---
|
|
@@ -27,46 +37,56 @@ npm install colbrush
|
|
|
27
37
|
```
|
|
28
38
|
|
|
29
39
|
---
|
|
40
|
+
|
|
30
41
|
## Usage
|
|
42
|
+
|
|
31
43
|
### 1. Define CSS variables (index.css or global CSS)
|
|
44
|
+
|
|
32
45
|
```css
|
|
33
46
|
@theme {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
47
|
+
--color-primary-500: #7fe4c1;
|
|
48
|
+
--color-secondary-yellow: #fdfa91;
|
|
49
|
+
--color-default-gray-500: #c3c3c3;
|
|
37
50
|
}
|
|
38
51
|
```
|
|
52
|
+
|
|
39
53
|
### 2. Generate color-blind themes
|
|
40
54
|
|
|
41
55
|
**Prerequisite:** Define your base palette **in a CSS file (e.g., `src/index.css`) using HEX colors (`#RRGGBB`)**.
|
|
42
56
|
Variables can be declared inside an `@theme { ... }` block (recommended) or `:root { ... }`.
|
|
43
57
|
|
|
44
58
|
Example (`src/index.css`):
|
|
59
|
+
|
|
45
60
|
```css
|
|
46
61
|
@theme {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
62
|
+
--color-primary-500: #7fe4c1;
|
|
63
|
+
--color-secondary-yellow: #fdfa91;
|
|
64
|
+
--color-default-gray-500: #c3c3c3;
|
|
50
65
|
}
|
|
51
66
|
```
|
|
67
|
+
|
|
52
68
|
Then run the generator:
|
|
53
69
|
|
|
54
70
|
#### Default: reads/writes to src/index.css
|
|
55
|
-
|
|
71
|
+
|
|
72
|
+
```bash
|
|
56
73
|
npx colbrush --generate
|
|
57
74
|
```
|
|
75
|
+
|
|
58
76
|
Use a different file (optional):
|
|
59
|
-
|
|
77
|
+
|
|
78
|
+
```bash
|
|
60
79
|
npx colbrush --generate --css=path/to/your.css
|
|
61
80
|
```
|
|
62
81
|
|
|
63
82
|
#### Notes
|
|
64
83
|
|
|
65
|
-
|
|
66
|
-
If
|
|
84
|
+
Colbrush now supports all color formats — `HEX`, `RGB`, `HSL`, `HWB`, `LAB`, `LCH`, `OKLCH`, and named CSS colors.<br/>
|
|
85
|
+
If `--css` is omitted, Colbrush uses `src/index.css` by default.
|
|
67
86
|
Generated color-blind variants are appended to the same file below your @theme block.
|
|
68
87
|
|
|
69
88
|
### 3. Wrap your app with ThemeProvider
|
|
89
|
+
|
|
70
90
|
```
|
|
71
91
|
import { ThemeProvider } from 'colbrush/client';
|
|
72
92
|
|
|
@@ -78,16 +98,36 @@ function App() {
|
|
|
78
98
|
);
|
|
79
99
|
}
|
|
80
100
|
```
|
|
81
|
-
|
|
101
|
+
|
|
102
|
+
### 4. Import colbrush/styles.css
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
// index.css
|
|
106
|
+
@import 'colbrush/styles.css';
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### 5. Use the ThemeSwitcher component
|
|
110
|
+
|
|
82
111
|
```
|
|
83
112
|
import { ThemeSwitcher } from 'colbrush/client';
|
|
84
|
-
import 'colbrush/styles.css';
|
|
85
113
|
|
|
86
114
|
function Settings() {
|
|
87
|
-
return
|
|
115
|
+
return (
|
|
116
|
+
<ThemeSwitcher
|
|
117
|
+
position="right-bottom"
|
|
118
|
+
...
|
|
119
|
+
/>
|
|
120
|
+
);
|
|
88
121
|
}
|
|
89
122
|
```
|
|
90
|
-
|
|
123
|
+
|
|
124
|
+
| **Prop** | **Type** | **Default** | **Description** |
|
|
125
|
+
| ----------- | --------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
126
|
+
| `options?` | `{ key: ThemeKey; label: string; }[]` | `undefined` | Defines the selectable themes shown in the dropdown.<br>Each object contains:<br>• `key`: theme identifier (`ThemeKey`)<br>• `label`: display name for the theme. |
|
|
127
|
+
| `position?` | `left-top` / `right-top` / `left-bottom` / `right-bottom` | `right-bottom` | Determines where the ThemeSwitcher dropdown appears. |
|
|
128
|
+
|
|
129
|
+
### 6. Use hooks for theme and language switching
|
|
130
|
+
|
|
91
131
|
```
|
|
92
132
|
import { useTheme } from 'colbrush/client';
|
|
93
133
|
|
|
@@ -102,7 +142,9 @@ export default function TestPage() {
|
|
|
102
142
|
);
|
|
103
143
|
}
|
|
104
144
|
```
|
|
145
|
+
|
|
105
146
|
### 6. Apply SimulationFilter for vision simulation
|
|
147
|
+
|
|
106
148
|
```
|
|
107
149
|
import { SimulationFilter } from 'colbrush/devtools';
|
|
108
150
|
|
|
@@ -118,31 +160,60 @@ function App() {
|
|
|
118
160
|
</ThemeProvider>
|
|
119
161
|
);
|
|
120
162
|
}
|
|
163
|
+
|
|
121
164
|
```
|
|
122
|
-
| **SimulationFilterProp** | **Type** | **Default** | **Description** |
|
|
123
|
-
| ----------------- | ----------------------------------------------------------------- | ------------- | ------------------------- |
|
|
124
|
-
| `initialMode?` | `"normal"` / `"protanopia"` / `"deuteranopia"` / `"tritanopia"` | `"normal"` | initial simulation mode |
|
|
125
|
-
| `toolbarPosition?` | `"top-left"` / `"top-right"` / `"bottom-left"` / `"bottom-right"` | `"top-right"` | toolbar position |
|
|
126
|
-
| `shortcut?` | `boolean` | `true` | enable keyboard shortcuts (⌘/Ctrl + Alt + D) |
|
|
127
|
-
| `productionGuard?` | `boolean` | `false` | block usage in production |
|
|
128
165
|
|
|
166
|
+
| **SimulationFilterProp** | **Type** | **Default** | **Description** |
|
|
167
|
+
| ------------------------ | --------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------- |
|
|
168
|
+
| `initialMode?` | `none` / `protanopia` / `deuteranopia` / `tritanopia` | `none` | initial simulation mode |
|
|
169
|
+
| `position?` | `left-top` / `right-top` / `left-bottom` / `right-bottom` | `left-bottom` | toolbar position |
|
|
170
|
+
| `allowInProd?` | `boolean` | `false` | Forces the filter to be available in production (for debugging) |
|
|
171
|
+
| `storageKey?` | `string` | `colbrush-filter` | Customizes the `localStorage` key used to store the simulation state. |
|
|
172
|
+
| `devHostPattern?` | `string` | `localhost / 127 / 192.168.x` | Defines a custom regular expression for allowed development hosts. |
|
|
129
173
|
|
|
130
174
|
## Supported Vision Types
|
|
175
|
+
|
|
131
176
|
| **Vision Type** | **설명** |
|
|
132
|
-
| --------------- |
|
|
133
|
-
| protanopia | 적색맹
|
|
134
|
-
| deuteranopia | 녹색맹
|
|
135
|
-
| tritanopia | 청색맹
|
|
177
|
+
| --------------- | -------- |
|
|
178
|
+
| protanopia | 적색맹 |
|
|
179
|
+
| deuteranopia | 녹색맹 |
|
|
180
|
+
| tritanopia | 청색맹 |
|
|
181
|
+
|
|
182
|
+
## CLI (Command-Line Interface)
|
|
183
|
+
|
|
184
|
+
**Description:**
|
|
185
|
+
Colbrush provides a command-line tool that automatically generates accessibility-optimized color themes for
|
|
186
|
+
**Protanopia (red-blindness)**, **Deuteranopia (green-blindness)**, and **Tritanopia (blue-blindness)**
|
|
187
|
+
based on developer-defined CSS variables.
|
|
188
|
+
The generated themes are appended directly to the existing CSS file.
|
|
189
|
+
|
|
190
|
+
### Commands and Usage
|
|
191
|
+
|
|
192
|
+
| **Command** | **Description** |
|
|
193
|
+
| --------------------- | ------------------------------------------------------------------------------------------------ |
|
|
194
|
+
| `colbrush --generate` | Generates accessibility color themes for users with color vision deficiencies (default command). |
|
|
195
|
+
| `colbrush --doctor` | Runs a system diagnostic to detect environment or configuration issues. |
|
|
196
|
+
| `colbrush --help` | Displays all available commands and usage options. |
|
|
197
|
+
| `colbrush --version` | Shows the currently installed version of Colbrush (e.g., `v1.6.0`). |
|
|
198
|
+
|
|
199
|
+
### Options
|
|
200
|
+
|
|
201
|
+
| **Option** | **Description** | **Default** |
|
|
202
|
+
| --------------- | ------------------------------------------------------------------------ | --------------- |
|
|
203
|
+
| `--css=<path>` | Specifies the target CSS file path for theme generation. | `src/index.css` |
|
|
204
|
+
| `--no-color` | Disables colored output in the CLI. | — |
|
|
205
|
+
| `--json=<path>` | Saves a detailed generation report as a JSON file at the specified path. | — |
|
|
206
|
+
|
|
207
|
+
For more details, visit the **[👉 Colbrush Official Website](https://www.colbrush.site)**.
|
|
136
208
|
|
|
137
209
|
## 👥 Team
|
|
138
210
|
|
|
139
211
|
|  |  |  |  |  |
|
|
140
|
-
|
|
|
141
|
-
| **윤수호**
|
|
142
|
-
| PM
|
|
143
|
-
|
|
212
|
+
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
|
213
|
+
| **윤수호** | **노하영** | [**김연진**](https://github.com/yeonjin719) | [**윤혜성**](https://github.com/hyesngy) | [**이준희**](https://github.com/jjjuni) |
|
|
214
|
+
| PM | Designer | Frontend · Library Engineer | Frontend · Library Engineer | Frontend · Library Engineer |
|
|
144
215
|
|
|
145
|
-
|
|
216
|
+
## 📜 License
|
|
146
217
|
|
|
147
218
|
MIT License
|
|
148
219
|
|
|
@@ -166,5 +237,3 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
|
166
237
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
167
238
|
SOFTWARE.
|
|
168
239
|
|
|
169
|
-
|
|
170
|
-
|
package/dist/cli.cjs
CHANGED
|
@@ -36,7 +36,7 @@ function parseFlags(argv = process.argv.slice(2)) {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
// src/core/constants/regex.ts
|
|
39
|
-
var variableRegex = /(--color-[\w-]+):\s*(#
|
|
39
|
+
var variableRegex = /(--color-[\w-]+):\s*([#a-fA-F0-9]{3,8}|(?:oklch|lab|rgb|hsl)\([^)]+\))/g;
|
|
40
40
|
var variationRegex = /^--(.+?)-(50|100|200|300|400|500|600|700|800|900)$/i;
|
|
41
41
|
|
|
42
42
|
// src/cli/applyThemes.ts
|
|
@@ -76,8 +76,9 @@ var DEFAULT_SCALE = {
|
|
|
76
76
|
// src/core/utils/colorScale.ts
|
|
77
77
|
var CLAMP01 = (x) => Math.max(0, Math.min(1, x));
|
|
78
78
|
var Color = import_colorjs.default.default ?? import_colorjs.default;
|
|
79
|
-
function hexToOKLCH(
|
|
80
|
-
const
|
|
79
|
+
function hexToOKLCH(color) {
|
|
80
|
+
const normalizedColor = color.replace(/,(?=\s*\d)/g, " ");
|
|
81
|
+
const c = new Color(normalizedColor);
|
|
81
82
|
const o = c.to("oklch");
|
|
82
83
|
return { l: o.l, c: o.c, h: o.h ?? 0 };
|
|
83
84
|
}
|
package/package.json
CHANGED