@polyxd/ds-health 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,290 @@
1
+ {
2
+ "$description": "Health, dark 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
+ "health": {
4
+ "palette": {
5
+ "$type": "color",
6
+ "night": {
7
+ "$value": "#14201f"
8
+ },
9
+ "night-deep": {
10
+ "$value": "#1c2a29"
11
+ },
12
+ "night-raised": {
13
+ "$value": "#192625"
14
+ },
15
+ "night-lift": {
16
+ "$value": "#1f2e2d"
17
+ },
18
+ "mist": {
19
+ "$value": "#e6f0ee"
20
+ },
21
+ "mist-soft": {
22
+ "$value": "#a3b8b5"
23
+ },
24
+ "mist-dim": {
25
+ "$value": "#8ca6a3"
26
+ },
27
+ "line": {
28
+ "$value": "#2d3f3d"
29
+ },
30
+ "line-strong": {
31
+ "$value": "#6e8e8b"
32
+ },
33
+ "teal": {
34
+ "$value": "#7fd1cb"
35
+ },
36
+ "teal-fill": {
37
+ "$value": "#5fc4bd"
38
+ },
39
+ "teal-ink": {
40
+ "$value": "#062c2a"
41
+ },
42
+ "teal-dark": {
43
+ "$value": "#1f3634"
44
+ },
45
+ "teal-pale": {
46
+ "$value": "#cfe9e6"
47
+ },
48
+ "teal-line": {
49
+ "$value": "#3c5f5b"
50
+ },
51
+ "teal-select": {
52
+ "$value": "#1f3f3c"
53
+ },
54
+ "teal-select-text": {
55
+ "$value": "#bfe6e1"
56
+ },
57
+ "terracotta": {
58
+ "$value": "#ea8a78"
59
+ },
60
+ "terracotta-ink": {
61
+ "$value": "#3a1108"
62
+ },
63
+ "terracotta-dark": {
64
+ "$value": "#432220"
65
+ },
66
+ "terracotta-pale": {
67
+ "$value": "#f5bdb2"
68
+ },
69
+ "sea": {
70
+ "$value": "#7fb8dc"
71
+ },
72
+ "sea-dark": {
73
+ "$value": "#1a3242"
74
+ },
75
+ "sea-pale": {
76
+ "$value": "#b5d7ee"
77
+ },
78
+ "leaf": {
79
+ "$value": "#6fc48f"
80
+ },
81
+ "leaf-dark": {
82
+ "$value": "#193526"
83
+ },
84
+ "leaf-pale": {
85
+ "$value": "#b3e3c3"
86
+ },
87
+ "apricot": {
88
+ "$value": "#e0a35a"
89
+ },
90
+ "apricot-dark": {
91
+ "$value": "#3f2e17"
92
+ },
93
+ "apricot-pale": {
94
+ "$value": "#f5d3a3"
95
+ },
96
+ "lilac": {
97
+ "$value": "#c0a5e0"
98
+ }
99
+ },
100
+ "sys": {
101
+ "$type": "color",
102
+ "surface-default": {
103
+ "$value": "{health.palette.night}",
104
+ "$description": "Main page background"
105
+ },
106
+ "surface-subtle": {
107
+ "$value": "{health.palette.night-deep}",
108
+ "$description": "Grouping background: table headers, wells"
109
+ },
110
+ "surface-raised": {
111
+ "$value": "{health.palette.night-raised}",
112
+ "$description": "Cards and sheets"
113
+ },
114
+ "surface-overlay": {
115
+ "$value": "{health.palette.night-lift}",
116
+ "$description": "Dialogs and popovers"
117
+ },
118
+ "surface-inverse": {
119
+ "$value": "{health.palette.mist}",
120
+ "$description": "Snackbars and tooltips"
121
+ },
122
+ "scrim": {
123
+ "$value": "rgba(0, 0, 0, 0.55)"
124
+ },
125
+ "text-default": {
126
+ "$value": "{health.palette.mist}"
127
+ },
128
+ "text-muted": {
129
+ "$value": "{health.palette.mist-soft}"
130
+ },
131
+ "text-inverse": {
132
+ "$value": "{health.palette.night}"
133
+ },
134
+ "text-link": {
135
+ "$value": "{health.palette.teal}",
136
+ "$description": "Inline links"
137
+ },
138
+ "border-default": {
139
+ "$value": "{health.palette.line}"
140
+ },
141
+ "border-strong": {
142
+ "$value": "{health.palette.line-strong}",
143
+ "$description": "Input outlines (3:1 on the page)"
144
+ },
145
+ "border-focus": {
146
+ "$value": "{health.palette.teal}",
147
+ "$description": "Keyboard focus ring (3:1 on the page)"
148
+ },
149
+ "action-primary-background": {
150
+ "$value": "{health.palette.teal-fill}"
151
+ },
152
+ "action-primary-foreground": {
153
+ "$value": "{health.palette.teal-ink}"
154
+ },
155
+ "action-secondary-background": {
156
+ "$value": "{health.palette.teal-dark}"
157
+ },
158
+ "action-secondary-foreground": {
159
+ "$value": "{health.palette.teal-pale}"
160
+ },
161
+ "action-secondary-border": {
162
+ "$value": "{health.palette.teal-line}"
163
+ },
164
+ "action-danger-background": {
165
+ "$value": "{health.palette.terracotta}"
166
+ },
167
+ "action-danger-foreground": {
168
+ "$value": "{health.palette.terracotta-ink}"
169
+ },
170
+ "selection-background": {
171
+ "$value": "{health.palette.teal-select}"
172
+ },
173
+ "selection-foreground": {
174
+ "$value": "{health.palette.teal-select-text}"
175
+ },
176
+ "status-info-background": {
177
+ "$value": "{health.palette.sea-dark}"
178
+ },
179
+ "status-info-foreground": {
180
+ "$value": "{health.palette.sea-pale}"
181
+ },
182
+ "status-info-emphasis": {
183
+ "$value": "{health.palette.sea}"
184
+ },
185
+ "status-success-background": {
186
+ "$value": "{health.palette.leaf-dark}"
187
+ },
188
+ "status-success-foreground": {
189
+ "$value": "{health.palette.leaf-pale}"
190
+ },
191
+ "status-success-emphasis": {
192
+ "$value": "{health.palette.leaf}"
193
+ },
194
+ "status-warning-background": {
195
+ "$value": "{health.palette.apricot-dark}"
196
+ },
197
+ "status-warning-foreground": {
198
+ "$value": "{health.palette.apricot-pale}"
199
+ },
200
+ "status-warning-emphasis": {
201
+ "$value": "{health.palette.apricot}"
202
+ },
203
+ "status-danger-background": {
204
+ "$value": "{health.palette.terracotta-dark}"
205
+ },
206
+ "status-danger-foreground": {
207
+ "$value": "{health.palette.terracotta-pale}"
208
+ },
209
+ "status-danger-emphasis": {
210
+ "$value": "{health.palette.terracotta}"
211
+ },
212
+ "data-1": {
213
+ "$value": "{health.palette.teal-fill}"
214
+ },
215
+ "data-2": {
216
+ "$value": "{health.palette.apricot}"
217
+ },
218
+ "data-3": {
219
+ "$value": "{health.palette.sea}"
220
+ },
221
+ "data-4": {
222
+ "$value": "{health.palette.lilac}"
223
+ },
224
+ "data-5": {
225
+ "$value": "{health.palette.leaf}"
226
+ },
227
+ "data-6": {
228
+ "$value": "{health.palette.terracotta}"
229
+ },
230
+ "data-positive": {
231
+ "$value": "{health.palette.leaf}"
232
+ },
233
+ "data-negative": {
234
+ "$value": "{health.palette.terracotta}"
235
+ },
236
+ "data-neutral": {
237
+ "$value": "{health.palette.mist-dim}"
238
+ }
239
+ },
240
+ "shadow": {
241
+ "$type": "shadow",
242
+ "raised": {
243
+ "$value": [
244
+ {
245
+ "offsetX": {
246
+ "value": 0,
247
+ "unit": "px"
248
+ },
249
+ "offsetY": {
250
+ "value": 2,
251
+ "unit": "px"
252
+ },
253
+ "blur": {
254
+ "value": 8,
255
+ "unit": "px"
256
+ },
257
+ "spread": {
258
+ "value": 0,
259
+ "unit": "px"
260
+ },
261
+ "color": "rgba(0, 0, 0, 0.3)"
262
+ }
263
+ ]
264
+ },
265
+ "overlay": {
266
+ "$value": [
267
+ {
268
+ "offsetX": {
269
+ "value": 0,
270
+ "unit": "px"
271
+ },
272
+ "offsetY": {
273
+ "value": 12,
274
+ "unit": "px"
275
+ },
276
+ "blur": {
277
+ "value": 32,
278
+ "unit": "px"
279
+ },
280
+ "spread": {
281
+ "value": 0,
282
+ "unit": "px"
283
+ },
284
+ "color": "rgba(0, 0, 0, 0.5)"
285
+ }
286
+ ]
287
+ }
288
+ }
289
+ }
290
+ }
@@ -0,0 +1,310 @@
1
+ {
2
+ "$description": "Health primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
3
+ "health": {
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": 18,
40
+ "unit": "px"
41
+ }
42
+ },
43
+ "body-default": {
44
+ "$value": {
45
+ "value": 17,
46
+ "unit": "px"
47
+ }
48
+ },
49
+ "body-small": {
50
+ "$value": {
51
+ "value": 15,
52
+ "unit": "px"
53
+ }
54
+ },
55
+ "label-default": {
56
+ "$value": {
57
+ "value": 16,
58
+ "unit": "px"
59
+ }
60
+ },
61
+ "label-small": {
62
+ "$value": {
63
+ "value": 14,
64
+ "unit": "px"
65
+ }
66
+ },
67
+ "numeric-display": {
68
+ "$value": {
69
+ "value": 34,
70
+ "unit": "px"
71
+ }
72
+ }
73
+ },
74
+ "weight": {
75
+ "$type": "number",
76
+ "400": {
77
+ "$value": 400
78
+ },
79
+ "600": {
80
+ "$value": 600
81
+ }
82
+ },
83
+ "space": {
84
+ "$type": "dimension",
85
+ "inset": {
86
+ "compact": {
87
+ "$value": {
88
+ "value": 12,
89
+ "unit": "px"
90
+ }
91
+ },
92
+ "default": {
93
+ "$value": {
94
+ "value": 20,
95
+ "unit": "px"
96
+ }
97
+ },
98
+ "comfortable": {
99
+ "$value": {
100
+ "value": 32,
101
+ "unit": "px"
102
+ }
103
+ }
104
+ },
105
+ "stack": {
106
+ "tight": {
107
+ "$value": {
108
+ "value": 8,
109
+ "unit": "px"
110
+ }
111
+ },
112
+ "default": {
113
+ "$value": {
114
+ "value": 16,
115
+ "unit": "px"
116
+ }
117
+ },
118
+ "loose": {
119
+ "$value": {
120
+ "value": 24,
121
+ "unit": "px"
122
+ }
123
+ },
124
+ "section": {
125
+ "$value": {
126
+ "value": 48,
127
+ "unit": "px"
128
+ }
129
+ }
130
+ },
131
+ "inline": {
132
+ "tight": {
133
+ "$value": {
134
+ "value": 8,
135
+ "unit": "px"
136
+ }
137
+ },
138
+ "default": {
139
+ "$value": {
140
+ "value": 12,
141
+ "unit": "px"
142
+ }
143
+ },
144
+ "loose": {
145
+ "$value": {
146
+ "value": 20,
147
+ "unit": "px"
148
+ }
149
+ }
150
+ }
151
+ },
152
+ "size": {
153
+ "$type": "dimension",
154
+ "target": {
155
+ "$value": {
156
+ "value": 48,
157
+ "unit": "px"
158
+ }
159
+ },
160
+ "icon-small": {
161
+ "$value": {
162
+ "value": 18,
163
+ "unit": "px"
164
+ }
165
+ },
166
+ "icon-default": {
167
+ "$value": {
168
+ "value": 22,
169
+ "unit": "px"
170
+ }
171
+ }
172
+ },
173
+ "radius": {
174
+ "$type": "dimension",
175
+ "small": {
176
+ "$value": {
177
+ "value": 8,
178
+ "unit": "px"
179
+ }
180
+ },
181
+ "control": {
182
+ "$value": {
183
+ "value": 12,
184
+ "unit": "px"
185
+ }
186
+ },
187
+ "default": {
188
+ "$value": {
189
+ "value": 12,
190
+ "unit": "px"
191
+ }
192
+ },
193
+ "large": {
194
+ "$value": {
195
+ "value": 20,
196
+ "unit": "px"
197
+ }
198
+ },
199
+ "full": {
200
+ "$value": {
201
+ "value": 999,
202
+ "unit": "px"
203
+ }
204
+ }
205
+ },
206
+ "border": {
207
+ "$type": "dimension",
208
+ "default": {
209
+ "$value": {
210
+ "value": 1,
211
+ "unit": "px"
212
+ }
213
+ },
214
+ "strong": {
215
+ "$value": {
216
+ "value": 2,
217
+ "unit": "px"
218
+ }
219
+ }
220
+ },
221
+ "focus": {
222
+ "$type": "dimension",
223
+ "width": {
224
+ "$value": {
225
+ "value": 3,
226
+ "unit": "px"
227
+ }
228
+ },
229
+ "offset": {
230
+ "$value": {
231
+ "value": 2,
232
+ "unit": "px"
233
+ }
234
+ }
235
+ },
236
+ "measure": {
237
+ "$value": 62,
238
+ "$type": "number"
239
+ },
240
+ "opacity": {
241
+ "$type": "number",
242
+ "hover": {
243
+ "$value": 0.06
244
+ },
245
+ "pressed": {
246
+ "$value": 0.12
247
+ },
248
+ "focus": {
249
+ "$value": 0.12
250
+ },
251
+ "disabled": {
252
+ "$value": 0.4
253
+ }
254
+ },
255
+ "duration": {
256
+ "$type": "duration",
257
+ "instant": {
258
+ "$value": {
259
+ "value": 100,
260
+ "unit": "ms"
261
+ }
262
+ },
263
+ "short": {
264
+ "$value": {
265
+ "value": 200,
266
+ "unit": "ms"
267
+ }
268
+ },
269
+ "medium": {
270
+ "$value": {
271
+ "value": 300,
272
+ "unit": "ms"
273
+ }
274
+ },
275
+ "long": {
276
+ "$value": {
277
+ "value": 420,
278
+ "unit": "ms"
279
+ }
280
+ }
281
+ },
282
+ "ease": {
283
+ "$type": "cubicBezier",
284
+ "standard": {
285
+ "$value": [
286
+ 0.4,
287
+ 0,
288
+ 0.2,
289
+ 1
290
+ ]
291
+ },
292
+ "enter": {
293
+ "$value": [
294
+ 0,
295
+ 0,
296
+ 0.2,
297
+ 1
298
+ ]
299
+ },
300
+ "exit": {
301
+ "$value": [
302
+ 0.4,
303
+ 0,
304
+ 1,
305
+ 1
306
+ ]
307
+ }
308
+ }
309
+ }
310
+ }