@primer/components 0.0.0-202191416576 → 0.0.0-2021914205234

package/lib/BaseStyles.js

@@ -59,7 +59,7 @@ function BaseStyles(props) {
 
 BaseStyles.displayName = "BaseStyles";
 BaseStyles.defaultProps = {
-  color: 'fg.default',
+  color: 'text.primary',
   fontFamily: 'normal',
   lineHeight: 'default'
 };

package/lib/BorderBox.js

@@ -21,7 +21,7 @@ const BorderBox = (0, _styledComponents.default)(_Box.default).withConfig({
 BorderBox.defaultProps = {
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'border.default',
+  borderColor: 'border.primary',
   borderRadius: 2
 };
 var _default = BorderBox;

package/lib/Caret.js

@@ -119,8 +119,8 @@ function Caret(props) {
 Caret.displayName = "Caret";
 Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 Caret.defaultProps = {
-  bg: 'canvas.default',
-  borderColor: 'border.default',
+  bg: 'bg.canvas',
+  borderColor: 'border.primary',
   borderWidth: 1
 };
 var _default = Caret;

package/lib/Dialog.js

@@ -122,7 +122,7 @@ const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   }), children)) : null;
 });
 DialogHeader.defaultProps = {
-  backgroundColor: 'canvas.subtle'
+  backgroundColor: 'bg.tertiary'
 };
 DialogHeader.propTypes = { ..._Box.default.propTypes
 };

package/lib/Flash.js

@@ -18,35 +18,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const variants = (0, _styledSystem.variant)({
   variants: {
     default: {
-      color: 'fg.default',
-      backgroundColor: 'accent.subtle',
-      borderColor: 'accent.muted',
+      color: 'alert.info.text',
+      backgroundColor: 'alert.info.bg',
+      borderColor: 'alert.info.border',
       svg: {
-        color: 'accent.fg'
+        color: 'alert.info.icon'
       }
     },
     success: {
-      color: 'fg.default',
-      backgroundColor: 'success.subtle',
-      borderColor: 'success.muted',
+      color: 'alert.success.text',
+      backgroundColor: 'alert.success.bg',
+      borderColor: 'alert.success.border',
       svg: {
-        color: 'success.fg'
+        color: 'alert.success.icon'
       }
     },
     danger: {
-      color: 'fg.default',
-      backgroundColor: 'danger.subtle',
-      borderColor: 'danger.muted',
+      color: 'alert.error.text',
+      backgroundColor: 'alert.error.bg',
+      borderColor: 'alert.error.border',
       svg: {
-        color: 'danger.fg'
+        color: 'alert.error.icon'
       }
     },
     warning: {
-      color: 'fg.default',
-      backgroundColor: 'attention.subtle',
-      borderColor: 'attention.muted',
+      color: 'alert.warn.text',
+      backgroundColor: 'alert.warn.bg',
+      borderColor: 'alert.warn.border',
       svg: {
-        color: 'attention.fg'
+        color: 'alert.warn.icon'
       }
     }
   }

package/lib/Label.js

@@ -52,7 +52,7 @@ const Label = _styledComponents.default.span.withConfig({
 })(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", "  ", ""], (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('radii.3'), sizeVariant, _constants.COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', _sx.default);
 
 Label.defaultProps = {
-  bg: 'neutral.emphasis',
+  bg: 'label.primary.border',
   variant: 'medium'
 };
 var _default = Label;

package/lib/ProgressBar.js

@@ -52,7 +52,7 @@ function ProgressBar({
 
 ProgressBar.displayName = "ProgressBar";
 ProgressBar.defaultProps = {
-  bg: 'success.emphasis',
+  bg: 'bg.successInverse',
   barSize: 'default'
 };
 var _default = ProgressBar;

package/lib/StateLabel.js

@@ -35,28 +35,34 @@ const colorVariants = (0, _styledSystem.variant)({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'danger.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
     },
     pullClosed: {
-      backgroundColor: 'danger.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.closed.bg',
+      color: 'prState.closed.text',
+      borderColor: 'prState.closed.border'
     },
     pullMerged: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.merged.bg',
+      color: 'prState.merged.text',
+      borderColor: 'prState.merged.border'
     },
     issueOpened: {
-      backgroundColor: 'success.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
     },
     pullOpened: {
-      backgroundColor: 'success.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.open.bg',
+      color: 'prState.open.text',
+      borderColor: 'prState.open.border'
     },
     draft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis'
+      backgroundColor: 'prState.draft.bg',
+      color: 'prState.draft.text',
+      borderColor: 'prState.draft.border'
     }
   }
 });
@@ -79,7 +85,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const StateLabelBase = _styledComponents.default.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
 
 function StateLabel({
   children,

package/lib/Token/_RemoveTokenButton.js

@@ -50,7 +50,7 @@ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _T
 const StyledTokenButton = _styledComponents.default.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'), variants, _sx.default);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,