@astryxdesign/theme-neutral 0.7.0-canary.e92e36f → 0.7.0-canary.eaca8eb

package/dist/neutral.js

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

package/dist/neutralTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAqEA,eAAO,MAAM,YAAY,yDA2YvB,CAAC"}
+{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAqEA,eAAO,MAAM,YAAY,yDAuZvB,CAAC"}

package/dist/source.js

@@ -190,6 +190,17 @@ var neutralTheme = (0, import_theme.defineTheme)({
       fallbacks: '"SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", 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.2 * (14/16)^(1/6) ~= 1.1736. Body 14 -> 16px, display-1 stays 42px.
+  adaptations: {
+    rules: [
+      {
+        when: { pointer: "coarse", width: { below: "lg" } },
+        value: { typography: { scale: { base: 16, ratio: 1.1736 } } }
+      }
+    ]
+  },
   // Motion: snappier than default to match shadcn/Tailwind conventions.
   // Produces: fast-min=95ms, fast=125ms, fast-max=165ms,
   //           medium-min=225ms, medium=300ms, medium-max=400ms.

package/dist/source.mjs

@@ -195,6 +195,17 @@ var neutralTheme = defineTheme({
       fallbacks: '"SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", 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.2 * (14/16)^(1/6) ~= 1.1736. Body 14 -> 16px, display-1 stays 42px.
+  adaptations: {
+    rules: [
+      {
+        when: { pointer: "coarse", width: { below: "lg" } },
+        value: { typography: { scale: { base: 16, ratio: 1.1736 } } }
+      }
+    ]
+  },
   // Motion: snappier than default to match shadcn/Tailwind conventions.
   // Produces: fast-min=95ms, fast=125ms, fast-max=165ms,
   //           medium-min=225ms, medium=300ms, medium-max=400ms.

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="neutral"]) 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; }
@@ -697,6 +638,72 @@
 }
 }
 
+@layer astryx-theme {
+@media (width < 1024px) and (pointer: coarse) {
+  @scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
+    :scope {
+    --font-size-4xs: 0.4375rem;
+    --font-size-3xs: 0.5rem;
+    --font-size-2xs: 0.625rem;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.1875rem;
+    --font-size-xl: 1.375rem;
+    --font-size-2xl: 1.625rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 2.625rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-semibold);
+    --text-heading-1-leading: 1.3846;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-semibold);
+    --text-heading-2-leading: 1.4545;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-bold);
+    --text-heading-3-leading: 1.4737;
+    --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.4286;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-semibold);
+    --text-heading-6-leading: 1.6667;
+    --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.4737;
+    --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.4286;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.2381;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.2222;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.4667;
+    --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+  }
+}
+}
+
 @layer astryx-theme {
 @scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
   [data-astryx-media="dark"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.7.0-canary.e92e36f",
+  "version": "0.7.0-canary.eaca8eb",
   "displayName": "Neutral Theme",
   "private": false,
   "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
@@ -58,11 +58,11 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.0-canary.e92e36f",
+    "@astryxdesign/core": "0.7.0-canary.eaca8eb",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.0-canary.e92e36f"
+    "@astryxdesign/cli": "0.7.0-canary.eaca8eb"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/src/neutralTheme.test.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, expect, it} from 'vitest';
+import {generateThemeCSS} from '@astryxdesign/core/theme';
 import {neutralPalettes} from './neutralPalettes';
 import {neutralTheme} from './neutralTheme';
 
@@ -407,3 +408,23 @@ describe('neutral theme component overrides', () => {
     });
   });
 });
+
+describe('neutral touch + narrow type pin', () => {
+  it('floors body to 16px and holds Display 1 at its desktop size', () => {
+    const rule = neutralTheme.__adaptationRules?.[0];
+
+    expect(neutralTheme.__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.2 -> 1.1736, Display 1 pinned.
+    expect(rule?.tokens['--font-size-base']).toBe('1rem');
+    expect(rule?.tokens['--font-size-lg']).toBe('1.1875rem');
+    expect(rule?.tokens['--font-size-5xl']).toBe('2.625rem');
+    // Desktop scale is untouched.
+    expect(neutralTheme.tokens['--font-size-base']).toBe('0.875rem');
+    expect(neutralTheme.tokens['--font-size-5xl']).toBe('2.625rem');
+    expect(generateThemeCSS(neutralTheme).component).toContain(
+      '@media (width < 1024px) and (pointer: coarse)',
+    );
+  });
+});

package/src/neutralTheme.ts

@@ -95,6 +95,18 @@ export const neutralTheme = 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.2 * (14/16)^(1/6) ~= 1.1736. Body 14 -> 16px, display-1 stays 42px.
+  adaptations: {
+    rules: [
+      {
+        when: {pointer: 'coarse', width: {below: 'lg'}},
+        value: {typography: {scale: {base: 16, ratio: 1.1736}}},
+      },
+    ],
+  },
+
   // Motion: snappier than default to match shadcn/Tailwind conventions.
   // Produces: fast-min=95ms, fast=125ms, fast-max=165ms,
   //           medium-min=225ms, medium=300ms, medium-max=400ms.