baseui 0.0.0-next-17879f0 → 0.0.0-next-e57c3c1

package/a11y/a11y.js

@@ -71,7 +71,7 @@ var ViolationContainer = (0, _styles.styled)('div', function (_ref) {
       $top = _ref.$top,
       $left = _ref.$left;
   return {
-    backgroundColor: $theme.colors.mono100,
+    backgroundColor: $theme.colors.backgroundPrimary,
     boxShadow: $theme.lighting.shadow600,
     position: 'absolute',
     padding: $theme.sizing.scale400,
@@ -121,7 +121,7 @@ function Violation(props) {
     if (node) {
       // @ts-ignore
       setAnchor(node);
-      node.setAttribute('style', "border: solid 1px ".concat(theme.colors.negative300, ";"));
+      node.setAttribute('style', "border: solid 1px ".concat(theme.colors.borderNegative, ";"));
       node.addEventListener('mouseenter', handleMouseEnter);
       node.addEventListener('mouseleave', handleMouseLeave);
     }

package/a11y/a11y.js.flow

@@ -44,7 +44,7 @@ const ViolationContainer = styled<{ $top: string, $left: string }>(
   'div',
   ({ $theme, $top, $left }) => {
     return {
-      backgroundColor: $theme.colors.mono100,
+      backgroundColor: $theme.colors.backgroundPrimary,
       boxShadow: $theme.lighting.shadow600,
       position: 'absolute',
       padding: $theme.sizing.scale400,
@@ -69,7 +69,7 @@ function Violation(props: ViolationPropsT) {
     if (node) {
       setAnchor(node);
 
-      node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
+      node.setAttribute('style', `border: solid 1px ${theme.colors.borderNegative};`);
 
       node.addEventListener('mouseenter', handleMouseEnter);
       node.addEventListener('mouseleave', handleMouseLeave);

package/accordion/styled-components.js

@@ -37,7 +37,7 @@ var PanelContainer = (0, _styles.styled)('li', function (props) {
     width: '100%',
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: $expanded ? colors.mono500 : colors.mono400
+    borderBottomColor: colors.borderOpaque
   };
 });
 exports.PanelContainer = PanelContainer;
@@ -64,11 +64,11 @@ var Header = (0, _styles.styled)('div', function (props) {
     marginRight: 0,
     display: 'flex',
     alignItems: 'center',
-    outline: $isFocusVisible ? "3px solid ".concat(colors.accent) : 'none',
+    outline: $isFocusVisible ? "3px solid ".concat(colors.borderAccent) : 'none',
     outlineOffset: '-3px',
     justifyContent: 'space-between',
     ':hover': {
-      color: colors.primary
+      color: colors.contentPrimary
     }
   });
 });

package/accordion/styled-components.js.flow

@@ -31,7 +31,7 @@ export const PanelContainer = styled<SharedStylePropsArgT>('li', (props) => {
     width: '100%',
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: $expanded ? colors.mono500 : colors.mono400,
+    borderBottomColor: $expanded ? colors.borderOpaque : colors.borderOpaque,
   };
 });
 
@@ -56,11 +56,11 @@ export const Header = styled<SharedStylePropsArgT>('div', (props) => {
     marginRight: 0,
     display: 'flex',
     alignItems: 'center',
-    outline: $isFocusVisible ? `3px solid ${colors.accent}` : 'none',
+    outline: $isFocusVisible ? `3px solid ${colors.borderAccent}` : 'none',
     outlineOffset: '-3px',
     justifyContent: 'space-between',
     ':hover': {
-      color: colors.primary,
+      color: colors.contentPrimary,
     },
   };
 });

package/app-nav-bar/styled-components.js

@@ -43,7 +43,7 @@ var StyledButton = (0, _styles.styled)('button', function (_ref) {
     marginTop: 0,
     marginRight: 0,
     marginBottom: 0,
-    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
+    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.borderAccent) : 'none',
     outlineOffset: '-3px',
     WebkitAppearance: 'none',
     cursor: 'pointer'
@@ -88,7 +88,7 @@ StyledSpacing.displayName = 'StyledSpacing';
 var StyledAppName = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font550), {}, _defineProperty({
-    color: $theme.colors.primary,
+    color: $theme.colors.contentPrimary,
     textDecoration: 'none'
   }, $theme.mediaQuery.medium, _objectSpread({}, $theme.typography.font650)));
 });
@@ -145,11 +145,11 @@ var StyledMainMenuItem = (0, _styles.styled)('div', function (props) {
     marginRight: sizing.scale700,
     paddingTop: $kind === _constants.KIND.secondary ? sizing.scale750 : '0',
     paddingBottom: $kind === _constants.KIND.secondary ? sizing.scale750 : '0',
-    outline: $isFocusVisible ? "3px solid ".concat(colors.accent) : 'none',
+    outline: $isFocusVisible ? "3px solid ".concat(colors.borderAccent) : 'none',
     outlineOffset: '-3px',
     borderBottomWidth: '2px',
     borderBottomStyle: 'solid',
-    borderBottomColor: $active && !$isFocusVisible ? colors.primary : 'transparent',
+    borderBottomColor: $active && !$isFocusVisible ? colors.borderSelected : 'transparent',
     cursor: $active ? 'default' : 'pointer',
     whiteSpace: $kind === _constants.KIND.secondary ? 'nowrap' : 'initial',
     ':first-child': _objectSpread({}, direction === 'rtl' ? {
@@ -163,7 +163,7 @@ var StyledMainMenuItem = (0, _styles.styled)('div', function (props) {
       marginRight: '0'
     }),
     ':hover': {
-      color: colors.primary
+      color: colors.contentPrimary
     }
   };
 });

package/app-nav-bar/styled-components.js.flow

@@ -35,7 +35,7 @@ const StyledButton = styled<{ $isFocusVisible: boolean }>(
     marginTop: 0,
     marginRight: 0,
     marginBottom: 0,
-    outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+    outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
     outlineOffset: '-3px',
     WebkitAppearance: 'none',
     cursor: 'pointer',
@@ -76,7 +76,7 @@ export const StyledSpacing = styled<{}>('div', (props) => {
 
 export const StyledAppName = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.font550,
-  color: $theme.colors.primary,
+  color: $theme.colors.contentPrimary,
   textDecoration: 'none',
   [$theme.mediaQuery.medium]: {
     ...$theme.typography.font650,
@@ -130,11 +130,11 @@ export const StyledMainMenuItem = styled<{
     marginRight: sizing.scale700,
     paddingTop: $kind === KIND.secondary ? sizing.scale750 : '0',
     paddingBottom: $kind === KIND.secondary ? sizing.scale750 : '0',
-    outline: $isFocusVisible ? `3px solid ${colors.accent}` : 'none',
+    outline: $isFocusVisible ? `3px solid ${colors.borderAccent}` : 'none',
     outlineOffset: '-3px',
     borderBottomWidth: '2px',
     borderBottomStyle: 'solid',
-    borderBottomColor: $active && !$isFocusVisible ? colors.primary : 'transparent',
+    borderBottomColor: $active && !$isFocusVisible ? colors.borderSelected : 'transparent',
     cursor: $active ? 'default' : 'pointer',
     whiteSpace: $kind === KIND.secondary ? 'nowrap' : 'initial',
     ':first-child': {
@@ -144,7 +144,7 @@ export const StyledMainMenuItem = styled<{
       ...(direction === 'rtl' ? { marginLeft: '0' } : { marginRight: '0' }),
     },
     ':hover': {
-      color: colors.primary,
+      color: colors.contentPrimary,
     },
   };
 });

package/avatar/styled-components.js

@@ -41,7 +41,7 @@ Avatar.displayName = "Avatar";
 Avatar.displayName = 'Avatar';
 var Initials = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font300), {}, {
-    color: props.$theme.colors.mono100,
+    color: props.$theme.colors.contentInversePrimary,
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'center',
@@ -56,7 +56,7 @@ var Root = (0, _styles.styled)('div', function (props) {
   var $didImageFailToLoad = props.$didImageFailToLoad;
   var themedSize = getSize(props);
   return {
-    backgroundColor: $didImageFailToLoad ? props.$theme.colors.primary : null,
+    backgroundColor: $didImageFailToLoad ? props.$theme.colors.backgroundInversePrimary : null,
     borderTopLeftRadius: '50%',
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',

package/avatar/styled-components.js.flow

@@ -35,7 +35,7 @@ export const Avatar = styled<AvatarStylePropsT>('img', (props) => {
 
 export const Initials = styled<InitialsStylePropsT>('div', (props) => ({
   ...props.$theme.typography.font300,
-  color: props.$theme.colors.mono100,
+  color: props.$theme.colors.contentInversePrimary,
   alignItems: 'center',
   display: 'flex',
   justifyContent: 'center',
@@ -47,7 +47,7 @@ export const Root = styled<RootStylePropsT>('div', (props) => {
   const themedSize = getSize(props);
 
   return ({
-    backgroundColor: $didImageFailToLoad ? props.$theme.colors.primary : null,
+    backgroundColor: $didImageFailToLoad ? props.$theme.colors.backgroundInversePrimary : null,
     borderTopLeftRadius: '50%',
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',

package/badge/styled-components.js

@@ -43,7 +43,7 @@ function getColorStyles(_ref) {
     color: $theme.colors.contentAccent,
     backgroundColor: $theme.colors.backgroundAccentLight
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.primary, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentPrimary,
     backgroundColor: $theme.colors.backgroundSecondary
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.positive, {
     color: $theme.colors.contentPositive,

package/badge/styled-components.js.flow

@@ -42,7 +42,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
         backgroundColor: $theme.colors.backgroundAccentLight,
       },
       [COLOR.primary]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentPrimary,
         backgroundColor: $theme.colors.backgroundSecondary,
       },
       [COLOR.positive]: {

package/button/styled-components.js

@@ -40,7 +40,7 @@ var BaseButton = (0, _styles.styled)('button', function (_ref) {
     borderRightStyle: 'none',
     borderBottomStyle: 'none',
     outline: 'none',
-    boxShadow: $isFocusVisible ? "inset 0 0 0 3px ".concat($theme.colors.accent) : 'none',
+    boxShadow: $isFocusVisible ? "inset 0 0 0 3px ".concat($theme.colors.borderAccent) : 'none',
     textDecoration: 'none',
     WebkitAppearance: 'none',
     transitionProperty: 'background',

package/button/styled-components.js.flow

@@ -38,7 +38,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     borderRightStyle: 'none',
     borderBottomStyle: 'none',
     outline: 'none',
-    boxShadow: $isFocusVisible ? `inset 0 0 0 3px ${$theme.colors.accent}` : 'none',
+    boxShadow: $isFocusVisible ? `inset 0 0 0 3px ${$theme.colors.borderAccent}` : 'none',
     textDecoration: 'none',
     WebkitAppearance: 'none',
     transitionProperty: 'background',

package/checkbox/styled-components.js

@@ -130,7 +130,7 @@ function getLabelColor(props) {
   var $disabled = props.$disabled,
       $theme = props.$theme;
   var colors = $theme.colors;
-  return $disabled ? colors.contentSecondary : colors.contentPrimary;
+  return $disabled ? colors.contentStateDisabled : colors.contentPrimary;
 }
 
 var Root = (0, _styles.styled)('label', function (props) {
@@ -188,7 +188,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
     borderTopRightRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
     borderBottomLeftRadius: borderRadius,
-    outline: $isFocusVisible && $checked ? "3px solid ".concat($theme.colors.accent) : 'none',
+    outline: $isFocusVisible && $checked ? "3px solid ".concat($theme.colors.borderAccent) : 'none',
     display: 'inline-block',
     verticalAlign: 'middle',
     backgroundImage: $isIndeterminate ? "url('data:image/svg+xml,".concat(indeterminate, "');") : $checked ? "url('data:image/svg+xml,".concat(check, "');") : null,
@@ -250,7 +250,7 @@ var Toggle = (0, _styles.styled)('div', function (props) {
     borderTopRightRadius: '50%',
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
-    boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
+    boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.borderAccent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
     outline: 'none',
     height: props.$theme.sizing.scale700,
     width: props.$theme.sizing.scale700,

package/checkbox/styled-components.js.flow

@@ -171,7 +171,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
     borderTopRightRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
     borderBottomLeftRadius: borderRadius,
-    outline: $isFocusVisible && $checked ? `3px solid ${$theme.colors.accent}` : 'none',
+    outline: $isFocusVisible && $checked ? `3px solid ${$theme.colors.borderAccent}` : 'none',
     display: 'inline-block',
     verticalAlign: 'middle',
     backgroundImage: $isIndeterminate
@@ -230,7 +230,7 @@ export const Toggle = styled<SharedStylePropsT>('div', (props) => {
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
     boxShadow: props.$isFocusVisible
-      ? `0 0 0 3px ${props.$theme.colors.accent}`
+      ? `0 0 0 3px ${props.$theme.colors.borderAccent}`
       : props.$isHovered && !props.$disabled
       ? props.$theme.lighting.shadow500
       : props.$theme.lighting.shadow400,

package/data-table/column-numerical.js

@@ -176,7 +176,7 @@ var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
 
     return /*#__PURE__*/React.createElement("rect", {
       key: "bar-".concat(index),
-      fill: included ? theme.colors.primary : theme.colors.mono400,
+      fill: included ? theme.colors.backgroundInversePrimary : theme.colors.backgroundSecondary,
       x: x,
       y: y,
       width: width,
@@ -441,7 +441,7 @@ function NumericalFilter(props) {
             return {
               // For range selection we use the color as is, but when selecting the single value,
               // we don't want the track standing out, so mute its color
-              background: theme.colors.mono400
+              background: theme.colors.backgroundSecondary
             };
           }
         }

package/data-table/column-numerical.js.flow

@@ -149,7 +149,7 @@ const Histogram = React.memo(function Histogram({
           return (
             <rect
               key={`bar-${index}`}
-              fill={included ? theme.colors.primary : theme.colors.mono400}
+              fill={included ? theme.colors.backgroundInversePrimary : theme.colors.backgroundSecondary}
               x={x}
               y={y}
               width={width}
@@ -365,7 +365,7 @@ function NumericalFilter(props) {
                   return {
                     // For range selection we use the color as is, but when selecting the single value,
                     // we don't want the track standing out, so mute its color
-                    background: theme.colors.mono400,
+                    background: theme.colors.backgroundSecondary,
                   };
                 }
               },

package/data-table/filter-menu.js

@@ -115,7 +115,7 @@ function Options(props) {
     className: css({
       backgroundColor: theme.colors.menuFill,
       minWidth: '320px',
-      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.borderAccent) : 'none',
       paddingTop: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600
     })

package/data-table/filter-menu.js.flow

@@ -83,7 +83,7 @@ function Options(props: OptionsPropsT) {
       className={css({
         backgroundColor: theme.colors.menuFill,
         minWidth: '320px',
-        outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
+        outline: focusVisible ? `3px solid ${theme.colors.borderAccent}` : 'none',
         paddingTop: theme.sizing.scale600,
         paddingBottom: theme.sizing.scale600,
       })}

package/data-table/header-cell.js

@@ -114,7 +114,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       display: 'flex',
       flexGrow: 1,
       height: '100%',
-      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.borderAccent) : 'none',
       outlineOffset: '-3px',
       // paddingLeft: theme.sizing.scale500,
       paddingRight: theme.sizing.scale500,

package/data-table/header-cell.js.flow

@@ -74,7 +74,7 @@ const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>((props, re
         paddingRight: theme.sizing.scale500,
         flexWrap: 'nowrap',
         whiteSpace: 'nowrap',
-        outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
+        outline: focusVisible ? `3px solid ${theme.colors.borderAccent}` : 'none',
         outlineOffset: '-3px',
       })}
       onMouseEnter={props.onMouseEnter}

package/datepicker/styled-components.js

@@ -194,7 +194,7 @@ var StyledMonthYearSelectButton = (0, _styles.styled)('button', function (props)
     paddingRight: $density === _constants.DENSITY.high ? sizing.scale500 : sizing.scale600,
     outline: 'none',
     ':focus': {
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none'
+      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.borderAccent) : 'none'
     }
   });
 });
@@ -240,7 +240,7 @@ function getArrowBtnStyle(_ref6) {
     marginTop: 0,
     outline: 'none',
     ':focus': $disabled ? {} : {
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat($theme.colors.accent) : 'none'
+      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat($theme.colors.borderAccent) : 'none'
     },
     width: '48px'
   };
@@ -577,7 +577,7 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.borderAccent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: circleHeight,
       width: $density === _constants.DENSITY.high ? '40px' : '48px',
@@ -613,7 +613,7 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      backgroundColor: colors.mono300,
+      backgroundColor: colors.backgroundTertiary,
       position: 'absolute',
       height: circleHeight,
       width: '50%',
@@ -632,7 +632,7 @@ var StyledDay = (0, _styles.styled)('div', function (props) {
       borderLeftColor: 'transparent',
       borderRightColor: 'transparent'
     }, getDayStyles(code, props.$theme)[':before'] || {}), $outsideMonthWithinRange ? {
-      backgroundColor: colors.mono300,
+      backgroundColor: colors.backgroundTertiary,
       left: '0',
       width: '100%',
       content: '""'

package/datepicker/styled-components.js.flow

@@ -145,7 +145,7 @@ export const StyledMonthYearSelectButton = styled<SharedStylePropsT>('button', (
     display: 'flex',
     outline: 'none',
     ':focus': {
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.borderAccent}` : 'none',
     },
   };
 });
@@ -182,7 +182,7 @@ function getArrowBtnStyle({ $theme, $disabled, $isFocusVisible }) {
     ':focus': $disabled
       ? {}
       : {
-          boxShadow: $isFocusVisible ? `0 0 0 3px ${$theme.colors.accent}` : 'none',
+          boxShadow: $isFocusVisible ? `0 0 0 3px ${$theme.colors.borderAccent}` : 'none',
         },
   };
 }
@@ -473,7 +473,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
       display: 'inline-block',
       boxShadow:
         $isFocusVisible && (!$outsideMonth || $peekNextMonth)
-          ? `0 0 0 3px ${colors.accent}`
+          ? `0 0 0 3px ${colors.borderAccent}`
           : 'none',
       backgroundColor: $selected
         ? colors.calendarDayBackgroundSelectedHighlighted
@@ -515,7 +515,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
             content: '""',
             boxSizing: 'border-box',
             display: 'inline-block',
-            backgroundColor: colors.mono300,
+            backgroundColor: colors.backgroundTertiary,
             position: 'absolute',
             height: '100%',
             width: '50%',
@@ -536,7 +536,7 @@ export const StyledDay = styled<SharedStylePropsT>('div', (props) => {
             ...(getDayStyles(code, props.$theme)[':before'] || {}),
             ...($outsideMonthWithinRange
               ? {
-                  backgroundColor: colors.mono300,
+                  backgroundColor: colors.backgroundTertiary,
                   left: '0',
                   width: '100%',
                   content: '""',

package/dnd-list/styled-components.js

@@ -56,13 +56,13 @@ function (_ref3) {
       borderBottomStyle: 'solid',
       borderLeftStyle: 'solid',
       borderRightStyle: 'solid',
-      borderTopColor: $theme.colors.primary,
-      borderBottomColor: $theme.colors.primary,
-      borderLeftColor: $theme.colors.primary,
-      borderRightColor: $theme.colors.primary
+      borderTopColor: $theme.colors.borderSelected,
+      borderBottomColor: $theme.colors.borderSelected,
+      borderLeftColor: $theme.colors.borderSelected,
+      borderRightColor: $theme.colors.borderSelected
     } : {},
     ':focus': {
-      outline: $isFocusVisible && !$isDragged && !$isSelected ? "3px solid ".concat($theme.colors.accent) : 'none',
+      outline: $isFocusVisible && !$isDragged && !$isSelected ? "3px solid ".concat($theme.colors.borderAccent) : 'none',
       outlineOffset: '-3px'
     },
     paddingTop: $theme.sizing.scale600,
@@ -85,10 +85,10 @@ function (_ref3) {
     borderBottomStyle: 'solid',
     borderLeftStyle: 'solid',
     borderRightStyle: 'solid',
-    borderTopColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-    borderBottomColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-    borderLeftColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-    borderRightColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent'
+    borderTopColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+    borderBottomColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+    borderLeftColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+    borderRightColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent'
   };
 });
 exports.Item = Item;
@@ -125,7 +125,7 @@ var CloseHandle = (0, _styles.styled)('button', function (_ref6) {
     cursor: 'pointer',
     backgroundColor: 'transparent'
   }, _defineProperty(_ref7, marginDir, $theme.sizing.scale600), _defineProperty(_ref7, "width", $theme.sizing.scale800), _defineProperty(_ref7, "display", 'flex'), _defineProperty(_ref7, "alignItems", 'center'), _defineProperty(_ref7, ':focus', {
-    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none'
+    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.borderAccent) : 'none'
   }), _ref7;
 });
 exports.CloseHandle = CloseHandle;

package/dnd-list/styled-components.js.flow

@@ -42,16 +42,16 @@ export const Item = styled<SharedStylePropsArgT>(
               borderBottomStyle: 'solid',
               borderLeftStyle: 'solid',
               borderRightStyle: 'solid',
-              borderTopColor: $theme.colors.primary,
-              borderBottomColor: $theme.colors.primary,
-              borderLeftColor: $theme.colors.primary,
-              borderRightColor: $theme.colors.primary,
+              borderTopColor: $theme.colors.borderSelected,
+              borderBottomColor: $theme.colors.borderSelected,
+              borderLeftColor: $theme.colors.borderSelected,
+              borderRightColor: $theme.colors.borderSelected,
             }
           : {},
       ':focus': {
         outline:
           $isFocusVisible && !$isDragged && !$isSelected
-            ? `3px solid ${$theme.colors.accent}`
+            ? `3px solid ${$theme.colors.borderAccent}`
             : 'none',
         outlineOffset: '-3px',
       },
@@ -75,10 +75,10 @@ export const Item = styled<SharedStylePropsArgT>(
       borderBottomStyle: 'solid',
       borderLeftStyle: 'solid',
       borderRightStyle: 'solid',
-      borderTopColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderBottomColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderLeftColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
-      borderRightColor: $isDragged || $isSelected ? $theme.colors.primary : 'transparent',
+      borderTopColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+      borderBottomColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+      borderLeftColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
+      borderRightColor: $isDragged || $isSelected ? $theme.colors.borderSelected : 'transparent',
     }: {});
   }
 );
@@ -115,7 +115,7 @@ export const CloseHandle = styled<SharedStylePropsArgT>('button', ({ $theme, $is
     display: 'flex',
     alignItems: 'center',
     ':focus': {
-      outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+      outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
     },
   };
 });

package/drawer/styled-components.js

@@ -9,6 +9,8 @@ var _styles = require("../styles");
 
 var _constants = require("./constants");
 
+var _tokens = require("../tokens");
+
 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; }
@@ -198,7 +200,7 @@ var StyledClose = (0, _styles.styled)('button', function (props) {
     paddingRight: 0,
     paddingBottom: 0,
     // colors
-    fill: $theme.colors.primary,
+    fill: $theme.colors.contentPrimary,
     transitionProperty: 'fill, border-color',
     transitionDuration: $theme.animation.timing200,
     borderLeftWidth: '1px',
@@ -214,10 +216,10 @@ var StyledClose = (0, _styles.styled)('button', function (props) {
     borderTopColor: 'transparent',
     borderBottomColor: 'transparent',
     ':hover': {
-      fill: $theme.colors.primary600
+      fill: _tokens.colors.gray600
     },
     ':focus': {
-      outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none'
+      outline: $isFocusVisible ? "3px solid ".concat($theme.colors.borderAccent) : 'none'
     },
     // Positioning
     position: 'absolute',

package/drawer/styled-components.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles/index.js';
 import { SIZE, SIZE_DIMENSION, ANCHOR } from './constants.js';
 import type { SharedStylePropsArgT, SizePropT, AnchorPropT } from './types.js';
+import { colors as colorTokens } from '../tokens/index.js';
 
 function getSizeStyles($size: SizePropT, $anchor: AnchorPropT) {
   const styles = {
@@ -162,7 +163,7 @@ export const StyledClose = styled<SharedStylePropsArgT>('button', (props) => {
     paddingBottom: 0,
 
     // colors
-    fill: $theme.colors.primary,
+    fill: $theme.colors.contentPrimary,
     transitionProperty: 'fill, border-color',
     transitionDuration: $theme.animation.timing200,
     borderLeftWidth: '1px',
@@ -178,10 +179,10 @@ export const StyledClose = styled<SharedStylePropsArgT>('button', (props) => {
     borderTopColor: 'transparent',
     borderBottomColor: 'transparent',
     ':hover': {
-      fill: $theme.colors.primary600,
+      fill: colorTokens.gray600,
     },
     ':focus': {
-      outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+      outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
     },
 
     // Positioning

package/es/a11y/a11y.js

@@ -48,7 +48,7 @@ const ViolationContainer = styled('div', ({
   $left
 }) => {
   return {
-    backgroundColor: $theme.colors.mono100,
+    backgroundColor: $theme.colors.backgroundPrimary,
     boxShadow: $theme.lighting.shadow600,
     position: 'absolute',
     padding: $theme.sizing.scale400,
@@ -78,7 +78,7 @@ function Violation(props) {
     if (node) {
       // @ts-ignore
       setAnchor(node);
-      node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
+      node.setAttribute('style', `border: solid 1px ${theme.colors.borderNegative};`);
       node.addEventListener('mouseenter', handleMouseEnter);
       node.addEventListener('mouseleave', handleMouseLeave);
     }