@astryxdesign/theme-matcha 0.7.0-canary.e3c1cfd → 0.7.0-canary.e48e2ef

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

@@ -6,6 +6,8 @@
  * Core: @astryxdesign/core@0.7.0
  */
 
+@layer reset, astryx-base, astryx-theme;
+
 @layer reset {
 @scope ([data-astryx-theme="matcha"]) to ([data-astryx-theme]) {
   :where(h1, h2, h3, h4, h5, h6) {
@@ -77,67 +79,6 @@
 }
 }
 
-@layer astryx-base {
-:root {
-  --color-data-categorical-blue: light-dark(#0171E3, #0171E3);
-  --color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
-  --color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-categorical-green: light-dark(#0B991F, #0B991F);
-  --color-data-categorical-pink: light-dark(#F351C0, #F351C0);
-  --color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
-  --color-data-categorical-red: light-dark(#F5394F, #F5394F);
-  --color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
-  --color-data-categorical-brown: light-dark(#965E03, #965E03);
-  --color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
-  --color-data-neutral: light-dark(#8494A3, #8C939B);
-  --color-data-blue-5: light-dark(#02165E, #02165E);
-  --color-data-blue-4: light-dark(#004CBC, #004CBC);
-  --color-data-blue-3: light-dark(#2694FE, #2694FE);
-  --color-data-blue-2: light-dark(#78BEFF, #78BEFF);
-  --color-data-blue-1: light-dark(#DBECFF, #DBECFF);
-  --color-data-shamrock-5: light-dark(#0B603D, #0B603D);
-  --color-data-shamrock-4: light-dark(#138546, #138546);
-  --color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
-  --color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
-  --color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
-  --color-data-orange-5: light-dark(#A13F04, #A13F04);
-  --color-data-orange-4: light-dark(#D66100, #D66100);
-  --color-data-orange-3: light-dark(#FD9537, #FD9537);
-  --color-data-orange-2: light-dark(#FDB876, #FDB876);
-  --color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
-  --color-data-pink-5: light-dark(#8E1073, #8E1073);
-  --color-data-pink-4: light-dark(#D123A1, #D123A1);
-  --color-data-pink-3: light-dark(#F989D3, #F989D3);
-  --color-data-pink-2: light-dark(#FEADE3, #FEADE3);
-  --color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
-  --color-data-purple-5: light-dark(#3E0697, #3E0697);
-  --color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-purple-3: light-dark(#9081FF, #9081FF);
-  --color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
-  --color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
-  --color-data-red-5: light-dark(#9D0519, #9D0519);
-  --color-data-red-4: light-dark(#D31130, #D31130);
-  --color-data-red-3: light-dark(#FB7D87, #FB7D87);
-  --color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
-  --color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
-  --color-data-teal-5: light-dark(#08767D, #08767D);
-  --color-data-teal-4: light-dark(#0C9293, #0C9293);
-  --color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
-  --color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
-  --color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
-  --color-data-yellow-5: light-dark(#8A5001, #8A5001);
-  --color-data-yellow-4: light-dark(#D69804, #D69804);
-  --color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
-  --color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
-  --color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
-  --color-data-gray-5: light-dark(#25363F, #333338);
-  --color-data-gray-4: light-dark(#5D6C7B, #666A72);
-  --color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
-  --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
-  --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
-}
-}
-
 @layer astryx-theme {
   :root { color-scheme: light dark; }
   html[data-theme="light"] { color-scheme: light; }
@@ -302,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.e3c1cfd",
+  "version": "0.7.0-canary.e48e2ef",
   "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.e3c1cfd",
+    "@astryxdesign/core": "0.7.0-canary.e48e2ef",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.0-canary.e3c1cfd"
+    "@astryxdesign/cli": "0.7.0-canary.e48e2ef"
   },
   "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