@tempoxyz/ds 0.3.2 → 0.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/README.md

@@ -37,7 +37,7 @@ export default defineConfig({
 
 The scales hold the `neutral` and `accent` colors, such as `neutral.shade.040` and `accent.blue.background`, and the `spacing` steps, so spacing `'24'` is `1.5rem`. Tokens named for their role derive from them, such as `content.primary`, `container.regular`, `line.primary`, `radius.xs`, and `borderWidth.thin`. Light and dark values follow the inherited `color-scheme`. [`vars.ts`](./vars.ts) lists every value.
 
-Typography sets bundle a family, size, weight, tracking, and leading, such as `body.b2`, `heading.h1`, and `mono.m1`. The plugin emits the bundled Inter, Pilat, and JetBrains Mono faces, so only the HB Set display face falls back, to Pilat.
+Typography sets bundle a family, size, weight, tracking, and leading, such as `body.b2`, `heading.h1`, and `mono.m1`. The plugin emits the bundled Inter, Pilat, and JetBrains Mono faces, which every set uses.
 
 An app that needs tokens of its own extends `variables` in its own Zyzz config, and applies that config's `vars()` class beside the library's.
 

package/src/web/components/AppShell.tsx

@@ -460,6 +460,7 @@ namespace styles {
     {
       alignItems: 'center',
       backgroundColor: 'inverse.background.secondary',
+      border: 'none !custom',
       borderRadius: 'full',
       boxShadow: 'large',
       boxSizing: 'border-box',
@@ -876,6 +877,9 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
+        appearance: 'none !custom',
+        backgroundColor: 'transparent !custom',
+        border: 'none !custom',
         borderRadius: 'full',
         boxSizing: 'border-box',
         color: 'content.secondary',
@@ -883,6 +887,7 @@ namespace styles {
         cursor: 'pointer',
         display: 'flex',
         flex: '1 !custom',
+        font: 'inherit !custom',
         height: '100% !custom',
         justifyContent: 'center',
         minWidth: '0',

package/src/web/vars.ts

@@ -192,9 +192,9 @@ export const variables = Vars.define(
       snappy: 'cubic-bezier(0.23, 1, 0.32, 1)',
       spring: 'cubic-bezier(0.32, 0.72, 0, 1)',
     },
-    // The Platform text styles set copy in Inter, titles and values in Pilat, the second display
-    // size in HB Set, and code in JetBrains Mono. The Web contracts ship Inter, Pilat, and JetBrains
-    // Mono, so only HB Set falls back, to Pilat.
+    // The Platform text styles set copy in Inter, titles, display copy, and values in Pilat, and code
+    // in JetBrains Mono. The Web contracts ship all three. The `display` stack keeps HB Set, which
+    // falls back to Pilat, for callers that still name it.
     fontFamily: {
       body: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
       display:
@@ -567,54 +567,55 @@ export const variables = Vars.define(
         xs: vars.spacing['24'],
       },
     },
-    // Figma's percentage tracking is converted to px. The `utility` styles are uppercase in Figma,
-    // which a component applies with `textTransform`.
+    // Figma's percentage tracking is converted to px. Body tracking instead follows Inter's dynamic
+    // metrics, -0.0223 + 0.185 * e^(-0.1745 * size) em, rounded to 0.01px. The `utility` styles are
+    // uppercase in Figma, which a component applies with `textTransform`.
     typography: {
       body: {
         b1: {
           fontFamily: vars.fontFamily.body,
           fontSize: '16px',
           fontWeight: 400,
-          letterSpacing: '.12px',
+          letterSpacing: '-.18px',
           lineHeight: '22px',
         },
         b1Strong: {
           fontFamily: vars.fontFamily.body,
           fontSize: '16px',
           fontWeight: 500,
-          letterSpacing: '.12px',
+          letterSpacing: '-.18px',
           lineHeight: '22px',
         },
         b2: {
           fontFamily: vars.fontFamily.body,
           fontSize: '14px',
           fontWeight: 400,
-          letterSpacing: '.14px',
+          letterSpacing: '-.09px',
           lineHeight: '20px',
         },
         b2Strong: {
           fontFamily: vars.fontFamily.body,
           fontSize: '14px',
           fontWeight: 500,
-          letterSpacing: '.14px',
+          letterSpacing: '-.09px',
           lineHeight: '20px',
         },
         b3: {
           fontFamily: vars.fontFamily.body,
           fontSize: '12px',
           fontWeight: 400,
-          letterSpacing: '.15px',
+          letterSpacing: '.01px',
           lineHeight: '16px',
         },
         b3Strong: {
           fontFamily: vars.fontFamily.body,
           fontSize: '12px',
           fontWeight: 500,
-          letterSpacing: '.15px',
+          letterSpacing: '.01px',
           lineHeight: '16px',
         },
       },
-      // Pilat Light and HB Set Light are weight 300.
+      // Pilat Light is weight 300, and Pilat Regular is 400.
       display: {
         d1: {
           fontFamily: vars.fontFamily.heading,
@@ -624,9 +625,9 @@ export const variables = Vars.define(
           lineHeight: '41.8px',
         },
         d2: {
-          fontFamily: vars.fontFamily.display,
+          fontFamily: vars.fontFamily.heading,
           fontSize: '36px',
-          fontWeight: 300,
+          fontWeight: 400,
           letterSpacing: '-1.44px',
           lineHeight: '34.2px',
         },