braid-design-system 31.0.0 → 31.2.2

package/lib/themes/makeBraidTheme.ts

@@ -107,7 +107,10 @@ const makeWebFonts = (tokens: TreatTheme) => {
 const makeRuntimeTokens = (tokens: TreatTheme) => ({
   name: tokens.name,
   displayName: tokens.displayName,
-  background: tokens.color.background.body,
+  background: {
+    lightMode: tokens.color.background.body,
+    darkMode: tokens.color.background.bodyDark,
+  },
   webFonts: makeWebFonts(tokens),
   space: {
     grid: tokens.grid,

package/lib/themes/occ/tokens.ts

@@ -1,5 +1,5 @@
 import { BraidTokens } from '../tokenType';
-import { darken, lighten, mix, tint } from 'polished';
+import { darken, desaturate, lighten, tint } from 'polished';
 import {
   findClosestAccessibleLighterColor,
   getAccessibleVariant,
@@ -30,6 +30,18 @@ const brandAccentLight = findClosestAccessibleLighterColor(
 );
 const formAccentLight = findClosestAccessibleLighterColor(formAccent, neutral);
 const criticalLight = findClosestAccessibleLighterColor(critical, neutral);
+const cautionLight = findClosestAccessibleLighterColor(caution, neutral);
+const infoLight = findClosestAccessibleLighterColor(info, neutral);
+const linkLight = findClosestAccessibleLighterColor(link, neutral);
+const linkLightVisited = findClosestAccessibleLighterColor(
+  linkVisited,
+  neutral,
+);
+const positiveLight = findClosestAccessibleLighterColor(
+  desaturate(0.5, positive),
+  neutral,
+);
+const promoteLight = findClosestAccessibleLighterColor(promote, neutral);
 
 const getActiveColor = (x: string) =>
   isLight(x) ? darken(0.1, x) : darken(0.05, x);
@@ -185,7 +197,7 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution,
-      cautionLight: mix(0.6, caution, getLightVariant(caution)),
+      cautionLight,
       critical,
       criticalLight,
       field: '#dddddd',
@@ -193,14 +205,14 @@ const tokens: BraidTokens = {
       formAccent,
       formAccentLight,
       info,
-      infoLight: mix(0.3, info, getLightVariant(info)),
+      infoLight,
       neutral: black,
       neutralInverted: white,
       neutralLight: '#dddddd',
       positive,
-      positiveLight: mix(0.3, positive, getLightVariant(positive)),
+      positiveLight,
       promote,
-      promoteLight: mix(0.3, promote, getLightVariant(promote)),
+      promoteLight,
     },
   },
   focusRingSize: 2,
@@ -217,24 +229,31 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution: getAccessibleVariant(caution, caution),
+      cautionLight,
       critical: getAccessibleVariant(critical),
       criticalLight,
       formAccent,
       formAccentLight,
       info: getAccessibleVariant(info),
+      infoLight,
       link,
       linkHover: link,
+      linkLight,
       linkVisited,
+      linkLightVisited,
       neutral: black,
       neutralInverted: white,
       positive: getAccessibleVariant(positive),
+      positiveLight,
       promote: getAccessibleVariant(promote),
+      promoteLight,
       rating: '#f36e23',
       secondary,
       secondaryInverted: 'hsla(0, 0%, 100%, 0.65)',
     },
     background: {
       body: '#f5f5f8',
+      bodyDark: 'black',
       brand,
       brandAccent,
       brandAccentActive: getActiveColor(brandAccent),
@@ -271,6 +290,7 @@ const tokens: BraidTokens = {
       promote,
       promoteLight: getLightVariant(promote),
       surface: white,
+      surfaceDark: '#222',
     },
   },
 };

package/lib/themes/seekAnz/tokens.ts

@@ -1,4 +1,4 @@
-import { darken, mix, rgba, lighten, tint } from 'polished';
+import { darken, rgba, lighten, tint, desaturate } from 'polished';
 import {
   findClosestAccessibleLighterColor,
   getAccessibleVariant,
@@ -30,6 +30,18 @@ const brandAccentLight = findClosestAccessibleLighterColor(
 );
 const formAccentLight = findClosestAccessibleLighterColor(formAccent, neutral);
 const criticalLight = findClosestAccessibleLighterColor(critical, neutral);
+const cautionLight = findClosestAccessibleLighterColor(caution, neutral);
+const infoLight = findClosestAccessibleLighterColor(info, neutral);
+const linkLight = findClosestAccessibleLighterColor(link, neutral);
+const linkLightVisited = findClosestAccessibleLighterColor(
+  linkVisited,
+  neutral,
+);
+const positiveLight = findClosestAccessibleLighterColor(
+  desaturate(0.5, positive),
+  neutral,
+);
+const promoteLight = findClosestAccessibleLighterColor(promote, neutral);
 
 const getActiveColor = (x: string) =>
   isLight(x) ? darken(0.1, x) : darken(0.05, x);
@@ -186,7 +198,7 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution,
-      cautionLight: mix(0.6, caution, getLightVariant(caution)),
+      cautionLight,
       critical,
       criticalLight,
       field: '#898989',
@@ -194,14 +206,14 @@ const tokens: BraidTokens = {
       formAccent,
       formAccentLight,
       info,
-      infoLight: mix(0.3, info, getLightVariant(info)),
+      infoLight,
       neutral: black,
       neutralLight: '#d6d6d6',
       neutralInverted: white,
       positive,
-      positiveLight: mix(0.3, positive, getLightVariant(positive)),
+      positiveLight,
       promote,
-      promoteLight: mix(0.3, promote, getLightVariant(promote)),
+      promoteLight,
     },
   },
   focusRingSize: 2,
@@ -218,24 +230,31 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution: getAccessibleVariant(caution, caution),
+      cautionLight,
       critical: getAccessibleVariant(critical),
       criticalLight,
       formAccent,
       formAccentLight,
       info: getAccessibleVariant(info),
+      infoLight,
       link,
       linkHover: link,
+      linkLight,
       linkVisited,
+      linkLightVisited,
       neutral: black,
       neutralInverted: white,
       positive: getAccessibleVariant(positive),
+      positiveLight,
       promote: getAccessibleVariant(promote),
+      promoteLight,
       rating: '#f57c00',
       secondary,
       secondaryInverted: 'hsla(0, 0%, 100%, 0.65)',
     },
     background: {
       body: '#eee',
+      bodyDark: 'black',
       brand,
       brandAccent,
       brandAccentActive: getActiveColor(brandAccent),
@@ -272,6 +291,7 @@ const tokens: BraidTokens = {
       promote,
       promoteLight: getLightVariant(promote),
       surface: white,
+      surfaceDark: '#333',
     },
   },
 };

package/lib/themes/tokenType.ts

@@ -105,18 +105,24 @@ export interface BraidTokens {
     foreground: {
       brandAccentLight: string;
       brandAccent: string;
+      cautionLight: string;
       caution: string;
       criticalLight: string;
       critical: string;
       formAccentLight: string;
       formAccent: string;
+      infoLight: string;
       info: string;
+      linkLight: string;
       link: string;
       linkHover: string;
       linkVisited: string;
+      linkLightVisited: string;
       neutral: string;
       neutralInverted: string;
+      positiveLight: string;
       positive: string;
+      promoteLight: string;
       promote: string;
       rating: string;
       secondary: string;
@@ -124,6 +130,7 @@ export interface BraidTokens {
     };
     background: {
       body: string;
+      bodyDark: string;
       brand: string;
       brandAccent: string;
       brandAccentActive: string;
@@ -160,6 +167,7 @@ export interface BraidTokens {
       promote: string;
       promoteLight: string;
       surface: string;
+      surfaceDark: string;
     };
   };
 }

package/lib/themes/wireframe/tokens.ts

@@ -1,4 +1,4 @@
-import { darken, lighten, mix, tint } from 'polished';
+import { darken, lighten, tint } from 'polished';
 import {
   findClosestAccessibleLighterColor,
   getAccessibleVariant,
@@ -29,6 +29,15 @@ const brandAccentLight = findClosestAccessibleLighterColor(
 );
 const formAccentLight = findClosestAccessibleLighterColor(formAccent, neutral);
 const criticalLight = findClosestAccessibleLighterColor(critical, neutral);
+const cautionLight = findClosestAccessibleLighterColor(caution, neutral);
+const infoLight = findClosestAccessibleLighterColor(info, neutral);
+const linkLight = findClosestAccessibleLighterColor(link, neutral);
+const linkLightVisited = findClosestAccessibleLighterColor(
+  linkVisited,
+  neutral,
+);
+const positiveLight = findClosestAccessibleLighterColor(positive, neutral);
+const promoteLight = findClosestAccessibleLighterColor(promote, neutral);
 
 const getActiveColor = (x: string) =>
   isLight(x) ? darken(0.1, x) : darken(0.05, x);
@@ -184,7 +193,7 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution,
-      cautionLight: mix(0.6, caution, getLightVariant(caution)),
+      cautionLight,
       critical,
       criticalLight,
       field: '#333',
@@ -192,14 +201,14 @@ const tokens: BraidTokens = {
       formAccent,
       formAccentLight,
       info,
-      infoLight: mix(0.3, info, getLightVariant(info)),
+      infoLight,
       neutral: black,
       neutralInverted: white,
       neutralLight: '#777',
       positive,
-      positiveLight: mix(0.3, positive, getLightVariant(positive)),
+      positiveLight,
       promote,
-      promoteLight: mix(0.3, promote, getLightVariant(promote)),
+      promoteLight,
     },
   },
   focusRingSize: 2,
@@ -216,24 +225,31 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution: getAccessibleVariant(caution, caution),
+      cautionLight,
       critical: getAccessibleVariant(critical),
       criticalLight,
       formAccent,
       formAccentLight,
       info: getAccessibleVariant(info),
+      infoLight,
       link,
       linkHover: link,
+      linkLight,
+      linkLightVisited,
       linkVisited,
       neutral: black,
       neutralInverted: white,
       positive: getAccessibleVariant(positive),
+      positiveLight,
       promote: getAccessibleVariant(promote),
+      promoteLight,
       rating: black,
       secondary,
       secondaryInverted: 'hsla(0, 0%, 100%, 0.65)',
     },
     background: {
       body: 'whitesmoke',
+      bodyDark: 'black',
       brand: black,
       brandAccent,
       brandAccentActive: getActiveColor(brandAccent),
@@ -270,6 +286,7 @@ const tokens: BraidTokens = {
       promote,
       promoteLight: getLightVariant(promote),
       surface: white,
+      surfaceDark: '#222',
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.0.0",
+  "version": "31.2.2",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [
@@ -159,7 +159,7 @@
     "workerpool": "^6.1.5"
   },
   "volta": {
-    "node": "12.14.1",
+    "node": "16.13.0",
     "yarn": "1.21.1"
   }
 }

package/sku.config.js

@@ -18,6 +18,7 @@ const entries = Boolean(process.env.DEBUG_IE)
 module.exports = {
   srcPaths: [
     'lib',
+    'color-mode',
     'codemod/src',
     'css',
     'themes',

package/sku.routes.js

@@ -21,6 +21,8 @@ const getPages = (relativePath) => {
   return source.match(/('.*')(?=:)/g).map((x) => x.split("'")[1]);
 };
 
+// TODO: COLORMODE RELEASE
+// Remove `colorModeStyle` from `undocumentedExports.json`
 const cssNames = getExports('css/index.ts', 'css');
 const componentNames = getExports('lib/components/index.ts');
 const iconNames = getExports('lib/components/icons/index.ts');

package/tsconfig.json

@@ -17,6 +17,7 @@
   },
   "include": [
     "/home/runner/work/braid-design-system/braid-design-system/lib",
+    "/home/runner/work/braid-design-system/braid-design-system/color-mode",
     "/home/runner/work/braid-design-system/braid-design-system/codemod/src",
     "/home/runner/work/braid-design-system/braid-design-system/css",
     "/home/runner/work/braid-design-system/braid-design-system/themes",

package/lib/components/Card/Card.css.ts

@@ -1,6 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const toneKeyline = style({
-  borderTopRightRadius: '0 !important',
-  borderBottomRightRadius: '0 !important',
-});