@atlaskit/ds-explorations 0.1.4 → 1.0.0

package/dist/esm/components/box.partial.js

@@ -1,17 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "width", "UNSAFE_style", "testId"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SPACING_SCALE } from '../constants';
 import { SurfaceContext } from './surface-provider';
 
 /**
@@ -22,18 +15,17 @@ import { SurfaceContext } from './surface-provider';
  *
  * @internal
  */
-var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'div' : _ref$as,
+      as = _ref.as,
       className = _ref.className,
       _ref$display = _ref.display,
       display = _ref$display === void 0 ? 'flex' : _ref$display,
       flexDirection = _ref.flexDirection,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
-      backgroundColorTuple = _ref.backgroundColor,
-      borderColorTuple = _ref.borderColor,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
       borderStyle = _ref.borderStyle,
       borderWidth = _ref.borderWidth,
       borderRadius = _ref.borderRadius,
@@ -43,33 +35,20 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'relative' : _ref$position,
       height = _ref.height,
+      overflow = _ref.overflow,
       width = _ref.width,
       UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId,
       htmlAttributes = _objectWithoutProperties(_ref, _excluded);
 
-  var _ref2 = backgroundColorTuple || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      backgroundColor = _ref3[0],
-      backgroundColorFallback = _ref3[1];
-
-  var _ref4 = borderColorTuple || [],
-      _ref5 = _slicedToArray(_ref4, 2),
-      borderColor = _ref5[0],
-      borderColorFallback = _ref5[1];
-
+  var Component = as || 'div';
   var node = jsx(Component, _extends({
-    style: _objectSpread(_objectSpread(_objectSpread({}, UNSAFE_style), backgroundColorFallback && {
-      '--ds-bg-fb': backgroundColorFallback
-    }), borderColorFallback && {
-      '--ds-bo-fb': borderColorFallback
-    }) // @ts-ignore
-    ,
+    style: UNSAFE_style,
     ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, htmlAttributes, {
     className: className,
-    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
+    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
     "data-testid": testId
   }), children);
   return backgroundColor ? jsx(SurfaceContext.Provider, {
@@ -165,11 +144,6 @@ var displayMap = {
     display: 'inline-flex'
   })
 };
-var baseStyles = css({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none'
-});
 var positionMap = {
   absolute: css({
     position: 'absolute'
@@ -181,335 +155,347 @@ var positionMap = {
     position: 'static'
   })
 };
+var overflowMap = {
+  auto: css({
+    overflow: 'auto'
+  })
+};
+var 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::620ef1f3b2d7a6f92e5052efb270b5eb>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 var paddingMap = {
-  'sp-0': css({
-    padding: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    padding: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    padding: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    padding: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    padding: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    padding: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    padding: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    padding: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    padding: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    padding: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    padding: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    padding: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    padding: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    padding: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    padding: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    padding: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    padding: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    padding: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    padding: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    padding: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    padding: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    padding: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    padding: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    padding: "var(--ds-scale-600, 48px)"
   })
 };
 var paddingBlockMap = {
-  'sp-0': css({
-    paddingBlock: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    paddingBlock: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    paddingBlock: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    paddingBlock: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    paddingBlock: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    paddingBlock: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    paddingBlock: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    paddingBlock: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    paddingBlock: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    paddingBlock: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    paddingBlock: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    paddingBlock: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    paddingBlock: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    paddingBlock: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    paddingBlock: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    paddingBlock: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    paddingBlock: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    paddingBlock: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    paddingBlock: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    paddingBlock: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    paddingBlock: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    paddingBlock: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    paddingBlock: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    paddingBlock: "var(--ds-scale-600, 48px)"
   })
 };
 var paddingInlineMap = {
-  'sp-0': css({
-    paddingInline: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    paddingInline: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    paddingInline: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    paddingInline: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    paddingInline: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    paddingInline: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    paddingInline: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    paddingInline: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    paddingInline: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    paddingInline: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    paddingInline: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    paddingInline: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    paddingInline: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    paddingInline: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    paddingInline: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    paddingInline: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    paddingInline: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    paddingInline: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    paddingInline: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    paddingInline: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    paddingInline: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    paddingInline: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    paddingInline: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    paddingInline: "var(--ds-scale-600, 48px)"
   })
 };
 var widthMap = {
-  'sp-0': css({
-    width: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    width: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    width: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    width: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    width: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    width: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    width: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    width: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    width: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    width: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    width: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    width: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    width: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    width: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    width: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    width: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    width: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    width: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    width: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    width: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    width: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    width: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    width: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    width: "var(--ds-scale-600, 48px)"
   })
 };
 var heightMap = {
-  'sp-0': css({
-    height: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    height: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    height: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    height: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    height: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    height: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    height: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    height: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    height: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    height: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    height: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    height: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    height: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    height: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    height: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    height: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    height: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    height: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    height: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    height: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    height: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    height: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    height: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    height: "var(--ds-scale-600, 48px)"
   })
 };
+
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
+ * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
-
 var borderColorMap = {
   'color.border': css({
-    borderColor: "var(--ds-border, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border, #091e4221)"
   }),
   bold: css({
-    borderColor: "var(--ds-border-bold, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-bold, #344563)"
   }),
   inverse: css({
-    borderColor: "var(--ds-border-inverse, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   focused: css({
-    borderColor: "var(--ds-border-focused, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-focused, #4C9AFF)"
   }),
   input: css({
-    borderColor: "var(--ds-border-input, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
   disabled: css({
-    borderColor: "var(--ds-border-disabled, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   brand: css({
-    borderColor: "var(--ds-border-brand, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-brand, #0052CC)"
   }),
   selected: css({
-    borderColor: "var(--ds-border-selected, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-selected, #0052CC)"
   }),
   danger: css({
-    borderColor: "var(--ds-border-danger, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-danger, #FF5630)"
   }),
   warning: css({
-    borderColor: "var(--ds-border-warning, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-warning, #FFC400)"
   }),
   success: css({
-    borderColor: "var(--ds-border-success, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-success, #00875A)"
   }),
   discovery: css({
-    borderColor: "var(--ds-border-discovery, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-discovery, #998DD9)"
   }),
   information: css({
-    borderColor: "var(--ds-border-information, var(--ds-bo-fb))"
+    borderColor: "var(--ds-border-information, #0065FF)"
   })
 };
 var backgroundColorMap = {
   disabled: css({
-    backgroundColor: "var(--ds-background-disabled, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
   'inverse.subtle': css({
-    backgroundColor: "var(--ds-background-inverse-subtle, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
   }),
   input: css({
-    backgroundColor: "var(--ds-background-input, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
   neutral: css({
-    backgroundColor: "var(--ds-background-neutral, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
   'neutral.subtle': css({
-    backgroundColor: "var(--ds-background-neutral-subtle, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
   }),
   'neutral.bold': css({
-    backgroundColor: "var(--ds-background-neutral-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
   'brand.bold': css({
-    backgroundColor: "var(--ds-background-brand-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
   }),
   selected: css({
-    backgroundColor: "var(--ds-background-selected, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': css({
-    backgroundColor: "var(--ds-background-selected-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
   danger: css({
-    backgroundColor: "var(--ds-background-danger, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
   'danger.bold': css({
-    backgroundColor: "var(--ds-background-danger-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-danger-bold, #DE350B)"
   }),
   warning: css({
-    backgroundColor: "var(--ds-background-warning, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-warning, #FFFAE6)"
   }),
   'warning.bold': css({
-    backgroundColor: "var(--ds-background-warning-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-warning-bold, #FFAB00)"
   }),
   success: css({
-    backgroundColor: "var(--ds-background-success, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-success, #E3FCEF)"
   }),
   'success.bold': css({
-    backgroundColor: "var(--ds-background-success-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-success-bold, #00875A)"
   }),
   discovery: css({
-    backgroundColor: "var(--ds-background-discovery, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-discovery, #EAE6FF)"
   }),
   'discovery.bold': css({
-    backgroundColor: "var(--ds-background-discovery-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-discovery-bold, #5243AA)"
   }),
   information: css({
-    backgroundColor: "var(--ds-background-information, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-information, #DEEBFF)"
   }),
   'information.bold': css({
-    backgroundColor: "var(--ds-background-information-bold, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-background-information-bold, #0052CC)"
   }),
   'color.blanket': css({
-    backgroundColor: "var(--ds-blanket, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-blanket, #091e4289)"
   }),
   'color.blanket.selected': css({
-    backgroundColor: "var(--ds-blanket-selected, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
   }),
   'color.blanket.danger': css({
-    backgroundColor: "var(--ds-blanket-danger, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   }),
   'elevation.surface': css({
-    backgroundColor: "var(--ds-surface, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
   'elevation.surface.sunken': css({
-    backgroundColor: "var(--ds-surface-sunken, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   }),
   'elevation.surface.raised': css({
-    backgroundColor: "var(--ds-surface-raised, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
   'elevation.surface.overlay': css({
-    backgroundColor: "var(--ds-surface-overlay, var(--ds-bg-fb))"
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   })
 };
 /**