braid-design-system 32.4.0 → 32.5.0

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

@@ -0,0 +1,190 @@
+"use strict";
+const polished = require("polished");
+const sideEffects_lib_themes_baseTokens_apac_cjs = require("../../../../side-effects/lib/themes/baseTokens/apac.cjs");
+const brandAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.seekPink["500"];
+const brandAccentSoft = sideEffects_lib_themes_baseTokens_apac_cjs.palette.seekPink["50"];
+const tokens = sideEffects_lib_themes_baseTokens_apac_cjs.makeTokens({
+  name: "seekJobs",
+  displayName: "SEEK Jobs",
+  brand: sideEffects_lib_themes_baseTokens_apac_cjs.palette.seekBlue["700"],
+  brandAccent,
+  brandAccentLight: sideEffects_lib_themes_baseTokens_apac_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),
+  tokenOverrides: {
+    legacy: false,
+    typography: {
+      fontFamily: 'SeekSans, "SeekSans Fallback", Arial',
+      webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
+      fontMetrics: {
+        capHeight: 783,
+        ascent: 1057,
+        descent: -274,
+        lineGap: 0,
+        unitsPerEm: 1e3
+      },
+      fontWeight: {
+        regular: 400,
+        medium: 500,
+        strong: 700
+      },
+      heading: {
+        weight: {
+          weak: "regular",
+          regular: "medium"
+        },
+        level: {
+          "1": {
+            mobile: {
+              fontSize: 28,
+              lineGap: 11
+            },
+            tablet: {
+              fontSize: 36,
+              lineGap: 14
+            }
+          },
+          "2": {
+            mobile: {
+              fontSize: 24,
+              lineGap: 11
+            },
+            tablet: {
+              fontSize: 30,
+              lineGap: 13
+            }
+          },
+          "3": {
+            mobile: {
+              fontSize: 22,
+              lineGap: 10
+            },
+            tablet: {
+              fontSize: 24,
+              lineGap: 11
+            }
+          },
+          "4": {
+            mobile: {
+              fontSize: 20,
+              lineGap: 9
+            },
+            tablet: {
+              fontSize: 20,
+              lineGap: 9
+            }
+          }
+        }
+      },
+      text: {
+        large: {
+          mobile: {
+            fontSize: 18,
+            lineGap: 13
+          },
+          tablet: {
+            fontSize: 18,
+            lineGap: 13
+          }
+        },
+        standard: {
+          mobile: {
+            fontSize: 16,
+            lineGap: 12
+          },
+          tablet: {
+            fontSize: 16,
+            lineGap: 12
+          }
+        },
+        small: {
+          mobile: {
+            fontSize: 14,
+            lineGap: 10
+          },
+          tablet: {
+            fontSize: 14,
+            lineGap: 10
+          }
+        },
+        xsmall: {
+          mobile: {
+            fontSize: 12,
+            lineGap: 9
+          },
+          tablet: {
+            fontSize: 12,
+            lineGap: 9
+          }
+        }
+      }
+    },
+    space: {
+      gutter: 8,
+      xxsmall: 2,
+      xsmall: 3,
+      small: 4,
+      medium: 6,
+      large: 8,
+      xlarge: 12,
+      xxlarge: 16,
+      xxxlarge: 24
+    },
+    focusRingSize: 6,
+    touchableSize: 12,
+    border: {
+      width: {
+        standard: 2,
+        large: 4
+      },
+      radius: {
+        small: "4px",
+        standard: "8px",
+        large: "16px",
+        xlarge: "24px"
+      },
+      color: {
+        formAccent: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"],
+        formAccentLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["300"],
+        focus: polished.rgba(sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["300"], 0.7),
+        promote: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["700"],
+        promoteLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["300"],
+        neutralLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["100"]
+      }
+    },
+    color: {
+      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"],
+        linkVisited: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["600"],
+        linkLightVisited: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["300"],
+        promote: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["700"],
+        promoteLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["300"],
+        rating: sideEffects_lib_themes_baseTokens_apac_cjs.palette.orange["600"]
+      },
+      background: {
+        body: "#fff",
+        bodyDark: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["800"],
+        formAccent: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"],
+        formAccentActive: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"]),
+        formAccentHover: polished.saturate(0.5, polished.lighten(0.075, sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["500"])),
+        formAccentSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["50"],
+        formAccentSoftActive: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["50"]),
+        formAccentSoftHover: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.violet["50"]),
+        promote: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["700"],
+        promoteLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.purple["100"],
+        neutralLight: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["75"],
+        neutralSoft: sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["75"],
+        neutralSoftActive: polished.darken(0.05, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["75"]),
+        neutralSoftHover: polished.darken(0.025, sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["75"])
+      }
+    }
+  }
+});
+exports.tokens = tokens;

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

@@ -0,0 +1,191 @@
+import { darken, lighten, rgba, saturate } from "polished";
+import { makeTokens, palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+const brandAccent = palette.seekPink["500"];
+const brandAccentSoft = palette.seekPink["50"];
+const tokens = makeTokens({
+  name: "seekJobs",
+  displayName: "SEEK Jobs",
+  brand: palette.seekBlue["700"],
+  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),
+  tokenOverrides: {
+    legacy: false,
+    typography: {
+      fontFamily: 'SeekSans, "SeekSans Fallback", Arial',
+      webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
+      fontMetrics: {
+        capHeight: 783,
+        ascent: 1057,
+        descent: -274,
+        lineGap: 0,
+        unitsPerEm: 1e3
+      },
+      fontWeight: {
+        regular: 400,
+        medium: 500,
+        strong: 700
+      },
+      heading: {
+        weight: {
+          weak: "regular",
+          regular: "medium"
+        },
+        level: {
+          "1": {
+            mobile: {
+              fontSize: 28,
+              lineGap: 11
+            },
+            tablet: {
+              fontSize: 36,
+              lineGap: 14
+            }
+          },
+          "2": {
+            mobile: {
+              fontSize: 24,
+              lineGap: 11
+            },
+            tablet: {
+              fontSize: 30,
+              lineGap: 13
+            }
+          },
+          "3": {
+            mobile: {
+              fontSize: 22,
+              lineGap: 10
+            },
+            tablet: {
+              fontSize: 24,
+              lineGap: 11
+            }
+          },
+          "4": {
+            mobile: {
+              fontSize: 20,
+              lineGap: 9
+            },
+            tablet: {
+              fontSize: 20,
+              lineGap: 9
+            }
+          }
+        }
+      },
+      text: {
+        large: {
+          mobile: {
+            fontSize: 18,
+            lineGap: 13
+          },
+          tablet: {
+            fontSize: 18,
+            lineGap: 13
+          }
+        },
+        standard: {
+          mobile: {
+            fontSize: 16,
+            lineGap: 12
+          },
+          tablet: {
+            fontSize: 16,
+            lineGap: 12
+          }
+        },
+        small: {
+          mobile: {
+            fontSize: 14,
+            lineGap: 10
+          },
+          tablet: {
+            fontSize: 14,
+            lineGap: 10
+          }
+        },
+        xsmall: {
+          mobile: {
+            fontSize: 12,
+            lineGap: 9
+          },
+          tablet: {
+            fontSize: 12,
+            lineGap: 9
+          }
+        }
+      }
+    },
+    space: {
+      gutter: 8,
+      xxsmall: 2,
+      xsmall: 3,
+      small: 4,
+      medium: 6,
+      large: 8,
+      xlarge: 12,
+      xxlarge: 16,
+      xxxlarge: 24
+    },
+    focusRingSize: 6,
+    touchableSize: 12,
+    border: {
+      width: {
+        standard: 2,
+        large: 4
+      },
+      radius: {
+        small: "4px",
+        standard: "8px",
+        large: "16px",
+        xlarge: "24px"
+      },
+      color: {
+        formAccent: palette.violet["500"],
+        formAccentLight: palette.violet["300"],
+        focus: rgba(palette.violet["300"], 0.7),
+        promote: palette.purple["700"],
+        promoteLight: palette.purple["300"],
+        neutralLight: palette.grey["100"]
+      }
+    },
+    color: {
+      foreground: {
+        formAccent: palette.violet["500"],
+        formAccentLight: palette.violet["300"],
+        link: palette.violet["500"],
+        linkHover: palette.violet["500"],
+        linkLight: palette.violet["300"],
+        linkVisited: palette.purple["600"],
+        linkLightVisited: palette.purple["300"],
+        promote: palette.purple["700"],
+        promoteLight: palette.purple["300"],
+        rating: palette.orange["600"]
+      },
+      background: {
+        body: "#fff",
+        bodyDark: palette.grey["800"],
+        formAccent: palette.violet["500"],
+        formAccentActive: darken(0.05, palette.violet["500"]),
+        formAccentHover: saturate(0.5, lighten(0.075, palette.violet["500"])),
+        formAccentSoft: palette.violet["50"],
+        formAccentSoftActive: darken(0.05, palette.violet["50"]),
+        formAccentSoftHover: darken(0.025, palette.violet["50"]),
+        promote: palette.purple["700"],
+        promoteLight: palette.purple["100"],
+        neutralLight: palette.grey["75"],
+        neutralSoft: palette.grey["75"],
+        neutralSoftActive: darken(0.05, palette.grey["75"]),
+        neutralSoftHover: darken(0.025, palette.grey["75"])
+      }
+    }
+  }
+});
+export {
+  tokens
+};

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

@@ -41,6 +41,7 @@ const getHoverColor = (x) => styles_lib_utils_index_cjs.isLight(x) ? polished.da
 const tokens = {
   name: "wireframe",
   displayName: "Wireframe",
+  legacy: false,
   typography: {
     fontFamily: '"Courier New", monospace',
     webFont: null,

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

@@ -38,6 +38,7 @@ const getHoverColor = (x) => isLight(x) ? darken(0.05, x) : lighten(0.05, x);
 const tokens = {
   name: "wireframe",
   displayName: "Wireframe",
+  legacy: false,
   typography: {
     fontFamily: '"Courier New", monospace',
     webFont: null,

package/dist/themes/seekJobs.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const styles_lib_themes_seekJobs_seekJobs_css_cjs = require("../styles/lib/themes/seekJobs/seekJobs.css.cjs");
+module.exports = styles_lib_themes_seekJobs_seekJobs_css_cjs.seekJobs_css;

package/dist/themes/seekJobs.d.ts

@@ -0,0 +1 @@
+export { _default$5 as default } from '../reset.js';

package/dist/themes/seekJobs.mjs

@@ -0,0 +1,4 @@
+import { seekJobs_css } from "../styles/lib/themes/seekJobs/seekJobs.css.mjs";
+export {
+  seekJobs_css as default
+};

package/dist/themes/wireframe.d.ts

@@ -1 +1 @@
-export { _default$5 as default } from '../reset.js';
+export { _default$6 as default } from '../reset.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.4.0",
+  "version": "32.5.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -86,6 +86,11 @@
       "import": "./dist/themes/seekBusiness.mjs",
       "require": "./dist/themes/seekBusiness.cjs"
     },
+    "./themes/seekJobs": {
+      "types": "./dist/themes/seekJobs.d.ts",
+      "import": "./dist/themes/seekJobs.mjs",
+      "require": "./dist/themes/seekJobs.cjs"
+    },
     "./themes/wireframe": {
       "types": "./dist/themes/wireframe.d.ts",
       "import": "./dist/themes/wireframe.mjs",
@@ -116,6 +121,7 @@
     "themes/apac",
     "themes/docs",
     "themes/seekBusiness",
+    "themes/seekJobs",
     "themes/wireframe"
   ],
   "dependencies": {
@@ -183,7 +189,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "11.8.1",
+    "sku": "11.9.2",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },

package/themes/seekJobs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/themes/seekJobs";
+export { default } from "../../dist/themes/seekJobs";

package/themes/seekJobs/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/themes/seekJobs.cjs",
+  "module": "../../dist/themes/seekJobs.mjs",
+  "types": "./index.d.ts"
+}