braid-design-system 31.0.0 → 31.2.2

package/lib/hooks/typography/typography.css.ts

@@ -11,6 +11,8 @@ import { vars } from '../../themes/vars.css';
 import { breakpointQuery, responsiveStyle } from '../../css/responsiveStyle';
 
 import { mapToProperty } from '../../utils';
+import { colorModeStyle } from '../../css/colorModeStyle';
+import { BoxBackgroundVariant } from '../../components/Box/Box';
 
 type Vars = typeof vars;
 type TextDefinition = Vars['textSize'];
@@ -96,115 +98,115 @@ export const heading = {
   '4': makeTypographyRules(vars.headingLevel['4'], 'heading4'),
 };
 
-const textLinkVars = createThemeContract({
-  color: null,
-  colorHover: null,
-  fontWeight: null,
-  textDecoration: null,
-  textDecorationHover: null,
+const textToneVars = createThemeContract({
+  critical: null,
+  caution: null,
+  info: null,
+  promote: null,
+  positive: null,
+  brandAccent: null,
+  formAccent: null,
+  neutral: null,
+  secondary: null,
+  link: null,
 });
 
-const regularLinkVars = assignVars(textLinkVars, {
-  color: vars.foregroundColor.link,
-  colorHover: vars.foregroundColor.linkHover,
-  fontWeight: vars.textWeight.medium,
-  textDecoration: 'none',
-  textDecorationHover: 'underline',
+const lightContextToneVars = assignVars(textToneVars, {
+  critical: vars.foregroundColor.critical,
+  caution: vars.foregroundColor.caution,
+  info: vars.foregroundColor.info,
+  promote: vars.foregroundColor.promote,
+  positive: vars.foregroundColor.positive,
+  brandAccent: vars.foregroundColor.brandAccent,
+  formAccent: vars.foregroundColor.formAccent,
+  neutral: vars.foregroundColor.neutral,
+  secondary: vars.foregroundColor.secondary,
+  link: vars.foregroundColor.link,
 });
 
-const weakLinkVars = assignVars(textLinkVars, {
-  color: 'inherit',
-  colorHover: 'inherit',
-  fontWeight: 'inherit',
-  textDecoration: 'underline',
-  textDecorationHover: 'underline',
+const darkContextToneVars = assignVars(textToneVars, {
+  critical: vars.foregroundColor.criticalLight,
+  caution: vars.foregroundColor.cautionLight,
+  info: vars.foregroundColor.infoLight,
+  promote: vars.foregroundColor.promoteLight,
+  positive: vars.foregroundColor.positiveLight,
+  brandAccent: vars.foregroundColor.brandAccentLight,
+  formAccent: vars.foregroundColor.formAccentLight,
+  neutral: vars.foregroundColor.neutralInverted,
+  secondary: vars.foregroundColor.secondaryInverted,
+  link: vars.foregroundColor.linkLight,
 });
 
-export const textLink = style({
-  color: textLinkVars.color,
-  fontWeight: textLinkVars.fontWeight,
-  textDecoration: textLinkVars.textDecoration,
-  ':hover': {
-    color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover,
-  },
-  ':focus': {
-    color: textLinkVars.colorHover,
-  },
-});
-
-export const regularLink = style({
-  vars: regularLinkVars,
-});
-
-export const weakLink = style({
-  vars: weakLinkVars,
-});
-
-export const textLinkVisited = style({
-  ':visited': {
-    color: vars.foregroundColor.linkVisited,
-  },
-});
-
-export const tone = styleVariants(
-  {
-    brandAccent: vars.foregroundColor.brandAccent,
-    caution: vars.foregroundColor.caution,
-    critical: vars.foregroundColor.critical,
-    formAccent: vars.foregroundColor.formAccent,
-    info: vars.foregroundColor.info,
-    positive: vars.foregroundColor.positive,
-    promote: vars.foregroundColor.promote,
-    secondary: vars.foregroundColor.secondary,
-    link: vars.foregroundColor.link,
-  },
-  mapToProperty('color'),
-);
-
-export const invertableTone = {
-  neutral: styleVariants({
-    light: {
-      color: vars.foregroundColor.neutral,
-    },
-    dark: {
-      color: vars.foregroundColor.neutralInverted,
+export const lightModeTone = styleVariants({
+  light: colorModeStyle({
+    lightMode: {
+      vars: lightContextToneVars,
     },
   }),
-  secondary: styleVariants({
-    light: {
-      color: vars.foregroundColor.secondary,
-    },
-    dark: {
-      color: vars.foregroundColor.secondaryInverted,
-    },
-  }),
-  brandAccent: styleVariants({
-    light: {
-      color: vars.foregroundColor.brandAccent,
-    },
-    dark: {
-      color: vars.foregroundColor.brandAccentLight,
+  dark: colorModeStyle({
+    lightMode: {
+      vars: darkContextToneVars,
     },
   }),
-  formAccent: styleVariants({
-    light: {
-      color: vars.foregroundColor.formAccent,
-    },
-    dark: {
-      color: vars.foregroundColor.formAccentLight,
+});
+
+export const darkModeTone = styleVariants({
+  light: colorModeStyle({
+    darkMode: {
+      vars: lightContextToneVars,
     },
   }),
-  critical: styleVariants({
-    light: {
-      color: vars.foregroundColor.critical,
-    },
-    dark: {
-      color: vars.foregroundColor.criticalLight,
+  dark: colorModeStyle({
+    darkMode: {
+      vars: darkContextToneVars,
     },
   }),
+});
+
+const neutralOverrideForBackground: Partial<
+  Record<BoxBackgroundVariant, keyof typeof textToneVars>
+> = {
+  criticalLight: 'critical',
+  criticalSoft: 'critical',
+  criticalSoftActive: 'critical',
+  criticalSoftHover: 'critical',
+  caution: 'caution',
+  cautionLight: 'caution',
+  positiveLight: 'positive',
+  infoLight: 'info',
+  promoteLight: 'promote',
 };
 
+export const lightModeNeutralOverride = styleVariants(
+  neutralOverrideForBackground,
+  (textTone) =>
+    colorModeStyle({
+      lightMode: {
+        vars: {
+          [textToneVars.neutral]:
+            textToneVars[textTone as keyof typeof textToneVars],
+        },
+      },
+    }),
+);
+
+export const darkModeNeutralOverride = styleVariants(
+  neutralOverrideForBackground,
+  (textTone) =>
+    colorModeStyle({
+      darkMode: {
+        vars: {
+          [textToneVars.neutral]:
+            textToneVars[textTone as keyof typeof textToneVars],
+        },
+      },
+    }),
+);
+
+export const tone = styleVariants(textToneVars, (toneVar) => ({
+  color: toneVar,
+}));
+
 const makeTouchableSpacing = (touchableHeight: string, textHeight: string) => {
   const space = calc(touchableHeight).subtract(textHeight).divide(2).toString();
 

package/lib/hooks/useIcon/index.ts

@@ -3,7 +3,7 @@ import assert from 'assert';
 import clsx from 'clsx';
 
 import { OptionalTitle } from '../../components/icons/SVGTypes';
-import { BoxProps } from '../../components/Box/Box';
+import { PublicBoxProps } from '../../components/Box/Box';
 import { TextContext } from '../../components/Text/TextContext';
 import HeadingContext from '../../components/Heading/HeadingContext';
 import { textSize, useTextTone, UseTextProps } from '../typography';
@@ -50,7 +50,9 @@ const detaultVerticalCorrection = {
 export default (
   { size, tone, alignY, data, ...titleProps }: UseIconProps,
   { verticalCorrection = detaultVerticalCorrection }: PrivateIconProps = {},
-): BoxProps => {
+  // TODO: COLORMODE RELEASE
+  // Revert to BoxProps
+): PublicBoxProps => {
   const textContext = useContext(TextContext);
   const headingContext = useContext(HeadingContext);
   const inheritedTone =

package/lib/playroom/FrameComponent.tsx

@@ -1,5 +1,5 @@
 import '../../reset';
-import React, { Fragment, ReactNode } from 'react';
+import React, { useEffect, Fragment, ReactNode } from 'react';
 import {
   BraidProvider,
   makeLinkComponent,
@@ -8,6 +8,7 @@ import {
 } from '../components';
 import { BraidTheme } from '../themes/BraidTheme';
 import { PlayroomStateProvider } from './playroomState';
+import { darkMode } from '../css/atoms/sprinkles.css';
 
 interface Props {
   theme: BraidTheme;
@@ -39,19 +40,51 @@ const ResponsiveReady = ({ children }: { children: ReactNode }) => {
   return <>{responsiveReady ? children : null}</>;
 };
 
-export default ({ theme, children }: Props) => (
-  <Fragment>
-    <div
-      dangerouslySetInnerHTML={{
-        __html: theme.webFonts.map((font) => font.linkTag).join(''),
-      }}
-    />
-    <PlayroomStateProvider>
-      <BraidProvider theme={theme} linkComponent={PlayroomLink}>
-        <ToastProvider>
-          <ResponsiveReady>{children}</ResponsiveReady>
-        </ToastProvider>
-      </BraidProvider>
-    </PlayroomStateProvider>
-  </Fragment>
-);
+export default ({ theme, children }: Props) => {
+  // TODO: COLORMODE RELEASE
+  // Remove color mode toggle
+  useEffect(() => {
+    let code = '';
+    const darkTrigger = 'braiddark';
+    const lightTrigger = 'braidlight';
+    const longestTrigger = Math.max(lightTrigger.length, darkTrigger.length);
+    const colorModeToggle = (ev: KeyboardEvent) => {
+      code += ev.key;
+      if (code.substr(code.length - darkTrigger.length) === darkTrigger) {
+        document.documentElement.classList.add(darkMode);
+        code = '';
+      }
+
+      if (code.substr(code.length - lightTrigger.length) === lightTrigger) {
+        document.documentElement.classList.remove(darkMode);
+        code = '';
+      }
+
+      if (code.length > longestTrigger) {
+        code = code.substr(code.length - longestTrigger);
+      }
+    };
+    window.addEventListener('keydown', colorModeToggle);
+
+    return () => {
+      window.removeEventListener('keydown', colorModeToggle);
+    };
+  }, []);
+
+  return (
+    <Fragment>
+      <div
+        dangerouslySetInnerHTML={{
+          __html: theme.webFonts.map((font) => font.linkTag).join(''),
+        }}
+      />
+      <PlayroomStateProvider>
+        <BraidProvider theme={theme} linkComponent={PlayroomLink}>
+          <ToastProvider>
+            <ResponsiveReady>{children}</ResponsiveReady>
+          </ToastProvider>
+        </BraidProvider>
+      </PlayroomStateProvider>
+    </Fragment>
+  );
+};

package/lib/playroom/components.ts

@@ -6,6 +6,7 @@ export { AccordionItem } from '../components/Accordion/AccordionItem.playroom';
 export { Alert } from '../components/Alert/Alert.playroom';
 export { Autosuggest } from '../components/Autosuggest/Autosuggest.playroom';
 export { Badge } from '../components/Badge/Badge.playroom';
+export { Box } from '../components/Box/Box.playroom';
 export { Button } from '../components/Button/Button.playroom';
 export { ButtonLink } from '../components/ButtonLink/ButtonLink.playroom';
 export { Card } from '../components/Card/Card.playroom';

package/lib/playroom/useScope.ts

@@ -1,12 +1,54 @@
 import '../../reset';
+import { useEffect, useState } from 'react';
 import { useToast, useResponsiveValue } from '../components';
 import { vars, atoms, breakpoints } from '../../css';
 import { usePlayroomStore } from './playroomState';
-import { RequiredResponsiveObject } from '../css/atoms/sprinkles.css';
+import { darkMode, RequiredResponsiveObject } from '../css/atoms/sprinkles.css';
 
 export default function useScope() {
   const responsiveValue = useResponsiveValue();
 
+  // TODO: COLORMODE RELEASE
+  // Revisit when dark mode frames are first class
+  const [colorMode, setColorMode] = useState<'lightMode' | 'darkMode'>(
+    'lightMode',
+  );
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'class'
+        ) {
+          setColorMode(
+            document.documentElement.classList.contains(darkMode)
+              ? 'darkMode'
+              : 'lightMode',
+          );
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [colorMode]);
+
+  function playroomColorModeValue(
+    value: Record<'lightMode' | 'darkMode', any>,
+  ) {
+    if (typeof value !== 'object' || !(value.darkMode || value.lightMode)) {
+      return;
+    }
+
+    return document.documentElement.classList.contains(darkMode)
+      ? value.darkMode
+      : value.lightMode;
+  }
+
   function playroomResponsiveValue<Value>(
     value: RequiredResponsiveObject<Value>,
   ): Value {
@@ -36,6 +78,7 @@ export default function useScope() {
     breakpoints,
     showToast: useToast(),
     responsiveValue: playroomResponsiveValue,
+    colorModeValue: playroomColorModeValue,
     ...usePlayroomStore(),
   };
 }

package/lib/stories/all.stories.tsx

@@ -7,7 +7,11 @@ import * as themes from '../themes';
 import { ComponentExample, ComponentScreenshot } from '../../site/src/types';
 import { PlayroomStateProvider } from '../playroom/playroomState';
 import { useSourceFromExample } from '../utils/useSourceFromExample';
-import { BraidProvider, ToastProvider, Box } from '../components';
+import { BraidProvider, ToastProvider } from '../components';
+// TODO: COLORMODE RELEASE
+// Use public import
+import { Box } from '../components/Box/Box';
+import { darkMode } from '../css/atoms/sprinkles.css';
 
 const webFontLinkTags = uniq(
   flatten(values(themes).map((theme) => theme.webFonts)).map(
@@ -105,40 +109,67 @@ Object.keys(allStories)
         : theme.name !== 'wireframe';
     });
 
+    if (!docs.screenshotOnlyInWireframe) {
+      storyThemes.unshift({
+        ...themes.apac,
+        displayName: 'apacDark',
+        name: 'apacDark',
+      });
+    }
+
     storyThemes.forEach((theme) => {
-      const renderStory = () => (
-        <BrowserRouter>
-          <BraidProvider theme={theme}>
-            <ToastProvider>
-              <style type="text/css">
-                {`
+      const renderStory = () => {
+        if (theme.name === 'apacDark') {
+          document.documentElement.classList.add(darkMode);
+        } else {
+          document.documentElement.classList.remove(darkMode);
+        }
+
+        return (
+          <BrowserRouter>
+            <BraidProvider theme={theme}>
+              <ToastProvider>
+                <style type="text/css">
+                  {`
               .noAnimation * {
                 animation-delay: -0.0001s !important;
                 animation-duration: 0s !important;
                 animation-play-state: paused !important;
-              }`}
-              </style>
-              <div
-                className="noAnimation"
-                style={{
-                  background: 'white',
-                }}
-              >
-                {docs.examples.map((example, i) => (
-                  <PlayroomStateProvider key={i}>
-                    <RenderExample
-                      example={{
-                        ...example,
-                        label: example.label ?? componentName,
-                      }}
-                    />
-                  </PlayroomStateProvider>
-                ))}
-              </div>
-            </ToastProvider>
-          </BraidProvider>
-        </BrowserRouter>
-      );
+              }
+              .artboard {
+                --deepColor: ${
+                  theme.name === 'apacDark'
+                    ? `rgba(255, 255, 255, .1)`
+                    : `rgba(0, 0, 0, .05)`
+                };
+                --cubeSize: 12px;
+                background-color: ${
+                  theme.name === 'apacDark' ? `black` : `white`
+                };
+                background-image: linear-gradient(45deg, var(--deepColor) 25%, transparent 25%, transparent 75%, var(--deepColor) 75%, var(--deepColor)),
+                  linear-gradient(45deg, var(--deepColor) 25%, transparent 25%, transparent 75%, var(--deepColor) 75%, var(--deepColor));
+                background-size: calc(var(--cubeSize) * 2) calc(var(--cubeSize) * 2);
+                background-position: 0 0, var(--cubeSize) var(--cubeSize);
+              }
+              `}
+                </style>
+                <div className="noAnimation artboard">
+                  {docs.examples.map((example, i) => (
+                    <PlayroomStateProvider key={i}>
+                      <RenderExample
+                        example={{
+                          ...example,
+                          label: example.label ?? componentName,
+                        }}
+                      />
+                    </PlayroomStateProvider>
+                  ))}
+                </div>
+              </ToastProvider>
+            </BraidProvider>
+          </BrowserRouter>
+        );
+      };
 
       stories.add(theme.name, renderStory, {
         layout: 'fullscreen',

package/lib/themes/baseTokens/apac.ts

@@ -225,24 +225,31 @@ export const makeTokens = ({
         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: palette.purple['700'],
+        linkLightVisited: palette.purple['300'],
         neutral: palette.grey['700'],
         neutralInverted: white,
         positive: palette.mint['700'],
+        positiveLight: palette.mint['300'],
         promote: palette.purple['700'],
+        promoteLight: palette.purple['300'],
         rating: '#f57c00',
         secondary: palette.grey['500'],
         secondaryInverted: rgba('#fff', 0.65),
       },
       background: {
         body: palette.grey['50'],
+        bodyDark: palette.grey['900'],
         brand,
         brandAccent,
         brandAccentActive,
@@ -279,6 +286,7 @@ export const makeTokens = ({
         promote: palette.purple['700'],
         promoteLight: palette.purple['100'],
         surface: white,
+        surfaceDark: palette.grey['800'],
       },
     },
   };

package/lib/themes/catho/tokens.ts

@@ -1,4 +1,4 @@
-import { darken, lighten, mix, tint } from 'polished';
+import { darken, lighten, tint } from 'polished';
 import {
   findClosestAccessibleLighterColor,
   getAccessibleVariant,
@@ -30,6 +30,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);
@@ -185,7 +194,7 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight,
       caution,
-      cautionLight: mix(0.6, caution, getLightVariant(caution)),
+      cautionLight,
       critical,
       criticalLight,
       field: '#999999',
@@ -193,14 +202,14 @@ const tokens: BraidTokens = {
       formAccent,
       formAccentLight,
       info,
-      infoLight: mix(0.3, info, getLightVariant(info)),
+      infoLight,
       neutral,
       neutralInverted: white,
       neutralLight: '#e0e0e0',
       positive,
-      positiveLight: mix(0.3, positive, getLightVariant(positive)),
+      positiveLight,
       promote,
-      promoteLight: mix(0.3, promote, getLightVariant(promote)),
+      promoteLight,
     },
   },
   focusRingSize: 2,
@@ -217,18 +226,24 @@ 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,
       neutralInverted: white,
       positive: getAccessibleVariant(positive),
+      positiveLight,
       promote: getAccessibleVariant(promote),
+      promoteLight,
       rating: '#f36e23',
       secondary,
       secondaryInverted: 'hsla(0, 0%, 100%, 0.65)',
@@ -236,6 +251,7 @@ const tokens: BraidTokens = {
     background: {
       body: '#f2f2f2',
       brand: '#0037e9',
+      bodyDark: 'black',
       brandAccent,
       brandAccentActive: getActiveColor(brandAccent),
       brandAccentHover: getHoverColor(brandAccent),
@@ -270,7 +286,8 @@ const tokens: BraidTokens = {
       positiveLight: getLightVariant(positive),
       promote,
       promoteLight: getLightVariant(promote),
-      surface: 'white',
+      surface: white,
+      surfaceDark: '#222',
     },
   },
 };

package/lib/themes/docs/tokens.ts

@@ -192,24 +192,31 @@ const tokens: BraidTokens = {
       brandAccent,
       brandAccentLight: palette.grey['200'],
       caution: palette.yellow['900'],
+      cautionLight: palette.yellow['300'],
       critical: palette.red['700'],
       criticalLight: palette.red['400'],
       formAccent,
       formAccentLight: palette.indigo['400'],
       info: palette.blue['700'],
+      infoLight: palette.blue['400'],
       link,
       linkHover: link,
+      linkLight: palette.indigo['300'],
       linkVisited,
+      linkLightVisited: linkVisited,
       neutral: black,
       neutralInverted: palette.grey['100'],
       positive: palette.mint['700'],
+      positiveLight: palette.mint['400'],
       promote: palette.purple['700'],
+      promoteLight: palette.purple['400'],
       rating: black,
       secondary,
       secondaryInverted: rgba('#fff', 0.65),
     },
     background: {
       body: white,
+      bodyDark: darken(0.04, palette.grey['900']),
       brand: palette.grey['900'],
       brandAccent,
       brandAccentActive: brandAccent,
@@ -246,6 +253,7 @@ const tokens: BraidTokens = {
       promote: palette.purple['600'],
       promoteLight: palette.purple['100'],
       surface: white,
+      surfaceDark: palette.grey['900'],
     },
   },
 };