braid-design-system 33.10.0-deprecate-apac-20250630233359 → 33.10.0-deprecate-apac-20250701000007

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # braid-design-system
 
-## 33.10.0-deprecate-apac-20250630233359
+## 33.10.0-deprecate-apac-20250701000007
 
 ### Minor Changes
 
-- **apac:** Deprecate theme in favour of `seekJobs` theme (4997614afe79b9bc8e1780b4fb724a07d9a77296)
+- **apac:** Deprecate theme in favour of `seekJobs` theme (95e01b7cb20715e217b50aff0e9e431a23829775)
 
   **MIGRATION GUIDE:**
 
@@ -24,6 +24,11 @@
   <Box position="sticky" top={0} ... />
   ```
 
+- **seekBusiness:** Migrate to updated visual language ([#1819](https://github.com/seek-oss/braid-design-system/pull/1819))
+
+  Migrate `seekBusiness` theme to new visual language.
+  Adopts the `seekJobs` theme for the latest design standards, rather than the legacy `apac` theme, while retaining the `seekBusiness` brand accent colour.
+
 ## 33.9.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4522,11 +4522,6 @@ declare const vars: {
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 
-/**
- * @deprecated the `apac` theme is deprecated and will be removed in a future release.
- *
- * Use the `seekJobs` theme instead.
- */
 declare const _default$6: {
     vanillaTheme: string;
     name: string;

package/dist/index.d.ts

@@ -4522,11 +4522,6 @@ declare const vars: {
 };
 declare function atoms(props: Omit<Atoms, 'background'>): string;
 
-/**
- * @deprecated the `apac` theme is deprecated and will be removed in a future release.
- *
- * Use the `seekJobs` theme instead.
- */
 declare const _default$6: {
     vanillaTheme: string;
     name: string;

package/dist/lib/color/palette.cjs

@@ -18,8 +18,7 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880",
-    300: "#7795C2"
+    500: "#0D3880"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/color/palette.mjs

@@ -17,8 +17,7 @@ const palette = {
   },
   seekBlue: {
     700: "#051A49",
-    500: "#0D3880",
-    300: "#7795C2"
+    500: "#0D3880"
   },
   seekBlueLight: {
     700: "#1E47A9",

package/dist/lib/themes/apac/tokens.cjs

@@ -1,19 +1,272 @@
 "use strict";
+const robotoMetrics = require("@capsizecss/metrics/roboto");
 const polished = require("polished");
 const lib_color_palette_cjs = require("../../color/palette.cjs");
-const lib_themes_baseTokens_apac_cjs = require("../baseTokens/apac.cjs");
+const lib_themes_tokenType_cjs = require("../tokenType.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const robotoMetrics__default = /* @__PURE__ */ _interopDefaultCompat(robotoMetrics);
+const legacyViolet = {
+  700: "#512EAA",
+  300: "#C6ACF5",
+  100: "#F1E8FD"
+};
+const formAccent = lib_color_palette_cjs.palette.indigo["500"];
+const critical = lib_color_palette_cjs.palette.red["700"];
+const focus = polished.rgba(lib_color_palette_cjs.palette.indigo["300"], 0.7);
+const white = "#fff";
+const brand = lib_color_palette_cjs.palette.seekBlue["500"];
 const brandAccent = lib_color_palette_cjs.palette.seekPink["500"];
 const brandAccentSoft = lib_color_palette_cjs.palette.seekPink["50"];
-const tokens = lib_themes_baseTokens_apac_cjs.makeTokens({
+const brandAccentLight = lib_color_palette_cjs.palette.seekPink["200"];
+const tokens = {
   name: "apac",
   displayName: "APAC",
-  brand: lib_color_palette_cjs.palette.seekBlue["500"],
-  brandAccent,
-  brandAccentLight: lib_color_palette_cjs.palette.seekPink["200"],
-  brandAccentActive: polished.darken(0.05, brandAccent),
-  brandAccentHover: polished.lighten(0.05, brandAccent),
-  brandAccentSoft,
-  brandAccentSoftActive: polished.darken(0.05, brandAccentSoft),
-  brandAccentSoftHover: polished.darken(0.025, brandAccentSoft)
-});
+  legacy: true,
+  typography: {
+    fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif`,
+    webFont: null,
+    fontMetrics: lib_themes_tokenType_cjs.extractFontMetricsForTheme(robotoMetrics__default.default),
+    fontWeight: {
+      regular: 400,
+      medium: 600,
+      strong: 700
+    },
+    heading: {
+      weight: {
+        weak: "regular",
+        regular: "medium"
+      },
+      level: {
+        "1": {
+          mobile: {
+            fontSize: 28,
+            rows: 9
+          },
+          tablet: {
+            fontSize: 42,
+            rows: 11
+          }
+        },
+        "2": {
+          mobile: {
+            fontSize: 21,
+            rows: 8
+          },
+          tablet: {
+            fontSize: 28,
+            rows: 9
+          }
+        },
+        "3": {
+          mobile: {
+            fontSize: 21,
+            rows: 7
+          },
+          tablet: {
+            fontSize: 21,
+            rows: 7
+          }
+        },
+        "4": {
+          mobile: {
+            fontSize: 18,
+            rows: 7
+          },
+          tablet: {
+            fontSize: 18,
+            rows: 7
+          }
+        }
+      }
+    },
+    text: {
+      xsmall: {
+        mobile: {
+          fontSize: 12,
+          rows: 5
+        },
+        tablet: {
+          fontSize: 12,
+          rows: 5
+        }
+      },
+      small: {
+        mobile: {
+          fontSize: 14,
+          rows: 5
+        },
+        tablet: {
+          fontSize: 14,
+          rows: 5
+        }
+      },
+      standard: {
+        mobile: {
+          fontSize: 16,
+          rows: 6
+        },
+        tablet: {
+          fontSize: 16,
+          rows: 6
+        }
+      },
+      large: {
+        mobile: {
+          fontSize: 18,
+          rows: 7
+        },
+        tablet: {
+          fontSize: 18,
+          rows: 7
+        }
+      }
+    }
+  },
+  contentWidth: {
+    xsmall: 400,
+    small: 660,
+    medium: 940,
+    large: 1280
+  },
+  grid: 4,
+  touchableSize: 11,
+  space: {
+    gutter: 6,
+    xxsmall: 1,
+    xsmall: 2,
+    small: 3,
+    medium: 5,
+    large: 8,
+    xlarge: 12,
+    xxlarge: 24,
+    xxxlarge: 30
+  },
+  transforms: {
+    touchable: "scale(0.95)"
+  },
+  transitions: {
+    fast: "transform .125s ease, opacity .125s ease",
+    touchable: "transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)"
+  },
+  border: {
+    radius: {
+      small: "2px",
+      standard: "4px",
+      large: "6px",
+      xlarge: "10px"
+    },
+    width: {
+      standard: 1,
+      large: 2
+    },
+    color: {
+      brandAccent,
+      brandAccentLight,
+      caution: lib_color_palette_cjs.palette.yellow["500"],
+      cautionLight: lib_color_palette_cjs.palette.yellow["300"],
+      critical,
+      criticalLight: lib_color_palette_cjs.palette.red["300"],
+      field: lib_color_palette_cjs.palette.grey["400"],
+      focus,
+      formAccent,
+      formAccentLight: lib_color_palette_cjs.palette.indigo["300"],
+      info: lib_color_palette_cjs.palette.blue["700"],
+      infoLight: lib_color_palette_cjs.palette.blue["300"],
+      neutral: lib_color_palette_cjs.palette.grey["700"],
+      neutralLight: lib_color_palette_cjs.palette.grey["200"],
+      neutralInverted: white,
+      positive: lib_color_palette_cjs.palette.mint["700"],
+      positiveLight: lib_color_palette_cjs.palette.mint["300"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["300"]
+    }
+  },
+  focusRingSize: 3,
+  shadows: {
+    small: [
+      `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 2px 2px -2px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 4px 4px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+    ].join(", "),
+    medium: [
+      `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 8px 8px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 12px 12px -8px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+    ].join(", "),
+    large: [
+      `0 2px 4px 0px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 12px 12px -4px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.1)}`,
+      `0 20px 20px -12px ${polished.rgba(lib_color_palette_cjs.palette.grey["800"], 0.2)}`
+    ].join(", ")
+  },
+  color: {
+    foreground: {
+      brandAccent,
+      brandAccentLight,
+      caution: lib_color_palette_cjs.palette.yellow["900"],
+      cautionLight: lib_color_palette_cjs.palette.yellow["300"],
+      critical,
+      criticalLight: lib_color_palette_cjs.palette.red["300"],
+      formAccent,
+      formAccentLight: lib_color_palette_cjs.palette.indigo["300"],
+      info: lib_color_palette_cjs.palette.blue["700"],
+      infoLight: lib_color_palette_cjs.palette.blue["300"],
+      link: formAccent,
+      linkLight: lib_color_palette_cjs.palette.indigo["300"],
+      linkHover: formAccent,
+      linkVisited: legacyViolet["700"],
+      linkLightVisited: legacyViolet["300"],
+      neutral: lib_color_palette_cjs.palette.grey["700"],
+      neutralInverted: white,
+      positive: lib_color_palette_cjs.palette.mint["700"],
+      positiveLight: lib_color_palette_cjs.palette.mint["300"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["300"],
+      rating: lib_color_palette_cjs.palette.seekPink["500"],
+      secondary: lib_color_palette_cjs.palette.grey["500"],
+      secondaryInverted: polished.rgba("#fff", 0.65)
+    },
+    background: {
+      body: lib_color_palette_cjs.palette.grey["50"],
+      bodyDark: lib_color_palette_cjs.palette.grey["900"],
+      brand,
+      brandAccent,
+      brandAccentActive: polished.darken(0.05, brandAccent),
+      brandAccentHover: polished.lighten(0.05, brandAccent),
+      brandAccentSoft,
+      brandAccentSoftActive: polished.darken(0.05, brandAccentSoft),
+      brandAccentSoftHover: polished.darken(0.025, brandAccentSoft),
+      caution: lib_color_palette_cjs.palette.yellow["500"],
+      cautionLight: lib_color_palette_cjs.palette.yellow["100"],
+      critical,
+      criticalActive: polished.darken(0.05, critical),
+      criticalHover: polished.saturate(0.1, polished.lighten(0.05, critical)),
+      criticalLight: lib_color_palette_cjs.palette.red["100"],
+      criticalSoft: lib_color_palette_cjs.palette.red["50"],
+      criticalSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.red["50"]),
+      criticalSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.red["50"]),
+      formAccent,
+      formAccentActive: polished.darken(0.05, formAccent),
+      formAccentHover: polished.saturate(0.5, polished.lighten(0.075, formAccent)),
+      formAccentSoft: lib_color_palette_cjs.palette.indigo["50"],
+      formAccentSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.indigo["50"]),
+      formAccentSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.indigo["50"]),
+      info: lib_color_palette_cjs.palette.blue["700"],
+      infoLight: lib_color_palette_cjs.palette.blue["100"],
+      neutral: lib_color_palette_cjs.palette.grey["700"],
+      neutralActive: polished.darken(0.05, lib_color_palette_cjs.palette.grey["700"]),
+      neutralHover: polished.lighten(0.05, lib_color_palette_cjs.palette.grey["700"]),
+      neutralLight: lib_color_palette_cjs.palette.grey["100"],
+      neutralSoft: lib_color_palette_cjs.palette.grey["50"],
+      neutralSoftActive: polished.darken(0.05, lib_color_palette_cjs.palette.grey["50"]),
+      neutralSoftHover: polished.darken(0.025, lib_color_palette_cjs.palette.grey["50"]),
+      positive: lib_color_palette_cjs.palette.mint["700"],
+      positiveLight: lib_color_palette_cjs.palette.mint["100"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["100"],
+      surface: white,
+      surfaceDark: lib_color_palette_cjs.palette.grey["800"]
+    }
+  }
+};
 exports.tokens = tokens;

package/dist/lib/themes/apac/tokens.mjs

@@ -1,20 +1,271 @@
-import { darken, lighten } from "polished";
+import robotoMetrics from "@capsizecss/metrics/roboto";
+import { rgba, darken, lighten, saturate } from "polished";
 import { palette } from "../../color/palette.mjs";
-import { makeTokens } from "../baseTokens/apac.mjs";
+import { extractFontMetricsForTheme } from "../tokenType.mjs";
+const legacyViolet = {
+  700: "#512EAA",
+  300: "#C6ACF5",
+  100: "#F1E8FD"
+};
+const formAccent = palette.indigo["500"];
+const critical = palette.red["700"];
+const focus = rgba(palette.indigo["300"], 0.7);
+const white = "#fff";
+const brand = palette.seekBlue["500"];
 const brandAccent = palette.seekPink["500"];
 const brandAccentSoft = palette.seekPink["50"];
-const tokens = makeTokens({
+const brandAccentLight = palette.seekPink["200"];
+const tokens = {
   name: "apac",
   displayName: "APAC",
-  brand: palette.seekBlue["500"],
-  brandAccent,
-  brandAccentLight: palette.seekPink["200"],
-  brandAccentActive: darken(0.05, brandAccent),
-  brandAccentHover: lighten(0.05, brandAccent),
-  brandAccentSoft,
-  brandAccentSoftActive: darken(0.05, brandAccentSoft),
-  brandAccentSoftHover: darken(0.025, brandAccentSoft)
-});
+  legacy: true,
+  typography: {
+    fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif`,
+    webFont: null,
+    fontMetrics: extractFontMetricsForTheme(robotoMetrics),
+    fontWeight: {
+      regular: 400,
+      medium: 600,
+      strong: 700
+    },
+    heading: {
+      weight: {
+        weak: "regular",
+        regular: "medium"
+      },
+      level: {
+        "1": {
+          mobile: {
+            fontSize: 28,
+            rows: 9
+          },
+          tablet: {
+            fontSize: 42,
+            rows: 11
+          }
+        },
+        "2": {
+          mobile: {
+            fontSize: 21,
+            rows: 8
+          },
+          tablet: {
+            fontSize: 28,
+            rows: 9
+          }
+        },
+        "3": {
+          mobile: {
+            fontSize: 21,
+            rows: 7
+          },
+          tablet: {
+            fontSize: 21,
+            rows: 7
+          }
+        },
+        "4": {
+          mobile: {
+            fontSize: 18,
+            rows: 7
+          },
+          tablet: {
+            fontSize: 18,
+            rows: 7
+          }
+        }
+      }
+    },
+    text: {
+      xsmall: {
+        mobile: {
+          fontSize: 12,
+          rows: 5
+        },
+        tablet: {
+          fontSize: 12,
+          rows: 5
+        }
+      },
+      small: {
+        mobile: {
+          fontSize: 14,
+          rows: 5
+        },
+        tablet: {
+          fontSize: 14,
+          rows: 5
+        }
+      },
+      standard: {
+        mobile: {
+          fontSize: 16,
+          rows: 6
+        },
+        tablet: {
+          fontSize: 16,
+          rows: 6
+        }
+      },
+      large: {
+        mobile: {
+          fontSize: 18,
+          rows: 7
+        },
+        tablet: {
+          fontSize: 18,
+          rows: 7
+        }
+      }
+    }
+  },
+  contentWidth: {
+    xsmall: 400,
+    small: 660,
+    medium: 940,
+    large: 1280
+  },
+  grid: 4,
+  touchableSize: 11,
+  space: {
+    gutter: 6,
+    xxsmall: 1,
+    xsmall: 2,
+    small: 3,
+    medium: 5,
+    large: 8,
+    xlarge: 12,
+    xxlarge: 24,
+    xxxlarge: 30
+  },
+  transforms: {
+    touchable: "scale(0.95)"
+  },
+  transitions: {
+    fast: "transform .125s ease, opacity .125s ease",
+    touchable: "transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)"
+  },
+  border: {
+    radius: {
+      small: "2px",
+      standard: "4px",
+      large: "6px",
+      xlarge: "10px"
+    },
+    width: {
+      standard: 1,
+      large: 2
+    },
+    color: {
+      brandAccent,
+      brandAccentLight,
+      caution: palette.yellow["500"],
+      cautionLight: palette.yellow["300"],
+      critical,
+      criticalLight: palette.red["300"],
+      field: palette.grey["400"],
+      focus,
+      formAccent,
+      formAccentLight: palette.indigo["300"],
+      info: palette.blue["700"],
+      infoLight: palette.blue["300"],
+      neutral: palette.grey["700"],
+      neutralLight: palette.grey["200"],
+      neutralInverted: white,
+      positive: palette.mint["700"],
+      positiveLight: palette.mint["300"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["300"]
+    }
+  },
+  focusRingSize: 3,
+  shadows: {
+    small: [
+      `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 2px 2px -2px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 4px 4px -4px ${rgba(palette.grey["800"], 0.2)}`
+    ].join(", "),
+    medium: [
+      `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 8px 8px -4px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 12px 12px -8px ${rgba(palette.grey["800"], 0.2)}`
+    ].join(", "),
+    large: [
+      `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 12px 12px -4px ${rgba(palette.grey["800"], 0.1)}`,
+      `0 20px 20px -12px ${rgba(palette.grey["800"], 0.2)}`
+    ].join(", ")
+  },
+  color: {
+    foreground: {
+      brandAccent,
+      brandAccentLight,
+      caution: palette.yellow["900"],
+      cautionLight: palette.yellow["300"],
+      critical,
+      criticalLight: palette.red["300"],
+      formAccent,
+      formAccentLight: palette.indigo["300"],
+      info: palette.blue["700"],
+      infoLight: palette.blue["300"],
+      link: formAccent,
+      linkLight: palette.indigo["300"],
+      linkHover: formAccent,
+      linkVisited: legacyViolet["700"],
+      linkLightVisited: legacyViolet["300"],
+      neutral: palette.grey["700"],
+      neutralInverted: white,
+      positive: palette.mint["700"],
+      positiveLight: palette.mint["300"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["300"],
+      rating: palette.seekPink["500"],
+      secondary: palette.grey["500"],
+      secondaryInverted: rgba("#fff", 0.65)
+    },
+    background: {
+      body: palette.grey["50"],
+      bodyDark: palette.grey["900"],
+      brand,
+      brandAccent,
+      brandAccentActive: darken(0.05, brandAccent),
+      brandAccentHover: lighten(0.05, brandAccent),
+      brandAccentSoft,
+      brandAccentSoftActive: darken(0.05, brandAccentSoft),
+      brandAccentSoftHover: darken(0.025, brandAccentSoft),
+      caution: palette.yellow["500"],
+      cautionLight: palette.yellow["100"],
+      critical,
+      criticalActive: darken(0.05, critical),
+      criticalHover: saturate(0.1, lighten(0.05, critical)),
+      criticalLight: palette.red["100"],
+      criticalSoft: palette.red["50"],
+      criticalSoftActive: darken(0.05, palette.red["50"]),
+      criticalSoftHover: darken(0.025, palette.red["50"]),
+      formAccent,
+      formAccentActive: darken(0.05, formAccent),
+      formAccentHover: saturate(0.5, lighten(0.075, formAccent)),
+      formAccentSoft: palette.indigo["50"],
+      formAccentSoftActive: darken(0.05, palette.indigo["50"]),
+      formAccentSoftHover: darken(0.025, palette.indigo["50"]),
+      info: palette.blue["700"],
+      infoLight: palette.blue["100"],
+      neutral: palette.grey["700"],
+      neutralActive: darken(0.05, palette.grey["700"]),
+      neutralHover: lighten(0.05, palette.grey["700"]),
+      neutralLight: palette.grey["100"],
+      neutralSoft: palette.grey["50"],
+      neutralSoftActive: darken(0.05, palette.grey["50"]),
+      neutralSoftHover: darken(0.025, palette.grey["50"]),
+      positive: palette.mint["700"],
+      positiveLight: palette.mint["100"],
+      promote: legacyViolet["700"],
+      promoteLight: legacyViolet["100"],
+      surface: white,
+      surfaceDark: palette.grey["800"]
+    }
+  }
+};
 export {
   tokens
 };