@dezkareid/design-tokens 1.4.0 → 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 (9) hide show
  1. package/dist/catalogs/all-tokens-css.md +4 -2
  2. package/dist/catalogs/all-tokens-js.md +4 -2
  3. package/dist/catalogs/all-tokens-scss.md +4 -2
  4. package/dist/css/variables.css +4 -2
  5. package/dist/js/tokens.d.ts +2 -0
  6. package/dist/js/tokens.js +4 -2
  7. package/dist/js/tokens.mjs +4 -2
  8. package/dist/scss/_variables.scss +4 -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` |
@@ -42,6 +43,7 @@ This catalog contains design tokens optimized for CSS usage.
42
43
  | `--color-base-gray-400` | `#9ca3af` |
43
44
  | `--color-base-gray-500` | `#6b7280` |
44
45
  | `--color-base-gray-600` | `#4b5563` |
46
+ | `--color-base-gray-800` | `#1f2937` |
45
47
  | `--color-base-gray-900` | `#111827` |
46
48
  | `--color-base-white` | `#ffffff` |
47
49
  | `--color-base-black` | `#000000` |
@@ -107,12 +109,12 @@ The following semantic tokens are themed and support light/dark modes.
107
109
  | `--dark-color-background-primary` | `#000000` |
108
110
  | `--color-background-secondary` | `light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary))` |
109
111
  | `--light-color-background-secondary` | `#f3f4f6` |
110
- | `--dark-color-background-secondary` | `#6b7280` |
112
+ | `--dark-color-background-secondary` | `#1f2937` |
111
113
  | `--color-danger` | `light-dark(var(--light-color-danger), var(--dark-color-danger))` |
112
114
  | `--light-color-danger` | `#ef4444` |
113
115
  | `--dark-color-danger` | `#7f1d1d` |
114
116
  | `--color-primary` | `light-dark(var(--light-color-primary), var(--dark-color-primary))` |
115
- | `--light-color-primary` | `#3b82f6` |
117
+ | `--light-color-primary` | `#2563eb` |
116
118
  | `--dark-color-primary` | `#dbeafe` |
117
119
  | `--color-success` | `light-dark(var(--light-color-success), var(--dark-color-success))` |
118
120
  | `--light-color-success` | `#22c55e` |
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` |
@@ -42,6 +43,7 @@ This catalog contains design tokens optimized for JS usage.
42
43
  | `ColorBaseGray400` | `#9ca3af` |
43
44
  | `ColorBaseGray500` | `#6b7280` |
44
45
  | `ColorBaseGray600` | `#4b5563` |
46
+ | `ColorBaseGray800` | `#1f2937` |
45
47
  | `ColorBaseGray900` | `#111827` |
46
48
  | `ColorBaseWhite` | `#ffffff` |
47
49
  | `ColorBaseBlack` | `#000000` |
@@ -105,10 +107,10 @@ The following semantic tokens are themed and support light/dark modes.
105
107
  | `LightColorBackgroundPrimary` | `#ffffff` |
106
108
  | `DarkColorBackgroundPrimary` | `#000000` |
107
109
  | `LightColorBackgroundSecondary` | `#f3f4f6` |
108
- | `DarkColorBackgroundSecondary` | `#6b7280` |
110
+ | `DarkColorBackgroundSecondary` | `#1f2937` |
109
111
  | `LightColorDanger` | `#ef4444` |
110
112
  | `DarkColorDanger` | `#7f1d1d` |
111
- | `LightColorPrimary` | `#3b82f6` |
113
+ | `LightColorPrimary` | `#2563eb` |
112
114
  | `DarkColorPrimary` | `#dbeafe` |
113
115
  | `LightColorSuccess` | `#22c55e` |
114
116
  | `DarkColorSuccess` | `#14532d` |
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` |
@@ -42,6 +43,7 @@ This catalog contains design tokens optimized for SCSS usage.
42
43
  | `$color-base-gray-400` | `#9ca3af` |
43
44
  | `$color-base-gray-500` | `#6b7280` |
44
45
  | `$color-base-gray-600` | `#4b5563` |
46
+ | `$color-base-gray-800` | `#1f2937` |
45
47
  | `$color-base-gray-900` | `#111827` |
46
48
  | `$color-base-white` | `#ffffff` |
47
49
  | `$color-base-black` | `#000000` |
@@ -105,10 +107,10 @@ The following semantic tokens are themed and support light/dark modes.
105
107
  | `$color-semantic-light-background-primary` | `#ffffff` |
106
108
  | `$color-semantic-dark-background-primary` | `#000000` |
107
109
  | `$color-semantic-light-background-secondary` | `#f3f4f6` |
108
- | `$color-semantic-dark-background-secondary` | `#6b7280` |
110
+ | `$color-semantic-dark-background-secondary` | `#1f2937` |
109
111
  | `$color-semantic-light-danger` | `#ef4444` |
110
112
  | `$color-semantic-dark-danger` | `#7f1d1d` |
111
- | `$color-semantic-light-primary` | `#3b82f6` |
113
+ | `$color-semantic-light-primary` | `#2563eb` |
112
114
  | `$color-semantic-dark-primary` | `#dbeafe` |
113
115
  | `$color-semantic-light-success` | `#22c55e` |
114
116
  | `$color-semantic-dark-success` | `#14532d` |
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;
@@ -30,6 +31,7 @@
30
31
  --color-base-gray-400: #9ca3af;
31
32
  --color-base-gray-500: #6b7280;
32
33
  --color-base-gray-600: #4b5563;
34
+ --color-base-gray-800: #1f2937;
33
35
  --color-base-gray-900: #111827;
34
36
  --color-base-white: #ffffff;
35
37
  --color-base-black: #000000;
@@ -68,7 +70,7 @@
68
70
  --font-letter-spacing-tight: -0.02em;
69
71
  --font-letter-spacing-normal: 0;
70
72
  --font-letter-spacing-wide: 0.08em;
71
- --light-color-primary: var(--color-base-blue-500);
73
+ --light-color-primary: var(--color-base-blue-600);
72
74
  --dark-color-primary: var(--color-base-blue-100);
73
75
  --color-primary: light-dark(var(--light-color-primary), var(--dark-color-primary));
74
76
  --light-color-success: var(--color-base-green-500);
@@ -81,7 +83,7 @@
81
83
  --dark-color-background-primary: var(--color-base-black);
82
84
  --color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
83
85
  --light-color-background-secondary: var(--color-base-gray-100);
84
- --dark-color-background-secondary: var(--color-base-gray-500);
86
+ --dark-color-background-secondary: var(--color-base-gray-800);
85
87
  --color-background-secondary: light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary));
86
88
  --light-color-text-primary: var(--color-base-gray-900);
87
89
  --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;
@@ -28,6 +29,7 @@ export const ColorBaseGray100: string;
28
29
  export const ColorBaseGray400: string;
29
30
  export const ColorBaseGray500: string;
30
31
  export const ColorBaseGray600: string;
32
+ export const ColorBaseGray800: string;
31
33
  export const ColorBaseGray900: string;
32
34
  export const ColorBaseWhite: string;
33
35
  export const ColorBaseBlack: 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";
@@ -28,10 +29,11 @@ export const ColorBaseGray100 = "#f3f4f6";
28
29
  export const ColorBaseGray400 = "#9ca3af";
29
30
  export const ColorBaseGray500 = "#6b7280";
30
31
  export const ColorBaseGray600 = "#4b5563";
32
+ export const ColorBaseGray800 = "#1f2937";
31
33
  export const ColorBaseGray900 = "#111827";
32
34
  export const ColorBaseWhite = "#ffffff";
33
35
  export const ColorBaseBlack = "#000000";
34
- export const LightColorPrimary = "#3b82f6";
36
+ export const LightColorPrimary = "#2563eb";
35
37
  export const LightColorSuccess = "#22c55e";
36
38
  export const LightColorDanger = "#ef4444";
37
39
  export const LightColorBackgroundPrimary = "#ffffff";
@@ -43,7 +45,7 @@ export const DarkColorPrimary = "#dbeafe";
43
45
  export const DarkColorSuccess = "#14532d";
44
46
  export const DarkColorDanger = "#7f1d1d";
45
47
  export const DarkColorBackgroundPrimary = "#000000";
46
- export const DarkColorBackgroundSecondary = "#6b7280";
48
+ export const DarkColorBackgroundSecondary = "#1f2937";
47
49
  export const DarkColorTextPrimary = "#ffffff";
48
50
  export const DarkColorTextSecondary = "#9ca3af";
49
51
  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";
@@ -28,10 +29,11 @@ export const ColorBaseGray100 = "#f3f4f6";
28
29
  export const ColorBaseGray400 = "#9ca3af";
29
30
  export const ColorBaseGray500 = "#6b7280";
30
31
  export const ColorBaseGray600 = "#4b5563";
32
+ export const ColorBaseGray800 = "#1f2937";
31
33
  export const ColorBaseGray900 = "#111827";
32
34
  export const ColorBaseWhite = "#ffffff";
33
35
  export const ColorBaseBlack = "#000000";
34
- export const LightColorPrimary = "#3b82f6";
36
+ export const LightColorPrimary = "#2563eb";
35
37
  export const LightColorSuccess = "#22c55e";
36
38
  export const LightColorDanger = "#ef4444";
37
39
  export const LightColorBackgroundPrimary = "#ffffff";
@@ -43,7 +45,7 @@ export const DarkColorPrimary = "#dbeafe";
43
45
  export const DarkColorSuccess = "#14532d";
44
46
  export const DarkColorDanger = "#7f1d1d";
45
47
  export const DarkColorBackgroundPrimary = "#000000";
46
- export const DarkColorBackgroundSecondary = "#6b7280";
48
+ export const DarkColorBackgroundSecondary = "#1f2937";
47
49
  export const DarkColorTextPrimary = "#ffffff";
48
50
  export const DarkColorTextSecondary = "#9ca3af";
49
51
  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;
@@ -24,10 +25,11 @@ $color-base-gray-100: #f3f4f6;
24
25
  $color-base-gray-400: #9ca3af;
25
26
  $color-base-gray-500: #6b7280;
26
27
  $color-base-gray-600: #4b5563;
28
+ $color-base-gray-800: #1f2937;
27
29
  $color-base-gray-900: #111827;
28
30
  $color-base-white: #ffffff;
29
31
  $color-base-black: #000000;
30
- $color-semantic-light-primary: $color-base-blue-500;
32
+ $color-semantic-light-primary: $color-base-blue-600;
31
33
  $color-semantic-light-success: $color-base-green-500;
32
34
  $color-semantic-light-danger: $color-base-red-500;
33
35
  $color-semantic-light-background-primary: $color-base-white;
@@ -39,7 +41,7 @@ $color-semantic-dark-primary: $color-base-blue-100;
39
41
  $color-semantic-dark-success: $color-base-green-900;
40
42
  $color-semantic-dark-danger: $color-base-red-900;
41
43
  $color-semantic-dark-background-primary: $color-base-black;
42
- $color-semantic-dark-background-secondary: $color-base-gray-500;
44
+ $color-semantic-dark-background-secondary: $color-base-gray-800;
43
45
  $color-semantic-dark-text-primary: $color-base-white;
44
46
  $color-semantic-dark-text-secondary: $color-base-gray-400;
45
47
  $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.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",
@@ -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
  }