braid-design-system 32.1.1 → 32.2.0

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.2.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",

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
-};