@asafarim/design-tokens 0.2.0 → 0.3.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 (4) hide show
  1. package/dist/css/tokens.dark.css +112 -0
  2. package/dist/css/tokens.high-contrast.css +112 -0
  3. package/dist/css/tokens.light.css +112 -0
  4. package/package.json +4 -1
package/dist/css/tokens.dark.css CHANGED
@@ -9,11 +9,123 @@
9
9
  --asm-color-text-muted: #9CA3AF;
10
10
  --asm-color-border: #1F2937;
11
11
 
12
+ /* Primary Color Scale */
13
+ --asm-color-primary-0: #0F172A;
14
+ --asm-color-primary-50: #1E293B;
15
+ --asm-color-primary-100: #1E3A8A;
16
+ --asm-color-primary-200: #1E40FF;
17
+ --asm-color-primary-300: #304FFE;
18
+ --asm-color-primary-400: #3A5AFE;
19
+ --asm-color-primary-500: #4F6BFF;
20
+ --asm-color-primary-600: #6B82FF;
21
+ --asm-color-primary-700: #818CF8;
22
+ --asm-color-primary-800: #A5B4FC;
23
+ --asm-color-primary-900: #C7D2FE;
24
+ --asm-color-primary-950: #E0E7FF;
25
+
12
26
  --asm-color-brand-primary-50: #EEF2FF;
13
27
  --asm-color-brand-primary-500: #3A5AFE;
14
28
  --asm-color-brand-primary-600: #3A5AFE;
15
29
  --asm-color-brand-primary-700: #304FFE;
16
30
 
31
+ /* Warning Color Scale */
32
+ --asm-color-warning-0: #451A03;
33
+ --asm-color-warning-50: #78350F;
34
+ --asm-color-warning-100: #92400E;
35
+ --asm-color-warning-200: #B45309;
36
+ --asm-color-warning-300: #D97706;
37
+ --asm-color-warning-400: #F59E0B;
38
+ --asm-color-warning-500: #FBBF24;
39
+ --asm-color-warning-600: #FCD34D;
40
+ --asm-color-warning-700: #FDE68A;
41
+ --asm-color-warning-800: #FEF3C7;
42
+ --asm-color-warning-900: #FFFBEB;
43
+ --asm-color-warning-950: #FFFEF5;
44
+
45
+ /* Danger Color Scale */
46
+ --asm-color-danger-0: #450A0A;
47
+ --asm-color-danger-50: #7F1D1D;
48
+ --asm-color-danger-100: #991B1B;
49
+ --asm-color-danger-200: #B91C1C;
50
+ --asm-color-danger-300: #DC2626;
51
+ --asm-color-danger-400: #EF4444;
52
+ --asm-color-danger-500: #F87171;
53
+ --asm-color-danger-600: #FCA5A5;
54
+ --asm-color-danger-700: #FECACA;
55
+ --asm-color-danger-800: #FEE2E2;
56
+ --asm-color-danger-900: #FEF2F2;
57
+ --asm-color-danger-950: #FEF9F9;
58
+
59
+ /* Info Color Scale */
60
+ --asm-color-info-0: #082F49;
61
+ --asm-color-info-50: #0C4A6E;
62
+ --asm-color-info-100: #075985;
63
+ --asm-color-info-200: #0369A1;
64
+ --asm-color-info-300: #0284C7;
65
+ --asm-color-info-400: #0EA5E9;
66
+ --asm-color-info-500: #38BDF8;
67
+ --asm-color-info-600: #7DD3FC;
68
+ --asm-color-info-700: #BAE6FD;
69
+ --asm-color-info-800: #E0F2FE;
70
+ --asm-color-info-900: #F0F9FF;
71
+ --asm-color-info-950: #F7FCFF;
72
+
73
+ /* Success Color Scale */
74
+ --asm-color-success-0: #052E16;
75
+ --asm-color-success-50: #14532D;
76
+ --asm-color-success-100: #166534;
77
+ --asm-color-success-200: #15803D;
78
+ --asm-color-success-300: #16A34A;
79
+ --asm-color-success-400: #22C55E;
80
+ --asm-color-success-500: #4ADE80;
81
+ --asm-color-success-600: #86EFAC;
82
+ --asm-color-success-700: #BBF7D0;
83
+ --asm-color-success-800: #DCFCE7;
84
+ --asm-color-success-900: #F0FDF4;
85
+ --asm-color-success-950: #F7FEF9;
86
+
87
+ /* Purple Color Scale */
88
+ --asm-color-purple-0: #3B0764;
89
+ --asm-color-purple-50: #581C87;
90
+ --asm-color-purple-100: #6B21A8;
91
+ --asm-color-purple-200: #7E22CE;
92
+ --asm-color-purple-300: #9333EA;
93
+ --asm-color-purple-400: #A855F7;
94
+ --asm-color-purple-500: #C084FC;
95
+ --asm-color-purple-600: #D8B4FE;
96
+ --asm-color-purple-700: #E9D5FF;
97
+ --asm-color-purple-800: #F3E8FF;
98
+ --asm-color-purple-900: #FAF5FF;
99
+ --asm-color-purple-950: #FDFAFF;
100
+
101
+ /* Neutral Color Scale */
102
+ --asm-color-neutral-0: #030712;
103
+ --asm-color-neutral-50: #111827;
104
+ --asm-color-neutral-100: #1F2937;
105
+ --asm-color-neutral-200: #374151;
106
+ --asm-color-neutral-300: #4B5563;
107
+ --asm-color-neutral-400: #6B7280;
108
+ --asm-color-neutral-500: #9CA3AF;
109
+ --asm-color-neutral-600: #D1D5DB;
110
+ --asm-color-neutral-700: #E5E7EB;
111
+ --asm-color-neutral-800: #F3F4F6;
112
+ --asm-color-neutral-900: #F9FAFB;
113
+ --asm-color-neutral-950: #FCFCFD;
114
+
115
+ /* Secondary Color Scale */
116
+ --asm-color-secondary-0: #042F2E;
117
+ --asm-color-secondary-50: #134E4A;
118
+ --asm-color-secondary-100: #115E59;
119
+ --asm-color-secondary-200: #0F766E;
120
+ --asm-color-secondary-300: #0D9488;
121
+ --asm-color-secondary-400: #14B8A6;
122
+ --asm-color-secondary-500: #2DD4BF;
123
+ --asm-color-secondary-600: #5EEAD4;
124
+ --asm-color-secondary-700: #99F6E4;
125
+ --asm-color-secondary-800: #CCFBF1;
126
+ --asm-color-secondary-900: #F0FDFA;
127
+ --asm-color-secondary-950: #F7FEFD;
128
+
17
129
  --asm-color-semantic-success: #22C55E;
18
130
  --asm-color-semantic-warning: #FBBF24;
19
131
  --asm-color-semantic-error: #F87171;
package/dist/css/tokens.high-contrast.css CHANGED
@@ -9,11 +9,123 @@
9
9
  --asm-color-text-muted: #FFFFFF;
10
10
  --asm-color-border: #FFFFFF;
11
11
 
12
+ /* Primary Color Scale */
13
+ --asm-color-primary-0: #000000;
14
+ --asm-color-primary-50: #1A1A1A;
15
+ --asm-color-primary-100: #333333;
16
+ --asm-color-primary-200: #4D4D4D;
17
+ --asm-color-primary-300: #666666;
18
+ --asm-color-primary-400: #808080;
19
+ --asm-color-primary-500: #FFFFFF;
20
+ --asm-color-primary-600: #FFFFFF;
21
+ --asm-color-primary-700: #FFFFFF;
22
+ --asm-color-primary-800: #FFFFFF;
23
+ --asm-color-primary-900: #FFFFFF;
24
+ --asm-color-primary-950: #FFFFFF;
25
+
12
26
  --asm-color-brand-primary-50: #FFFFFF;
13
27
  --asm-color-brand-primary-500: #FFFFFF;
14
28
  --asm-color-brand-primary-600: #FFFFFF;
15
29
  --asm-color-brand-primary-700: #FFFFFF;
16
30
 
31
+ /* Warning Color Scale */
32
+ --asm-color-warning-0: #000000;
33
+ --asm-color-warning-50: #1A1A00;
34
+ --asm-color-warning-100: #333300;
35
+ --asm-color-warning-200: #666600;
36
+ --asm-color-warning-300: #999900;
37
+ --asm-color-warning-400: #CCCC00;
38
+ --asm-color-warning-500: #FFFF00;
39
+ --asm-color-warning-600: #FFFF33;
40
+ --asm-color-warning-700: #FFFF66;
41
+ --asm-color-warning-800: #FFFF99;
42
+ --asm-color-warning-900: #FFFFCC;
43
+ --asm-color-warning-950: #FFFFEE;
44
+
45
+ /* Danger Color Scale */
46
+ --asm-color-danger-0: #000000;
47
+ --asm-color-danger-50: #1A0000;
48
+ --asm-color-danger-100: #330000;
49
+ --asm-color-danger-200: #660000;
50
+ --asm-color-danger-300: #990000;
51
+ --asm-color-danger-400: #CC0000;
52
+ --asm-color-danger-500: #FF0000;
53
+ --asm-color-danger-600: #FF3333;
54
+ --asm-color-danger-700: #FF6666;
55
+ --asm-color-danger-800: #FF9999;
56
+ --asm-color-danger-900: #FFCCCC;
57
+ --asm-color-danger-950: #FFEEEE;
58
+
59
+ /* Info Color Scale */
60
+ --asm-color-info-0: #000000;
61
+ --asm-color-info-50: #001A1A;
62
+ --asm-color-info-100: #003333;
63
+ --asm-color-info-200: #006666;
64
+ --asm-color-info-300: #009999;
65
+ --asm-color-info-400: #00CCCC;
66
+ --asm-color-info-500: #00FFFF;
67
+ --asm-color-info-600: #33FFFF;
68
+ --asm-color-info-700: #66FFFF;
69
+ --asm-color-info-800: #99FFFF;
70
+ --asm-color-info-900: #CCFFFF;
71
+ --asm-color-info-950: #EEFFFF;
72
+
73
+ /* Success Color Scale */
74
+ --asm-color-success-0: #000000;
75
+ --asm-color-success-50: #001A00;
76
+ --asm-color-success-100: #003300;
77
+ --asm-color-success-200: #006600;
78
+ --asm-color-success-300: #009900;
79
+ --asm-color-success-400: #00CC00;
80
+ --asm-color-success-500: #00FF00;
81
+ --asm-color-success-600: #33FF33;
82
+ --asm-color-success-700: #66FF66;
83
+ --asm-color-success-800: #99FF99;
84
+ --asm-color-success-900: #CCFFCC;
85
+ --asm-color-success-950: #EEFFEE;
86
+
87
+ /* Purple Color Scale */
88
+ --asm-color-purple-0: #000000;
89
+ --asm-color-purple-50: #1A001A;
90
+ --asm-color-purple-100: #330033;
91
+ --asm-color-purple-200: #660066;
92
+ --asm-color-purple-300: #990099;
93
+ --asm-color-purple-400: #CC00CC;
94
+ --asm-color-purple-500: #FF00FF;
95
+ --asm-color-purple-600: #FF33FF;
96
+ --asm-color-purple-700: #FF66FF;
97
+ --asm-color-purple-800: #FF99FF;
98
+ --asm-color-purple-900: #FFCCFF;
99
+ --asm-color-purple-950: #FFEEFF;
100
+
101
+ /* Neutral Color Scale */
102
+ --asm-color-neutral-0: #000000;
103
+ --asm-color-neutral-50: #1A1A1A;
104
+ --asm-color-neutral-100: #333333;
105
+ --asm-color-neutral-200: #4D4D4D;
106
+ --asm-color-neutral-300: #666666;
107
+ --asm-color-neutral-400: #808080;
108
+ --asm-color-neutral-500: #999999;
109
+ --asm-color-neutral-600: #B3B3B3;
110
+ --asm-color-neutral-700: #CCCCCC;
111
+ --asm-color-neutral-800: #E6E6E6;
112
+ --asm-color-neutral-900: #FFFFFF;
113
+ --asm-color-neutral-950: #FFFFFF;
114
+
115
+ /* Secondary Color Scale */
116
+ --asm-color-secondary-0: #000000;
117
+ --asm-color-secondary-50: #001A1A;
118
+ --asm-color-secondary-100: #003333;
119
+ --asm-color-secondary-200: #004D4D;
120
+ --asm-color-secondary-300: #006666;
121
+ --asm-color-secondary-400: #008080;
122
+ --asm-color-secondary-500: #00CCCC;
123
+ --asm-color-secondary-600: #00FFFF;
124
+ --asm-color-secondary-700: #66FFFF;
125
+ --asm-color-secondary-800: #99FFFF;
126
+ --asm-color-secondary-900: #CCFFFF;
127
+ --asm-color-secondary-950: #EEFFFF;
128
+
17
129
  --asm-color-semantic-success: #00FF00;
18
130
  --asm-color-semantic-warning: #FFFF00;
19
131
  --asm-color-semantic-error: #FF0000;
package/dist/css/tokens.light.css CHANGED
@@ -9,11 +9,123 @@
9
9
  --asm-color-text-muted: #6B7280;
10
10
  --asm-color-border: #D1D5DB;
11
11
 
12
+ /* Primary Color Scale */
13
+ --asm-color-primary-0: #FFFFFF;
14
+ --asm-color-primary-50: #EEF2FF;
15
+ --asm-color-primary-100: #E0E7FF;
16
+ --asm-color-primary-200: #C7D2FE;
17
+ --asm-color-primary-300: #A5B4FC;
18
+ --asm-color-primary-400: #818CF8;
19
+ --asm-color-primary-500: #3A5AFE;
20
+ --asm-color-primary-600: #304FFE;
21
+ --asm-color-primary-700: #1E40FF;
22
+ --asm-color-primary-800: #1E3A8A;
23
+ --asm-color-primary-900: #1E293B;
24
+ --asm-color-primary-950: #0F172A;
25
+
12
26
  --asm-color-brand-primary-50: #EEF2FF;
13
27
  --asm-color-brand-primary-500: #3A5AFE;
14
28
  --asm-color-brand-primary-600: #304FFE;
15
29
  --asm-color-brand-primary-700: #1E40FF;
16
30
 
31
+ /* Warning Color Scale */
32
+ --asm-color-warning-0: #FFFFFF;
33
+ --asm-color-warning-50: #FFFBEB;
34
+ --asm-color-warning-100: #FEF3C7;
35
+ --asm-color-warning-200: #FDE68A;
36
+ --asm-color-warning-300: #FCD34D;
37
+ --asm-color-warning-400: #FBBF24;
38
+ --asm-color-warning-500: #F59E0B;
39
+ --asm-color-warning-600: #D97706;
40
+ --asm-color-warning-700: #B45309;
41
+ --asm-color-warning-800: #92400E;
42
+ --asm-color-warning-900: #78350F;
43
+ --asm-color-warning-950: #451A03;
44
+
45
+ /* Danger Color Scale */
46
+ --asm-color-danger-0: #FFFFFF;
47
+ --asm-color-danger-50: #FEF2F2;
48
+ --asm-color-danger-100: #FEE2E2;
49
+ --asm-color-danger-200: #FECACA;
50
+ --asm-color-danger-300: #FCA5A5;
51
+ --asm-color-danger-400: #F87171;
52
+ --asm-color-danger-500: #EF4444;
53
+ --asm-color-danger-600: #DC2626;
54
+ --asm-color-danger-700: #B91C1C;
55
+ --asm-color-danger-800: #991B1B;
56
+ --asm-color-danger-900: #7F1D1D;
57
+ --asm-color-danger-950: #450A0A;
58
+
59
+ /* Info Color Scale */
60
+ --asm-color-info-0: #FFFFFF;
61
+ --asm-color-info-50: #F0F9FF;
62
+ --asm-color-info-100: #E0F2FE;
63
+ --asm-color-info-200: #BAE6FD;
64
+ --asm-color-info-300: #7DD3FC;
65
+ --asm-color-info-400: #38BDF8;
66
+ --asm-color-info-500: #0EA5E9;
67
+ --asm-color-info-600: #0284C7;
68
+ --asm-color-info-700: #0369A1;
69
+ --asm-color-info-800: #075985;
70
+ --asm-color-info-900: #0C4A6E;
71
+ --asm-color-info-950: #082F49;
72
+
73
+ /* Success Color Scale */
74
+ --asm-color-success-0: #FFFFFF;
75
+ --asm-color-success-50: #F0FDF4;
76
+ --asm-color-success-100: #DCFCE7;
77
+ --asm-color-success-200: #BBF7D0;
78
+ --asm-color-success-300: #86EFAC;
79
+ --asm-color-success-400: #4ADE80;
80
+ --asm-color-success-500: #16A34A;
81
+ --asm-color-success-600: #16A34A;
82
+ --asm-color-success-700: #15803D;
83
+ --asm-color-success-800: #166534;
84
+ --asm-color-success-900: #14532D;
85
+ --asm-color-success-950: #052E16;
86
+
87
+ /* Purple Color Scale */
88
+ --asm-color-purple-0: #FFFFFF;
89
+ --asm-color-purple-50: #FAF5FF;
90
+ --asm-color-purple-100: #F3E8FF;
91
+ --asm-color-purple-200: #E9D5FF;
92
+ --asm-color-purple-300: #D8B4FE;
93
+ --asm-color-purple-400: #C084FC;
94
+ --asm-color-purple-500: #A855F7;
95
+ --asm-color-purple-600: #9333EA;
96
+ --asm-color-purple-700: #7E22CE;
97
+ --asm-color-purple-800: #6B21A8;
98
+ --asm-color-purple-900: #581C87;
99
+ --asm-color-purple-950: #3B0764;
100
+
101
+ /* Neutral Color Scale */
102
+ --asm-color-neutral-0: #FFFFFF;
103
+ --asm-color-neutral-50: #F9FAFB;
104
+ --asm-color-neutral-100: #F3F4F6;
105
+ --asm-color-neutral-200: #E5E7EB;
106
+ --asm-color-neutral-300: #D1D5DB;
107
+ --asm-color-neutral-400: #9CA3AF;
108
+ --asm-color-neutral-500: #6B7280;
109
+ --asm-color-neutral-600: #4B5563;
110
+ --asm-color-neutral-700: #374151;
111
+ --asm-color-neutral-800: #1F2937;
112
+ --asm-color-neutral-900: #111827;
113
+ --asm-color-neutral-950: #030712;
114
+
115
+ /* Secondary Color Scale */
116
+ --asm-color-secondary-0: #FFFFFF;
117
+ --asm-color-secondary-50: #F0FDFA;
118
+ --asm-color-secondary-100: #CCFBF1;
119
+ --asm-color-secondary-200: #99F6E4;
120
+ --asm-color-secondary-300: #5EEAD4;
121
+ --asm-color-secondary-400: #2DD4BF;
122
+ --asm-color-secondary-500: #14B8A6;
123
+ --asm-color-secondary-600: #0D9488;
124
+ --asm-color-secondary-700: #0F766E;
125
+ --asm-color-secondary-800: #115E59;
126
+ --asm-color-secondary-900: #134E4A;
127
+ --asm-color-secondary-950: #042F2E;
128
+
17
129
  --asm-color-semantic-success: #16A34A;
18
130
  --asm-color-semantic-warning: #F59E0B;
19
131
  --asm-color-semantic-error: #EF4444;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asafarim/design-tokens",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "private": false,
5
5
  "description": "ASafariM design tokens (TypeScript + CSS variables) with multi-theme support.",
6
6
  "license": "MIT",
@@ -24,6 +24,7 @@
24
24
  "main": "./dist/index.cjs",
25
25
  "module": "./dist/index.js",
26
26
  "types": "./dist/index.d.ts",
27
+ "style": "./dist/css/index.css",
27
28
  "files": [
28
29
  "dist",
29
30
  "README.md",
@@ -40,8 +41,10 @@
40
41
  "require": "./dist/index.cjs"
41
42
  },
42
43
  "./css": {
44
+ "style": "./dist/css/index.css",
43
45
  "default": "./dist/css/index.css"
44
46
  },
47
+ "./dist/css/index.css": "./dist/css/index.css",
45
48
  "./build": {
46
49
  "types": "./dist/build/index.d.ts",
47
50
  "import": "./dist/build/index.js",