braid-design-system 31.0.0 → 31.2.2

package/lib/components/Button/Button.tsx

@@ -5,15 +5,16 @@ import React, {
   AllHTMLAttributes,
 } from 'react';
 import { touchableText } from '../../hooks/typography';
-import { Box, BoxProps } from '../Box/Box';
+import { Box, BoxBackgroundVariant, BoxProps } from '../Box/Box';
 import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { FieldOverlay } from '../private/FieldOverlay/FieldOverlay';
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
 import {
-  BackgroundContextValue,
+  ColorContrastValue,
   useBackgroundLightness,
+  useColorContrast,
 } from '../Box/BackgroundContext';
 import { Text, TextProps } from '../Text/Text';
 import { BoxShadow } from '../../css/atoms/atomicProperties';
@@ -54,18 +55,18 @@ export interface ButtonProps extends ButtonStyleProps {
 type ButtonStyles = {
   textTone: TextProps['tone'];
   background:
-    | BackgroundContextValue
-    | { light: BackgroundContextValue; dark: BackgroundContextValue }
+    | ColorContrastValue<BoxBackgroundVariant>
+    | BoxBackgroundVariant
     | undefined;
   backgroundHover:
-    | BackgroundContextValue
-    | { light: BackgroundContextValue; dark: BackgroundContextValue }
+    | ColorContrastValue<BoxBackgroundVariant>
+    | BoxBackgroundVariant
     | undefined;
   backgroundActive:
-    | BackgroundContextValue
-    | { light: BackgroundContextValue; dark: BackgroundContextValue }
+    | ColorContrastValue<BoxBackgroundVariant>
+    | BoxBackgroundVariant
     | undefined;
-  boxShadow: { light: BoxShadow; dark: BoxShadow } | undefined;
+  boxShadow: BoxShadow | undefined;
 };
 
 const variants: Record<
@@ -105,28 +106,28 @@ const variants: Record<
   soft: {
     default: {
       textTone: 'formAccent',
-      background: 'formAccentSoft',
+      background: { light: 'formAccentSoft', dark: 'customDark' },
       backgroundHover: 'formAccentSoftHover',
       backgroundActive: 'formAccentSoftActive',
       boxShadow: undefined,
     },
     brandAccent: {
       textTone: 'brandAccent',
-      background: 'brandAccentSoft',
+      background: { light: 'brandAccentSoft', dark: 'customDark' },
       backgroundHover: 'brandAccentSoftHover',
       backgroundActive: 'brandAccentSoftActive',
       boxShadow: undefined,
     },
     critical: {
       textTone: 'critical',
-      background: 'criticalSoft',
+      background: { light: 'criticalSoft', dark: 'customDark' },
       backgroundHover: 'criticalSoftHover',
       backgroundActive: 'criticalSoftActive',
       boxShadow: undefined,
     },
     neutral: {
       textTone: 'neutral',
-      background: 'neutralSoft',
+      background: { light: 'neutralSoft', dark: 'customDark' },
       backgroundHover: 'neutralSoftHover',
       backgroundActive: 'neutralSoftActive',
       boxShadow: undefined,
@@ -168,40 +169,28 @@ const variants: Record<
       background: undefined,
       backgroundHover: 'formAccentSoftHover',
       backgroundActive: 'formAccentSoftActive',
-      boxShadow: {
-        light: 'borderFormAccentLarge',
-        dark: 'borderFormAccentLightLarge',
-      },
+      boxShadow: 'borderFormAccentLarge',
     },
     brandAccent: {
       textTone: 'brandAccent',
       background: undefined,
       backgroundHover: 'brandAccentSoftHover',
       backgroundActive: 'brandAccentSoftActive',
-      boxShadow: {
-        light: 'borderBrandAccentLarge',
-        dark: 'borderBrandAccentLightLarge',
-      },
+      boxShadow: 'borderBrandAccentLarge',
     },
     critical: {
       textTone: 'critical',
       background: undefined,
       backgroundHover: 'criticalSoftHover',
       backgroundActive: 'criticalSoftActive',
-      boxShadow: {
-        light: 'borderCriticalLarge',
-        dark: 'borderCriticalLightLarge',
-      },
+      boxShadow: 'borderCriticalLarge',
     },
     neutral: {
       textTone: 'neutral',
       background: undefined,
       backgroundHover: 'neutralSoftHover',
       backgroundActive: 'neutralSoftActive',
-      boxShadow: {
-        light: 'borderNeutralLarge',
-        dark: 'borderNeutralInvertedLarge',
-      },
+      boxShadow: 'borderNeutralLarge',
     },
   },
 } as const;
@@ -226,50 +215,76 @@ export const ButtonOverlays = ({
   tone,
   loading,
   children,
-}: ButtonProps) => {
+  keyboardFocusable = true,
+  labelSpacing = true,
+  forceActive = false,
+  radius = 'large',
+}: ButtonProps & {
+  keyboardFocusable?: boolean;
+  radius?: 'full' | 'large';
+  labelSpacing?: boolean;
+  forceActive?: boolean;
+}) => {
   const actionsContext = useContext(ActionsContext);
-  const backgroundLightness = useBackgroundLightness();
-  const isInverted = backgroundLightness === 'dark' && variant !== 'solid';
   const size = sizeProp ?? actionsContext?.size ?? 'standard';
   const stylesForVariant = variants[variant][tone ?? 'default'];
+  const colorConstrast = useColorContrast();
+  const lightness = useBackgroundLightness();
+  const labelMargin =
+    size === 'small' || variant === 'transparent' ? 'small' : 'medium';
 
   return (
     <>
+      {keyboardFocusable ? (
+        <FieldOverlay
+          borderRadius={radius}
+          variant="focus"
+          onlyVisibleForKeyboardNavigation
+          className={styles.focusOverlay}
+        />
+      ) : null}
       <FieldOverlay
-        borderRadius="large"
-        variant="focus"
-        onlyVisibleForKeyboardNavigation
-        className={styles.focusOverlay}
-      />
-      <FieldOverlay
-        borderRadius="large"
+        borderRadius={radius}
         background={
-          typeof stylesForVariant.backgroundHover === 'object'
-            ? stylesForVariant.backgroundHover[backgroundLightness]
+          stylesForVariant.backgroundHover &&
+          typeof stylesForVariant.backgroundHover !== 'string'
+            ? colorConstrast(stylesForVariant.backgroundHover)
             : stylesForVariant.backgroundHover
         }
         className={[
           styles.hoverOverlay,
-          isInverted ? styles.invertedBackgrounds.hover : undefined,
+          variant !== 'solid' && lightness.lightMode === 'dark'
+            ? styles.invertedBackgroundsLightMode.hover
+            : null,
+          variant !== 'solid' && lightness.darkMode === 'dark'
+            ? styles.invertedBackgroundsDarkMode.hover
+            : null,
         ]}
       />
       <FieldOverlay
-        borderRadius="large"
+        borderRadius={radius}
         background={
-          typeof stylesForVariant.backgroundActive === 'object'
-            ? stylesForVariant.backgroundActive[backgroundLightness]
+          stylesForVariant.backgroundActive &&
+          typeof stylesForVariant.backgroundActive !== 'string'
+            ? colorConstrast(stylesForVariant.backgroundActive)
             : stylesForVariant.backgroundActive
         }
         className={[
+          forceActive ? styles.forceActive : undefined,
           styles.activeOverlay,
-          isInverted ? styles.invertedBackgrounds.active : undefined,
+          variant !== 'solid' && lightness.lightMode === 'dark'
+            ? styles.invertedBackgroundsLightMode.active
+            : null,
+          variant !== 'solid' && lightness.darkMode === 'dark'
+            ? styles.invertedBackgroundsDarkMode.active
+            : null,
         ]}
       />
       {stylesForVariant.boxShadow ? (
         <Box
           component="span"
-          boxShadow={stylesForVariant.boxShadow[backgroundLightness]}
-          borderRadius="large"
+          boxShadow={stylesForVariant.boxShadow}
+          borderRadius={radius}
           position="absolute"
           top={0}
           bottom={0}
@@ -284,23 +299,32 @@ export const ButtonOverlays = ({
         display="block"
         overflow="hidden"
         pointerEvents="none"
-        marginX={
-          size === 'small' || variant === 'transparent' ? 'small' : 'medium'
-        }
+        marginX={labelSpacing ? labelMargin : undefined}
         paddingY={
-          size === 'small' ? styles.constants.smallButtonPaddingSize : undefined
+          labelSpacing && size === 'small'
+            ? styles.constants.smallButtonPaddingSize
+            : undefined
+        }
+        className={
+          labelSpacing && size === 'standard'
+            ? touchableText.standard
+            : undefined
         }
-        className={size === 'standard' ? touchableText.standard : undefined}
         background={
-          tone === 'neutral' &&
-          variant !== 'solid' &&
-          backgroundLightness === 'light'
-            ? 'customLight'
+          tone === 'neutral' && variant !== 'solid'
+            ? {
+                lightMode:
+                  lightness.lightMode === 'light'
+                    ? 'customLight'
+                    : 'customDark',
+                darkMode:
+                  lightness.darkMode === 'light' ? 'customLight' : 'customDark',
+              }
             : undefined
         }
       >
         <Text
-          tone={variant !== 'solid' ? stylesForVariant.textTone : undefined}
+          tone={stylesForVariant.textTone}
           weight="medium"
           size={size}
           baseline={false}
@@ -319,19 +343,18 @@ export const useButtonStyles = ({
   tone,
   bleedY,
   loading,
-}: ButtonProps): BoxProps => {
+  radius = 'large',
+}: ButtonProps & {
+  radius?: 'full' | 'large';
+}): BoxProps => {
   const actionsContext = useContext(ActionsContext);
-  const backgroundLightness = useBackgroundLightness();
-  const isInverted = backgroundLightness === 'dark' && variant === 'soft';
   const size = sizeProp ?? actionsContext?.size ?? 'standard';
   const stylesForVariant = variants[variant][tone ?? 'default'];
-  const background =
-    typeof stylesForVariant.background === 'object'
-      ? stylesForVariant.background[backgroundLightness]
-      : stylesForVariant.background;
+  const colorConstrast = useColorContrast();
+  const lightness = useBackgroundLightness();
 
   return {
-    borderRadius: 'large',
+    borderRadius: radius,
     width: 'full',
     position: 'relative',
     display: 'block',
@@ -341,13 +364,22 @@ export const useButtonStyles = ({
     textAlign: 'center',
     userSelect: 'none',
     cursor: !loading ? 'pointer' : undefined,
-    background: !isInverted ? background : undefined,
+    background:
+      stylesForVariant.background &&
+      typeof stylesForVariant.background !== 'string'
+        ? colorConstrast(stylesForVariant.background)
+        : stylesForVariant.background,
     className: [
+      variant === 'soft' && lightness.lightMode === 'dark'
+        ? styles.invertedBackgroundsLightMode.soft
+        : null,
+      variant === 'soft' && lightness.darkMode === 'dark'
+        ? styles.invertedBackgroundsDarkMode.soft
+        : null,
       styles.root,
-      isInverted ? styles.invertedBackgrounds.soft : undefined,
-      size === 'small' ? virtualTouchable({ xAxis: false }) : undefined,
+      size === 'small' ? virtualTouchable({ xAxis: false }) : null,
       size === 'standard' ? styles.standard : styles.small,
-      bleedY ? styles.bleedY : undefined,
+      bleedY ? styles.bleedY : null,
     ],
   } as const;
 };

package/lib/components/Card/Card.tsx

@@ -9,7 +9,7 @@ import { Box, BoxProps } from '../Box/Box';
 import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
-import * as styles from './Card.css';
+import { Keyline } from '../private/Keyline/Keyline';
 
 export const validCardComponents = [
   'div',
@@ -78,18 +78,7 @@ export const Card = ({
       borderRadius={resolvedRounding}
       {...(data ? buildDataAttributes(data) : undefined)}
     >
-      {tone ? (
-        <Box
-          position="absolute"
-          top={0}
-          bottom={0}
-          left={0}
-          paddingLeft="xxsmall"
-          borderRadius={resolvedRounding}
-          background={tone}
-          className={styles.toneKeyline}
-        />
-      ) : null}
+      {tone ? <Keyline tone={tone} borderRadius={resolvedRounding} /> : null}
       {children}
     </Box>
   );

package/lib/components/Checkbox/Checkbox.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Badge, Checkbox, Text } from '../';
+import { Badge, Checkbox, Stack, Text } from '../';
 
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
@@ -49,13 +49,22 @@ export const screenshots: ComponentScreenshot = {
     {
       label: 'Disabled',
       Example: ({ id, handler }) => (
-        <Checkbox
-          id={id}
-          disabled={true}
-          checked={false}
-          onChange={handler}
-          label="Label"
-        />
+        <Stack space="gutter">
+          <Checkbox
+            id={id}
+            disabled={true}
+            checked={false}
+            onChange={handler}
+            label="Label"
+          />
+          <Checkbox
+            id={id}
+            disabled={true}
+            checked={true}
+            onChange={handler}
+            label="Label"
+          />
+        </Stack>
       ),
     },
     {

package/lib/components/Divider/Divider.css.ts

@@ -1,11 +1,52 @@
-import { style } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { colorModeStyle } from '../../css/colorModeStyle';
 import { vars } from '../../themes/vars.css';
 
 export const base = style({
   height: vars.borderWidth.standard,
 });
 
-export const weight = {
-  regular: style({ background: vars.borderColor.neutralLight }),
-  strong: style({ background: vars.borderColor.neutral }),
+const weightVars = createThemeContract({
+  regular: null,
+  strong: null,
+});
+
+export const regular = style({ background: weightVars.regular });
+export const strong = style({ background: weightVars.strong });
+
+const lightModeVars = {
+  vars: assignVars(weightVars, {
+    regular: vars.borderColor.neutralLight,
+    strong: vars.borderColor.neutral,
+  }),
+};
+
+const darkModeVars = {
+  vars: assignVars(weightVars, {
+    regular: vars.borderColor.neutral,
+    strong: vars.borderColor.neutralLight,
+  }),
 };
+
+export const lightModeWeight = styleVariants({
+  light: colorModeStyle({
+    lightMode: lightModeVars,
+  }),
+  dark: colorModeStyle({
+    lightMode: darkModeVars,
+  }),
+});
+
+export const darkModeWeight = styleVariants({
+  light: colorModeStyle({
+    darkMode: lightModeVars,
+  }),
+  dark: colorModeStyle({
+    darkMode: darkModeVars,
+  }),
+});

package/lib/components/Divider/Divider.tsx

@@ -1,21 +1,27 @@
 import React from 'react';
+import { useBackgroundLightness } from '../Box/BackgroundContext';
 import { Box } from '../Box/Box';
 import * as styles from './Divider.css';
 
 export interface DividerProps {
-  weight?: keyof typeof styles.weight;
+  weight?: 'regular' | 'strong';
 }
 
-const defaultWeight = 'regular';
-export const Divider = ({ weight = defaultWeight }: DividerProps) => (
-  <Box position="relative">
-    <Box
-      position="absolute"
-      width="full"
-      className={[
-        styles.base,
-        styles.weight[weight] || styles.weight[defaultWeight],
-      ]}
-    />
-  </Box>
-);
+export const Divider = ({ weight = 'regular' }: DividerProps) => {
+  const lightness = useBackgroundLightness();
+
+  return (
+    <Box position="relative">
+      <Box
+        position="absolute"
+        width="full"
+        className={[
+          styles.base,
+          weight === 'strong' ? styles.strong : styles.regular,
+          styles.lightModeWeight[lightness.lightMode],
+          styles.darkModeWeight[lightness.darkMode],
+        ]}
+      />
+    </Box>
+  );
+};

package/lib/components/Dropdown/Dropdown.docs.tsx

@@ -202,7 +202,6 @@ const docs: ComponentDocs = {
           <Strong>disabled</Strong> prop.
         </Text>
       ),
-      background: 'surface',
       Example: ({ id, setState }) =>
         source(
           <Dropdown

package/lib/components/FieldLabel/FieldLabel.docs.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import source from '../../utils/source.macro';
 import { ComponentDocs } from '../../../site/src/types';
 import {
@@ -13,7 +14,6 @@ import {
   Notice,
 } from '../';
 import { Placeholder } from '../../playroom/components';
-import { ReactNode } from 'markdown-to-jsx/node_modules/@types/react';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <Box maxWidth="xsmall">{children}</Box>

package/lib/components/FieldMessage/FieldMessage.screenshots.tsx

@@ -25,6 +25,12 @@ export const screenshots: ComponentScreenshot = {
         />
       ),
     },
+    {
+      label: 'Neutral Field Message',
+      Example: ({ id }) => (
+        <FieldMessage id={id} message="This is a neutral message." />
+      ),
+    },
     {
       label: 'Critical with long (wrapping) message',
       Container: ({ children }) => (

package/lib/components/Heading/Heading.docs.tsx

@@ -133,12 +133,14 @@ const docs: ComponentDocs = {
           </Text>
         </>
       ),
-      background: 'brand',
+      background: 'neutral',
       Example: () =>
         source(
-          <Heading level="2">
-            This Heading is inverted to improve contrast.
-          </Heading>,
+          <Box background="neutral">
+            <Heading level="2">
+              This Heading is inverted to improve contrast.
+            </Heading>
+          </Box>,
         ),
     },
   ],

package/lib/components/Heading/Heading.screenshots.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode, Fragment } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
 import { heading as headingLevels } from '../../hooks/typography/typography.css';
-import { Box, Heading, Stack } from '../';
+import { Heading, Stack } from '../';
+// TODO: COLORMODE RELEASE
+// Use public import
+import { Box } from '../Box/Box';
 import { backgrounds, textAlignments } from '../../utils/docsHelpers';
 
 const Container = ({ children }: { children: ReactNode }) => (

package/lib/components/Loader/Loader.css.ts

@@ -24,10 +24,9 @@ export const size = styleVariants(vars.textSize, ({ mobile, tablet }) =>
   }),
 );
 
-export const color = {
-  dark: style({ fill: vars.backgroundColor.surface }),
-  light: style({ fill: vars.backgroundColor.neutral }),
-};
+export const currentColor = style({
+  fill: 'currentcolor',
+});
 
 const bounce = keyframes({
   '33%': {

package/lib/components/Loader/Loader.screenshots.tsx

@@ -1,6 +1,9 @@
 import React, { Fragment } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Box, Loader } from '../';
+import { Loader } from '../';
+// TODO: COLORMODE RELEASE
+// Use public import
+import { Box } from '../Box/Box';
 import { backgrounds } from '../../utils/docsHelpers';
 
 export const screenshots: ComponentScreenshot = {

package/lib/components/Loader/Loader.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box } from '../Box/Box';
-import { useBackgroundLightness } from '../Box/BackgroundContext';
 import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { atoms } from '../../css/atoms/atoms';
 import * as styles from './Loader.css';
+import { useTextTone } from '../../hooks/typography';
 
 interface LoaderProps {
   size?: keyof typeof styles.size;
@@ -19,34 +19,31 @@ export const Loader = ({
   'aria-label': ariaLabel = 'Loading',
   delayVisibility = false,
   data,
-}: LoaderProps) => {
-  const parentBackgroundColor = useBackgroundLightness();
-
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
+}: LoaderProps) => (
+  <Box
+    display="flex"
+    alignItems="center"
+    className={[
+      styles.rootSize[size],
+      delayVisibility ? styles.delay : undefined,
+    ]}
+    aria-label={ariaLabel}
+    {...(data ? buildDataAttributes(data) : undefined)}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       className={[
-        styles.rootSize[size],
-        delayVisibility ? styles.delay : undefined,
-      ]}
-      aria-label={ariaLabel}
-      {...(data ? buildDataAttributes(data) : undefined)}
+        atoms({ reset: 'svg' }),
+        styles.size[size],
+        styles.currentColor,
+        useTextTone({ tone: 'neutral' }),
+      ].join(' ')}
+      viewBox="0 0 300 134"
+      aria-hidden
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className={[
-          atoms({ reset: 'svg' }),
-          styles.size[size],
-          styles.color[parentBackgroundColor],
-        ].join(' ')}
-        viewBox="0 0 300 134"
-        aria-hidden
-      >
-        <circle className={styles.circle} cy="67" cx="40" r="40" />
-        <circle className={styles.circle} cy="67" cx="150" r="40" />
-        <circle className={styles.circle} cy="67" cx="260" r="40" />
-      </svg>
-    </Box>
-  );
-};
+      <circle className={styles.circle} cy="67" cx="40" r="40" />
+      <circle className={styles.circle} cy="67" cx="150" r="40" />
+      <circle className={styles.circle} cy="67" cx="260" r="40" />
+    </svg>
+  </Box>
+);