baseui 12.2.0 → 13.0.0

package/es/table-semantic/table-builder.js

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortIconContainer } from './styled-components';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeConfigurationOverrides } from '../helpers/overrides';
 import Blank from '../icon/blank';
 import ChevronDown from '../icon/chevron-down';
 import ChevronUp from '../icon/chevron-up';
@@ -72,7 +72,7 @@ export default class TableBuilder extends React.Component {
     const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
     const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
     const columns = React.Children.toArray(children).filter(Boolean) // @ts-expect-error todo(flow->ts): limit children to be only react elements
-    .map(child => child.props);
+    .map(child => child.props); // @ts-ignore
 
     function renderHeader(col, colIndex, isFocusVisible) {
       const colOverrides = col.overrides || {};
@@ -90,37 +90,32 @@ export default class TableBuilder extends React.Component {
       }
 
       const [ColTableHeadCellSortable, colTableHeadCellSortableProps] = getOverrides(colOverrides.TableHeadCellSortable, TableHeadCellSortable);
-      let sortIcon = null;
-      let sortLabel = 'not sorted';
+      let SortIcon, sortIconProps, sortLabel;
 
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
-          sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortAscIconProps));
+          SortIcon = SortAscIcon;
+          sortIconProps = sortAscIconProps;
           sortLabel = 'ascending sorting';
           break;
 
         case 'DESC':
-          sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortDescIconProps));
+          SortIcon = SortDescIcon;
+          sortIconProps = sortDescIconProps;
           sortLabel = 'descending sorting';
           break;
 
         default:
-          sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
-            size: "16px",
-            "aria-hidden": true,
-            role: "presentation"
-          }, sortNoneIconProps));
+          SortIcon = SortNoneIcon;
+          sortIconProps = sortNoneIconProps;
+          sortLabel = 'not sorted';
           break;
-      }
+      } // add background-color: inherit on container for non-Blank icons
+
 
+      const sortIconContainerStyle = SortIcon === Blank ? sortIconContainerProps.$style : mergeConfigurationOverrides({
+        backgroundColor: 'inherit'
+      }, sortIconContainerProps.$style);
       return /*#__PURE__*/React.createElement(ColTableHeadCellSortable, _extends({
         key: colIndex,
         $col: col,
@@ -138,8 +133,15 @@ export default class TableBuilder extends React.Component {
             onSort && onSort(col.id);
           }
         }
-      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
-    }
+      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, _extends({}, sortIconContainerProps, {
+        $style: sortIconContainerStyle
+      }), /*#__PURE__*/React.createElement(SortIcon, _extends({
+        size: "16px",
+        "aria-hidden": "true",
+        role: "presentation"
+      }, sortIconProps))));
+    } // @ts-ignore
+
 
     function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
       const colOverrides = col.overrides || {};
@@ -183,6 +185,7 @@ export default class TableBuilder extends React.Component {
 }
 
 _defineProperty(TableBuilder, "defaultProps", {
+  // @ts-ignore
   data: [],
   loadingMessage: 'Loading...'
 });

package/es/table-semantic/table.js

@@ -72,7 +72,9 @@ export default class Table extends React.Component {
 }
 
 _defineProperty(Table, "defaultProps", {
+  // @ts-ignore
   columns: [],
+  // @ts-ignore
   data: [[]],
   loadingMessage: 'Loading...'
 });

package/es/tabs/stateful-tabs.js

@@ -43,8 +43,8 @@ export default class StatefulTabs extends React.Component {
     if (initialState && initialState.activeKey) {
       return initialState.activeKey;
     } else {
-      return React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
-      (child, index) => child.key || String(index))[0];
+      // @ts-ignore
+      return React.Children.map(children, (child, index) => child.key || String(index))[0];
     }
   }
 

package/es/tabs-motion/stateful-tabs.js

@@ -14,6 +14,7 @@ const getInitialState = (children, initialState) => {
   if (initialState && initialState.activeKey) {
     return initialState;
   } else {
+    // @ts-ignore
     const firstKey = React.Children.map(children, // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
     (child, index) => child.key || String(index))[0];
     return {

package/es/tabs-motion/tab.js

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 export function Tab(props) {
   return null;
 }

package/es/tabs-motion/tabs.js

@@ -20,7 +20,7 @@ import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './util
 const KEYBOARD_ACTION = {
   next: 'next',
   previous: 'previous'
-};
+}; // @ts-ignore
 
 const getLayoutParams = (el, orientation) => {
   if (!el) {
@@ -46,7 +46,8 @@ const getLayoutParams = (el, orientation) => {
       distance: el.offsetLeft
     };
   }
-};
+}; // @ts-ignore
+
 
 const scrollParentToCentreTarget = targetNode => {
   const {
@@ -77,7 +78,8 @@ const scrollParentToCentreTarget = targetNode => {
   }; // ignore out of bounds, the browser will manage this for us
 
   targetNode.parentNode.scroll(target.x, target.y);
-};
+}; // @ts-ignore
+
 
 function RenderEnhancer({
   Enhancer
@@ -103,6 +105,7 @@ export function Tabs({
   orientation = ORIENTATION.horizontal,
   overrides = {},
   renderAll = false,
+  // @ts-ignore
   uid: customUid = null,
   endEnhancer
 }) {
@@ -120,7 +123,8 @@ export function Tabs({
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
   const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
-  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer); // Count key updates
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer);
+  const [TabBar, tabBarProps] = getOverrides(overrides.TabBar, StyledTabBar); // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -213,10 +217,10 @@ export function Tabs({
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabBar, _extends({
     $hasEndEnhancer: Boolean(endEnhancer),
     $orientation: orientation
-  }, /*#__PURE__*/React.createElement(TabList, _extends({
+  }, tabBarProps), /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -266,17 +270,29 @@ export function Tabs({
 }
 
 function InternalTab({
+  // @ts-ignore
   childKey,
+  // @ts-ignore
   childIndex,
+  // @ts-ignore
   activeKey,
+  // @ts-ignore
   orientation,
+  // @ts-ignore
   activeTabRef,
+  // @ts-ignore
   updateHighlight,
+  // @ts-ignore
   parseKeyDown,
+  // @ts-ignore
   activateOnFocus,
+  // @ts-ignore
   uid,
+  // @ts-ignore
   disabled,
+  // @ts-ignore
   sharedStylingProps,
+  // @ts-ignore
   onChange,
   ...props
 }) {
@@ -406,6 +422,7 @@ function InternalTab({
     $focusVisible: focusVisible,
     $isActive: isActive
   }, sharedStylingProps, restProps, TabProps, {
+    // @ts-ignore
     onClick: event => {
       if (typeof onChange === 'function') onChange({
         activeKey: key
@@ -427,11 +444,17 @@ function InternalTab({
 }
 
 function InternalTabPanel({
+  // @ts-ignore
   childKey,
+  // @ts-ignore
   childIndex,
+  // @ts-ignore
   activeKey,
+  // @ts-ignore
   uid,
+  // @ts-ignore
   sharedStylingProps,
+  // @ts-ignore
   renderAll,
   ...props
 }) {

package/es/tag/styled-components.js

@@ -15,30 +15,38 @@ export function customOnRamp(color, unit) {
       return 'white';
 
     case '50':
+      // @ts-ignore
       return tint(0.8, color);
 
     case '100':
+      // @ts-ignore
       return tint(0.6, color);
 
     case '200':
+      // @ts-ignore
       return tint(0.4, color);
 
     case '300':
+      // @ts-ignore
       return tint(0.2, color);
 
     case '400':
       return color;
 
     case '500':
+      // @ts-ignore
       return shade(0.2, color);
 
     case '600':
+      // @ts-ignore
       return shade(0.4, color);
 
     case '700':
+      // @ts-ignore
       return shade(0.6, color);
 
     case '800':
+      // @ts-ignore
       return shade(0.8, color);
 
     case '1000':
@@ -53,202 +61,263 @@ const COLOR_STATE = {
   solid: 'solid',
   outline: 'outline'
 }; // Probably best to bake this into the theme once we hit our next major.
+// @ts-ignore
 
 const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
 
 const neutralColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNeutralFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNeutralOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedBackground
   })
 };
 const primaryColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPrimaryFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPrimaryOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedBackground
   })
 };
 const accentColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagAccentFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagAccentOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedBackground
   })
 };
 const positiveColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPositiveFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPositiveOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedBackground
   })
 };
 const warningColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagWarningFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagWarningOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedBackground
   })
 };
 const negativeColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNegativeFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNegativeOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedBackground
   })
 };
 const orangeColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.orange200, colorTokens.orange600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.orange400, colorTokens.orange500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.orange400, colorTokens.orange300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange500)
   })
 };
 const purpleColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.purple200, colorTokens.purple600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.purple400, colorTokens.purple500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.purple400, colorTokens.purple300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple500)
   })
 };
 const brownColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.brown200, colorTokens.brown600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.brown400, colorTokens.brown500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.brown400, colorTokens.brown300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown500)
   })
 };
 const customColorStates = {
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   }),
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
     backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
+    // @ts-ignore
     borderColor: null
   }),
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
   })
@@ -269,7 +338,7 @@ const colorMap = {
   [KIND.purple]: purpleColorStates,
   [KIND.brown]: brownColorStates,
   [KIND.custom]: customColorStates
-};
+}; // @ts-ignore
 
 const getColorStateFromProps = props => {
   if (props.$disabled) return COLOR_STATE.disabled;
@@ -358,7 +427,8 @@ export const Root = styled('span', props => {
     [SIZE.medium]: $theme.sizing.scale500,
     [SIZE.large]: $theme.sizing.scale600
   }[$size];
-  const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
+  const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px'; // @ts-ignore
+
   const {
     color,
     backgroundColor,

package/es/tag/tag.js

@@ -16,6 +16,7 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
 // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
 // Delete requires modifying Delete's viewbox to prevent visual regressions.
+// @ts-ignore
 const ModifiedViewBoxDeleteIcon = props => /*#__PURE__*/React.createElement(DeleteIcon, _extends({
   viewBox: "5 5 13.186 13.186"
 }, props));
@@ -88,6 +89,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     onKeyDown: handleKeyDown
   };
   const actionHandlers = disabled ? {} : {
+    // @ts-ignore
     onClick: event => {
       // we don't want onClick to be called when the close icon is clicked
       event.stopPropagation();

package/es/textarea/stateful-textarea.js

@@ -8,5 +8,9 @@ import * as React from 'react';
 import StatefulContainer from './stateful-container';
 import Textarea from './textarea';
 export default function StatefulTextarea(props) {
-  return /*#__PURE__*/React.createElement(StatefulContainer, props, childrenProps => /*#__PURE__*/React.createElement(Textarea, childrenProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(StatefulContainer, props, childrenProps => /*#__PURE__*/React.createElement(Textarea, childrenProps))
+  );
 }

package/es/textarea/textarea.js

@@ -24,14 +24,16 @@ class Textarea extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
   }

package/es/themes/dark-theme/color-component-tokens.js

@@ -61,7 +61,7 @@ export default ((themePrimitives = colorTokens) => ({
   calendarBackground: themePrimitives.mono800,
   calendarForeground: themePrimitives.white,
   calendarForegroundDisabled: themePrimitives.mono300,
-  calendarHeaderBackground: themePrimitives.primary700,
+  calendarHeaderBackground: themePrimitives.mono800,
   calendarHeaderForeground: themePrimitives.primary,
   calendarHeaderBackgroundActive: themePrimitives.primary600,
   calendarHeaderForegroundDisabled: themePrimitives.primary500,

package/es/themes/dark-theme/color-semantic-tokens.js

@@ -25,26 +25,31 @@ foundation = colorTokens) => {
     contentInverseTertiary: colors.gray600,
     // Border
     borderOpaque: colors.gray700,
+    // @ts-ignore
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
     borderSelected: foundation.primaryA,
     borderInverseOpaque: colors.gray400,
+    // @ts-ignore
     borderInverseTransparent: hexToRgba(foundation.primaryB, '0.2'),
     borderInverseSelected: foundation.primaryB
   };
   const coreExtensions = {
     // Backgrounds
     backgroundStateDisabled: colors.gray800,
+    // @ts-ignore
     backgroundOverlayDark: hexToRgba(colors.black, '0.3'),
+    // @ts-ignore
     backgroundOverlayLight: hexToRgba(colors.black, '0.08'),
+    // @ts-ignore
     backgroundOverlayArt: hexToRgba(colors.black, '0.16'),
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: colors.green500,
-    backgroundLightAccent: colors.blue700,
-    backgroundLightPositive: colors.green700,
-    backgroundLightNegative: colors.red700,
-    backgroundLightWarning: colors.yellow700,
+    backgroundAccentLight: colors.blue700,
+    backgroundPositiveLight: colors.green700,
+    backgroundNegativeLight: colors.red700,
+    backgroundWarningLight: colors.yellow700,
     backgroundAlwaysDark: colors.gray900,
     backgroundAlwaysLight: colors.gray100,
     // Content
@@ -62,6 +67,9 @@ foundation = colorTokens) => {
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
     borderPositive: colors.green500,
+    borderNegativeLight: colors.red200,
+    borderWarningLight: colors.yellow200,
+    borderPositiveLight: colors.green200,
     // Programs
     safety: colors.blue400,
     eatsGreen400: colors.green400,