@dezkareid/design-tokens 1.2.0 → 1.3.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 (7) hide show
  1. package/AGENTS.md +5 -5
  2. package/README.md +10 -0
  3. package/dist/catalogs/all-tokens-js.md +30 -30
  4. package/dist/js/tokens.d.ts +30 -30
  5. package/dist/js/tokens.js +30 -30
  6. package/dist/js/tokens.mjs +30 -30
  7. package/package.json +4 -2
package/AGENTS.md CHANGED
@@ -91,18 +91,18 @@ This project uses the **OpenSpec (opsx)** workflow for all changes. Do not modif
91
91
  - `dist/js/tokens.mjs` (`js/custom-module`) - ESM.
92
92
  - `dist/js/tokens.d.ts` (`typescript/custom-declarations`) - TypeScript declarations.
93
93
  - *Patterns*:
94
- - `ColorBase{Blue,Green,Red,Gray}Val{100,500,900}`
94
+ - `ColorBase{Blue,Green,Red,Gray}{100,500,900}`
95
95
  - `ColorBase{White,Black}`
96
96
  - `{Light,Dark}Color{Primary,Success,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextInverse}`
97
- - `SpacingVal{0,4,8,12,16,24,32,48,64}`
97
+ - `Spacing{0,4,8,12,16,24,32,48,64}`
98
98
  - `FontFamily{Base,Mono}`
99
- - `FontSizeVal{100-900}`
99
+ - `FontSize{100-900}`
100
100
  - `FontWeight{Light,Regular,Medium,Bold}`
101
101
  - `FontLineHeight{None,Tight,Normal,Relaxed}`
102
102
  - `Breakpoint{Small,Medium,Large,ExtraLarge}{Min,Max}`
103
103
  - *Example*:
104
104
  ```javascript
105
- export const ColorBaseBlueVal500 = "#3b82f6";
106
- export const SpacingVal16 = "1rem";
105
+ export const ColorBaseBlue500 = "#3b82f6";
106
+ export const Spacing16 = "1rem";
107
107
  export const BreakpointMediumMin = "37.5rem";
108
108
  ```
package/README.md CHANGED
@@ -86,6 +86,16 @@ if (window.matchMedia(`(min-width: ${BreakpointMediumMin})`).matches) {
86
86
  }
87
87
  ```
88
88
 
89
+ ## Visualizer
90
+
91
+ To explore design tokens visually, including swatches and spacing scales, run the visualizer:
92
+
93
+ ```bash
94
+ pnpm visualizer
95
+ ```
96
+
97
+ This will open an interactive dashboard in your browser.
98
+
89
99
  ## Discovery
90
100
 
91
101
  You can explore all available design tokens by generating a catalog in your preferred format:
package/dist/catalogs/all-tokens-js.md CHANGED
@@ -19,18 +19,18 @@ This catalog contains design tokens optimized for JS usage.
19
19
 
20
20
  | JS Variable | Value |
21
21
  | :--- | :--- |
22
- | `ColorBaseBlueVal100` | `#dbeafe` |
23
- | `ColorBaseBlueVal500` | `#3b82f6` |
24
- | `ColorBaseBlueVal900` | `#1e3a8a` |
25
- | `ColorBaseGreenVal100` | `#dcfce7` |
26
- | `ColorBaseGreenVal500` | `#22c55e` |
27
- | `ColorBaseGreenVal900` | `#14532d` |
28
- | `ColorBaseRedVal100` | `#fee2e2` |
29
- | `ColorBaseRedVal500` | `#ef4444` |
30
- | `ColorBaseRedVal900` | `#7f1d1d` |
31
- | `ColorBaseGrayVal100` | `#f3f4f6` |
32
- | `ColorBaseGrayVal500` | `#6b7280` |
33
- | `ColorBaseGrayVal900` | `#111827` |
22
+ | `ColorBaseBlue100` | `#dbeafe` |
23
+ | `ColorBaseBlue500` | `#3b82f6` |
24
+ | `ColorBaseBlue900` | `#1e3a8a` |
25
+ | `ColorBaseGreen100` | `#dcfce7` |
26
+ | `ColorBaseGreen500` | `#22c55e` |
27
+ | `ColorBaseGreen900` | `#14532d` |
28
+ | `ColorBaseRed100` | `#fee2e2` |
29
+ | `ColorBaseRed500` | `#ef4444` |
30
+ | `ColorBaseRed900` | `#7f1d1d` |
31
+ | `ColorBaseGray100` | `#f3f4f6` |
32
+ | `ColorBaseGray500` | `#6b7280` |
33
+ | `ColorBaseGray900` | `#111827` |
34
34
  | `ColorBaseWhite` | `#ffffff` |
35
35
  | `ColorBaseBlack` | `#000000` |
36
36
 
@@ -40,15 +40,15 @@ This catalog contains design tokens optimized for JS usage.
40
40
  | :--- | :--- |
41
41
  | `FontFamilyBase` | `'IBM Plex Sans', sans-serif` |
42
42
  | `FontFamilyMono` | `'IBM Plex Mono', monospace` |
43
- | `FontSizeVal100` | `0.75rem` |
44
- | `FontSizeVal200` | `0.875rem` |
45
- | `FontSizeVal300` | `1rem` |
46
- | `FontSizeVal400` | `1.125rem` |
47
- | `FontSizeVal500` | `1.25rem` |
48
- | `FontSizeVal600` | `1.5rem` |
49
- | `FontSizeVal700` | `1.875rem` |
50
- | `FontSizeVal800` | `2.25rem` |
51
- | `FontSizeVal900` | `3rem` |
43
+ | `FontSize100` | `0.75rem` |
44
+ | `FontSize200` | `0.875rem` |
45
+ | `FontSize300` | `1rem` |
46
+ | `FontSize400` | `1.125rem` |
47
+ | `FontSize500` | `1.25rem` |
48
+ | `FontSize600` | `1.5rem` |
49
+ | `FontSize700` | `1.875rem` |
50
+ | `FontSize800` | `2.25rem` |
51
+ | `FontSize900` | `3rem` |
52
52
  | `FontWeightLight` | `300` |
53
53
  | `FontWeightRegular` | `400` |
54
54
  | `FontWeightMedium` | `500` |
@@ -62,15 +62,15 @@ This catalog contains design tokens optimized for JS usage.
62
62
 
63
63
  | JS Variable | Value |
64
64
  | :--- | :--- |
65
- | `SpacingVal0` | `0` |
66
- | `SpacingVal4` | `0.25rem` |
67
- | `SpacingVal8` | `0.5rem` |
68
- | `SpacingVal12` | `0.75rem` |
69
- | `SpacingVal16` | `1rem` |
70
- | `SpacingVal24` | `1.5rem` |
71
- | `SpacingVal32` | `2rem` |
72
- | `SpacingVal48` | `3rem` |
73
- | `SpacingVal64` | `4rem` |
65
+ | `Spacing0` | `0` |
66
+ | `Spacing4` | `0.25rem` |
67
+ | `Spacing8` | `0.5rem` |
68
+ | `Spacing12` | `0.75rem` |
69
+ | `Spacing16` | `1rem` |
70
+ | `Spacing24` | `1.5rem` |
71
+ | `Spacing32` | `2rem` |
72
+ | `Spacing48` | `3rem` |
73
+ | `Spacing64` | `4rem` |
74
74
 
75
75
  ## Semantic Tokens
76
76
 
package/dist/js/tokens.d.ts CHANGED
@@ -10,18 +10,18 @@ export const BreakpointLargeMin: string;
10
10
  export const BreakpointLargeMax: string;
11
11
  export const BreakpointExtraLargeMin: string;
12
12
  export const BreakpointExtraLargeMax: string;
13
- export const ColorBaseBlueVal100: string;
14
- export const ColorBaseBlueVal500: string;
15
- export const ColorBaseBlueVal900: string;
16
- export const ColorBaseGreenVal100: string;
17
- export const ColorBaseGreenVal500: string;
18
- export const ColorBaseGreenVal900: string;
19
- export const ColorBaseRedVal100: string;
20
- export const ColorBaseRedVal500: string;
21
- export const ColorBaseRedVal900: string;
22
- export const ColorBaseGrayVal100: string;
23
- export const ColorBaseGrayVal500: string;
24
- export const ColorBaseGrayVal900: string;
13
+ export const ColorBaseBlue100: string;
14
+ export const ColorBaseBlue500: string;
15
+ export const ColorBaseBlue900: string;
16
+ export const ColorBaseGreen100: string;
17
+ export const ColorBaseGreen500: string;
18
+ export const ColorBaseGreen900: string;
19
+ export const ColorBaseRed100: string;
20
+ export const ColorBaseRed500: string;
21
+ export const ColorBaseRed900: string;
22
+ export const ColorBaseGray100: string;
23
+ export const ColorBaseGray500: string;
24
+ export const ColorBaseGray900: string;
25
25
  export const ColorBaseWhite: string;
26
26
  export const ColorBaseBlack: string;
27
27
  export const LightColorPrimary: string;
@@ -38,26 +38,26 @@ export const DarkColorBackgroundPrimary: string;
38
38
  export const DarkColorBackgroundSecondary: string;
39
39
  export const DarkColorTextPrimary: string;
40
40
  export const DarkColorTextInverse: string;
41
- export const SpacingVal0: string;
42
- export const SpacingVal4: string;
43
- export const SpacingVal8: string;
44
- export const SpacingVal12: string;
45
- export const SpacingVal16: string;
46
- export const SpacingVal24: string;
47
- export const SpacingVal32: string;
48
- export const SpacingVal48: string;
49
- export const SpacingVal64: string;
41
+ export const Spacing0: string;
42
+ export const Spacing4: string;
43
+ export const Spacing8: string;
44
+ export const Spacing12: string;
45
+ export const Spacing16: string;
46
+ export const Spacing24: string;
47
+ export const Spacing32: string;
48
+ export const Spacing48: string;
49
+ export const Spacing64: string;
50
50
  export const FontFamilyBase: string;
51
51
  export const FontFamilyMono: string;
52
- export const FontSizeVal100: string;
53
- export const FontSizeVal200: string;
54
- export const FontSizeVal300: string;
55
- export const FontSizeVal400: string;
56
- export const FontSizeVal500: string;
57
- export const FontSizeVal600: string;
58
- export const FontSizeVal700: string;
59
- export const FontSizeVal800: string;
60
- export const FontSizeVal900: string;
52
+ export const FontSize100: string;
53
+ export const FontSize200: string;
54
+ export const FontSize300: string;
55
+ export const FontSize400: string;
56
+ export const FontSize500: string;
57
+ export const FontSize600: string;
58
+ export const FontSize700: string;
59
+ export const FontSize800: string;
60
+ export const FontSize900: string;
61
61
  export const FontWeightLight: string;
62
62
  export const FontWeightRegular: string;
63
63
  export const FontWeightMedium: string;
package/dist/js/tokens.js CHANGED
@@ -10,18 +10,18 @@ export const BreakpointLargeMin = "60rem";
10
10
  export const BreakpointLargeMax = "89.99rem";
11
11
  export const BreakpointExtraLargeMin = "90rem";
12
12
  export const BreakpointExtraLargeMax = "9999rem";
13
- export const ColorBaseBlueVal100 = "#dbeafe";
14
- export const ColorBaseBlueVal500 = "#3b82f6";
15
- export const ColorBaseBlueVal900 = "#1e3a8a";
16
- export const ColorBaseGreenVal100 = "#dcfce7";
17
- export const ColorBaseGreenVal500 = "#22c55e";
18
- export const ColorBaseGreenVal900 = "#14532d";
19
- export const ColorBaseRedVal100 = "#fee2e2";
20
- export const ColorBaseRedVal500 = "#ef4444";
21
- export const ColorBaseRedVal900 = "#7f1d1d";
22
- export const ColorBaseGrayVal100 = "#f3f4f6";
23
- export const ColorBaseGrayVal500 = "#6b7280";
24
- export const ColorBaseGrayVal900 = "#111827";
13
+ export const ColorBaseBlue100 = "#dbeafe";
14
+ export const ColorBaseBlue500 = "#3b82f6";
15
+ export const ColorBaseBlue900 = "#1e3a8a";
16
+ export const ColorBaseGreen100 = "#dcfce7";
17
+ export const ColorBaseGreen500 = "#22c55e";
18
+ export const ColorBaseGreen900 = "#14532d";
19
+ export const ColorBaseRed100 = "#fee2e2";
20
+ export const ColorBaseRed500 = "#ef4444";
21
+ export const ColorBaseRed900 = "#7f1d1d";
22
+ export const ColorBaseGray100 = "#f3f4f6";
23
+ export const ColorBaseGray500 = "#6b7280";
24
+ export const ColorBaseGray900 = "#111827";
25
25
  export const ColorBaseWhite = "#ffffff";
26
26
  export const ColorBaseBlack = "#000000";
27
27
  export const LightColorPrimary = "#3b82f6";
@@ -38,26 +38,26 @@ export const DarkColorBackgroundPrimary = "#111827";
38
38
  export const DarkColorBackgroundSecondary = "#6b7280";
39
39
  export const DarkColorTextPrimary = "#ffffff";
40
40
  export const DarkColorTextInverse = "#111827";
41
- export const SpacingVal0 = "0";
42
- export const SpacingVal4 = "0.25rem";
43
- export const SpacingVal8 = "0.5rem";
44
- export const SpacingVal12 = "0.75rem";
45
- export const SpacingVal16 = "1rem";
46
- export const SpacingVal24 = "1.5rem";
47
- export const SpacingVal32 = "2rem";
48
- export const SpacingVal48 = "3rem";
49
- export const SpacingVal64 = "4rem";
41
+ export const Spacing0 = "0";
42
+ export const Spacing4 = "0.25rem";
43
+ export const Spacing8 = "0.5rem";
44
+ export const Spacing12 = "0.75rem";
45
+ export const Spacing16 = "1rem";
46
+ export const Spacing24 = "1.5rem";
47
+ export const Spacing32 = "2rem";
48
+ export const Spacing48 = "3rem";
49
+ export const Spacing64 = "4rem";
50
50
  export const FontFamilyBase = "'IBM Plex Sans', sans-serif";
51
51
  export const FontFamilyMono = "'IBM Plex Mono', monospace";
52
- export const FontSizeVal100 = "0.75rem";
53
- export const FontSizeVal200 = "0.875rem";
54
- export const FontSizeVal300 = "1rem";
55
- export const FontSizeVal400 = "1.125rem";
56
- export const FontSizeVal500 = "1.25rem";
57
- export const FontSizeVal600 = "1.5rem";
58
- export const FontSizeVal700 = "1.875rem";
59
- export const FontSizeVal800 = "2.25rem";
60
- export const FontSizeVal900 = "3rem";
52
+ export const FontSize100 = "0.75rem";
53
+ export const FontSize200 = "0.875rem";
54
+ export const FontSize300 = "1rem";
55
+ export const FontSize400 = "1.125rem";
56
+ export const FontSize500 = "1.25rem";
57
+ export const FontSize600 = "1.5rem";
58
+ export const FontSize700 = "1.875rem";
59
+ export const FontSize800 = "2.25rem";
60
+ export const FontSize900 = "3rem";
61
61
  export const FontWeightLight = "300";
62
62
  export const FontWeightRegular = "400";
63
63
  export const FontWeightMedium = "500";
package/dist/js/tokens.mjs CHANGED
@@ -10,18 +10,18 @@ export const BreakpointLargeMin = "60rem";
10
10
  export const BreakpointLargeMax = "89.99rem";
11
11
  export const BreakpointExtraLargeMin = "90rem";
12
12
  export const BreakpointExtraLargeMax = "9999rem";
13
- export const ColorBaseBlueVal100 = "#dbeafe";
14
- export const ColorBaseBlueVal500 = "#3b82f6";
15
- export const ColorBaseBlueVal900 = "#1e3a8a";
16
- export const ColorBaseGreenVal100 = "#dcfce7";
17
- export const ColorBaseGreenVal500 = "#22c55e";
18
- export const ColorBaseGreenVal900 = "#14532d";
19
- export const ColorBaseRedVal100 = "#fee2e2";
20
- export const ColorBaseRedVal500 = "#ef4444";
21
- export const ColorBaseRedVal900 = "#7f1d1d";
22
- export const ColorBaseGrayVal100 = "#f3f4f6";
23
- export const ColorBaseGrayVal500 = "#6b7280";
24
- export const ColorBaseGrayVal900 = "#111827";
13
+ export const ColorBaseBlue100 = "#dbeafe";
14
+ export const ColorBaseBlue500 = "#3b82f6";
15
+ export const ColorBaseBlue900 = "#1e3a8a";
16
+ export const ColorBaseGreen100 = "#dcfce7";
17
+ export const ColorBaseGreen500 = "#22c55e";
18
+ export const ColorBaseGreen900 = "#14532d";
19
+ export const ColorBaseRed100 = "#fee2e2";
20
+ export const ColorBaseRed500 = "#ef4444";
21
+ export const ColorBaseRed900 = "#7f1d1d";
22
+ export const ColorBaseGray100 = "#f3f4f6";
23
+ export const ColorBaseGray500 = "#6b7280";
24
+ export const ColorBaseGray900 = "#111827";
25
25
  export const ColorBaseWhite = "#ffffff";
26
26
  export const ColorBaseBlack = "#000000";
27
27
  export const LightColorPrimary = "#3b82f6";
@@ -38,26 +38,26 @@ export const DarkColorBackgroundPrimary = "#111827";
38
38
  export const DarkColorBackgroundSecondary = "#6b7280";
39
39
  export const DarkColorTextPrimary = "#ffffff";
40
40
  export const DarkColorTextInverse = "#111827";
41
- export const SpacingVal0 = "0";
42
- export const SpacingVal4 = "0.25rem";
43
- export const SpacingVal8 = "0.5rem";
44
- export const SpacingVal12 = "0.75rem";
45
- export const SpacingVal16 = "1rem";
46
- export const SpacingVal24 = "1.5rem";
47
- export const SpacingVal32 = "2rem";
48
- export const SpacingVal48 = "3rem";
49
- export const SpacingVal64 = "4rem";
41
+ export const Spacing0 = "0";
42
+ export const Spacing4 = "0.25rem";
43
+ export const Spacing8 = "0.5rem";
44
+ export const Spacing12 = "0.75rem";
45
+ export const Spacing16 = "1rem";
46
+ export const Spacing24 = "1.5rem";
47
+ export const Spacing32 = "2rem";
48
+ export const Spacing48 = "3rem";
49
+ export const Spacing64 = "4rem";
50
50
  export const FontFamilyBase = "'IBM Plex Sans', sans-serif";
51
51
  export const FontFamilyMono = "'IBM Plex Mono', monospace";
52
- export const FontSizeVal100 = "0.75rem";
53
- export const FontSizeVal200 = "0.875rem";
54
- export const FontSizeVal300 = "1rem";
55
- export const FontSizeVal400 = "1.125rem";
56
- export const FontSizeVal500 = "1.25rem";
57
- export const FontSizeVal600 = "1.5rem";
58
- export const FontSizeVal700 = "1.875rem";
59
- export const FontSizeVal800 = "2.25rem";
60
- export const FontSizeVal900 = "3rem";
52
+ export const FontSize100 = "0.75rem";
53
+ export const FontSize200 = "0.875rem";
54
+ export const FontSize300 = "1rem";
55
+ export const FontSize400 = "1.125rem";
56
+ export const FontSize500 = "1.25rem";
57
+ export const FontSize600 = "1.5rem";
58
+ export const FontSize700 = "1.875rem";
59
+ export const FontSize800 = "2.25rem";
60
+ export const FontSize900 = "3rem";
61
61
  export const FontWeightLight = "300";
62
62
  export const FontWeightRegular = "400";
63
63
  export const FontWeightMedium = "500";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dezkareid/design-tokens",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Design tokens for dezkareid design system",
5
5
  "main": "dist/js/tokens.js",
6
6
  "module": "dist/js/tokens.mjs",
@@ -39,12 +39,14 @@
39
39
  "homepage": "https://github.com/dezkareid/dezkareid/tree/main/projects/dezkareid/design-system/design-tokens#readme",
40
40
  "devDependencies": {
41
41
  "commander": "12.0.0",
42
+ "http-server": "14.1.1",
42
43
  "style-dictionary": "5.2.0",
43
44
  "vitest": "4.0.18"
44
45
  },
45
46
  "scripts": {
46
47
  "build": "style-dictionary build --config sd.config.js",
47
48
  "tokens:catalog": "node scripts/export-catalog.js",
48
- "test": "vitest run"
49
+ "test": "vitest run",
50
+ "visualizer": "http-server . -p 3000 -o /scripts/visualizer/visualizer.html"
49
51
  }
50
52
  }