@primer/components 0.0.0-2021915171552 → 0.0.0-202191517561

package/lib-esm/Flash.js

@@ -5,35 +5,35 @@ import sx from './sx';
 const variants = 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-esm/Label.js

@@ -33,7 +33,7 @@ const Label = styled.span.withConfig({
   componentId: "sc-1t3ykp0-0"
 })(["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: 'neutral.emphasis',
+  bg: 'label.primary.border',
   variant: 'medium'
 };
 export default Label;

package/lib-esm/ProgressBar.js

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

package/lib-esm/StateLabel.js

@@ -19,28 +19,34 @@ const colorVariants = 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'
     }
   }
 });
@@ -62,7 +68,7 @@ const sizeVariants = variant({
 const StateLabelBase = styled.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:", ";", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, COMMON, sx);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], get('fontWeights.bold'), get('colors.canvas.default'), get('radii.3'), colorVariants, sizeVariants, COMMON, sx);
 
 function StateLabel({
   children,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -34,7 +34,7 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.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)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["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)`, get('colors.fade.fg10'), get('colors.fade.fg15'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/index.d.ts

@@ -22,7 +22,6 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
 export { ActionList } from './ActionList';
-export { ActionList as ActionList2 } from './ActionList2';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

package/lib-esm/index.js

@@ -18,7 +18,6 @@ export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
 export { ActionList } from './ActionList';
-export { ActionList as ActionList2 } from './ActionList2';
 export { ActionMenu } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';
 export { default as Avatar } from './Avatar';