@dezkareid/design-tokens 1.4.0 → 1.5.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 (9) hide show
  1. package/dist/catalogs/all-tokens-css.md +9 -2
  2. package/dist/catalogs/all-tokens-js.md +8 -2
  3. package/dist/catalogs/all-tokens-scss.md +8 -2
  4. package/dist/css/variables.css +9 -2
  5. package/dist/js/tokens.d.ts +6 -0
  6. package/dist/js/tokens.js +8 -2
  7. package/dist/js/tokens.mjs +8 -2
  8. package/dist/scss/_variables.scss +8 -2
  9. package/package.json +2 -1
package/dist/catalogs/all-tokens-css.md CHANGED
@@ -31,6 +31,7 @@ This catalog contains design tokens optimized for CSS usage.
31
31
  | :--- | :--- |
32
32
  | `--color-base-blue-100` | `#dbeafe` |
33
33
  | `--color-base-blue-500` | `#3b82f6` |
34
+ | `--color-base-blue-600` | `#2563eb` |
34
35
  | `--color-base-blue-900` | `#1e3a8a` |
35
36
  | `--color-base-green-100` | `#dcfce7` |
36
37
  | `--color-base-green-500` | `#22c55e` |
@@ -38,10 +39,13 @@ This catalog contains design tokens optimized for CSS usage.
38
39
  | `--color-base-red-100` | `#fee2e2` |
39
40
  | `--color-base-red-500` | `#ef4444` |
40
41
  | `--color-base-red-900` | `#7f1d1d` |
42
+ | `--color-base-amber-600` | `#d97706` |
43
+ | `--color-base-amber-900` | `#78350f` |
41
44
  | `--color-base-gray-100` | `#f3f4f6` |
42
45
  | `--color-base-gray-400` | `#9ca3af` |
43
46
  | `--color-base-gray-500` | `#6b7280` |
44
47
  | `--color-base-gray-600` | `#4b5563` |
48
+ | `--color-base-gray-800` | `#1f2937` |
45
49
  | `--color-base-gray-900` | `#111827` |
46
50
  | `--color-base-white` | `#ffffff` |
47
51
  | `--color-base-black` | `#000000` |
@@ -107,12 +111,12 @@ The following semantic tokens are themed and support light/dark modes.
107
111
  | `--dark-color-background-primary` | `#000000` |
108
112
  | `--color-background-secondary` | `light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary))` |
109
113
  | `--light-color-background-secondary` | `#f3f4f6` |
110
- | `--dark-color-background-secondary` | `#6b7280` |
114
+ | `--dark-color-background-secondary` | `#1f2937` |
111
115
  | `--color-danger` | `light-dark(var(--light-color-danger), var(--dark-color-danger))` |
112
116
  | `--light-color-danger` | `#ef4444` |
113
117
  | `--dark-color-danger` | `#7f1d1d` |
114
118
  | `--color-primary` | `light-dark(var(--light-color-primary), var(--dark-color-primary))` |
115
- | `--light-color-primary` | `#3b82f6` |
119
+ | `--light-color-primary` | `#2563eb` |
116
120
  | `--dark-color-primary` | `#dbeafe` |
117
121
  | `--color-success` | `light-dark(var(--light-color-success), var(--dark-color-success))` |
118
122
  | `--light-color-success` | `#22c55e` |
@@ -126,4 +130,7 @@ The following semantic tokens are themed and support light/dark modes.
126
130
  | `--color-text-secondary` | `light-dark(var(--light-color-text-secondary), var(--dark-color-text-secondary))` |
127
131
  | `--light-color-text-secondary` | `#4b5563` |
128
132
  | `--dark-color-text-secondary` | `#9ca3af` |
133
+ | `--color-warning` | `light-dark(var(--light-color-warning), var(--dark-color-warning))` |
134
+ | `--light-color-warning` | `#d97706` |
135
+ | `--dark-color-warning` | `#78350f` |
129
136
 
package/dist/catalogs/all-tokens-js.md CHANGED
@@ -31,6 +31,7 @@ This catalog contains design tokens optimized for JS usage.
31
31
  | :--- | :--- |
32
32
  | `ColorBaseBlue100` | `#dbeafe` |
33
33
  | `ColorBaseBlue500` | `#3b82f6` |
34
+ | `ColorBaseBlue600` | `#2563eb` |
34
35
  | `ColorBaseBlue900` | `#1e3a8a` |
35
36
  | `ColorBaseGreen100` | `#dcfce7` |
36
37
  | `ColorBaseGreen500` | `#22c55e` |
@@ -38,10 +39,13 @@ This catalog contains design tokens optimized for JS usage.
38
39
  | `ColorBaseRed100` | `#fee2e2` |
39
40
  | `ColorBaseRed500` | `#ef4444` |
40
41
  | `ColorBaseRed900` | `#7f1d1d` |
42
+ | `ColorBaseAmber600` | `#d97706` |
43
+ | `ColorBaseAmber900` | `#78350f` |
41
44
  | `ColorBaseGray100` | `#f3f4f6` |
42
45
  | `ColorBaseGray400` | `#9ca3af` |
43
46
  | `ColorBaseGray500` | `#6b7280` |
44
47
  | `ColorBaseGray600` | `#4b5563` |
48
+ | `ColorBaseGray800` | `#1f2937` |
45
49
  | `ColorBaseGray900` | `#111827` |
46
50
  | `ColorBaseWhite` | `#ffffff` |
47
51
  | `ColorBaseBlack` | `#000000` |
@@ -105,10 +109,10 @@ The following semantic tokens are themed and support light/dark modes.
105
109
  | `LightColorBackgroundPrimary` | `#ffffff` |
106
110
  | `DarkColorBackgroundPrimary` | `#000000` |
107
111
  | `LightColorBackgroundSecondary` | `#f3f4f6` |
108
- | `DarkColorBackgroundSecondary` | `#6b7280` |
112
+ | `DarkColorBackgroundSecondary` | `#1f2937` |
109
113
  | `LightColorDanger` | `#ef4444` |
110
114
  | `DarkColorDanger` | `#7f1d1d` |
111
- | `LightColorPrimary` | `#3b82f6` |
115
+ | `LightColorPrimary` | `#2563eb` |
112
116
  | `DarkColorPrimary` | `#dbeafe` |
113
117
  | `LightColorSuccess` | `#22c55e` |
114
118
  | `DarkColorSuccess` | `#14532d` |
@@ -118,4 +122,6 @@ The following semantic tokens are themed and support light/dark modes.
118
122
  | `DarkColorTextPrimary` | `#ffffff` |
119
123
  | `LightColorTextSecondary` | `#4b5563` |
120
124
  | `DarkColorTextSecondary` | `#9ca3af` |
125
+ | `LightColorWarning` | `#d97706` |
126
+ | `DarkColorWarning` | `#78350f` |
121
127
 
package/dist/catalogs/all-tokens-scss.md CHANGED
@@ -31,6 +31,7 @@ This catalog contains design tokens optimized for SCSS usage.
31
31
  | :--- | :--- |
32
32
  | `$color-base-blue-100` | `#dbeafe` |
33
33
  | `$color-base-blue-500` | `#3b82f6` |
34
+ | `$color-base-blue-600` | `#2563eb` |
34
35
  | `$color-base-blue-900` | `#1e3a8a` |
35
36
  | `$color-base-green-100` | `#dcfce7` |
36
37
  | `$color-base-green-500` | `#22c55e` |
@@ -38,10 +39,13 @@ This catalog contains design tokens optimized for SCSS usage.
38
39
  | `$color-base-red-100` | `#fee2e2` |
39
40
  | `$color-base-red-500` | `#ef4444` |
40
41
  | `$color-base-red-900` | `#7f1d1d` |
42
+ | `$color-base-amber-600` | `#d97706` |
43
+ | `$color-base-amber-900` | `#78350f` |
41
44
  | `$color-base-gray-100` | `#f3f4f6` |
42
45
  | `$color-base-gray-400` | `#9ca3af` |
43
46
  | `$color-base-gray-500` | `#6b7280` |
44
47
  | `$color-base-gray-600` | `#4b5563` |
48
+ | `$color-base-gray-800` | `#1f2937` |
45
49
  | `$color-base-gray-900` | `#111827` |
46
50
  | `$color-base-white` | `#ffffff` |
47
51
  | `$color-base-black` | `#000000` |
@@ -105,10 +109,10 @@ The following semantic tokens are themed and support light/dark modes.
105
109
  | `$color-semantic-light-background-primary` | `#ffffff` |
106
110
  | `$color-semantic-dark-background-primary` | `#000000` |
107
111
  | `$color-semantic-light-background-secondary` | `#f3f4f6` |
108
- | `$color-semantic-dark-background-secondary` | `#6b7280` |
112
+ | `$color-semantic-dark-background-secondary` | `#1f2937` |
109
113
  | `$color-semantic-light-danger` | `#ef4444` |
110
114
  | `$color-semantic-dark-danger` | `#7f1d1d` |
111
- | `$color-semantic-light-primary` | `#3b82f6` |
115
+ | `$color-semantic-light-primary` | `#2563eb` |
112
116
  | `$color-semantic-dark-primary` | `#dbeafe` |
113
117
  | `$color-semantic-light-success` | `#22c55e` |
114
118
  | `$color-semantic-dark-success` | `#14532d` |
@@ -118,4 +122,6 @@ The following semantic tokens are themed and support light/dark modes.
118
122
  | `$color-semantic-dark-text-primary` | `#ffffff` |
119
123
  | `$color-semantic-light-text-secondary` | `#4b5563` |
120
124
  | `$color-semantic-dark-text-secondary` | `#9ca3af` |
125
+ | `$color-semantic-light-warning` | `#d97706` |
126
+ | `$color-semantic-dark-warning` | `#78350f` |
121
127
 
package/dist/css/variables.css CHANGED
@@ -19,6 +19,7 @@
19
19
  --breakpoint-extra-large-max: 9999rem;
20
20
  --color-base-blue-100: #dbeafe;
21
21
  --color-base-blue-500: #3b82f6;
22
+ --color-base-blue-600: #2563eb;
22
23
  --color-base-blue-900: #1e3a8a;
23
24
  --color-base-green-100: #dcfce7;
24
25
  --color-base-green-500: #22c55e;
@@ -26,10 +27,13 @@
26
27
  --color-base-red-100: #fee2e2;
27
28
  --color-base-red-500: #ef4444;
28
29
  --color-base-red-900: #7f1d1d;
30
+ --color-base-amber-600: #d97706;
31
+ --color-base-amber-900: #78350f;
29
32
  --color-base-gray-100: #f3f4f6;
30
33
  --color-base-gray-400: #9ca3af;
31
34
  --color-base-gray-500: #6b7280;
32
35
  --color-base-gray-600: #4b5563;
36
+ --color-base-gray-800: #1f2937;
33
37
  --color-base-gray-900: #111827;
34
38
  --color-base-white: #ffffff;
35
39
  --color-base-black: #000000;
@@ -68,7 +72,7 @@
68
72
  --font-letter-spacing-tight: -0.02em;
69
73
  --font-letter-spacing-normal: 0;
70
74
  --font-letter-spacing-wide: 0.08em;
71
- --light-color-primary: var(--color-base-blue-500);
75
+ --light-color-primary: var(--color-base-blue-600);
72
76
  --dark-color-primary: var(--color-base-blue-100);
73
77
  --color-primary: light-dark(var(--light-color-primary), var(--dark-color-primary));
74
78
  --light-color-success: var(--color-base-green-500);
@@ -77,11 +81,14 @@
77
81
  --light-color-danger: var(--color-base-red-500);
78
82
  --dark-color-danger: var(--color-base-red-900);
79
83
  --color-danger: light-dark(var(--light-color-danger), var(--dark-color-danger));
84
+ --light-color-warning: var(--color-base-amber-600);
85
+ --dark-color-warning: var(--color-base-amber-900);
86
+ --color-warning: light-dark(var(--light-color-warning), var(--dark-color-warning));
80
87
  --light-color-background-primary: var(--color-base-white);
81
88
  --dark-color-background-primary: var(--color-base-black);
82
89
  --color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
83
90
  --light-color-background-secondary: var(--color-base-gray-100);
84
- --dark-color-background-secondary: var(--color-base-gray-500);
91
+ --dark-color-background-secondary: var(--color-base-gray-800);
85
92
  --color-background-secondary: light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary));
86
93
  --light-color-text-primary: var(--color-base-gray-900);
87
94
  --dark-color-text-primary: var(--color-base-white);
package/dist/js/tokens.d.ts CHANGED
@@ -17,6 +17,7 @@ export const BreakpointExtraLargeMin: string;
17
17
  export const BreakpointExtraLargeMax: string;
18
18
  export const ColorBaseBlue100: string;
19
19
  export const ColorBaseBlue500: string;
20
+ export const ColorBaseBlue600: string;
20
21
  export const ColorBaseBlue900: string;
21
22
  export const ColorBaseGreen100: string;
22
23
  export const ColorBaseGreen500: string;
@@ -24,16 +25,20 @@ export const ColorBaseGreen900: string;
24
25
  export const ColorBaseRed100: string;
25
26
  export const ColorBaseRed500: string;
26
27
  export const ColorBaseRed900: string;
28
+ export const ColorBaseAmber600: string;
29
+ export const ColorBaseAmber900: string;
27
30
  export const ColorBaseGray100: string;
28
31
  export const ColorBaseGray400: string;
29
32
  export const ColorBaseGray500: string;
30
33
  export const ColorBaseGray600: string;
34
+ export const ColorBaseGray800: string;
31
35
  export const ColorBaseGray900: string;
32
36
  export const ColorBaseWhite: string;
33
37
  export const ColorBaseBlack: string;
34
38
  export const LightColorPrimary: string;
35
39
  export const LightColorSuccess: string;
36
40
  export const LightColorDanger: string;
41
+ export const LightColorWarning: string;
37
42
  export const LightColorBackgroundPrimary: string;
38
43
  export const LightColorBackgroundSecondary: string;
39
44
  export const LightColorTextPrimary: string;
@@ -42,6 +47,7 @@ export const LightColorTextInverse: string;
42
47
  export const DarkColorPrimary: string;
43
48
  export const DarkColorSuccess: string;
44
49
  export const DarkColorDanger: string;
50
+ export const DarkColorWarning: string;
45
51
  export const DarkColorBackgroundPrimary: string;
46
52
  export const DarkColorBackgroundSecondary: string;
47
53
  export const DarkColorTextPrimary: string;
package/dist/js/tokens.js CHANGED
@@ -17,6 +17,7 @@ export const BreakpointExtraLargeMin = "90rem";
17
17
  export const BreakpointExtraLargeMax = "9999rem";
18
18
  export const ColorBaseBlue100 = "#dbeafe";
19
19
  export const ColorBaseBlue500 = "#3b82f6";
20
+ export const ColorBaseBlue600 = "#2563eb";
20
21
  export const ColorBaseBlue900 = "#1e3a8a";
21
22
  export const ColorBaseGreen100 = "#dcfce7";
22
23
  export const ColorBaseGreen500 = "#22c55e";
@@ -24,16 +25,20 @@ export const ColorBaseGreen900 = "#14532d";
24
25
  export const ColorBaseRed100 = "#fee2e2";
25
26
  export const ColorBaseRed500 = "#ef4444";
26
27
  export const ColorBaseRed900 = "#7f1d1d";
28
+ export const ColorBaseAmber600 = "#d97706";
29
+ export const ColorBaseAmber900 = "#78350f";
27
30
  export const ColorBaseGray100 = "#f3f4f6";
28
31
  export const ColorBaseGray400 = "#9ca3af";
29
32
  export const ColorBaseGray500 = "#6b7280";
30
33
  export const ColorBaseGray600 = "#4b5563";
34
+ export const ColorBaseGray800 = "#1f2937";
31
35
  export const ColorBaseGray900 = "#111827";
32
36
  export const ColorBaseWhite = "#ffffff";
33
37
  export const ColorBaseBlack = "#000000";
34
- export const LightColorPrimary = "#3b82f6";
38
+ export const LightColorPrimary = "#2563eb";
35
39
  export const LightColorSuccess = "#22c55e";
36
40
  export const LightColorDanger = "#ef4444";
41
+ export const LightColorWarning = "#d97706";
37
42
  export const LightColorBackgroundPrimary = "#ffffff";
38
43
  export const LightColorBackgroundSecondary = "#f3f4f6";
39
44
  export const LightColorTextPrimary = "#111827";
@@ -42,8 +47,9 @@ export const LightColorTextInverse = "#ffffff";
42
47
  export const DarkColorPrimary = "#dbeafe";
43
48
  export const DarkColorSuccess = "#14532d";
44
49
  export const DarkColorDanger = "#7f1d1d";
50
+ export const DarkColorWarning = "#78350f";
45
51
  export const DarkColorBackgroundPrimary = "#000000";
46
- export const DarkColorBackgroundSecondary = "#6b7280";
52
+ export const DarkColorBackgroundSecondary = "#1f2937";
47
53
  export const DarkColorTextPrimary = "#ffffff";
48
54
  export const DarkColorTextSecondary = "#9ca3af";
49
55
  export const DarkColorTextInverse = "#111827";
package/dist/js/tokens.mjs CHANGED
@@ -17,6 +17,7 @@ export const BreakpointExtraLargeMin = "90rem";
17
17
  export const BreakpointExtraLargeMax = "9999rem";
18
18
  export const ColorBaseBlue100 = "#dbeafe";
19
19
  export const ColorBaseBlue500 = "#3b82f6";
20
+ export const ColorBaseBlue600 = "#2563eb";
20
21
  export const ColorBaseBlue900 = "#1e3a8a";
21
22
  export const ColorBaseGreen100 = "#dcfce7";
22
23
  export const ColorBaseGreen500 = "#22c55e";
@@ -24,16 +25,20 @@ export const ColorBaseGreen900 = "#14532d";
24
25
  export const ColorBaseRed100 = "#fee2e2";
25
26
  export const ColorBaseRed500 = "#ef4444";
26
27
  export const ColorBaseRed900 = "#7f1d1d";
28
+ export const ColorBaseAmber600 = "#d97706";
29
+ export const ColorBaseAmber900 = "#78350f";
27
30
  export const ColorBaseGray100 = "#f3f4f6";
28
31
  export const ColorBaseGray400 = "#9ca3af";
29
32
  export const ColorBaseGray500 = "#6b7280";
30
33
  export const ColorBaseGray600 = "#4b5563";
34
+ export const ColorBaseGray800 = "#1f2937";
31
35
  export const ColorBaseGray900 = "#111827";
32
36
  export const ColorBaseWhite = "#ffffff";
33
37
  export const ColorBaseBlack = "#000000";
34
- export const LightColorPrimary = "#3b82f6";
38
+ export const LightColorPrimary = "#2563eb";
35
39
  export const LightColorSuccess = "#22c55e";
36
40
  export const LightColorDanger = "#ef4444";
41
+ export const LightColorWarning = "#d97706";
37
42
  export const LightColorBackgroundPrimary = "#ffffff";
38
43
  export const LightColorBackgroundSecondary = "#f3f4f6";
39
44
  export const LightColorTextPrimary = "#111827";
@@ -42,8 +47,9 @@ export const LightColorTextInverse = "#ffffff";
42
47
  export const DarkColorPrimary = "#dbeafe";
43
48
  export const DarkColorSuccess = "#14532d";
44
49
  export const DarkColorDanger = "#7f1d1d";
50
+ export const DarkColorWarning = "#78350f";
45
51
  export const DarkColorBackgroundPrimary = "#000000";
46
- export const DarkColorBackgroundSecondary = "#6b7280";
52
+ export const DarkColorBackgroundSecondary = "#1f2937";
47
53
  export const DarkColorTextPrimary = "#ffffff";
48
54
  export const DarkColorTextSecondary = "#9ca3af";
49
55
  export const DarkColorTextInverse = "#111827";
package/dist/scss/_variables.scss CHANGED
@@ -13,6 +13,7 @@ $breakpoint-extra-large-min: 90rem;
13
13
  $breakpoint-extra-large-max: 9999rem;
14
14
  $color-base-blue-100: #dbeafe;
15
15
  $color-base-blue-500: #3b82f6;
16
+ $color-base-blue-600: #2563eb;
16
17
  $color-base-blue-900: #1e3a8a;
17
18
  $color-base-green-100: #dcfce7;
18
19
  $color-base-green-500: #22c55e;
@@ -20,16 +21,20 @@ $color-base-green-900: #14532d;
20
21
  $color-base-red-100: #fee2e2;
21
22
  $color-base-red-500: #ef4444;
22
23
  $color-base-red-900: #7f1d1d;
24
+ $color-base-amber-600: #d97706;
25
+ $color-base-amber-900: #78350f;
23
26
  $color-base-gray-100: #f3f4f6;
24
27
  $color-base-gray-400: #9ca3af;
25
28
  $color-base-gray-500: #6b7280;
26
29
  $color-base-gray-600: #4b5563;
30
+ $color-base-gray-800: #1f2937;
27
31
  $color-base-gray-900: #111827;
28
32
  $color-base-white: #ffffff;
29
33
  $color-base-black: #000000;
30
- $color-semantic-light-primary: $color-base-blue-500;
34
+ $color-semantic-light-primary: $color-base-blue-600;
31
35
  $color-semantic-light-success: $color-base-green-500;
32
36
  $color-semantic-light-danger: $color-base-red-500;
37
+ $color-semantic-light-warning: $color-base-amber-600;
33
38
  $color-semantic-light-background-primary: $color-base-white;
34
39
  $color-semantic-light-background-secondary: $color-base-gray-100;
35
40
  $color-semantic-light-text-primary: $color-base-gray-900;
@@ -38,8 +43,9 @@ $color-semantic-light-text-inverse: $color-base-white;
38
43
  $color-semantic-dark-primary: $color-base-blue-100;
39
44
  $color-semantic-dark-success: $color-base-green-900;
40
45
  $color-semantic-dark-danger: $color-base-red-900;
46
+ $color-semantic-dark-warning: $color-base-amber-900;
41
47
  $color-semantic-dark-background-primary: $color-base-black;
42
- $color-semantic-dark-background-secondary: $color-base-gray-500;
48
+ $color-semantic-dark-background-secondary: $color-base-gray-800;
43
49
  $color-semantic-dark-text-primary: $color-base-white;
44
50
  $color-semantic-dark-text-secondary: $color-base-gray-400;
45
51
  $color-semantic-dark-text-inverse: $color-base-gray-900;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dezkareid/design-tokens",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "Design tokens for dezkareid design system",
5
5
  "main": "dist/js/tokens.js",
6
6
  "module": "dist/js/tokens.mjs",
@@ -51,6 +51,7 @@
51
51
  "lint": "eslint .",
52
52
  "lint:fix": "eslint . --fix",
53
53
  "test": "vitest run",
54
+ "contrast-check": "node scripts/contrast-check.js",
54
55
  "visualizer": "http-server . -p 3000 -o /scripts/visualizer/visualizer.html"
55
56
  }
56
57
  }