@kjaniec-dev/design 0.6.0 → 0.7.1
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 +70 -0
- package/package.json +3 -2
- package/src/tailwind.css +1 -1
- package/src/theme.css +7 -7
- package/tokens.json +7 -7
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @kjaniec-dev/design
|
|
2
|
+
|
|
3
|
+
Design tokens, theme configuration, and Tailwind CSS `@theme` bridge for the **KJ Product Kit**.
|
|
4
|
+
|
|
5
|
+
This package serves as the **source of truth** for all visual properties (colors, typography, spacing, border radii, shadows) used across the component library and any consumer applications.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. How it Works
|
|
10
|
+
|
|
11
|
+
The design tokens are defined in a structured JSON schema and compiled into CSS assets for consumption:
|
|
12
|
+
|
|
13
|
+
* **`tokens.json` (Source of Truth):** Contains token values for layout variables, light theme colors, dark theme colors, border radii, and box shadows.
|
|
14
|
+
* **`build-tokens.js` (Compiler):** A build script that parses the tokens JSON and generates:
|
|
15
|
+
* `src/theme.css`: Declares raw CSS custom properties (`--kj-*`). It maps variables under the `:root` pseudo-class and overrides them for the `.dark` selector (automatic dark mode).
|
|
16
|
+
* `src/tailwind.css`: Contains Tailwind CSS `@theme` mapping directives, hooking the token values directly into the Tailwind v4 compilation pipeline.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 2. Compile Tokens
|
|
21
|
+
|
|
22
|
+
To rebuild the theme stylesheets after modifying `tokens.json`, run:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm run build
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
*Note: The compile step runs automatically inside the `prepublishOnly` hook before publishing the package to npm.*
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## 3. Usage in Applications
|
|
33
|
+
|
|
34
|
+
### Installation
|
|
35
|
+
Install the design tokens package alongside the companion React components library:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @kjaniec-dev/design @kjaniec-dev/ui
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Stylesheet Setup
|
|
42
|
+
Import the Tailwind theme bridge at the top of your global CSS stylesheet (Vite, Next.js, etc.):
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
@import "tailwindcss";
|
|
46
|
+
@import "@kjaniec-dev/design/tailwind.css";
|
|
47
|
+
@import "@kjaniec-dev/ui/ui.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Once imported, you can use any of the design kit theme mappings natively in your HTML or component class lists (e.g., `bg-primary`, `text-primary-foreground`, `rounded-kj-md`, `shadow-kj-sm`).
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## 4. Theme Configuration
|
|
55
|
+
|
|
56
|
+
Colors and typography variables are declared semantically:
|
|
57
|
+
* **Primary/Secondary/Success/Warning/Danger/Info:** Brand colors with automated hover and surface variants.
|
|
58
|
+
* **Canvas & Surface:** Background tokens used for page layouts and card/panel elements.
|
|
59
|
+
* **Border & Ring:** Layout boundary and focus indicator styles.
|
|
60
|
+
|
|
61
|
+
### Dark Mode
|
|
62
|
+
Dark mode is activated simply by adding the `.dark` class to an ancestor container (e.g. `<html>` or `<body>`):
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<html class="dark">
|
|
66
|
+
<body class="bg-canvas text-foreground">
|
|
67
|
+
<!-- Everything here automatically switches to dark-theme tokens -->
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kjaniec-dev/design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "Design tokens and Tailwind v4 theme for the KJ Product Kit",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "kjaniec-dev",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"directory": "packages/design"
|
|
11
11
|
},
|
|
12
12
|
"scripts": {
|
|
13
|
-
"build": "node build-tokens.js"
|
|
13
|
+
"build": "node build-tokens.js",
|
|
14
|
+
"prepublishOnly": "npm run build"
|
|
14
15
|
},
|
|
15
16
|
"publishConfig": {
|
|
16
17
|
"access": "public"
|
package/src/tailwind.css
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--color-info-surface: var(--kj-info-surface);
|
|
28
28
|
--color-canvas: var(--kj-bg-canvas);
|
|
29
29
|
--color-subtle: var(--kj-bg-subtle);
|
|
30
|
-
--color-surface: var(--kj-bg-surface);
|
|
30
|
+
--color-bg-surface: var(--kj-bg-surface);
|
|
31
31
|
--color-elevated: var(--kj-bg-elevated);
|
|
32
32
|
--color-overlay: var(--kj-bg-overlay);
|
|
33
33
|
--color-border-subtle: var(--kj-border-subtle);
|
package/src/theme.css
CHANGED
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
--kj-surface: #ffffff;
|
|
6
6
|
--kj-card: #ffffff;
|
|
7
7
|
--kj-card-foreground: #09090b;
|
|
8
|
-
--kj-primary: #
|
|
9
|
-
--kj-primary-hover: #
|
|
10
|
-
--kj-primary-foreground: #
|
|
11
|
-
--kj-secondary: #
|
|
12
|
-
--kj-secondary-hover: #
|
|
8
|
+
--kj-primary: #b45309;
|
|
9
|
+
--kj-primary-hover: #92400e;
|
|
10
|
+
--kj-primary-foreground: #ffffff;
|
|
11
|
+
--kj-secondary: #0f766e;
|
|
12
|
+
--kj-secondary-hover: #115e59;
|
|
13
13
|
--kj-secondary-foreground: #ffffff;
|
|
14
14
|
--kj-muted: #f4f4f5;
|
|
15
|
-
--kj-muted-foreground: #
|
|
15
|
+
--kj-muted-foreground: #52525b;
|
|
16
16
|
--kj-border: #e4e4e7;
|
|
17
17
|
--kj-input: #e4e4e7;
|
|
18
|
-
--kj-ring: #
|
|
18
|
+
--kj-ring: #b45309;
|
|
19
19
|
--kj-success: #059669;
|
|
20
20
|
--kj-success-surface: #ecfdf5;
|
|
21
21
|
--kj-warning: #d97706;
|
package/tokens.json
CHANGED
|
@@ -222,23 +222,23 @@
|
|
|
222
222
|
},
|
|
223
223
|
"primary": {
|
|
224
224
|
"$type": "color",
|
|
225
|
-
"$value": "#
|
|
225
|
+
"$value": "#b45309"
|
|
226
226
|
},
|
|
227
227
|
"primaryHover": {
|
|
228
228
|
"$type": "color",
|
|
229
|
-
"$value": "#
|
|
229
|
+
"$value": "#92400e"
|
|
230
230
|
},
|
|
231
231
|
"primaryForeground": {
|
|
232
232
|
"$type": "color",
|
|
233
|
-
"$value": "#
|
|
233
|
+
"$value": "#ffffff"
|
|
234
234
|
},
|
|
235
235
|
"secondary": {
|
|
236
236
|
"$type": "color",
|
|
237
|
-
"$value": "#
|
|
237
|
+
"$value": "#0f766e"
|
|
238
238
|
},
|
|
239
239
|
"secondaryHover": {
|
|
240
240
|
"$type": "color",
|
|
241
|
-
"$value": "#
|
|
241
|
+
"$value": "#115e59"
|
|
242
242
|
},
|
|
243
243
|
"secondaryForeground": {
|
|
244
244
|
"$type": "color",
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
},
|
|
251
251
|
"mutedForeground": {
|
|
252
252
|
"$type": "color",
|
|
253
|
-
"$value": "#
|
|
253
|
+
"$value": "#52525b"
|
|
254
254
|
},
|
|
255
255
|
"border": {
|
|
256
256
|
"$type": "color",
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
},
|
|
263
263
|
"ring": {
|
|
264
264
|
"$type": "color",
|
|
265
|
-
"$value": "#
|
|
265
|
+
"$value": "#b45309"
|
|
266
266
|
},
|
|
267
267
|
"success": {
|
|
268
268
|
"$type": "color",
|