Set disabled color where required

Switched muted to new disabled color Update snapshot tests
primer · Oct 15, 2021 · 57b66e3 · 57b66e3
1 parent dc78902
commit 57b66e3
Show file tree

Hide file tree

Showing 45 changed files with 39 additions and 138 deletions.
diff --git a/src/ActionList/Header.tsx b/src/ActionList/Header.tsx
@@ -37,7 +37,7 @@ export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxPro
   padding: 6px ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
 
   ${({variant}) =>
     variant === 'filled' &&

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -146,9 +146,9 @@ export interface ItemProps extends SxProp {
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.fg.muted'),
-      iconColor: get('colors.fg.muted'),
-      annotationColor: get('colors.fg.muted'),
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     }
   }
@@ -158,14 +158,14 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
       return {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
-        annotationColor: get('colors.fg.muted'),
+        annotationColor: get('colors.primer.fg.disabled'),
         hoverCursor: 'pointer'
       }
     default:
       return {
         color: get('colors.fg.default'),
-        iconColor: get('colors.fg.muted'),
-        annotationColor: get('colors.fg.muted'),
+        iconColor: get('colors.primer.fg.disabled'),
+        annotationColor: get('colors.primer.fg.disabled'),
         hoverCursor: 'pointer'
       }
   }
@@ -315,7 +315,7 @@ const TrailingContent = styled(ColoredVisualContainer)`
 `
 
 const DescriptionContainer = styled.span`
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   font-size: ${get('fontSizes.0')};
   // TODO: When rem-based spacing on a 4px scale lands, replace
   // hardcoded '16px' with '${get('lh-12')}'.

diff --git a/src/BranchName.tsx b/src/BranchName.tsx
@@ -8,7 +8,7 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
   ${COMMON};

diff --git a/src/Breadcrumbs.tsx b/src/Breadcrumbs.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.li`
   &::after {
     padding-right: 0.5em;
     padding-left: 0.5em;
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
     font-size: ${get('fontSizes.1')};
     content: '/';
   }

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   }
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
     background-color: ${get('colors.btn.bg')};
     border-color: ${get('colors.btn.border')};
   }

diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
@@ -14,7 +14,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   outline: none;
   cursor: pointer;
   border-radius: ${get('radii.2')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
 
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};

diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx
@@ -12,7 +12,7 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
   box-shadow: none;
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
   }
 
   &:focus {

diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -17,7 +17,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: rgba(${get('colors.fg.muted')}, 0.5);
+      color: rgba(${get('colors.primer.fg.disabled')}, 0.5);
       cursor: default;
     }
   }

diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
@@ -65,7 +65,7 @@ const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialog
 const StyledConfirmationBody = styled(Box)`
   font-size: ${get('fontSizes.1')};
   padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   flex-grow: 1;
 `
 const ConfirmationBody: React.FC<DialogProps> = ({children}) => {

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
@@ -322,7 +322,7 @@ const Title = styled(Box)`
 const Subtitle = styled(Box)`
   font-size: ${get('fontSizes.0')};
   margin-top: ${get('space.1')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
 `
 const Body = styled(Box)`
   flex-grow: 1;
@@ -386,7 +386,7 @@ const DialogCloseButton = styled(Button)`
   background: transparent;
   border: 0;
   vertical-align: middle;
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   padding: ${get('space.2')};
   align-self: flex-start;
   line-height: normal;

diff --git a/src/FilterList.tsx b/src/FilterList.tsx
@@ -33,7 +33,7 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
   overflow: hidden;
   font-size: ${get('fontSizes.1')};
-  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))};
+  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.primer.fg.disabled'))};
   background-color: ${props => (props.selected ? get('colors.accent.emphasis') : '')}!important;
   text-decoration: none;
   text-overflow: ellipsis;

diff --git a/src/Label.tsx b/src/Label.tsx
@@ -7,7 +7,7 @@ import {ComponentProps} from './utils/types'
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
   margin-bottom: -1px; // offsets the 1px border
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
   box-shadow: none;
   ${borderColor};

diff --git a/src/Link.tsx b/src/Link.tsx
@@ -20,7 +20,7 @@ const hoverColor = system({
 })
 
 const Link = styled.a<StyledLinkProps>`
-  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
+  color: ${props => (props.muted ? get('colors.primer.fg.disabled')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
   &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};

diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
@@ -55,7 +55,7 @@ const Page = styled.a`
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('colors.fg.muted')}; // check
+    color: ${get('colors.primer.fg.disabled')}; // check
     cursor: default;
     border-color: transparent;
   }

diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx
@@ -8,7 +8,7 @@ const dividerStyles = css`
   margin: 0;
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   background-color: ${get('colors.canvas.subtle')};
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 `

diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx
@@ -7,7 +7,7 @@ const footerStyles = css`
   margin-top: -1px;
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   text-align: center;
   border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 

diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx
@@ -17,7 +17,7 @@ export const listItemStyles = css`
   background-color: ${get('colors.canvas.overlay')};
   border: 0;
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   text-decoration: none;
   font-size: ${get('fontSizes.0')};
   font-family: inherit; // needed if user uses a "button" tag

diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx
@@ -11,7 +11,7 @@ const tabStyles = css`
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: 500;
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   text-align: center;
   background-color: transparent;
   border: 0;

diff --git a/src/SubNav.tsx b/src/SubNav.tsx
@@ -104,7 +104,7 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
     transition: 0.2s ease;
 
     .SubNav-octicon {
-      color: ${get('colors.fg.muted')};
+      color: ${get('colors.primer.fg.disabled')};
     }
   }
 

diff --git a/src/Timeline.tsx b/src/Timeline.tsx
@@ -58,7 +58,7 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
         height: 16px;
         margin-top: ${get('space.2')};
         margin-bottom: ${get('space.2')};
-        color: ${get('colors.fg.muted')};
+        color: ${get('colors.primer.fg.disabled')};
         background-color: ${get('colors.canvas.default')};
         border: 0;
       }
@@ -102,7 +102,7 @@ const TimelineBody = styled(Box)`
   min-width: 0;
   max-width: 100%;
   margin-top: ${get('space.1')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.primer.fg.disabled')};
   flex: auto;
   font-size: ${get('fontSizes.1')};
   ${sx};

diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
@@ -25,7 +25,7 @@ const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: b
   border-color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))};
   border-style: solid;
   border-width: ${tokenBorderWidthPx}px;
-  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))};
+  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.primer.fg.disabled'))};
   max-width: 100%;
   padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)};
   position: relative;

diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx
@@ -87,7 +87,7 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {
-      color: ${get('colors.fg.muted')};
+      color: ${get('colors.primer.fg.disabled')};
     }
   }
 

diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
@@ -60,7 +60,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
 
   .TextInput-icon {
     align-self: center;
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
     margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }
@@ -79,7 +79,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   ${props =>
     props.disabled &&
     css`
-      color: ${get('colors.fg.muted')};
+      color: ${get('colors.primer.fg.disabled')};
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}

diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -61,7 +61,6 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #57606a;
   cursor: default;
   border-color: transparent;
 }

diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -62,7 +62,6 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -68,7 +68,6 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -163,7 +162,6 @@ Object {
 }
 
 .c1:disabled {
-  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -243,7 +241,7 @@ Object {
       <button
         aria-haspopup="true"
         aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 dbYQCU"
         id="react-aria-1"
         tabindex="0"
       >

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -43,7 +43,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -155,7 +154,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -302,7 +300,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -476,7 +473,6 @@ Array [
 }
 
 .c10 svg {
-  fill: #57606a;
   font-size: 12px;
 }
 
@@ -1047,7 +1043,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1715,7 +1710,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -2383,7 +2377,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -3344,7 +3337,6 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;

diff --git a/src/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/__tests__/__snapshots__/BranchName.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #57606a;
   background-color: #ddf4ff;
   border-radius: 6px;
 }