@polyxd/ds-neon 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,322 @@
1
+ {
2
+ "$description": "Neon, 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
+ "neon": {
4
+ "palette": {
5
+ "$type": "color",
6
+ "void": {
7
+ "$value": "#0a0a14"
8
+ },
9
+ "void-1": {
10
+ "$value": "#13132a"
11
+ },
12
+ "void-raised": {
13
+ "$value": "#101024"
14
+ },
15
+ "void-lift": {
16
+ "$value": "#161636"
17
+ },
18
+ "glow-white": {
19
+ "$value": "#f4f0ff"
20
+ },
21
+ "text": {
22
+ "$value": "#eee9ff"
23
+ },
24
+ "text-dim": {
25
+ "$value": "#a9a3c8"
26
+ },
27
+ "line": {
28
+ "$value": "#2a2a4a"
29
+ },
30
+ "line-strong": {
31
+ "$value": "#7873a8"
32
+ },
33
+ "magenta": {
34
+ "$value": "#ff2bd6"
35
+ },
36
+ "magenta-ink": {
37
+ "$value": "#12001a"
38
+ },
39
+ "magenta-pale": {
40
+ "$value": "#ffa6ee"
41
+ },
42
+ "magenta-wash": {
43
+ "$value": "#2c1440"
44
+ },
45
+ "cyan": {
46
+ "$value": "#4ff0ff"
47
+ },
48
+ "cyan-pale": {
49
+ "$value": "#9beaff"
50
+ },
51
+ "cyan-wash": {
52
+ "$value": "#0f2a3a"
53
+ },
54
+ "lime": {
55
+ "$value": "#3dffb0"
56
+ },
57
+ "lime-pale": {
58
+ "$value": "#8dffcf"
59
+ },
60
+ "lime-wash": {
61
+ "$value": "#0c2f24"
62
+ },
63
+ "sun": {
64
+ "$value": "#ffd23f"
65
+ },
66
+ "sun-pale": {
67
+ "$value": "#ffe27a"
68
+ },
69
+ "sun-wash": {
70
+ "$value": "#332a08"
71
+ },
72
+ "hot": {
73
+ "$value": "#ff4d6d"
74
+ },
75
+ "hot-ink": {
76
+ "$value": "#1a0008"
77
+ },
78
+ "hot-pale": {
79
+ "$value": "#ffb3c3"
80
+ },
81
+ "hot-wash": {
82
+ "$value": "#3a0f1c"
83
+ },
84
+ "violet": {
85
+ "$value": "#b388ff"
86
+ },
87
+ "orange": {
88
+ "$value": "#ff8a3d"
89
+ },
90
+ "grey": {
91
+ "$value": "#8f89b8"
92
+ }
93
+ },
94
+ "sys": {
95
+ "$type": "color",
96
+ "surface-default": {
97
+ "$value": "{neon.palette.void}",
98
+ "$description": "Main page background"
99
+ },
100
+ "surface-subtle": {
101
+ "$value": "{neon.palette.void-1}",
102
+ "$description": "Grouping background: table headers, wells"
103
+ },
104
+ "surface-raised": {
105
+ "$value": "{neon.palette.void-raised}",
106
+ "$description": "Cards and sheets"
107
+ },
108
+ "surface-overlay": {
109
+ "$value": "{neon.palette.void-lift}",
110
+ "$description": "Dialogs and popovers"
111
+ },
112
+ "surface-inverse": {
113
+ "$value": "{neon.palette.glow-white}",
114
+ "$description": "Snackbars and tooltips"
115
+ },
116
+ "scrim": {
117
+ "$value": "rgba(10, 10, 20, 0.75)"
118
+ },
119
+ "text-default": {
120
+ "$value": "{neon.palette.text}"
121
+ },
122
+ "text-muted": {
123
+ "$value": "{neon.palette.text-dim}"
124
+ },
125
+ "text-inverse": {
126
+ "$value": "{neon.palette.void}"
127
+ },
128
+ "text-link": {
129
+ "$value": "{neon.palette.cyan}",
130
+ "$description": "Inline links"
131
+ },
132
+ "border-default": {
133
+ "$value": "{neon.palette.line}"
134
+ },
135
+ "border-strong": {
136
+ "$value": "{neon.palette.line-strong}",
137
+ "$description": "Input outlines (3:1 on the page)"
138
+ },
139
+ "border-focus": {
140
+ "$value": "{neon.palette.cyan}",
141
+ "$description": "Keyboard focus ring (3:1 on the page)"
142
+ },
143
+ "action-primary-background": {
144
+ "$value": "{neon.palette.magenta}"
145
+ },
146
+ "action-primary-foreground": {
147
+ "$value": "{neon.palette.magenta-ink}"
148
+ },
149
+ "action-secondary-background": {
150
+ "$value": "{neon.palette.void-1}"
151
+ },
152
+ "action-secondary-foreground": {
153
+ "$value": "{neon.palette.text}"
154
+ },
155
+ "action-secondary-border": {
156
+ "$value": "{neon.palette.magenta}"
157
+ },
158
+ "action-danger-background": {
159
+ "$value": "{neon.palette.hot}"
160
+ },
161
+ "action-danger-foreground": {
162
+ "$value": "{neon.palette.hot-ink}"
163
+ },
164
+ "selection-background": {
165
+ "$value": "{neon.palette.magenta-wash}"
166
+ },
167
+ "selection-foreground": {
168
+ "$value": "{neon.palette.magenta-pale}"
169
+ },
170
+ "status-info-background": {
171
+ "$value": "{neon.palette.cyan-wash}"
172
+ },
173
+ "status-info-foreground": {
174
+ "$value": "{neon.palette.cyan-pale}"
175
+ },
176
+ "status-info-emphasis": {
177
+ "$value": "{neon.palette.cyan}"
178
+ },
179
+ "status-success-background": {
180
+ "$value": "{neon.palette.lime-wash}"
181
+ },
182
+ "status-success-foreground": {
183
+ "$value": "{neon.palette.lime-pale}"
184
+ },
185
+ "status-success-emphasis": {
186
+ "$value": "{neon.palette.lime}"
187
+ },
188
+ "status-warning-background": {
189
+ "$value": "{neon.palette.sun-wash}"
190
+ },
191
+ "status-warning-foreground": {
192
+ "$value": "{neon.palette.sun-pale}"
193
+ },
194
+ "status-warning-emphasis": {
195
+ "$value": "{neon.palette.sun}"
196
+ },
197
+ "status-danger-background": {
198
+ "$value": "{neon.palette.hot-wash}"
199
+ },
200
+ "status-danger-foreground": {
201
+ "$value": "{neon.palette.hot-pale}"
202
+ },
203
+ "status-danger-emphasis": {
204
+ "$value": "{neon.palette.hot}"
205
+ },
206
+ "data-1": {
207
+ "$value": "{neon.palette.magenta}"
208
+ },
209
+ "data-2": {
210
+ "$value": "{neon.palette.cyan}"
211
+ },
212
+ "data-3": {
213
+ "$value": "{neon.palette.lime}"
214
+ },
215
+ "data-4": {
216
+ "$value": "{neon.palette.sun}"
217
+ },
218
+ "data-5": {
219
+ "$value": "{neon.palette.violet}"
220
+ },
221
+ "data-6": {
222
+ "$value": "{neon.palette.orange}"
223
+ },
224
+ "data-positive": {
225
+ "$value": "{neon.palette.lime}"
226
+ },
227
+ "data-negative": {
228
+ "$value": "{neon.palette.hot}"
229
+ },
230
+ "data-neutral": {
231
+ "$value": "{neon.palette.grey}"
232
+ }
233
+ },
234
+ "shadow": {
235
+ "$type": "shadow",
236
+ "raised": {
237
+ "$value": [
238
+ {
239
+ "offsetX": {
240
+ "value": 0,
241
+ "unit": "px"
242
+ },
243
+ "offsetY": {
244
+ "value": 0,
245
+ "unit": "px"
246
+ },
247
+ "blur": {
248
+ "value": 24,
249
+ "unit": "px"
250
+ },
251
+ "spread": {
252
+ "value": 0,
253
+ "unit": "px"
254
+ },
255
+ "color": "rgba(255, 43, 214, 0.25)"
256
+ },
257
+ {
258
+ "offsetX": {
259
+ "value": 0,
260
+ "unit": "px"
261
+ },
262
+ "offsetY": {
263
+ "value": 0,
264
+ "unit": "px"
265
+ },
266
+ "blur": {
267
+ "value": 2,
268
+ "unit": "px"
269
+ },
270
+ "spread": {
271
+ "value": 0,
272
+ "unit": "px"
273
+ },
274
+ "color": "rgba(79, 240, 255, 0.35)"
275
+ }
276
+ ]
277
+ },
278
+ "overlay": {
279
+ "$value": [
280
+ {
281
+ "offsetX": {
282
+ "value": 0,
283
+ "unit": "px"
284
+ },
285
+ "offsetY": {
286
+ "value": 0,
287
+ "unit": "px"
288
+ },
289
+ "blur": {
290
+ "value": 48,
291
+ "unit": "px"
292
+ },
293
+ "spread": {
294
+ "value": 0,
295
+ "unit": "px"
296
+ },
297
+ "color": "rgba(79, 240, 255, 0.35)"
298
+ },
299
+ {
300
+ "offsetX": {
301
+ "value": 0,
302
+ "unit": "px"
303
+ },
304
+ "offsetY": {
305
+ "value": 0,
306
+ "unit": "px"
307
+ },
308
+ "blur": {
309
+ "value": 4,
310
+ "unit": "px"
311
+ },
312
+ "spread": {
313
+ "value": 0,
314
+ "unit": "px"
315
+ },
316
+ "color": "rgba(255, 43, 214, 0.5)"
317
+ }
318
+ ]
319
+ }
320
+ }
321
+ }
322
+ }
@@ -0,0 +1,313 @@
1
+ {
2
+ "$description": "Neon primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
3
+ "neon": {
4
+ "font": {
5
+ "$type": "fontFamily",
6
+ "display": {
7
+ "$value": "'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
8
+ "$type": "fontFamily"
9
+ },
10
+ "body": {
11
+ "$value": "'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
12
+ "$type": "fontFamily"
13
+ },
14
+ "label": {
15
+ "$value": "'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
16
+ "$type": "fontFamily"
17
+ },
18
+ "mono": {
19
+ "$value": "'JetBrains Mono', 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": 34,
28
+ "unit": "px"
29
+ }
30
+ },
31
+ "title-section": {
32
+ "$value": {
33
+ "value": 24,
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": 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": 36,
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": 36,
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": 8,
181
+ "unit": "px"
182
+ }
183
+ },
184
+ "control": {
185
+ "$value": {
186
+ "value": 12,
187
+ "unit": "px"
188
+ }
189
+ },
190
+ "default": {
191
+ "$value": {
192
+ "value": 12,
193
+ "unit": "px"
194
+ }
195
+ },
196
+ "large": {
197
+ "$value": {
198
+ "value": 16,
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.1
247
+ },
248
+ "pressed": {
249
+ "$value": 0.18
250
+ },
251
+ "focus": {
252
+ "$value": 0.18
253
+ },
254
+ "disabled": {
255
+ "$value": 0.4
256
+ }
257
+ },
258
+ "duration": {
259
+ "$type": "duration",
260
+ "instant": {
261
+ "$value": {
262
+ "value": 60,
263
+ "unit": "ms"
264
+ }
265
+ },
266
+ "short": {
267
+ "$value": {
268
+ "value": 140,
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
+ }