braid-design-system 31.0.0 → 31.2.2

package/lib/components/MenuItem/MenuItemLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, LinkProps } from '../Link/Link';
 import { useMenuItem } from './useMenuItem';
 import { MenuItemProps } from './MenuItem';
+import { Box } from '../Box/Box';
 
 export interface MenuItemLinkProps
   extends MenuItemProps,
@@ -24,8 +25,14 @@ export const MenuItemLink = ({
   });
 
   return (
-    <Link {...menuItemProps} href={href} target={target} rel={rel}>
+    <Box
+      component={Link}
+      {...menuItemProps}
+      href={href}
+      target={target}
+      rel={rel}
+    >
       <MenuItemChildren tone={tone}>{children}</MenuItemChildren>
-    </Link>
+    </Box>
   );
 };

package/lib/components/MenuItem/useMenuItem.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   MouseEvent,
 } from 'react';
-import { Box } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 import { Text } from '../Text/Text';
 import { touchableText } from '../../hooks/typography';
 import { normalizeKey } from '../private/normalizeKey';
@@ -141,6 +141,7 @@ export function useMenuItem<MenuItemElement extends HTMLElement>({
           onClick();
         }
       },
+      background: isHighlighted ? hoverBackground : undefined,
       className: [
         styles.menuItem,
         touchableText[menuItemChildrenSize],
@@ -149,14 +150,13 @@ export function useMenuItem<MenuItemElement extends HTMLElement>({
           alignItems: 'center',
           width: 'full',
           paddingX: 'small',
-          background: isHighlighted ? hoverBackground : undefined,
           cursor: 'pointer',
           textAlign: 'left',
           outline: 'none',
         }),
       ],
       ...buildDataAttributes(data),
-    } as const,
+    } as BoxProps,
   } as const;
 }
 
@@ -166,7 +166,7 @@ interface MenuItemChildrenProps {
 }
 function MenuItemChildren({ tone, children }: MenuItemChildrenProps) {
   return (
-    <Box userSelect="none">
+    <Box component="span" userSelect="none">
       <Text
         size={menuItemChildrenSize}
         baseline={false}

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -32,14 +32,16 @@ export const MenuItemCheckbox = ({
       display="flex"
     >
       <Box
+        component="span"
         borderRadius="standard"
         boxShadow="borderField"
         position="relative"
-        background="surface"
+        background={{ lightMode: 'surface' }}
         marginRight="xsmall"
         className={styles.checkboxBorder}
       >
         <Box
+          component="span"
           position="absolute"
           width="full"
           height="full"

package/lib/components/MenuRenderer/testHelper.tsx

@@ -213,13 +213,16 @@ export const menuTestSuite = ({ name, Component }: MenuTestSuiteParams) => {
 
         userEvent.click(menuItemCheckbox);
 
-        expect(menuItemCheckbox.getAttribute('aria-checked')).toBe('true');
+        const updatedElements = getElements({ getAllByRole });
+        const updatedMenuItem = updatedElements.menuItems[2];
+
+        expect(updatedMenuItem.getAttribute('aria-checked')).toBe('true');
 
         expect(menu).toBeVisible();
         expect(openHandler).not.toHaveBeenCalled();
         expect(closeHandler).not.toHaveBeenCalled();
         expect(menuItemHandler).toHaveBeenNthCalledWith(1, 'MenuItemCheckbox');
-        expect(menuItemCheckbox).toHaveFocus();
+        expect(updatedMenuItem).toHaveFocus();
       });
     });
 

package/lib/components/Pagination/Pagination.css.ts

@@ -1,10 +1,24 @@
 import { style } from '@vanilla-extract/css';
+import { colorModeStyle } from '../../css/colorModeStyle';
 
 export const hover = style({});
 
-export const currentKeyline = style({
-  opacity: 0.3,
-});
+export const lightModeCurrentKeyline = style(
+  colorModeStyle({
+    lightMode: {
+      opacity: 0.3,
+    },
+  }),
+);
+
+export const darkModeCurrentKeyline = style(
+  colorModeStyle({
+    darkMode: {
+      opacity: 0.3,
+    },
+  }),
+);
+
 export const current = style({
   opacity: 0.075,
 });

package/lib/components/Pagination/Pagination.tsx

@@ -102,11 +102,12 @@ const Page = ({ number, current }: { number: number; current: boolean }) => {
         component="span"
         borderRadius={borderRadius}
         boxShadow="borderFormAccent"
-        className={
-          parentBackground !== 'surface' && current
-            ? styles.currentKeyline
-            : undefined
-        }
+        className={{
+          [styles.lightModeCurrentKeyline]:
+            parentBackground.lightMode !== 'surface' && current,
+          [styles.darkModeCurrentKeyline]:
+            parentBackground.darkMode !== 'surface' && current,
+        }}
       />
       <Box component="span" zIndex={1} userSelect="none">
         <Text

package/lib/components/Rating/Rating.css.ts

@@ -1,9 +1,22 @@
 import { style } from '@vanilla-extract/css';
+import { colorModeStyle } from '../../css/colorModeStyle';
 import { vars } from '../../themes/vars.css';
 
-export const starColor = style({
-  color: vars.foregroundColor.rating,
-});
+export const lightModeStarColor = style(
+  colorModeStyle({
+    lightMode: {
+      color: vars.foregroundColor.rating,
+    },
+  }),
+);
+
+export const darkModeStarColor = style(
+  colorModeStyle({
+    darkMode: {
+      color: vars.foregroundColor.rating,
+    },
+  }),
+);
 
 export const starSpacing = style({
   paddingRight: '1px',

package/lib/components/Rating/Rating.screenshots.tsx

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

package/lib/components/Rating/Rating.tsx

@@ -36,7 +36,12 @@ const RatingStar = ({ percent, ...restProps }: RatingStar) => {
       className={[
         className,
         {
-          [styles.starColor]: currentBg === 'body' || currentBg === 'surface',
+          [styles.lightModeStarColor]:
+            currentBg.lightMode === 'body' || currentBg.lightMode === 'surface',
+        },
+        {
+          [styles.darkModeStarColor]:
+            currentBg.darkMode === 'body' || currentBg.darkMode === 'surface',
         },
       ]}
     />

package/lib/components/Tabs/Tab.tsx

@@ -31,6 +31,7 @@ import buildDataAttributes, {
 import { TabListContext } from './TabListContext';
 import { Overlay } from '../private/Overlay/Overlay';
 import { BadgeProps, Badge } from '../Badge/Badge';
+import { Divider } from '../Divider/Divider';
 import { useResponsiveValue } from '../useResponsiveValue/useResponsiveValue';
 import { smoothScroll, smoothScrollIntoView } from '../private/smoothScroll';
 import { useSpace } from '../useSpace/useSpace';
@@ -244,10 +245,12 @@ export const Tab = ({ children, data, badge, item }: TabProps) => {
             right={0}
             bottom={0}
             className={styles.divider}
-          />
+          >
+            <Divider />
+          </Box>
         ) : null}
         <Box
-          background="neutral"
+          background={{ lightMode: 'neutral', darkMode: 'neutralLight' }}
           position="absolute"
           zIndex={2}
           transition="fast"
@@ -271,6 +274,7 @@ export const Tab = ({ children, data, badge, item }: TabProps) => {
           bottom={0}
           className={[
             styles.tabUnderline,
+            styles.tabUnderlineActiveDarkMode,
             !isSelected ? styles.tabUnderlineAnimation : undefined,
             tabListItemIndex > 0 ? styles.hairlineMarginLeft : null,
           ]}

package/lib/components/Tabs/Tabs.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { colorModeStyle } from '../../css/colorModeStyle';
 import { vars } from '../../themes/vars.css';
 
 export const tab = style({
@@ -54,6 +55,14 @@ export const tabUnderline = style({
   height: 2,
 });
 
+export const tabUnderlineActiveDarkMode = style(
+  colorModeStyle({
+    darkMode: {
+      background: vars.borderColor.formAccentLight,
+    },
+  }),
+);
+
 export const tabUnderlineHover = style({
   selectors: {
     [`${tab}:hover &`]: {
@@ -77,6 +86,5 @@ export const tabPanelFocusRing = style({
 });
 
 export const divider = style({
-  background: vars.borderColor.neutralLight,
   height: vars.borderWidth.standard,
 });

package/lib/components/Tabs/Tabs.tsx

@@ -9,6 +9,7 @@ import React, {
 import assert from 'assert';
 import flattenChildren from 'react-keyed-flatten-children';
 import { Box } from '../Box/Box';
+import { Divider } from '../Divider/Divider';
 import type { ResponsiveSpace } from '../../css/atoms/atoms';
 import { TAB_LIST_UPDATED } from './Tabs.actions';
 import buildDataAttributes, {
@@ -146,7 +147,9 @@ export const Tabs = (props: TabsProps) => {
                 left={0}
                 right={0}
                 className={styles.divider}
-              />
+              >
+                <Divider />
+              </Box>
             ) : null}
           </Box>
         </Box>

package/lib/components/Text/Text.docs.tsx

@@ -235,6 +235,10 @@ const docs: ComponentDocs = {
             <Text>Neutral text</Text>
             <Text tone="secondary">Secondary text</Text>
             <Text tone="critical">Critical text</Text>
+            <Text tone="caution">Caution text</Text>
+            <Text tone="positive">Positive text</Text>
+            <Text tone="info">Info text</Text>
+            <Text tone="promote">Promote text</Text>
             <Text tone="formAccent">FormAccent text</Text>
             <Text tone="brandAccent">BrandAccent text</Text>
           </Stack>,

package/lib/components/Text/Text.screenshots.tsx

@@ -1,7 +1,10 @@
 import React, { Fragment, ReactNode } from 'react';
 import { titleCase } from 'title-case';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Box, Text, Stack, Column, Columns, IconPositive } from '../';
+import { Text, Stack, Column, Columns, IconPositive } from '../';
+// TODO: COLORMODE RELEASE
+// Use public import
+import { Box } from '../Box/Box';
 import { text as textSizes } from '../../hooks/typography/typography.css';
 import { backgrounds, textAlignments } from '../../utils/docsHelpers';
 
@@ -38,6 +41,10 @@ export const screenshots: ComponentScreenshot = {
           <Text>Neutral text</Text>
           <Text tone="secondary">Secondary text</Text>
           <Text tone="critical">Critical text</Text>
+          <Text tone="caution">Caution text</Text>
+          <Text tone="positive">Positive text</Text>
+          <Text tone="info">Info text</Text>
+          <Text tone="promote">Promote text</Text>
           <Text tone="formAccent">FormAccent text</Text>
           <Text tone="brandAccent">BrandAccent text</Text>
         </Stack>

package/lib/components/TextField/TextField.docs.tsx

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

package/lib/components/TextLink/TextLink.css.ts

@@ -0,0 +1,139 @@
+import {
+  assignVars,
+  createThemeContract,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { darkMode } from '../../css/atoms/sprinkles.css';
+import { vars } from '../../themes/vars.css';
+
+const textLinkVars = createThemeContract({
+  color: null,
+  colorHover: null,
+  fontWeight: null,
+  textDecoration: null,
+  textDecorationHover: null,
+});
+
+const lightModeRegularLinkVars = assignVars(textLinkVars, {
+  color: vars.foregroundColor.link,
+  colorHover: vars.foregroundColor.linkHover,
+  fontWeight: vars.textWeight.medium,
+  textDecoration: 'none',
+  textDecorationHover: 'underline',
+});
+
+const darkModeRegularLinkVars = assignVars(textLinkVars, {
+  color: vars.foregroundColor.linkLight,
+  colorHover: vars.foregroundColor.linkLight,
+  fontWeight: vars.textWeight.medium,
+  textDecoration: 'none',
+  textDecorationHover: 'underline',
+});
+
+const weakLinkVars = assignVars(textLinkVars, {
+  color: 'inherit',
+  colorHover: 'inherit',
+  fontWeight: 'inherit',
+  textDecoration: 'underline',
+  textDecorationHover: 'underline',
+});
+
+export const base = style({
+  color: textLinkVars.color,
+  fontWeight: textLinkVars.fontWeight,
+  textDecoration: textLinkVars.textDecoration,
+  ':hover': {
+    color: textLinkVars.colorHover,
+    textDecoration: textLinkVars.textDecorationHover,
+  },
+  ':focus': {
+    color: textLinkVars.colorHover,
+  },
+});
+
+export const weakLink = style({
+  vars: weakLinkVars,
+});
+
+export const inheritLinkColor = style({});
+
+export const regularLinkLightMode = styleVariants({
+  light: {
+    selectors: {
+      [`html:not(${darkMode}) &`]: {
+        vars: lightModeRegularLinkVars,
+      },
+      [`html:not(${darkMode}) ${inheritLinkColor} > &`]: {
+        vars: weakLinkVars,
+      },
+    },
+  },
+  dark: {
+    selectors: {
+      [`html:not(${darkMode}) &`]: {
+        vars: darkModeRegularLinkVars,
+      },
+      [`html:not(${darkMode}) ${inheritLinkColor} > &`]: {
+        vars: weakLinkVars,
+      },
+    },
+  },
+});
+
+export const regularLinkDarkMode = styleVariants({
+  light: {
+    selectors: {
+      [`html${darkMode} &`]: {
+        vars: lightModeRegularLinkVars,
+      },
+      [`html${darkMode} ${inheritLinkColor} > &`]: {
+        vars: weakLinkVars,
+      },
+    },
+  },
+  dark: {
+    selectors: {
+      [`html${darkMode} &`]: {
+        vars: darkModeRegularLinkVars,
+      },
+      [`html${darkMode} ${inheritLinkColor} > &`]: {
+        vars: weakLinkVars,
+      },
+    },
+  },
+});
+
+export const visitedLightMode = styleVariants({
+  light: {
+    selectors: {
+      [`html:not(${darkMode}) &:visited`]: {
+        color: vars.foregroundColor.linkVisited,
+      },
+    },
+  },
+  dark: {
+    selectors: {
+      [`html:not(${darkMode}) &:visited`]: {
+        color: vars.foregroundColor.linkLightVisited,
+      },
+    },
+  },
+});
+
+export const visitedDarkMode = styleVariants({
+  light: {
+    selectors: {
+      [`html${darkMode} &:visited`]: {
+        color: vars.foregroundColor.linkVisited,
+      },
+    },
+  },
+  dark: {
+    selectors: {
+      [`html${darkMode} &:visited`]: {
+        color: vars.foregroundColor.linkLightVisited,
+      },
+    },
+  },
+});

package/lib/components/TextLink/TextLink.docs.tsx

@@ -103,7 +103,7 @@ const docs: ComponentDocs = {
           </Text>
         </>
       ),
-      background: 'surface',
+      background: { lightMode: 'surface', darkMode: 'bodyDark' },
       Example: () =>
         source(
           <Stack space="large">

package/lib/components/TextLink/TextLink.screenshots.tsx

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

package/lib/components/TextLink/TextLink.tsx

@@ -1,18 +1,20 @@
 import clsx from 'clsx';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { atoms, Atoms } from '../../css/atoms/atoms';
-import { useBackground } from '../Box/BackgroundContext';
+import {
+  useBackgroundLightness,
+  useBackground,
+} from '../Box/BackgroundContext';
+import { BoxBackgroundVariant } from '../Box/Box';
 import {
   useLinkComponent,
   LinkComponentProps,
 } from '../BraidProvider/BraidProvider';
-import HeadingContext from '../Heading/HeadingContext';
-import { TextContext } from '../Text/TextContext';
 import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
-import * as typographyStyles from '../../hooks/typography/typography.css';
+import * as styles from './TextLink.css';
 
 export interface TextLinkStyles {
   weight?: 'regular' | 'weak';
@@ -27,46 +29,52 @@ export interface TextLinkProps
 }
 
 const isPlainBackground = (
-  backgroundContext: ReturnType<typeof useBackground>,
+  backgroundContext: BoxBackgroundVariant,
+  contrast: 'dark' | 'light',
 ) =>
-  backgroundContext === 'body' ||
-  backgroundContext === 'surface' ||
-  backgroundContext === 'neutralLight' ||
-  backgroundContext === 'neutralSoft';
-
-function useDefaultLinkWeight() {
-  const backgroundContext = useBackground();
-  const inHeading = useContext(HeadingContext);
-  const textContext = useContext(TextContext);
-
-  const inPlainText =
-    !textContext ||
-    textContext.tone === undefined ||
-    textContext.tone === 'neutral' ||
-    textContext.tone === 'secondary';
-
-  return isPlainBackground(backgroundContext) && (inHeading || inPlainText)
-    ? 'regular'
-    : 'weak';
-}
+  (contrast === 'light' &&
+    (backgroundContext === 'body' ||
+      backgroundContext === 'surface' ||
+      backgroundContext === 'neutralLight')) ||
+  (contrast === 'dark' &&
+    (backgroundContext === 'bodyDark' ||
+      backgroundContext === 'surfaceDark' ||
+      backgroundContext === 'neutral'));
 
-export function useLinkStyles({
+export const useLinkStyles = ({
   reset = 'a',
-  weight: weightProp,
+  weight,
   showVisited = false,
   hitArea = 'standard',
 }: Pick<TextLinkProps, 'weight' | 'showVisited' | 'hitArea'> & {
   reset?: Atoms['reset'] | false;
-}) {
-  const defaultWeight = useDefaultLinkWeight();
-  const weight = weightProp ?? defaultWeight;
+}) => {
+  const backgroundLightness = useBackgroundLightness();
+  const backgroundContext = useBackground();
 
-  return clsx(
-    typographyStyles.textLink,
+  const linkStyles =
     weight === 'weak'
-      ? typographyStyles.weakLink
-      : typographyStyles.regularLink,
-    showVisited ? typographyStyles.textLinkVisited : null,
+      ? styles.weakLink
+      : [
+          isPlainBackground(backgroundContext.lightMode, 'light') ||
+          weight === 'regular'
+            ? styles.regularLinkLightMode[backgroundLightness.lightMode]
+            : styles.weakLink,
+          isPlainBackground(backgroundContext.darkMode, 'dark') ||
+          weight === 'regular'
+            ? styles.regularLinkDarkMode[backgroundLightness.darkMode]
+            : styles.weakLink,
+        ];
+
+  return clsx(
+    styles.base,
+    linkStyles,
+    showVisited
+      ? [
+          styles.visitedLightMode[backgroundLightness.lightMode],
+          styles.visitedDarkMode[backgroundLightness.darkMode],
+        ]
+      : '',
     reset !== false
       ? atoms({
           reset: typeof reset === 'string' ? reset : 'a',
@@ -77,7 +85,7 @@ export function useLinkStyles({
     }),
     hitArea === 'large' && virtualTouchable(),
   );
-}
+};
 
 export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
   ({ weight, showVisited, hitArea, data, ...props }, ref) => {

package/lib/components/Textarea/Highlight/Highlight.tsx

@@ -10,7 +10,7 @@ export const Highlight = ({ children }: HighlightProps) => (
   <Box
     component="mark"
     borderRadius="standard"
-    background="criticalLight"
+    background={{ lightMode: 'criticalLight', darkMode: 'critical' }}
     className={styles.root}
   >
     {children}

package/lib/components/Textarea/Textarea.docs.tsx

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