@astryxdesign/theme-matcha 0.5.4 → 0.6.0-canary.0e3f116

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.
Files changed (7) hide show
  1. package/dist/matcha.d.ts +2 -3
  2. package/dist/matcha.js +38 -2
  3. package/dist/matchaTheme.d.ts +1 -1
  4. package/dist/matchaTheme.d.ts.map +1 -1
  5. package/dist/theme.css +74 -66
  6. package/package.json +3 -3
  7. package/dist/matcha.variants.d.ts +0 -18
package/dist/matcha.d.ts CHANGED
@@ -2,11 +2,10 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/matchaTheme.ts
4
4
  * Command: astryx theme build src/matchaTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.5.4
6
- * Core: @astryxdesign/core@0.5.4
5
+ * CLI: @astryxdesign/cli@0.6.0
6
+ * Core: @astryxdesign/core@0.6.0
7
7
  */
8
8
 
9
- /// <reference path="./matcha.variants.d.ts" />
10
9
  import type { DefinedTheme } from '@astryxdesign/core/theme';
11
10
  import type { IconRegistry } from '@astryxdesign/core/Icon';
12
11
  export declare const matchaIconRegistry: IconRegistry;
package/dist/matcha.js CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/matchaTheme.ts
4
4
  * Command: astryx theme build src/matchaTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.5.4
6
- * Core: @astryxdesign/core@0.5.4
5
+ * CLI: @astryxdesign/cli@0.6.0
6
+ * Core: @astryxdesign/core@0.6.0
7
7
  */
8
8
 
9
9
  import { matchaIconRegistry } from "./icons.mjs";
@@ -334,6 +334,42 @@ export const matchaTheme = {
334
334
  "--color-accent": "var(--color-on-light)"
335
335
  }
336
336
  },
337
+ __adaptations: {
338
+ "widthBreakpoints": {
339
+ "sm": 640,
340
+ "md": 768,
341
+ "lg": 1024,
342
+ "xl": 1280,
343
+ "2xl": 1536
344
+ },
345
+ "rules": []
346
+ },
347
+ __axes: {
348
+ "typography": {
349
+ "scale": {
350
+ "base": 16,
351
+ "ratio": 1.25
352
+ },
353
+ "body": {
354
+ "family": "DM Sans",
355
+ "fallbacks": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
356
+ },
357
+ "heading": {
358
+ "family": "Playwrite US Trad",
359
+ "fallbacks": "Georgia, \"Times New Roman\", Times, serif"
360
+ },
361
+ "code": {
362
+ "family": "JetBrains Mono",
363
+ "fallbacks": "\"SF Mono\", Monaco, Consolas, monospace"
364
+ }
365
+ },
366
+ "motion": {
367
+ "fast": 125,
368
+ "medium": 300,
369
+ "slow": 700,
370
+ "ratio": 0.75
371
+ }
372
+ },
337
373
  icons: matchaIconRegistry,
338
374
  };
339
375
 
package/dist/matchaTheme.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const matchaTheme: import("@astryxdesign/core/theme").DefinedTheme;
1
+ export declare const matchaTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme;
2
2
  //# sourceMappingURL=matchaTheme.d.ts.map
package/dist/matchaTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"matchaTheme.d.ts","sourceRoot":"","sources":["../src/matchaTheme.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,WAAW,iDAoNtB,CAAC"}
1
+ {"version":3,"file":"matchaTheme.d.ts","sourceRoot":"","sources":["../src/matchaTheme.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,WAAW,yDAoNtB,CAAC"}
package/dist/theme.css CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/matchaTheme.ts
4
4
  * Command: astryx theme build src/matchaTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.5.4
6
- * Core: @astryxdesign/core@0.5.4
5
+ * CLI: @astryxdesign/cli@0.6.0
6
+ * Core: @astryxdesign/core@0.6.0
7
7
  */
8
8
 
9
9
  @layer reset {
@@ -14,60 +14,60 @@
14
14
  }
15
15
 
16
16
  :where(h1) {
17
- font-size: var(--font-size-2xl);
18
- font-weight: var(--font-weight-semibold);
19
- line-height: 1.4194;
17
+ font-size: var(--text-heading-1-size);
18
+ font-weight: var(--text-heading-1-weight);
19
+ line-height: var(--text-heading-1-leading);
20
20
  }
21
21
 
22
22
  :where(h2) {
23
- font-size: var(--font-size-xl);
24
- font-weight: var(--font-weight-semibold);
25
- line-height: 1.44;
23
+ font-size: var(--text-heading-2-size);
24
+ font-weight: var(--text-heading-2-weight);
25
+ line-height: var(--text-heading-2-leading);
26
26
  }
27
27
 
28
28
  :where(h3) {
29
- font-size: var(--font-size-lg);
30
- font-weight: var(--font-weight-semibold);
31
- line-height: 1.4;
29
+ font-size: var(--text-heading-3-size);
30
+ font-weight: var(--text-heading-3-weight);
31
+ line-height: var(--text-heading-3-leading);
32
32
  }
33
33
 
34
34
  :where(h4) {
35
- font-size: var(--font-size-base);
36
- font-weight: var(--font-weight-semibold);
37
- line-height: 1.5;
35
+ font-size: var(--text-heading-4-size);
36
+ font-weight: var(--text-heading-4-weight);
37
+ line-height: var(--text-heading-4-leading);
38
38
  }
39
39
 
40
40
  :where(h5) {
41
- font-size: var(--font-size-sm);
42
- font-weight: var(--font-weight-semibold);
43
- line-height: 1.5385;
41
+ font-size: var(--text-heading-5-size);
42
+ font-weight: var(--text-heading-5-weight);
43
+ line-height: var(--text-heading-5-leading);
44
44
  }
45
45
 
46
46
  :where(h6) {
47
- font-size: var(--font-size-xs);
48
- font-weight: var(--font-weight-semibold);
49
- line-height: 1.6;
47
+ font-size: var(--text-heading-6-size);
48
+ font-weight: var(--text-heading-6-weight);
49
+ line-height: var(--text-heading-6-leading);
50
50
  }
51
51
 
52
52
  :where(p) {
53
53
  font-family: var(--font-family-body);
54
- font-size: var(--font-size-base);
55
- font-weight: var(--font-weight-normal);
56
- line-height: 1.5;
54
+ font-size: var(--text-body-size);
55
+ font-weight: var(--text-body-weight);
56
+ line-height: var(--text-body-leading);
57
57
  color: var(--color-text-primary);
58
58
  }
59
59
 
60
60
  :where(small) {
61
- font-size: var(--font-size-sm);
62
- font-weight: var(--font-weight-normal);
63
- line-height: 1.5385;
61
+ font-size: var(--text-supporting-size);
62
+ font-weight: var(--text-supporting-weight);
63
+ line-height: var(--text-supporting-leading);
64
64
  color: var(--color-text-secondary);
65
65
  }
66
66
 
67
67
  :where(code, pre) {
68
68
  font-family: var(--font-family-code);
69
- font-size: var(--font-size-base);
70
- line-height: 1.5;
69
+ font-size: var(--text-code-size);
70
+ line-height: var(--text-code-leading);
71
71
  }
72
72
 
73
73
  :where(hr) {
@@ -333,109 +333,109 @@
333
333
  --shadow-inset-error: inset 0px 0px 0px 2px #FD000050;
334
334
  }
335
335
 
336
- .astryx-heading.level-1 {
336
+ .astryx-heading[data-level="1"] {
337
337
  font-family: var(--font-family-heading);
338
338
  font-size: var(--text-heading-1-size);
339
339
  font-weight: var(--text-heading-1-weight);
340
340
  line-height: var(--text-heading-1-leading);
341
341
  }
342
342
 
343
- .astryx-heading.level-2 {
343
+ .astryx-heading[data-level="2"] {
344
344
  font-family: var(--font-family-heading);
345
345
  font-size: var(--text-heading-2-size);
346
346
  font-weight: var(--text-heading-2-weight);
347
347
  line-height: var(--text-heading-2-leading);
348
348
  }
349
349
 
350
- .astryx-heading.level-3 {
350
+ .astryx-heading[data-level="3"] {
351
351
  font-family: var(--font-family-heading);
352
352
  font-size: var(--text-heading-3-size);
353
353
  font-weight: var(--text-heading-3-weight);
354
354
  line-height: var(--text-heading-3-leading);
355
355
  }
356
356
 
357
- .astryx-heading.level-4 {
357
+ .astryx-heading[data-level="4"] {
358
358
  font-family: var(--font-family-heading);
359
359
  font-size: var(--text-heading-4-size);
360
360
  font-weight: var(--text-heading-4-weight);
361
361
  line-height: var(--text-heading-4-leading);
362
362
  }
363
363
 
364
- .astryx-heading.level-5 {
364
+ .astryx-heading[data-level="5"] {
365
365
  font-family: var(--font-family-heading);
366
366
  font-size: var(--text-heading-5-size);
367
367
  font-weight: var(--text-heading-5-weight);
368
368
  line-height: var(--text-heading-5-leading);
369
369
  }
370
370
 
371
- .astryx-heading.level-6 {
371
+ .astryx-heading[data-level="6"] {
372
372
  font-family: var(--font-family-heading);
373
373
  font-size: var(--text-heading-6-size);
374
374
  font-weight: var(--text-heading-6-weight);
375
375
  line-height: var(--text-heading-6-leading);
376
376
  }
377
377
 
378
- .astryx-heading.display-1 {
378
+ .astryx-heading[data-type="display-1"] {
379
379
  font-family: var(--font-family-heading);
380
380
  font-size: var(--text-display-1-size);
381
381
  line-height: var(--text-display-1-leading);
382
382
  }
383
383
 
384
- .astryx-heading.display-2 {
384
+ .astryx-heading[data-type="display-2"] {
385
385
  font-family: var(--font-family-heading);
386
386
  font-size: var(--text-display-2-size);
387
387
  line-height: var(--text-display-2-leading);
388
388
  }
389
389
 
390
- .astryx-heading.display-3 {
390
+ .astryx-heading[data-type="display-3"] {
391
391
  font-family: var(--font-family-heading);
392
392
  font-size: var(--text-display-3-size);
393
393
  line-height: var(--text-display-3-leading);
394
394
  }
395
395
 
396
- .astryx-text.body {
396
+ .astryx-text[data-type="body"] {
397
397
  font-family: var(--font-family-body);
398
398
  font-size: var(--text-body-size);
399
399
  line-height: var(--text-body-leading);
400
400
  }
401
401
 
402
- .astryx-text.large {
402
+ .astryx-text[data-type="large"] {
403
403
  font-family: var(--font-family-body);
404
404
  font-size: var(--text-large-size);
405
405
  line-height: var(--text-large-leading);
406
406
  }
407
407
 
408
- .astryx-text.label {
408
+ .astryx-text[data-type="label"] {
409
409
  font-family: var(--font-family-body);
410
410
  font-size: var(--text-label-size);
411
411
  line-height: var(--text-label-leading);
412
412
  }
413
413
 
414
- .astryx-text.code {
414
+ .astryx-text[data-type="code"] {
415
415
  font-family: var(--font-family-code);
416
416
  font-size: var(--text-code-size);
417
417
  line-height: var(--text-code-leading);
418
418
  }
419
419
 
420
- .astryx-text.supporting {
420
+ .astryx-text[data-type="supporting"] {
421
421
  font-family: var(--font-family-body);
422
422
  font-size: var(--text-supporting-size);
423
423
  line-height: var(--text-supporting-leading);
424
424
  }
425
425
 
426
- .astryx-text.display-1 {
426
+ .astryx-text[data-type="display-1"] {
427
427
  font-family: var(--font-family-heading);
428
428
  font-size: var(--text-display-1-size);
429
429
  line-height: var(--text-display-1-leading);
430
430
  }
431
431
 
432
- .astryx-text.display-2 {
432
+ .astryx-text[data-type="display-2"] {
433
433
  font-family: var(--font-family-heading);
434
434
  font-size: var(--text-display-2-size);
435
435
  line-height: var(--text-display-2-leading);
436
436
  }
437
437
 
438
- .astryx-text.display-3 {
438
+ .astryx-text[data-type="display-3"] {
439
439
  font-family: var(--font-family-heading);
440
440
  font-size: var(--text-display-3-size);
441
441
  line-height: var(--text-display-3-leading);
@@ -456,47 +456,55 @@
456
456
  --astryx-section-padding: var(--spacing-3);
457
457
  }
458
458
 
459
- .astryx-text.primary { color: var(--color-text-primary); }
459
+ .astryx-text[data-color="primary"] { color: var(--color-text-primary); }
460
+
461
+ .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }
462
+
463
+ .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }
464
+
465
+ .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }
466
+
467
+ .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }
460
468
 
461
- .astryx-heading.primary { color: var(--color-text-primary); }
469
+ .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }
462
470
 
463
- .astryx-text.secondary { color: var(--color-text-secondary); }
471
+ .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }
464
472
 
465
- .astryx-heading.secondary { color: var(--color-text-secondary); }
473
+ .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }
466
474
 
467
- .astryx-text.disabled { color: var(--color-text-disabled); }
475
+ .astryx-text[data-color="accent"] { color: var(--color-text-accent); }
468
476
 
469
- .astryx-heading.disabled { color: var(--color-text-disabled); }
477
+ .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }
470
478
 
471
- .astryx-text.placeholder { color: var(--color-text-secondary); }
479
+ .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
472
480
 
473
- .astryx-heading.placeholder { color: var(--color-text-secondary); }
481
+ .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }
474
482
 
475
- .astryx-text.accent { color: var(--color-text-accent); }
483
+ .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }
476
484
 
477
- .astryx-heading.accent { color: var(--color-text-accent); }
485
+ .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }
478
486
 
479
- .astryx-text.size-4xs { font-size: var(--font-size-4xs); }
487
+ .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }
480
488
 
481
- .astryx-text.size-3xs { font-size: var(--font-size-3xs); }
489
+ .astryx-text[data-size="base"] { font-size: var(--font-size-base); }
482
490
 
483
- .astryx-text.size-2xs { font-size: var(--font-size-2xs); }
491
+ .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }
484
492
 
485
- .astryx-text.xsm { font-size: var(--font-size-xs); }
493
+ .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }
486
494
 
487
- .astryx-text.sm { font-size: var(--font-size-sm); }
495
+ .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }
488
496
 
489
- .astryx-text.base { font-size: var(--font-size-base); }
497
+ .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }
490
498
 
491
- .astryx-text.lg { font-size: var(--font-size-lg); }
499
+ .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }
492
500
 
493
- .astryx-text.xl { font-size: var(--font-size-xl); }
501
+ .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }
494
502
 
495
- .astryx-text.size-2xl { font-size: var(--font-size-2xl); }
503
+ .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }
496
504
 
497
- .astryx-text.size-3xl { font-size: var(--font-size-3xl); }
505
+ .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }
498
506
 
499
- .astryx-text.size-4xl { font-size: var(--font-size-4xl); }
507
+ .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
500
508
  }
501
509
  }
502
510
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-matcha",
3
- "version": "0.5.4",
3
+ "version": "0.6.0-canary.0e3f116",
4
4
  "private": false,
5
5
  "description": "Earthy greens with a calm, organic feel. Naturalistic and grounded, great for wellness or content-first apps.",
6
6
  "author": "Meta Open Source",
@@ -48,11 +48,11 @@
48
48
  "lucide-react": "^1.18.0"
49
49
  },
50
50
  "peerDependencies": {
51
- "@astryxdesign/core": "0.5.4",
51
+ "@astryxdesign/core": "0.6.0-canary.0e3f116",
52
52
  "react": ">=19"
53
53
  },
54
54
  "devDependencies": {
55
- "@astryxdesign/cli": "0.5.4"
55
+ "@astryxdesign/cli": "0.6.0-canary.0e3f116"
56
56
  },
57
57
  "module": "./dist/source.mjs",
58
58
  "scripts": {
package/dist/matcha.variants.d.ts DELETED
@@ -1,18 +0,0 @@
1
- /**
2
- * @generated by `astryx theme build` — do not edit manually.
3
- * Source: src/matchaTheme.ts
4
- * Command: astryx theme build src/matchaTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.5.4
6
- * Core: @astryxdesign/core@0.5.4
7
- */
8
-
9
- // Generated by astryx theme build
10
- export {};
11
-
12
- declare module '@astryxdesign/core/Heading' {
13
- interface HeadingTypeMap {
14
- 'display-1': true;
15
- 'display-2': true;
16
- 'display-3': true;
17
- }
18
- }