braid-design-system 32.1.0 → 32.2.0

package/dist/styles/lib/themes/makeVanillaTheme.mjs

@@ -12,13 +12,26 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     fontSize: tablet.fontSize,
     fontMetrics
   });
+  const mobileConfig = "lineGap" in mobile ? {
+    fontSize: mobile.fontSize,
+    lineGap: mobile.lineGap
+  } : {
+    fontSize: mobile.fontSize,
+    leading: mobile.rows * grid
+  };
+  const tabletConfig = "lineGap" in tablet ? {
+    fontSize: tablet.fontSize,
+    lineGap: tablet.lineGap
+  } : {
+    fontSize: tablet.fontSize,
+    leading: tablet.rows * grid
+  };
   const {
     fontSize: mobileFontSize,
     lineHeight: mobileLineHeight,
     ...mobileTrims
   } = precomputeValues({
-    fontSize: mobile.fontSize,
-    leading: mobile.rows * grid,
+    ...mobileConfig,
     fontMetrics
   });
   const {
@@ -26,8 +39,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     lineHeight: tabletLineHeight,
     ...tabletTrims
   } = precomputeValues({
-    fontSize: tablet.fontSize,
-    leading: tablet.rows * grid,
+    ...tabletConfig,
     fontMetrics
   });
   return {
@@ -53,8 +65,12 @@ const makeVanillaTheme = (braidTokens) => {
   const { name, displayName, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
+  const textSize = mapValues(
+    tokens.typography.text,
+    (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
+  );
   const getInlineFieldSize = (size) => {
-    const scale = typography.text[size].mobile.rows * tokens.grid / 42;
+    const scale = parseInt(textSize[size].mobile.lineHeight, 10) / 42;
     return px(tokens.grid * Math.round(tokens.touchableSize * scale));
   };
   const resolvedTokens = {
@@ -70,10 +86,7 @@ const makeVanillaTheme = (braidTokens) => {
     backgroundColor: background,
     fontFamily: typography.fontFamily,
     fontMetrics: mapValues(typography.fontMetrics, String),
-    textSize: mapValues(
-      tokens.typography.text,
-      (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
-    ),
+    textSize,
     textWeight: mapValues(typography.fontWeight, String),
     headingLevel: mapValues(
       tokens.typography.heading.level,
@@ -98,5 +111,5 @@ const makeVanillaTheme = (braidTokens) => {
   return resolvedTokens;
 };
 export {
-  makeVanillaTheme as m
+  makeVanillaTheme
 };

package/dist/styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs

@@ -1,9 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { t as tokens } from "./tokens.mjs";
-import { m as makeBraidTheme } from "../makeBraidTheme.mjs";
+import { tokens } from "./tokens.mjs";
+import { makeBraidTheme } from "../makeBraidTheme.mjs";
 setFileScope("src/lib/themes/seekBusiness/seekBusinessTheme.css.ts?used", "braid-design-system");
 const seekBusinessTheme_css = makeBraidTheme(tokens);
 endFileScope();
 export {
-  seekBusinessTheme_css as s
+  seekBusinessTheme_css
 };

package/dist/styles/lib/themes/seekBusiness/tokens.mjs

@@ -1,5 +1,5 @@
 import { lighten, darken, tint } from "polished";
-import { p as palette, m as makeTokens } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { makeTokens, palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
 const brandAccent = palette.seekBlue["500"];
 const tokens = makeTokens({
   name: "seekBusiness",
@@ -14,5 +14,5 @@ const tokens = makeTokens({
   brandAccentSoftHover: tint(0.9, brandAccent)
 });
 export {
-  tokens as t
+  tokens
 };

package/dist/styles/lib/themes/vars.css.mjs

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createThemeContract } from "@vanilla-extract/css";
-import { m as makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { t as tokens } from "./docs/tokens.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+import { tokens } from "./docs/tokens.mjs";
 setFileScope("src/lib/themes/vars.css.ts?used", "braid-design-system");
 const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();
 export {
-  vars as v
+  vars
 };

package/dist/styles/lib/themes/wireframe/tokens.cjs

@@ -1,6 +1,10 @@
 "use strict";
+const courierNewMetrics = require("@capsizecss/metrics/courierNew.js");
 const polished = require("polished");
+const sideEffects_lib_themes_tokenType_cjs = require("../../../../side-effects/lib/themes/tokenType.cjs");
 const styles_lib_utils_index_cjs = require("../../utils/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const courierNewMetrics__default = /* @__PURE__ */ _interopDefaultCompat(courierNewMetrics);
 const formAccent = "#767676";
 const critical = "#ef3e4a";
 const criticalLightBackground = "#fbe9eb";
@@ -38,19 +42,9 @@ const tokens = {
   name: "wireframe",
   displayName: "Wireframe",
   typography: {
-    fontFamily: "Courier, monospace",
+    fontFamily: '"Courier New", monospace',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1186,
-      // 1544 from fontkit, but should be 1186 according to fontforge
-      ascent: 1638,
-      // 1544 from fontkit, but should be 1638 according to general metrics table
-      descent: -410,
-      // -504 from fontkit, but should be -410 according to general metrics table
-      lineGap: 184,
-      // 0 from fontkit, but should be 184 according to os/2 metrics table
-      unitsPerEm: 2048
-    },
+    fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(courierNewMetrics__default.default),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -65,41 +59,41 @@ const tokens = {
         "1": {
           mobile: {
             fontSize: 28,
-            rows: 9
+            lineGap: 22
           },
           tablet: {
             fontSize: 42,
-            rows: 11
+            lineGap: 22
           }
         },
         "2": {
           mobile: {
             fontSize: 21,
-            rows: 8
+            lineGap: 20
           },
           tablet: {
             fontSize: 28,
-            rows: 9
+            lineGap: 20
           }
         },
         "3": {
           mobile: {
             fontSize: 21,
-            rows: 7
+            lineGap: 18
           },
           tablet: {
             fontSize: 21,
-            rows: 7
+            lineGap: 18
           }
         },
         "4": {
           mobile: {
             fontSize: 18,
-            rows: 7
+            lineGap: 16
           },
           tablet: {
             fontSize: 18,
-            rows: 7
+            lineGap: 16
           }
         }
       }
@@ -108,41 +102,41 @@ const tokens = {
       xsmall: {
         mobile: {
           fontSize: 12,
-          rows: 5
+          lineGap: 11
         },
         tablet: {
           fontSize: 12,
-          rows: 5
+          lineGap: 11
         }
       },
       small: {
         mobile: {
           fontSize: 14,
-          rows: 5
+          lineGap: 12
         },
         tablet: {
           fontSize: 14,
-          rows: 5
+          lineGap: 12
         }
       },
       standard: {
         mobile: {
           fontSize: 16,
-          rows: 7
+          lineGap: 14
         },
         tablet: {
           fontSize: 16,
-          rows: 7
+          lineGap: 14
         }
       },
       large: {
         mobile: {
           fontSize: 18,
-          rows: 8
+          lineGap: 16
         },
         tablet: {
           fontSize: 18,
-          rows: 8
+          lineGap: 16
         }
       }
     }
@@ -163,7 +157,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 12,
-    xxlarge: 24
+    xxlarge: 24,
+    xxxlarge: 30
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -174,6 +169,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "10px"

package/dist/styles/lib/themes/wireframe/tokens.mjs

@@ -1,5 +1,7 @@
+import courierNewMetrics from "@capsizecss/metrics/courierNew.js";
 import { lighten, tint, darken } from "polished";
-import { g as getLightVariant, f as findClosestAccessibleLighterColor, a as getAccessibleVariant, i as isLight } from "../../utils/index.mjs";
+import { extractFontMetricsForTheme } from "../../../../side-effects/lib/themes/tokenType.mjs";
+import { getLightVariant, findClosestAccessibleLighterColor, getAccessibleVariant, isLight } from "../../utils/index.mjs";
 const formAccent = "#767676";
 const critical = "#ef3e4a";
 const criticalLightBackground = "#fbe9eb";
@@ -37,19 +39,9 @@ const tokens = {
   name: "wireframe",
   displayName: "Wireframe",
   typography: {
-    fontFamily: "Courier, monospace",
+    fontFamily: '"Courier New", monospace',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1186,
-      // 1544 from fontkit, but should be 1186 according to fontforge
-      ascent: 1638,
-      // 1544 from fontkit, but should be 1638 according to general metrics table
-      descent: -410,
-      // -504 from fontkit, but should be -410 according to general metrics table
-      lineGap: 184,
-      // 0 from fontkit, but should be 184 according to os/2 metrics table
-      unitsPerEm: 2048
-    },
+    fontMetrics: extractFontMetricsForTheme(courierNewMetrics),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -64,41 +56,41 @@ const tokens = {
         "1": {
           mobile: {
             fontSize: 28,
-            rows: 9
+            lineGap: 22
           },
           tablet: {
             fontSize: 42,
-            rows: 11
+            lineGap: 22
           }
         },
         "2": {
           mobile: {
             fontSize: 21,
-            rows: 8
+            lineGap: 20
           },
           tablet: {
             fontSize: 28,
-            rows: 9
+            lineGap: 20
           }
         },
         "3": {
           mobile: {
             fontSize: 21,
-            rows: 7
+            lineGap: 18
           },
           tablet: {
             fontSize: 21,
-            rows: 7
+            lineGap: 18
           }
         },
         "4": {
           mobile: {
             fontSize: 18,
-            rows: 7
+            lineGap: 16
           },
           tablet: {
             fontSize: 18,
-            rows: 7
+            lineGap: 16
           }
         }
       }
@@ -107,41 +99,41 @@ const tokens = {
       xsmall: {
         mobile: {
           fontSize: 12,
-          rows: 5
+          lineGap: 11
         },
         tablet: {
           fontSize: 12,
-          rows: 5
+          lineGap: 11
         }
       },
       small: {
         mobile: {
           fontSize: 14,
-          rows: 5
+          lineGap: 12
         },
         tablet: {
           fontSize: 14,
-          rows: 5
+          lineGap: 12
         }
       },
       standard: {
         mobile: {
           fontSize: 16,
-          rows: 7
+          lineGap: 14
         },
         tablet: {
           fontSize: 16,
-          rows: 7
+          lineGap: 14
         }
       },
       large: {
         mobile: {
           fontSize: 18,
-          rows: 8
+          lineGap: 16
         },
         tablet: {
           fontSize: 18,
-          rows: 8
+          lineGap: 16
         }
       }
     }
@@ -162,7 +154,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 12,
-    xxlarge: 24
+    xxlarge: 24,
+    xxxlarge: 30
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -173,6 +166,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "10px"
@@ -280,5 +274,5 @@ const tokens = {
   }
 };
 export {
-  tokens as t
+  tokens
 };

package/dist/styles/lib/themes/wireframe/wireframeTheme.css.mjs

@@ -1,9 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { t as tokens } from "./tokens.mjs";
-import { m as makeBraidTheme } from "../makeBraidTheme.mjs";
+import { tokens } from "./tokens.mjs";
+import { makeBraidTheme } from "../makeBraidTheme.mjs";
 setFileScope("src/lib/themes/wireframe/wireframeTheme.css.ts?used", "braid-design-system");
 const wireframe = makeBraidTheme(tokens);
 endFileScope();
 export {
-  wireframe as w
+  wireframe
 };

package/dist/styles/lib/utils/index.mjs

@@ -1,6 +1,6 @@
 import { parseToRgb, toColorString, parseToHsl, hslToColorString, setLightness, getLuminance } from "polished";
 import { parse } from "gradient-parser";
-import { r as responsiveStyle } from "../css/responsiveStyle.mjs";
+import { responsiveStyle } from "../css/responsiveStyle.mjs";
 const getLinearGradientColors = (color) => {
   const gradients = parse(color);
   return gradients[0].colorStops.map(({ type, value }) => {
@@ -147,9 +147,9 @@ const mapToProperty = (property, breakpoint) => (value) => {
   return breakpoint ? responsiveStyle({ [breakpoint]: styleRule }) : styleRule;
 };
 export {
-  getAccessibleVariant as a,
-  findClosestAccessibleLighterColor as f,
-  getLightVariant as g,
-  isLight as i,
-  mapToProperty as m
+  findClosestAccessibleLighterColor,
+  getAccessibleVariant,
+  getLightVariant,
+  isLight,
+  mapToProperty
 };