@ismail-elkorchi/ui-tokens 0.1.0 → 0.1.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.
Files changed (18) hide show
  1. package/README.md +113 -10
  2. package/dist/base.css +986 -0
  3. package/dist/index.css +1646 -1
  4. package/dist/index.d.ts +7 -0
  5. package/dist/index.js +38 -0
  6. package/dist/themes/uik-dark.css +657 -0
  7. package/dist/themes/uik-density-comfortable.css +26 -0
  8. package/dist/themes/uik-density-compact.css +26 -0
  9. package/dist/themes/uik-light.css +420 -0
  10. package/dist/themes/uik-theme-base.css +414 -0
  11. package/dist/tokens.resolved.dark.comfortable.json +2355 -0
  12. package/dist/tokens.resolved.dark.compact.json +2377 -0
  13. package/dist/tokens.resolved.light.comfortable.json +2355 -0
  14. package/dist/tokens.resolved.light.compact.json +2377 -0
  15. package/dist/uik-tailwind.compat.css +638 -0
  16. package/dist/uik-tailwind.strict.css +659 -0
  17. package/package.json +44 -9
  18. package/dist/theme.css +0 -45
package/README.md CHANGED
@@ -1,18 +1,121 @@
1
- # @ismail-elkorchi/ui-tokens
1
+ # UI Tokens
2
2
 
3
- CSS-only design tokens. Load them before Tailwind so the variables are available to `@ismail-elkorchi/ui-primitives` and `@ismail-elkorchi/ui-shell`.
3
+ Design tokens for UIK with W3C DTCG JSON sources, CSS custom properties, and a Tailwind v4 bridge.
4
4
 
5
- ## Usage
5
+ ## What this package provides
6
+
7
+ - Resolved JSON outputs for light/dark + density contexts (built from DTCG token sources in the repo).
8
+ - CSS custom properties under the `--uik-` prefix.
9
+ - Tailwind v4 theme mappings (strict + compat) for utility classes.
10
+ - A tiny JS/TS runtime for programmatic access.
11
+
12
+ ## Installation
13
+
14
+ ```bash
15
+ npm install @ismail-elkorchi/ui-tokens
16
+ ```
17
+
18
+ ## Outputs (what to import)
19
+
20
+ CSS entrypoints:
21
+
22
+ - `@ismail-elkorchi/ui-tokens/index.css` (base CSS + strict Tailwind theme mapping)
23
+ - `@ismail-elkorchi/ui-tokens/base.css` (CSS variables + theme/density layers)
24
+ - `@ismail-elkorchi/ui-tokens/uik-tailwind.strict.css`
25
+ - `@ismail-elkorchi/ui-tokens/uik-tailwind.compat.css`
26
+ - `@ismail-elkorchi/ui-tokens/themes/uik-theme-base.css`
27
+ - `@ismail-elkorchi/ui-tokens/themes/uik-light.css`
28
+ - `@ismail-elkorchi/ui-tokens/themes/uik-dark.css`
29
+ - `@ismail-elkorchi/ui-tokens/themes/uik-density-comfortable.css`
30
+ - `@ismail-elkorchi/ui-tokens/themes/uik-density-compact.css`
31
+
32
+ Resolved JSON outputs:
33
+
34
+ - `@ismail-elkorchi/ui-tokens/tokens.resolved.light.comfortable.json`
35
+ - `@ismail-elkorchi/ui-tokens/tokens.resolved.light.compact.json`
36
+ - `@ismail-elkorchi/ui-tokens/tokens.resolved.dark.comfortable.json`
37
+ - `@ismail-elkorchi/ui-tokens/tokens.resolved.dark.compact.json`
38
+
39
+ JS/TS entrypoint:
40
+
41
+ - `@ismail-elkorchi/ui-tokens` (ESM, with types)
42
+
43
+ ## Non-Tailwind usage
44
+
45
+ Quick start:
46
+
47
+ ```css
48
+ @import "@ismail-elkorchi/ui-tokens/index.css";
49
+ ```
50
+
51
+ Explicit control (theme + density):
52
+
53
+ ```css
54
+ @import "@ismail-elkorchi/ui-tokens/base.css";
55
+ @import "@ismail-elkorchi/ui-tokens/themes/uik-light.css";
56
+ @import "@ismail-elkorchi/ui-tokens/themes/uik-density-comfortable.css";
57
+ ```
58
+
59
+ Set attributes on a root element to switch variants:
60
+
61
+ ```html
62
+ <html data-uik-theme="dark" data-uik-density="compact">
63
+ ```
64
+
65
+ Defaults are light + comfortable when attributes are not present.
66
+
67
+ ## Tailwind v4 usage
68
+
69
+ Strict vs compat:
70
+
71
+ - `uik-tailwind.strict.css` resets Tailwind theme variables first and then re-declares UIK tokens.
72
+ - `uik-tailwind.compat.css` only adds UIK tokens without resets.
73
+
74
+ Strict example:
75
+
76
+ ```css
77
+ @import "tailwindcss";
78
+ @import "@ismail-elkorchi/ui-tokens/index.css";
79
+ ```
80
+
81
+ Compat example:
6
82
 
7
83
  ```css
8
- @import '@ismail-elkorchi/ui-tokens/index.css';
9
- @import 'tailwindcss';
84
+ @import "tailwindcss";
85
+ @import "@ismail-elkorchi/ui-tokens/base.css";
86
+ @import "@ismail-elkorchi/ui-tokens/uik-tailwind.compat.css";
87
+ ```
88
+
89
+ Example utilities:
90
+
91
+ ```html
92
+ <div class="bg-uik-surface-bg text-uik-text-default border-uik-border-default rounded-uik-3 shadow-uik-2 ring-uik-focus-ring-default">
93
+ ...
94
+ </div>
10
95
  ```
11
96
 
12
- `index.css` forwards to `theme.css`, which defines Tailwind v4 `@layer base` variables plus a matching `@theme` block.
97
+ ## Programmatic usage (JS/TS)
98
+
99
+ ```js
100
+ import {
101
+ THEME_ATTRIBUTE,
102
+ DENSITY_ATTRIBUTE,
103
+ setTheme,
104
+ setDensity,
105
+ getCssVarName
106
+ } from '@ismail-elkorchi/ui-tokens';
107
+
108
+ const cssVar = getCssVarName('color.accent.1');
109
+
110
+ setTheme(document.documentElement, 'dark');
111
+ setDensity(document.documentElement, 'compact');
112
+
113
+ document.documentElement.setAttribute(THEME_ATTRIBUTE, 'dark');
114
+ document.documentElement.setAttribute(DENSITY_ATTRIBUTE, 'compact');
115
+ ```
13
116
 
14
- ## Build & distribution
117
+ ## Guarantees
15
118
 
16
- - `npm run build` copies `index.css` and `theme.css` into `dist/`.
17
- - Exported entrypoints resolve to `dist/index.css` and `dist/theme.css`.
18
- - Published output includes only `dist/` and this README; workspace CSS sources stay local.
119
+ - All CSS custom properties are prefixed with `--uik-`.
120
+ - Tailwind utilities are derived from tokens; no hard-coded design values.
121
+ - Validation gates cover build output presence and Tailwind parsing.