@atlaskit/primitives 0.1.0 → 0.2.0

package/dist/es2019/components/internal/base-box.partial.js

@@ -0,0 +1,839 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { LAYERS } from '../../constants';
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export const BaseBox = /*#__PURE__*/forwardRef(({
+  as,
+  className,
+  children,
+  color,
+  backgroundColor,
+  shadow,
+  borderStyle,
+  borderWidth,
+  borderRadius,
+  borderColor,
+  layer,
+  flex,
+  flexGrow,
+  flexShrink,
+  alignSelf,
+  overflow,
+  overflowInline,
+  overflowBlock,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  height,
+  width,
+  display = 'block',
+  position = 'static',
+  UNSAFE_style,
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  const Component = as || 'div';
+  const node = jsx(Component, _extends({
+    style: UNSAFE_style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, htmlAttributes, {
+    className: className,
+    css: [baseStyles, display && displayMap[display], backgroundColor && backgroundColorMap[backgroundColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], padding && paddingMap.padding[padding], position && positionMap[position], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
+    "data-testid": testId
+  }), children);
+  return node;
+});
+BaseBox.displayName = 'BaseBox';
+export default BaseBox;
+
+// <<< STYLES GO HERE >>>
+
+const borderStyleMap = {
+  none: css({
+    borderStyle: 'none'
+  }),
+  solid: css({
+    borderStyle: 'solid'
+  })
+};
+const borderWidthMap = {
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
+  }),
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
+  })
+};
+const borderRadiusMap = {
+  'radius.100': css({
+    borderRadius: "var(--ds-radius-200, 2px)"
+  }),
+  'radius.200': css({
+    borderRadius: "var(--ds-radius-200, 3px)"
+  }),
+  'radius.round': css({
+    borderRadius: "var(--ds-radius-round, 50%)"
+  }),
+  'radius.300': css({
+    borderRadius: "var(--ds-radius-300, 8px)"
+  }),
+  'radius.400': css({
+    borderRadius: "var(--ds-radius-400, 16px)"
+  })
+};
+const flexMap = {
+  '1': css({
+    flex: 1
+  })
+};
+const flexGrowMap = {
+  '0': css({
+    flexGrow: 0
+  }),
+  '1': css({
+    flexGrow: 1
+  })
+};
+const flexShrinkMap = {
+  '0': css({
+    flexShrink: 0
+  }),
+  '1': css({
+    flexShrink: 1
+  })
+};
+const alignSelfMap = {
+  center: css({
+    alignSelf: 'center'
+  }),
+  start: css({
+    alignSelf: 'start'
+  }),
+  stretch: css({
+    alignSelf: 'stretch'
+  }),
+  end: css({
+    alignSelf: 'end'
+  }),
+  baseline: css({
+    alignSelf: 'baseline'
+  })
+};
+const displayMap = {
+  block: css({
+    display: 'block'
+  }),
+  inline: css({
+    display: 'inline'
+  }),
+  flex: css({
+    display: 'flex'
+  }),
+  'inline-flex': css({
+    display: 'inline-flex'
+  }),
+  'inline-block': css({
+    display: 'inline-block'
+  })
+};
+const positionMap = {
+  absolute: css({
+    position: 'absolute'
+  }),
+  fixed: css({
+    position: 'fixed'
+  }),
+  relative: css({
+    position: 'relative'
+  }),
+  static: css({
+    position: 'static'
+  })
+};
+const overflowMap = {
+  auto: css({
+    overflow: 'auto'
+  }),
+  hidden: css({
+    overflow: 'hidden'
+  })
+};
+const overflowInlineMap = {
+  auto: css({
+    overflowInline: 'auto'
+  }),
+  hidden: css({
+    overflowInline: 'hidden'
+  })
+};
+const overflowBlockMap = {
+  auto: css({
+    overflowBlock: 'auto'
+  }),
+  hidden: css({
+    overflowBlock: 'hidden'
+  })
+};
+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::50178e05b73e6c8ed21bfbc8e6d87a13>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight"]
+ */
+const widthMap = {
+  '100%': css({
+    width: '100%'
+  }),
+  'size.100': css({
+    width: '16px'
+  }),
+  'size.200': css({
+    width: '24px'
+  }),
+  'size.300': css({
+    width: '32px'
+  }),
+  'size.400': css({
+    width: '40px'
+  }),
+  'size.500': css({
+    width: '48px'
+  }),
+  'size.600': css({
+    width: '96px'
+  }),
+  'size.1000': css({
+    width: '192px'
+  })
+};
+const heightMap = {
+  '100%': css({
+    height: '100%'
+  }),
+  'size.100': css({
+    height: '16px'
+  }),
+  'size.200': css({
+    height: '24px'
+  }),
+  'size.300': css({
+    height: '32px'
+  }),
+  'size.400': css({
+    height: '40px'
+  }),
+  'size.500': css({
+    height: '48px'
+  }),
+  'size.600': css({
+    height: '96px'
+  }),
+  'size.1000': css({
+    height: '192px'
+  })
+};
+const minWidthMap = {
+  '100%': css({
+    minWidth: '100%'
+  }),
+  'size.100': css({
+    minWidth: '16px'
+  }),
+  'size.200': css({
+    minWidth: '24px'
+  }),
+  'size.300': css({
+    minWidth: '32px'
+  }),
+  'size.400': css({
+    minWidth: '40px'
+  }),
+  'size.500': css({
+    minWidth: '48px'
+  }),
+  'size.600': css({
+    minWidth: '96px'
+  }),
+  'size.1000': css({
+    minWidth: '192px'
+  })
+};
+const maxWidthMap = {
+  '100%': css({
+    maxWidth: '100%'
+  }),
+  'size.100': css({
+    maxWidth: '16px'
+  }),
+  'size.200': css({
+    maxWidth: '24px'
+  }),
+  'size.300': css({
+    maxWidth: '32px'
+  }),
+  'size.400': css({
+    maxWidth: '40px'
+  }),
+  'size.500': css({
+    maxWidth: '48px'
+  }),
+  'size.600': css({
+    maxWidth: '96px'
+  }),
+  'size.1000': css({
+    maxWidth: '192px'
+  })
+};
+const minHeightMap = {
+  '100%': css({
+    minHeight: '100%'
+  }),
+  'size.100': css({
+    minHeight: '16px'
+  }),
+  'size.200': css({
+    minHeight: '24px'
+  }),
+  'size.300': css({
+    minHeight: '32px'
+  }),
+  'size.400': css({
+    minHeight: '40px'
+  }),
+  'size.500': css({
+    minHeight: '48px'
+  }),
+  'size.600': css({
+    minHeight: '96px'
+  }),
+  'size.1000': css({
+    minHeight: '192px'
+  })
+};
+const maxHeightMap = {
+  '100%': css({
+    maxHeight: '100%'
+  }),
+  'size.100': css({
+    maxHeight: '16px'
+  }),
+  'size.200': css({
+    maxHeight: '24px'
+  }),
+  'size.300': css({
+    maxHeight: '32px'
+  }),
+  'size.400': css({
+    maxHeight: '40px'
+  }),
+  'size.500': css({
+    maxHeight: '48px'
+  }),
+  'size.600': css({
+    maxHeight: '96px'
+  }),
+  'size.1000': css({
+    maxHeight: '192px'
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding"]
+ * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+const paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(property => [property, {
+  'space.0': css({
+    [property]: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    [property]: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    [property]: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    [property]: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    [property]: "var(--ds-space-100, 8px)"
+  }),
+  'space.150': css({
+    [property]: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    [property]: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    [property]: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    [property]: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    [property]: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    [property]: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    [property]: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    [property]: "var(--ds-space-800, 64px)"
+  }),
+  'space.1000': css({
+    [property]: "var(--ds-space-1000, 80px)"
+  })
+}]));
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1e77e4e502cd4d951550637bdce2f3ca>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+const borderColorMap = {
+  'color.border': css({
+    borderColor: "var(--ds-border, #091e4221)"
+  }),
+  'accent.red': css({
+    borderColor: "var(--ds-border-accent-red, #FF5630)"
+  }),
+  'accent.orange': css({
+    borderColor: "var(--ds-border-accent-orange, #D94008)"
+  }),
+  'accent.yellow': css({
+    borderColor: "var(--ds-border-accent-yellow, #FFAB00)"
+  }),
+  'accent.green': css({
+    borderColor: "var(--ds-border-accent-green, #36B37E)"
+  }),
+  'accent.teal': css({
+    borderColor: "var(--ds-border-accent-teal, #00B8D9)"
+  }),
+  'accent.blue': css({
+    borderColor: "var(--ds-border-accent-blue, #0065FF)"
+  }),
+  'accent.purple': css({
+    borderColor: "var(--ds-border-accent-purple, #6554C0)"
+  }),
+  'accent.magenta': css({
+    borderColor: "var(--ds-border-accent-magenta, #CD519D)"
+  }),
+  'accent.gray': css({
+    borderColor: "var(--ds-border-accent-gray, #5E6C84)"
+  }),
+  disabled: css({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
+  }),
+  focused: css({
+    borderColor: "var(--ds-border-focused, #4C9AFF)"
+  }),
+  input: css({
+    borderColor: "var(--ds-border-input, #FAFBFC)"
+  }),
+  inverse: css({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  }),
+  selected: css({
+    borderColor: "var(--ds-border-selected, #0052CC)"
+  }),
+  brand: css({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
+  danger: css({
+    borderColor: "var(--ds-border-danger, #FF5630)"
+  }),
+  warning: css({
+    borderColor: "var(--ds-border-warning, #FFC400)"
+  }),
+  success: css({
+    borderColor: "var(--ds-border-success, #00875A)"
+  }),
+  discovery: css({
+    borderColor: "var(--ds-border-discovery, #998DD9)"
+  }),
+  information: css({
+    borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: css({
+    borderColor: "var(--ds-border-bold, #344563)"
+  })
+};
+const backgroundColorMap = {
+  'accent.red.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-red-subtlest, #FF8F73)"
+  }),
+  'accent.red.subtler': css({
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FF7452)"
+  }),
+  'accent.red.subtle': css({
+    backgroundColor: "var(--ds-background-accent-red-subtle, #DE350B)"
+  }),
+  'accent.red.bolder': css({
+    backgroundColor: "var(--ds-background-accent-red-bolder, #DE350B)"
+  }),
+  'accent.orange.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-orange-subtlest, #F18D13)"
+  }),
+  'accent.orange.subtler': css({
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #B65C02)"
+  }),
+  'accent.orange.subtle': css({
+    backgroundColor: "var(--ds-background-accent-orange-subtle, #5F3811)"
+  }),
+  'accent.orange.bolder': css({
+    backgroundColor: "var(--ds-background-accent-orange-bolder, #43290F)"
+  }),
+  'accent.yellow.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFE380)"
+  }),
+  'accent.yellow.subtler': css({
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #FFC400)"
+  }),
+  'accent.yellow.subtle': css({
+    backgroundColor: "var(--ds-background-accent-yellow-subtle, #FF991F)"
+  }),
+  'accent.yellow.bolder': css({
+    backgroundColor: "var(--ds-background-accent-yellow-bolder, #FF991F)"
+  }),
+  'accent.green.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-green-subtlest, #79F2C0)"
+  }),
+  'accent.green.subtler': css({
+    backgroundColor: "var(--ds-background-accent-green-subtler, #57D9A3)"
+  }),
+  'accent.green.subtle': css({
+    backgroundColor: "var(--ds-background-accent-green-subtle, #00875A)"
+  }),
+  'accent.green.bolder': css({
+    backgroundColor: "var(--ds-background-accent-green-bolder, #00875A)"
+  }),
+  'accent.teal.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #79E2F2)"
+  }),
+  'accent.teal.subtler': css({
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #00C7E6)"
+  }),
+  'accent.teal.subtle': css({
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #00A3BF)"
+  }),
+  'accent.teal.bolder': css({
+    backgroundColor: "var(--ds-background-accent-teal-bolder, #00A3BF)"
+  }),
+  'accent.blue.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #4C9AFF)"
+  }),
+  'accent.blue.subtler': css({
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #2684FF)"
+  }),
+  'accent.blue.subtle': css({
+    backgroundColor: "var(--ds-background-accent-blue-subtle, #0052CC)"
+  }),
+  'accent.blue.bolder': css({
+    backgroundColor: "var(--ds-background-accent-blue-bolder, #0052CC)"
+  }),
+  'accent.purple.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-purple-subtlest, #998DD9)"
+  }),
+  'accent.purple.subtler': css({
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #8777D9)"
+  }),
+  'accent.purple.subtle': css({
+    backgroundColor: "var(--ds-background-accent-purple-subtle, #5243AA)"
+  }),
+  'accent.purple.bolder': css({
+    backgroundColor: "var(--ds-background-accent-purple-bolder, #5243AA)"
+  }),
+  'accent.magenta.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-magenta-subtlest, #E774BB)"
+  }),
+  'accent.magenta.subtler': css({
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #E774BB)"
+  }),
+  'accent.magenta.subtle': css({
+    backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+  }),
+  'accent.magenta.bolder': css({
+    backgroundColor: "var(--ds-background-accent-magenta-bolder, #E774BB)"
+  }),
+  'accent.gray.subtlest': css({
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #6B778C)"
+  }),
+  'accent.gray.subtler': css({
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #5E6C84)"
+  }),
+  'accent.gray.subtle': css({
+    backgroundColor: "var(--ds-background-accent-gray-subtle, #42526E)"
+  }),
+  'accent.gray.bolder': css({
+    backgroundColor: "var(--ds-background-accent-gray-bolder, #505F79)"
+  }),
+  disabled: css({
+    backgroundColor: "var(--ds-background-disabled, #091e4289)"
+  }),
+  input: css({
+    backgroundColor: "var(--ds-background-input, #FAFBFC)"
+  }),
+  'inverse.subtle': css({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
+  neutral: css({
+    backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
+  }),
+  'neutral.subtle': css({
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
+  }),
+  'neutral.bold': css({
+    backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
+  }),
+  selected: css({
+    backgroundColor: "var(--ds-background-selected, #DEEBFF)"
+  }),
+  'selected.bold': css({
+    backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
+  }),
+  'brand.bold': css({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
+  danger: css({
+    backgroundColor: "var(--ds-background-danger, #FFEBE6)"
+  }),
+  'danger.bold': css({
+    backgroundColor: "var(--ds-background-danger-bold, #DE350B)"
+  }),
+  warning: css({
+    backgroundColor: "var(--ds-background-warning, #FFFAE6)"
+  }),
+  'warning.bold': css({
+    backgroundColor: "var(--ds-background-warning-bold, #FFAB00)"
+  }),
+  success: css({
+    backgroundColor: "var(--ds-background-success, #E3FCEF)"
+  }),
+  'success.bold': css({
+    backgroundColor: "var(--ds-background-success-bold, #00875A)"
+  }),
+  discovery: css({
+    backgroundColor: "var(--ds-background-discovery, #EAE6FF)"
+  }),
+  'discovery.bold': css({
+    backgroundColor: "var(--ds-background-discovery-bold, #5243AA)"
+  }),
+  information: css({
+    backgroundColor: "var(--ds-background-information, #DEEBFF)"
+  }),
+  'information.bold': css({
+    backgroundColor: "var(--ds-background-information-bold, #0052CC)"
+  }),
+  'color.blanket': css({
+    backgroundColor: "var(--ds-blanket, #091e4289)"
+  }),
+  'color.blanket.selected': css({
+    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  }),
+  'color.blanket.danger': css({
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  }),
+  'elevation.surface': css({
+    backgroundColor: "var(--ds-surface, #FFFFFF)"
+  }),
+  'elevation.surface.overlay': css({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  }),
+  'elevation.surface.raised': css({
+    backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
+  }),
+  'elevation.surface.sunken': css({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  })
+};
+const shadowMap = {
+  overflow: css({
+    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  'overflow.perimeter': css({
+    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
+  }),
+  'overflow.spread': css({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
+  overlay: css({
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: css({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+  })
+};
+const textColorMap = {
+  'color.text': css({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'accent.red': css({
+    color: "var(--ds-text-accent-red, #DE350B)"
+  }),
+  'accent.red.bolder': css({
+    color: "var(--ds-text-accent-red-bolder, #BF2600)"
+  }),
+  'accent.orange': css({
+    color: "var(--ds-text-accent-orange, #F18D13)"
+  }),
+  'accent.orange.bolder': css({
+    color: "var(--ds-text-accent-orange-bolder, #B65C02)"
+  }),
+  'accent.yellow': css({
+    color: "var(--ds-text-accent-yellow, #FF991F)"
+  }),
+  'accent.yellow.bolder': css({
+    color: "var(--ds-text-accent-yellow-bolder, #FF8B00)"
+  }),
+  'accent.green': css({
+    color: "var(--ds-text-accent-green, #00875A)"
+  }),
+  'accent.green.bolder': css({
+    color: "var(--ds-text-accent-green-bolder, #006644)"
+  }),
+  'accent.teal': css({
+    color: "var(--ds-text-accent-teal, #00A3BF)"
+  }),
+  'accent.teal.bolder': css({
+    color: "var(--ds-text-accent-teal-bolder, #008DA6)"
+  }),
+  'accent.blue': css({
+    color: "var(--ds-text-accent-blue, #0052CC)"
+  }),
+  'accent.blue.bolder': css({
+    color: "var(--ds-text-accent-blue-bolder, #0747A6)"
+  }),
+  'accent.purple': css({
+    color: "var(--ds-text-accent-purple, #5243AA)"
+  }),
+  'accent.purple.bolder': css({
+    color: "var(--ds-text-accent-purple-bolder, #403294)"
+  }),
+  'accent.magenta': css({
+    color: "var(--ds-text-accent-magenta, #E774BB)"
+  }),
+  'accent.magenta.bolder': css({
+    color: "var(--ds-text-accent-magenta-bolder, #DA62AC)"
+  }),
+  'accent.gray': css({
+    color: "var(--ds-text-accent-gray, #505F79)"
+  }),
+  'accent.gray.bolder': css({
+    color: "var(--ds-text-accent-gray-bolder, #172B4D)"
+  }),
+  disabled: css({
+    color: "var(--ds-text-disabled, #A5ADBA)"
+  }),
+  inverse: css({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  selected: css({
+    color: "var(--ds-text-selected, #0052CC)"
+  }),
+  brand: css({
+    color: "var(--ds-text-brand, #0065FF)"
+  }),
+  danger: css({
+    color: "var(--ds-text-danger, #DE350B)"
+  }),
+  warning: css({
+    color: "var(--ds-text-warning, #974F0C)"
+  }),
+  'warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  success: css({
+    color: "var(--ds-text-success, #006644)"
+  }),
+  discovery: css({
+    color: "var(--ds-text-discovery, #403294)"
+  }),
+  information: css({
+    color: "var(--ds-text-information, #0052CC)"
+  }),
+  subtlest: css({
+    color: "var(--ds-text-subtlest, #7A869A)"
+  }),
+  subtle: css({
+    color: "var(--ds-text-subtle, #42526E)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::8006c040aa4392025298be138271ceae>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["layer"]
+ */
+const layerMap = {
+  card: css({
+    zIndex: LAYERS['card']
+  }),
+  navigation: css({
+    zIndex: LAYERS['navigation']
+  }),
+  dialog: css({
+    zIndex: LAYERS['dialog']
+  }),
+  layer: css({
+    zIndex: LAYERS['layer']
+  }),
+  blanket: css({
+    zIndex: LAYERS['blanket']
+  }),
+  modal: css({
+    zIndex: LAYERS['modal']
+  }),
+  flag: css({
+    zIndex: LAYERS['flag']
+  }),
+  spotlight: css({
+    zIndex: LAYERS['spotlight']
+  }),
+  tooltip: css({
+    zIndex: LAYERS['tooltip']
+  })
+};
+
+/**
+ * @codegenEnd
+ */