@idaho6/design 0.1.2 → 0.2.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.
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@idaho6/design",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
7
  "files": [
8
8
  "dist",
9
9
  "src/reset.css",
10
- "CHANGELOG.md"
10
+ "CHANGELOG.md",
11
+ "tokens"
11
12
  ],
12
13
  "type": "module",
13
14
  "main": "./dist/index.js",
@@ -0,0 +1,43 @@
1
+ {
2
+ "openprops": {
3
+ "border": {
4
+ "radius": {
5
+ "1": {
6
+ "$value": "2px"
7
+ },
8
+ "2": {
9
+ "$value": "5px"
10
+ },
11
+ "3": {
12
+ "$value": "1rem"
13
+ },
14
+ "4": {
15
+ "$value": "2rem"
16
+ },
17
+ "5": {
18
+ "$value": "4rem"
19
+ },
20
+ "6": {
21
+ "$value": "8rem"
22
+ }
23
+ },
24
+ "size": {
25
+ "1": {
26
+ "$value": "1px"
27
+ },
28
+ "2": {
29
+ "$value": "2px"
30
+ },
31
+ "3": {
32
+ "$value": "5px"
33
+ },
34
+ "4": {
35
+ "$value": "10px"
36
+ },
37
+ "5": {
38
+ "$value": "25px"
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,258 @@
1
+ {
2
+ "openprops": {
3
+ "color": {
4
+ "white": {
5
+ "$value": "#ffffff"
6
+ },
7
+ "black": {
8
+ "$value": "#000000"
9
+ },
10
+ "slate": {
11
+ "0": {
12
+ "$value": "#f8f9fa"
13
+ },
14
+ "1": {
15
+ "$value": "#f1f3f5"
16
+ },
17
+ "2": {
18
+ "$value": "#e9ecef"
19
+ },
20
+ "3": {
21
+ "$value": "#dee2e6"
22
+ },
23
+ "4": {
24
+ "$value": "#ced4da"
25
+ },
26
+ "5": {
27
+ "$value": "#adb5bd"
28
+ },
29
+ "6": {
30
+ "$value": "#868e96"
31
+ },
32
+ "7": {
33
+ "$value": "#495057"
34
+ },
35
+ "8": {
36
+ "$value": "#343a40"
37
+ },
38
+ "9": {
39
+ "$value": "#212529"
40
+ },
41
+ "10": {
42
+ "$value": "#16191d"
43
+ },
44
+ "11": {
45
+ "$value": "#0d0f12"
46
+ },
47
+ "12": {
48
+ "$value": "#030507"
49
+ }
50
+ },
51
+ "blue": {
52
+ "0": {
53
+ "$value": "#e7f5ff"
54
+ },
55
+ "1": {
56
+ "$value": "#d0ebff"
57
+ },
58
+ "2": {
59
+ "$value": "#a5d8ff"
60
+ },
61
+ "3": {
62
+ "$value": "#74c0fc"
63
+ },
64
+ "4": {
65
+ "$value": "#4dabf7"
66
+ },
67
+ "5": {
68
+ "$value": "#339af0"
69
+ },
70
+ "6": {
71
+ "$value": "#228be6"
72
+ },
73
+ "7": {
74
+ "$value": "#1c7ed6"
75
+ },
76
+ "8": {
77
+ "$value": "#1971c2"
78
+ },
79
+ "9": {
80
+ "$value": "#1864ab"
81
+ },
82
+ "10": {
83
+ "$value": "#145591"
84
+ },
85
+ "11": {
86
+ "$value": "#114678"
87
+ },
88
+ "12": {
89
+ "$value": "#0d375e"
90
+ }
91
+ },
92
+ "red": {
93
+ "0": {
94
+ "$value": "#fff5f5"
95
+ },
96
+ "1": {
97
+ "$value": "#ffe3e3"
98
+ },
99
+ "2": {
100
+ "$value": "#ffc9c9"
101
+ },
102
+ "3": {
103
+ "$value": "#ffa8a8"
104
+ },
105
+ "4": {
106
+ "$value": "#ff8787"
107
+ },
108
+ "5": {
109
+ "$value": "#ff6b6b"
110
+ },
111
+ "6": {
112
+ "$value": "#fa5252"
113
+ },
114
+ "7": {
115
+ "$value": "#f03e3e"
116
+ },
117
+ "8": {
118
+ "$value": "#e03131"
119
+ },
120
+ "9": {
121
+ "$value": "#c92a2a"
122
+ },
123
+ "10": {
124
+ "$value": "#b02525"
125
+ },
126
+ "11": {
127
+ "$value": "#962020"
128
+ },
129
+ "12": {
130
+ "$value": "#7d1a1a"
131
+ }
132
+ },
133
+ "green": {
134
+ "0": {
135
+ "$value": "#ebfbee"
136
+ },
137
+ "1": {
138
+ "$value": "#d3f9d8"
139
+ },
140
+ "2": {
141
+ "$value": "#b2f2bb"
142
+ },
143
+ "3": {
144
+ "$value": "#8ce99a"
145
+ },
146
+ "4": {
147
+ "$value": "#69db7c"
148
+ },
149
+ "5": {
150
+ "$value": "#51cf66"
151
+ },
152
+ "6": {
153
+ "$value": "#40c057"
154
+ },
155
+ "7": {
156
+ "$value": "#37b24d"
157
+ },
158
+ "8": {
159
+ "$value": "#2f9e44"
160
+ },
161
+ "9": {
162
+ "$value": "#2b8a3e"
163
+ },
164
+ "10": {
165
+ "$value": "#237032"
166
+ },
167
+ "11": {
168
+ "$value": "#1b5727"
169
+ },
170
+ "12": {
171
+ "$value": "#133d1b"
172
+ }
173
+ },
174
+ "teal": {
175
+ "0": {
176
+ "$value": "#e6fcf5"
177
+ },
178
+ "1": {
179
+ "$value": "#c3fae8"
180
+ },
181
+ "2": {
182
+ "$value": "#96f2d7"
183
+ },
184
+ "3": {
185
+ "$value": "#63e6be"
186
+ },
187
+ "4": {
188
+ "$value": "#38d9a9"
189
+ },
190
+ "5": {
191
+ "$value": "#20c997"
192
+ },
193
+ "6": {
194
+ "$value": "#12b886"
195
+ },
196
+ "7": {
197
+ "$value": "#0ca678"
198
+ },
199
+ "8": {
200
+ "$value": "#099268"
201
+ },
202
+ "9": {
203
+ "$value": "#087f5b"
204
+ },
205
+ "10": {
206
+ "$value": "#066649"
207
+ },
208
+ "11": {
209
+ "$value": "#054d37"
210
+ },
211
+ "12": {
212
+ "$value": "#033325"
213
+ }
214
+ },
215
+ "amber": {
216
+ "0": {
217
+ "$value": "#fff9db"
218
+ },
219
+ "1": {
220
+ "$value": "#fff3bf"
221
+ },
222
+ "2": {
223
+ "$value": "#ffec99"
224
+ },
225
+ "3": {
226
+ "$value": "#ffe066"
227
+ },
228
+ "4": {
229
+ "$value": "#ffd43b"
230
+ },
231
+ "5": {
232
+ "$value": "#fcc419"
233
+ },
234
+ "6": {
235
+ "$value": "#fab005"
236
+ },
237
+ "7": {
238
+ "$value": "#f59f00"
239
+ },
240
+ "8": {
241
+ "$value": "#f08c00"
242
+ },
243
+ "9": {
244
+ "$value": "#e67700"
245
+ },
246
+ "10": {
247
+ "$value": "#b35c00"
248
+ },
249
+ "11": {
250
+ "$value": "#804200"
251
+ },
252
+ "12": {
253
+ "$value": "#663500"
254
+ }
255
+ }
256
+ }
257
+ }
258
+ }
@@ -0,0 +1,47 @@
1
+ {
2
+ "openprops": {
3
+ "spacing": {
4
+ "size": {
5
+ "1": {
6
+ "$value": ".25rem"
7
+ },
8
+ "2": {
9
+ "$value": ".5rem"
10
+ },
11
+ "3": {
12
+ "$value": "1rem"
13
+ },
14
+ "4": {
15
+ "$value": "1.25rem"
16
+ },
17
+ "5": {
18
+ "$value": "1.5rem"
19
+ },
20
+ "6": {
21
+ "$value": "1.75rem"
22
+ },
23
+ "7": {
24
+ "$value": "2rem"
25
+ },
26
+ "8": {
27
+ "$value": "3rem"
28
+ },
29
+ "9": {
30
+ "$value": "4rem"
31
+ },
32
+ "10": {
33
+ "$value": "5rem"
34
+ },
35
+ "11": {
36
+ "$value": "7.5rem"
37
+ },
38
+ "12": {
39
+ "$value": "10rem"
40
+ },
41
+ "13": {
42
+ "$value": "15rem"
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,103 @@
1
+ {
2
+ "openprops": {
3
+ "typography": {
4
+ "font": {
5
+ "family": {
6
+ "neo-grotesque": {
7
+ "$value": "Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif"
8
+ },
9
+ "monospace-code": {
10
+ "$value": "Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace"
11
+ },
12
+ "mono": {
13
+ "$value": "var(--font-monospace-code)"
14
+ },
15
+ "system-ui": {
16
+ "$value": "system-ui, sans-serif"
17
+ },
18
+ "serif": {
19
+ "$value": "ui-serif, serif"
20
+ }
21
+ },
22
+ "size": {
23
+ "0": {
24
+ "$value": ".75rem"
25
+ },
26
+ "1": {
27
+ "$value": "1rem"
28
+ },
29
+ "2": {
30
+ "$value": "1.1rem"
31
+ },
32
+ "3": {
33
+ "$value": "1.25rem"
34
+ },
35
+ "4": {
36
+ "$value": "1.5rem"
37
+ },
38
+ "5": {
39
+ "$value": "2rem"
40
+ },
41
+ "6": {
42
+ "$value": "2.5rem"
43
+ },
44
+ "7": {
45
+ "$value": "3rem"
46
+ },
47
+ "8": {
48
+ "$value": "3.5rem"
49
+ }
50
+ },
51
+ "weight": {
52
+ "1": {
53
+ "$value": "100"
54
+ },
55
+ "2": {
56
+ "$value": "200"
57
+ },
58
+ "3": {
59
+ "$value": "300"
60
+ },
61
+ "4": {
62
+ "$value": "400"
63
+ },
64
+ "5": {
65
+ "$value": "500"
66
+ },
67
+ "6": {
68
+ "$value": "600"
69
+ },
70
+ "7": {
71
+ "$value": "700"
72
+ },
73
+ "8": {
74
+ "$value": "800"
75
+ },
76
+ "9": {
77
+ "$value": "900"
78
+ }
79
+ },
80
+ "lineheight": {
81
+ "0": {
82
+ "$value": "1.1"
83
+ },
84
+ "1": {
85
+ "$value": "1.25"
86
+ },
87
+ "2": {
88
+ "$value": "1.375"
89
+ },
90
+ "3": {
91
+ "$value": "1.5"
92
+ },
93
+ "4": {
94
+ "$value": "1.75"
95
+ },
96
+ "5": {
97
+ "$value": "2"
98
+ }
99
+ }
100
+ }
101
+ }
102
+ }
103
+ }
@@ -0,0 +1,9 @@
1
+ {
2
+ "animation": {
3
+ "duration": {
4
+ "base": {
5
+ "$value": "0.2s"
6
+ }
7
+ }
8
+ }
9
+ }
@@ -0,0 +1,31 @@
1
+ {
2
+ "border": {
3
+ "size": {
4
+ "subtle": {
5
+ "$value": "{openprops.border.size.1}"
6
+ },
7
+ "base": {
8
+ "$value": "{openprops.border.size.2}"
9
+ },
10
+ "strong": {
11
+ "$value": "{openprops.border.size.3}"
12
+ }
13
+ },
14
+ "radius": {
15
+ "sm": {
16
+ "$value": "{openprops.border.radius.1}"
17
+ },
18
+ "md": {
19
+ "$value": "{openprops.border.radius.2}"
20
+ }
21
+ },
22
+ "focus-ring": {
23
+ "offset": {
24
+ "$value": "{openprops.border.size.3}"
25
+ },
26
+ "color": {
27
+ "$value": "{color.action.focus-ring}"
28
+ }
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,46 @@
1
+ {
2
+ "color": {
3
+ "action": {
4
+ "primary": {
5
+ "$value": "{openprops.color.blue.6}"
6
+ },
7
+ "hover": {
8
+ "$value": "{openprops.color.blue.7}"
9
+ },
10
+ "active": {
11
+ "$value": "{openprops.color.blue.8}"
12
+ },
13
+ "focus-ring": {
14
+ "$value": "{openprops.color.blue.6}"
15
+ }
16
+ },
17
+ "text": {
18
+ "primary": {
19
+ "$value": "{openprops.color.slate.9}"
20
+ },
21
+ "secondary": {
22
+ "$value": "{openprops.color.slate.7}"
23
+ },
24
+ "on-dark": {
25
+ "$value": "{openprops.color.white}"
26
+ }
27
+ },
28
+ "surface": {
29
+ "page": {
30
+ "$value": "{openprops.color.white}"
31
+ },
32
+ "card": {
33
+ "$value": "{openprops.color.slate.1}"
34
+ },
35
+ "border": {
36
+ "$value": "{openprops.color.slate.4}"
37
+ },
38
+ "border-subtle": {
39
+ "$value": "{openprops.color.slate.3}"
40
+ },
41
+ "border-strong": {
42
+ "$value": "{openprops.color.slate.5}"
43
+ }
44
+ }
45
+ }
46
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "opacity": {
3
+ "disabled": {
4
+ "$value": "0.6"
5
+ }
6
+ }
7
+ }
@@ -0,0 +1,19 @@
1
+ {
2
+ "spacing": {
3
+ "xs": {
4
+ "$value": "{openprops.spacing.size.1}"
5
+ },
6
+ "sm": {
7
+ "$value": "{openprops.spacing.size.2}"
8
+ },
9
+ "md": {
10
+ "$value": "{openprops.spacing.size.3}"
11
+ },
12
+ "lg": {
13
+ "$value": "{openprops.spacing.size.4}"
14
+ },
15
+ "xl": {
16
+ "$value": "{openprops.spacing.size.5}"
17
+ }
18
+ }
19
+ }
@@ -0,0 +1,57 @@
1
+ {
2
+ "typography": {
3
+ "family": {
4
+ "base": {
5
+ "$value": "{openprops.typography.font.family.neo-grotesque}"
6
+ },
7
+ "mono": {
8
+ "$value": "{openprops.typography.font.family.mono}"
9
+ }
10
+ },
11
+ "scale": {
12
+ "xs": {
13
+ "$value": "{openprops.typography.font.size.0}"
14
+ },
15
+ "sm": {
16
+ "$value": "{openprops.typography.font.size.1}"
17
+ },
18
+ "base": {
19
+ "$value": "{openprops.typography.font.size.2}"
20
+ },
21
+ "md": {
22
+ "$value": "{openprops.typography.font.size.3}"
23
+ },
24
+ "lg": {
25
+ "$value": "{openprops.typography.font.size.4}"
26
+ },
27
+ "2xl": {
28
+ "$value": "{openprops.typography.font.size.7}"
29
+ },
30
+ "3xl": {
31
+ "$value": "{openprops.typography.font.size.8}"
32
+ }
33
+ },
34
+ "weight": {
35
+ "base": {
36
+ "$value": "{openprops.typography.font.weight.6}"
37
+ },
38
+ "bold": {
39
+ "$value": "{openprops.typography.font.weight.7}"
40
+ }
41
+ },
42
+ "lineheight": {
43
+ "tight": {
44
+ "$value": "{openprops.typography.font.lineheight.1}"
45
+ },
46
+ "snug": {
47
+ "$value": "{openprops.typography.font.lineheight.2}"
48
+ },
49
+ "base": {
50
+ "$value": "{openprops.typography.font.lineheight.3}"
51
+ },
52
+ "relaxed": {
53
+ "$value": "{openprops.typography.font.lineheight.4}"
54
+ }
55
+ }
56
+ }
57
+ }