@tempoxyz/ds 0.3.4 → 0.3.5

package/package.json

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

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

@@ -567,50 +567,51 @@ 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',
         },
       },