braid-design-system 31.0.0 → 31.2.2

package/lib/components/Toggle/Toggle.css.ts

@@ -3,6 +3,8 @@ import { calc } from '@vanilla-extract/css-utils';
 import { vars } from '../../themes/vars.css';
 import { hitArea } from '../private/touchable/hitArea';
 import { debugTouchable } from '../private/touchable/debugTouchable';
+import { rgba } from 'polished';
+import { colorModeStyle } from '../../css/colorModeStyle';
 
 const sizes = {
   standard: 'standard',
@@ -21,12 +23,12 @@ export const root = style({
   },
 });
 
-export const realField = style({
-  height: hitArea,
-  selectors: {
-    ...debugTouchable(),
+export const realField = style([
+  {
+    height: hitArea,
   },
-});
+  debugTouchable(),
+]);
 
 export const realFieldPosition = styleVariants(sizes, (size) => ({
   top: calc(hitArea)
@@ -61,8 +63,33 @@ export const slideTrack = styleVariants(sizes, (size) => ({
   height: calc.subtract(vars.inlineFieldSize[size], vars.grid),
 }));
 
-export const slideTrackBackground = style({
-  backgroundColor: vars.borderColor.neutralLight,
+export const slideTrackBgLightMode = styleVariants({
+  light: colorModeStyle({
+    lightMode: {
+      background: rgba('#000', 0.08),
+    },
+  }),
+  dark: colorModeStyle({
+    lightMode: {
+      background: rgba('#fff', 0.12),
+    },
+  }),
+});
+
+export const slideTrackBgDarkMode = styleVariants({
+  light: colorModeStyle({
+    darkMode: {
+      background: rgba('#000', 0.08),
+    },
+  }),
+  dark: colorModeStyle({
+    darkMode: {
+      background: rgba('#fff', 0.12),
+    },
+  }),
+});
+
+export const slideTrackMask = style({
   // Fix for Safari border-radius, overflow hidden, transform bug:
   // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
   WebkitMaskImage: '-webkit-radial-gradient(white, black)',

package/lib/components/Toggle/Toggle.tsx

@@ -40,7 +40,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
     { id, on, onChange, label, align = 'left', size = 'standard', data },
     forwardedRef,
   ) => {
-    const showBorder = useBackgroundLightness() === 'light';
+    const lightness = useBackgroundLightness();
 
     return (
       <Box
@@ -84,7 +84,12 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
             width="full"
             overflow="hidden"
             borderRadius="full"
-            className={[styles.slideTrack[size], styles.slideTrackBackground]}
+            className={[
+              styles.slideTrack[size],
+              styles.slideTrackMask,
+              styles.slideTrackBgLightMode[lightness.lightMode],
+              styles.slideTrackBgDarkMode[lightness.darkMode],
+            ]}
           >
             <Box
               position="absolute"
@@ -98,7 +103,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
           <Box
             position="absolute"
             background="surface"
-            boxShadow={showBorder ? 'borderField' : undefined}
+            boxShadow="borderField"
             transition="fast"
             display="flex"
             alignItems="center"

package/lib/components/iconButtons/IconButton.css.ts

@@ -10,35 +10,3 @@ export const button = style({
     },
   },
 });
-
-export const forceActive = style({});
-export const darkBackground = style({});
-
-export const hoverOverlay = style({
-  selectors: {
-    [`${button}:hover &, ${button}:focus &`]: {
-      opacity: 1,
-    },
-    [`${button}:hover &${darkBackground}, ${button}:focus &${darkBackground}`]:
-      {
-        opacity: 0.2,
-      },
-    [`${button}:active &, ${forceActive}&`]: {
-      opacity: 0.8,
-    },
-    [`${button}:active &${darkBackground}, ${forceActive}&${darkBackground}`]: {
-      opacity: 0.075,
-    },
-  },
-});
-
-export const focusOverlay = style({
-  selectors: {
-    [`${button}:focus &`]: {
-      opacity: 1,
-    },
-    [`${button}:focus &${darkBackground}`]: {
-      opacity: 0.15,
-    },
-  },
-});

package/lib/components/iconButtons/IconButton.tsx

@@ -6,16 +6,12 @@ import React, {
   forwardRef,
 } from 'react';
 import { Box } from '../Box/Box';
-import { Overlay } from '../private/Overlay/Overlay';
 import buildDataAttributes, {
   DataAttributeMap,
 } from '../private/buildDataAttributes';
-import { iconSize, iconContainerSize, UseIconProps } from '../../hooks/useIcon';
+import { iconContainerSize, UseIconProps } from '../../hooks/useIcon';
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
-import {
-  useBackground,
-  useBackgroundLightness,
-} from '../Box/BackgroundContext';
+import { ButtonOverlays, useButtonStyles } from '../Button/Button';
 import * as styles from './IconButton.css';
 
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;
@@ -52,9 +48,6 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     },
     forwardedRef,
   ) => {
-    const background = useBackground();
-    const backgroundLightness = useBackgroundLightness();
-
     const handleMouseDown = useCallback(
       (event: MouseEvent<HTMLButtonElement>) => {
         if (typeof onMouseDown !== 'function') {
@@ -80,14 +73,18 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       [onClick, onMouseDown],
     );
 
+    const { className, ...buttonStyles } = useButtonStyles({
+      variant: 'transparent',
+      tone: 'neutral',
+      size: 'standard',
+      radius: 'full',
+    });
+
     return (
       <Box
         component="button"
         type="button"
         ref={forwardedRef}
-        cursor="pointer"
-        outline="none"
-        className={[styles.button, virtualTouchable()]}
         zIndex={0}
         aria-label={label}
         aria-haspopup={ariaHasPopUp}
@@ -97,46 +94,27 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         onKeyUp={onKeyUp}
         onKeyDown={onKeyDown}
         onMouseDown={handleMouseDown}
-        transform={{ active: 'touchable' }}
-        transition="touchable"
         tabIndex={!keyboardAccessible ? -1 : undefined}
         {...(data ? buildDataAttributes(data) : undefined)}
+        {...buttonStyles}
+        className={[
+          className,
+          styles.button,
+          virtualTouchable(),
+          iconContainerSize(),
+        ]}
       >
-        <Box
-          position="relative"
-          display="flex"
-          className={iconContainerSize()}
-          alignItems="center"
-          justifyContent="center"
-          pointerEvents="none"
+        <ButtonOverlays
+          variant="transparent"
+          tone="neutral"
+          size="standard"
+          radius="full"
+          keyboardFocusable={keyboardAccessible}
+          labelSpacing={false}
+          forceActive={active}
         >
-          <Overlay
-            background={
-              background === 'body' || background === 'surface'
-                ? 'neutralLight'
-                : 'surface'
-            }
-            transition="fast"
-            borderRadius="full"
-            className={[
-              styles.hoverOverlay,
-              active && styles.forceActive,
-              backgroundLightness === 'dark' && styles.darkBackground,
-            ]}
-          />
-          {keyboardAccessible ? (
-            <Overlay
-              boxShadow="outlineFocus"
-              transition="fast"
-              borderRadius="full"
-              className={styles.focusOverlay}
-              onlyVisibleForKeyboardNavigation
-            />
-          ) : null}
-          <Box position="relative" className={iconSize()}>
-            {children({ size: 'fill', tone })}
-          </Box>
-        </Box>
+          {children({ tone })}
+        </ButtonOverlays>
       </Box>
     );
   },

package/lib/components/icons/IconTip/IconTip.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconTip, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconTip />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconTip/IconTip.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconTipSvg } from './IconTipSvg';
+
+export type IconTipProps = UseIconProps;
+
+export const IconTip = (props: IconTipProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconTipSvg} {...iconProps} />;
+};

package/lib/components/icons/IconTip/IconTipSvg.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconTipSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M9 18.957a1 1 0 0 1-1-1V16a8.96 8.96 0 0 0-1.485-2.633l-.277-.391a7 7 0 1 1 11.524 0l-.277.391A8.96 8.96 0 0 0 16 16v1.932a1 1 0 0 1-2 0V16c0-1.095.878-2.419 1.856-3.793l.261-.368a5 5 0 1 0-8.234 0l.26.368C9.124 13.581 10 14.905 10 16v1.957a1 1 0 0 1-1 1z" />
+    <path d="M13.286 22h-2.572A2.761 2.761 0 0 1 8 19.2V17a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2.2a2.761 2.761 0 0 1-2.714 2.8zM10 18v1.2a.761.761 0 0 0 .714.8h2.572a.761.761 0 0 0 .714-.8V18zm13-8h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm-1.475 5.5a.994.994 0 0 1-.499-.134l-1.732-1a1 1 0 1 1 1-1.732l1.732 1a1 1 0 0 1-.5 1.866zm-1.73-10a1 1 0 0 1-.501-1.866l1.732-1a1 1 0 1 1 1 1.732l-1.732 1a.994.994 0 0 1-.5.134zM3 10H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm-.525 5.5a1 1 0 0 1-.501-1.866l1.732-1a1 1 0 1 1 1 1.732l-1.732 1a.994.994 0 0 1-.5.134zm1.73-10a.994.994 0 0 1-.499-.134l-1.732-1a1 1 0 0 1 1-1.732l1.732 1a1 1 0 0 1-.5 1.866zM15 10a1 1 0 0 1-1-1 2.003 2.003 0 0 0-2-2 1 1 0 0 1 0-2 4.004 4.004 0 0 1 4 4 1 1 0 0 1-1 1z" />
+    <path d="M14 21a2 2 0 0 1-4 0" />
+  </svg>
+);

package/lib/components/icons/IconZoomIn/IconZoomIn.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconZoomIn, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconZoomIn />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconZoomIn/IconZoomIn.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconZoomInSvg } from './IconZoomInSvg';
+
+export type IconZoomInProps = UseIconProps;
+
+export const IconZoomIn = (props: IconZoomInProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconZoomInSvg} {...iconProps} />;
+};

package/lib/components/icons/IconZoomIn/IconZoomInSvg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconZoomInSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="m21.707 20.293-3.682-3.682a9.022 9.022 0 1 0-1.414 1.414l3.682 3.682a1 1 0 0 0 1.414-1.414zM4 11a7 7 0 1 1 11.962 4.93c-.006.006-.013.008-.019.013s-.007.013-.012.02A6.995 6.995 0 0 1 4 11z" />
+    <path d="M14 10h-2V8a1 1 0 0 0-2 0v2H8a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z" />
+  </svg>
+);

package/lib/components/icons/IconZoomOut/IconZoomOut.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconZoomOut, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconZoomOut />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconZoomOut/IconZoomOut.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconZoomOutSvg } from './IconZoomOutSvg';
+
+export type IconZoomOutProps = UseIconProps;
+
+export const IconZoomOut = (props: IconZoomOutProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconZoomOutSvg} {...iconProps} />;
+};

package/lib/components/icons/IconZoomOut/IconZoomOutSvg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconZoomOutSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="m21.707 20.293-3.682-3.682a9.022 9.022 0 1 0-1.414 1.414l3.682 3.682a1 1 0 0 0 1.414-1.414zM4 11a7 7 0 1 1 11.962 4.93c-.006.006-.013.008-.019.013s-.007.013-.012.02A6.995 6.995 0 0 1 4 11z" />
+    <path d="M14 10H8a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" />
+  </svg>
+);

package/lib/components/icons/Icons.screenshots.tsx

@@ -75,8 +75,8 @@ export const screenshots: ComponentScreenshot = {
     {
       label: 'Auto Tone (via TextContext)',
       Example: () => {
-        const iconTones = ['neutral', ...Object.keys(tones)].sort() as Array<
-          keyof typeof tones | 'neutral'
+        const iconTones = Object.keys(tones).sort() as Array<
+          keyof typeof tones
         >;
 
         return (

package/lib/components/icons/index.ts

@@ -69,7 +69,10 @@ export { IconTag } from './IconTag/IconTag';
 export { IconThumb } from './IconThumb/IconThumb';
 export { IconTick } from './IconTick/IconTick';
 export { IconTime } from './IconTime/IconTime';
+export { IconTip } from './IconTip/IconTip';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconVideo } from './IconVideo/IconVideo';
 export { IconVisibility } from './IconVisibility/IconVisibility';
 export { IconWorkExperience } from './IconWorkExperience/IconWorkExperience';
+export { IconZoomIn } from './IconZoomIn/IconZoomIn';
+export { IconZoomOut } from './IconZoomOut/IconZoomOut';

package/lib/components/index.ts

@@ -19,7 +19,9 @@ export { Alert } from './Alert/Alert';
 export { Autosuggest } from './Autosuggest/Autosuggest';
 export { filterSuggestions } from './Autosuggest/filterSuggestions';
 export { Badge } from './Badge/Badge';
-export { Box } from './Box/Box';
+// TODO: COLORMODE RELEASE
+// Expose internal Box
+export { PublicBox as Box } from './Box/Box';
 export { BoxRenderer } from './Box/BoxRenderer';
 export { Button } from './Button/Button';
 export { ButtonLink } from './ButtonLink/ButtonLink';

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

@@ -40,5 +40,6 @@ export const hoverOverlay = style({
 
 export const verticalDivider = style({
   width: vars.borderWidth.standard,
-  background: vars.borderColor.neutralLight,
+  background: vars.borderColor.field,
+  opacity: 0.4,
 });

package/lib/components/private/Field/Field.tsx

@@ -2,7 +2,6 @@ import assert from 'assert';
 import React, { Fragment, ReactNode, AllHTMLAttributes } from 'react';
 import clsx from 'clsx';
 import { Box, BoxProps } from '../../Box/Box';
-import { useBackgroundLightness } from '../../Box/BackgroundContext';
 import { FieldLabel, FieldLabelProps } from '../../FieldLabel/FieldLabel';
 import {
   FieldMessage,
@@ -122,9 +121,9 @@ export const Field = ({
     'description' in restProps && restProps.description
       ? `${id}-description`
       : undefined;
-  const fieldBackground = disabled ? 'neutralSoft' : 'surface';
-  const showFieldBorder =
-    useBackgroundLightness() === 'light' && (tone !== 'critical' || disabled);
+  const fieldBackground: BoxProps['background'] = disabled
+    ? { lightMode: 'neutralSoft', darkMode: 'neutral' }
+    : { lightMode: 'surface' };
 
   const hasValue = typeof value === 'string' ? value.length > 0 : value != null;
   const hasVisualLabel = 'label' in restProps;
@@ -135,7 +134,7 @@ export const Field = ({
     <Fragment>
       <FieldOverlay
         variant={disabled ? 'disabled' : 'default'}
-        visible={showFieldBorder}
+        visible={tone !== 'critical' || disabled}
       />
       <FieldOverlay
         variant="critical"
@@ -207,7 +206,6 @@ export const Field = ({
               styles.field,
               styles.placeholderColor,
               useText({
-                backgroundContext: fieldBackground,
                 tone: hasValue && !disabled ? 'neutral' : 'secondary',
                 size: 'standard',
                 baseline: false,

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

@@ -19,13 +19,13 @@ export const root = style({
   },
 });
 
-export const realField = style({
-  width: hitArea,
-  height: hitArea,
-  selectors: {
-    ...debugTouchable(),
+export const realField = style([
+  {
+    width: hitArea,
+    height: hitArea,
   },
-});
+  debugTouchable(),
+]);
 
 export const realFieldPosition = styleVariants(sizes, (size: Size) => {
   const offset = calc(hitArea)

package/lib/components/private/InlineField/StyledInput.tsx

@@ -6,11 +6,10 @@ import React, {
   AllHTMLAttributes,
 } from 'react';
 
-import { useBackgroundLightness } from '../../Box/BackgroundContext';
 import { FieldOverlay } from '../FieldOverlay/FieldOverlay';
 import { IconMinus, IconTick } from '../../icons';
 import buildDataAttributes, { DataAttributeMap } from '../buildDataAttributes';
-import { Box } from '../../Box/Box';
+import { Box, BoxProps } from '../../Box/Box';
 import * as styles from './InlineField.css';
 import type { Size } from './InlineField.css';
 
@@ -98,7 +97,11 @@ const Indicator = ({
     </Box>
   ) : (
     <Box
-      background={disabled ? 'neutralLight' : 'formAccent'}
+      background={
+        disabled
+          ? { lightMode: 'neutralLight', darkMode: 'surfaceDark' }
+          : 'formAccent'
+      }
       transition="fast"
       width="full"
       height="full"
@@ -144,11 +147,13 @@ export const StyledInput = forwardRef<
 
     const isCheckbox = type === 'checkbox';
     const fieldBorderRadius = isCheckbox ? 'standard' : 'full';
-    const accentBackground = disabled ? 'neutralLight' : 'formAccent';
-    const showFieldBorder =
-      useBackgroundLightness() === 'light' && (tone !== 'critical' || disabled);
-
+    const accentBackground: BoxProps['background'] = disabled
+      ? 'neutralLight'
+      : 'formAccent';
     const isMixed = isCheckbox && checked === 'mixed';
+    const fieldBackground: BoxProps['background'] = disabled
+      ? { lightMode: 'neutralSoft', darkMode: 'neutral' }
+      : { lightMode: 'surface' };
 
     useEffect(() => {
       if (ref && typeof ref === 'object' && ref.current && isCheckbox) {
@@ -205,13 +210,13 @@ export const StyledInput = forwardRef<
           flexShrink={0}
           position="relative"
           className={[styles.fakeField, styles.fakeFieldSize[size]]}
-          background={disabled ? 'neutralSoft' : 'surface'}
+          background={fieldBackground}
           borderRadius={fieldBorderRadius}
         >
           <FieldOverlay
             variant={disabled ? 'disabled' : 'default'}
             borderRadius={fieldBorderRadius}
-            visible={showFieldBorder}
+            visible={tone !== 'critical' || disabled}
           />
           <FieldOverlay
             variant="critical"

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

@@ -0,0 +1,70 @@
+import {
+  assignVars,
+  createThemeContract,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { colorModeStyle } from '../../../css/colorModeStyle';
+import { vars } from '../../../themes/vars.css';
+
+const keylineVars = createThemeContract({
+  promote: null,
+  info: null,
+  positive: null,
+  caution: null,
+  critical: null,
+  formAccent: null,
+});
+
+const lightModeVars = {
+  vars: assignVars(keylineVars, {
+    promote: vars.borderColor.promote,
+    info: vars.borderColor.info,
+    positive: vars.borderColor.positive,
+    caution: vars.borderColor.caution,
+    critical: vars.borderColor.critical,
+    formAccent: vars.borderColor.formAccent,
+  }),
+};
+
+const darkModeVars = {
+  vars: assignVars(keylineVars, {
+    promote: vars.borderColor.promoteLight,
+    info: vars.borderColor.infoLight,
+    positive: vars.borderColor.positiveLight,
+    caution: vars.borderColor.cautionLight,
+    critical: vars.borderColor.criticalLight,
+    formAccent: vars.borderColor.formAccentLight,
+  }),
+};
+
+export const tone = styleVariants(keylineVars, (_, name) => ({
+  background: keylineVars[name],
+}));
+
+export const lightMode = styleVariants({
+  light: colorModeStyle({
+    lightMode: lightModeVars,
+  }),
+  dark: colorModeStyle({
+    lightMode: darkModeVars,
+  }),
+});
+
+export const darkMode = styleVariants({
+  light: colorModeStyle({
+    darkMode: lightModeVars,
+  }),
+  dark: colorModeStyle({
+    darkMode: darkModeVars,
+  }),
+});
+
+export const noRadiusOnRight = style({
+  borderTopRightRadius: '0 !important',
+  borderBottomRightRadius: '0 !important',
+});
+
+export const largestWidth = style({
+  width: vars.borderRadius.xlarge,
+});