braid-design-system 32.1.1 → 32.3.0

package/dist/styles/lib/css/typography.css.mjs

@@ -157,21 +157,6 @@ const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiv
   tablet: makeTouchableSpacing(vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
 endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  darkModeNeutralOverride,
-  darkModeTone,
-  fontFamily,
-  fontWeight,
-  heading,
-  headingWeight,
-  lightModeNeutralOverride,
-  lightModeTone,
-  textSizeTrimmed,
-  textSizeUntrimmed,
-  tone,
-  touchableText
-}, Symbol.toStringTag, { value: "Module" }));
 export {
   darkModeNeutralOverride,
   darkModeTone,
@@ -181,7 +166,7 @@ export {
   headingWeight,
   lightModeNeutralOverride,
   lightModeTone,
-  styles,
+  textSizeTrimmed,
   textSizeUntrimmed,
   tone,
   touchableText

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

@@ -1,6 +1,10 @@
 "use strict";
+const appleSystemMetrics = require("@capsizecss/metrics/appleSystem.js");
 const polished = require("polished");
 const sideEffects_lib_themes_baseTokens_apac_cjs = require("../../../../side-effects/lib/themes/baseTokens/apac.cjs");
+const sideEffects_lib_themes_tokenType_cjs = require("../../../../side-effects/lib/themes/tokenType.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const appleSystemMetrics__default = /* @__PURE__ */ _interopDefaultCompat(appleSystemMetrics);
 const brandAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["900"];
 const formAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["600"];
 const focus = polished.rgba("#1e90ff", 0.7);
@@ -15,13 +19,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(appleSystemMetrics__default.default),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -134,7 +132,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -145,6 +144,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"

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

@@ -1,5 +1,7 @@
+import appleSystemMetrics from "@capsizecss/metrics/appleSystem.js";
 import { rgba, darken, lighten } from "polished";
 import { palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { extractFontMetricsForTheme } from "../../../../side-effects/lib/themes/tokenType.mjs";
 const brandAccent = palette.grey["900"];
 const formAccent = palette.indigo["600"];
 const focus = rgba("#1e90ff", 0.7);
@@ -14,13 +16,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: extractFontMetricsForTheme(appleSystemMetrics),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -133,7 +129,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -144,6 +141,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"

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

@@ -15,13 +15,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
   } = vanillaExtract.precomputeValues({
-    fontSize: mobile.fontSize,
-    leading: mobile.rows * grid,
+    ...mobileConfig,
     fontMetrics
   });
   const {
@@ -29,8 +42,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     lineHeight: tabletLineHeight,
     ...tabletTrims
   } = vanillaExtract.precomputeValues({
-    fontSize: tablet.fontSize,
-    leading: tablet.rows * grid,
+    ...tabletConfig,
     fontMetrics
   });
   return {
@@ -56,8 +68,12 @@ const makeVanillaTheme = (braidTokens) => {
   const { name, displayName, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
+  const textSize = mapValues__default.default(
+    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 = {
@@ -73,10 +89,7 @@ const makeVanillaTheme = (braidTokens) => {
     backgroundColor: background,
     fontFamily: typography.fontFamily,
     fontMetrics: mapValues__default.default(typography.fontMetrics, String),
-    textSize: mapValues__default.default(
-      tokens.typography.text,
-      (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
-    ),
+    textSize,
     textWeight: mapValues__default.default(typography.fontWeight, String),
     headingLevel: mapValues__default.default(
       tokens.typography.heading.level,

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,

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,4 +1,6 @@
+import courierNewMetrics from "@capsizecss/metrics/courierNew.js";
 import { lighten, tint, darken } from "polished";
+import { extractFontMetricsForTheme } from "../../../../side-effects/lib/themes/tokenType.mjs";
 import { getLightVariant, findClosestAccessibleLighterColor, getAccessibleVariant, isLight } from "../../utils/index.mjs";
 const formAccent = "#767676";
 const critical = "#ef3e4a";
@@ -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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.1.1",
+  "version": "32.3.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -119,7 +119,8 @@
     "themes/wireframe"
   ],
   "dependencies": {
-    "@capsizecss/core": "^3.0.0",
+    "@capsizecss/core": "^3.1.0",
+    "@capsizecss/metrics": "^1.1.1",
     "@capsizecss/vanilla-extract": "^1.0.0",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/dedent": "^0.7.0",
@@ -182,7 +183,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "11.7.2",
+    "sku": "11.8.1",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },

package/dist/styles/lib/components/Badge/Badge.css.cjs

@@ -1,27 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
-const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-fileScope.setFileScope("src/lib/components/Badge/Badge.css.ts?used", "braid-design-system");
-const constants = {
-  textSize: "xsmall"
-};
-const stylesForBreakpoint = (breakpoint) => {
-  const {
-    lineHeight,
-    capHeight
-  } = styles_lib_themes_vars_css_cjs.vars.textSize[constants.textSize][breakpoint];
-  const padding = cssUtils.calc.subtract(lineHeight, capHeight);
-  return {
-    margin: `${cssUtils.calc(padding).divide(2).negate()} 0`
-  };
-};
-const bleedY = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-  mobile: stylesForBreakpoint("mobile"),
-  tablet: stylesForBreakpoint("tablet")
-}), "bleedY");
-fileScope.endFileScope();
-exports.bleedY = bleedY;
-exports.constants = constants;

package/dist/styles/lib/components/Badge/Badge.css.mjs

@@ -1,28 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
-import { responsiveStyle } from "../../css/responsiveStyle.mjs";
-import { vars } from "../../themes/vars.css.mjs";
-setFileScope("src/lib/components/Badge/Badge.css.ts?used", "braid-design-system");
-const constants = {
-  textSize: "xsmall"
-};
-const stylesForBreakpoint = (breakpoint) => {
-  const {
-    lineHeight,
-    capHeight
-  } = vars.textSize[constants.textSize][breakpoint];
-  const padding = calc.subtract(lineHeight, capHeight);
-  return {
-    margin: `${calc(padding).divide(2).negate()} 0`
-  };
-};
-const bleedY = style(responsiveStyle({
-  mobile: stylesForBreakpoint("mobile"),
-  tablet: stylesForBreakpoint("tablet")
-}), "bleedY");
-endFileScope();
-export {
-  bleedY,
-  constants
-};