braid-design-system 32.4.0 → 32.5.0

package/dist/side-effects/lib/themes/baseTokens/apac.cjs

@@ -17,6 +17,7 @@ const palette = {
     300: "#ABB3C1",
     200: "#D2D7DF",
     100: "#EAECF1",
+    75: "#F3F5F7",
     50: "#F7F8FB"
   },
   seekPink: {
@@ -140,30 +141,42 @@ const palette = {
     50: "#F4F6FE"
   },
   violet: {
-    900: "#1E0B65",
-    800: "#341B87",
-    700: "#512EAA",
-    600: "#6C41CE",
-    500: "#8B5CEB",
-    400: "#AD84F2",
-    300: "#C6ACF5",
-    200: "#E1D1F9",
-    100: "#F1E8FD",
-    50: "#FAF5FE"
+    900: "#120C64",
+    800: "#241A83",
+    700: "#392BA7",
+    600: "#503DC9",
+    500: "#6E56E6",
+    400: "#937FEF",
+    300: "#B5A7F4",
+    200: "#D8D0FA",
+    100: "#ECE9FC",
+    50: "#F8F6FE"
   },
   purple: {
-    900: "#3C0B65",
-    800: "#581B87",
-    700: "#7C2EAA",
-    600: "#9D41CE",
-    500: "#BB5CEB",
-    400: "#D184F2",
-    300: "#DFACF5",
-    200: "#EED1F9",
-    100: "#F7E8FD",
-    50: "#FCF5FE"
+    900: "#3E0F65",
+    800: "#5B2084",
+    700: "#7F35A9",
+    600: "#A04BCB",
+    500: "#BE68E8",
+    400: "#D48EF1",
+    300: "#E1B2F5",
+    200: "#F0D6FA",
+    100: "#F9EBFD",
+    50: "#FDF7FE"
   }
 };
+const legacyViolet = {
+  900: "#1E0B65",
+  800: "#341B87",
+  700: "#512EAA",
+  600: "#6C41CE",
+  500: "#8B5CEB",
+  400: "#AD84F2",
+  300: "#C6ACF5",
+  200: "#E1D1F9",
+  100: "#F1E8FD",
+  50: "#FAF5FE"
+};
 const makeTokens = ({
   name,
   displayName,
@@ -184,6 +197,7 @@ const makeTokens = ({
   const tokens = {
     name,
     displayName,
+    legacy: true,
     typography: {
       fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
       webFont: null,
@@ -339,8 +353,8 @@ const makeTokens = ({
         neutralInverted: white,
         positive: palette.mint["700"],
         positiveLight: palette.mint["300"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["300"]
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"]
       }
     },
     focusRingSize: 3,
@@ -376,14 +390,14 @@ const makeTokens = ({
         link: formAccent,
         linkLight: palette.indigo["300"],
         linkHover: formAccent,
-        linkVisited: palette.violet["700"],
-        linkLightVisited: palette.violet["300"],
+        linkVisited: legacyViolet["700"],
+        linkLightVisited: legacyViolet["300"],
         neutral: palette.grey["700"],
         neutralInverted: white,
         positive: palette.mint["700"],
         positiveLight: palette.mint["300"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["300"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"],
         rating: "#f57c00",
         secondary: palette.grey["500"],
         secondaryInverted: polished.rgba("#fff", 0.65)
@@ -424,8 +438,8 @@ const makeTokens = ({
         neutralSoftHover: polished.darken(0.025, palette.grey["50"]),
         positive: palette.mint["700"],
         positiveLight: palette.mint["100"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["100"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["100"],
         surface: white,
         surfaceDark: palette.grey["800"]
       }

package/dist/side-effects/lib/themes/baseTokens/apac.mjs

@@ -13,6 +13,7 @@ const palette = {
     300: "#ABB3C1",
     200: "#D2D7DF",
     100: "#EAECF1",
+    75: "#F3F5F7",
     50: "#F7F8FB"
   },
   seekPink: {
@@ -136,30 +137,42 @@ const palette = {
     50: "#F4F6FE"
   },
   violet: {
-    900: "#1E0B65",
-    800: "#341B87",
-    700: "#512EAA",
-    600: "#6C41CE",
-    500: "#8B5CEB",
-    400: "#AD84F2",
-    300: "#C6ACF5",
-    200: "#E1D1F9",
-    100: "#F1E8FD",
-    50: "#FAF5FE"
+    900: "#120C64",
+    800: "#241A83",
+    700: "#392BA7",
+    600: "#503DC9",
+    500: "#6E56E6",
+    400: "#937FEF",
+    300: "#B5A7F4",
+    200: "#D8D0FA",
+    100: "#ECE9FC",
+    50: "#F8F6FE"
   },
   purple: {
-    900: "#3C0B65",
-    800: "#581B87",
-    700: "#7C2EAA",
-    600: "#9D41CE",
-    500: "#BB5CEB",
-    400: "#D184F2",
-    300: "#DFACF5",
-    200: "#EED1F9",
-    100: "#F7E8FD",
-    50: "#FCF5FE"
+    900: "#3E0F65",
+    800: "#5B2084",
+    700: "#7F35A9",
+    600: "#A04BCB",
+    500: "#BE68E8",
+    400: "#D48EF1",
+    300: "#E1B2F5",
+    200: "#F0D6FA",
+    100: "#F9EBFD",
+    50: "#FDF7FE"
   }
 };
+const legacyViolet = {
+  900: "#1E0B65",
+  800: "#341B87",
+  700: "#512EAA",
+  600: "#6C41CE",
+  500: "#8B5CEB",
+  400: "#AD84F2",
+  300: "#C6ACF5",
+  200: "#E1D1F9",
+  100: "#F1E8FD",
+  50: "#FAF5FE"
+};
 const makeTokens = ({
   name,
   displayName,
@@ -180,6 +193,7 @@ const makeTokens = ({
   const tokens = {
     name,
     displayName,
+    legacy: true,
     typography: {
       fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
       webFont: null,
@@ -335,8 +349,8 @@ const makeTokens = ({
         neutralInverted: white,
         positive: palette.mint["700"],
         positiveLight: palette.mint["300"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["300"]
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"]
       }
     },
     focusRingSize: 3,
@@ -372,14 +386,14 @@ const makeTokens = ({
         link: formAccent,
         linkLight: palette.indigo["300"],
         linkHover: formAccent,
-        linkVisited: palette.violet["700"],
-        linkLightVisited: palette.violet["300"],
+        linkVisited: legacyViolet["700"],
+        linkLightVisited: legacyViolet["300"],
         neutral: palette.grey["700"],
         neutralInverted: white,
         positive: palette.mint["700"],
         positiveLight: palette.mint["300"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["300"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["300"],
         rating: "#f57c00",
         secondary: palette.grey["500"],
         secondaryInverted: rgba("#fff", 0.65)
@@ -420,8 +434,8 @@ const makeTokens = ({
         neutralSoftHover: darken(0.025, palette.grey["50"]),
         positive: palette.mint["700"],
         positiveLight: palette.mint["100"],
-        promote: palette.violet["700"],
-        promoteLight: palette.violet["100"],
+        promote: legacyViolet["700"],
+        promoteLight: legacyViolet["100"],
         surface: white,
         surfaceDark: palette.grey["800"]
       }

package/dist/side-effects/lib/themes/index.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const styles_lib_themes_apac_apacTheme_css_cjs = require("../../../styles/lib/themes/apac/apacTheme.css.cjs");
+const styles_lib_themes_seekJobs_seekJobs_css_cjs = require("../../../styles/lib/themes/seekJobs/seekJobs.css.cjs");
 const styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs = require("../../../styles/lib/themes/seekBusiness/seekBusinessTheme.css.cjs");
 const styles_lib_themes_wireframe_wireframeTheme_css_cjs = require("../../../styles/lib/themes/wireframe/wireframeTheme.css.cjs");
 const styles_lib_themes_docs_docsTheme_css_cjs = require("../../../styles/lib/themes/docs/docsTheme.css.cjs");
@@ -8,6 +9,7 @@ const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   apac: styles_lib_themes_apac_apacTheme_css_cjs.apacTheme_css,
   docs: styles_lib_themes_docs_docsTheme_css_cjs.docsTheme_css,
   seekBusiness: styles_lib_themes_seekBusiness_seekBusinessTheme_css_cjs.seekBusinessTheme_css,
+  seekJobs: styles_lib_themes_seekJobs_seekJobs_css_cjs.seekJobs_css,
   wireframe: styles_lib_themes_wireframe_wireframeTheme_css_cjs.wireframe
 }, Symbol.toStringTag, { value: "Module" }));
 exports.themes = themes;

package/dist/side-effects/lib/themes/index.mjs

@@ -1,4 +1,5 @@
 import { apacTheme_css } from "../../../styles/lib/themes/apac/apacTheme.css.mjs";
+import { seekJobs_css } from "../../../styles/lib/themes/seekJobs/seekJobs.css.mjs";
 import { seekBusinessTheme_css } from "../../../styles/lib/themes/seekBusiness/seekBusinessTheme.css.mjs";
 import { wireframe } from "../../../styles/lib/themes/wireframe/wireframeTheme.css.mjs";
 import { docsTheme_css } from "../../../styles/lib/themes/docs/docsTheme.css.mjs";
@@ -7,6 +8,7 @@ const themes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   apac: apacTheme_css,
   docs: docsTheme_css,
   seekBusiness: seekBusinessTheme_css,
+  seekJobs: seekJobs_css,
   wireframe
 }, Symbol.toStringTag, { value: "Module" }));
 export {

package/dist/side-effects/lib/themes/makeRuntimeTokens.cjs

@@ -12,6 +12,14 @@ const makeWebFonts = (webFont) => {
 const makeRuntimeTokens = (tokens) => ({
   name: tokens.name,
   displayName: tokens.displayName,
+  /**
+   * The boundary for making updated design decisions without disturbing
+   * existing consumers. Updated decisions can be assessed as part of
+   * migrating between themes.
+   *
+   * This token will be removed when the `apac` theme is retired.
+   */
+  legacy: tokens.legacy,
   background: {
     lightMode: tokens.color.background.body,
     darkMode: tokens.color.background.bodyDark

package/dist/side-effects/lib/themes/makeRuntimeTokens.mjs

@@ -9,6 +9,14 @@ const makeWebFonts = (webFont) => {
 const makeRuntimeTokens = (tokens) => ({
   name: tokens.name,
   displayName: tokens.displayName,
+  /**
+   * The boundary for making updated design decisions without disturbing
+   * existing consumers. Updated decisions can be assessed as part of
+   * migrating between themes.
+   *
+   * This token will be removed when the `apac` theme is retired.
+   */
+  legacy: tokens.legacy,
   background: {
     lightMode: tokens.color.background.body,
     darkMode: tokens.color.background.bodyDark

package/dist/side-effects/lib/themes/seekJobs/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../../styles/lib/themes/seekJobs/seekJobs.css.cjs");

package/dist/side-effects/lib/themes/seekJobs/index.mjs

@@ -0,0 +1 @@
+import "../../../../styles/lib/themes/seekJobs/seekJobs.css.mjs";

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

@@ -32,7 +32,7 @@ const base = css.style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
   textDecorationThickness: "0.1em",
-  textUnderlineOffset: "0.32em",
+  textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
     textDecoration: textLinkVars.textDecorationHover,

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

@@ -31,7 +31,7 @@ const base = style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
   textDecorationThickness: "0.1em",
-  textUnderlineOffset: "0.32em",
+  textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
     textDecoration: textLinkVars.textDecorationHover,

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

@@ -111,6 +111,11 @@ const icon = css.style({
     }
   }
 }, "icon");
+const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = css.style({
   selectors: {
     [`${realField}:focus + ${slideContainer} &,
@@ -130,6 +135,7 @@ const hoverOverlay = css.style({
 fileScope.endFileScope();
 exports.fieldSize = fieldSize;
 exports.focusOverlay = focusOverlay;
+exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
 exports.icon = icon;
 exports.label = label;

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

@@ -110,6 +110,11 @@ const icon = style({
     }
   }
 }, "icon");
+const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = style({
   selectors: {
     [`${realField}:focus + ${slideContainer} &,
@@ -130,6 +135,7 @@ endFileScope();
 export {
   fieldSize,
   focusOverlay,
+  hideBorderOnDarkBackgroundInLightMode,
   hoverOverlay,
   icon,
   label,

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

@@ -2,6 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
+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/private/Field/Field.css.ts?used", "braid-design-system");
 const field = css.style({}, "field");
@@ -17,6 +18,11 @@ const textLeftOffset = "2px";
 const iconSpace = css.style({
   paddingLeft: cssUtils.calc.subtract(styles_lib_themes_vars_css_cjs.vars.touchableSize, textLeftOffset)
 }, "iconSpace");
+const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = css.style({
   selectors: {
     [`${field}:focus ~ &`]: {
@@ -39,6 +45,7 @@ const verticalDivider = css.style({
 fileScope.endFileScope();
 exports.field = field;
 exports.focusOverlay = focusOverlay;
+exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
 exports.iconSpace = iconSpace;
 exports.placeholderColor = placeholderColor;

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

@@ -1,6 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
+import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
 import { vars } from "../../../themes/vars.css.mjs";
 setFileScope("src/lib/components/private/Field/Field.css.ts?used", "braid-design-system");
 const field = style({}, "field");
@@ -16,6 +17,11 @@ const textLeftOffset = "2px";
 const iconSpace = style({
   paddingLeft: calc.subtract(vars.touchableSize, textLeftOffset)
 }, "iconSpace");
+const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = style({
   selectors: {
     [`${field}:focus ~ &`]: {
@@ -39,6 +45,7 @@ endFileScope();
 export {
   field,
   focusOverlay,
+  hideBorderOnDarkBackgroundInLightMode,
   hoverOverlay,
   iconSpace,
   placeholderColor,

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

@@ -6,6 +6,7 @@ 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");
+const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
 fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
@@ -35,7 +36,14 @@ const realField = css.style([{
 }, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
 const fakeField = css.style({
   height: fieldSize,
-  width: fieldSize
+  width: fieldSize,
+  selectors: {
+    // Overrides `surface` background of checked checkbox
+    // to make `formAccent` edge crisp on dark background
+    [`${realField}[type="checkbox"]:checked ~ &`]: {
+      background: "transparent"
+    }
+  }
 }, "fakeField");
 const labelOffset = css.style({
   paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
@@ -58,6 +66,11 @@ const selected = css.style({
     }
   }
 }, "selected");
+const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = css.style({
   selectors: {
     [`${realField}:focus + ${fakeField} > &`]: {
@@ -103,6 +116,7 @@ exports.checkboxIndicator = checkboxIndicator;
 exports.children = children;
 exports.fakeField = fakeField;
 exports.focusOverlay = focusOverlay;
+exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;

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

@@ -5,6 +5,7 @@ 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";
+import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
 setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
@@ -34,7 +35,14 @@ const realField = style([{
 }, debugTouchable()], "realField");
 const fakeField = style({
   height: fieldSize,
-  width: fieldSize
+  width: fieldSize,
+  selectors: {
+    // Overrides `surface` background of checked checkbox
+    // to make `formAccent` edge crisp on dark background
+    [`${realField}[type="checkbox"]:checked ~ &`]: {
+      background: "transparent"
+    }
+  }
 }, "fakeField");
 const labelOffset = style({
   paddingTop: calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
@@ -57,6 +65,11 @@ const selected = style({
     }
   }
 }, "selected");
+const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
 const focusOverlay = style({
   selectors: {
     [`${realField}:focus + ${fakeField} > &`]: {
@@ -103,6 +116,7 @@ export {
   children,
   fakeField,
   focusOverlay,
+  hideBorderOnDarkBackgroundInLightMode,
   hoverOverlay,
   isMixed,
   labelOffset,

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

@@ -16,6 +16,7 @@ const secondary = sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["500"]
 const tokens = {
   name: "docs",
   displayName: "Docs",
+  legacy: false,
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,

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

@@ -13,6 +13,7 @@ const secondary = palette.grey["500"];
 const tokens = {
   name: "docs",
   displayName: "Docs",
+  legacy: false,
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,

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

@@ -0,0 +1,8 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_themes_seekJobs_tokens_cjs = require("./tokens.cjs");
+const styles_lib_themes_makeBraidTheme_cjs = require("../makeBraidTheme.cjs");
+fileScope.setFileScope("src/lib/themes/seekJobs/seekJobs.css.ts?used", "braid-design-system");
+const seekJobs_css = styles_lib_themes_makeBraidTheme_cjs.makeBraidTheme(styles_lib_themes_seekJobs_tokens_cjs.tokens);
+fileScope.endFileScope();
+exports.seekJobs_css = seekJobs_css;

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

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