@primer/components 29.0.0-rc.ae627848 → 29.1.0-rc.4e9b967e

package/lib-esm/ActionList/Divider.js

@@ -4,7 +4,7 @@ import { get } from '../constants';
 export const StyledDivider = styled.div.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-42656i-0"
-})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.selectMenu.borderSecondary'), get('space.2'), get('space.2'));
+})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.border.muted'), get('space.2'), get('space.2'));
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */

package/lib-esm/ActionList/Header.js

@@ -11,9 +11,9 @@ import sx from '../sx';
 export const StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "qmofje-0"
-})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.text.secondary'), ({
+})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
   variant
-}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.bg.tertiary'), get('space.2'), get('colors.border.tertiary'), get('colors.border.tertiary')), sx);
+}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);
 /**
  * Displays the name and description of a `Group`.
  */

package/lib-esm/ActionList/Item.js

@@ -48,9 +48,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
-      color: get('colors.text.disabled'),
-      iconColor: get('colors.text.disabled'),
-      annotationColor: get('colors.text.disabled'),
+      color: get('colors.fg.muted'),
+      iconColor: get('colors.fg.muted'),
+      annotationColor: get('colors.fg.muted'),
       hoverCursor: 'default'
     };
   }
@@ -58,17 +58,17 @@ const getItemVariant = (variant = 'default', disabled) => {
   switch (variant) {
     case 'danger':
       return {
-        color: get('colors.text.danger'),
-        iconColor: get('colors.icon.danger'),
-        annotationColor: get('colors.text.disabled'),
+        color: get('colors.danger.fg'),
+        iconColor: get('colors.danger.fg'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       };
 
     default:
       return {
         color: 'inherit',
-        iconColor: get('colors.text.secondary'),
-        annotationColor: get('colors.text.secondary'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       };
   }
@@ -95,7 +95,7 @@ const StyledItem = styled.div.withConfig({
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
   showDivider
-}) => showDivider ? `1px` : '0', DividedContent, get('colors.selectMenu.borderSecondary'), ({
+}) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
   focusBackground
@@ -135,7 +135,7 @@ const TrailingContent = styled(ColoredVisualContainer).withConfig({
 const DescriptionContainer = styled.span.withConfig({
   displayName: "Item__DescriptionContainer",
   componentId: "jqpvy8-8"
-})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.text.secondary'), get('fontSizes.0'));
+})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
 const MultiSelectInput = styled.input.withConfig({
   displayName: "Item__MultiSelectInput",
   componentId: "jqpvy8-9"

package/lib-esm/ActionList/List.js

@@ -23,7 +23,7 @@ function isGroupedListProps(props) {
 const StyledList = styled.div.withConfig({
   displayName: "List__StyledList",
   componentId: "yr2k7d-0"
-})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.selectMenu.borderSecondary'));
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.

package/lib-esm/AvatarPair.js

@@ -19,7 +19,7 @@ const AvatarPair = ({
     return i === 0 ? /*#__PURE__*/React.cloneElement(child, {
       size: 40
     }) : /*#__PURE__*/React.createElement(ChildAvatar, _extends({
-      bg: "bg.canvas"
+      bg: "canvas.default"
     }, child.props, {
       size: 20
     }));

package/lib-esm/AvatarStack.js

@@ -9,7 +9,7 @@ import sx from './sx';
 const AvatarStackWrapper = styled.span.withConfig({
   displayName: "AvatarStack__AvatarStackWrapper",
   componentId: "sc-1qgzd2v-0"
-})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.bg.canvas'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.bg.canvas'), COMMON, sx);
+})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), COMMON, sx);
 
 const transformChildren = children => {
   return React.Children.map(children, (child, index) => {

package/lib-esm/BranchName.js

@@ -4,5 +4,5 @@ import sx from './sx';
 const BranchName = styled.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.branchName.text'), get('colors.branchName.bg'), get('radii.2'), COMMON, sx);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), COMMON, sx);
 export default BranchName;

package/lib-esm/Breadcrumb.js

@@ -11,7 +11,7 @@ const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
   displayName: "Breadcrumb__Wrapper",
   componentId: "c1r3ff-0"
-})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.text.disabled'), get('fontSizes.1'));
+})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.fg.muted'), get('fontSizes.1'));
 const BreadcrumbBase = styled.nav.withConfig({
   displayName: "Breadcrumb__BreadcrumbBase",
   componentId: "c1r3ff-1"
@@ -46,7 +46,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "Breadcrumb__BreadcrumbItem",
   componentId: "c1r3ff-2"
-})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.text.link'), get('fontSizes.1'), get('colors.text.primary'), COMMON, sx);
+})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
 Breadcrumb.displayName = 'Breadcrumb';
 BreadcrumbItem.displayName = 'Breadcrumb.Item';
 export default Object.assign(Breadcrumb, {

package/lib-esm/Button/Button.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.text.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
 export default Button;

package/lib-esm/Button/ButtonClose.js

@@ -8,7 +8,7 @@ import sx from '../sx';
 const StyledButton = styled.button.withConfig({
   displayName: "ButtonClose__StyledButton",
   componentId: "sc-13mzqph-0"
-})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.text.secondary'), get('shadows.btn.focusShadow'), get('colors.text.link'), COMMON, LAYOUT, sx);
+})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), get('colors.accent.fg'), COMMON, LAYOUT, sx);
 const ButtonClose = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     ref: ref,

package/lib-esm/Button/ButtonInvisible.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.text.link'), get('radii.2'), get('colors.text.disabled'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
 export default ButtonInvisible;

package/lib-esm/Button/ButtonTableList.js

@@ -4,5 +4,5 @@ import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.text.secondary'), get('colors.text.secondary'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
 export default ButtonTableList;

package/lib-esm/CircleBadge.js

@@ -23,7 +23,7 @@ const sizeStyles = ({
 const CircleBadge = styled.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.bg.canvas'), get('shadows.shadow.medium'), COMMON, sizeStyles, sx);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), COMMON, sizeStyles, sx);
 const CircleBadgeIcon = styled(StyledOcticon).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"

package/lib-esm/CircleOcticon.js

@@ -21,7 +21,7 @@ function CircleOcticon(props) {
     size: size,
     borderRadius: "50%",
     borderStyle: "solid",
-    borderColor: "border.primary"
+    borderColor: "border.default"
   }, /*#__PURE__*/React.createElement(Box, _extends({
     display: "flex"
   }, rest, {

package/lib-esm/CounterLabel.js

@@ -7,7 +7,7 @@ const colorStyles = ({
   ...props
 }) => {
   return {
-    color: scheme === 'secondary' ? get('colors.counter.text')(props) : scheme === 'primary' ? get('colors.counter.primary.text')(props) : get('colors.counter.text')(props)
+    color: scheme === 'secondary' ? get('colors.fg.default')(props) : scheme === 'primary' ? get('colors.fg.onEmphasis')(props) : get('colors.fg.default')(props)
   };
 };
 
@@ -16,7 +16,7 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'secondary' ? get('colors.counter.bg')(props) : scheme === 'primary' ? get('colors.counter.primary.bg')(props) : get('colors.counter.bg')(props)
+    backgroundColor: scheme === 'secondary' ? get('colors.neutral.muted')(props) : scheme === 'primary' ? get('colors.neutral.emphasis')(props) : get('colors.neutral.muted')(props)
   };
 };
 

package/lib-esm/Dialog/ConfirmationDialog.js

@@ -41,7 +41,7 @@ ConfirmationHeader.displayName = "ConfirmationHeader";
 const StyledConfirmationBody = styled(Box).withConfig({
   displayName: "ConfirmationDialog__StyledConfirmationBody",
   componentId: "sc-1ub32x2-2"
-})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.text.tertiary'));
+})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.fg.muted'));
 
 const ConfirmationBody = ({
   children

package/lib-esm/Dialog/Dialog.js

@@ -39,7 +39,7 @@ const widthMap = {
 const StyledDialog = styled.div.withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-11pkgky-1"
-})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], get('colors.bg.overlay'), get('shadows.overlay.shadow'), props => {
+})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
   var _props$width;
 
   return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
@@ -155,7 +155,7 @@ const Header = styled(Box).attrs({
 }).withConfig({
   displayName: "Dialog__Header",
   componentId: "sc-11pkgky-2"
-})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.overlay'), get('space.2'));
+})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.default'), get('space.2'));
 const Title = styled(Box).withConfig({
   displayName: "Dialog__Title",
   componentId: "sc-11pkgky-3"
@@ -163,7 +163,7 @@ const Title = styled(Box).withConfig({
 const Subtitle = styled(Box).withConfig({
   displayName: "Dialog__Subtitle",
   componentId: "sc-11pkgky-4"
-})(["font-size:", ";margin-top:", ";color:", ";"], get('fontSizes.0'), get('space.1'), get('colors.text.tertiary'));
+})(["font-size:", ";margin-top:", ";color:", ";"], get('fontSizes.0'), get('space.1'), get('colors.fg.muted'));
 const Body = styled(Box).withConfig({
   displayName: "Dialog__Body",
   componentId: "sc-11pkgky-5"
@@ -173,7 +173,7 @@ const Footer = styled(Box).attrs({
 }).withConfig({
   displayName: "Dialog__Footer",
   componentId: "sc-11pkgky-6"
-})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.overlay'), get('space.3'), get('space.1'));
+})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.default'), get('space.3'), get('space.1'));
 const buttonTypes = {
   normal: Button,
   primary: ButtonPrimary,
@@ -215,7 +215,7 @@ const Buttons = ({
 const DialogCloseButton = styled(Button).withConfig({
   displayName: "Dialog__DialogCloseButton",
   componentId: "sc-11pkgky-7"
-})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.text.secondary'), get('space.2'));
+})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.fg.muted'), get('space.2'));
 
 const CloseButton = ({
   onClose

package/lib-esm/Dialog.js

@@ -15,11 +15,11 @@ const noop = () => null;
 const DialogBase = styled.div.withConfig({
   displayName: "Dialog__DialogBase",
   componentId: "sc-1vcjhsg-0"
-})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.bg.primary'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
+})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
 const DialogHeaderBase = styled(Box).withConfig({
   displayName: "Dialog__DialogHeaderBase",
   componentId: "sc-1vcjhsg-1"
-})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.primary'), sx);
+})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.default'), sx);
 
 function DialogHeader({
   theme,
@@ -30,7 +30,7 @@ function DialogHeader({
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = /*#__PURE__*/React.createElement(Text, {
       theme: theme,
-      color: "text.primary",
+      color: "fg.default",
       fontSize: 1,
       fontWeight: "bold",
       fontFamily: "sans-serif"
@@ -48,7 +48,7 @@ DialogHeader.displayName = "DialogHeader";
 const Overlay = styled.span.withConfig({
   displayName: "Dialog__Overlay",
   componentId: "sc-1vcjhsg-2"
-})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.fade.black50'));
+})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.primer.canvas.backdrop'));
 const Dialog = /*#__PURE__*/forwardRef(({
   children,
   onDismiss = noop,

package/lib-esm/Dropdown.js

@@ -48,11 +48,11 @@ const DropdownCaret = styled.div.withConfig({
 const DropdownMenu = styled.ul.withConfig({
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-16yoecj-2"
-})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.bg.overlay'), get('colors.border.overlay'), get('radii.2'), get('shadows.dropdown.shadow'), get('colors.bg.overlay'), get('colors.bg.overlay'), props => props.direction ? getDirectionStyles(props.theme, props.direction) : '', COMMON, sx);
+})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.canvas.overlay'), get('colors.border.default'), get('radii.2'), get('shadows.shadow.large'), get('colors.canvas.overlay'), get('colors.canvas.overlay'), props => props.direction ? getDirectionStyles(props.theme, props.direction) : '', COMMON, sx);
 const DropdownItem = styled.li.withConfig({
   displayName: "Dropdown__DropdownItem",
   componentId: "sc-16yoecj-3"
-})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.text.primary'), get('colors.text.primary'), get('colors.text.primary'), get('colors.state.hover.primaryText'), get('colors.state.hover.primaryBg'), get('colors.state.hover.primaryText'), get('colors.state.hover.primaryBg'), COMMON, sx);
+})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), COMMON, sx);
 DropdownMenu.defaultProps = {
   direction: 'sw'
 };

package/lib-esm/DropdownStyles.js

@@ -15,7 +15,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.overlay')(theme)};
+        border-left-color: ${get('colors.border.default')(theme)};
       }
 
       &::after {
@@ -23,7 +23,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.overlay')(theme)};
+        border-left-color: ${get('colors.border.default')(theme)};
       }
     `,
     e: `
@@ -37,14 +37,14 @@ const getDirectionStyles = (theme, direction) => {
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.overlay')(theme)};
+        border-right-color: ${get('colors.border.default')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.overlay')(theme)};
+        border-right-color: ${get('colors.border.default')(theme)};
       }
     `,
     ne: `
@@ -62,7 +62,7 @@ const getDirectionStyles = (theme, direction) => {
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${get('colors.border.overlay')(theme)};
+        border-top: 8px solid ${get('colors.border.default')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
@@ -70,7 +70,7 @@ const getDirectionStyles = (theme, direction) => {
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${get('colors.border.overlay')(theme)};
+        border-top: 7px solid ${get('colors.border.default')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;

package/lib-esm/FilterList.js

@@ -21,7 +21,7 @@ FilterList.displayName = "FilterList";
 const FilterListItemBase = styled.a.withConfig({
   displayName: "FilterList__FilterListItemBase",
   componentId: "sc-1l4pxmz-1"
-})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.state.selected.primaryText') : get('colors.text.secondary'), props => props.selected ? get('colors.state.selected.primaryBg') : '', get('radii.1'), get('colors.bg.tertiary'), get('colors.state.selected.primaryText'), get('colors.state.selected.primaryBg'), get('fontWeights.bold'), COMMON, sx);
+})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'), props => props.selected ? get('colors.accent.emphasis') : '', get('radii.1'), get('colors.canvas.subtle'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('fontWeights.bold'), COMMON, sx);
 
 function FilterListItem({
   children,

package/lib-esm/FilteredActionList/FilteredActionList.js

@@ -44,7 +44,7 @@ function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth'
 const StyledHeader = styled.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "yg3jkv-0"
-})(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.primary'));
+})(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.default'));
 export function FilteredActionList({
   loading = false,
   placeholderText,
@@ -106,7 +106,7 @@ export function FilteredActionList({
     ref: inputRef,
     block: true,
     width: "auto",
-    color: "text.primary",
+    color: "fg.default",
     value: filterValue,
     onChange: onInputChange,
     onKeyPress: onInputKeyPress,

package/lib-esm/Flash.js

@@ -41,7 +41,7 @@ const variants = variant({
 const Flash = styled.div.withConfig({
   displayName: "Flash",
   componentId: "sc-4y90bn-0"
-})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.text.primary'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), COMMON, variants, sx);
+})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.fg.default'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), COMMON, variants, sx);
 Flash.defaultProps = {
   variant: 'default'
 };

package/lib-esm/Label.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { borderColor, variant } from 'styled-system';
 import { COMMON, get } from './constants';
 import sx from './sx';
-const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.label.secondary.text'), get('borderWidths.1'), get('colors.label.border'), borderColor, COMMON);
+const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.default'), borderColor, COMMON);
 const sizeVariant = variant({
   variants: {
     small: {
@@ -31,7 +31,7 @@ const sizeVariant = variant({
 const Label = styled.span.withConfig({
   displayName: "Label",
   componentId: "sc-1t3ykp0-0"
-})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.text.inverse'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
+})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
 Label.defaultProps = {
   bg: 'label.primary.border',
   variant: 'medium'

package/lib-esm/Link.js

@@ -11,5 +11,5 @@ const hoverColor = system({
 const Link = styled.a.withConfig({
   displayName: "Link",
   componentId: "sc-1brdqhf-0"
-})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.text.secondary')(props) : get('colors.text.link')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.text.link')(props)}` : '', TYPOGRAPHY, COMMON, sx);
+})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', TYPOGRAPHY, COMMON, sx);
 export default Link;

package/lib-esm/Overlay.js

@@ -60,7 +60,7 @@ function getSlideAnimationStartingVector(anchorSide) {
 const StyledOverlay = styled.div.withConfig({
   displayName: "Overlay__StyledOverlay",
   componentId: "jhwkzw-0"
-})(["background-color:", ";box-shadow:", ";position:absolute;min-width:192px;max-width:640px;height:", ";max-height:", ";width:", ";border-radius:12px;overflow:hidden;animation:overlay-appear ", "ms ", ";@keyframes overlay-appear{0%{opacity:0;}100%{opacity:1;}}visibility:var(--styled-overlay-visibility);:focus{outline:none;}", ";", ";"], get('colors.bg.overlay'), get('shadows.overlay.shadow'), props => heightMap[props.height || 'auto'], props => props.maxHeight && heightMap[props.maxHeight], props => widthMap[props.width || 'auto'], animationDuration, get('animation.easeOutCubic'), COMMON, sx);
+})(["background-color:", ";box-shadow:", ";position:absolute;min-width:192px;max-width:640px;height:", ";max-height:", ";width:", ";border-radius:12px;overflow:hidden;animation:overlay-appear ", "ms ", ";@keyframes overlay-appear{0%{opacity:0;}100%{opacity:1;}}visibility:var(--styled-overlay-visibility);:focus{outline:none;}", ";", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => heightMap[props.height || 'auto'], props => props.maxHeight && heightMap[props.maxHeight], props => widthMap[props.width || 'auto'], animationDuration, get('animation.easeOutCubic'), COMMON, sx);
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,

package/lib-esm/Pagehead.js

@@ -4,5 +4,5 @@ import sx from './sx';
 const Pagehead = styled.div.withConfig({
   displayName: "Pagehead",
   componentId: "sc-1ntn78e-0"
-})(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.primary'), COMMON, sx);
+})(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.default'), COMMON, sx);
 export default Pagehead;

package/lib-esm/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.text.primary'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.primary'), get('colors.border.secondary'), get('colors.text.link'), get('colors.state.selected.primaryText'), get('colors.state.selected.primaryBg'), get('colors.text.disabled'), get('space.1'), get('space.1'), COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
 
 function usePaginationPages({
   theme,

package/lib-esm/Popover.js

@@ -17,7 +17,7 @@ const Popover = styled.div.attrs(({
 const PopoverContent = styled(Box).withConfig({
   displayName: "Popover__PopoverContent",
   componentId: "sc-1nxygy2-1"
-})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";", ";", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], get('colors.border.primary'), get('radii.2'), get('space.4'), get('colors.bg.overlay'), COMMON, LAYOUT, get('space.3'), get('space.2'), get('colors.border.overlay'), get('space.2'), get('colors.bg.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.overlay'), get('colors.bg.overlay'), Popover, Popover, Popover, Popover, get('space.4'), get('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, get('space.2'), get('space.2'), Popover, Popover, Popover, get('space.3'), get('colors.border.overlay'), get('colors.bg.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.overlay'), get('colors.bg.overlay'), Popover, Popover, get('space.4'), Popover, Popover, get('space.3'), get('space.3'), sx);
+})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";", ";", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], get('colors.border.default'), get('radii.2'), get('space.4'), get('colors.canvas.overlay'), COMMON, LAYOUT, get('space.3'), get('space.2'), get('colors.border.default'), get('space.2'), get('colors.canvas.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, Popover, Popover, get('space.4'), get('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, get('space.2'), get('space.2'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, get('space.4'), Popover, Popover, get('space.3'), get('space.3'), sx);
 Popover.defaultProps = {
   caret: 'top'
 };

package/lib-esm/ProgressBar.js

@@ -17,7 +17,7 @@ const sizeMap = {
 const ProgressContainer = styled.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.primary'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);
 
 function ProgressBar({
   progress,

package/lib-esm/SelectMenu/SelectMenuDivider.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { COMMON, get } from '../constants';
 import sx from '../sx';
-const dividerStyles = css(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], get('space.1'), get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.text.tertiary'), get('colors.bg.tertiary'), get('borderWidths.1'), get('colors.selectMenu.borderSecondary'));
+const dividerStyles = css(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], get('space.1'), get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), get('colors.canvas.subtle'), get('borderWidths.1'), get('colors.border.muted'));
 const SelectMenuDivider = styled.div.withConfig({
   displayName: "SelectMenuDivider",
   componentId: "sc-2p0bwt-0"

package/lib-esm/SelectMenu/SelectMenuFilter.js

@@ -9,7 +9,7 @@ import { MenuContext } from './SelectMenuContext';
 const StyledForm = styled.form.withConfig({
   displayName: "SelectMenuFilter__StyledForm",
   componentId: "s7ktlh-0"
-})(["padding:", ";margin:0;border-bottom:", " solid ", ";background-color:", ";", ";@media (min-width:", "){padding:", ";}", ";"], get('space.3'), get('borderWidths.1'), get('colors.selectMenu.borderSecondary'), get('colors.bg.overlay'), COMMON, get('breakpoints.0'), get('space.2'), sx);
+})(["padding:", ";margin:0;border-bottom:", " solid ", ";background-color:", ";", ";@media (min-width:", "){padding:", ";}", ";"], get('space.3'), get('borderWidths.1'), get('colors.border.muted'), get('colors.canvas.overlay'), COMMON, get('breakpoints.0'), get('space.2'), sx);
 const SelectMenuFilter = /*#__PURE__*/forwardRef(({
   theme,
   value,

package/lib-esm/SelectMenu/SelectMenuFooter.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { COMMON, get } from '../constants';
 import sx from '../sx';
-const footerStyles = css(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.text.tertiary'), get('borderWidths.1'), get('colors.selectMenu.borderSecondary'), get('breakpoints.0'), get('space.1'), get('space.2'));
+const footerStyles = css(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.2'));
 const SelectMenuFooter = styled.footer.withConfig({
   displayName: "SelectMenuFooter",
   componentId: "rkvco1-0"

package/lib-esm/SelectMenu/SelectMenuHeader.js

@@ -9,11 +9,11 @@ import sx from '../sx';
 const SelectMenuTitle = styled.h3.withConfig({
   displayName: "SelectMenuHeader__SelectMenuTitle",
   componentId: "sc-1pwppzc-0"
-})(["color:", ";flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], get('colors.text.primary'), get('fontSizes.1'), get('fontWeights.bold'), get('breakpoints.0'));
+})(["color:", ";flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], get('colors.fg.default'), get('fontSizes.1'), get('fontWeights.bold'), get('breakpoints.0'));
 const StyledHeader = styled.header.withConfig({
   displayName: "SelectMenuHeader__StyledHeader",
   componentId: "sc-1pwppzc-1"
-})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";", " ", " @media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], get('space.3'), get('borderWidths'), get('colors.selectMenu.borderSecondary'), COMMON, TYPOGRAPHY, get('breakpoints.0'), get('space.2'), get('space.2'), sx);
+})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";", " ", " @media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], get('space.3'), get('borderWidths'), get('colors.border.muted'), COMMON, TYPOGRAPHY, get('breakpoints.0'), get('space.2'), get('space.2'), sx);
 
 const SelectMenuHeader = ({
   children,