colbrush 1.7.0 → 1.8.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.
Files changed (2) hide show
  1. package/README.md +26 -1
  2. package/package.json +1 -2
package/README.md CHANGED
@@ -29,7 +29,7 @@ npm install colbrush
29
29
  ---
30
30
  ## Usage
31
31
  ### 1. Define CSS variables (index.css or global CSS)
32
- ```
32
+ ```css
33
33
  @theme {
34
34
  --color-primary-500: #7fe4c1;
35
35
  --color-secondary-yellow: #fdfa91;
@@ -102,6 +102,31 @@ export default function TestPage() {
102
102
  );
103
103
  }
104
104
  ```
105
+ ### 6. Apply SimulationFilter for vision simulation
106
+ ```
107
+ import { SimulationFilter } from 'colbrush/devtools';
108
+
109
+ function App() {
110
+ return (
111
+ <ThemeProvider>
112
+ <SimulationFilter
113
+ initialMode="normal"
114
+ toolbarPosition="left-bottom"
115
+ ...>
116
+ <YourApp />
117
+ </SimulationFilter>
118
+ </ThemeProvider>
119
+ );
120
+ }
121
+ ```
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
+
129
+
105
130
  ## Supported Vision Types
106
131
  | **Vision Type** | **설명** |
107
132
  | --------------- | ------ |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colbrush",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes",
5
5
  "homepage": "https://colbrush.vercel.app",
6
6
  "repository": {
@@ -53,7 +53,6 @@
53
53
  "dependencies": {
54
54
  "chokidar": "^3.6.0",
55
55
  "chroma-js": "^3.1.2",
56
- "color-blind": "^0.1.3",
57
56
  "colorjs.io": "^0.5.2",
58
57
  "postcss": "^8.5.6",
59
58
  "postcss-safe-parser": "^7.0.1"