@interstellarforge/matter-tokens 0.1.0 → 0.2.1

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/README.md CHANGED
@@ -21,7 +21,7 @@ CSS custom property: `--m-<path>`; the leading `color` group is dropped. `color.
21
21
 
22
22
  Attributes on `<html>`:
23
23
 
24
- - `data-theme="deep-space|professional"` (default: `deep-space`)
24
+ - `data-theme="deep-space|professional|pulsar"` (default: `deep-space`)
25
25
  - `data-color-mode="light|dark"` (default: OS preference; a theme without light mode uses its only mode)
26
26
  - `data-density="compact|comfortable|touch"` (default: `comfortable`; may be set on any element)
27
27
 
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type ThemeName = 'deep-space' | 'professional';
1
+ export type ThemeName = 'deep-space' | 'professional' | 'pulsar';
2
2
  export type ColorMode = 'light' | 'dark';
3
3
  export type Density = 'comfortable' | 'compact' | 'touch';
4
4
  export type TokenName = 'accent' | 'accent-hover' | 'accent-on' | 'accent-soft' | 'accent-soft-on' | 'bg' | 'border' | 'border-strong' | 'control-fs' | 'control-gap' | 'control-h' | 'control-pad-x' | 'control-radius' | 'danger' | 'danger-soft' | 'duration-base' | 'duration-fast' | 'duration-slow' | 'ease' | 'focus' | 'focus-halo' | 'font-mono' | 'font-sans' | 'fs-2xl' | 'fs-base' | 'fs-lg' | 'fs-md' | 'fs-sm' | 'fs-xl' | 'fs-xs' | 'fw-bold' | 'fw-medium' | 'fw-regular' | 'fw-semibold' | 'info' | 'info-soft' | 'lh-normal' | 'lh-relaxed' | 'lh-tight' | 'overlay' | 'placeholder' | 'primary' | 'primary-hover' | 'primary-on' | 'radius-lg' | 'radius-md' | 'radius-pill' | 'radius-sm' | 'radius-xl' | 'radius-xs' | 'row-h' | 'shadow-lg' | 'shadow-md' | 'shadow-sm' | 'sidebar' | 'space-0' | 'space-1' | 'space-10' | 'space-12' | 'space-2' | 'space-3' | 'space-4' | 'space-5' | 'space-6' | 'space-8' | 'success' | 'success-soft' | 'surface' | 'surface-disabled' | 'surface-hover' | 'surface-raised' | 'surface-soft' | 'text' | 'text-muted' | 'text-subtle' | 'warning' | 'warning-soft';
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
- export const themes = ['deep-space', 'professional'];
1
+ export const themes = ['deep-space', 'professional', 'pulsar'];
2
2
  export const colorModes = ['light', 'dark'];
3
3
  export const densities = ['comfortable', 'compact', 'touch'];
4
4
  export const defaultTheme = 'deep-space';
5
5
  export const defaultDensity = 'comfortable';
6
- export const modesByTheme = {"deep-space":["light","dark"],"professional":["light","dark"]};
6
+ export const modesByTheme = {"deep-space":["light","dark"],"professional":["light","dark"],"pulsar":["light","dark"]};
7
7
  export const tokenNames = ['accent', 'accent-hover', 'accent-on', 'accent-soft', 'accent-soft-on', 'bg', 'border', 'border-strong', 'control-fs', 'control-gap', 'control-h', 'control-pad-x', 'control-radius', 'danger', 'danger-soft', 'duration-base', 'duration-fast', 'duration-slow', 'ease', 'focus', 'focus-halo', 'font-mono', 'font-sans', 'fs-2xl', 'fs-base', 'fs-lg', 'fs-md', 'fs-sm', 'fs-xl', 'fs-xs', 'fw-bold', 'fw-medium', 'fw-regular', 'fw-semibold', 'info', 'info-soft', 'lh-normal', 'lh-relaxed', 'lh-tight', 'overlay', 'placeholder', 'primary', 'primary-hover', 'primary-on', 'radius-lg', 'radius-md', 'radius-pill', 'radius-sm', 'radius-xl', 'radius-xs', 'row-h', 'shadow-lg', 'shadow-md', 'shadow-sm', 'sidebar', 'space-0', 'space-1', 'space-10', 'space-12', 'space-2', 'space-3', 'space-4', 'space-5', 'space-6', 'space-8', 'success', 'success-soft', 'surface', 'surface-disabled', 'surface-hover', 'surface-raised', 'surface-soft', 'text', 'text-muted', 'text-subtle', 'warning', 'warning-soft'];
8
8
  export const cssVar = (name) => `var(--m-${name})`;
@@ -375,4 +375,159 @@
375
375
  --m-warning: #ffa24d;
376
376
  --m-warning-soft: #3a2812;
377
377
  }
378
+ :root[data-theme="pulsar"] {
379
+ color-scheme: light;
380
+ --m-control-radius: 12px;
381
+ --m-accent: #613ce3;
382
+ --m-accent-hover: #4f2cc8;
383
+ --m-accent-on: #ffffff;
384
+ --m-accent-soft: #ece8fc;
385
+ --m-accent-soft-on: #4a28b4;
386
+ --m-bg: #f8f8fc;
387
+ --m-border: #ddd9ee;
388
+ --m-border-strong: #8f85b8;
389
+ --m-danger: #b22342;
390
+ --m-danger-soft: #fce8ed;
391
+ --m-focus: #613ce3;
392
+ --m-focus-halo: #ffffff;
393
+ --m-info: #155bad;
394
+ --m-info-soft: #e2efff;
395
+ --m-overlay: rgba(26, 24, 53, 0.54);
396
+ --m-placeholder: #766d92;
397
+ --m-primary: #613ce3;
398
+ --m-primary-hover: #4f2cc8;
399
+ --m-primary-on: #ffffff;
400
+ --m-shadow-lg: 0px 24px 64px 0px rgb(10.2% 9.41% 20.78% / 0.18);
401
+ --m-shadow-md: 0px 8px 28px 0px rgb(10.2% 9.41% 20.78% / 0.1);
402
+ --m-shadow-sm: 0px 1px 3px 0px rgb(10.2% 9.41% 20.78% / 0.07);
403
+ --m-sidebar: #fcfcfd;
404
+ --m-success: #086f50;
405
+ --m-success-soft: #ddf6eb;
406
+ --m-surface: #fcfcfd;
407
+ --m-surface-disabled: #eeedf5;
408
+ --m-surface-hover: #e8e5f7;
409
+ --m-surface-raised: #ffffff;
410
+ --m-surface-soft: #f1f0f9;
411
+ --m-text: #1a1835;
412
+ --m-text-muted: #574e71;
413
+ --m-text-subtle: #625a7d;
414
+ --m-warning: #865200;
415
+ --m-warning-soft: #fff0d6;
416
+ }
417
+ @media (prefers-color-scheme: dark) {
418
+ :root[data-theme="pulsar"]:not([data-color-mode="light"]) {
419
+ color-scheme: dark;
420
+ --m-accent: #5aa9ff;
421
+ --m-accent-hover: #82bbff;
422
+ --m-accent-on: #04152b;
423
+ --m-accent-soft: #12335c;
424
+ --m-accent-soft-on: #cfe4ff;
425
+ --m-bg: #060e1d;
426
+ --m-border: #2a4662;
427
+ --m-border-strong: #4c6a8b;
428
+ --m-danger: #ff8da0;
429
+ --m-danger-soft: #4a1d2c;
430
+ --m-focus: #8fc4ff;
431
+ --m-focus-halo: #060e1d;
432
+ --m-info: #8fc4ff;
433
+ --m-info-soft: #12335c;
434
+ --m-overlay: rgba(0, 5, 13, 0.72);
435
+ --m-placeholder: #9fb3ca;
436
+ --m-primary: #1b6fd9;
437
+ --m-primary-hover: #2a82f0;
438
+ --m-primary-on: #ffffff;
439
+ --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
440
+ --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
441
+ --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
442
+ --m-sidebar: #071322;
443
+ --m-success: #3fe0b0;
444
+ --m-success-soft: #0f3a35;
445
+ --m-surface: #0d1c30;
446
+ --m-surface-disabled: #14233a;
447
+ --m-surface-hover: #17304d;
448
+ --m-surface-raised: #13263d;
449
+ --m-surface-soft: #112238;
450
+ --m-text: #f4f7fc;
451
+ --m-text-muted: #b7c7d9;
452
+ --m-text-subtle: #9fb3ca;
453
+ --m-warning: #ffa24d;
454
+ --m-warning-soft: #3a2812;
455
+ }
456
+ }
457
+ :root[data-theme="pulsar"][data-color-mode="light"] {
458
+ color-scheme: light;
459
+ --m-accent: #613ce3;
460
+ --m-accent-hover: #4f2cc8;
461
+ --m-accent-on: #ffffff;
462
+ --m-accent-soft: #ece8fc;
463
+ --m-accent-soft-on: #4a28b4;
464
+ --m-bg: #f8f8fc;
465
+ --m-border: #ddd9ee;
466
+ --m-border-strong: #8f85b8;
467
+ --m-danger: #b22342;
468
+ --m-danger-soft: #fce8ed;
469
+ --m-focus: #613ce3;
470
+ --m-focus-halo: #ffffff;
471
+ --m-info: #155bad;
472
+ --m-info-soft: #e2efff;
473
+ --m-overlay: rgba(26, 24, 53, 0.54);
474
+ --m-placeholder: #766d92;
475
+ --m-primary: #613ce3;
476
+ --m-primary-hover: #4f2cc8;
477
+ --m-primary-on: #ffffff;
478
+ --m-shadow-lg: 0px 24px 64px 0px rgb(10.2% 9.41% 20.78% / 0.18);
479
+ --m-shadow-md: 0px 8px 28px 0px rgb(10.2% 9.41% 20.78% / 0.1);
480
+ --m-shadow-sm: 0px 1px 3px 0px rgb(10.2% 9.41% 20.78% / 0.07);
481
+ --m-sidebar: #fcfcfd;
482
+ --m-success: #086f50;
483
+ --m-success-soft: #ddf6eb;
484
+ --m-surface: #fcfcfd;
485
+ --m-surface-disabled: #eeedf5;
486
+ --m-surface-hover: #e8e5f7;
487
+ --m-surface-raised: #ffffff;
488
+ --m-surface-soft: #f1f0f9;
489
+ --m-text: #1a1835;
490
+ --m-text-muted: #574e71;
491
+ --m-text-subtle: #625a7d;
492
+ --m-warning: #865200;
493
+ --m-warning-soft: #fff0d6;
494
+ }
495
+ :root[data-theme="pulsar"][data-color-mode="dark"] {
496
+ color-scheme: dark;
497
+ --m-accent: #5aa9ff;
498
+ --m-accent-hover: #82bbff;
499
+ --m-accent-on: #04152b;
500
+ --m-accent-soft: #12335c;
501
+ --m-accent-soft-on: #cfe4ff;
502
+ --m-bg: #060e1d;
503
+ --m-border: #2a4662;
504
+ --m-border-strong: #4c6a8b;
505
+ --m-danger: #ff8da0;
506
+ --m-danger-soft: #4a1d2c;
507
+ --m-focus: #8fc4ff;
508
+ --m-focus-halo: #060e1d;
509
+ --m-info: #8fc4ff;
510
+ --m-info-soft: #12335c;
511
+ --m-overlay: rgba(0, 5, 13, 0.72);
512
+ --m-placeholder: #9fb3ca;
513
+ --m-primary: #1b6fd9;
514
+ --m-primary-hover: #2a82f0;
515
+ --m-primary-on: #ffffff;
516
+ --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
517
+ --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
518
+ --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
519
+ --m-sidebar: #071322;
520
+ --m-success: #3fe0b0;
521
+ --m-success-soft: #0f3a35;
522
+ --m-surface: #0d1c30;
523
+ --m-surface-disabled: #14233a;
524
+ --m-surface-hover: #17304d;
525
+ --m-surface-raised: #13263d;
526
+ --m-surface-soft: #112238;
527
+ --m-text: #f4f7fc;
528
+ --m-text-muted: #b7c7d9;
529
+ --m-text-subtle: #9fb3ca;
530
+ --m-warning: #ffa24d;
531
+ --m-warning-soft: #3a2812;
532
+ }
378
533
  }
@@ -2,7 +2,8 @@
2
2
  "prefix": "m",
3
3
  "themes": [
4
4
  "deep-space",
5
- "professional"
5
+ "professional",
6
+ "pulsar"
6
7
  ],
7
8
  "modesByTheme": {
8
9
  "deep-space": [
@@ -12,6 +13,10 @@
12
13
  "professional": [
13
14
  "light",
14
15
  "dark"
16
+ ],
17
+ "pulsar": [
18
+ "light",
19
+ "dark"
15
20
  ]
16
21
  },
17
22
  "densities": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@interstellarforge/matter-tokens",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "license": "MIT",
5
5
  "description": "Matter design tokens (DTCG source, CSS and TypeScript output). Framework-agnostic.",
6
6
  "repository": {
@@ -0,0 +1,307 @@
1
+ {
2
+ "color": {
3
+ "$type": "color",
4
+ "bg": {
5
+ "$value": {
6
+ "colorSpace": "srgb",
7
+ "components": [0.9725, 0.9725, 0.9882],
8
+ "hex": "#f8f8fc"
9
+ }
10
+ },
11
+ "sidebar": {
12
+ "$value": {
13
+ "colorSpace": "srgb",
14
+ "components": [0.9882, 0.9882, 0.9922],
15
+ "hex": "#fcfcfd"
16
+ }
17
+ },
18
+ "surface": {
19
+ "$value": {
20
+ "colorSpace": "srgb",
21
+ "components": [0.9882, 0.9882, 0.9922],
22
+ "hex": "#fcfcfd"
23
+ }
24
+ },
25
+ "surface-raised": {
26
+ "$value": {
27
+ "colorSpace": "srgb",
28
+ "components": [1, 1, 1],
29
+ "hex": "#ffffff"
30
+ }
31
+ },
32
+ "surface-soft": {
33
+ "$value": {
34
+ "colorSpace": "srgb",
35
+ "components": [0.9451, 0.9412, 0.9765],
36
+ "hex": "#f1f0f9"
37
+ }
38
+ },
39
+ "surface-hover": {
40
+ "$value": {
41
+ "colorSpace": "srgb",
42
+ "components": [0.9098, 0.898, 0.9686],
43
+ "hex": "#e8e5f7"
44
+ }
45
+ },
46
+ "surface-disabled": {
47
+ "$value": {
48
+ "colorSpace": "srgb",
49
+ "components": [0.9333, 0.9294, 0.9608],
50
+ "hex": "#eeedf5"
51
+ }
52
+ },
53
+ "border": {
54
+ "$value": {
55
+ "colorSpace": "srgb",
56
+ "components": [0.8667, 0.851, 0.9333],
57
+ "hex": "#ddd9ee"
58
+ }
59
+ },
60
+ "border-strong": {
61
+ "$value": {
62
+ "colorSpace": "srgb",
63
+ "components": [0.5608, 0.5216, 0.7216],
64
+ "hex": "#8f85b8"
65
+ }
66
+ },
67
+ "text": {
68
+ "$value": {
69
+ "colorSpace": "srgb",
70
+ "components": [0.102, 0.0941, 0.2078],
71
+ "hex": "#1a1835"
72
+ }
73
+ },
74
+ "text-muted": {
75
+ "$value": {
76
+ "colorSpace": "srgb",
77
+ "components": [0.3412, 0.3059, 0.4431],
78
+ "hex": "#574e71"
79
+ }
80
+ },
81
+ "text-subtle": {
82
+ "$value": {
83
+ "colorSpace": "srgb",
84
+ "components": [0.3843, 0.3529, 0.4902],
85
+ "hex": "#625a7d"
86
+ }
87
+ },
88
+ "placeholder": {
89
+ "$value": {
90
+ "colorSpace": "srgb",
91
+ "components": [0.4627, 0.4275, 0.5725],
92
+ "hex": "#766d92"
93
+ }
94
+ },
95
+ "accent": {
96
+ "$value": {
97
+ "colorSpace": "srgb",
98
+ "components": [0.3804, 0.2353, 0.8902],
99
+ "hex": "#613ce3"
100
+ }
101
+ },
102
+ "accent-hover": {
103
+ "$value": {
104
+ "colorSpace": "srgb",
105
+ "components": [0.3098, 0.1725, 0.7843],
106
+ "hex": "#4f2cc8"
107
+ }
108
+ },
109
+ "accent-on": {
110
+ "$value": {
111
+ "colorSpace": "srgb",
112
+ "components": [1, 1, 1],
113
+ "hex": "#ffffff"
114
+ }
115
+ },
116
+ "accent-soft": {
117
+ "$value": {
118
+ "colorSpace": "srgb",
119
+ "components": [0.9255, 0.9098, 0.9882],
120
+ "hex": "#ece8fc"
121
+ }
122
+ },
123
+ "accent-soft-on": {
124
+ "$value": {
125
+ "colorSpace": "srgb",
126
+ "components": [0.2902, 0.1569, 0.7059],
127
+ "hex": "#4a28b4"
128
+ }
129
+ },
130
+ "primary": {
131
+ "$value": {
132
+ "colorSpace": "srgb",
133
+ "components": [0.3804, 0.2353, 0.8902],
134
+ "hex": "#613ce3"
135
+ }
136
+ },
137
+ "primary-hover": {
138
+ "$value": {
139
+ "colorSpace": "srgb",
140
+ "components": [0.3098, 0.1725, 0.7843],
141
+ "hex": "#4f2cc8"
142
+ }
143
+ },
144
+ "primary-on": {
145
+ "$value": {
146
+ "colorSpace": "srgb",
147
+ "components": [1, 1, 1],
148
+ "hex": "#ffffff"
149
+ }
150
+ },
151
+ "focus": {
152
+ "$value": {
153
+ "colorSpace": "srgb",
154
+ "components": [0.3804, 0.2353, 0.8902],
155
+ "hex": "#613ce3"
156
+ }
157
+ },
158
+ "focus-halo": {
159
+ "$value": {
160
+ "colorSpace": "srgb",
161
+ "components": [1, 1, 1],
162
+ "hex": "#ffffff"
163
+ }
164
+ },
165
+ "danger": {
166
+ "$value": {
167
+ "colorSpace": "srgb",
168
+ "components": [0.698, 0.1373, 0.2588],
169
+ "hex": "#b22342"
170
+ }
171
+ },
172
+ "danger-soft": {
173
+ "$value": {
174
+ "colorSpace": "srgb",
175
+ "components": [0.9882, 0.9098, 0.9294],
176
+ "hex": "#fce8ed"
177
+ }
178
+ },
179
+ "warning": {
180
+ "$value": {
181
+ "colorSpace": "srgb",
182
+ "components": [0.5255, 0.3216, 0],
183
+ "hex": "#865200"
184
+ }
185
+ },
186
+ "warning-soft": {
187
+ "$value": {
188
+ "colorSpace": "srgb",
189
+ "components": [1, 0.9412, 0.8392],
190
+ "hex": "#fff0d6"
191
+ }
192
+ },
193
+ "success": {
194
+ "$value": {
195
+ "colorSpace": "srgb",
196
+ "components": [0.0314, 0.4353, 0.3137],
197
+ "hex": "#086f50"
198
+ }
199
+ },
200
+ "success-soft": {
201
+ "$value": {
202
+ "colorSpace": "srgb",
203
+ "components": [0.8667, 0.9647, 0.9216],
204
+ "hex": "#ddf6eb"
205
+ }
206
+ },
207
+ "info": {
208
+ "$value": {
209
+ "colorSpace": "srgb",
210
+ "components": [0.0824, 0.3569, 0.6784],
211
+ "hex": "#155bad"
212
+ }
213
+ },
214
+ "info-soft": {
215
+ "$value": {
216
+ "colorSpace": "srgb",
217
+ "components": [0.8863, 0.9373, 1],
218
+ "hex": "#e2efff"
219
+ }
220
+ },
221
+ "overlay": {
222
+ "$value": {
223
+ "colorSpace": "srgb",
224
+ "components": [0.102, 0.0941, 0.2078],
225
+ "alpha": 0.54
226
+ }
227
+ }
228
+ },
229
+ "shadow": {
230
+ "$type": "shadow",
231
+ "sm": {
232
+ "$value": {
233
+ "color": {
234
+ "colorSpace": "srgb",
235
+ "components": [0.102, 0.0941, 0.2078],
236
+ "alpha": 0.07
237
+ },
238
+ "offsetX": {
239
+ "value": 0,
240
+ "unit": "px"
241
+ },
242
+ "offsetY": {
243
+ "value": 1,
244
+ "unit": "px"
245
+ },
246
+ "blur": {
247
+ "value": 3,
248
+ "unit": "px"
249
+ },
250
+ "spread": {
251
+ "value": 0,
252
+ "unit": "px"
253
+ }
254
+ }
255
+ },
256
+ "md": {
257
+ "$value": {
258
+ "color": {
259
+ "colorSpace": "srgb",
260
+ "components": [0.102, 0.0941, 0.2078],
261
+ "alpha": 0.1
262
+ },
263
+ "offsetX": {
264
+ "value": 0,
265
+ "unit": "px"
266
+ },
267
+ "offsetY": {
268
+ "value": 8,
269
+ "unit": "px"
270
+ },
271
+ "blur": {
272
+ "value": 28,
273
+ "unit": "px"
274
+ },
275
+ "spread": {
276
+ "value": 0,
277
+ "unit": "px"
278
+ }
279
+ }
280
+ },
281
+ "lg": {
282
+ "$value": {
283
+ "color": {
284
+ "colorSpace": "srgb",
285
+ "components": [0.102, 0.0941, 0.2078],
286
+ "alpha": 0.18
287
+ },
288
+ "offsetX": {
289
+ "value": 0,
290
+ "unit": "px"
291
+ },
292
+ "offsetY": {
293
+ "value": 24,
294
+ "unit": "px"
295
+ },
296
+ "blur": {
297
+ "value": 64,
298
+ "unit": "px"
299
+ },
300
+ "spread": {
301
+ "value": 0,
302
+ "unit": "px"
303
+ }
304
+ }
305
+ }
306
+ }
307
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "$extensions": { "matter.extends": "deep-space" },
3
+ "control-radius": {
4
+ "$type": "dimension",
5
+ "$value": "{radius.md}"
6
+ }
7
+ }