@astryxdesign/theme-stone 0.7.0-canary.fe57f54 → 0.7.0

package/dist/source.js

@@ -133,6 +133,17 @@ var stoneTheme = (0, import_theme.defineTheme)({
       fallbacks: '"SF Mono", Monaco, Consolas, monospace'
     }
   },
+  // Touch + narrow (Mobile Type, Pin): floor base to the 16px floor and
+  // re-derive the ratio so Display 1 keeps its desktop size:
+  // ratio' = 1.25 * (14/16)^(1/6) ~= 1.2225. Body 14 -> 16px, display-1 stays 53px.
+  adaptations: {
+    rules: [
+      {
+        when: { pointer: "coarse", width: { below: "lg" } },
+        value: { typography: { scale: { base: 16, ratio: 1.2225 } } }
+      }
+    ]
+  },
   motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
   syntax: stoneSyntax,
   tokens: {

package/dist/source.mjs

@@ -135,6 +135,17 @@ var stoneTheme = defineTheme({
       fallbacks: '"SF Mono", Monaco, Consolas, monospace'
     }
   },
+  // Touch + narrow (Mobile Type, Pin): floor base to the 16px floor and
+  // re-derive the ratio so Display 1 keeps its desktop size:
+  // ratio' = 1.25 * (14/16)^(1/6) ~= 1.2225. Body 14 -> 16px, display-1 stays 53px.
+  adaptations: {
+    rules: [
+      {
+        when: { pointer: "coarse", width: { below: "lg" } },
+        value: { typography: { scale: { base: 16, ratio: 1.2225 } } }
+      }
+    ]
+  },
   motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
   syntax: stoneSyntax,
   tokens: {

package/dist/stone.js

@@ -521,7 +521,24 @@ export const stoneTheme = {
       "xl": 1280,
       "2xl": 1536
     },
-    "rules": []
+    "rules": [
+      {
+        "when": {
+          "pointer": "coarse",
+          "width": {
+            "below": "lg"
+          }
+        },
+        "value": {
+          "typography": {
+            "scale": {
+              "base": 16,
+              "ratio": 1.2225
+            }
+          }
+        }
+      }
+    ]
   },
   __axes: {
     "typography": {

package/dist/stoneTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,UAAU,yDAiVrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}
+{"version":3,"file":"stoneTheme.d.ts","sourceRoot":"","sources":["../src/stoneTheme.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,UAAU,yDA6VrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PhB,CAAC"}

package/dist/stoneTheme.test.d.ts

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

package/dist/stoneTheme.test.d.ts.map

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

package/dist/theme.css

@@ -649,6 +649,72 @@
 }
 }
 
+@layer astryx-theme {
+@media (width < 1024px) and (pointer: coarse) {
+  @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
+    :scope {
+    --font-size-4xs: 0.375rem;
+    --font-size-3xs: 0.4375rem;
+    --font-size-2xs: 0.5625rem;
+    --font-size-xs: 0.6875rem;
+    --font-size-sm: 0.8125rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.25rem;
+    --font-size-xl: 1.5rem;
+    --font-size-2xl: 1.8125rem;
+    --font-size-3xl: 2.25rem;
+    --font-size-4xl: 2.75rem;
+    --font-size-5xl: 3.3125rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-semibold);
+    --text-heading-1-leading: 1.3793;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-semibold);
+    --text-heading-2-leading: 1.3333;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-bold);
+    --text-heading-3-leading: 1.4;
+    --text-heading-4-size: var(--font-size-base);
+    --text-heading-4-weight: var(--font-weight-bold);
+    --text-heading-4-leading: 1.5;
+    --text-heading-5-size: var(--font-size-sm);
+    --text-heading-5-weight: var(--font-weight-semibold);
+    --text-heading-5-leading: 1.5385;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-semibold);
+    --text-heading-6-leading: 1.4545;
+    --text-body-size: var(--font-size-base);
+    --text-body-weight: var(--font-weight-normal);
+    --text-body-leading: 1.5;
+    --text-large-size: var(--font-size-lg);
+    --text-large-weight: var(--font-weight-semibold);
+    --text-large-leading: 1.4;
+    --text-label-size: var(--font-size-base);
+    --text-label-weight: var(--font-weight-medium);
+    --text-label-leading: 1.5;
+    --text-code-size: var(--font-size-base);
+    --text-code-weight: var(--font-weight-normal);
+    --text-code-leading: 1.5;
+    --text-supporting-size: var(--font-size-sm);
+    --text-supporting-weight: var(--font-weight-normal);
+    --text-supporting-leading: 1.5385;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.283;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.2727;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.2222;
+    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-heading: Montserrat, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
+  }
+  }
+}
+}
+
 @layer astryx-theme {
 @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
   [data-astryx-media="dark"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-stone",
-  "version": "0.7.0-canary.fe57f54",
+  "version": "0.7.0",
   "displayName": "Stone Theme",
   "private": false,
   "description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
@@ -57,11 +57,11 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.0-canary.fe57f54",
+    "@astryxdesign/core": "0.7.0",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.0-canary.fe57f54"
+    "@astryxdesign/cli": "0.7.0"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/src/stoneTheme.test.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {generateThemeCSS} from '@astryxdesign/core/theme';
+import {stoneTheme} from './stoneTheme';
+
+describe('stone touch + narrow type pin', () => {
+  it('floors body to 16px and holds Display 1 at its desktop size', () => {
+    const rule = stoneTheme.__adaptationRules?.[0];
+
+    expect(stoneTheme.__adaptations.rules).toHaveLength(1);
+    expect(rule?.when).toEqual({pointer: 'coarse', width: {below: 'lg'}});
+    expect(rule?.query).toBe('(width < 1024px) and (pointer: coarse)');
+    // Pinned ladder: base 16 (was 14), ratio 1.25 -> 1.2225, Display 1 pinned.
+    expect(rule?.tokens['--font-size-base']).toBe('1rem');
+    expect(rule?.tokens['--font-size-lg']).toBe('1.25rem');
+    expect(rule?.tokens['--font-size-5xl']).toBe('3.3125rem');
+    // Desktop scale is untouched.
+    expect(stoneTheme.tokens['--font-size-base']).toBe('0.875rem');
+    expect(stoneTheme.tokens['--font-size-5xl']).toBe('3.3125rem');
+    expect(generateThemeCSS(stoneTheme).component).toContain(
+      '@media (width < 1024px) and (pointer: coarse)',
+    );
+  });
+});

package/src/stoneTheme.ts

@@ -81,6 +81,18 @@ export const stoneTheme = defineTheme({
     },
   },
 
+  // Touch + narrow (Mobile Type, Pin): floor base to the 16px floor and
+  // re-derive the ratio so Display 1 keeps its desktop size:
+  // ratio' = 1.25 * (14/16)^(1/6) ~= 1.2225. Body 14 -> 16px, display-1 stays 53px.
+  adaptations: {
+    rules: [
+      {
+        when: {pointer: 'coarse', width: {below: 'lg'}},
+        value: {typography: {scale: {base: 16, ratio: 1.2225}}},
+      },
+    ],
+  },
+
   motion: {fast: 125, medium: 300, slow: 700, ratio: 0.75},
 
   syntax: stoneSyntax,