braid-design-system 31.0.0 → 31.2.2

package/.nvmrc

@@ -1 +1 @@
-12.14.1
+16.13.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # braid-design-system
 
+## 31.2.2
+
+### Patch Changes
+
+- **BraidProvider:** Add `backgroundColor` to html node when `styleBody` is set (defaults to `true`) ([#1047](https://github.com/seek-oss/braid-design-system/pull/1047))
+
+## 31.2.1
+
+### Patch Changes
+
+- useIcon: Return props compatible with public Box component ([#1045](https://github.com/seek-oss/braid-design-system/pull/1045))
+
+## 31.2.0
+
+### Minor Changes
+
+- **vars:** Add light variant foreground colors ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+  **New foregrounds**
+  The following foregrounds are now available on the `vars.foregroundColor` theme object:
+
+  - `cautionLight`
+  - `infoLight`
+  - `linkLight`
+  - `linkLightVisited`
+  - `positiveLight`
+  - `promoteLight`
+
+- **Text:** Improve contrast of `caution`, `positive`, `info`, `promote` and `link` tones ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+  When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.
+
+### Patch Changes
+
+- **OverflowMenu:** Use `neutral` tone button style ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+- **Alert, Card, Toast:** Improve highlight keyline ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+  Ensures that components using a highlight keyline have the correct border radius and mask their overflow correctly.
+
+- **Alert, Autosuggest, Tag, TextField:** Use `neutral` tone button style for clear action ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+- **Box:** Reset background color on `input` and `select` elements ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+  When specifying a `component` of `input` or `select` the background color was not being reset, falling through to the user agent styles. Reseting it to `transparent` to ensure predicatble styles across browsers and colour modes.
+
+- **MenuItem, MenuItemLink, MenuItemCheckbox:** Use `span` elements internally for more valid HTML. ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+- **Loader:** Use current text color ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))
+
+## 31.1.0
+
+### Minor Changes
+
+- **IconTip:** Add tip icon ([#1040](https://github.com/seek-oss/braid-design-system/pull/1040))
+
+- **IconZoomIn, IconZoomOut:** Add zoom in/out icons ([#1035](https://github.com/seek-oss/braid-design-system/pull/1035))
+
 ## 31.0.0
 
 ### Major Changes

package/color-mode/index.ts

@@ -0,0 +1,9 @@
+import { darkMode } from '../lib/css/atoms/sprinkles.css';
+const flag = '_bdsdm=1';
+// TODO: COLORMODE RELEASE
+// Finalise import contract
+export const __experimentalDarkMode__ = `
+<script>
+((l,p)=>{try{r=new RegExp(\`[\?&]\${p}\`);if(r.test(l.search)){history.replaceState(null,null,l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('${darkMode}')}}catch(e){}})(location,'${flag}')
+</script>
+`;

package/css/atoms.docs.tsx

@@ -9,9 +9,8 @@ import {
   UnresponsiveProperties,
   BoxShadow,
 } from '../lib/css/atoms/atomicProperties';
-import { atoms } from '../lib/css/atoms/atoms';
+import { atoms } from '../css';
 import {
-  Box,
   Stack,
   Columns,
   Column,
@@ -22,6 +21,9 @@ import {
   Strong,
   Alert,
 } from '../lib/components';
+// TODO: COLORMODE RELEASE
+// Use public import
+import { Box } from '../lib/components/Box/Box';
 import source from '../lib/utils/source.macro';
 import Code from '../site/src/App/Code/Code';
 import { ThemedExample } from '../site/src/App/ThemeSetting';
@@ -134,17 +136,13 @@ const docs: CssDoc = {
                 Object.keys(
                   unresponsiveProperties,
                 ) as Array<UnresponsiveProperties>
-              )
-                // filtering out `background` as it’s not public api due to
-                // impact on context related contrast handling..
-                .filter((prop) => prop !== 'background')
-                .map((prop) => (
-                  <AtomicProperty
-                    key={prop}
-                    name={prop}
-                    values={Object.keys(unresponsiveProperties[prop])}
-                  />
-                ))}
+              ).map((prop) => (
+                <AtomicProperty
+                  key={prop}
+                  name={prop}
+                  values={Object.keys(unresponsiveProperties[prop])}
+                />
+              ))}
             </Tiles>
           </Box>
         </>
@@ -173,7 +171,7 @@ const docs: CssDoc = {
               };
             `}
           </Code>
-          <ThemedExample background="body">
+          <ThemedExample>
             <Stack space="gutter" align="center">
               <Inline space="gutter" align="center" alignY="center">
                 <Box
@@ -318,7 +316,7 @@ const docs: CssDoc = {
               };
             `}
           </Code>
-          <ThemedExample background="body">
+          <ThemedExample>
             <Inline space="medium" align="center">
               <Box
                 background="formAccentHover"
@@ -377,7 +375,7 @@ const docs: CssDoc = {
               ways when upgrading Braid.
             </Text>
           </Alert>
-          <ThemedExample background="body">
+          <ThemedExample>
             <Tiles space="large" columns={{ mobile: 1, desktop: 2 }}>
               {Object.entries(
                 validateBoxShadows({
@@ -432,14 +430,22 @@ const docs: CssDoc = {
                 <Columns key={boxShadow} space="medium" alignY="center">
                   <Column width="content">
                     <Box
-                      background={
-                        boxShadow.includes('Inverted') ? 'brand' : 'surface'
-                      }
+                      background={{
+                        lightMode: boxShadow.includes('Inverted')
+                          ? 'neutral'
+                          : 'surface',
+                        darkMode: /^border|outline/.test(boxShadow)
+                          ? 'surfaceDark'
+                          : 'surface',
+                      }}
                       borderRadius="standard"
                       padding="gutter"
                     >
                       <Box
-                        boxShadow={boxShadow as keyof BoxShadowDocs}
+                        boxShadow={{
+                          lightMode: boxShadow as keyof BoxShadowDocs,
+                          darkMode: boxShadow as keyof BoxShadowDocs,
+                        }}
                         borderRadius="standard"
                         padding="gutter"
                       />

package/css/colorModeStyle.docs.tsx

@@ -0,0 +1,81 @@
+import dedent from 'dedent';
+import React from 'react';
+import { colorModeStyle, vars } from '.';
+import { Strong, Text, TextLink } from '../lib/components';
+import source from '../lib/utils/source.macro';
+import Code from '../site/src/App/Code/Code';
+import { CssDoc } from '../site/src/types';
+
+const docs: CssDoc = {
+  usage: (
+    <Code>{`import { colorModeStyle } from 'braid-design-system/css';`}</Code>
+  ),
+  description: (
+    <Text>
+      A utility to make authoring color mode specific styles in{' '}
+      <TextLink href="https://vanilla-extract.style">vanilla-extract</TextLink>{' '}
+      stylesheets easier.
+    </Text>
+  ),
+  additional: [
+    {
+      label: 'Authoring styles by color mode',
+      description: (
+        <>
+          <Text>
+            The <Strong>colorModeStyle</Strong> function is a convenience for
+            authoring color mode specific styling rules. It accepts sets of
+            rules for each mode, e.g. <Strong>lightMode</Strong> and{' '}
+            <Strong>darkMode</Strong>, and returns them scoped to the
+            corresponding CSS selector.
+          </Text>
+          <Text>
+            The returned object must be passed through one of
+            vanilla-extract&rsquo;s{' '}
+            <TextLink href="https://vanilla-extract.style/documentation/styling-api/">
+              styling apis
+            </TextLink>
+            , e.g. <Strong>style</Strong>, to create the actual styles.
+          </Text>
+          <Code>
+            {dedent`
+              // styles.css.ts
+              import { style } from '@vanilla-extract/css';
+              import { vars, colorModeStyle } from 'braid-design-system/css';
+
+              export const className = style(${
+                source(
+                  colorModeStyle({
+                    lightMode: { borderColor: vars.borderColor.positiveLight },
+                    darkMode: { borderColor: vars.borderColor.neutral },
+                  }),
+                ).code
+              });
+
+              // is equivalent to
+              import { style } from '@vanilla-extract/css';
+              import { vars, breakpoints } from 'braid-design-system/css';
+
+              // The dark mode class name is not public api,
+              // this is a placeholder class name for the example:
+              const darkModeClass = "🌙";
+
+              export const className = style({
+                selectors: {
+                  ${'[`html:not(${darkModeClass}) &`]: {'}
+                    borderColor: vars.borderColor.positiveLight
+                  },
+                  ${'[`html${darkModeClass} &`]: {'}
+                    borderColor: vars.borderColor.neutral
+                  },
+                }
+              });
+            `}
+          </Code>
+        </>
+      ),
+    },
+  ],
+};
+
+export default docs;

package/css/index.ts

@@ -1,5 +1,6 @@
 import { vars as internalVars } from '../lib/themes/vars.css';
 import { atoms as internalAtoms, Atoms } from '../lib/css/atoms/atoms';
+import { colorModeStyle } from '../lib/css/colorModeStyle';
 import { responsiveStyle } from '../lib/css/responsiveStyle';
 import { breakpoints } from '../lib/css/breakpoints';
 import { globalHeadingStyle, globalTextStyle } from '../lib/hooks/typography';
@@ -9,7 +10,9 @@ const {
   grid,
   space,
   touchableSize,
-  backgroundColor,
+  // TODO: COLORMODE RELEASE
+  // Release new backgrounds
+  backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor },
   foregroundColor,
   textWeight,
   borderColor,
@@ -46,6 +49,7 @@ export {
   atoms,
   breakpoints,
   responsiveStyle,
+  colorModeStyle,
   globalTextStyle,
   globalHeadingStyle,
 };

package/lib/components/Alert/Alert.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const closeButton = style({});
+
+export const closeButtonFocus = style({
+  selectors: {
+    [`${closeButton}:focus &`]: {
+      opacity: 1,
+    },
+  },
+});
+
+export const closeButtonHover = style({
+  selectors: {
+    [`${closeButton}:focus &, ${closeButton}:hover &`]: {
+      opacity: 1,
+    },
+  },
+});

package/lib/components/Alert/Alert.docs.tsx

@@ -118,11 +118,23 @@ const docs: ComponentDocs = {
     {
       label: 'Contextual design',
       description: (
-        <Text>
-          When outside of a <TextLink href="/components/Card">Card</TextLink>,
-          an outline is used to provide sufficient contrast against the
-          background.
-        </Text>
+        <>
+          <Text>
+            When outside of a <TextLink href="/components/Card">Card</TextLink>,
+            an outline is used to provide sufficient contrast against the
+            background.
+          </Text>
+          {/*
+          TODO: COLORMODE RELEASE
+          <Notice>
+            <Text>
+              This only applies in a light context, i.e. when the soft
+              background colours require differentiation from the surrounding
+              background colour.
+            </Text>
+          </Notice>
+          */}
+        </>
       ),
       Example: () =>
         source(

package/lib/components/Alert/Alert.tsx

@@ -6,9 +6,9 @@ import {
   IconPositive,
   IconPromote,
   IconCaution,
+  IconClear,
 } from '../icons';
 import { AllOrNone } from '../private/AllOrNone';
-import { ClearButton } from '../iconButtons/ClearButton/ClearButton';
 import { Columns } from '../Columns/Columns';
 import { Column } from '../Column/Column';
 import { Overlay } from '../private/Overlay/Overlay';
@@ -18,6 +18,10 @@ import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { BoxShadow } from '../../css/atoms/atomicProperties';
+import { Keyline } from '../private/Keyline/Keyline';
+import { virtualTouchable } from '../private/touchable/virtualTouchable';
+import { iconContainerSize } from '../../hooks/useIcon';
+import * as styles from './Alert.css';
 
 type Tone = 'promote' | 'info' | 'positive' | 'caution' | 'critical';
 
@@ -56,8 +60,6 @@ const icons = {
   critical: IconCritical,
 };
 
-const highlightBarSize = 'xxsmall';
-
 export const Alert = ({
   tone = 'info',
   children,
@@ -81,40 +83,69 @@ export const Alert = ({
       aria-live="polite"
       {...(data ? buildDataAttributes(data) : undefined)}
     >
-      <Box paddingLeft={highlightBarSize}>
-        <Columns space="small">
+      <Columns space="small">
+        <Column width="content">
+          <Icon tone={tone} />
+        </Column>
+        <Column>
+          <Box className={textAlignedToIcon.standard}>{children}</Box>
+        </Column>
+        {onClose ? (
           <Column width="content">
-            <Icon tone={tone} />
-          </Column>
-          <Column>
-            <Box className={textAlignedToIcon.standard}>{children}</Box>
-          </Column>
-          {onClose ? (
-            <Column width="content">
-              <ClearButton
-                tone="neutral"
-                label={closeLabel}
-                onClick={onClose}
+            <Box
+              component="button"
+              aria-label={closeLabel}
+              borderRadius="full"
+              cursor="pointer"
+              position="relative"
+              onClick={onClose}
+              outline="none"
+              transition="touchable"
+              transform={{ active: 'touchable' }}
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              className={[
+                styles.closeButton,
+                iconContainerSize(),
+                virtualTouchable(),
+              ]}
+            >
+              <Overlay
+                component="span"
+                boxShadow="outlineFocus"
+                transition="fast"
+                onlyVisibleForKeyboardNavigation
+                borderRadius="full"
+                className={styles.closeButtonFocus}
               />
-            </Column>
-          ) : null}
-        </Columns>
-      </Box>
-      {parentBackground !== 'surface' && (
+              <Overlay
+                component="span"
+                background="surface"
+                transition="fast"
+                borderRadius="full"
+                className={styles.closeButtonHover}
+              />
+              <Box
+                component="span"
+                display="block"
+                zIndex={1}
+                position="relative"
+              >
+                <IconClear size="fill" tone={tone} />
+              </Box>
+            </Box>
+          </Column>
+        ) : null}
+      </Columns>
+      {parentBackground.lightMode !== 'surface' && (
         <Overlay
           borderRadius={borderRadius}
-          boxShadow={borderForTone[tone]}
+          boxShadow={{ lightMode: borderForTone[tone] }}
           visible
         />
       )}
-      <Box
-        background={tone}
-        paddingLeft={highlightBarSize}
-        position="absolute"
-        top={0}
-        bottom={0}
-        left={0}
-      />
+      <Keyline tone={tone} borderRadius={borderRadius} />
     </Box>
   );
 };

package/lib/components/Badge/Badge.tsx

@@ -30,35 +30,14 @@ export interface BadgeProps {
   'aria-describedby'?: string;
 }
 
-const backgroundForTone = (tone: Tone, weight: BadgeWeight) => {
-  if (weight === 'strong') {
-    return tone;
-  }
-
-  if (tone === 'positive') {
-    return 'positiveLight';
-  }
-
-  if (tone === 'critical') {
-    return 'criticalLight';
-  }
-
-  if (tone === 'info') {
-    return 'infoLight';
-  }
-
-  if (tone === 'promote') {
-    return 'promoteLight';
-  }
-
-  if (tone === 'neutral') {
-    return 'neutralLight';
-  }
-
-  if (tone === 'caution') {
-    return 'cautionLight';
-  }
-};
+const lightModeBackgroundForTone = {
+  positive: 'positiveLight',
+  critical: 'criticalLight',
+  info: 'infoLight',
+  promote: 'promoteLight',
+  neutral: 'neutralLight',
+  caution: 'cautionLight',
+} as const;
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
   (
@@ -103,7 +82,9 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
           tabIndex={tabIndex}
           aria-describedby={ariaDescribedBy}
           title={title ?? (!ariaDescribedBy ? children : undefined)}
-          background={backgroundForTone(tone, weight)}
+          background={
+            weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
+          }
           paddingX="xsmall"
           borderRadius="large"
           overflow="hidden"
@@ -112,7 +93,6 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
             component="span"
             size={styles.constants.textSize}
             weight="medium"
-            tone={weight === 'regular' ? tone : undefined}
             truncate
             baseline={false}
           >

package/lib/components/Box/BackgroundContext.tsx

@@ -1,18 +1,20 @@
-import React, { createContext, useContext, ReactElement } from 'react';
+import { createContext, useContext } from 'react';
 import { BoxBackgroundVariant } from './Box';
 import { useBraidTheme } from '../BraidProvider/BraidThemeContext';
+import { mapColorModeValue } from '../../css/atoms/sprinkles.css';
 
-export type BackgroundContextValue = BoxBackgroundVariant;
+type BackgroundContextValue = {
+  lightMode: BoxBackgroundVariant;
+  darkMode: BoxBackgroundVariant;
+};
 
-const backgroundContext = createContext<BackgroundContextValue>('body');
+const backgroundContext = createContext<BackgroundContextValue>({
+  lightMode: 'body',
+  darkMode: 'bodyDark',
+});
 
 export const BackgroundProvider = backgroundContext.Provider;
 
-export const renderBackgroundProvider = (
-  background: BoxBackgroundVariant,
-  element: ReactElement | null,
-) => <BackgroundProvider value={background}>{element}</BackgroundProvider>;
-
 export const useBackground = () => useContext(backgroundContext);
 
 export const useBackgroundLightness = (
@@ -21,14 +23,29 @@ export const useBackgroundLightness = (
   const backgroundFromContext = useBackground();
   const background = backgroundOverride || backgroundFromContext;
   const { backgroundLightness } = useBraidTheme();
+  const lightnessMap = {
+    ...backgroundLightness,
+    customDark: 'dark',
+    customLight: 'light',
+  } as const;
+
+  return {
+    lightMode: lightnessMap[background.lightMode],
+    darkMode: lightnessMap[background.darkMode],
+  };
+};
 
-  if (background === 'customDark') {
-    return 'dark';
-  }
-
-  if (background === 'customLight') {
-    return 'light';
-  }
-
-  return backgroundLightness[background];
+export type ColorContrastValue<Value> =
+  | { light: Value; dark: Value }
+  | ((contrast: 'light' | 'dark', background: BoxBackgroundVariant) => Value);
+export const useColorContrast = () => {
+  const background = useBackground();
+  const backgroundLightness = useBackgroundLightness();
+
+  return <Value extends string>(map: ColorContrastValue<Value>) =>
+    mapColorModeValue(backgroundLightness, (lightness, mode) =>
+      typeof map === 'function'
+        ? map(lightness, background[mode])
+        : map[lightness],
+    );
 };