@astryxdesign/theme-matcha 0.7.0-canary.f3a2181 → 0.7.0

package/dist/matcha.js

@@ -175,20 +175,20 @@ export const matchaTheme = {
     "--color-border-yellow": "light-dark(#FFB600, #ffc940)",
     "--color-icon-yellow": "light-dark(#FFB600, #ffc940)",
     "--color-text-yellow": "light-dark(#cc9200, #ffd960)",
-    "--spacing-0-5": "3px",
-    "--spacing-1": "6px",
-    "--spacing-1-5": "9px",
-    "--spacing-2": "12px",
-    "--spacing-3": "18px",
-    "--spacing-4": "24px",
-    "--spacing-5": "30px",
-    "--spacing-6": "36px",
-    "--spacing-7": "42px",
-    "--spacing-8": "48px",
-    "--spacing-9": "54px",
-    "--spacing-10": "60px",
-    "--spacing-11": "66px",
-    "--spacing-12": "72px",
+    "--spacing-0-5": "0.1875rem",
+    "--spacing-1": "0.375rem",
+    "--spacing-1-5": "0.5625rem",
+    "--spacing-2": "0.75rem",
+    "--spacing-3": "1.125rem",
+    "--spacing-4": "1.5rem",
+    "--spacing-5": "1.875rem",
+    "--spacing-6": "2.25rem",
+    "--spacing-7": "2.625rem",
+    "--spacing-8": "3rem",
+    "--spacing-9": "3.375rem",
+    "--spacing-10": "3.75rem",
+    "--spacing-11": "4.125rem",
+    "--spacing-12": "4.5rem",
     "--radius-inner": "6px",
     "--radius-element": "12px",
     "--radius-container": "18px",

package/dist/matchaTheme.spacing.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=matchaTheme.spacing.test.d.ts.map

package/dist/matchaTheme.spacing.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchaTheme.spacing.test.d.ts","sourceRoot":"","sources":["../src/matchaTheme.spacing.test.ts"],"names":[],"mappings":""}

package/dist/source.js

@@ -213,20 +213,20 @@ var matchaTheme = (0, import_theme.defineTheme)({
     // =========================================================================
     // Spacing
     // =========================================================================
-    "--spacing-0-5": "3px",
-    "--spacing-1": "6px",
-    "--spacing-1-5": "9px",
-    "--spacing-2": "12px",
-    "--spacing-3": "18px",
-    "--spacing-4": "24px",
-    "--spacing-5": "30px",
-    "--spacing-6": "36px",
-    "--spacing-7": "42px",
-    "--spacing-8": "48px",
-    "--spacing-9": "54px",
-    "--spacing-10": "60px",
-    "--spacing-11": "66px",
-    "--spacing-12": "72px",
+    "--spacing-0-5": "0.1875rem",
+    "--spacing-1": "0.375rem",
+    "--spacing-1-5": "0.5625rem",
+    "--spacing-2": "0.75rem",
+    "--spacing-3": "1.125rem",
+    "--spacing-4": "1.5rem",
+    "--spacing-5": "1.875rem",
+    "--spacing-6": "2.25rem",
+    "--spacing-7": "2.625rem",
+    "--spacing-8": "3rem",
+    "--spacing-9": "3.375rem",
+    "--spacing-10": "3.75rem",
+    "--spacing-11": "4.125rem",
+    "--spacing-12": "4.5rem",
     // =========================================================================
     // Radius — soft and rounded
     // =========================================================================

package/dist/source.mjs

@@ -216,20 +216,20 @@ var matchaTheme = defineTheme({
     // =========================================================================
     // Spacing
     // =========================================================================
-    "--spacing-0-5": "3px",
-    "--spacing-1": "6px",
-    "--spacing-1-5": "9px",
-    "--spacing-2": "12px",
-    "--spacing-3": "18px",
-    "--spacing-4": "24px",
-    "--spacing-5": "30px",
-    "--spacing-6": "36px",
-    "--spacing-7": "42px",
-    "--spacing-8": "48px",
-    "--spacing-9": "54px",
-    "--spacing-10": "60px",
-    "--spacing-11": "66px",
-    "--spacing-12": "72px",
+    "--spacing-0-5": "0.1875rem",
+    "--spacing-1": "0.375rem",
+    "--spacing-1-5": "0.5625rem",
+    "--spacing-2": "0.75rem",
+    "--spacing-3": "1.125rem",
+    "--spacing-4": "1.5rem",
+    "--spacing-5": "1.875rem",
+    "--spacing-6": "2.25rem",
+    "--spacing-7": "2.625rem",
+    "--spacing-8": "3rem",
+    "--spacing-9": "3.375rem",
+    "--spacing-10": "3.75rem",
+    "--spacing-11": "4.125rem",
+    "--spacing-12": "4.5rem",
     // =========================================================================
     // Radius — soft and rounded
     // =========================================================================

package/dist/theme.css

@@ -243,20 +243,20 @@
     --color-border-yellow: light-dark(#FFB600, #ffc940);
     --color-icon-yellow: light-dark(#FFB600, #ffc940);
     --color-text-yellow: light-dark(#cc9200, #ffd960);
-    --spacing-0-5: 3px;
-    --spacing-1: 6px;
-    --spacing-1-5: 9px;
-    --spacing-2: 12px;
-    --spacing-3: 18px;
-    --spacing-4: 24px;
-    --spacing-5: 30px;
-    --spacing-6: 36px;
-    --spacing-7: 42px;
-    --spacing-8: 48px;
-    --spacing-9: 54px;
-    --spacing-10: 60px;
-    --spacing-11: 66px;
-    --spacing-12: 72px;
+    --spacing-0-5: 0.1875rem;
+    --spacing-1: 0.375rem;
+    --spacing-1-5: 0.5625rem;
+    --spacing-2: 0.75rem;
+    --spacing-3: 1.125rem;
+    --spacing-4: 1.5rem;
+    --spacing-5: 1.875rem;
+    --spacing-6: 2.25rem;
+    --spacing-7: 2.625rem;
+    --spacing-8: 3rem;
+    --spacing-9: 3.375rem;
+    --spacing-10: 3.75rem;
+    --spacing-11: 4.125rem;
+    --spacing-12: 4.5rem;
     --radius-inner: 6px;
     --radius-element: 12px;
     --radius-container: 18px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-matcha",
-  "version": "0.7.0-canary.f3a2181",
+  "version": "0.7.0",
   "private": false,
   "description": "Earthy greens with a calm, organic feel. Naturalistic and grounded, great for wellness or content-first apps.",
   "author": "Meta Open Source",
@@ -56,11 +56,11 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.0-canary.f3a2181",
+    "@astryxdesign/core": "0.7.0",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.0-canary.f3a2181"
+    "@astryxdesign/cli": "0.7.0"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/src/matchaTheme.spacing.test.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {matchaTheme} from './matchaTheme';
+
+const ROOT_FONT_SIZE_PX = 16;
+
+// The pixel values these steps had before they moved to rem.
+const previousPx: Record<string, number> = {
+  '--spacing-0-5': 3,
+  '--spacing-1': 6,
+  '--spacing-1-5': 9,
+  '--spacing-2': 12,
+  '--spacing-3': 18,
+  '--spacing-4': 24,
+  '--spacing-5': 30,
+  '--spacing-6': 36,
+  '--spacing-7': 42,
+  '--spacing-8': 48,
+  '--spacing-9': 54,
+  '--spacing-10': 60,
+  '--spacing-11': 66,
+  '--spacing-12': 72,
+};
+
+describe('matcha spacing steps', () => {
+  const tokens = matchaTheme.tokens as Record<string, string>;
+  const spacingSteps = Object.entries(tokens).filter(([name]) =>
+    name.startsWith('--spacing-'),
+  );
+
+  it('are rem, so they follow the root font size', () => {
+    expect(spacingSteps.length).toBe(Object.keys(previousPx).length);
+    for (const [name, value] of spacingSteps) {
+      expect(value, name).toMatch(/^\d+(\.\d+)?rem$/);
+    }
+  });
+
+  it('keep their previous pixel values at the default 16px root', () => {
+    for (const [name, px] of Object.entries(previousPx)) {
+      expect(Number.parseFloat(tokens[name]) * ROOT_FONT_SIZE_PX, name).toBe(
+        px,
+      );
+    }
+  });
+});

package/src/matchaTheme.ts

@@ -180,20 +180,20 @@ export const matchaTheme = defineTheme({
     // =========================================================================
     // Spacing
     // =========================================================================
-    '--spacing-0-5': '3px',
-    '--spacing-1': '6px',
-    '--spacing-1-5': '9px',
-    '--spacing-2': '12px',
-    '--spacing-3': '18px',
-    '--spacing-4': '24px',
-    '--spacing-5': '30px',
-    '--spacing-6': '36px',
-    '--spacing-7': '42px',
-    '--spacing-8': '48px',
-    '--spacing-9': '54px',
-    '--spacing-10': '60px',
-    '--spacing-11': '66px',
-    '--spacing-12': '72px',
+    '--spacing-0-5': '0.1875rem',
+    '--spacing-1': '0.375rem',
+    '--spacing-1-5': '0.5625rem',
+    '--spacing-2': '0.75rem',
+    '--spacing-3': '1.125rem',
+    '--spacing-4': '1.5rem',
+    '--spacing-5': '1.875rem',
+    '--spacing-6': '2.25rem',
+    '--spacing-7': '2.625rem',
+    '--spacing-8': '3rem',
+    '--spacing-9': '3.375rem',
+    '--spacing-10': '3.75rem',
+    '--spacing-11': '4.125rem',
+    '--spacing-12': '4.5rem',
 
     // =========================================================================
     // Radius — soft and rounded