@nice2dev/design-tokens 1.0.28

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.
@@ -0,0 +1,206 @@
1
+ {
2
+ "$name": "effects",
3
+ "$description": "Shadow, border-radius, and effects tokens (W3C Format)",
4
+
5
+ "shadow": {
6
+ "$type": "shadow",
7
+
8
+ "none": { "$value": "none" },
9
+
10
+ "xs": {
11
+ "$value": {
12
+ "offsetX": "0",
13
+ "offsetY": "1px",
14
+ "blur": "2px",
15
+ "spread": "0",
16
+ "color": "rgba(0, 0, 0, 0.05)"
17
+ }
18
+ },
19
+
20
+ "sm": {
21
+ "$value": {
22
+ "offsetX": "0",
23
+ "offsetY": "1px",
24
+ "blur": "3px",
25
+ "spread": "0",
26
+ "color": "rgba(0, 0, 0, 0.1)"
27
+ }
28
+ },
29
+
30
+ "base": {
31
+ "$value": [
32
+ {
33
+ "offsetX": "0",
34
+ "offsetY": "1px",
35
+ "blur": "3px",
36
+ "spread": "0",
37
+ "color": "rgba(0, 0, 0, 0.1)"
38
+ },
39
+ {
40
+ "offsetX": "0",
41
+ "offsetY": "1px",
42
+ "blur": "2px",
43
+ "spread": "-1px",
44
+ "color": "rgba(0, 0, 0, 0.1)"
45
+ }
46
+ ]
47
+ },
48
+
49
+ "md": {
50
+ "$value": [
51
+ {
52
+ "offsetX": "0",
53
+ "offsetY": "4px",
54
+ "blur": "6px",
55
+ "spread": "-1px",
56
+ "color": "rgba(0, 0, 0, 0.1)"
57
+ },
58
+ {
59
+ "offsetX": "0",
60
+ "offsetY": "2px",
61
+ "blur": "4px",
62
+ "spread": "-2px",
63
+ "color": "rgba(0, 0, 0, 0.1)"
64
+ }
65
+ ]
66
+ },
67
+
68
+ "lg": {
69
+ "$value": [
70
+ {
71
+ "offsetX": "0",
72
+ "offsetY": "10px",
73
+ "blur": "15px",
74
+ "spread": "-3px",
75
+ "color": "rgba(0, 0, 0, 0.1)"
76
+ },
77
+ {
78
+ "offsetX": "0",
79
+ "offsetY": "4px",
80
+ "blur": "6px",
81
+ "spread": "-4px",
82
+ "color": "rgba(0, 0, 0, 0.1)"
83
+ }
84
+ ]
85
+ },
86
+
87
+ "xl": {
88
+ "$value": [
89
+ {
90
+ "offsetX": "0",
91
+ "offsetY": "20px",
92
+ "blur": "25px",
93
+ "spread": "-5px",
94
+ "color": "rgba(0, 0, 0, 0.1)"
95
+ },
96
+ {
97
+ "offsetX": "0",
98
+ "offsetY": "8px",
99
+ "blur": "10px",
100
+ "spread": "-6px",
101
+ "color": "rgba(0, 0, 0, 0.1)"
102
+ }
103
+ ]
104
+ },
105
+
106
+ "2xl": {
107
+ "$value": {
108
+ "offsetX": "0",
109
+ "offsetY": "25px",
110
+ "blur": "50px",
111
+ "spread": "-12px",
112
+ "color": "rgba(0, 0, 0, 0.25)"
113
+ }
114
+ },
115
+
116
+ "inner": {
117
+ "$value": {
118
+ "offsetX": "0",
119
+ "offsetY": "2px",
120
+ "blur": "4px",
121
+ "spread": "0",
122
+ "color": "rgba(0, 0, 0, 0.05)",
123
+ "inset": true
124
+ }
125
+ },
126
+
127
+ "focus": {
128
+ "$value": {
129
+ "offsetX": "0",
130
+ "offsetY": "0",
131
+ "blur": "0",
132
+ "spread": "3px",
133
+ "color": "rgba(59, 130, 246, 0.5)"
134
+ }
135
+ },
136
+
137
+ "focus-error": {
138
+ "$value": {
139
+ "offsetX": "0",
140
+ "offsetY": "0",
141
+ "blur": "0",
142
+ "spread": "3px",
143
+ "color": "rgba(239, 68, 68, 0.5)"
144
+ }
145
+ }
146
+ },
147
+
148
+ "border": {
149
+ "radius": {
150
+ "$type": "dimension",
151
+
152
+ "none": { "$value": "0" },
153
+ "sm": { "$value": "0.125rem", "$description": "2px" },
154
+ "base": { "$value": "0.25rem", "$description": "4px" },
155
+ "md": { "$value": "0.375rem", "$description": "6px" },
156
+ "lg": { "$value": "0.5rem", "$description": "8px" },
157
+ "xl": { "$value": "0.75rem", "$description": "12px" },
158
+ "2xl": { "$value": "1rem", "$description": "16px" },
159
+ "3xl": { "$value": "1.5rem", "$description": "24px" },
160
+ "full": { "$value": "9999px" }
161
+ },
162
+
163
+ "width": {
164
+ "$type": "dimension",
165
+
166
+ "0": { "$value": "0" },
167
+ "1": { "$value": "1px" },
168
+ "2": { "$value": "2px" },
169
+ "4": { "$value": "4px" },
170
+ "8": { "$value": "8px" }
171
+ }
172
+ },
173
+
174
+ "opacity": {
175
+ "$type": "number",
176
+
177
+ "0": { "$value": 0 },
178
+ "5": { "$value": 0.05 },
179
+ "10": { "$value": 0.1 },
180
+ "20": { "$value": 0.2 },
181
+ "25": { "$value": 0.25 },
182
+ "30": { "$value": 0.3 },
183
+ "40": { "$value": 0.4 },
184
+ "50": { "$value": 0.5 },
185
+ "60": { "$value": 0.6 },
186
+ "70": { "$value": 0.7 },
187
+ "75": { "$value": 0.75 },
188
+ "80": { "$value": 0.8 },
189
+ "90": { "$value": 0.9 },
190
+ "95": { "$value": 0.95 },
191
+ "100": { "$value": 1 }
192
+ },
193
+
194
+ "blur": {
195
+ "$type": "dimension",
196
+
197
+ "none": { "$value": "0" },
198
+ "sm": { "$value": "4px" },
199
+ "base": { "$value": "8px" },
200
+ "md": { "$value": "12px" },
201
+ "lg": { "$value": "16px" },
202
+ "xl": { "$value": "24px" },
203
+ "2xl": { "$value": "40px" },
204
+ "3xl": { "$value": "64px" }
205
+ }
206
+ }
@@ -0,0 +1,105 @@
1
+ {
2
+ "$name": "spacing",
3
+ "$description": "Spacing scale design tokens (W3C Format)",
4
+
5
+ "spacing": {
6
+ "$type": "dimension",
7
+
8
+ "0": { "$value": "0" },
9
+ "px": { "$value": "1px" },
10
+ "0.5": { "$value": "0.125rem", "$description": "2px" },
11
+ "1": { "$value": "0.25rem", "$description": "4px" },
12
+ "1.5": { "$value": "0.375rem", "$description": "6px" },
13
+ "2": { "$value": "0.5rem", "$description": "8px" },
14
+ "2.5": { "$value": "0.625rem", "$description": "10px" },
15
+ "3": { "$value": "0.75rem", "$description": "12px" },
16
+ "3.5": { "$value": "0.875rem", "$description": "14px" },
17
+ "4": { "$value": "1rem", "$description": "16px" },
18
+ "5": { "$value": "1.25rem", "$description": "20px" },
19
+ "6": { "$value": "1.5rem", "$description": "24px" },
20
+ "7": { "$value": "1.75rem", "$description": "28px" },
21
+ "8": { "$value": "2rem", "$description": "32px" },
22
+ "9": { "$value": "2.25rem", "$description": "36px" },
23
+ "10": { "$value": "2.5rem", "$description": "40px" },
24
+ "11": { "$value": "2.75rem", "$description": "44px" },
25
+ "12": { "$value": "3rem", "$description": "48px" },
26
+ "14": { "$value": "3.5rem", "$description": "56px" },
27
+ "16": { "$value": "4rem", "$description": "64px" },
28
+ "20": { "$value": "5rem", "$description": "80px" },
29
+ "24": { "$value": "6rem", "$description": "96px" },
30
+ "28": { "$value": "7rem", "$description": "112px" },
31
+ "32": { "$value": "8rem", "$description": "128px" },
32
+ "36": { "$value": "9rem", "$description": "144px" },
33
+ "40": { "$value": "10rem", "$description": "160px" },
34
+ "44": { "$value": "11rem", "$description": "176px" },
35
+ "48": { "$value": "12rem", "$description": "192px" },
36
+ "52": { "$value": "13rem", "$description": "208px" },
37
+ "56": { "$value": "14rem", "$description": "224px" },
38
+ "60": { "$value": "15rem", "$description": "240px" },
39
+ "64": { "$value": "16rem", "$description": "256px" },
40
+ "72": { "$value": "18rem", "$description": "288px" },
41
+ "80": { "$value": "20rem", "$description": "320px" },
42
+ "96": { "$value": "24rem", "$description": "384px" }
43
+ },
44
+
45
+ "size": {
46
+ "$type": "dimension",
47
+ "$description": "Common component sizes",
48
+
49
+ "icon": {
50
+ "xs": { "$value": "0.75rem", "$description": "12px" },
51
+ "sm": { "$value": "1rem", "$description": "16px" },
52
+ "base": { "$value": "1.25rem", "$description": "20px" },
53
+ "lg": { "$value": "1.5rem", "$description": "24px" },
54
+ "xl": { "$value": "2rem", "$description": "32px" },
55
+ "2xl": { "$value": "2.5rem", "$description": "40px" }
56
+ },
57
+
58
+ "button": {
59
+ "height-xs": { "$value": "1.5rem", "$description": "24px" },
60
+ "height-sm": { "$value": "2rem", "$description": "32px" },
61
+ "height-base": { "$value": "2.5rem", "$description": "40px" },
62
+ "height-lg": { "$value": "3rem", "$description": "48px" },
63
+ "height-xl": { "$value": "3.5rem", "$description": "56px" }
64
+ },
65
+
66
+ "input": {
67
+ "height-sm": { "$value": "2rem", "$description": "32px" },
68
+ "height-base": { "$value": "2.5rem", "$description": "40px" },
69
+ "height-lg": { "$value": "3rem", "$description": "48px" }
70
+ },
71
+
72
+ "avatar": {
73
+ "xs": { "$value": "1.5rem", "$description": "24px" },
74
+ "sm": { "$value": "2rem", "$description": "32px" },
75
+ "base": { "$value": "2.5rem", "$description": "40px" },
76
+ "lg": { "$value": "3rem", "$description": "48px" },
77
+ "xl": { "$value": "4rem", "$description": "64px" },
78
+ "2xl": { "$value": "5rem", "$description": "80px" }
79
+ }
80
+ },
81
+
82
+ "gap": {
83
+ "$type": "dimension",
84
+ "$description": "Gap / gutter sizes for layouts",
85
+
86
+ "xs": { "$value": "{spacing.1}" },
87
+ "sm": { "$value": "{spacing.2}" },
88
+ "base": { "$value": "{spacing.4}" },
89
+ "lg": { "$value": "{spacing.6}" },
90
+ "xl": { "$value": "{spacing.8}" },
91
+ "2xl": { "$value": "{spacing.12}" }
92
+ },
93
+
94
+ "inset": {
95
+ "$type": "dimension",
96
+ "$description": "Padding for containers, cards, etc.",
97
+
98
+ "xs": { "$value": "{spacing.2}" },
99
+ "sm": { "$value": "{spacing.3}" },
100
+ "base": { "$value": "{spacing.4}" },
101
+ "lg": { "$value": "{spacing.6}" },
102
+ "xl": { "$value": "{spacing.8}" },
103
+ "2xl": { "$value": "{spacing.12}" }
104
+ }
105
+ }
@@ -0,0 +1,193 @@
1
+ {
2
+ "$name": "themes",
3
+ "$description": "Theme-specific token overrides (W3C Format)",
4
+
5
+ "dark": {
6
+ "$description": "Dark mode color overrides",
7
+
8
+ "color": {
9
+ "semantic": {
10
+ "brand": {
11
+ "primary": { "$value": "{color.primitive.blue.500}" },
12
+ "primary-hover": { "$value": "{color.primitive.blue.400}" },
13
+ "primary-active": { "$value": "{color.primitive.blue.300}" },
14
+ "primary-subtle": { "$value": "{color.primitive.blue.950}" },
15
+ "secondary": { "$value": "{color.primitive.violet.500}" },
16
+ "secondary-hover": { "$value": "{color.primitive.violet.400}" }
17
+ },
18
+
19
+ "feedback": {
20
+ "success": { "$value": "{color.primitive.green.500}" },
21
+ "success-subtle": { "$value": "{color.primitive.green.950}" },
22
+ "warning": { "$value": "{color.primitive.amber.400}" },
23
+ "warning-subtle": { "$value": "{color.primitive.amber.950}" },
24
+ "error": { "$value": "{color.primitive.red.500}" },
25
+ "error-subtle": { "$value": "{color.primitive.red.950}" },
26
+ "info": { "$value": "{color.primitive.cyan.500}" },
27
+ "info-subtle": { "$value": "{color.primitive.cyan.950}" }
28
+ },
29
+
30
+ "neutral": {
31
+ "background": { "$value": "{color.primitive.gray.950}" },
32
+ "background-subtle": { "$value": "{color.primitive.gray.900}" },
33
+ "background-muted": { "$value": "{color.primitive.gray.800}" },
34
+ "surface": { "$value": "{color.primitive.gray.900}" },
35
+ "surface-hover": { "$value": "{color.primitive.gray.800}" },
36
+ "surface-active": { "$value": "{color.primitive.gray.700}" },
37
+ "border": { "$value": "{color.primitive.gray.700}" },
38
+ "border-strong": { "$value": "{color.primitive.gray.600}" },
39
+ "divider": { "$value": "{color.primitive.gray.800}" }
40
+ },
41
+
42
+ "text": {
43
+ "primary": { "$value": "{color.primitive.gray.50}" },
44
+ "secondary": { "$value": "{color.primitive.gray.300}" },
45
+ "muted": { "$value": "{color.primitive.gray.400}" },
46
+ "disabled": { "$value": "{color.primitive.gray.500}" },
47
+ "inverse": { "$value": "{color.primitive.gray.900}" },
48
+ "on-brand": { "$value": "{color.primitive.white}" },
49
+ "link": { "$value": "{color.primitive.blue.400}" },
50
+ "link-hover": { "$value": "{color.primitive.blue.300}" }
51
+ },
52
+
53
+ "interactive": {
54
+ "focus": { "$value": "{color.primitive.blue.400}" },
55
+ "focus-ring": { "$value": "rgba(96, 165, 250, 0.5)" },
56
+ "disabled": { "$value": "{color.primitive.gray.700}" },
57
+ "disabled-text": { "$value": "{color.primitive.gray.500}" },
58
+ "overlay": { "$value": "rgba(0, 0, 0, 0.75)" }
59
+ }
60
+ }
61
+ },
62
+
63
+ "shadow": {
64
+ "sm": {
65
+ "$value": {
66
+ "offsetX": "0",
67
+ "offsetY": "1px",
68
+ "blur": "3px",
69
+ "spread": "0",
70
+ "color": "rgba(0, 0, 0, 0.3)"
71
+ }
72
+ },
73
+ "md": {
74
+ "$value": {
75
+ "offsetX": "0",
76
+ "offsetY": "4px",
77
+ "blur": "6px",
78
+ "spread": "-1px",
79
+ "color": "rgba(0, 0, 0, 0.4)"
80
+ }
81
+ },
82
+ "lg": {
83
+ "$value": {
84
+ "offsetX": "0",
85
+ "offsetY": "10px",
86
+ "blur": "15px",
87
+ "spread": "-3px",
88
+ "color": "rgba(0, 0, 0, 0.5)"
89
+ }
90
+ }
91
+ }
92
+ },
93
+
94
+ "high-contrast": {
95
+ "$description": "High contrast mode for accessibility (WCAG AAA compliant)",
96
+
97
+ "color": {
98
+ "semantic": {
99
+ "brand": {
100
+ "primary": { "$value": "#0000ee" },
101
+ "primary-hover": { "$value": "#0000cc" },
102
+ "primary-subtle": { "$value": "#e6e6ff" }
103
+ },
104
+
105
+ "feedback": {
106
+ "success": { "$value": "#006400" },
107
+ "success-subtle": { "$value": "#e6ffe6" },
108
+ "warning": { "$value": "#b45309" },
109
+ "warning-subtle": { "$value": "#fff5e6" },
110
+ "error": { "$value": "#cc0000" },
111
+ "error-subtle": { "$value": "#ffe6e6" },
112
+ "info": { "$value": "#004d99" },
113
+ "info-subtle": { "$value": "#e6f0ff" }
114
+ },
115
+
116
+ "neutral": {
117
+ "background": { "$value": "#ffffff" },
118
+ "background-subtle": { "$value": "#f0f0f0" },
119
+ "surface": { "$value": "#ffffff" },
120
+ "border": { "$value": "#000000" },
121
+ "border-strong": { "$value": "#000000" }
122
+ },
123
+
124
+ "text": {
125
+ "primary": { "$value": "#000000" },
126
+ "secondary": { "$value": "#333333" },
127
+ "muted": { "$value": "#555555" },
128
+ "link": { "$value": "#0000ee" },
129
+ "link-hover": { "$value": "#0000aa" }
130
+ }
131
+ }
132
+ },
133
+
134
+ "border": {
135
+ "width": {
136
+ "1": { "$value": "2px" },
137
+ "2": { "$value": "3px" }
138
+ }
139
+ }
140
+ },
141
+
142
+ "high-contrast-dark": {
143
+ "$description": "High contrast dark mode",
144
+
145
+ "color": {
146
+ "semantic": {
147
+ "brand": {
148
+ "primary": { "$value": "#5eaeff" },
149
+ "primary-hover": { "$value": "#8ec8ff" }
150
+ },
151
+
152
+ "feedback": {
153
+ "success": { "$value": "#4ade80" },
154
+ "warning": { "$value": "#fbbf24" },
155
+ "error": { "$value": "#f87171" },
156
+ "info": { "$value": "#67e8f9" }
157
+ },
158
+
159
+ "neutral": {
160
+ "background": { "$value": "#000000" },
161
+ "surface": { "$value": "#000000" },
162
+ "border": { "$value": "#ffffff" }
163
+ },
164
+
165
+ "text": {
166
+ "primary": { "$value": "#ffffff" },
167
+ "secondary": { "$value": "#e0e0e0" },
168
+ "link": { "$value": "#5eaeff" }
169
+ }
170
+ }
171
+ }
172
+ },
173
+
174
+ "dim": {
175
+ "$description": "Dim / low-light mode (easier on eyes at night)",
176
+
177
+ "color": {
178
+ "semantic": {
179
+ "neutral": {
180
+ "background": { "$value": "#1a1a2e" },
181
+ "background-subtle": { "$value": "#16213e" },
182
+ "surface": { "$value": "#0f3460" },
183
+ "border": { "$value": "#1f4068" }
184
+ },
185
+
186
+ "text": {
187
+ "primary": { "$value": "#e4e4e7" },
188
+ "secondary": { "$value": "#a1a1aa" }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ }