braid-design-system 31.0.0 → 31.2.2

package/lib/components/private/Keyline/Keyline.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, BoxProps } from '../../Box/Box';
+import { useBackgroundLightness } from '../../Box/BackgroundContext';
+import * as styles from './Keyline.css';
+
+interface KeylineProps {
+  tone: 'promote' | 'info' | 'positive' | 'caution' | 'critical' | 'formAccent';
+  borderRadius?: BoxProps['borderRadius'];
+}
+
+export const Keyline = ({ tone, borderRadius }: KeylineProps) => {
+  const backgroundLightness = useBackgroundLightness();
+
+  return (
+    <Box
+      component="span"
+      position="absolute"
+      top={0}
+      bottom={0}
+      left={0}
+      overflow="hidden"
+      borderRadius={borderRadius}
+      className={[styles.noRadiusOnRight, styles.largestWidth]}
+    >
+      <Box
+        component="span"
+        height="full"
+        display="inlineBlock"
+        paddingLeft="xxsmall"
+        className={[
+          styles.tone[tone],
+          styles.lightMode[backgroundLightness.lightMode],
+          styles.darkMode[backgroundLightness.darkMode],
+        ]}
+      />
+    </Box>
+  );
+};

package/lib/components/private/Placeholder/Placeholder.css.ts

@@ -1,20 +1,52 @@
-import { createTheme, style } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { colorModeStyle } from '../../../css/colorModeStyle';
 
-export const [lightTheme, vars] = createTheme(
-  {
+const vars = createThemeContract({
+  background: null,
+  borderColor: null,
+  labelColor: null,
+  lineColor: null,
+});
+
+const lightContextVars = {
+  vars: assignVars(vars, {
     background: 'hsla(0, 0%, 20%, 0.08)',
     borderColor: 'hsla(0, 0%, 20%, 0.3)',
     labelColor: 'hsla(0, 0%, 20%, 0.4)',
     lineColor: 'hsla(0, 0%, 20%, 0.1)',
-  },
-  'lightTheme',
-);
-
-export const darkTheme = createTheme(vars, {
-  background: 'hsla(0, 0%, 100%, 0.35)',
-  borderColor: 'hsla(0, 0%, 100%, 0.8)',
-  labelColor: 'hsla(0, 0%, 100%, 0.8)',
-  lineColor: 'hsla(0, 0%, 100%, 0.4)',
+  }),
+};
+
+const darkContextVars = {
+  vars: assignVars(vars, {
+    background: 'hsla(0, 0%, 100%, 0.05)',
+    borderColor: 'hsla(0, 0%, 100%, 0.4)',
+    labelColor: 'hsla(0, 0%, 100%, 0.6)',
+    lineColor: 'hsla(0, 0%, 100%, 0.2)',
+  }),
+};
+
+export const lightTheme = styleVariants({
+  light: colorModeStyle({
+    lightMode: lightContextVars,
+  }),
+  dark: colorModeStyle({
+    lightMode: darkContextVars,
+  }),
+});
+
+export const darkTheme = styleVariants({
+  light: colorModeStyle({
+    darkMode: lightContextVars,
+  }),
+  dark: colorModeStyle({
+    darkMode: darkContextVars,
+  }),
 });
 
 const borderWidth = '2px';

package/lib/components/private/Placeholder/Placeholder.tsx

@@ -21,8 +21,7 @@ export const Placeholder = ({
   height = 120,
   shape = 'rectangle',
 }: PlaceholderProps) => {
-  const theme =
-    useBackgroundLightness() === 'light' ? styles.lightTheme : styles.darkTheme;
+  const lightness = useBackgroundLightness();
 
   return (
     <Box
@@ -32,7 +31,12 @@ export const Placeholder = ({
       alignItems="center"
       justifyContent="center"
       borderRadius={shape === 'round' ? 'full' : undefined}
-      className={[wireframe.vanillaTheme, theme, styles.box]}
+      className={[
+        wireframe.vanillaTheme,
+        styles.lightTheme[lightness.lightMode],
+        styles.darkTheme[lightness.darkMode],
+        styles.box,
+      ]}
       style={{
         width: resolveToPxIfUnitless(width),
         height: resolveToPxIfUnitless(height),

package/lib/components/private/touchable/debugTouchable.ts

@@ -1,13 +1,13 @@
-import { Style } from 'sku/treat';
+import type { StyleRule } from '@vanilla-extract/css';
 
-type SelectorMap = Style['selectors'];
-
-export const debugTouchable = ({ after = false } = {}): SelectorMap =>
+export const debugTouchable = ({ after = false } = {}): StyleRule =>
   process.env.NODE_ENV === 'production'
     ? {}
     : {
-        [`[data-braid-debug] &${after ? ':after' : ''}`]: {
-          background: 'red',
-          opacity: 0.2,
+        selectors: {
+          [`[data-braid-debug] &${after ? ':after' : ''}`]: {
+            background: 'red',
+            opacity: 0.2,
+          },
         },
       };

package/lib/components/private/touchable/virtualTouchable.css.ts

@@ -3,19 +3,19 @@ import { style } from '@vanilla-extract/css';
 import { debugTouchable } from './debugTouchable';
 import { virtualTouchableRules } from './virtualTouchableRules';
 
-export const virtualTouchable = style({
-  position: 'relative',
-  ':after': {
-    content: '""',
-    position: 'absolute',
-    left: -10,
-    right: -10,
-    ...virtualTouchableRules,
-  },
-  selectors: {
-    ...debugTouchable({ after: true }),
+export const virtualTouchable = style([
+  {
+    position: 'relative',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      left: -10,
+      right: -10,
+      ...virtualTouchableRules,
+    },
   },
-});
+  debugTouchable({ after: true }),
+]);
 
 export const yAxisOnly = style({
   ':after': {

package/lib/components/useToast/Toast.tsx

@@ -12,6 +12,7 @@ import { IconPositive, IconCritical } from '../icons';
 import { ClearButton } from '../iconButtons/ClearButton/ClearButton';
 import { useTimeout } from './useTimeout';
 import { InternalToast, ToastAction } from './ToastTypes';
+import { Keyline } from '../private/Keyline/Keyline';
 import * as styles from './Toast.css';
 
 const toneToIcon = {
@@ -154,14 +155,7 @@ const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
                     </Box>
                   </Column>
                 </Columns>
-                <Box
-                  background={tone}
-                  paddingLeft="xxsmall"
-                  position="absolute"
-                  left={0}
-                  top={0}
-                  bottom={0}
-                />
+                <Keyline tone={tone} borderRadius={borderRadius} />
               </Box>
             </ContentBlock>
           </Box>

package/lib/css/atoms/atomicProperties.ts

@@ -48,7 +48,6 @@ export const pseudoProperties = {
 export type PseudoProperties = keyof typeof pseudoProperties;
 
 export const unresponsiveProperties = {
-  background: vars.backgroundColor,
   overflow: ['hidden', 'scroll', 'visible', 'auto'],
   userSelect: ['none'],
   outline: ['none'],
@@ -64,7 +63,6 @@ export const unresponsiveProperties = {
     modal: 300,
     notification: 400,
   },
-  boxShadow,
   cursor: ['default', 'pointer'],
   pointerEvents: ['none'],
   top: [0],
@@ -82,8 +80,15 @@ export const unresponsiveProperties = {
 
 export type UnresponsiveProperties = keyof typeof unresponsiveProperties;
 
+export const colorProperties = {
+  background: vars.backgroundColor,
+  boxShadow,
+} as const;
+
 export type Background = keyof typeof vars.backgroundColor;
 
+export type ColorProperties = keyof typeof colorProperties;
+
 export const responsiveProperties = {
   display: {
     none: 'none',

package/lib/css/atoms/sprinkles.css.ts

@@ -1,3 +1,4 @@
+import { style } from '@vanilla-extract/css';
 import {
   ConditionalValue,
   RequiredConditionalValue,
@@ -12,6 +13,7 @@ import {
   responsiveProperties,
   unresponsiveProperties,
   pseudoProperties,
+  colorProperties,
 } from './atomicProperties';
 
 const unresponsiveAtomicProperties = defineProperties({
@@ -28,6 +30,21 @@ const pseudoAtomicProperties = defineProperties({
   properties: pseudoProperties,
 });
 
+export const darkMode = style({});
+export const colorModeSelectors = {
+  light: `html:not(${darkMode}) &`,
+  dark: `html${darkMode} &`,
+};
+
+const colorAtomicProperties = defineProperties({
+  defaultCondition: 'lightMode',
+  conditions: {
+    lightMode: { selector: colorModeSelectors.light },
+    darkMode: { selector: colorModeSelectors.dark },
+  },
+  properties: colorProperties,
+});
+
 const responsiveAtomicProperties = defineProperties({
   defaultCondition: 'mobile',
   conditions: {
@@ -58,6 +75,7 @@ export const sprinkles = createSprinkles(
   unresponsiveAtomicProperties,
   responsiveAtomicProperties,
   pseudoAtomicProperties,
+  colorAtomicProperties,
 );
 
 export type OptionalResponsiveValue<Value extends string | number> =
@@ -74,3 +92,9 @@ export const normalizeResponsiveValue = createNormalizeValueFn(
   responsiveAtomicProperties,
 );
 export const mapResponsiveValue = createMapValueFn(responsiveAtomicProperties);
+
+export type ColorModeValue<Value extends string | number> = ConditionalValue<
+  typeof colorAtomicProperties,
+  Value
+>;
+export const mapColorModeValue = createMapValueFn(colorAtomicProperties);

package/lib/css/colorModeStyle.ts

@@ -0,0 +1,33 @@
+import { StyleRule } from '@vanilla-extract/css';
+import { colorModeSelectors } from './atoms/sprinkles.css';
+
+type CSSProps = Omit<StyleRule, 'selectors' | '@media' | '@supports'>;
+
+const makeSelector = (
+  mode: keyof typeof colorModeSelectors,
+  styles?: CSSProps,
+) =>
+  !styles || Object.keys(styles).length === 0
+    ? {}
+    : {
+        [colorModeSelectors[mode]]: styles,
+      };
+
+interface ColorModeStyle {
+  lightMode?: CSSProps;
+  darkMode?: CSSProps;
+}
+
+export const colorModeStyle = ({
+  lightMode,
+  darkMode,
+}: ColorModeStyle): StyleRule => ({
+  ...(lightMode || darkMode
+    ? {
+        selectors: {
+          ...makeSelector('light', lightMode),
+          ...makeSelector('dark', darkMode),
+        },
+      }
+    : {}),
+});

package/lib/css/reset/reset.css.ts

@@ -48,14 +48,20 @@ const appearance = style({
   appearance: 'none',
 });
 
-const field = style([block, appearance]);
-
-// Custom reset rules
-const mark = style({
+const transparent = style({
   backgroundColor: 'transparent',
-  color: 'inherit',
 });
 
+const field = style([block, appearance, transparent]);
+
+// Custom reset rules
+const mark = style([
+  transparent,
+  {
+    color: 'inherit',
+  },
+]);
+
 const select = style([
   field,
   style({
@@ -84,9 +90,7 @@ const input = style([
   }),
 ]);
 
-const button = style({
-  background: 'none',
-});
+const button = style([transparent]);
 
 const a = style({
   textDecoration: 'none',

package/lib/hooks/typography/index.ts

@@ -1,25 +1,17 @@
 import clsx from 'clsx';
 import type { StyleRule } from '@vanilla-extract/css';
-import assert from 'assert';
-
-import {
-  useBackground,
-  useBackgroundLightness,
-} from '../../components/Box/BackgroundContext';
-import { BoxProps } from '../../components/Box/Box';
-import { useDefaultTextProps } from '../../components/private/defaultTextProps';
 import { vars } from '../../themes/vars.css';
 import { responsiveStyle } from '../../css/responsiveStyle';
 import * as styles from './typography.css';
+import * as linkStyles from '../../components/TextLink/TextLink.css';
 
-type TextTone = keyof typeof styles.tone | 'neutral';
+type TextTone = keyof typeof styles.tone;
 
 export interface UseTextProps {
   weight?: keyof typeof styles.fontWeight;
   size?: keyof typeof styles.text;
   tone?: TextTone;
   baseline: boolean;
-  backgroundContext?: BoxProps['background'];
 }
 
 export const globalTextStyle = ({
@@ -46,9 +38,8 @@ export function useText({
   size = 'standard',
   tone = 'neutral',
   baseline,
-  backgroundContext,
 }: UseTextProps) {
-  const textTone = useTextTone({ tone, backgroundContext });
+  const textTone = useTextTone({ tone });
 
   return clsx(
     styles.fontFamily,
@@ -65,7 +56,6 @@ interface UseHeadingProps {
   weight?: HeadingWeight;
   level: HeadingLevel;
   baseline: boolean;
-  backgroundContext?: BoxProps['background'];
 }
 
 export const globalHeadingStyle = ({
@@ -91,9 +81,8 @@ export function useHeading({
   weight = 'regular',
   level,
   baseline,
-  backgroundContext,
 }: UseHeadingProps) {
-  const textTone = useTextTone({ tone: 'neutral', backgroundContext });
+  const textTone = useTextTone({ tone: 'neutral' });
 
   return clsx(
     styles.fontFamily,
@@ -111,52 +100,10 @@ export function useWeight(weight: keyof typeof styles.fontWeight) {
   return styles.fontWeight[weight];
 }
 
-const neutralToneOverrideForBackground: Partial<
-  Record<NonNullable<BoxProps['background']>, keyof typeof styles.tone>
-> = {
-  criticalLight: 'critical',
-  criticalSoft: 'critical',
-  criticalSoftActive: 'critical',
-  criticalSoftHover: 'critical',
-  caution: 'caution',
-  cautionLight: 'caution',
-  positiveLight: 'positive',
-  infoLight: 'info',
-  promoteLight: 'promote',
-};
-
-export function useTextTone({
-  tone: toneProp,
-  backgroundContext: backgroundContextOverride,
-}: {
-  tone: TextTone;
-  backgroundContext?: BoxProps['background'];
-}) {
-  const backgroundContext = useBackground();
-  const background = backgroundContextOverride || backgroundContext;
-  const backgroundLightness = useBackgroundLightness(background);
-  const { tone } = useDefaultTextProps({ tone: toneProp });
-
-  if (tone === 'neutral' && background in neutralToneOverrideForBackground) {
-    const toneOverride =
-      neutralToneOverrideForBackground[
-        background as keyof typeof neutralToneOverrideForBackground
-      ];
-
-    assert(toneOverride, `Tone override not found for tone: ${tone}`);
-
-    return styles.tone[toneOverride];
-  }
-
-  if (tone !== 'neutral') {
-    return tone in styles.invertableTone
-      ? styles.invertableTone[tone as keyof typeof styles.invertableTone][
-          backgroundLightness
-        ]
-      : styles.tone[tone];
-  }
-
-  return styles.invertableTone.neutral[backgroundLightness];
+export function useTextTone({ tone }: { tone: TextTone }) {
+  return tone !== 'neutral' && tone !== 'secondary'
+    ? `${styles.tone[tone]} ${linkStyles.inheritLinkColor}`
+    : styles.tone[tone];
 }
 
 export const touchableText = styles.touchable;