Change colors only during disabled state of the component

primer · Oct 18, 2021 · 482585b · 482585b
1 parent 8469ad2
commit 482585b
Show file tree

Hide file tree

Showing 34 changed files with 100 additions and 94 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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 
   ${({variant}) =>
     variant === 'filled' &&

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -158,14 +158,14 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
       return {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
-        annotationColor: get('colors.primer.fg.disabled'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
     default:
       return {
         color: get('colors.fg.default'),
-        iconColor: get('colors.primer.fg.disabled'),
-        annotationColor: get('colors.primer.fg.disabled'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
   }
@@ -315,7 +315,7 @@ const TrailingContent = styled(ColoredVisualContainer)`
 `
 
 const DescriptionContainer = styled.span`
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     font-size: ${get('fontSizes.1')};
     content: '/';
   }

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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};

diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -31,11 +31,13 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   }
 
   &:disabled {
-    &,
-    &:hover {
-      color: rgba(${get('colors.primer.fg.disabled')}, 0.5);
-      cursor: default;
-    }
+    color: rgba(${get('colors.primer.fg.disabled')}, 0.5);
+    cursor: default;
+  }
+
+  &:hover {
+    color: rgba(${get('colors.fg.muted')}, 0.5);
+    cursor: default;
   }
 
   &:after {

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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 `
 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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled'))};
+  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')(props) : get('colors.accent.fg')(props))};
+  color: ${props => (props.muted ? get('colors.fg.muted')(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/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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
     }
   }
 

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.primer.fg.disabled')};
+        color: ${get('colors.fg.muted')};
         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.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   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.primer.fg.disabled'))};
+  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))};
   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.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
     }
   }
 

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.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -43,7 +43,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -155,7 +155,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -302,7 +302,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -476,7 +476,7 @@ Array [
 }
 
 .c10 svg {
-  fill: #8c959f;
+  fill: #57606a;
   font-size: 12px;
 }
 
@@ -1047,7 +1047,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1715,7 +1715,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -2383,7 +2383,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -3344,7 +3344,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  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,7 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #8c959f;
+  color: #57606a;
   background-color: #ddf4ff;
   border-radius: 6px;
 }

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -817,12 +817,16 @@ exports[`ButtonTableList renders consistently 1`] = `
   text-decoration: underline;
 }
 
-.c0:disabled,
-.c0:disabled:hover {
+.c0:disabled {
   color: rgba(#8c959f,0.5);
   cursor: default;
 }
 
+.c0:hover {
+  color: rgba(#57606a,0.5);
+  cursor: default;
+}
+
 .c0:after {
   display: inline-block;
   margin-left: 4px;

diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -68,7 +68,7 @@ Array [
   outline: none;
   cursor: pointer;
   border-radius: 6px;
-  color: #8c959f;
+  color: #57606a;
   position: absolute;
   top: 16px;
   right: 16px;

diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #8c959f;
+  color: #57606a;
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;

diff --git a/src/__tests__/__snapshots__/Label.test.tsx.snap b/src/__tests__/__snapshots__/Label.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Label respects the "outline" prop 1`] = `
   background-color: #6e7781;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #8c959f;
+  color: #57606a;
   border: 1px solid #d0d7de;
   box-shadow: none;
   background-color: #6e7781;

diff --git a/src/__tests__/__snapshots__/Link.test.tsx.snap b/src/__tests__/__snapshots__/Link.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`Link renders consistently 1`] = `
 
 exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
 .c0 {
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #ffffff;
@@ -143,7 +143,7 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 exports[`Link respectes the "muted" prop 1`] = `
 .c0 {
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
 }

diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin: 0;
   font-size: 12px;
   font-weight: 600;
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
@@ -81,7 +81,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
-  color: #8c959f;
+  color: #57606a;
   text-align: center;
   border-top: 1px solid hsla(210,18%,87%,1);
 }
@@ -102,7 +102,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   background-color: #ffffff;
   border: 0;
   border-bottom: 1px solid hsla(210,18%,87%,1);
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 12px;