@pingux/astro 2.149.2-alpha.1 → 2.150.0-alpha.1

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -10,7 +10,7 @@ import { navBar } from './navbar';
 import skeleton from './skeleton';
 var listBox = {
   container: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     border: '1px solid',
     borderColor: 'transparent',
     borderRadius: '4px'
@@ -43,21 +43,41 @@ var tab = {
 };
 var modal = {
   content: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   },
   headingContainer: {
-    bg: 'background.base'
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  header: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  body: {
+    bg: 'backgroundBase'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
   },
   buttonsContainer: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   }
 };
 var rockerButton = {
   innerContainer: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   thumbSwitch: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     color: 'blue-400',
     '&.is-selected': {
       color: 'black',
@@ -75,7 +95,7 @@ var rockerButton = {
 };
 var attachment = {
   container: {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'backgroundSecondary',
     borderColor: 'border.attachment'
   }
 };

package/lib/styles/themes/astro/customProperties/index.js

@@ -15,6 +15,7 @@ var defaultLoaderSize = 16;
 var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
+var defaultIconSize = 'sm';
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -33,5 +34,6 @@ export var astroThemeValues = {
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 };

package/lib/styles/themes/next-gen/colors/colors.js

@@ -102,13 +102,12 @@ var overrides = {
   focus: colorsObject.active,
   disabled: nextGenColors['gray-100']
 };
-var background = {
-  base: 'white',
-  secondary: nextGenColors['gray-100'],
-  card: nextGenColors['blue-100'],
-  suggestion: '#ecf0f5',
-  hover: nextGenColors['gray-100']
-};
+var background = nextGenColors['blue-100'];
+var backgroundBase = 'white';
+var backgroundSecondary = nextGenColors['gray-100'];
+var backgroundCard = nextGenColors['blue-100'];
+var backgroundSuggestion = '#ecf0f5';
+var backgroundHover = nextGenColors['gray-100'];
 var card = {
   blue: nextGenColors['blue-100'],
   gray: nextGenColors['gray-100']
@@ -117,7 +116,7 @@ var badge = {
   textColor: nextGenColors.font.base,
   background: nextGenColors['gray-100']
 };
-var tooltip = nextGenColors['gray-900'];
+var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
   badge: badge,
   card: card,
@@ -130,6 +129,11 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   active: colorsObject.blue,
   primary: colorsObject.blue,
   background: background,
+  backgroundBase: backgroundBase,
+  backgroundSecondary: backgroundSecondary,
+  backgroundCard: backgroundCard,
+  backgroundSuggestion: backgroundSuggestion,
+  backgroundHover: backgroundHover,
   iconWrapper: iconWrapper,
   tooltip: tooltip,
   twoTone: twoTone

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -19,6 +19,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -32,5 +33,6 @@ export var nextGenThemeValues = _objectSpread({
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, customSizes);

package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -1,17 +1,17 @@
 export default {
-  xxs: '8px',
-  'icon-100': '.875rem',
-  xs: '15px',
-  'icon-200': '1.125rem',
-  sm: '20px',
-  'icon-300': '1.5rem',
-  md: '25px',
-  'icon-400': '2.25rem',
-  'icon-500': '3rem',
-  'icon-600': '3.75rem',
-  'icon-700': '4.5rem',
-  'icon-800': '5.25rem',
-  'icon-900': '6rem'
+  xxs: '10px',
+  'icon-100': '14px',
+  xs: '14px',
+  'icon-200': '18px',
+  sm: '18px',
+  'icon-300': '24px',
+  md: '24px',
+  'icon-400': '36px',
+  'icon-500': '48px',
+  'icon-600': '60px',
+  'icon-700': '72px',
+  'icon-800': '84px',
+  'icon-900': '96px'
 };
 export var iconWrapperSizes = {
   sm: 18,

package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -55,7 +55,7 @@ var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'ic
 var StickerSheetComponent = function StickerSheetComponent() {
   return ___EmotionJSX(Box, {
     sx: {
-      backgroundColor: 'background.base'
+      backgroundColor: 'backgroundBase'
     },
     height: "100%",
     p: "lg",

package/lib/styles/themes/next-gen/variants/button.js

@@ -319,44 +319,60 @@ var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
     }
   }
 });
-var baseIconButton = {
-  cursor: 'pointer',
+
+// Base styles for icon buttons
+var baseIconButtonStyle = {
+  p: '4px',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '1px solid',
-  borderColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  boxShadow: 'none !important'
+};
+var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
   },
   '&.is-pressed': {
-    backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
-  }
-};
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  '&.is-hovered': {
+    boxShadow: 'none !important',
+    backgroundColor: 'blue-600'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'blue-600'
+  },
+  '&.is-disabled': {
+    backgroundColor: 'gray-300'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
   top: 32,
   right: 18
 });
-var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   path: {
     fill: 'blue'
   },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   '&.is-hovered': {
     backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
     path: {
@@ -365,47 +381,32 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   },
   '&.is-pressed': {
     backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
     path: {
       fill: 'white'
     }
   },
-  maxHeight: '48.5px',
-  maxWidth: '48.5px',
-  width: '48.5px',
-  p: 'sm',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center'
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     backgroundColor: 'gray-100',
     path: {
       fill: 'dark'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
-  height: 14,
   p: 0,
+  height: 14,
   width: 14,
-  border: 'none',
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-    backgroundColor: 'gray-100'
-  }),
+  '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
     backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
     path: {
       fill: 'dark'
     }
@@ -414,19 +415,17 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent'
   }
 }, transitions);
-var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  path: {
+    fill: 'dark'
+  },
   width: '20px',
   height: '20px',
-  border: 'none',
   position: 'absolute',
   right: '20px',
-  '& > svg': {
-    minWidth: tShirtSizes.xs,
-    width: tShirtSizes.xs,
-    height: tShirtSizes.xs
-  },
   '&.is-hovered': {
-    bg: 'background.hover'
+    bg: 'background.hover',
+    boxShadow: 'none !important'
   },
   '&.is-pressed': {
     bg: 'background.hover'
@@ -434,7 +433,6 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
@@ -455,7 +453,6 @@ var iconButtons = {
       }),
       '&.is-pressed': {
         backgroundColor: 'gray-100',
-        borderColor: 'gray-200',
         path: {
           fill: 'dark'
         }
@@ -467,83 +464,30 @@ var iconButtons = {
     width: '28px',
     height: '28px',
     '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px',
+      minWidth: tShirtSizes.sm,
+      width: tShirtSizes.sm,
+      height: tShirtSizes.sm,
       path: {
         fill: '#455469 !important'
       }
     }
   }),
-  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    borderRadius: '4px',
-    path: {
-      fill: 'text.primary'
-    },
-    px: 'md',
-    py: 'sm',
-    width: '56px',
-    height: '40px',
-    '&.is-hovered': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-pressed': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-      outlineOffset: '1px'
-    })
-  }),
+  headerNav: _objectSpread({}, baseIconButton),
   copyButton: copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     backgroundColor: 'light',
-    border: '1px solid',
-    borderColor: 'gray-300',
     size: '24px',
-    p: '4px',
     '&.is-hovered': {
       backgroundColor: '#dde5ec'
     }
   }),
-  inverted: {
-    cursor: 'pointer',
-    transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
-    outline: 'none',
-    path: {
-      fill: 'white'
-    },
-    '&.is-focused': {
-      outline: '2px solid',
-      outlineColor: 'primary',
-      outlineOffset: '3px'
-    },
-    '&.is-pressed': {
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
-    },
-    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
-      border: 'none !important',
-      borderColor: 'none !important',
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
-    }),
-    '&.is-disabled': {
-      backgroundColor: 'gray-300'
-    }
-  },
+  inverted: _objectSpread({}, invertedIconButton),
   searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    bg: 'transparent',
-    border: '2px solid',
-    borderColor: 'transparent',
     width: '32px',
     height: '32px',
     '&.is-hovered': {
-      border: '2px solid',
-      borderColor: 'transparent',
+      boxShadow: 'none !important',
       backgroundColor: 'gray-100',
       path: {
         fill: 'dark'
@@ -551,7 +495,6 @@ var iconButtons = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-100',
-      borderColor: 'gray-200',
       path: {
         fill: 'dark'
       }

package/lib/styles/themes/next-gen/variants/callout.js

@@ -1,7 +1,7 @@
 import tShirtSizes from '../customProperties/tShirtSizes';
 var base = {
   width: '100%',
-  backgroundColor: 'background.secondary',
+  backgroundColor: 'light',
   lineHeight: 'md',
   p: 'md',
   border: 'none',

package/lib/styles/themes/next-gen/variants/cards.js

@@ -17,7 +17,7 @@ var interactive = {
   borderColor: 'border.base',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     outline: '2px solid',
     outlineColor: 'focus',
     outlineOffset: '0px'

package/lib/styles/themes/next-gen/variants/dataTable.js

@@ -25,7 +25,7 @@ var tableRow = {
   }
 };
 var selectableTableRow = _objectSpread(_objectSpread({}, tableRow), {}, {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   '&.is-hovered': {
     bg: 'gray-100'
   },

package/lib/styles/themes/next-gen/variants/input.js

@@ -24,7 +24,7 @@ export var input = {
   fontSize: 'md',
   fontFamily: 'standard',
   p: '0.75rem',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
@@ -167,7 +167,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
     border: '1px solid',
     borderColor: 'gray-900',
     '> input': {
-      backgroundColor: 'background.secondary'
+      backgroundColor: 'backgroundSecondary'
     },
     '&:after': {
       display: 'none'

package/lib/styles/themes/next-gen/variants/listview.js

@@ -48,7 +48,7 @@ export var listViewItem = {
   },
   expandableStyledListItem: {
     px: 'lg',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
       borderTopRightRadius: borderRadius

package/lib/styles/themes/next-gen/variants/navbar.js

@@ -23,7 +23,7 @@ export var navBar = {
     fontFamily: 'standard',
     width: '252px',
     p: 'sm',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
   sectionContainer: {

package/lib/styles/themes/next-gen/variants/navigationHeader.js

@@ -57,7 +57,7 @@ var navigationHeader = {
     fontFamily: 'standard',
     borderBottom: '1px solid',
     borderColor: 'border.base',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     height: '4.5rem',
     justifyContent: 'center'
   },
@@ -66,10 +66,10 @@ var navigationHeader = {
     maxWidth: '1540px',
     mx: 'auto',
     width: '100%',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   dropdownMenu: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     maxWidth: 'unset',
     p: 'sm',
     '&:focus': _objectSpread({}, defaultFocus),

package/lib/styles/themes/next-gen/variants/panelHeader.js

@@ -1,5 +1,5 @@
 var container = {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   border: 'none',
   minHeight: 72,
   maxHeight: 72

package/lib/styles/themes/next-gen/variants/stepper.js

@@ -35,7 +35,7 @@ var step = {
   active: _objectSpread(_objectSpread({
     backgroundColor: 'active',
     borderColor: 'active',
-    color: 'background.base'
+    color: 'backgroundBase'
   }, stepBase), {}, {
     '&:before': {
       content: '""',
@@ -46,7 +46,7 @@ var step = {
       position: 'absolute',
       borderRadius: '100%',
       borderStyle: 'solid',
-      borderColor: 'background.base',
+      borderColor: 'backgroundBase',
       borderWidth: '2px'
     }
   }),
@@ -54,7 +54,7 @@ var step = {
     borderColor: 'active'
   }),
   inactive: _objectSpread({
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     borderColor: 'blue-200',
     color: 'active'
   }, stepBase)

package/lib/styles/themes/next-gen/variants/table.js

@@ -29,7 +29,7 @@ var head = {
 var body = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: '16px',
   borderBottomRightRadius: '16px',
   '&& > tr:not(:last-child)': {
@@ -37,7 +37,7 @@ var body = {
     borderBottomColor: 'border.base'
   },
   '&& > tr:nth-of-type(odd) ': {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   '&& > tr:last-child': {
     borderBottomLeftRadius: '16px',

package/lib/styles/themes/next-gen/variants/tableBase.js

@@ -46,7 +46,7 @@ var container = {
   }
 };
 var caption = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   px: 'lg',
   color: 'text.primary',
   borderBottom: '1px solid',
@@ -62,7 +62,7 @@ var row = {
     bg: 'background.hover'
   },
   '&:nth-of-type(odd)': {
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-hovered': {
       bg: 'background.hover'
     }
@@ -70,7 +70,7 @@ var row = {
 };
 var thead = {
   borderBottomColor: 'border.base',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   '&.is-sticky': {
     boxShadow: "0 1px 0 ".concat(colors.border.base)
   }
@@ -87,7 +87,7 @@ var head = {
 var tbody = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
   borderBottomRightRadius: borderRadius
 };