@atlaskit/ds-explorations 0.1.5 → 1.1.0

package/src/components/box.partial.tsx

@@ -1,28 +1,40 @@
 /** @jsx jsx */
-import { CSSProperties, ElementType, forwardRef, HTMLAttributes } from 'react';
+import {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+  FC,
+  forwardRef,
+  ReactElement,
+} from 'react';
 
 import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 
-import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
-
 import { SurfaceContext } from './surface-provider';
 import type { BasePrimitiveProps, NonTextChildren } from './types';
 
-export interface BoxProps<T extends HTMLElement = HTMLElement>
-  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
-    BasePrimitiveProps {
+type PropsToOmit = 'as' | 'className' | 'style';
+
+export type BoxProps<T extends ElementType = 'div'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  PropsToOmit
+> &
+  BasePrimitiveProps &
+  BoxPropsBase<T>;
+
+type BoxPropsBase<T extends ElementType> = {
   /**
    * The DOM element to render as the Box. Defaults to `div`.
    */
-  as?: ElementType;
+  as?: T;
   /**
    * Elements to be rendered inside the Box.
    */
-  children?: NonTextChildren | boolean | null | undefined;
+  children?: NonTextChildren | boolean | null;
   /**
-   * The html className attribute.
+   * The HTML className attribute.
    *
    * Before using this prop please ensure:
    * - The styles cannot otherwise be achieved through `Box` directly.
@@ -36,7 +48,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
   /**
    * Token representing background color with a fallback.
    */
-  backgroundColor?: [BackgroundColor, string];
+  backgroundColor?: BackgroundColor;
   /**
    * Defines border style.
    */
@@ -48,7 +60,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
   /**
    * Token representing border color with a fallback.
    */
-  borderColor?: [BorderColor, string];
+  borderColor?: BorderColor;
   /**
    * Defines border radius.
    */
@@ -75,23 +87,23 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
    * @see paddingBlock
    * @see paddingInline
    */
-  padding?: GlobalSpacingToken;
+  padding?: Padding;
   /**
    * Token representing CSS `padding-block`.
    */
-  paddingBlock?: GlobalSpacingToken;
+  paddingBlock?: PaddingBlock;
   /**
    * Token representing CSS `padding-inline`.
    */
-  paddingInline?: GlobalSpacingToken;
+  paddingInline?: PaddingInline;
   /**
    * Token representing width.
    */
-  width?: GlobalSpacingToken;
+  width?: Width;
   /**
    * Token representing height.
    */
-  height?: GlobalSpacingToken;
+  height?: Height;
   /**
    * Defines display type and layout. Defaults to `flex`.
    */
@@ -99,8 +111,17 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
   /**
    * CSS position property.
    */
-  position?: keyof typeof positionMap;
-}
+  position?: Position;
+  ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
+type BoxComponent<T extends ElementType = 'div'> = (<
+  T extends ElementType = 'div'
+>(
+  props: BoxProps<T>,
+) => ReactElement | null) &
+  FC<BoxProps<T>>;
 
 /**
  * __Box__
@@ -110,18 +131,18 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
  *
  * @internal
  */
-const Box = forwardRef<HTMLElement, BoxProps>(
-  (
+export const Box: BoxComponent = forwardRef(
+  <T extends ElementType = 'div'>(
     {
       children,
-      as: Component = 'div',
+      as,
       className,
       display = 'flex',
       flexDirection,
       alignItems,
       justifyContent,
-      backgroundColor: backgroundColorTuple,
-      borderColor: borderColorTuple,
+      backgroundColor,
+      borderColor,
       borderStyle,
       borderWidth,
       borderRadius,
@@ -135,23 +156,13 @@ const Box = forwardRef<HTMLElement, BoxProps>(
       UNSAFE_style,
       testId,
       ...htmlAttributes
-    },
-    ref,
+    }: BoxProps<T>,
+    ref?: ComponentPropsWithRef<T>['ref'],
   ) => {
-    const [backgroundColor, backgroundColorFallback] =
-      backgroundColorTuple || [];
-    const [borderColor, borderColorFallback] = borderColorTuple || [];
-
+    const Component = as || 'div';
     const node = (
       <Component
-        style={{
-          ...UNSAFE_style,
-          ...(backgroundColorFallback &&
-            ({ '--ds-bg-fb': backgroundColorFallback } as CSSProperties)),
-          ...(borderColorFallback &&
-            ({ '--ds-bo-fb': borderColorFallback } as CSSProperties)),
-        }}
-        // @ts-ignore
+        style={UNSAFE_style}
         ref={ref}
         // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
         {...htmlAttributes}
@@ -171,6 +182,7 @@ const Box = forwardRef<HTMLElement, BoxProps>(
           borderWidth && borderWidthMap[borderWidth],
           borderRadius && borderRadiusMap[borderRadius],
           flexDirection && flexDirectionMap[flexDirection],
+          overflow && overflowMap[overflow],
           width && widthMap[width],
           height && heightMap[height],
         ]}
@@ -247,155 +259,288 @@ const displayMap = {
   inlineFlex: css({ display: 'inline-flex' }),
 };
 
-const baseStyles = css({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none',
-});
+type Position = keyof typeof positionMap;
+const positionMap = {
+  absolute: css({ position: 'absolute' }),
+  relative: css({ position: 'relative' }),
+  static: css({ position: 'static' }),
+};
 
 type Overflow = keyof typeof overflowMap;
 const overflowMap = {
   auto: css({ overflow: 'auto' }),
 };
 
-const positionMap = {
-  absolute: css({ position: 'absolute' }),
-  relative: css({ position: 'relative' }),
-  static: css({ position: 'static' }),
-};
+const baseStyles = css({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none',
+});
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::57b4c7c177fdfae3f7cd4f00287fd30e>>
+ * @codegen <<SignedSource::af3861211bc952f699f2ee08458af9a1>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const paddingMap = {
-  'sp-0': css({ padding: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ padding: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ padding: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ padding: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ padding: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ padding: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ padding: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ padding: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ padding: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ padding: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ padding: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ padding: SPACING_SCALE['sp-800'] }),
+  'scale.0': css({
+    padding: token('spacing.scale.0', '0'),
+  }),
+  'scale.025': css({
+    padding: token('spacing.scale.025', '0.125rem'),
+  }),
+  'scale.050': css({
+    padding: token('spacing.scale.050', '0.25rem'),
+  }),
+  'scale.075': css({
+    padding: token('spacing.scale.075', '0.375rem'),
+  }),
+  'scale.100': css({
+    padding: token('spacing.scale.100', '0.5rem'),
+  }),
+  'scale.150': css({
+    padding: token('spacing.scale.150', '0.75rem'),
+  }),
+  'scale.200': css({
+    padding: token('spacing.scale.200', '1rem'),
+  }),
+  'scale.250': css({
+    padding: token('spacing.scale.250', '1.25rem'),
+  }),
+  'scale.300': css({
+    padding: token('spacing.scale.300', '1.5rem'),
+  }),
+  'scale.400': css({
+    padding: token('spacing.scale.400', '2rem'),
+  }),
+  'scale.500': css({
+    padding: token('spacing.scale.500', '2.5rem'),
+  }),
+  'scale.600': css({
+    padding: token('spacing.scale.600', '3rem'),
+  }),
 };
 
+export type Padding = keyof typeof paddingMap;
+
 const paddingBlockMap = {
-  'sp-0': css({ paddingBlock: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ paddingBlock: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ paddingBlock: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ paddingBlock: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ paddingBlock: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ paddingBlock: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ paddingBlock: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ paddingBlock: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ paddingBlock: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ paddingBlock: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ paddingBlock: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ paddingBlock: SPACING_SCALE['sp-800'] }),
+  'scale.0': css({
+    paddingBlock: token('spacing.scale.0', '0'),
+  }),
+  'scale.025': css({
+    paddingBlock: token('spacing.scale.025', '0.125rem'),
+  }),
+  'scale.050': css({
+    paddingBlock: token('spacing.scale.050', '0.25rem'),
+  }),
+  'scale.075': css({
+    paddingBlock: token('spacing.scale.075', '0.375rem'),
+  }),
+  'scale.100': css({
+    paddingBlock: token('spacing.scale.100', '0.5rem'),
+  }),
+  'scale.150': css({
+    paddingBlock: token('spacing.scale.150', '0.75rem'),
+  }),
+  'scale.200': css({
+    paddingBlock: token('spacing.scale.200', '1rem'),
+  }),
+  'scale.250': css({
+    paddingBlock: token('spacing.scale.250', '1.25rem'),
+  }),
+  'scale.300': css({
+    paddingBlock: token('spacing.scale.300', '1.5rem'),
+  }),
+  'scale.400': css({
+    paddingBlock: token('spacing.scale.400', '2rem'),
+  }),
+  'scale.500': css({
+    paddingBlock: token('spacing.scale.500', '2.5rem'),
+  }),
+  'scale.600': css({
+    paddingBlock: token('spacing.scale.600', '3rem'),
+  }),
 };
 
+export type PaddingBlock = keyof typeof paddingBlockMap;
+
 const paddingInlineMap = {
-  'sp-0': css({ paddingInline: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ paddingInline: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ paddingInline: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ paddingInline: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ paddingInline: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ paddingInline: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ paddingInline: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ paddingInline: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ paddingInline: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ paddingInline: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ paddingInline: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ paddingInline: SPACING_SCALE['sp-800'] }),
+  'scale.0': css({
+    paddingInline: token('spacing.scale.0', '0'),
+  }),
+  'scale.025': css({
+    paddingInline: token('spacing.scale.025', '0.125rem'),
+  }),
+  'scale.050': css({
+    paddingInline: token('spacing.scale.050', '0.25rem'),
+  }),
+  'scale.075': css({
+    paddingInline: token('spacing.scale.075', '0.375rem'),
+  }),
+  'scale.100': css({
+    paddingInline: token('spacing.scale.100', '0.5rem'),
+  }),
+  'scale.150': css({
+    paddingInline: token('spacing.scale.150', '0.75rem'),
+  }),
+  'scale.200': css({
+    paddingInline: token('spacing.scale.200', '1rem'),
+  }),
+  'scale.250': css({
+    paddingInline: token('spacing.scale.250', '1.25rem'),
+  }),
+  'scale.300': css({
+    paddingInline: token('spacing.scale.300', '1.5rem'),
+  }),
+  'scale.400': css({
+    paddingInline: token('spacing.scale.400', '2rem'),
+  }),
+  'scale.500': css({
+    paddingInline: token('spacing.scale.500', '2.5rem'),
+  }),
+  'scale.600': css({
+    paddingInline: token('spacing.scale.600', '3rem'),
+  }),
 };
 
+export type PaddingInline = keyof typeof paddingInlineMap;
+
 const widthMap = {
-  'sp-0': css({ width: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ width: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ width: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ width: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ width: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ width: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ width: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ width: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ width: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ width: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ width: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ width: SPACING_SCALE['sp-800'] }),
+  'scale.0': css({
+    width: token('spacing.scale.0', '0'),
+  }),
+  'scale.025': css({
+    width: token('spacing.scale.025', '0.125rem'),
+  }),
+  'scale.050': css({
+    width: token('spacing.scale.050', '0.25rem'),
+  }),
+  'scale.075': css({
+    width: token('spacing.scale.075', '0.375rem'),
+  }),
+  'scale.100': css({
+    width: token('spacing.scale.100', '0.5rem'),
+  }),
+  'scale.150': css({
+    width: token('spacing.scale.150', '0.75rem'),
+  }),
+  'scale.200': css({
+    width: token('spacing.scale.200', '1rem'),
+  }),
+  'scale.250': css({
+    width: token('spacing.scale.250', '1.25rem'),
+  }),
+  'scale.300': css({
+    width: token('spacing.scale.300', '1.5rem'),
+  }),
+  'scale.400': css({
+    width: token('spacing.scale.400', '2rem'),
+  }),
+  'scale.500': css({
+    width: token('spacing.scale.500', '2.5rem'),
+  }),
+  'scale.600': css({
+    width: token('spacing.scale.600', '3rem'),
+  }),
 };
 
+export type Width = keyof typeof widthMap;
+
 const heightMap = {
-  'sp-0': css({ height: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ height: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ height: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ height: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ height: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ height: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ height: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ height: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ height: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ height: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ height: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ height: SPACING_SCALE['sp-800'] }),
+  'scale.0': css({
+    height: token('spacing.scale.0', '0'),
+  }),
+  'scale.025': css({
+    height: token('spacing.scale.025', '0.125rem'),
+  }),
+  'scale.050': css({
+    height: token('spacing.scale.050', '0.25rem'),
+  }),
+  'scale.075': css({
+    height: token('spacing.scale.075', '0.375rem'),
+  }),
+  'scale.100': css({
+    height: token('spacing.scale.100', '0.5rem'),
+  }),
+  'scale.150': css({
+    height: token('spacing.scale.150', '0.75rem'),
+  }),
+  'scale.200': css({
+    height: token('spacing.scale.200', '1rem'),
+  }),
+  'scale.250': css({
+    height: token('spacing.scale.250', '1.25rem'),
+  }),
+  'scale.300': css({
+    height: token('spacing.scale.300', '1.5rem'),
+  }),
+  'scale.400': css({
+    height: token('spacing.scale.400', '2rem'),
+  }),
+  'scale.500': css({
+    height: token('spacing.scale.500', '2.5rem'),
+  }),
+  'scale.600': css({
+    height: token('spacing.scale.600', '3rem'),
+  }),
 };
 
+export type Height = keyof typeof heightMap;
+
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
+ * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const borderColorMap = {
   'color.border': css({
-    borderColor: token('color.border', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border', '#091e4221'),
   }),
   bold: css({
-    borderColor: token('color.border.bold', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.bold', '#344563'),
   }),
   inverse: css({
-    borderColor: token('color.border.inverse', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.inverse', '#FFFFFF'),
   }),
   focused: css({
-    borderColor: token('color.border.focused', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.focused', '#4C9AFF'),
   }),
   input: css({
-    borderColor: token('color.border.input', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.input', '#FAFBFC'),
   }),
   disabled: css({
-    borderColor: token('color.border.disabled', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.disabled', '#FAFBFC'),
   }),
   brand: css({
-    borderColor: token('color.border.brand', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.brand', '#0052CC'),
   }),
   selected: css({
-    borderColor: token('color.border.selected', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.selected', '#0052CC'),
   }),
   danger: css({
-    borderColor: token('color.border.danger', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.danger', '#FF5630'),
   }),
   warning: css({
-    borderColor: token('color.border.warning', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.warning', '#FFC400'),
   }),
   success: css({
-    borderColor: token('color.border.success', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.success', '#00875A'),
   }),
   discovery: css({
-    borderColor: token('color.border.discovery', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.discovery', '#998DD9'),
   }),
   information: css({
-    borderColor: token('color.border.information', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.information', '#0065FF'),
   }),
 };
 
@@ -403,94 +548,82 @@ export type BorderColor = keyof typeof borderColorMap;
 
 const backgroundColorMap = {
   disabled: css({
-    backgroundColor: token('color.background.disabled', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.disabled', '#091e4289'),
   }),
   'inverse.subtle': css({
-    backgroundColor: token(
-      'color.background.inverse.subtle',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
   }),
   input: css({
-    backgroundColor: token('color.background.input', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.input', '#FAFBFC'),
   }),
   neutral: css({
-    backgroundColor: token('color.background.neutral', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.neutral', '#DFE1E6'),
   }),
   'neutral.subtle': css({
-    backgroundColor: token(
-      'color.background.neutral.subtle',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.neutral.subtle', 'transparent'),
   }),
   'neutral.bold': css({
-    backgroundColor: token('color.background.neutral.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.neutral.bold', '#42526E'),
   }),
   'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.brand.bold', '#0052CC'),
   }),
   selected: css({
-    backgroundColor: token('color.background.selected', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.selected', '#DEEBFF'),
   }),
   'selected.bold': css({
-    backgroundColor: token('color.background.selected.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.selected.bold', '#0052CC'),
   }),
   danger: css({
-    backgroundColor: token('color.background.danger', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.danger', '#FFEBE6'),
   }),
   'danger.bold': css({
-    backgroundColor: token('color.background.danger.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.danger.bold', '#DE350B'),
   }),
   warning: css({
-    backgroundColor: token('color.background.warning', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.warning', '#FFFAE6'),
   }),
   'warning.bold': css({
-    backgroundColor: token('color.background.warning.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.warning.bold', '#FFAB00'),
   }),
   success: css({
-    backgroundColor: token('color.background.success', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.success', '#E3FCEF'),
   }),
   'success.bold': css({
-    backgroundColor: token('color.background.success.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.success.bold', '#00875A'),
   }),
   discovery: css({
-    backgroundColor: token('color.background.discovery', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.discovery', '#EAE6FF'),
   }),
   'discovery.bold': css({
-    backgroundColor: token(
-      'color.background.discovery.bold',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.discovery.bold', '#5243AA'),
   }),
   information: css({
-    backgroundColor: token('color.background.information', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.information', '#DEEBFF'),
   }),
   'information.bold': css({
-    backgroundColor: token(
-      'color.background.information.bold',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.information.bold', '#0052CC'),
   }),
   'color.blanket': css({
-    backgroundColor: token('color.blanket', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket', '#091e4289'),
   }),
   'color.blanket.selected': css({
-    backgroundColor: token('color.blanket.selected', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket.selected', '#388BFF14'),
   }),
   'color.blanket.danger': css({
-    backgroundColor: token('color.blanket.danger', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket.danger', '#EF5C4814'),
   }),
   'elevation.surface': css({
-    backgroundColor: token('elevation.surface', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface', '#FFFFFF'),
   }),
   'elevation.surface.sunken': css({
-    backgroundColor: token('elevation.surface.sunken', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
   }),
   'elevation.surface.raised': css({
-    backgroundColor: token('elevation.surface.raised', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
   }),
   'elevation.surface.overlay': css({
-    backgroundColor: token('elevation.surface.overlay', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
   }),
 };