braid-design-system 32.9.2 → 32.11.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # braid-design-system
 
+## 32.11.0
+
+### Minor Changes
+
+- **Button, ButtonLink:** Provide `formAccent` as the name for undefined tone ([#1359](https://github.com/seek-oss/braid-design-system/pull/1359))
+
+  Formalise the name of the `undefined` tone as `formAccent`, making it more discoverable as an accent available for increased prominence.
+
+  Note: Consumers should only apply this tone where an action should be emphasized explicitly. The `undefined` value is still valid for buttons that should follow the default button style of the theme.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Button tone="formAccent">...</Button>
+  ```
+
+## 32.10.0
+
+### Minor Changes
+
+- **seekJobs:** Change link colour to neutral ([#1347](https://github.com/seek-oss/braid-design-system/pull/1347))
+
+  Changing the `foregroundColor` token for `link` on the `seekJobs` theme to align with neutral text.
+  Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.
+
+  This affects the following usages across the system:
+
+  - `vars.foregroundColor.link`
+  - `Text` (using `tone="link"`)
+  - `TextLink` and (`TextLinkButton`)
+
+### Patch Changes
+
+- **TextLink, TextLinkButton:** Underline regular links in non-legacy themes ([#1347](https://github.com/seek-oss/braid-design-system/pull/1347))
+
+  To improve affordance beyond primarily being colour, a `TextLink` (and `TextLinkButton`) will now always be underlined, in line with [best practice accessibility guidelines].
+
+  Given this has not been the case previously, this decision has been applied to non-legacy themes only, as such only affecting consumers of `seekJobs`, `docs` and `wireframe`.
+
+  [best practice accessibility guidelines]: https://webaim.org/techniques/hypertext/link_text#appearance
+
+- **TextLink, TextLinkButton:** Apply themed focus outline ([#1347](https://github.com/seek-oss/braid-design-system/pull/1347))
+
+  Apply a focus outline using the relevant focus attributes from the theme, bringing `TextLink` (and `TextLinkButton`) into line with the focus treatment applied to rest of the system.
+
+- **TextLink, TextLinkButton:** Reduce `weak` links to `regular` font weight ([#1347](https://github.com/seek-oss/braid-design-system/pull/1347))
+
+  The font weight of a `weak` link is now reduced to `regular` weight, reducing the link's visual prominence in addition to following the neutral text colour.
+
+- **docs:** Lighten soft background tokens ([#1347](https://github.com/seek-oss/braid-design-system/pull/1347))
+
+  Lighten the `brandAccentSoft` and `formAccentSoft` background tokens for the `docs` theme.
+
+- **Dialog, Drawer:** Adapt max height to available viewport space ([#1352](https://github.com/seek-oss/braid-design-system/pull/1352))
+
+  Make use of the new [dynamic viewport units] for applying a max height to modal elements such as `Dialog` and `Drawer`. These new units take into account dynamic browser toolbars that expand and contract as the user scrolls, ensuring the browser interface never obscures the web site content.
+
+  Fix also incorporates fallback for older browsers to use regular viewport units.
+
+  [Dynamic Viewport units]: https://web.dev/viewport-units/
+
 ## 32.9.2
 
 ### Patch Changes

package/dist/ToastContext.chunk.cjs

@@ -1294,7 +1294,7 @@ const buttonVariants = [
 ];
 const variants = {
   solid: {
-    default: {
+    formAccent: {
       textTone: void 0,
       background: "formAccent",
       backgroundHover: "formAccentHover",
@@ -1324,7 +1324,7 @@ const variants = {
     }
   },
   soft: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: { light: "formAccentSoft", dark: "customDark" },
       backgroundHover: "formAccentSoftHover",
@@ -1354,7 +1354,7 @@ const variants = {
     }
   },
   transparent: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: void 0,
       backgroundHover: "formAccentSoftHover",
@@ -1384,7 +1384,7 @@ const variants = {
     }
   },
   ghost: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: void 0,
       backgroundHover: "formAccentSoftHover",
@@ -1428,7 +1428,7 @@ const ButtonOverlays = ({
   forceActive = false,
   radius = buttonRadius
 }) => {
-  const stylesForVariant = variants[variant][tone ?? "default"];
+  const stylesForVariant = variants[variant][tone ?? "formAccent"];
   const colorContrast = useColorContrast();
   const lightness = useBackgroundLightness();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1493,7 +1493,7 @@ const ButtonText = ({
   const actionsContext = React.useContext(ActionsContext);
   const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
   const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
-  const stylesForVariant = variants[variant][tone ?? "default"];
+  const stylesForVariant = variants[variant][tone ?? "formAccent"];
   const shouldReducePaddingX = size === "small" || variant === "transparent";
   const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
   const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
@@ -1561,7 +1561,7 @@ const useButtonStyles = ({
 }) => {
   const actionsContext = React.useContext(ActionsContext);
   const size = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
-  const stylesForVariant = variants[variant][tone ?? "default"];
+  const stylesForVariant = variants[variant][tone ?? "formAccent"];
   const colorConstrast = useColorContrast();
   const lightness = useBackgroundLightness();
   return {
@@ -2025,7 +2025,7 @@ const useLinkStyles = ({
   return clsx__default.default(
     styles_lib_components_TextLink_TextLink_css_cjs.base,
     linkStyles,
-    styles_lib_css_typography_css_cjs.fontWeight.medium,
+    weight !== "weak" ? styles_lib_css_typography_css_cjs.fontWeight.medium : void 0,
     showVisited ? [
       styles_lib_components_TextLink_TextLink_css_cjs.visitedLightMode[backgroundLightness.lightMode],
       styles_lib_components_TextLink_TextLink_css_cjs.visitedDarkMode[backgroundLightness.darkMode]

package/dist/ToastContext.chunk.mjs

@@ -1287,7 +1287,7 @@ const buttonVariants = [
 ];
 const variants = {
   solid: {
-    default: {
+    formAccent: {
       textTone: void 0,
       background: "formAccent",
       backgroundHover: "formAccentHover",
@@ -1317,7 +1317,7 @@ const variants = {
     }
   },
   soft: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: { light: "formAccentSoft", dark: "customDark" },
       backgroundHover: "formAccentSoftHover",
@@ -1347,7 +1347,7 @@ const variants = {
     }
   },
   transparent: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: void 0,
       backgroundHover: "formAccentSoftHover",
@@ -1377,7 +1377,7 @@ const variants = {
     }
   },
   ghost: {
-    default: {
+    formAccent: {
       textTone: "formAccent",
       background: void 0,
       backgroundHover: "formAccentSoftHover",
@@ -1421,7 +1421,7 @@ const ButtonOverlays = ({
   forceActive: forceActive$1 = false,
   radius = buttonRadius
 }) => {
-  const stylesForVariant = variants[variant][tone2 ?? "default"];
+  const stylesForVariant = variants[variant][tone2 ?? "formAccent"];
   const colorContrast = useColorContrast();
   const lightness = useBackgroundLightness();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1486,7 +1486,7 @@ const ButtonText = ({
   const actionsContext = useContext(ActionsContext);
   const isLegacyTheme = useBraidTheme().legacy;
   const size2 = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
-  const stylesForVariant = variants[variant][tone2 ?? "default"];
+  const stylesForVariant = variants[variant][tone2 ?? "formAccent"];
   const shouldReducePaddingX = size2 === "small" || variant === "transparent";
   const labelPaddingXForTheme = isLegacyTheme ? "medium" : "gutter";
   const labelPaddingX = shouldReducePaddingX ? transparentPaddingX : labelPaddingXForTheme;
@@ -1554,7 +1554,7 @@ const useButtonStyles = ({
 }) => {
   const actionsContext = useContext(ActionsContext);
   const size2 = sizeProp ?? (actionsContext == null ? void 0 : actionsContext.size) ?? "standard";
-  const stylesForVariant = variants[variant][tone2 ?? "default"];
+  const stylesForVariant = variants[variant][tone2 ?? "formAccent"];
   const colorConstrast = useColorContrast();
   const lightness = useBackgroundLightness();
   return {
@@ -2018,7 +2018,7 @@ const useLinkStyles = ({
   return clsx(
     base$3,
     linkStyles,
-    fontWeight.medium,
+    weight !== "weak" ? fontWeight.medium : void 0,
     showVisited ? [
       visitedLightMode[backgroundLightness.lightMode],
       visitedDarkMode[backgroundLightness.darkMode]

package/dist/reset.d.ts

@@ -2623,6 +2623,7 @@ declare const vars$1: {
         readonly weak: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    readonly linkDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     readonly inlineFieldSize: {
         readonly standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2830,7 +2831,7 @@ declare const Inline$1: ({ space, align, alignY, collapseBelow, reverse, compone
 
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
 type ButtonSize = 'standard' | 'small';
-type ButtonTone = 'brandAccent' | 'critical' | 'neutral';
+type ButtonTone = 'formAccent' | 'brandAccent' | 'critical' | 'neutral';
 type ButtonVariant = (typeof buttonVariants)[number];
 interface ButtonStyleProps {
     size?: ButtonSize;

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

@@ -6,36 +6,28 @@ const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/TextLink/TextLink.css.ts?used", "braid-design-system");
 const textLinkVars = css.createThemeContract({
   color: null,
-  colorHover: null,
-  textDecoration: null,
-  textDecorationHover: null
+  colorHover: null
 });
 const lightModeRegularLinkVars = css.assignVars(textLinkVars, {
   color: styles_lib_themes_vars_css_cjs.vars.foregroundColor.link,
-  colorHover: styles_lib_themes_vars_css_cjs.vars.foregroundColor.linkHover,
-  textDecoration: "none",
-  textDecorationHover: "underline"
+  colorHover: styles_lib_themes_vars_css_cjs.vars.foregroundColor.linkHover
 });
 const darkModeRegularLinkVars = css.assignVars(textLinkVars, {
   color: styles_lib_themes_vars_css_cjs.vars.foregroundColor.linkLight,
-  colorHover: styles_lib_themes_vars_css_cjs.vars.foregroundColor.linkLight,
-  textDecoration: "none",
-  textDecorationHover: "underline"
+  colorHover: styles_lib_themes_vars_css_cjs.vars.foregroundColor.linkLight
 });
 const weakLinkVars = css.assignVars(textLinkVars, {
   color: "inherit",
-  colorHover: "inherit",
-  textDecoration: "underline",
-  textDecorationHover: "underline"
+  colorHover: "inherit"
 });
 const base = css.style({
   color: textLinkVars.color,
-  textDecoration: textLinkVars.textDecoration,
-  textDecorationThickness: "0.1em",
+  textDecoration: styles_lib_themes_vars_css_cjs.vars.linkDecoration,
+  textDecorationThickness: "0.08em",
   textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover,
+    textDecoration: "underline",
     /*
           Duplicating the thickness rule due to inconsistent support
           for shorthand properties of `text-decoration`. Without this,
@@ -45,14 +37,18 @@ const base = css.style({
           We also cannot use the long-form `text-decoration-line` due
           to browser support policy of Edge 16+.
         */
-    textDecorationThickness: "0.1em"
+    textDecorationThickness: "0.08em"
   },
-  ":focus": {
-    color: textLinkVars.colorHover
+  ":focus-visible": {
+    color: textLinkVars.colorHover,
+    outline: `${styles_lib_themes_vars_css_cjs.vars.focusRingSize} solid ${styles_lib_themes_vars_css_cjs.vars.borderColor.focus}`,
+    outlineOffset: "0.2em",
+    borderRadius: styles_lib_themes_vars_css_cjs.vars.borderRadius.small
   }
 }, "base");
 const weakLink = css.style({
-  vars: weakLinkVars
+  vars: weakLinkVars,
+  textDecoration: "underline"
 }, "weakLink");
 const regularLinkLightMode = css.styleVariants({
   light: {

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

@@ -5,36 +5,28 @@ import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/TextLink/TextLink.css.ts?used", "braid-design-system");
 const textLinkVars = createThemeContract({
   color: null,
-  colorHover: null,
-  textDecoration: null,
-  textDecorationHover: null
+  colorHover: null
 });
 const lightModeRegularLinkVars = assignVars(textLinkVars, {
   color: vars.foregroundColor.link,
-  colorHover: vars.foregroundColor.linkHover,
-  textDecoration: "none",
-  textDecorationHover: "underline"
+  colorHover: vars.foregroundColor.linkHover
 });
 const darkModeRegularLinkVars = assignVars(textLinkVars, {
   color: vars.foregroundColor.linkLight,
-  colorHover: vars.foregroundColor.linkLight,
-  textDecoration: "none",
-  textDecorationHover: "underline"
+  colorHover: vars.foregroundColor.linkLight
 });
 const weakLinkVars = assignVars(textLinkVars, {
   color: "inherit",
-  colorHover: "inherit",
-  textDecoration: "underline",
-  textDecorationHover: "underline"
+  colorHover: "inherit"
 });
 const base = style({
   color: textLinkVars.color,
-  textDecoration: textLinkVars.textDecoration,
-  textDecorationThickness: "0.1em",
+  textDecoration: vars.linkDecoration,
+  textDecorationThickness: "0.08em",
   textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover,
+    textDecoration: "underline",
     /*
           Duplicating the thickness rule due to inconsistent support
           for shorthand properties of `text-decoration`. Without this,
@@ -44,14 +36,18 @@ const base = style({
           We also cannot use the long-form `text-decoration-line` due
           to browser support policy of Edge 16+.
         */
-    textDecorationThickness: "0.1em"
+    textDecorationThickness: "0.08em"
   },
-  ":focus": {
-    color: textLinkVars.colorHover
+  ":focus-visible": {
+    color: textLinkVars.colorHover,
+    outline: `${vars.focusRingSize} solid ${vars.borderColor.focus}`,
+    outlineOffset: "0.2em",
+    borderRadius: vars.borderRadius.small
   }
 }, "base");
 const weakLink = style({
-  vars: weakLinkVars
+  vars: weakLinkVars,
+  textDecoration: "underline"
 }, "weakLink");
 const regularLinkLightMode = styleVariants({
   light: {

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

@@ -89,34 +89,55 @@ const horiztontalTransition = css.style(styles_lib_css_responsiveStyle_cjs.respo
     transition: `transform .175s ${easeOut}, opacity .175s ${easeOut}`
   }
 }), "horiztontalTransition");
-const modalContainer = css.style({
-  maxHeight: "100vh",
-  maxWidth: "100vw"
-}, "modalContainer");
 const pointerEventsAll = css.style({
   pointerEvents: "all"
 }, "pointerEventsAll");
+const gutterSizeVar = css.createVar("gutterSizeVar");
+const fullHeightVar = css.createVar("fullHeightVar");
+const fullWidthVar = css.createVar("fullWidthVar");
 const viewportHeight = css.style({
-  maxHeight: "100vh"
+  maxHeight: fullHeightVar
 }, "viewportHeight");
 const maxSize = {
-  center: css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  center: css.style([{
+    maxHeight: cssUtils.calc.subtract(fullHeightVar, cssUtils.calc.multiply(gutterSizeVar, 2)),
+    maxWidth: cssUtils.calc.subtract(fullWidthVar, cssUtils.calc.multiply(gutterSizeVar, 2))
+  }, styles_lib_css_responsiveStyle_cjs.responsiveStyle({
     mobile: {
-      maxHeight: cssUtils.calc.subtract("100vh", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[0]], 2)),
-      maxWidth: cssUtils.calc.subtract("100vw", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[0]], 2))
+      vars: {
+        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.mobile]
+      }
     },
     tablet: {
-      maxHeight: cssUtils.calc.subtract("100vh", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[1]], 2)),
-      maxWidth: cssUtils.calc.subtract("100vw", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[1]], 2))
+      vars: {
+        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.tablet]
+      }
     },
     desktop: {
-      maxHeight: cssUtils.calc.subtract("100vh", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[2]], 2)),
-      maxWidth: cssUtils.calc.subtract("100vw", cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter[2]], 2))
+      vars: {
+        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.desktop]
+      }
     }
-  }), "maxSize_center"),
+  })], "maxSize_center"),
   right: viewportHeight,
   left: viewportHeight
 };
+const modalContainer = css.style({
+  vars: {
+    [fullHeightVar]: "100vh",
+    [fullWidthVar]: "100vw"
+  },
+  "@supports": {
+    "(height: 1dvh)": {
+      vars: {
+        [fullHeightVar]: "100dvh",
+        [fullWidthVar]: "100dvw"
+      }
+    }
+  },
+  maxHeight: fullHeightVar,
+  maxWidth: fullWidthVar
+}, "modalContainer");
 const headingRoot = css.style({
   overflowWrap: "break-word"
 }, "headingRoot");

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

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
+import { style, createVar } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { externalGutter } from "./ModalExternalGutter.mjs";
 import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
@@ -88,34 +88,55 @@ const horiztontalTransition = style(responsiveStyle({
     transition: `transform .175s ${easeOut}, opacity .175s ${easeOut}`
   }
 }), "horiztontalTransition");
-const modalContainer = style({
-  maxHeight: "100vh",
-  maxWidth: "100vw"
-}, "modalContainer");
 const pointerEventsAll = style({
   pointerEvents: "all"
 }, "pointerEventsAll");
+const gutterSizeVar = createVar("gutterSizeVar");
+const fullHeightVar = createVar("fullHeightVar");
+const fullWidthVar = createVar("fullWidthVar");
 const viewportHeight = style({
-  maxHeight: "100vh"
+  maxHeight: fullHeightVar
 }, "viewportHeight");
 const maxSize = {
-  center: style(responsiveStyle({
+  center: style([{
+    maxHeight: calc.subtract(fullHeightVar, calc.multiply(gutterSizeVar, 2)),
+    maxWidth: calc.subtract(fullWidthVar, calc.multiply(gutterSizeVar, 2))
+  }, responsiveStyle({
     mobile: {
-      maxHeight: calc.subtract("100vh", calc.multiply(vars.space[externalGutter[0]], 2)),
-      maxWidth: calc.subtract("100vw", calc.multiply(vars.space[externalGutter[0]], 2))
+      vars: {
+        [gutterSizeVar]: vars.space[externalGutter.mobile]
+      }
     },
     tablet: {
-      maxHeight: calc.subtract("100vh", calc.multiply(vars.space[externalGutter[1]], 2)),
-      maxWidth: calc.subtract("100vw", calc.multiply(vars.space[externalGutter[1]], 2))
+      vars: {
+        [gutterSizeVar]: vars.space[externalGutter.tablet]
+      }
     },
     desktop: {
-      maxHeight: calc.subtract("100vh", calc.multiply(vars.space[externalGutter[2]], 2)),
-      maxWidth: calc.subtract("100vw", calc.multiply(vars.space[externalGutter[2]], 2))
+      vars: {
+        [gutterSizeVar]: vars.space[externalGutter.desktop]
+      }
     }
-  }), "maxSize_center"),
+  })], "maxSize_center"),
   right: viewportHeight,
   left: viewportHeight
 };
+const modalContainer = style({
+  vars: {
+    [fullHeightVar]: "100vh",
+    [fullWidthVar]: "100vw"
+  },
+  "@supports": {
+    "(height: 1dvh)": {
+      vars: {
+        [fullHeightVar]: "100dvh",
+        [fullWidthVar]: "100dvw"
+      }
+    }
+  },
+  maxHeight: fullHeightVar,
+  maxWidth: fullWidthVar
+}, "modalContainer");
 const headingRoot = style({
   overflowWrap: "break-word"
 }, "headingRoot");

package/dist/styles/lib/components/private/Modal/ModalExternalGutter.cjs

@@ -1,3 +1,7 @@
 "use strict";
-const externalGutter = ["xsmall", "gutter", "xlarge"];
+const externalGutter = {
+  mobile: "xsmall",
+  tablet: "gutter",
+  desktop: "xlarge"
+};
 exports.externalGutter = externalGutter;

package/dist/styles/lib/components/private/Modal/ModalExternalGutter.mjs

@@ -1,4 +1,8 @@
-const externalGutter = ["xsmall", "gutter", "xlarge"];
+const externalGutter = {
+  mobile: "xsmall",
+  tablet: "gutter",
+  desktop: "xlarge"
+};
 export {
   externalGutter
 };

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

@@ -216,9 +216,9 @@ const tokens = {
       brandAccent,
       brandAccentActive: brandAccent,
       brandAccentHover: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["700"],
-      brandAccentSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["200"],
-      brandAccentSoftActive: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["200"]),
-      brandAccentSoftHover: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["200"]),
+      brandAccentSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["100"],
+      brandAccentSoftActive: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["100"]),
+      brandAccentSoftHover: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["100"]),
       caution: sideEffects_lib_themes_baseTokens_apac_cjs.palette.yellow["500"],
       cautionLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.yellow["100"],
       critical: sideEffects_lib_themes_baseTokens_apac_cjs.palette.red["600"],
@@ -231,9 +231,9 @@ const tokens = {
       formAccent,
       formAccentActive: sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["700"],
       formAccentHover: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["600"]),
-      formAccentSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["100"],
-      formAccentSoftActive: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["100"]),
-      formAccentSoftHover: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["100"]),
+      formAccentSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["50"],
+      formAccentSoftActive: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["50"]),
+      formAccentSoftHover: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["50"]),
       info: sideEffects_lib_themes_baseTokens_apac_cjs.palette.blue["600"],
       infoLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.blue["100"],
       neutral: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["800"],

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

@@ -213,9 +213,9 @@ const tokens = {
       brandAccent,
       brandAccentActive: brandAccent,
       brandAccentHover: palette.grey["700"],
-      brandAccentSoft: palette.grey["200"],
-      brandAccentSoftActive: darken(0.025, palette.grey["200"]),
-      brandAccentSoftHover: darken(0.05, palette.grey["200"]),
+      brandAccentSoft: palette.grey["100"],
+      brandAccentSoftActive: darken(0.025, palette.grey["100"]),
+      brandAccentSoftHover: darken(0.05, palette.grey["100"]),
       caution: palette.yellow["500"],
       cautionLight: palette.yellow["100"],
       critical: palette.red["600"],
@@ -228,9 +228,9 @@ const tokens = {
       formAccent,
       formAccentActive: palette.indigo["700"],
       formAccentHover: darken(0.05, palette.indigo["600"]),
-      formAccentSoft: palette.indigo["100"],
-      formAccentSoftActive: darken(0.05, palette.indigo["100"]),
-      formAccentSoftHover: darken(0.025, palette.indigo["100"]),
+      formAccentSoft: palette.indigo["50"],
+      formAccentSoftActive: darken(0.05, palette.indigo["50"]),
+      formAccentSoftHover: darken(0.025, palette.indigo["50"]),
       info: palette.blue["600"],
       infoLight: palette.blue["100"],
       neutral: palette.grey["800"],

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

@@ -65,7 +65,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
   };
 };
 const makeVanillaTheme = (braidTokens) => {
-  const { name, displayName, ...tokens } = braidTokens;
+  const { name, displayName, legacy, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
   const textSize = mapValues__default.default(
@@ -103,6 +103,12 @@ const makeVanillaTheme = (braidTokens) => {
         tokens.typography.fontWeight[tokens.typography.heading.weight.regular]
       )
     },
+    /*
+      Going forward, all links variants should be underlined as an accessibility
+      best practice. However, to maintain existing behaviour we are sunsetting
+      the old style based on the `legacy` theme flag, e.g. `apac`.
+    */
+    linkDecoration: legacy ? "none" : "underline",
     inlineFieldSize: {
       standard: getInlineFieldSize("standard"),
       small: getInlineFieldSize("small")

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

@@ -62,7 +62,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
   };
 };
 const makeVanillaTheme = (braidTokens) => {
-  const { name, displayName, ...tokens } = braidTokens;
+  const { name, displayName, legacy, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
   const textSize = mapValues(
@@ -100,6 +100,12 @@ const makeVanillaTheme = (braidTokens) => {
         tokens.typography.fontWeight[tokens.typography.heading.weight.regular]
       )
     },
+    /*
+      Going forward, all links variants should be underlined as an accessibility
+      best practice. However, to maintain existing behaviour we are sunsetting
+      the old style based on the `legacy` theme flag, e.g. `apac`.
+    */
+    linkDecoration: legacy ? "none" : "underline",
     inlineFieldSize: {
       standard: getInlineFieldSize("standard"),
       small: getInlineFieldSize("small")

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

@@ -159,9 +159,9 @@ const tokens = sideEffects_lib_themes_baseTokens_apac_cjs.makeTokens({
       foreground: {
         formAccent: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"],
         formAccentLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["300"],
-        link: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"],
-        linkHover: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"],
-        linkLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["300"],
+        link: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["700"],
+        linkHover: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["700"],
+        linkLight: "#fff",
         linkVisited: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["800"],
         linkLightVisited: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["200"],
         promote: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["700"],

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

@@ -158,9 +158,9 @@ const tokens = makeTokens({
       foreground: {
         formAccent: palette.violet["500"],
         formAccentLight: palette.violet["300"],
-        link: palette.violet["500"],
-        linkHover: palette.violet["500"],
-        linkLight: palette.violet["300"],
+        link: palette.grey["700"],
+        linkHover: palette.grey["700"],
+        linkLight: "#fff",
         linkVisited: palette.purple["800"],
         linkLightVisited: palette.purple["200"],
         promote: palette.purple["700"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.9.2",
+  "version": "32.11.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -179,7 +179,7 @@
     "babel-plugin-transform-remove-imports": "^1.7.0",
     "change-case": "^4.1.2",
     "cheerio": "1.0.0-rc.11",
-    "chromatic": "^5.10.2",
+    "chromatic": "^6.24.1",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "html-validate": "^7.1.1",