@dezkareid/design-tokens 1.3.1 → 1.4.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 (10) hide show
  1. package/AGENTS.md +28 -38
  2. package/dist/catalogs/all-tokens-css.md +31 -2
  3. package/dist/catalogs/all-tokens-js.md +30 -2
  4. package/dist/catalogs/all-tokens-scss.md +30 -2
  5. package/dist/css/variables.css +21 -2
  6. package/dist/js/tokens.d.ts +19 -1
  7. package/dist/js/tokens.js +21 -3
  8. package/dist/js/tokens.mjs +21 -3
  9. package/dist/scss/_variables.scss +21 -3
  10. package/package.json +6 -1
package/AGENTS.md CHANGED
@@ -10,37 +10,6 @@ It uses **Style Dictionary** to transform JSON token definitions into platform-s
10
10
  - **Build**: `pnpm build` (runs `style-dictionary build --config sd.config.js`)
11
11
  - **Release**: `pnpm release` (semantic-release only in CI/CD pipeline)
12
12
 
13
- ## Making Changes (OpenSpec Workflow)
14
- This project uses the **OpenSpec (opsx)** workflow for all changes. Do not modify code directly without a tracking change artifact unless it's a trivial fix.
15
-
16
- ### Workflow Cycle
17
- 1. **Start**: Create a new change container.
18
- - Command: `/opsx:new <change-name>` (or `/opsx:ff` to fast-forward)
19
- - Creates: `openspec/changes/<change-name>/`
20
-
21
- 2. **Plan**: Create artifacts in order.
22
- - **Proposal**: Why and what (`proposal.md`)
23
- - **Specs**: Detailed requirements (`specs/<capability>/spec.md`)
24
- - **Design**: Technical approach (`design.md`)
25
- - **Tasks**: Implementation checklist (`tasks.md`)
26
- - Command: `/opsx:continue` (steps through creation)
27
-
28
- 3. **Implement**: Apply the changes to the codebase.
29
- - Command: `/opsx:apply`
30
- - Follows the checklist in `tasks.md`.
31
-
32
- 4. **Finish**: Archive the change.
33
- - Command: `/opsx:archive`
34
- - Moves artifacts to `openspec/changes/archive/`.
35
-
36
- ### Directory Structure
37
- - `src/tokens/`: Source JSON token definitions (The Source of Truth).
38
- - `color/`: Global and semantic color tokens.
39
- - `spacing.json`: Spacing scale.
40
- - `typography.json`: Fonts, weights, sizes.
41
- - `dist/`: Generated build artifacts (CSS, SCSS, JS). **Do not edit manually.**
42
- - `openspec/`: Change management artifacts.
43
-
44
13
  ## Token Architecture
45
14
  - **Global Tokens**: Raw values (e.g., `blue-500: #3b82f6`). Defined in `src/tokens/color/global.json`.
46
15
  - **Semantic Tokens**: Aliases mapped to globals (e.g., `color-primary: {color.base.blue.500}`). Defined in `src/tokens/color/semantic.json`.
@@ -51,38 +20,52 @@ This project uses the **OpenSpec (opsx)** workflow for all changes. Do not modif
51
20
  - **Formats & Outputs**:
52
21
  - **CSS**: `dist/css/variables.css` (`css/variables-light-dark`) - CSS Custom Properties with `light-dark()` support.
53
22
  - *Patterns*:
54
- - `--color-base-{blue,green,red,gray}-{100,500,900}`
23
+ - `--color-base-{blue,green,red,gray}-{100,400,500,600,900}`
55
24
  - `--color-base-{white,black}`
56
25
  - `--spacing-{0,4,8,12,16,24,32,48,64}`
57
26
  - `--font-family-{base,mono}`
58
27
  - `--font-size-{100-900}`
59
28
  - `--font-weight-{light,regular,medium,bold}`
60
29
  - `--font-line-height-{none,tight,normal,relaxed}`
30
+ - `--font-letter-spacing-{tight,normal,wide}`
61
31
  - `--breakpoint-{small,medium,large,extra-large}-{min,max}`
62
- - `--{light,dark}-color-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
63
- - `--color-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
32
+ - `--border-radius-{none,small,medium,large,pill}`
33
+ - `--shadow-{none,subtle,card,card-hover}`
34
+ - `--{light,dark}-color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
35
+ - `--color-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
64
36
  - *Example*:
65
37
  ```css
66
38
  :root {
67
39
  --color-base-blue-500: #3b82f6;
40
+ --color-base-gray-400: #9ca3af;
41
+ --color-text-secondary: light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary));
42
+ --font-letter-spacing-tight: -0.02em;
43
+ --border-radius-pill: 9999px;
44
+ --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
68
45
  --spacing-16: 1rem;
69
46
  --breakpoint-medium-min: 37.5rem;
70
47
  }
71
48
  ```
72
49
  - **SCSS**: `dist/scss/_variables.scss` (`scss/simple`) - Simple SCSS variables.
73
50
  - *Patterns*:
74
- - `$color-base-{blue,green,red,gray}-{100,500,900}`
51
+ - `$color-base-{blue,green,red,gray}-{100,400,500,600,900}`
75
52
  - `$color-base-{white,black}`
76
- - `$color-semantic-{light,dark}-{primary,success,background-primary,background-secondary,text-primary,text-inverse}`
53
+ - `$color-semantic-{light,dark}-{primary,success,danger,background-primary,background-secondary,text-primary,text-secondary,text-inverse}`
77
54
  - `$spacing-{0,4,8,12,16,24,32,48,64}`
78
55
  - `$font-family-{base,mono}`
79
56
  - `$font-size-{100-900}`
80
57
  - `$font-weight-{light,regular,medium,bold}`
81
58
  - `$font-line-height-{none,tight,normal,relaxed}`
59
+ - `$font-letter-spacing-{tight,normal,wide}`
82
60
  - `$breakpoint-{small,medium,large,extra-large}-{min,max}`
61
+ - `$border-radius-{none,small,medium,large,pill}`
62
+ - `$shadow-{none,subtle,card,card-hover}`
83
63
  - *Example*:
84
64
  ```scss
85
65
  $color-base-blue-500: #3b82f6;
66
+ $font-letter-spacing-tight: -0.02em;
67
+ $border-radius-pill: 9999px;
68
+ $shadow-card: 0 2px 8px rgba(0,0,0,0.08);
86
69
  $spacing-16: 1rem;
87
70
  $breakpoint-medium-min: 37.5rem;
88
71
  ```
@@ -91,18 +74,25 @@ This project uses the **OpenSpec (opsx)** workflow for all changes. Do not modif
91
74
  - `dist/js/tokens.mjs` (`js/custom-module`) - ESM.
92
75
  - `dist/js/tokens.d.ts` (`typescript/custom-declarations`) - TypeScript declarations.
93
76
  - *Patterns*:
94
- - `ColorBase{Blue,Green,Red,Gray}{100,500,900}`
77
+ - `ColorBase{Blue,Green,Red,Gray}{100,400,500,600,900}`
95
78
  - `ColorBase{White,Black}`
96
- - `{Light,Dark}Color{Primary,Success,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextInverse}`
79
+ - `{Light,Dark}Color{Primary,Success,Danger,BackgroundPrimary,BackgroundSecondary,TextPrimary,TextSecondary,TextInverse}`
97
80
  - `Spacing{0,4,8,12,16,24,32,48,64}`
98
81
  - `FontFamily{Base,Mono}`
99
82
  - `FontSize{100-900}`
100
83
  - `FontWeight{Light,Regular,Medium,Bold}`
101
84
  - `FontLineHeight{None,Tight,Normal,Relaxed}`
85
+ - `FontLetterSpacing{Tight,Normal,Wide}`
102
86
  - `Breakpoint{Small,Medium,Large,ExtraLarge}{Min,Max}`
87
+ - `BorderRadius{None,Small,Medium,Large,Pill}`
88
+ - `Shadow{None,Subtle,Card,CardHover}`
103
89
  - *Example*:
104
90
  ```javascript
105
91
  export const ColorBaseBlue500 = "#3b82f6";
92
+ export const ColorBaseGray400 = "#9ca3af";
93
+ export const FontLetterSpacingTight = "-0.02em";
94
+ export const BorderRadiusPill = "9999px";
95
+ export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
106
96
  export const Spacing16 = "1rem";
107
97
  export const BreakpointMediumMin = "37.5rem";
108
98
  ```
package/dist/catalogs/all-tokens-css.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  This catalog contains design tokens optimized for CSS usage.
4
4
 
5
+ ## Border-radius
6
+
7
+ | CSS Variable | Value |
8
+ | :--- | :--- |
9
+ | `--border-radius-none` | `0` |
10
+ | `--border-radius-small` | `0.25rem` |
11
+ | `--border-radius-medium` | `0.5rem` |
12
+ | `--border-radius-large` | `1rem` |
13
+ | `--border-radius-pill` | `9999px` |
14
+
5
15
  ## Breakpoint
6
16
 
7
17
  | CSS Variable | Value |
@@ -21,6 +31,7 @@ This catalog contains design tokens optimized for CSS usage.
21
31
  | :--- | :--- |
22
32
  | `--color-base-blue-100` | `#dbeafe` |
23
33
  | `--color-base-blue-500` | `#3b82f6` |
34
+ | `--color-base-blue-600` | `#2563eb` |
24
35
  | `--color-base-blue-900` | `#1e3a8a` |
25
36
  | `--color-base-green-100` | `#dcfce7` |
26
37
  | `--color-base-green-500` | `#22c55e` |
@@ -29,7 +40,10 @@ This catalog contains design tokens optimized for CSS usage.
29
40
  | `--color-base-red-500` | `#ef4444` |
30
41
  | `--color-base-red-900` | `#7f1d1d` |
31
42
  | `--color-base-gray-100` | `#f3f4f6` |
43
+ | `--color-base-gray-400` | `#9ca3af` |
32
44
  | `--color-base-gray-500` | `#6b7280` |
45
+ | `--color-base-gray-600` | `#4b5563` |
46
+ | `--color-base-gray-800` | `#1f2937` |
33
47
  | `--color-base-gray-900` | `#111827` |
34
48
  | `--color-base-white` | `#ffffff` |
35
49
  | `--color-base-black` | `#000000` |
@@ -57,6 +71,18 @@ This catalog contains design tokens optimized for CSS usage.
57
71
  | `--font-line-height-tight` | `1.25` |
58
72
  | `--font-line-height-normal` | `1.5` |
59
73
  | `--font-line-height-relaxed` | `1.75` |
74
+ | `--font-letter-spacing-tight` | `-0.02em` |
75
+ | `--font-letter-spacing-normal` | `0` |
76
+ | `--font-letter-spacing-wide` | `0.08em` |
77
+
78
+ ## Shadow
79
+
80
+ | CSS Variable | Value |
81
+ | :--- | :--- |
82
+ | `--shadow-none` | `none` |
83
+ | `--shadow-subtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
+ | `--shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` |
85
+ | `--shadow-card-hover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
60
86
 
61
87
  ## Spacing
62
88
 
@@ -83,12 +109,12 @@ The following semantic tokens are themed and support light/dark modes.
83
109
  | `--dark-color-background-primary` | `#000000` |
84
110
  | `--color-background-secondary` | `light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary))` |
85
111
  | `--light-color-background-secondary` | `#f3f4f6` |
86
- | `--dark-color-background-secondary` | `#6b7280` |
112
+ | `--dark-color-background-secondary` | `#1f2937` |
87
113
  | `--color-danger` | `light-dark(var(--light-color-danger), var(--dark-color-danger))` |
88
114
  | `--light-color-danger` | `#ef4444` |
89
115
  | `--dark-color-danger` | `#7f1d1d` |
90
116
  | `--color-primary` | `light-dark(var(--light-color-primary), var(--dark-color-primary))` |
91
- | `--light-color-primary` | `#3b82f6` |
117
+ | `--light-color-primary` | `#2563eb` |
92
118
  | `--dark-color-primary` | `#dbeafe` |
93
119
  | `--color-success` | `light-dark(var(--light-color-success), var(--dark-color-success))` |
94
120
  | `--light-color-success` | `#22c55e` |
@@ -99,4 +125,7 @@ The following semantic tokens are themed and support light/dark modes.
99
125
  | `--color-text-primary` | `light-dark(var(--light-color-text-primary), var(--dark-color-text-primary))` |
100
126
  | `--light-color-text-primary` | `#111827` |
101
127
  | `--dark-color-text-primary` | `#ffffff` |
128
+ | `--color-text-secondary` | `light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary))` |
129
+ | `--light-color-text-secondary` | `#4b5563` |
130
+ | `--dark-color-text-secondary` | `#9ca3af` |
102
131
 
package/dist/catalogs/all-tokens-js.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  This catalog contains design tokens optimized for JS usage.
4
4
 
5
+ ## Border-radius
6
+
7
+ | JS Variable | Value |
8
+ | :--- | :--- |
9
+ | `BorderRadiusNone` | `0` |
10
+ | `BorderRadiusSmall` | `0.25rem` |
11
+ | `BorderRadiusMedium` | `0.5rem` |
12
+ | `BorderRadiusLarge` | `1rem` |
13
+ | `BorderRadiusPill` | `9999px` |
14
+
5
15
  ## Breakpoint
6
16
 
7
17
  | JS Variable | Value |
@@ -21,6 +31,7 @@ This catalog contains design tokens optimized for JS usage.
21
31
  | :--- | :--- |
22
32
  | `ColorBaseBlue100` | `#dbeafe` |
23
33
  | `ColorBaseBlue500` | `#3b82f6` |
34
+ | `ColorBaseBlue600` | `#2563eb` |
24
35
  | `ColorBaseBlue900` | `#1e3a8a` |
25
36
  | `ColorBaseGreen100` | `#dcfce7` |
26
37
  | `ColorBaseGreen500` | `#22c55e` |
@@ -29,7 +40,10 @@ This catalog contains design tokens optimized for JS usage.
29
40
  | `ColorBaseRed500` | `#ef4444` |
30
41
  | `ColorBaseRed900` | `#7f1d1d` |
31
42
  | `ColorBaseGray100` | `#f3f4f6` |
43
+ | `ColorBaseGray400` | `#9ca3af` |
32
44
  | `ColorBaseGray500` | `#6b7280` |
45
+ | `ColorBaseGray600` | `#4b5563` |
46
+ | `ColorBaseGray800` | `#1f2937` |
33
47
  | `ColorBaseGray900` | `#111827` |
34
48
  | `ColorBaseWhite` | `#ffffff` |
35
49
  | `ColorBaseBlack` | `#000000` |
@@ -57,6 +71,18 @@ This catalog contains design tokens optimized for JS usage.
57
71
  | `FontLineHeightTight` | `1.25` |
58
72
  | `FontLineHeightNormal` | `1.5` |
59
73
  | `FontLineHeightRelaxed` | `1.75` |
74
+ | `FontLetterSpacingTight` | `-0.02em` |
75
+ | `FontLetterSpacingNormal` | `0` |
76
+ | `FontLetterSpacingWide` | `0.08em` |
77
+
78
+ ## Shadow
79
+
80
+ | JS Variable | Value |
81
+ | :--- | :--- |
82
+ | `ShadowNone` | `none` |
83
+ | `ShadowSubtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
+ | `ShadowCard` | `0 2px 8px rgba(0,0,0,0.08)` |
85
+ | `ShadowCardHover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
60
86
 
61
87
  ## Spacing
62
88
 
@@ -81,10 +107,10 @@ The following semantic tokens are themed and support light/dark modes.
81
107
  | `LightColorBackgroundPrimary` | `#ffffff` |
82
108
  | `DarkColorBackgroundPrimary` | `#000000` |
83
109
  | `LightColorBackgroundSecondary` | `#f3f4f6` |
84
- | `DarkColorBackgroundSecondary` | `#6b7280` |
110
+ | `DarkColorBackgroundSecondary` | `#1f2937` |
85
111
  | `LightColorDanger` | `#ef4444` |
86
112
  | `DarkColorDanger` | `#7f1d1d` |
87
- | `LightColorPrimary` | `#3b82f6` |
113
+ | `LightColorPrimary` | `#2563eb` |
88
114
  | `DarkColorPrimary` | `#dbeafe` |
89
115
  | `LightColorSuccess` | `#22c55e` |
90
116
  | `DarkColorSuccess` | `#14532d` |
@@ -92,4 +118,6 @@ The following semantic tokens are themed and support light/dark modes.
92
118
  | `DarkColorTextInverse` | `#111827` |
93
119
  | `LightColorTextPrimary` | `#111827` |
94
120
  | `DarkColorTextPrimary` | `#ffffff` |
121
+ | `LightColorTextSecondary` | `#4b5563` |
122
+ | `DarkColorTextSecondary` | `#9ca3af` |
95
123
 
package/dist/catalogs/all-tokens-scss.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  This catalog contains design tokens optimized for SCSS usage.
4
4
 
5
+ ## Border-radius
6
+
7
+ | SCSS Variable | Value |
8
+ | :--- | :--- |
9
+ | `$border-radius-none` | `0` |
10
+ | `$border-radius-small` | `0.25rem` |
11
+ | `$border-radius-medium` | `0.5rem` |
12
+ | `$border-radius-large` | `1rem` |
13
+ | `$border-radius-pill` | `9999px` |
14
+
5
15
  ## Breakpoint
6
16
 
7
17
  | SCSS Variable | Value |
@@ -21,6 +31,7 @@ This catalog contains design tokens optimized for SCSS usage.
21
31
  | :--- | :--- |
22
32
  | `$color-base-blue-100` | `#dbeafe` |
23
33
  | `$color-base-blue-500` | `#3b82f6` |
34
+ | `$color-base-blue-600` | `#2563eb` |
24
35
  | `$color-base-blue-900` | `#1e3a8a` |
25
36
  | `$color-base-green-100` | `#dcfce7` |
26
37
  | `$color-base-green-500` | `#22c55e` |
@@ -29,7 +40,10 @@ This catalog contains design tokens optimized for SCSS usage.
29
40
  | `$color-base-red-500` | `#ef4444` |
30
41
  | `$color-base-red-900` | `#7f1d1d` |
31
42
  | `$color-base-gray-100` | `#f3f4f6` |
43
+ | `$color-base-gray-400` | `#9ca3af` |
32
44
  | `$color-base-gray-500` | `#6b7280` |
45
+ | `$color-base-gray-600` | `#4b5563` |
46
+ | `$color-base-gray-800` | `#1f2937` |
33
47
  | `$color-base-gray-900` | `#111827` |
34
48
  | `$color-base-white` | `#ffffff` |
35
49
  | `$color-base-black` | `#000000` |
@@ -57,6 +71,18 @@ This catalog contains design tokens optimized for SCSS usage.
57
71
  | `$font-line-height-tight` | `1.25` |
58
72
  | `$font-line-height-normal` | `1.5` |
59
73
  | `$font-line-height-relaxed` | `1.75` |
74
+ | `$font-letter-spacing-tight` | `-0.02em` |
75
+ | `$font-letter-spacing-normal` | `0` |
76
+ | `$font-letter-spacing-wide` | `0.08em` |
77
+
78
+ ## Shadow
79
+
80
+ | SCSS Variable | Value |
81
+ | :--- | :--- |
82
+ | `$shadow-none` | `none` |
83
+ | `$shadow-subtle` | `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)` |
84
+ | `$shadow-card` | `0 2px 8px rgba(0,0,0,0.08)` |
85
+ | `$shadow-card-hover` | `0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)` |
60
86
 
61
87
  ## Spacing
62
88
 
@@ -81,10 +107,10 @@ The following semantic tokens are themed and support light/dark modes.
81
107
  | `$color-semantic-light-background-primary` | `#ffffff` |
82
108
  | `$color-semantic-dark-background-primary` | `#000000` |
83
109
  | `$color-semantic-light-background-secondary` | `#f3f4f6` |
84
- | `$color-semantic-dark-background-secondary` | `#6b7280` |
110
+ | `$color-semantic-dark-background-secondary` | `#1f2937` |
85
111
  | `$color-semantic-light-danger` | `#ef4444` |
86
112
  | `$color-semantic-dark-danger` | `#7f1d1d` |
87
- | `$color-semantic-light-primary` | `#3b82f6` |
113
+ | `$color-semantic-light-primary` | `#2563eb` |
88
114
  | `$color-semantic-dark-primary` | `#dbeafe` |
89
115
  | `$color-semantic-light-success` | `#22c55e` |
90
116
  | `$color-semantic-dark-success` | `#14532d` |
@@ -92,4 +118,6 @@ The following semantic tokens are themed and support light/dark modes.
92
118
  | `$color-semantic-dark-text-inverse` | `#111827` |
93
119
  | `$color-semantic-light-text-primary` | `#111827` |
94
120
  | `$color-semantic-dark-text-primary` | `#ffffff` |
121
+ | `$color-semantic-light-text-secondary` | `#4b5563` |
122
+ | `$color-semantic-dark-text-secondary` | `#9ca3af` |
95
123
 
package/dist/css/variables.css CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  :root {
6
6
  color-scheme: light dark;
7
+ --border-radius-none: 0;
8
+ --border-radius-small: 0.25rem;
9
+ --border-radius-medium: 0.5rem;
10
+ --border-radius-large: 1rem;
11
+ --border-radius-pill: 9999px;
7
12
  --breakpoint-small-min: 0;
8
13
  --breakpoint-small-max: 37.49rem;
9
14
  --breakpoint-medium-min: 37.5rem;
@@ -14,6 +19,7 @@
14
19
  --breakpoint-extra-large-max: 9999rem;
15
20
  --color-base-blue-100: #dbeafe;
16
21
  --color-base-blue-500: #3b82f6;
22
+ --color-base-blue-600: #2563eb;
17
23
  --color-base-blue-900: #1e3a8a;
18
24
  --color-base-green-100: #dcfce7;
19
25
  --color-base-green-500: #22c55e;
@@ -22,10 +28,17 @@
22
28
  --color-base-red-500: #ef4444;
23
29
  --color-base-red-900: #7f1d1d;
24
30
  --color-base-gray-100: #f3f4f6;
31
+ --color-base-gray-400: #9ca3af;
25
32
  --color-base-gray-500: #6b7280;
33
+ --color-base-gray-600: #4b5563;
34
+ --color-base-gray-800: #1f2937;
26
35
  --color-base-gray-900: #111827;
27
36
  --color-base-white: #ffffff;
28
37
  --color-base-black: #000000;
38
+ --shadow-none: none;
39
+ --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
40
+ --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
41
+ --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1);
29
42
  --spacing-0: 0;
30
43
  --spacing-4: 0.25rem;
31
44
  --spacing-8: 0.5rem;
@@ -54,7 +67,10 @@
54
67
  --font-line-height-tight: 1.25;
55
68
  --font-line-height-normal: 1.5;
56
69
  --font-line-height-relaxed: 1.75;
57
- --light-color-primary: var(--color-base-blue-500);
70
+ --font-letter-spacing-tight: -0.02em;
71
+ --font-letter-spacing-normal: 0;
72
+ --font-letter-spacing-wide: 0.08em;
73
+ --light-color-primary: var(--color-base-blue-600);
58
74
  --dark-color-primary: var(--color-base-blue-100);
59
75
  --color-primary: light-dark(var(--light-color-primary), var(--dark-color-primary));
60
76
  --light-color-success: var(--color-base-green-500);
@@ -67,11 +83,14 @@
67
83
  --dark-color-background-primary: var(--color-base-black);
68
84
  --color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
69
85
  --light-color-background-secondary: var(--color-base-gray-100);
70
- --dark-color-background-secondary: var(--color-base-gray-500);
86
+ --dark-color-background-secondary: var(--color-base-gray-800);
71
87
  --color-background-secondary: light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary));
72
88
  --light-color-text-primary: var(--color-base-gray-900);
73
89
  --dark-color-text-primary: var(--color-base-white);
74
90
  --color-text-primary: light-dark(var(--light-color-text-primary), var(--dark-color-text-primary));
91
+ --light-color-text-secondary: var(--color-base-gray-600);
92
+ --dark-color-text-secondary: var(--color-base-gray-400);
93
+ --color-text-secondary: light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary));
75
94
  --light-color-text-inverse: var(--color-base-white);
76
95
  --dark-color-text-inverse: var(--color-base-gray-900);
77
96
  --color-text-inverse: light-dark(var(--light-color-text-inverse), var(--dark-color-text-inverse));
package/dist/js/tokens.d.ts CHANGED
@@ -2,6 +2,11 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
+ export const BorderRadiusNone: string;
6
+ export const BorderRadiusSmall: string;
7
+ export const BorderRadiusMedium: string;
8
+ export const BorderRadiusLarge: string;
9
+ export const BorderRadiusPill: string;
5
10
  export const BreakpointSmallMin: string;
6
11
  export const BreakpointSmallMax: string;
7
12
  export const BreakpointMediumMin: string;
@@ -12,6 +17,7 @@ export const BreakpointExtraLargeMin: string;
12
17
  export const BreakpointExtraLargeMax: string;
13
18
  export const ColorBaseBlue100: string;
14
19
  export const ColorBaseBlue500: string;
20
+ export const ColorBaseBlue600: string;
15
21
  export const ColorBaseBlue900: string;
16
22
  export const ColorBaseGreen100: string;
17
23
  export const ColorBaseGreen500: string;
@@ -20,7 +26,10 @@ export const ColorBaseRed100: string;
20
26
  export const ColorBaseRed500: string;
21
27
  export const ColorBaseRed900: string;
22
28
  export const ColorBaseGray100: string;
29
+ export const ColorBaseGray400: string;
23
30
  export const ColorBaseGray500: string;
31
+ export const ColorBaseGray600: string;
32
+ export const ColorBaseGray800: string;
24
33
  export const ColorBaseGray900: string;
25
34
  export const ColorBaseWhite: string;
26
35
  export const ColorBaseBlack: string;
@@ -30,6 +39,7 @@ export const LightColorDanger: string;
30
39
  export const LightColorBackgroundPrimary: string;
31
40
  export const LightColorBackgroundSecondary: string;
32
41
  export const LightColorTextPrimary: string;
42
+ export const LightColorTextSecondary: string;
33
43
  export const LightColorTextInverse: string;
34
44
  export const DarkColorPrimary: string;
35
45
  export const DarkColorSuccess: string;
@@ -37,7 +47,12 @@ export const DarkColorDanger: string;
37
47
  export const DarkColorBackgroundPrimary: string;
38
48
  export const DarkColorBackgroundSecondary: string;
39
49
  export const DarkColorTextPrimary: string;
50
+ export const DarkColorTextSecondary: string;
40
51
  export const DarkColorTextInverse: string;
52
+ export const ShadowNone: string;
53
+ export const ShadowSubtle: string;
54
+ export const ShadowCard: string;
55
+ export const ShadowCardHover: string;
41
56
  export const Spacing0: string;
42
57
  export const Spacing4: string;
43
58
  export const Spacing8: string;
@@ -65,4 +80,7 @@ export const FontWeightBold: string;
65
80
  export const FontLineHeightNone: string;
66
81
  export const FontLineHeightTight: string;
67
82
  export const FontLineHeightNormal: string;
68
- export const FontLineHeightRelaxed: string;
83
+ export const FontLineHeightRelaxed: string;
84
+ export const FontLetterSpacingTight: string;
85
+ export const FontLetterSpacingNormal: string;
86
+ export const FontLetterSpacingWide: string;
package/dist/js/tokens.js CHANGED
@@ -2,6 +2,11 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
+ export const BorderRadiusNone = "0";
6
+ export const BorderRadiusSmall = "0.25rem";
7
+ export const BorderRadiusMedium = "0.5rem";
8
+ export const BorderRadiusLarge = "1rem";
9
+ export const BorderRadiusPill = "9999px";
5
10
  export const BreakpointSmallMin = "0";
6
11
  export const BreakpointSmallMax = "37.49rem";
7
12
  export const BreakpointMediumMin = "37.5rem";
@@ -12,6 +17,7 @@ export const BreakpointExtraLargeMin = "90rem";
12
17
  export const BreakpointExtraLargeMax = "9999rem";
13
18
  export const ColorBaseBlue100 = "#dbeafe";
14
19
  export const ColorBaseBlue500 = "#3b82f6";
20
+ export const ColorBaseBlue600 = "#2563eb";
15
21
  export const ColorBaseBlue900 = "#1e3a8a";
16
22
  export const ColorBaseGreen100 = "#dcfce7";
17
23
  export const ColorBaseGreen500 = "#22c55e";
@@ -20,24 +26,33 @@ export const ColorBaseRed100 = "#fee2e2";
20
26
  export const ColorBaseRed500 = "#ef4444";
21
27
  export const ColorBaseRed900 = "#7f1d1d";
22
28
  export const ColorBaseGray100 = "#f3f4f6";
29
+ export const ColorBaseGray400 = "#9ca3af";
23
30
  export const ColorBaseGray500 = "#6b7280";
31
+ export const ColorBaseGray600 = "#4b5563";
32
+ export const ColorBaseGray800 = "#1f2937";
24
33
  export const ColorBaseGray900 = "#111827";
25
34
  export const ColorBaseWhite = "#ffffff";
26
35
  export const ColorBaseBlack = "#000000";
27
- export const LightColorPrimary = "#3b82f6";
36
+ export const LightColorPrimary = "#2563eb";
28
37
  export const LightColorSuccess = "#22c55e";
29
38
  export const LightColorDanger = "#ef4444";
30
39
  export const LightColorBackgroundPrimary = "#ffffff";
31
40
  export const LightColorBackgroundSecondary = "#f3f4f6";
32
41
  export const LightColorTextPrimary = "#111827";
42
+ export const LightColorTextSecondary = "#4b5563";
33
43
  export const LightColorTextInverse = "#ffffff";
34
44
  export const DarkColorPrimary = "#dbeafe";
35
45
  export const DarkColorSuccess = "#14532d";
36
46
  export const DarkColorDanger = "#7f1d1d";
37
47
  export const DarkColorBackgroundPrimary = "#000000";
38
- export const DarkColorBackgroundSecondary = "#6b7280";
48
+ export const DarkColorBackgroundSecondary = "#1f2937";
39
49
  export const DarkColorTextPrimary = "#ffffff";
50
+ export const DarkColorTextSecondary = "#9ca3af";
40
51
  export const DarkColorTextInverse = "#111827";
52
+ export const ShadowNone = "none";
53
+ export const ShadowSubtle = "0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)";
54
+ export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
55
+ export const ShadowCardHover = "0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)";
41
56
  export const Spacing0 = "0";
42
57
  export const Spacing4 = "0.25rem";
43
58
  export const Spacing8 = "0.5rem";
@@ -65,4 +80,7 @@ export const FontWeightBold = "700";
65
80
  export const FontLineHeightNone = "1";
66
81
  export const FontLineHeightTight = "1.25";
67
82
  export const FontLineHeightNormal = "1.5";
68
- export const FontLineHeightRelaxed = "1.75";
83
+ export const FontLineHeightRelaxed = "1.75";
84
+ export const FontLetterSpacingTight = "-0.02em";
85
+ export const FontLetterSpacingNormal = "0";
86
+ export const FontLetterSpacingWide = "0.08em";
package/dist/js/tokens.mjs CHANGED
@@ -2,6 +2,11 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
+ export const BorderRadiusNone = "0";
6
+ export const BorderRadiusSmall = "0.25rem";
7
+ export const BorderRadiusMedium = "0.5rem";
8
+ export const BorderRadiusLarge = "1rem";
9
+ export const BorderRadiusPill = "9999px";
5
10
  export const BreakpointSmallMin = "0";
6
11
  export const BreakpointSmallMax = "37.49rem";
7
12
  export const BreakpointMediumMin = "37.5rem";
@@ -12,6 +17,7 @@ export const BreakpointExtraLargeMin = "90rem";
12
17
  export const BreakpointExtraLargeMax = "9999rem";
13
18
  export const ColorBaseBlue100 = "#dbeafe";
14
19
  export const ColorBaseBlue500 = "#3b82f6";
20
+ export const ColorBaseBlue600 = "#2563eb";
15
21
  export const ColorBaseBlue900 = "#1e3a8a";
16
22
  export const ColorBaseGreen100 = "#dcfce7";
17
23
  export const ColorBaseGreen500 = "#22c55e";
@@ -20,24 +26,33 @@ export const ColorBaseRed100 = "#fee2e2";
20
26
  export const ColorBaseRed500 = "#ef4444";
21
27
  export const ColorBaseRed900 = "#7f1d1d";
22
28
  export const ColorBaseGray100 = "#f3f4f6";
29
+ export const ColorBaseGray400 = "#9ca3af";
23
30
  export const ColorBaseGray500 = "#6b7280";
31
+ export const ColorBaseGray600 = "#4b5563";
32
+ export const ColorBaseGray800 = "#1f2937";
24
33
  export const ColorBaseGray900 = "#111827";
25
34
  export const ColorBaseWhite = "#ffffff";
26
35
  export const ColorBaseBlack = "#000000";
27
- export const LightColorPrimary = "#3b82f6";
36
+ export const LightColorPrimary = "#2563eb";
28
37
  export const LightColorSuccess = "#22c55e";
29
38
  export const LightColorDanger = "#ef4444";
30
39
  export const LightColorBackgroundPrimary = "#ffffff";
31
40
  export const LightColorBackgroundSecondary = "#f3f4f6";
32
41
  export const LightColorTextPrimary = "#111827";
42
+ export const LightColorTextSecondary = "#4b5563";
33
43
  export const LightColorTextInverse = "#ffffff";
34
44
  export const DarkColorPrimary = "#dbeafe";
35
45
  export const DarkColorSuccess = "#14532d";
36
46
  export const DarkColorDanger = "#7f1d1d";
37
47
  export const DarkColorBackgroundPrimary = "#000000";
38
- export const DarkColorBackgroundSecondary = "#6b7280";
48
+ export const DarkColorBackgroundSecondary = "#1f2937";
39
49
  export const DarkColorTextPrimary = "#ffffff";
50
+ export const DarkColorTextSecondary = "#9ca3af";
40
51
  export const DarkColorTextInverse = "#111827";
52
+ export const ShadowNone = "none";
53
+ export const ShadowSubtle = "0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)";
54
+ export const ShadowCard = "0 2px 8px rgba(0,0,0,0.08)";
55
+ export const ShadowCardHover = "0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1)";
41
56
  export const Spacing0 = "0";
42
57
  export const Spacing4 = "0.25rem";
43
58
  export const Spacing8 = "0.5rem";
@@ -65,4 +80,7 @@ export const FontWeightBold = "700";
65
80
  export const FontLineHeightNone = "1";
66
81
  export const FontLineHeightTight = "1.25";
67
82
  export const FontLineHeightNormal = "1.5";
68
- export const FontLineHeightRelaxed = "1.75";
83
+ export const FontLineHeightRelaxed = "1.75";
84
+ export const FontLetterSpacingTight = "-0.02em";
85
+ export const FontLetterSpacingNormal = "0";
86
+ export const FontLetterSpacingWide = "0.08em";
package/dist/scss/_variables.scss CHANGED
@@ -1,3 +1,8 @@
1
+ $border-radius-none: 0;
2
+ $border-radius-small: 0.25rem;
3
+ $border-radius-medium: 0.5rem;
4
+ $border-radius-large: 1rem;
5
+ $border-radius-pill: 9999px;
1
6
  $breakpoint-small-min: 0;
2
7
  $breakpoint-small-max: 37.49rem;
3
8
  $breakpoint-medium-min: 37.5rem;
@@ -8,6 +13,7 @@ $breakpoint-extra-large-min: 90rem;
8
13
  $breakpoint-extra-large-max: 9999rem;
9
14
  $color-base-blue-100: #dbeafe;
10
15
  $color-base-blue-500: #3b82f6;
16
+ $color-base-blue-600: #2563eb;
11
17
  $color-base-blue-900: #1e3a8a;
12
18
  $color-base-green-100: #dcfce7;
13
19
  $color-base-green-500: #22c55e;
@@ -16,24 +22,33 @@ $color-base-red-100: #fee2e2;
16
22
  $color-base-red-500: #ef4444;
17
23
  $color-base-red-900: #7f1d1d;
18
24
  $color-base-gray-100: #f3f4f6;
25
+ $color-base-gray-400: #9ca3af;
19
26
  $color-base-gray-500: #6b7280;
27
+ $color-base-gray-600: #4b5563;
28
+ $color-base-gray-800: #1f2937;
20
29
  $color-base-gray-900: #111827;
21
30
  $color-base-white: #ffffff;
22
31
  $color-base-black: #000000;
23
- $color-semantic-light-primary: $color-base-blue-500;
32
+ $color-semantic-light-primary: $color-base-blue-600;
24
33
  $color-semantic-light-success: $color-base-green-500;
25
34
  $color-semantic-light-danger: $color-base-red-500;
26
35
  $color-semantic-light-background-primary: $color-base-white;
27
36
  $color-semantic-light-background-secondary: $color-base-gray-100;
28
37
  $color-semantic-light-text-primary: $color-base-gray-900;
38
+ $color-semantic-light-text-secondary: $color-base-gray-600;
29
39
  $color-semantic-light-text-inverse: $color-base-white;
30
40
  $color-semantic-dark-primary: $color-base-blue-100;
31
41
  $color-semantic-dark-success: $color-base-green-900;
32
42
  $color-semantic-dark-danger: $color-base-red-900;
33
43
  $color-semantic-dark-background-primary: $color-base-black;
34
- $color-semantic-dark-background-secondary: $color-base-gray-500;
44
+ $color-semantic-dark-background-secondary: $color-base-gray-800;
35
45
  $color-semantic-dark-text-primary: $color-base-white;
46
+ $color-semantic-dark-text-secondary: $color-base-gray-400;
36
47
  $color-semantic-dark-text-inverse: $color-base-gray-900;
48
+ $shadow-none: none;
49
+ $shadow-subtle: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
50
+ $shadow-card: 0 2px 8px rgba(0,0,0,0.08);
51
+ $shadow-card-hover: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1);
37
52
  $spacing-0: 0;
38
53
  $spacing-4: 0.25rem;
39
54
  $spacing-8: 0.5rem;
@@ -61,4 +76,7 @@ $font-weight-bold: 700;
61
76
  $font-line-height-none: 1;
62
77
  $font-line-height-tight: 1.25;
63
78
  $font-line-height-normal: 1.5;
64
- $font-line-height-relaxed: 1.75;
79
+ $font-line-height-relaxed: 1.75;
80
+ $font-letter-spacing-tight: -0.02em;
81
+ $font-letter-spacing-normal: 0;
82
+ $font-letter-spacing-wide: 0.08em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dezkareid/design-tokens",
3
- "version": "1.3.1",
3
+ "version": "1.4.1",
4
4
  "description": "Design tokens for dezkareid design system",
5
5
  "main": "dist/js/tokens.js",
6
6
  "module": "dist/js/tokens.mjs",
@@ -38,7 +38,9 @@
38
38
  },
39
39
  "homepage": "https://github.com/dezkareid/dezkareid/tree/main/projects/dezkareid/design-system/design-tokens#readme",
40
40
  "devDependencies": {
41
+ "@eslint/js": "9.39.2",
41
42
  "commander": "12.0.0",
43
+ "eslint": "9.39.2",
42
44
  "http-server": "14.1.1",
43
45
  "style-dictionary": "5.2.0",
44
46
  "vitest": "4.0.18"
@@ -46,7 +48,10 @@
46
48
  "scripts": {
47
49
  "build": "style-dictionary build --config sd.config.js",
48
50
  "tokens:catalog": "node scripts/export-catalog.js",
51
+ "lint": "eslint .",
52
+ "lint:fix": "eslint . --fix",
49
53
  "test": "vitest run",
54
+ "contrast-check": "node scripts/contrast-check.js",
50
55
  "visualizer": "http-server . -p 3000 -o /scripts/visualizer/visualizer.html"
51
56
  }
52
57
  }