braid-design-system 32.2.0 → 32.3.1

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

@@ -0,0 +1,30 @@
+"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/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
+const menuItemCapHeight = css.createVar("menuItemCapHeight");
+const crop = css.createVar("crop");
+const checkboxSize = css.style([styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.mobile.capHeight,
+      [crop]: cssUtils.calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+fileScope.endFileScope();
+exports.checkboxSize = checkboxSize;

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

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, 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/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = vars.inlineFieldSize.small;
+const menuItemCapHeight = createVar("menuItemCapHeight");
+const crop = createVar("crop");
+const checkboxSize = style([responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.mobile.capHeight,
+      [crop]: calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+endFileScope();
+export {
+  checkboxSize
+};

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

@@ -10,6 +10,7 @@ const styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_c
 fileScope.setFileScope("src/lib/components/Stepper/Stepper.css.ts?used", "braid-design-system");
 const baseColourVar = css.createVar("baseColourVar");
 const highlightVar = css.createVar("highlightVar");
+const stepIndicatorSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
 const tone = {
   formAccent: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
     lightMode: {
@@ -54,8 +55,8 @@ const step = css.style({
 const indicator = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
   display: "block"
 }), {
-  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
+  height: stepIndicatorSize,
+  width: stepIndicatorSize,
   color: baseColourVar
 }], "indicator");
 const stretch = css.style({
@@ -114,13 +115,13 @@ const dotSize = 2;
 const progressTrack = css.style({
   background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
   height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
-  width: `${cssUtils.calc("100%").subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
-  top: `${cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
-  left: `${cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
+  width: `${cssUtils.calc("100%").subtract(stepIndicatorSize).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
+  top: `${cssUtils.calc(stepIndicatorSize).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
+  left: `${cssUtils.calc(stepIndicatorSize).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
 }, "progressTrack");
 const progressTrackCentered = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
   tablet: {
-    left: `${cssUtils.calc("50%").add(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
+    left: `${cssUtils.calc("50%").add(cssUtils.calc(stepIndicatorSize).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
   }
 }), "progressTrackCentered");
 const progressLine = css.style({
@@ -131,7 +132,7 @@ const progressUnfilled = css.style({
   transform: "translateX(-101%)"
 }, "progressUnfilled");
 const indicatorContainer = css.style({
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
+  width: stepIndicatorSize,
   selectors: {
     [`${step}:active &`]: {
       transform: styles_lib_themes_vars_css_cjs.vars.transform.touchable

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

@@ -9,6 +9,7 @@ import { hideFocusRingsDataAttribute } from "../private/hideFocusRings/hideFocus
 setFileScope("src/lib/components/Stepper/Stepper.css.ts?used", "braid-design-system");
 const baseColourVar = createVar("baseColourVar");
 const highlightVar = createVar("highlightVar");
+const stepIndicatorSize = vars.inlineFieldSize.small;
 const tone = {
   formAccent: style(colorModeStyle({
     lightMode: {
@@ -53,8 +54,8 @@ const step = style({
 const indicator = style([atoms({
   display: "block"
 }), {
-  height: vars.inlineFieldSize.standard,
-  width: vars.inlineFieldSize.standard,
+  height: stepIndicatorSize,
+  width: stepIndicatorSize,
   color: baseColourVar
 }], "indicator");
 const stretch = style({
@@ -113,13 +114,13 @@ const dotSize = 2;
 const progressTrack = style({
   background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
   height: vars.borderWidth.large,
-  width: `${calc("100%").subtract(vars.inlineFieldSize.standard).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
-  top: `${calc(vars.inlineFieldSize.standard).subtract(vars.borderWidth.large).divide(2)}`,
-  left: `${calc(vars.inlineFieldSize.standard).add(vars.space[progressBarGap])}`
+  width: `${calc("100%").subtract(stepIndicatorSize).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
+  top: `${calc(stepIndicatorSize).subtract(vars.borderWidth.large).divide(2)}`,
+  left: `${calc(stepIndicatorSize).add(vars.space[progressBarGap])}`
 }, "progressTrack");
 const progressTrackCentered = style(responsiveStyle({
   tablet: {
-    left: `${calc("50%").add(calc(vars.inlineFieldSize.standard).divide(2)).add(vars.space[progressBarGap])}`
+    left: `${calc("50%").add(calc(stepIndicatorSize).divide(2)).add(vars.space[progressBarGap])}`
   }
 }), "progressTrackCentered");
 const progressLine = style({
@@ -130,7 +131,7 @@ const progressUnfilled = style({
   transform: "translateX(-101%)"
 }, "progressUnfilled");
 const indicatorContainer = style({
-  width: vars.inlineFieldSize.standard,
+  width: stepIndicatorSize,
   selectors: {
     [`${step}:active &`]: {
       transform: vars.transform.touchable

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.cjs

@@ -1,11 +1,39 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
+const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
+const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
-const space = 2;
-const root = css.style({
-  padding: space,
-  margin: -space
-}, "root");
+const space = "2px";
+const root = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
+  borderRadius: "small"
+}), {
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
+  textDecoration: "underline",
+  textDecorationStyle: "wavy",
+  textDecorationSkipInk: "none",
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
+}], "root");
+const critical = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.critical,
+    background: styles_lib_themes_vars_css_cjs.vars.backgroundColor.criticalLight
+  },
+  darkMode: {
+    textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.criticalLight
+  }
+}), "critical");
+const caution = css.style([{
+  textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.caution
+}, styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    background: styles_lib_themes_vars_css_cjs.vars.backgroundColor.cautionLight
+  }
+})], "caution");
 fileScope.endFileScope();
+exports.caution = caution;
+exports.critical = critical;
 exports.root = root;

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.mjs

@@ -1,12 +1,40 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
+import { atoms } from "../../../css/atoms/atoms.mjs";
+import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
+import { vars } from "../../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
-const space = 2;
-const root = style({
-  padding: space,
-  margin: -space
-}, "root");
+const space = "2px";
+const root = style([atoms({
+  borderRadius: "small"
+}), {
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
+  textDecoration: "underline",
+  textDecorationStyle: "wavy",
+  textDecorationSkipInk: "none",
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
+}], "root");
+const critical = style(colorModeStyle({
+  lightMode: {
+    textDecorationColor: vars.borderColor.critical,
+    background: vars.backgroundColor.criticalLight
+  },
+  darkMode: {
+    textDecorationColor: vars.borderColor.criticalLight
+  }
+}), "critical");
+const caution = style([{
+  textDecorationColor: vars.borderColor.caution
+}, colorModeStyle({
+  lightMode: {
+    background: vars.backgroundColor.cautionLight
+  }
+})], "caution");
 endFileScope();
 export {
+  caution,
+  critical,
   root
 };

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

@@ -8,9 +8,6 @@ const constants = {
   maxWidth: "260px",
   arrowSize: "12px"
 };
-const background = css.style({
-  background: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutral
-}, "background");
 const maxWidth = css.style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
@@ -58,7 +55,6 @@ const arrow = css.style({
 }, "arrow");
 fileScope.endFileScope();
 exports.arrow = arrow;
-exports.background = background;
 exports.maxWidth = maxWidth;
 exports.translateZ0 = translateZ0;
 exports.verticalOffsetBeforeEntrance = verticalOffsetBeforeEntrance;

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

@@ -7,9 +7,6 @@ const constants = {
   maxWidth: "260px",
   arrowSize: "12px"
 };
-const background = style({
-  background: vars.foregroundColor.neutral
-}, "background");
 const maxWidth = style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
@@ -58,7 +55,6 @@ const arrow = style({
 endFileScope();
 export {
   arrow,
-  background,
   maxWidth,
   translateZ0,
   verticalOffsetBeforeEntrance

package/dist/styles/lib/components/private/InlineField/InlineField.css.cjs

@@ -5,48 +5,48 @@ const cssUtils = require("@vanilla-extract/css-utils");
 const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 const styles_lib_components_private_touchable_hitArea_cjs = require("../touchable/hitArea.cjs");
 const styles_lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
+const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = css.style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = css.createVar("fieldSize");
+const labelCapHeight = css.createVar("labelCapHeight");
+const sizeVars = css.styleVariants(sizes, (size) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = css.style([{
   width: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
-  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea
+  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
-const realFieldPosition = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = css.style({}, "fakeField");
-const fakeFieldSize = css.styleVariants(sizes, (size) => ({
-  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = css.styleVariants(sizes, (size) => ({
-  paddingTop: cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = css.style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = css.style({
+  paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = css.style({}, "isMixed");
 const children = css.style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,17 +99,14 @@ const radioScale = css.style({
 }, "radioScale");
 const radioIndicator = [indicator, radioScale];
 fileScope.endFileScope();
-exports.badgeOffset = badgeOffset;
 exports.checkboxIndicator = checkboxIndicator;
 exports.children = children;
 exports.fakeField = fakeField;
-exports.fakeFieldSize = fakeFieldSize;
 exports.focusOverlay = focusOverlay;
 exports.hoverOverlay = hoverOverlay;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;
 exports.radioIndicator = radioIndicator;
 exports.realField = realField;
-exports.realFieldPosition = realFieldPosition;
-exports.root = root;
 exports.selected = selected;
+exports.sizeVars = sizeVars;

package/dist/styles/lib/components/private/InlineField/InlineField.css.mjs

@@ -1,51 +1,51 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { createVar, styleVariants, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../../themes/vars.css.mjs";
 import { hitArea } from "../touchable/hitArea.mjs";
 import { debugTouchable } from "../touchable/debugTouchable.mjs";
+import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
 setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = createVar("fieldSize");
+const labelCapHeight = createVar("labelCapHeight");
+const sizeVars = styleVariants(sizes, (size) => responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: vars.inlineFieldSize[size],
+      [labelCapHeight]: vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = calc(hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = style([{
   width: hitArea,
-  height: hitArea
+  height: hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, debugTouchable()], "realField");
-const realFieldPosition = styleVariants(sizes, (size) => {
-  const offset = calc(hitArea).subtract(vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = style({}, "fakeField");
-const fakeFieldSize = styleVariants(sizes, (size) => ({
-  height: vars.inlineFieldSize[size],
-  width: vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = styleVariants(sizes, (size) => {
-  const offset = calc(vars.inlineFieldSize[size]).subtract(vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = styleVariants(sizes, (size) => ({
-  paddingTop: calc(vars.inlineFieldSize[size]).subtract(vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = style({
+  paddingTop: calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = style({}, "isMixed");
 const children = style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,18 +99,15 @@ const radioScale = style({
 const radioIndicator = [indicator, radioScale];
 endFileScope();
 export {
-  badgeOffset,
   checkboxIndicator,
   children,
   fakeField,
-  fakeFieldSize,
   focusOverlay,
   hoverOverlay,
   isMixed,
   labelOffset,
   radioIndicator,
   realField,
-  realFieldPosition,
-  root,
-  selected
+  selected,
+  sizeVars
 };

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -10,6 +10,8 @@ const space = {
 };
 const boxShadow = {
   ...styles_lib_themes_vars_css_cjs.vars.shadow,
+  borderBrandAccent: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
+  borderBrandAccentLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
   borderBrandAccentLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
   borderBrandAccentLightLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
   borderCaution: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.caution}`,

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -9,6 +9,8 @@ const space = {
 };
 const boxShadow = {
   ...vars.shadow,
+  borderBrandAccent: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.brandAccent}`,
+  borderBrandAccentLight: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.brandAccentLight}`,
   borderBrandAccentLarge: `inset 0 0 0 ${vars.borderWidth.large} ${vars.borderColor.brandAccent}`,
   borderBrandAccentLightLarge: `inset 0 0 0 ${vars.borderWidth.large} ${vars.borderColor.brandAccentLight}`,
   borderCaution: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.caution}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.2.0",
+  "version": "32.3.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -183,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"
   },