@polyxd/ds-mono 0.3.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.
@@ -0,0 +1,313 @@
1
+ {
2
+ "$description": "Mono primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
3
+ "mono": {
4
+ "font": {
5
+ "$type": "fontFamily",
6
+ "display": {
7
+ "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
8
+ "$type": "fontFamily"
9
+ },
10
+ "body": {
11
+ "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
12
+ "$type": "fontFamily"
13
+ },
14
+ "label": {
15
+ "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
16
+ "$type": "fontFamily"
17
+ },
18
+ "mono": {
19
+ "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
20
+ "$type": "fontFamily"
21
+ }
22
+ },
23
+ "text": {
24
+ "$type": "dimension",
25
+ "title-page": {
26
+ "$value": {
27
+ "value": 30,
28
+ "unit": "px"
29
+ }
30
+ },
31
+ "title-section": {
32
+ "$value": {
33
+ "value": 22,
34
+ "unit": "px"
35
+ }
36
+ },
37
+ "title-item": {
38
+ "$value": {
39
+ "value": 17,
40
+ "unit": "px"
41
+ }
42
+ },
43
+ "body-default": {
44
+ "$value": {
45
+ "value": 16,
46
+ "unit": "px"
47
+ }
48
+ },
49
+ "body-small": {
50
+ "$value": {
51
+ "value": 14,
52
+ "unit": "px"
53
+ }
54
+ },
55
+ "label-default": {
56
+ "$value": {
57
+ "value": 14,
58
+ "unit": "px"
59
+ }
60
+ },
61
+ "label-small": {
62
+ "$value": {
63
+ "value": 12,
64
+ "unit": "px"
65
+ }
66
+ },
67
+ "numeric-display": {
68
+ "$value": {
69
+ "value": 30,
70
+ "unit": "px"
71
+ }
72
+ }
73
+ },
74
+ "weight": {
75
+ "$type": "number",
76
+ "400": {
77
+ "$value": 400
78
+ },
79
+ "600": {
80
+ "$value": 600
81
+ },
82
+ "700": {
83
+ "$value": 700
84
+ }
85
+ },
86
+ "space": {
87
+ "$type": "dimension",
88
+ "inset": {
89
+ "compact": {
90
+ "$value": {
91
+ "value": 8,
92
+ "unit": "px"
93
+ }
94
+ },
95
+ "default": {
96
+ "$value": {
97
+ "value": 16,
98
+ "unit": "px"
99
+ }
100
+ },
101
+ "comfortable": {
102
+ "$value": {
103
+ "value": 24,
104
+ "unit": "px"
105
+ }
106
+ }
107
+ },
108
+ "stack": {
109
+ "tight": {
110
+ "$value": {
111
+ "value": 4,
112
+ "unit": "px"
113
+ }
114
+ },
115
+ "default": {
116
+ "$value": {
117
+ "value": 8,
118
+ "unit": "px"
119
+ }
120
+ },
121
+ "loose": {
122
+ "$value": {
123
+ "value": 16,
124
+ "unit": "px"
125
+ }
126
+ },
127
+ "section": {
128
+ "$value": {
129
+ "value": 32,
130
+ "unit": "px"
131
+ }
132
+ }
133
+ },
134
+ "inline": {
135
+ "tight": {
136
+ "$value": {
137
+ "value": 4,
138
+ "unit": "px"
139
+ }
140
+ },
141
+ "default": {
142
+ "$value": {
143
+ "value": 8,
144
+ "unit": "px"
145
+ }
146
+ },
147
+ "loose": {
148
+ "$value": {
149
+ "value": 16,
150
+ "unit": "px"
151
+ }
152
+ }
153
+ }
154
+ },
155
+ "size": {
156
+ "$type": "dimension",
157
+ "target": {
158
+ "$value": {
159
+ "value": 44,
160
+ "unit": "px"
161
+ }
162
+ },
163
+ "icon-small": {
164
+ "$value": {
165
+ "value": 16,
166
+ "unit": "px"
167
+ }
168
+ },
169
+ "icon-default": {
170
+ "$value": {
171
+ "value": 20,
172
+ "unit": "px"
173
+ }
174
+ }
175
+ },
176
+ "radius": {
177
+ "$type": "dimension",
178
+ "small": {
179
+ "$value": {
180
+ "value": 6,
181
+ "unit": "px"
182
+ }
183
+ },
184
+ "control": {
185
+ "$value": {
186
+ "value": 8,
187
+ "unit": "px"
188
+ }
189
+ },
190
+ "default": {
191
+ "$value": {
192
+ "value": 8,
193
+ "unit": "px"
194
+ }
195
+ },
196
+ "large": {
197
+ "$value": {
198
+ "value": 12,
199
+ "unit": "px"
200
+ }
201
+ },
202
+ "full": {
203
+ "$value": {
204
+ "value": 999,
205
+ "unit": "px"
206
+ }
207
+ }
208
+ },
209
+ "border": {
210
+ "$type": "dimension",
211
+ "default": {
212
+ "$value": {
213
+ "value": 1,
214
+ "unit": "px"
215
+ }
216
+ },
217
+ "strong": {
218
+ "$value": {
219
+ "value": 2,
220
+ "unit": "px"
221
+ }
222
+ }
223
+ },
224
+ "focus": {
225
+ "$type": "dimension",
226
+ "width": {
227
+ "$value": {
228
+ "value": 2,
229
+ "unit": "px"
230
+ }
231
+ },
232
+ "offset": {
233
+ "$value": {
234
+ "value": 2,
235
+ "unit": "px"
236
+ }
237
+ }
238
+ },
239
+ "measure": {
240
+ "$value": 65,
241
+ "$type": "number"
242
+ },
243
+ "opacity": {
244
+ "$type": "number",
245
+ "hover": {
246
+ "$value": 0.06
247
+ },
248
+ "pressed": {
249
+ "$value": 0.12
250
+ },
251
+ "focus": {
252
+ "$value": 0.12
253
+ },
254
+ "disabled": {
255
+ "$value": 0.4
256
+ }
257
+ },
258
+ "duration": {
259
+ "$type": "duration",
260
+ "instant": {
261
+ "$value": {
262
+ "value": 80,
263
+ "unit": "ms"
264
+ }
265
+ },
266
+ "short": {
267
+ "$value": {
268
+ "value": 150,
269
+ "unit": "ms"
270
+ }
271
+ },
272
+ "medium": {
273
+ "$value": {
274
+ "value": 220,
275
+ "unit": "ms"
276
+ }
277
+ },
278
+ "long": {
279
+ "$value": {
280
+ "value": 320,
281
+ "unit": "ms"
282
+ }
283
+ }
284
+ },
285
+ "ease": {
286
+ "$type": "cubicBezier",
287
+ "standard": {
288
+ "$value": [
289
+ 0.4,
290
+ 0,
291
+ 0.2,
292
+ 1
293
+ ]
294
+ },
295
+ "enter": {
296
+ "$value": [
297
+ 0,
298
+ 0,
299
+ 0.2,
300
+ 1
301
+ ]
302
+ },
303
+ "exit": {
304
+ "$value": [
305
+ 0.4,
306
+ 0,
307
+ 1,
308
+ 1
309
+ ]
310
+ }
311
+ }
312
+ }
313
+ }
@@ -0,0 +1,266 @@
1
+ {
2
+ "$description": "Mono, light mode: the palette (named colours) and the roles that pick from it. Change a palette entry to recolour every role that uses it; point a role at a different entry to change one thing.",
3
+ "mono": {
4
+ "palette": {
5
+ "$type": "color",
6
+ "brand-25": {
7
+ "$value": "oklch(99% 0.006 275)"
8
+ },
9
+ "brand-50": {
10
+ "$value": "oklch(96.5% 0.02 275)"
11
+ },
12
+ "brand-100": {
13
+ "$value": "oklch(93% 0.04 275)"
14
+ },
15
+ "brand-200": {
16
+ "$value": "oklch(87% 0.07 275)"
17
+ },
18
+ "brand-300": {
19
+ "$value": "oklch(78% 0.11 275)"
20
+ },
21
+ "brand-400": {
22
+ "$value": "oklch(68% 0.16 275)"
23
+ },
24
+ "brand-500": {
25
+ "$value": "oklch(57% 0.2 275)"
26
+ },
27
+ "brand-600": {
28
+ "$value": "oklch(48% 0.21 275)"
29
+ },
30
+ "brand-700": {
31
+ "$value": "oklch(42% 0.19 275)"
32
+ },
33
+ "brand-800": {
34
+ "$value": "oklch(35% 0.15 275)"
35
+ },
36
+ "brand-900": {
37
+ "$value": "oklch(28% 0.11 275)"
38
+ },
39
+ "brand-950": {
40
+ "$value": "oklch(20% 0.07 275)"
41
+ },
42
+ "grey-600": {
43
+ "$value": "oklch(50% 0.03 275)"
44
+ },
45
+ "white": {
46
+ "$value": "#ffffff"
47
+ },
48
+ "success-600": {
49
+ "$value": "oklch(48% 0.15 150)"
50
+ },
51
+ "success-800": {
52
+ "$value": "oklch(36% 0.11 150)"
53
+ },
54
+ "success-100": {
55
+ "$value": "oklch(94% 0.05 150)"
56
+ },
57
+ "warning-600": {
58
+ "$value": "oklch(52% 0.13 70)"
59
+ },
60
+ "warning-800": {
61
+ "$value": "oklch(38% 0.1 70)"
62
+ },
63
+ "warning-100": {
64
+ "$value": "oklch(95% 0.05 80)"
65
+ },
66
+ "danger-600": {
67
+ "$value": "oklch(50% 0.2 25)"
68
+ },
69
+ "danger-800": {
70
+ "$value": "oklch(38% 0.15 25)"
71
+ },
72
+ "danger-100": {
73
+ "$value": "oklch(94% 0.04 25)"
74
+ }
75
+ },
76
+ "sys": {
77
+ "$type": "color",
78
+ "surface-default": {
79
+ "$value": "{mono.palette.brand-25}",
80
+ "$description": "Main page background"
81
+ },
82
+ "surface-subtle": {
83
+ "$value": "{mono.palette.brand-50}",
84
+ "$description": "Grouping background: table headers, wells"
85
+ },
86
+ "surface-raised": {
87
+ "$value": "{mono.palette.white}",
88
+ "$description": "Cards and sheets"
89
+ },
90
+ "surface-overlay": {
91
+ "$value": "{mono.palette.white}",
92
+ "$description": "Dialogs and popovers"
93
+ },
94
+ "surface-inverse": {
95
+ "$value": "{mono.palette.brand-900}",
96
+ "$description": "Snackbars and tooltips"
97
+ },
98
+ "scrim": {
99
+ "$value": "oklch(20% 0.07 275 / 0.5)"
100
+ },
101
+ "text-default": {
102
+ "$value": "{mono.palette.brand-950}"
103
+ },
104
+ "text-muted": {
105
+ "$value": "{mono.palette.brand-700}"
106
+ },
107
+ "text-inverse": {
108
+ "$value": "{mono.palette.brand-50}"
109
+ },
110
+ "text-link": {
111
+ "$value": "{mono.palette.brand-600}",
112
+ "$description": "Inline links"
113
+ },
114
+ "border-default": {
115
+ "$value": "{mono.palette.brand-200}"
116
+ },
117
+ "border-strong": {
118
+ "$value": "{mono.palette.brand-500}",
119
+ "$description": "Input outlines (3:1 on the page)"
120
+ },
121
+ "border-focus": {
122
+ "$value": "{mono.palette.brand-600}",
123
+ "$description": "Keyboard focus ring (3:1 on the page)"
124
+ },
125
+ "action-primary-background": {
126
+ "$value": "{mono.palette.brand-600}"
127
+ },
128
+ "action-primary-foreground": {
129
+ "$value": "{mono.palette.white}"
130
+ },
131
+ "action-secondary-background": {
132
+ "$value": "{mono.palette.brand-100}"
133
+ },
134
+ "action-secondary-foreground": {
135
+ "$value": "{mono.palette.brand-900}"
136
+ },
137
+ "action-secondary-border": {
138
+ "$value": "{mono.palette.brand-300}"
139
+ },
140
+ "action-danger-background": {
141
+ "$value": "{mono.palette.danger-600}"
142
+ },
143
+ "action-danger-foreground": {
144
+ "$value": "{mono.palette.white}"
145
+ },
146
+ "selection-background": {
147
+ "$value": "{mono.palette.brand-100}"
148
+ },
149
+ "selection-foreground": {
150
+ "$value": "{mono.palette.brand-900}"
151
+ },
152
+ "status-info-background": {
153
+ "$value": "{mono.palette.brand-100}"
154
+ },
155
+ "status-info-foreground": {
156
+ "$value": "{mono.palette.brand-800}"
157
+ },
158
+ "status-info-emphasis": {
159
+ "$value": "{mono.palette.brand-600}"
160
+ },
161
+ "status-success-background": {
162
+ "$value": "{mono.palette.success-100}"
163
+ },
164
+ "status-success-foreground": {
165
+ "$value": "{mono.palette.success-800}"
166
+ },
167
+ "status-success-emphasis": {
168
+ "$value": "{mono.palette.success-600}"
169
+ },
170
+ "status-warning-background": {
171
+ "$value": "{mono.palette.warning-100}"
172
+ },
173
+ "status-warning-foreground": {
174
+ "$value": "{mono.palette.warning-800}"
175
+ },
176
+ "status-warning-emphasis": {
177
+ "$value": "{mono.palette.warning-600}"
178
+ },
179
+ "status-danger-background": {
180
+ "$value": "{mono.palette.danger-100}"
181
+ },
182
+ "status-danger-foreground": {
183
+ "$value": "{mono.palette.danger-800}"
184
+ },
185
+ "status-danger-emphasis": {
186
+ "$value": "{mono.palette.danger-600}"
187
+ },
188
+ "data-1": {
189
+ "$value": "{mono.palette.brand-600}"
190
+ },
191
+ "data-2": {
192
+ "$value": "{mono.palette.brand-900}"
193
+ },
194
+ "data-3": {
195
+ "$value": "{mono.palette.brand-500}"
196
+ },
197
+ "data-4": {
198
+ "$value": "{mono.palette.brand-800}"
199
+ },
200
+ "data-5": {
201
+ "$value": "{mono.palette.grey-600}"
202
+ },
203
+ "data-6": {
204
+ "$value": "{mono.palette.brand-700}"
205
+ },
206
+ "data-positive": {
207
+ "$value": "{mono.palette.success-600}"
208
+ },
209
+ "data-negative": {
210
+ "$value": "{mono.palette.danger-600}"
211
+ },
212
+ "data-neutral": {
213
+ "$value": "{mono.palette.grey-600}"
214
+ }
215
+ },
216
+ "shadow": {
217
+ "$type": "shadow",
218
+ "raised": {
219
+ "$value": [
220
+ {
221
+ "offsetX": {
222
+ "value": 0,
223
+ "unit": "px"
224
+ },
225
+ "offsetY": {
226
+ "value": 1,
227
+ "unit": "px"
228
+ },
229
+ "blur": {
230
+ "value": 3,
231
+ "unit": "px"
232
+ },
233
+ "spread": {
234
+ "value": 0,
235
+ "unit": "px"
236
+ },
237
+ "color": "oklch(28% 0.11 275 / 0.12)"
238
+ }
239
+ ]
240
+ },
241
+ "overlay": {
242
+ "$value": [
243
+ {
244
+ "offsetX": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "offsetY": {
249
+ "value": 12,
250
+ "unit": "px"
251
+ },
252
+ "blur": {
253
+ "value": 32,
254
+ "unit": "px"
255
+ },
256
+ "spread": {
257
+ "value": 0,
258
+ "unit": "px"
259
+ },
260
+ "color": "oklch(28% 0.11 275 / 0.28)"
261
+ }
262
+ ]
263
+ }
264
+ }
265
+ }
266
+ }