diff --git a/.changeset/rotten-dodos-complain.md b/.changeset/rotten-dodos-complain.md new file mode 100644 index 00000000000..7c7a806e775 --- /dev/null +++ b/.changeset/rotten-dodos-complain.md @@ -0,0 +1,5 @@ +--- +"@primer/components": minor +--- + +Add `dark_high_contrast` color scheme diff --git a/.changeset/wise-apes-brake.md b/.changeset/wise-apes-brake.md new file mode 100644 index 00000000000..60c93c32a9b --- /dev/null +++ b/.changeset/wise-apes-brake.md @@ -0,0 +1,7 @@ +--- +"@primer/components": minor +--- + +Add new [functional color variables](https://primer.style/primitives/colors) to the theme object. + + **Tip:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated color variables. diff --git a/.eslintrc.json b/.eslintrc.json index c938b17f26c..56ea1bbb297 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,7 +11,8 @@ "plugin:react-hooks/recommended", "plugin:prettier/recommended", "plugin:github/recommended", - "plugin:github/browser" + "plugin:github/browser", + "plugin:primer-react/recommended" ], "ignorePatterns": [ "node_modules", diff --git a/docs/content/theme-reference.md b/docs/content/theme-reference.md index e4d8fbf5612..7913e378116 100644 --- a/docs/content/theme-reference.md +++ b/docs/content/theme-reference.md @@ -5,4 +5,12 @@ description: The default theme object for Primer React components import {theme} from '@primer/components' + + +See [Theming](/theming) to learn how theming works in Primer React. + + + +Colors in this theme object are imported from [Primer Primitives](https://primer.style/primitives/colors). + 
{JSON.stringify(theme, null, 2)}
diff --git a/docs/content/theming.md b/docs/content/theming.md index b1961257074..1dedac98844 100644 --- a/docs/content/theming.md +++ b/docs/content/theming.md @@ -1,9 +1,8 @@ --- title: Theming +description: Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more. --- -Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more. - ## ThemeProvider To give components access to the theme object, you must add `ThemeProvider` to the root of your application: diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js index 6fd0218ff73..184a6556979 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js @@ -49,7 +49,7 @@ function LiveCode({code, language, noinline}) { - + {children} diff --git a/package-lock.json b/package-lock.json index f05003dfe88..1a4190d230e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "28.5.0", + "version": "29.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4041,9 +4041,9 @@ "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==" }, "@primer/primitives": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.6.4.tgz", - "integrity": "sha512-KKlP7m+94pbuFl3BYycQrmtNhX5+0gK3ftAh5L4a73Ov4FHbgMyVto3Cr0C5tlpvg0760Nisu+e/4T+/uvx8tA==" + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.7.1.tgz", + "integrity": "sha512-kttAUcP3QgT5UbYLeMTKDxPvnAVzywX0xnKPcLkmEVQyhmEBlTO4LSlYIzL5YcKyklHcFRf1426UcGOY9wdWDQ==" }, "@reach/router": { "version": "1.3.4", @@ -14756,6 +14756,11 @@ "prettier-linter-helpers": "^1.0.0" } }, + "eslint-plugin-primer-react": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.4.1.tgz", + "integrity": "sha512-FMYe8ZQvyApHIXOhGUMhfiWTVlanWxuW75WBCnWjlr4hvtOz77GTUo0U/1IStk02zXMUzC37FLbNClbnip3fxw==" + }, "eslint-plugin-react": { "version": "7.24.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz", diff --git a/package.json b/package.json index 86fc5c1ebb6..dbc2ea9a6a4 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "license": "MIT", "dependencies": { "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.6.4", + "@primer/primitives": "4.7.1", "@react-aria/ssr": "3.1.0", "@styled-system/css": "5.1.5", "@styled-system/props": "5.1.5", @@ -56,6 +56,7 @@ "@types/styled-system__theme-get": "5.0.1", "classnames": "2.3.1", "deepmerge": "4.2.2", + "eslint-plugin-primer-react": "0.4.1", "focus-visible": "5.2.0", "styled-system": "5.1.5" }, diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 3a6fdfed1da..0513b60f1ce 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -4,7 +4,7 @@ import {get} from '../constants' export const StyledDivider = styled.div` height: 1px; - background: ${get('colors.selectMenu.borderSecondary')}; + background: ${get('colors.border.muted')}; margin-top: calc(${get('space.2')} - 1px); margin-bottom: ${get('space.2')}; ` diff --git a/src/ActionList/Header.tsx b/src/ActionList/Header.tsx index 6184133581d..9c2ee80d91b 100644 --- a/src/ActionList/Header.tsx +++ b/src/ActionList/Header.tsx @@ -37,15 +37,15 @@ 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.text.secondary')}; + color: ${get('colors.fg.muted')}; ${({variant}) => variant === 'filled' && css` - background: ${get('colors.bg.tertiary')}; + background: ${get('colors.canvas.subtle')}; margin: ${get('space.2')} 0; - border-top: 1px solid ${get('colors.border.tertiary')}; - border-bottom: 1px solid ${get('colors.border.tertiary')}; + border-top: 1px solid ${get('colors.neutral.muted')}; + border-bottom: 1px solid ${get('colors.neutral.muted')}; &:first-child { margin-top: 0; diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 742181afd39..633ae5bd7ca 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -129,9 +129,9 @@ export interface ItemProps extends Omit, ' const getItemVariant = (variant = 'default', disabled?: boolean) => { 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' } } @@ -139,16 +139,16 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => { 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' } } @@ -211,7 +211,7 @@ const StyledItem = styled.div< width: 100%; top: -7px; // NB: This 'get' won’t execute if it’s moved into the arrow function below. - border: 0 solid ${get('colors.selectMenu.borderSecondary')}; + border: 0 solid ${get('colors.border.muted')}; border-top-width: ${({showDivider}) => (showDivider ? `1px` : '0')}; } } @@ -297,7 +297,7 @@ const TrailingContent = styled(ColoredVisualContainer)` ` const DescriptionContainer = styled.span` - color: ${get('colors.text.secondary')}; + 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/ActionList/List.tsx b/src/ActionList/List.tsx index d785cfe4dd4..7c9dcfefad9 100644 --- a/src/ActionList/List.tsx +++ b/src/ActionList/List.tsx @@ -106,7 +106,7 @@ const StyledList = styled.div` &[${hasActiveDescendantAttribute}], &:focus-within { --item-hover-bg-override: none; - --item-hover-divider-border-color-override: ${get('colors.selectMenu.borderSecondary')}; + --item-hover-divider-border-color-override: ${get('colors.border.muted')}; } ` diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx index 2e008016793..a4256e57c21 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -16,7 +16,11 @@ export type AvatarPairProps = BoxProps const AvatarPair = ({children, ...rest}: AvatarPairProps) => { const avatars = React.Children.map(children, (child, i) => { if (!React.isValidElement(child)) return child - return i === 0 ? React.cloneElement(child, {size: 40}) : + return i === 0 ? ( + React.cloneElement(child, {size: 40}) + ) : ( + + ) }) return ( diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index a383f434e47..70ee203bf6f 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -21,7 +21,7 @@ const AvatarStackWrapper = styled.span` flex-shrink: 0; height: 20px; width: 20px; - box-shadow: 0 0 0 1px ${get('colors.bg.canvas')}; + box-shadow: 0 0 0 1px ${get('colors.canvas.default')}; margin-left: -11px; position: relative; overflow: hidden; @@ -118,7 +118,7 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px ${get('colors.bg.canvas')}; + box-shadow: 0 0 0 4px ${get('colors.canvas.default')}; &:first-child { margin-left: 0; } diff --git a/src/BranchName.tsx b/src/BranchName.tsx index 3f061fff3e3..9fbeca0e651 100644 --- a/src/BranchName.tsx +++ b/src/BranchName.tsx @@ -8,8 +8,8 @@ const BranchName = styled.a` padding: 2px 6px; font-size: ${get('fontSizes.0')}; font-family: ${get('fonts.mono')}; - color: ${get('colors.branchName.text')}; - background-color: ${get('colors.branchName.bg')}; + color: ${get('colors.fg.muted')}; + background-color: ${get('colors.accent.subtle')}; border-radius: ${get('radii.2')}; ${COMMON}; ${sx}; diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx index 6e0576cb7a2..15eb8576616 100644 --- a/src/Breadcrumb.tsx +++ b/src/Breadcrumb.tsx @@ -17,7 +17,7 @@ const Wrapper = styled.li` &::after { padding-right: 0.5em; padding-left: 0.5em; - color: ${get('colors.text.disabled')}; + color: ${get('colors.fg.muted')}; font-size: ${get('fontSizes.1')}; content: '/'; } @@ -64,7 +64,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({ className: classnames(props.selected && SELECTED_CLASS, props.className), 'aria-current': props.selected ? 'page' : null }))` - color: ${get('colors.text.link')}; + color: ${get('colors.accent.fg')}; display: inline-block; font-size: ${get('fontSizes.1')}; text-decoration: none; @@ -72,7 +72,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({ text-decoration: underline; } &.selected { - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; pointer-events: none; } ${COMMON} diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 8fe648ba7f5..7080b93204b 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -27,7 +27,7 @@ const Button = styled(ButtonBase)` } &:disabled { - color: ${get('colors.text.disabled')}; + color: ${get('colors.fg.muted')}; background-color: ${get('colors.btn.bg')}; border-color: ${get('colors.btn.border')}; } diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx index f1e2f71dda6..690ec4927f4 100644 --- a/src/Button/ButtonClose.tsx +++ b/src/Button/ButtonClose.tsx @@ -14,14 +14,14 @@ const StyledButton = styled.button` outline: none; cursor: pointer; border-radius: ${get('radii.2')}; - color: ${get('colors.text.secondary')}; + color: ${get('colors.fg.muted')}; &:focus { box-shadow: ${get('shadows.btn.focusShadow')}; } &:hover { - color: ${get('colors.text.link')}; + color: ${get('colors.accent.fg')}; } ${COMMON}; ${LAYOUT}; diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx index 41093665d61..22f2aef8d82 100644 --- a/src/Button/ButtonInvisible.tsx +++ b/src/Button/ButtonInvisible.tsx @@ -5,14 +5,14 @@ import {ComponentProps} from '../utils/types' import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase' const ButtonInvisible = styled(ButtonBase)` - color: ${get('colors.text.link')}; + color: ${get('colors.accent.fg')}; background-color: transparent; border: 0; border-radius: ${get('radii.2')}; box-shadow: none; &:disabled { - color: ${get('colors.text.disabled')}; + color: ${get('colors.fg.muted')}; } &:focus { diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx index cef945b0ab1..6e0db6112de 100644 --- a/src/Button/ButtonTableList.tsx +++ b/src/Button/ButtonTableList.tsx @@ -17,7 +17,7 @@ const ButtonTableList = styled.summary` display: inline-block; padding: 0; font-size: ${get('fontSizes.1')}; - color: ${get('colors.text.secondary')}; + color: ${get('colors.fg.muted')}; text-decoration: none; white-space: nowrap; cursor: pointer; @@ -33,7 +33,7 @@ const ButtonTableList = styled.summary` &:disabled { &, &:hover { - color: rgba(${get('colors.text.secondary')}, 0.5); + color: rgba(${get('colors.fg.muted')}, 0.5); cursor: default; } } diff --git a/src/CircleBadge.tsx b/src/CircleBadge.tsx index c55c7b85df5..be6e6660497 100644 --- a/src/CircleBadge.tsx +++ b/src/CircleBadge.tsx @@ -30,7 +30,7 @@ const CircleBadge = styled.div` display: ${props => (props.inline ? 'inline-flex' : 'flex')}; align-items: center; justify-content: center; - background-color: ${get('colors.bg.canvas')}; + background-color: ${get('colors.canvas.default')}; border-radius: 50%; box-shadow: ${get('shadows.shadow.medium')}; ${COMMON}; diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx index 0dad029ed43..d55a2b86c81 100644 --- a/src/CircleOcticon.tsx +++ b/src/CircleOcticon.tsx @@ -20,7 +20,7 @@ function CircleOcticon(props: CircleOcticonProps) { size={size} borderRadius="50%" borderStyle="solid" - borderColor="border.primary" + borderColor="border.default" > diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx index 1e2941e4880..d862a2e1309 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel.tsx @@ -12,10 +12,10 @@ const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => { return { color: scheme === 'secondary' - ? get('colors.counter.text')(props) + ? get('colors.fg.default')(props) : scheme === 'primary' - ? get('colors.counter.primary.text')(props) - : get('colors.counter.text')(props) + ? get('colors.fg.onEmphasis')(props) + : get('colors.fg.default')(props) } } @@ -23,10 +23,10 @@ const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => { return { backgroundColor: scheme === 'secondary' - ? get('colors.counter.bg')(props) + ? get('colors.neutral.muted')(props) : scheme === 'primary' - ? get('colors.counter.primary.bg')(props) - : get('colors.counter.bg')(props) + ? get('colors.neutral.emphasis')(props) + : get('colors.neutral.muted')(props) } } diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 2549f44fc26..99a88212fcb 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -28,7 +28,7 @@ const DialogBase = styled.div` max-height: 80vh; z-index: 999; margin: 10vh auto; - background-color: ${get('colors.bg.primary')}; + background-color: ${get('colors.canvas.default')}; width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; outline: none; @@ -46,7 +46,7 @@ const DialogBase = styled.div` const DialogHeaderBase = styled(Box)` border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; - border-bottom: 1px solid ${get('colors.border.primary')}; + border-bottom: 1px solid ${get('colors.border.default')}; display: flex; @media screen and (max-width: 750px) { @@ -60,7 +60,7 @@ export type DialogHeaderProps = ComponentProps function DialogHeader({theme, children, backgroundColor = 'gray.1', ...rest}: DialogHeaderProps) { if (React.Children.toArray(children).every(ch => typeof ch === 'string')) { children = ( - + {children} ) @@ -85,7 +85,7 @@ const Overlay = styled.span` content: ' '; background: transparent; z-index: 99; - background: ${get('colors.fade.black50')}; + background: ${get('colors.primer.canvas.backdrop')}; } ` diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 6693f394878..42c8a7e1561 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -65,7 +65,7 @@ const ConfirmationHeader: React.FC = ({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.text.tertiary')}; + color: ${get('colors.fg.muted')}; flex-grow: 1; ` const ConfirmationBody: React.FC = ({children}) => { diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 7f5253f93aa..79190df794a 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -182,7 +182,7 @@ interface StyledDialogProps { const StyledDialog = styled.div` display: flex; flex-direction: column; - background-color: ${get('colors.bg.overlay')}; + background-color: ${get('colors.canvas.overlay')}; box-shadow: ${get('shadows.overlay.shadow')}; min-width: 296px; max-width: calc(100vw - 64px); @@ -297,7 +297,7 @@ const _Dialog = React.forwardRef` background-clip: padding-box; - background-color: ${get('colors.bg.overlay')}; - border: 1px solid ${get('colors.border.overlay')}; + background-color: ${get('colors.canvas.overlay')}; + border: 1px solid ${get('colors.border.default')}; border-radius: ${get('radii.2')}; - box-shadow: ${get('shadows.dropdown.shadow')}; + box-shadow: ${get('shadows.shadow.large')}; left: 0; list-style: none; margin-top: 2px; @@ -83,12 +83,12 @@ const DropdownMenu = styled.ul` &::before { border: 8px solid transparent; - border-bottom-color: ${get('colors.bg.overlay')}; + border-bottom-color: ${get('colors.canvas.overlay')}; } &::after { border: 7px solid transparent; - border-bottom-color: ${get('colors.bg.overlay')}; + border-bottom-color: ${get('colors.canvas.overlay')}; } // stylelint-disable-next-line selector-max-type @@ -104,31 +104,31 @@ const DropdownItem = styled.li` display: block; padding: ${get('space.1')} 10px ${get('space.1')} 15px; overflow: hidden; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-overflow: ellipsis; white-space: nowrap; a { - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-decoration: none; display: block; overflow: hidden; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-overflow: ellipsis; white-space: nowrap; } &:focus, a:focus { - color: ${get('colors.state.hover.primaryText')}; + color: ${get('colors.fg.onEmphasis')}; text-decoration: none; - background-color: ${get('colors.state.hover.primaryBg')}; + background-color: ${get('colors.accent.emphasis')}; } &:hover, &:hover a { - color: ${get('colors.state.hover.primaryText')}; + color: ${get('colors.fg.onEmphasis')}; text-decoration: none; - background-color: ${get('colors.state.hover.primaryBg')}; + background-color: ${get('colors.accent.emphasis')}; outline: none; } ${COMMON}; diff --git a/src/DropdownStyles.ts b/src/DropdownStyles.ts index 47c9a6cd4ed..b93fddb5624 100644 --- a/src/DropdownStyles.ts +++ b/src/DropdownStyles.ts @@ -16,7 +16,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | ' right: -16px; left: auto; border-color: transparent; - border-left-color: ${get('colors.border.overlay')(theme)}; + border-left-color: ${get('colors.border.default')(theme)}; } &::after { @@ -24,7 +24,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | ' right: -14px; left: auto; border-color: transparent; - border-left-color: ${get('colors.border.overlay')(theme)}; + border-left-color: ${get('colors.border.default')(theme)}; } `, e: ` @@ -38,14 +38,14 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | ' 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: ` @@ -63,7 +63,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | ' &::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; } @@ -71,7 +71,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | ' &::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; diff --git a/src/FilterList.tsx b/src/FilterList.tsx index 368ce520e35..463f0fabddc 100644 --- a/src/FilterList.tsx +++ b/src/FilterList.tsx @@ -33,8 +33,8 @@ const FilterListItemBase = styled.a` margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')}; overflow: hidden; font-size: ${get('fontSizes.1')}; - color: ${props => (props.selected ? get('colors.state.selected.primaryText') : get('colors.text.secondary'))}; - background-color: ${props => (props.selected ? get('colors.state.selected.primaryBg') : '')}!important; + 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; white-space: nowrap; @@ -42,11 +42,11 @@ const FilterListItemBase = styled.a` border-radius: ${get('radii.1')}; &:hover { text-decoration: none; - background-color: ${get('colors.bg.tertiary')}; + background-color: ${get('colors.canvas.subtle')}; } &:active { - color: ${get('colors.state.selected.primaryText')}; - background-color: ${get('colors.state.selected.primaryBg')}; + color: ${get('colors.fg.onEmphasis')}; + background-color: ${get('colors.accent.emphasis')}; } .count { float: right; diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index fbd69778848..351415255c8 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -45,7 +45,7 @@ function scrollIntoViewingArea( } const StyledHeader = styled.div` - box-shadow: 0 1px 0 ${get('colors.border.primary')}; + box-shadow: 0 1px 0 ${get('colors.border.default')}; z-index: 1; ` @@ -126,7 +126,7 @@ export function FilteredActionList({ ref={inputRef} block width="auto" - color="text.primary" + color="fg.default" value={filterValue} onChange={onInputChange} onKeyPress={onInputKeyPress} diff --git a/src/Flash.tsx b/src/Flash.tsx index 28151d93b66..8ba22ccb0de 100644 --- a/src/Flash.tsx +++ b/src/Flash.tsx @@ -49,7 +49,7 @@ const Flash = styled.div< SxProp >` position: relative; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; padding: ${get('space.3')}; border-style: solid; border-width: ${props => (props.full ? '1px 0px' : '1px')}; diff --git a/src/Label.tsx b/src/Label.tsx index 29e99b36e0d..f36f2c0cad8 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -7,8 +7,8 @@ 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.label.secondary.text')}; - border: ${get('borderWidths.1')} solid ${get('colors.label.border')}; + color: ${get('colors.fg.muted')}; + border: ${get('borderWidths.1')} solid ${get('colors.border.default')}; box-shadow: none; ${borderColor}; ${COMMON}; @@ -52,7 +52,7 @@ const Label = styled.span< >` display: inline-block; font-weight: ${get('fontWeights.semibold')}; - color: ${get('colors.text.inverse')}; + color: ${get('colors.fg.onEmphasis')}; border-radius: ${get('radii.3')}; &:hover { diff --git a/src/Link.tsx b/src/Link.tsx index 597c6369a16..a382b445527 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -20,11 +20,11 @@ const hoverColor = system({ }) const Link = styled.a` - color: ${props => (props.muted ? get('colors.text.secondary')(props) : get('colors.text.link')(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')}; - ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.text.link')(props)}` : '')}; + ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')}; } &:is(button) { display: inline-block; diff --git a/src/Overlay.tsx b/src/Overlay.tsx index 1f0f932af39..138963589ec 100644 --- a/src/Overlay.tsx +++ b/src/Overlay.tsx @@ -52,7 +52,7 @@ function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y } const StyledOverlay = styled.div` - background-color: ${get('colors.bg.overlay')}; + background-color: ${get('colors.canvas.overlay')}; box-shadow: ${get('shadows.overlay.shadow')}; position: absolute; min-width: 192px; diff --git a/src/Pagehead.tsx b/src/Pagehead.tsx index cdd6b1903fa..85f44c2330f 100644 --- a/src/Pagehead.tsx +++ b/src/Pagehead.tsx @@ -8,7 +8,7 @@ const Pagehead = styled.div` padding-top: ${get('space.4')}; padding-bottom: ${get('space.4')}; margin-bottom: ${get('space.4')}; - border-bottom: 1px solid ${get('colors.border.primary')}; + border-bottom: 1px solid ${get('colors.border.default')}; ${COMMON}; ${sx}; ` diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index e06624703db..dda8ad9d98b 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -11,7 +11,7 @@ const Page = styled.a` padding: 5px 10px; font-style: normal; line-height: 20px; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-align: center; white-space: nowrap; vertical-align: middle; @@ -32,30 +32,30 @@ const Page = styled.a` &:hover, &:focus { text-decoration: none; - border-color: ${get('colors.border.primary')}; + border-color: ${get('colors.border.default')}; outline: 0; transition-duration: 0.1s; } &:active { - border-color: ${get('colors.border.secondary')}; + border-color: ${get('colors.border.muted')}; } &[rel='prev'], &[rel='next'] { - color: ${get('colors.text.link')}; + color: ${get('colors.accent.fg')}; } &[aria-current], &[aria-current]:hover { - color: ${get('colors.state.selected.primaryText')}; - background-color: ${get('colors.state.selected.primaryBg')}; + color: ${get('colors.fg.onEmphasis')}; + background-color: ${get('colors.accent.emphasis')}; border-color: transparent; } &[aria-disabled], &[aria-disabled]:hover { - color: ${get('colors.text.disabled')}; // check + color: ${get('colors.fg.muted')}; // check cursor: default; border-color: transparent; } diff --git a/src/Popover.tsx b/src/Popover.tsx index 53b4885dd2a..cee1b78cf0c 100644 --- a/src/Popover.tsx +++ b/src/Popover.tsx @@ -44,14 +44,14 @@ const Popover = styled.div.attrs(({className, caret}) => { ` const PopoverContent = styled(Box)` - border: 1px solid ${get('colors.border.primary')}; + border: 1px solid ${get('colors.border.default')}; border-radius: ${get('radii.2')}; position: relative; width: 232px; margin-right: auto; margin-left: auto; padding: ${get('space.4')}; - background-color: ${get('colors.bg.overlay')}; + background-color: ${get('colors.canvas.overlay')}; ${COMMON}; ${LAYOUT}; @@ -69,14 +69,14 @@ const PopoverContent = styled(Box)` top: -${get('space.3')}; margin-left: -9px; border: ${get('space.2')} solid transparent; // TODO: solid? - border-bottom-color: ${get('colors.border.overlay')}; + border-bottom-color: ${get('colors.border.default')}; } &::after { top: -14px; margin-left: -${get('space.2')}; border: 7px solid transparent; // todo: solid - border-bottom-color: ${get('colors.bg.overlay')}; + border-bottom-color: ${get('colors.canvas.overlay')}; } // Bottom-oriented carets @@ -91,13 +91,13 @@ const PopoverContent = styled(Box)` &::before { bottom: -${get('space.3')}; - border-top-color: ${get('colors.border.overlay')}; + border-top-color: ${get('colors.border.default')}; } &::after { bottom: -14px; // stylelint-disable-next-line primer/borders - border-top-color: ${get('colors.bg.overlay')}; + border-top-color: ${get('colors.canvas.overlay')}; } } @@ -170,13 +170,13 @@ const PopoverContent = styled(Box)` ${Popover}.caret-pos--right-bottom & { &::before { right: -${get('space.3')}; - border-left-color: ${get('colors.border.overlay')}; + border-left-color: ${get('colors.border.default')}; } &::after { right: -14px; // stylelint-disable-next-line primer/borders - border-left-color: ${get('colors.bg.overlay')}; + border-left-color: ${get('colors.canvas.overlay')}; } } @@ -186,13 +186,13 @@ const PopoverContent = styled(Box)` ${Popover}.caret-pos--left-bottom & { &::before { left: -${get('space.3')}; - border-right-color: ${get('colors.border.overlay')}; + border-right-color: ${get('colors.border.default')}; } &::after { left: -14px; // stylelint-disable-next-line primer/borders - border-right-color: ${get('colors.bg.overlay')}; + border-right-color: ${get('colors.canvas.overlay')}; } } diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index fa584b406b0..afc16df467e 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -26,7 +26,7 @@ type StyledProgressContainerProps = { const ProgressContainer = styled.span` display: ${props => (props.inline ? 'inline-flex' : 'flex')}; overflow: hidden; - background-color: ${get('colors.border.primary')}; + background-color: ${get('colors.border.default')}; border-radius: ${get('radii.1')}; height: ${props => sizeMap[props.barSize || 'default']}; ${COMMON} diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx index 3ed633fb6ff..069134b7de9 100644 --- a/src/SelectMenu/SelectMenuDivider.tsx +++ b/src/SelectMenu/SelectMenuDivider.tsx @@ -8,9 +8,9 @@ const dividerStyles = css` margin: 0; font-size: ${get('fontSizes.0')}; font-weight: ${get('fontWeights.bold')}; - color: ${get('colors.text.tertiary')}; - background-color: ${get('colors.bg.tertiary')}; - border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')}; + color: ${get('colors.fg.muted')}; + background-color: ${get('colors.canvas.subtle')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; ` const SelectMenuDivider = styled.div` diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx index 1e726c2138a..cb30163776f 100644 --- a/src/SelectMenu/SelectMenuFilter.tsx +++ b/src/SelectMenu/SelectMenuFilter.tsx @@ -9,8 +9,8 @@ import {MenuContext} from './SelectMenuContext' const StyledForm = styled.form` padding: ${get('space.3')}; margin: 0; - border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')}; - background-color: ${get('colors.bg.overlay')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; + background-color: ${get('colors.canvas.overlay')}; ${COMMON}; @media (min-width: ${get('breakpoints.0')}) { diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx index 8d977f1a699..3aa5b1dd350 100644 --- a/src/SelectMenu/SelectMenuFooter.tsx +++ b/src/SelectMenu/SelectMenuFooter.tsx @@ -7,9 +7,9 @@ const footerStyles = css` margin-top: -1px; padding: ${get('space.2')} ${get('space.3')}; font-size: ${get('fontSizes.0')}; - color: ${get('colors.text.tertiary')}; + color: ${get('colors.fg.muted')}; text-align: center; - border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; @media (min-width: ${get('breakpoints.0')}) { padding: ${get('space.1')} ${get('space.2')}; diff --git a/src/SelectMenu/SelectMenuHeader.tsx b/src/SelectMenu/SelectMenuHeader.tsx index 19d8784c37b..b6a8174d937 100644 --- a/src/SelectMenu/SelectMenuHeader.tsx +++ b/src/SelectMenu/SelectMenuHeader.tsx @@ -8,7 +8,7 @@ import {ComponentProps} from '../utils/types' // SelectMenu.Modal const SelectMenuTitle = styled.h3` - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; flex: auto; font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; @@ -23,7 +23,7 @@ const StyledHeader = styled.header` padding: ${get('space.6')} ${get('space.4')}; text-align: center; - background-color: ${get('colors.bg.overlay')}; + background-color: ${get('colors.canvas.overlay')}; ${COMMON} ` diff --git a/src/SelectMenu/SelectMenuModal.tsx b/src/SelectMenu/SelectMenuModal.tsx index 615b0c09f46..59feaf3e8b4 100644 --- a/src/SelectMenu/SelectMenuModal.tsx +++ b/src/SelectMenu/SelectMenuModal.tsx @@ -32,7 +32,7 @@ const modalStyles = css` overflow: hidden; // Enables border radius on scrollable child elements pointer-events: auto; flex-direction: column; - background-color: ${get('colors.bg.overlay')}; + background-color: ${get('colors.canvas.overlay')}; border-radius: ${get('radii.2')}; box-shadow: ${get('shadows.shadow.small')}; animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; @@ -42,7 +42,7 @@ const modalStyles = css` max-height: 350px; margin: ${get('space.1')} 0 ${get('space.3')} 0; font-size: ${get('fontSizes.0')}; - border: ${get('borderWidths.1')} solid ${get('colors.border.overlay')}; + border: ${get('borderWidths.1')} solid ${get('colors.border.default')}; border-radius: ${get('radii.2')}; box-shadow: ${get('shadows.shadow.small')}; } @@ -68,7 +68,7 @@ const modalWrapperStyles = css` left: 0; pointer-events: none; content: ''; - background-color: ${get('colors.selectMenu.backdropBg')}; + background-color: ${get('colors.primer.canvas.backdrop')}; @media (min-width: ${get('breakpoints.0')}) { display: none; diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx index 8ef6a67219d..f986d234eaf 100644 --- a/src/SelectMenu/SelectMenuTab.tsx +++ b/src/SelectMenu/SelectMenuTab.tsx @@ -11,11 +11,11 @@ const tabStyles = css` padding: ${get('space.2')} ${get('space.3')}; font-size: ${get('fontSizes.0')}; font-weight: 500; - color: ${get('colors.text.tertiary')}; + color: ${get('colors.fg.muted')}; text-align: center; background-color: transparent; border: 0; - box-shadow: inset 0 -1px 0 ${get('colors.selectMenu.borderSecondary')}; + box-shadow: inset 0 -1px 0 ${get('colors.border.muted')}; @media (min-width: ${get('breakpoints.0')}) { flex: none; @@ -29,17 +29,17 @@ const tabStyles = css` &[aria-selected='true'] { z-index: 1; // Keeps box-shadow visible when hovering color: ${get('colors.text-primary')}; - background-color: ${get('colors.bg.overlay')}; - box-shadow: 0 0 0 1px ${get('colors.selectMenu.borderSecondary')}; + background-color: ${get('colors.canvas.overlay')}; + box-shadow: 0 0 0 1px ${get('colors.border.muted')}; @media (min-width: ${get('breakpoints.0')}) { - border-color: ${get('colors.selectMenu.borderSecondary')}; + border-color: ${get('colors.border.muted')}; box-shadow: none; } } &:focus { - background-color: ${get('colors.state.hover.secondaryBg')}; + background-color: ${get('colors.neutral.subtle')}; } ` diff --git a/src/SelectMenu/SelectMenuTabPanel.tsx b/src/SelectMenu/SelectMenuTabPanel.tsx index 9c973968c67..1d30ae55915 100644 --- a/src/SelectMenu/SelectMenuTabPanel.tsx +++ b/src/SelectMenu/SelectMenuTabPanel.tsx @@ -7,7 +7,7 @@ import {MenuContext} from './SelectMenuContext' import SelectMenuList from './SelectMenuList' const TabPanelBase = styled.div` - border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; ${COMMON} ${sx}; ` diff --git a/src/SideNav.tsx b/src/SideNav.tsx index 42e37484852..bbe937a8d4e 100644 --- a/src/SideNav.tsx +++ b/src/SideNav.tsx @@ -28,7 +28,7 @@ function SideNavBase({variant, className, bordered, children, ...props}: SideNav props.bordered && @@ -64,14 +64,14 @@ type StyledSideNavLinkProps = { // used for variant normal hover, focus pseudo selectors const CommonAccessibilityVariantNormalStyles = css` - background-color: ${get('colors.state.hover.secondaryBg')}; + background-color: ${get('colors.neutral.subtle')}; outline: none; text-decoration: none; ` // used for light weight hover, focus pseudo selectors const CommonAccessibilityVariantLightWeightStyles = css` - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-decoration: none; outline: none; ` @@ -104,10 +104,10 @@ const SideNavLink = styled(Link).attrs(props => { } ${SideNav}.variant-normal > & { - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; padding: ${get('space.3')}; border: 0; - border-top: ${get('borderWidths.1')} solid ${get('colors.border.secondary')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; &:first-child { border-top: 0; @@ -138,7 +138,7 @@ const SideNavLink = styled(Link).attrs(props => { &:focus { ${CommonAccessibilityVariantNormalStyles} - box-shadow: ${get('shadows.state.focus.shadow')}; + box-shadow: ${get('shadows.primer.shadow.focus')}; z-index: 1; } @@ -148,14 +148,14 @@ const SideNavLink = styled(Link).attrs(props => { // Bar on the left &::before { - background-color: ${get('colors.sidenav.borderActive')}; + background-color: ${get('colors.primer.border.active')}; } } } ${SideNav}.variant-lightweight > & { padding: ${get('space.1')} 0; - color: ${get('colors.text.link')}; + color: ${get('colors.accent.fg')}; &:hover { ${CommonAccessibilityVariantLightWeightStyles} @@ -163,13 +163,13 @@ const SideNavLink = styled(Link).attrs(props => { &:focus { ${CommonAccessibilityVariantLightWeightStyles} - box-shadow: ${get('shadows.state.focus.shadow')}; + box-shadow: ${get('shadows.primer.shadow.focus')}; z-index: 1; } &[aria-current='page'], &[aria-selected='true'] { - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; font-weight: ${get('fontWeights.semibold')}; } } diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx index ce6ec430dac..9628fef32dc 100644 --- a/src/StateLabel.tsx +++ b/src/StateLabel.tsx @@ -79,7 +79,7 @@ const StateLabelBase = styled.span` align-items: center; font-weight: ${get('fontWeights.bold')}; line-height: 16px; - color: ${get('colors.bg.primary')}; + color: ${get('colors.canvas.default')}; text-align: center; border-radius: ${get('radii.3')}; border-width: 1px; diff --git a/src/SubNav.tsx b/src/SubNav.tsx index f00b3615d74..e0f0a889c80 100644 --- a/src/SubNav.tsx +++ b/src/SubNav.tsx @@ -77,19 +77,19 @@ const SubNavLink = styled.a.attrs(props => ({ font-size: ${get('fontSizes.1')}; line-height: 20px; //custom value for SubNav min-height: 34px; //custom value for SubNav - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-align: center; text-decoration: none; - border-top: 1px solid ${get('colors.border.primary')}; - border-bottom: 1px solid ${get('colors.border.primary')}; - border-right: 1px solid ${get('colors.border.primary')}; + border-top: 1px solid ${get('colors.border.default')}; + border-bottom: 1px solid ${get('colors.border.default')}; + border-right: 1px solid ${get('colors.border.default')}; display: flex; align-items: center; &:first-of-type { border-top-left-radius: ${get('radii.2')}; border-bottom-left-radius: ${get('radii.2')}; - border-left: 1px solid ${get('colors.border.primary')}; + border-left: 1px solid ${get('colors.border.default')}; } &:last-of-type { @@ -100,20 +100,20 @@ const SubNavLink = styled.a.attrs(props => ({ &:hover, &:focus { text-decoration: none; - background-color: ${get('colors.bg.tertiary')}; + background-color: ${get('colors.canvas.subtle')}; transition: 0.2s ease; .SubNav-octicon { - color: ${get('colors.icon.secondary')}; + color: ${get('colors.fg.muted')}; } } &.selected { - color: ${get('colors.state.selected.primaryText')}; - background-color: ${get('colors.state.selected.primaryBg')}; - border-color: ${get('colors.state.selected.primaryBorder')}; + color: ${get('colors.fg.onEmphasis')}; + background-color: ${get('colors.accent.emphasis')}; + border-color: ${get('colors.accent.emphasis')}; .SubNav-octicon { - color: ${get('colors.state.selected.primaryText')}; + color: ${get('colors.fg.onEmphasis')}; } } diff --git a/src/TabNav.tsx b/src/TabNav.tsx index d8368f961ac..d1ff46eeeae 100644 --- a/src/TabNav.tsx +++ b/src/TabNav.tsx @@ -12,7 +12,7 @@ const SELECTED_CLASS = 'selected' const TabNavBase = styled.div` margin-top: 0; - border-bottom: 1px solid ${get('colors.border.primary')}; + border-bottom: 1px solid ${get('colors.border.default')}; ${COMMON} ${sx} ` @@ -47,7 +47,7 @@ const TabNavLink = styled.a.attrs(props => ({ padding: 8px 12px; font-size: ${get('fontSizes.1')}; line-height: 20px; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-decoration: none; background-color: transparent; border: 1px solid transparent; @@ -55,16 +55,16 @@ const TabNavLink = styled.a.attrs(props => ({ &:hover, &:focus { - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; text-decoration: none; } &.selected { - color: ${get('colors.text.primary')}; - border-color: ${get('colors.border.primary')}; + color: ${get('colors.fg.default')}; + border-color: ${get('colors.border.default')}; border-top-right-radius: ${get('radii.2')}; border-top-left-radius: ${get('radii.2')}; - background-color: ${get('colors.bg.canvas')}; + background-color: ${get('colors.canvas.default')}; } ${COMMON}; diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 45cc2460a77..987d13f61f5 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -53,14 +53,14 @@ const Wrapper = styled.span` min-height: 34px; font-size: ${get('fontSizes.1')}; line-height: 20px; - color: ${get('colors.text.primary')}; + color: ${get('colors.fg.default')}; vertical-align: middle; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. - border: 1px solid ${get('colors.border.primary')}; + border: 1px solid ${get('colors.border.default')}; border-radius: ${get('radii.2')}; outline: none; - box-shadow: ${get('shadows.shadow.inset')}; + box-shadow: ${get('shadows.primer.shadow.inset')}; ${props => { if (props.hasIcon) { @@ -76,28 +76,28 @@ const Wrapper = styled.span` .TextInput-icon { align-self: center; - color: ${get('colors.icon.tertiary')}; + color: ${get('colors.fg.muted')}; margin: 0 ${get('space.2')}; flex-shrink: 0; } &:focus-within { - border-color: ${get('colors.state.focus.border')}; - box-shadow: ${get('shadows.state.focus.shadow')}; + border-color: ${get('colors.accent.emphasis')}; + box-shadow: ${get('shadows.primer.shadow.focus')}; } ${props => props.contrast && css` - background-color: ${get('colors.input.contrastBg')}; + background-color: ${get('colors.canvas.inset')}; `} ${props => props.disabled && css` - color: ${get('colors.text.secondary')}; + color: ${get('colors.fg.muted')}; background-color: ${get('colors.input.disabledBg')}; - border-color: ${get('colors.input.disabledBorder')}; + border-color: ${get('colors.border.default')}; `} ${props => diff --git a/src/Timeline.tsx b/src/Timeline.tsx index 49858f45868..20ae97b66ae 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -42,7 +42,7 @@ const TimelineItem = styled(Box).attrs(props => ({ display: block; width: 2px; content: ''; - background-color: ${get('colors.border.secondary')}; + background-color: ${get('colors.border.muted')}; } ${props => @@ -58,8 +58,8 @@ const TimelineItem = styled(Box).attrs(props => ({ height: 16px; margin-top: ${get('space.2')}; margin-bottom: ${get('space.2')}; - color: ${get('colors.icon.tertiary')}; - background-color: ${get('colors.bg.canvas')}; + color: ${get('colors.fg.muted')}; + background-color: ${get('colors.canvas.default')}; border: 0; } `} @@ -80,9 +80,9 @@ const TimelineBadge = (props: TimelineBadgeProps) => { borderRadius="50%" borderWidth="2px" borderStyle="solid" - borderColor="bg.canvas" + borderColor="canvas.default" overflow="hidden" - color="icon.secondary" + color="fg.muted" bg="timeline.badgeBg" width="32px" height="32px" @@ -102,7 +102,7 @@ const TimelineBody = styled(Box)` min-width: 0; max-width: 100%; margin-top: ${get('space.1')}; - color: ${get('colors.timeline.text')}; + color: ${get('colors.fg.muted')}; flex: auto; font-size: ${get('fontSizes.1')}; ${sx}; @@ -115,9 +115,9 @@ const TimelineBreak = styled(Box)` margin: 0; margin-bottom: -${get('space.3')}; margin-left: 0; - background-color: ${get('colors.bg.canvas')}; + background-color: ${get('colors.canvas.default')}; border: 0; - border-top: ${get('space.1')} solid ${get('colors.border.primary')}; + border-top: ${get('space.1')} solid ${get('colors.border.default')}; ${sx}; ` diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 9bd9b8cc573..49be90525f4 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -14,7 +14,7 @@ const TooltipBase = styled.span` display: none; width: 0px; height: 0px; - color: ${get('colors.tooltip.bg')}; + color: ${get('colors.neutral.emphasisPlus')}; pointer-events: none; content: ''; border: 6px solid transparent; @@ -28,7 +28,7 @@ const TooltipBase = styled.span` padding: 0.5em 0.75em; font: normal normal 11px/1.5 ${get('fonts.normal')}; -webkit-font-smoothing: subpixel-antialiased; - color: ${get('colors.tooltip.text')}; + color: ${get('colors.fg.onEmphasis')}; text-align: center; text-decoration: none; text-shadow: none; @@ -38,7 +38,7 @@ const TooltipBase = styled.span` white-space: pre; pointer-events: none; content: attr(aria-label); - background: ${get('colors.tooltip.bg')}; + background: ${get('colors.neutral.emphasisPlus')}; border-radius: ${get('radii.1')}; opacity: 0; } @@ -101,7 +101,7 @@ const TooltipBase = styled.span` right: 50%; bottom: -7px; margin-right: -6px; - border-bottom-color: ${get('colors.tooltip.bg')}; + border-bottom-color: ${get('colors.neutral.emphasisPlus')}; } } @@ -132,7 +132,7 @@ const TooltipBase = styled.span` right: 50%; bottom: auto; margin-right: -6px; - border-top-color: ${get('colors.tooltip.bg')}; + border-top-color: ${get('colors.neutral.emphasisPlus')}; } } @@ -168,7 +168,7 @@ const TooltipBase = styled.span` bottom: 50%; left: -7px; margin-top: -6px; - border-left-color: ${get('colors.tooltip.bg')}; + border-left-color: ${get('colors.neutral.emphasisPlus')}; } } @@ -186,7 +186,7 @@ const TooltipBase = styled.span` right: -7px; bottom: 50%; margin-top: -6px; - border-right-color: ${get('colors.tooltip.bg')}; + border-right-color: ${get('colors.neutral.emphasisPlus')}; } } diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx index 3f16fcb6595..e2cf2406e7e 100644 --- a/src/UnderlineNav.tsx +++ b/src/UnderlineNav.tsx @@ -13,7 +13,7 @@ const SELECTED_CLASS = 'selected' const UnderlineNavBase = styled.nav` display: flex; justify-content: space-between; - border-bottom: 1px solid ${get('colors.border.secondary')}; + border-bottom: 1px solid ${get('colors.border.muted')}; &.UnderlineNav--right { justify-content: flex-end; @@ -74,29 +74,29 @@ const UnderlineNavLink = styled.a.attrs(props => ({ margin-right: ${get('space.3')}; font-size: ${get('fontSizes.1')}; line-height: ${get('lineHeights.default')}; - color: ${get('colors.underlinenav.text')}; + color: ${get('colors.fg.default')}; text-align: center; border-bottom: 2px solid transparent; text-decoration: none; &:hover, &:focus { - color: ${get('colors.underlinenav.textHover')}; + color: ${get('colors.fg.default')}; text-decoration: none; - border-bottom-color: ${get('colors.border.tertiary')}; + border-bottom-color: ${get('colors.neutral.muted')}; transition: 0.2s ease; .UnderlineNav-octicon { - color: ${get('colors.text.tertiary')}; + color: ${get('colors.fg.muted')}; } } &.selected { - color: ${get('colors.underlinenav.textActive')}; - border-bottom-color: ${get('colors.underlinenav.borderActive')}; + color: ${get('colors.fg.default')}; + border-bottom-color: ${get('colors.primer.border.active')}; .UnderlineNav-octicon { - color: ${get('colors.underlinenav.iconActive')}; + color: ${get('colors.fg.default')}; } } diff --git a/src/__tests__/BorderBox.tsx b/src/__tests__/BorderBox.tsx index 2982d51ce92..cb0e35dd3c9 100644 --- a/src/__tests__/BorderBox.tsx +++ b/src/__tests__/BorderBox.tsx @@ -23,7 +23,7 @@ describe('BorderBox', () => { }) it('renders borders', () => { - expect(render()).toHaveStyleRule( + expect(render()).toHaveStyleRule( 'border-color', theme.colorSchemes.light.colors.border?.success ) diff --git a/src/__tests__/CircleOcticon.tsx b/src/__tests__/CircleOcticon.tsx index 819957f769b..637e80d48ee 100644 --- a/src/__tests__/CircleOcticon.tsx +++ b/src/__tests__/CircleOcticon.tsx @@ -38,7 +38,7 @@ describe('CircleOcticon', () => { }) it('respects the bg prop', () => { - expect(render()).toHaveStyleRule( + expect(render()).toHaveStyleRule( 'background-color', theme.colorSchemes.light.colors.bg?.danger ) diff --git a/src/__tests__/Link.tsx b/src/__tests__/Link.tsx index 733e932c1d3..b2c4ba26dcf 100644 --- a/src/__tests__/Link.tsx +++ b/src/__tests__/Link.tsx @@ -43,6 +43,6 @@ describe('Link', () => { }) it('respectes the "color" prop when "muted" prop is also passed', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap index a591902ba47..5f6f42ce4d7 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap @@ -11,7 +11,7 @@ exports[`Pagination renders consistently 1`] = ` padding: 5px 10px; font-style: normal; line-height: 20px; - color: #24292e; + color: #24292f; text-align: center; white-space: nowrap; vertical-align: middle; @@ -37,31 +37,31 @@ exports[`Pagination renders consistently 1`] = ` .c2:focus { -webkit-text-decoration: none; text-decoration: none; - border-color: #e1e4e8; + border-color: #d0d7de; outline: 0; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .c2:active { - border-color: hsla(214,13%,93%,1); + border-color: hsla(210,18%,87%,1); } .c2[rel='prev'], .c2[rel='next'] { - color: #0366d6; + color: #0969da; } .c2[aria-current], .c2[aria-current]:hover { color: #ffffff; - background-color: #0366d6; + background-color: #0969da; border-color: transparent; } .c2[aria-disabled], .c2[aria-disabled]:hover { - color: #959da5; + color: #57606a; cursor: default; border-color: transparent; } diff --git a/src/__tests__/PointerBox.tsx b/src/__tests__/PointerBox.tsx index 8ba72c2e081..2e54ca7509a 100644 --- a/src/__tests__/PointerBox.tsx +++ b/src/__tests__/PointerBox.tsx @@ -26,10 +26,10 @@ describe('PointerBox', () => { }) it('passes the "borderColor" prop to both and ', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) it('passes the "bg" prop to both and ', () => { - expect(render()).toMatchSnapshot() + expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/Position.tsx b/src/__tests__/Position.tsx index ff1cf22f65b..f6e5d0cc5af 100644 --- a/src/__tests__/Position.tsx +++ b/src/__tests__/Position.tsx @@ -32,7 +32,7 @@ describe('position components', () => { it('can render other components with the as prop', () => { const result = render( - + ) expect(result).toHaveStyleRule('position', 'absolute') expect(result).toHaveStyleRule('border-width', '1px') @@ -60,7 +60,7 @@ describe('position components', () => { it('can render other components with the as prop', () => { const result = render( - + ) expect(result).toHaveStyleRule('position', 'fixed') expect(result).toHaveStyleRule('border-width', '1px') @@ -84,7 +84,7 @@ describe('position components', () => { it('can render other components with the as prop', () => { const result = render( - + ) expect(result).toHaveStyleRule('position', 'relative') expect(result).toHaveStyleRule('border-width', '1px') @@ -108,7 +108,7 @@ describe('position components', () => { it('can render other components with the as prop', () => { const result = render( - + ) expect(result).toHaveStyleRule('position', 'sticky') expect(result).toHaveStyleRule('border-width', '1px') diff --git a/src/__tests__/ThemeProvider.tsx b/src/__tests__/ThemeProvider.tsx index ce8b136dfc8..e60d13d70bf 100644 --- a/src/__tests__/ThemeProvider.tsx +++ b/src/__tests__/ThemeProvider.tsx @@ -65,7 +65,7 @@ it('respects theme prop', () => { it('has default theme', () => { render( - + Hello diff --git a/src/__tests__/__snapshots__/ActionList.tsx.snap b/src/__tests__/__snapshots__/ActionList.tsx.snap index 5d1308e0c23..d35d67f8572 100644 --- a/src/__tests__/__snapshots__/ActionList.tsx.snap +++ b/src/__tests__/__snapshots__/ActionList.tsx.snap @@ -14,7 +14,7 @@ exports[`ActionList renders consistently 1`] = ` .c0[data-has-active-descendant], .c0:focus-within { --item-hover-bg-override: none; - --item-hover-divider-border-color-override: hsla(214,13%,93%,1); + --item-hover-divider-border-color-override: hsla(210,18%,87%,1); }
, "container":
@@ -257,7 +257,7 @@ Object { style="position: relative; z-index: 1;" >
@@ -55,7 +55,7 @@ exports[`Caret renders cardinal directions 2`] = ` @@ -86,7 +86,7 @@ exports[`Caret renders cardinal directions 3`] = ` @@ -117,7 +117,7 @@ exports[`Caret renders cardinal directions 4`] = ` @@ -148,7 +148,7 @@ exports[`Caret renders cardinal directions 5`] = ` @@ -179,7 +179,7 @@ exports[`Caret renders cardinal directions 6`] = ` @@ -210,7 +210,7 @@ exports[`Caret renders cardinal directions 7`] = ` @@ -241,7 +241,7 @@ exports[`Caret renders cardinal directions 8`] = ` @@ -272,7 +272,7 @@ exports[`Caret renders cardinal directions 9`] = ` @@ -303,7 +303,7 @@ exports[`Caret renders cardinal directions 10`] = ` @@ -334,7 +334,7 @@ exports[`Caret renders cardinal directions 11`] = ` @@ -365,7 +365,7 @@ exports[`Caret renders cardinal directions 12`] = ` diff --git a/src/__tests__/__snapshots__/CircleBadge.tsx.snap b/src/__tests__/__snapshots__/CircleBadge.tsx.snap index 110629fca65..c1b358fecbb 100644 --- a/src/__tests__/__snapshots__/CircleBadge.tsx.snap +++ b/src/__tests__/__snapshots__/CircleBadge.tsx.snap @@ -46,7 +46,7 @@ exports[`CircleBadge renders consistently 1`] = ` justify-content: center; background-color: #ffffff; border-radius: 50%; - box-shadow: 0 3px 6px rgba(149,157,165,0.15); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); width: 96px; height: 96px; } @@ -77,7 +77,7 @@ exports[`CircleBadge respects the inline prop 1`] = ` justify-content: center; background-color: #ffffff; border-radius: 50%; - box-shadow: 0 3px 6px rgba(149,157,165,0.15); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); width: 96px; height: 96px; } @@ -103,7 +103,7 @@ exports[`CircleBadge respects the variant prop 1`] = ` justify-content: center; background-color: #ffffff; border-radius: 50%; - box-shadow: 0 3px 6px rgba(149,157,165,0.15); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); width: 128px; height: 128px; } @@ -129,7 +129,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = ` justify-content: center; background-color: #ffffff; border-radius: 50%; - box-shadow: 0 3px 6px rgba(149,157,165,0.15); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); width: 20px; height: 20px; } diff --git a/src/__tests__/__snapshots__/CircleOcticon.tsx.snap b/src/__tests__/__snapshots__/CircleOcticon.tsx.snap index d156ef53572..3ca9e0cfe9b 100644 --- a/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +++ b/src/__tests__/__snapshots__/CircleOcticon.tsx.snap @@ -8,7 +8,7 @@ exports[`CircleOcticon renders consistently 1`] = ` border-width: 0; border-radius: 50%; border-style: solid; - border-color: #e1e4e8; + border-color: #d0d7de; } .c1 { diff --git a/src/__tests__/__snapshots__/CounterLabel.tsx.snap b/src/__tests__/__snapshots__/CounterLabel.tsx.snap index f1cbb169782..0e2e4f2f9a0 100644 --- a/src/__tests__/__snapshots__/CounterLabel.tsx.snap +++ b/src/__tests__/__snapshots__/CounterLabel.tsx.snap @@ -8,8 +8,8 @@ exports[`CounterLabel renders consistently 1`] = ` font-weight: 600; line-height: 1; border-radius: 20px; - color: #24292e; - background-color: rgba(209,213,218,0.5); + color: #24292f; + background-color: rgba(175,184,193,0.2); } .c0:empty { diff --git a/src/__tests__/__snapshots__/Dialog.tsx.snap b/src/__tests__/__snapshots__/Dialog.tsx.snap index ef58dbb482b..4add54b6e7e 100644 --- a/src/__tests__/__snapshots__/Dialog.tsx.snap +++ b/src/__tests__/__snapshots__/Dialog.tsx.snap @@ -5,14 +5,14 @@ exports[`Dialog Dialog.Header renders consistently 1`] = ` font-size: 14px; font-weight: 600; font-family: sans-serif; - color: #24292e; + color: #24292f; } .c0 { padding: 16px; background-color: #f6f8fa; border-radius: 6px 6px 0px 0px; - border-bottom: 1px solid #e1e4e8; + border-bottom: 1px solid #d0d7de; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -30,7 +30,7 @@ exports[`Dialog Dialog.Header renders consistently 1`] = ` > `; exports[`Link respectes the "muted" prop 1`] = ` .c0 { - color: #586069; + color: #57606a; -webkit-text-decoration: none; text-decoration: none; } @@ -151,7 +151,7 @@ exports[`Link respectes the "muted" prop 1`] = ` .c0:hover { -webkit-text-decoration: none; text-decoration: none; - color: #0366d6; + color: #0969da; } .c0:is(button) { @@ -179,7 +179,7 @@ exports[`Link respectes the "muted" prop 1`] = ` exports[`Link respects hoverColor prop 1`] = ` .c0 { - color: #0366d6; + color: #0969da; -webkit-text-decoration: none; text-decoration: none; } @@ -187,7 +187,7 @@ exports[`Link respects hoverColor prop 1`] = ` .c0:hover { -webkit-text-decoration: underline; text-decoration: underline; - color: #0366d6; + color: #0969da; } .c0:is(button) { diff --git a/src/__tests__/__snapshots__/Pagehead.tsx.snap b/src/__tests__/__snapshots__/Pagehead.tsx.snap index 1a5d4e7cc8a..ebfe2fecc34 100644 --- a/src/__tests__/__snapshots__/Pagehead.tsx.snap +++ b/src/__tests__/__snapshots__/Pagehead.tsx.snap @@ -6,7 +6,7 @@ exports[`Pagehead renders consistently 1`] = ` padding-top: 24px; padding-bottom: 24px; margin-bottom: 24px; - border-bottom: 1px solid #e1e4e8; + border-bottom: 1px solid #d0d7de; }
and 1`] = ` .c0 { - background-color: #ffeef0; + background-color: #FFEBE9; border-width: 1px; border-style: solid; - border-color: #e1e4e8; + border-color: #d0d7de; border-radius: 6px; position: relative; } @@ -31,12 +31,12 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` > @@ -46,7 +46,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` exports[`PointerBox passes the "borderColor" prop to both and 1`] = ` .c0 { - border-color: #d73a49; + border-color: #cf222e; border-width: 1px; border-style: solid; border-radius: 6px; @@ -79,7 +79,7 @@ exports[`PointerBox passes the "borderColor" prop to both and @@ -91,7 +91,7 @@ exports[`PointerBox renders a in with relative positioning 1 .c0 { border-width: 1px; border-style: solid; - border-color: #e1e4e8; + border-color: #d0d7de; border-radius: 6px; position: relative; } @@ -122,7 +122,7 @@ exports[`PointerBox renders a in with relative positioning 1 @@ -134,7 +134,7 @@ exports[`PointerBox renders consistently 1`] = ` .c0 { border-width: 1px; border-style: solid; - border-color: #e1e4e8; + border-color: #d0d7de; border-radius: 6px; position: relative; } @@ -165,7 +165,7 @@ exports[`PointerBox renders consistently 1`] = ` diff --git a/src/__tests__/__snapshots__/Popover.tsx.snap b/src/__tests__/__snapshots__/Popover.tsx.snap index f00886250e1..07ec53303e0 100644 --- a/src/__tests__/__snapshots__/Popover.tsx.snap +++ b/src/__tests__/__snapshots__/Popover.tsx.snap @@ -8,7 +8,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -30,7 +30,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -54,7 +54,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -147,7 +147,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -161,7 +161,7 @@ exports[`Popover Popover.Content renders consistently 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -215,7 +215,7 @@ exports[`Popover renders consistently 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -237,7 +237,7 @@ exports[`Popover renders consistently 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -261,7 +261,7 @@ exports[`Popover renders consistently 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -354,7 +354,7 @@ exports[`Popover renders consistently 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -368,7 +368,7 @@ exports[`Popover renders consistently 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -422,7 +422,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -444,7 +444,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -468,7 +468,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -561,7 +561,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -575,7 +575,7 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -778,7 +778,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -800,7 +800,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -824,7 +824,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -917,7 +917,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -931,7 +931,7 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -1134,7 +1134,7 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -1156,7 +1156,7 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -1180,7 +1180,7 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -1273,7 +1273,7 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -1287,7 +1287,7 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -1490,7 +1490,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -1512,7 +1512,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -1536,7 +1536,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -1629,7 +1629,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -1643,7 +1643,7 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -1846,7 +1846,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -1868,7 +1868,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -1892,7 +1892,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -1985,7 +1985,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -1999,7 +1999,7 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -2202,7 +2202,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -2224,7 +2224,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -2248,7 +2248,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -2341,7 +2341,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -2355,7 +2355,7 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -2558,7 +2558,7 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -2580,7 +2580,7 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -2604,7 +2604,7 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -2697,7 +2697,7 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -2711,7 +2711,7 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -2914,7 +2914,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -2936,7 +2936,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -2960,7 +2960,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -3053,7 +3053,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -3067,7 +3067,7 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -3270,7 +3270,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -3292,7 +3292,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -3316,7 +3316,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -3409,7 +3409,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -3423,7 +3423,7 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -3626,7 +3626,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -3648,7 +3648,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -3672,7 +3672,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -3765,7 +3765,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -3779,7 +3779,7 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -3982,7 +3982,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -4004,7 +4004,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -4028,7 +4028,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -4121,7 +4121,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -4135,7 +4135,7 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, @@ -4338,7 +4338,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` } .c2 { - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; position: relative; width: 232px; @@ -4360,7 +4360,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` top: -16px; margin-left: -9px; border: 8px solid transparent; - border-bottom-color: #e1e4e8; + border-bottom-color: #d0d7de; } .c2::after { @@ -4384,7 +4384,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` .c0.caret-pos--bottom-right .c2::before, .c0.caret-pos--bottom-left .c2::before { bottom: -16px; - border-top-color: #e1e4e8; + border-top-color: #d0d7de; } .c0.caret-pos--bottom .c2::after, @@ -4477,7 +4477,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` .c0.caret-pos--right-top .c2::before, .c0.caret-pos--right-bottom .c2::before { right: -16px; - border-left-color: #e1e4e8; + border-left-color: #d0d7de; } .c0.caret-pos--right .c2::after, @@ -4491,7 +4491,7 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` .c0.caret-pos--left-top .c2::before, .c0.caret-pos--left-bottom .c2::before { left: -16px; - border-right-color: #e1e4e8; + border-right-color: #d0d7de; } .c0.caret-pos--left .c2::after, diff --git a/src/__tests__/__snapshots__/ProgressBar.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.tsx.snap index 655539f2ee8..243396d5860 100644 --- a/src/__tests__/__snapshots__/ProgressBar.tsx.snap +++ b/src/__tests__/__snapshots__/ProgressBar.tsx.snap @@ -3,7 +3,7 @@ exports[`ProgressBar renders consistently 1`] = ` .c1 { width: 0; - background-color: #28a745; + background-color: #2da44e; } .c0 { @@ -12,7 +12,7 @@ exports[`ProgressBar renders consistently 1`] = ` display: -ms-flexbox; display: flex; overflow: hidden; - background-color: #e1e4e8; + background-color: #d0d7de; border-radius: 3px; height: 8px; } @@ -29,7 +29,7 @@ exports[`ProgressBar renders consistently 1`] = ` exports[`ProgressBar respects the "progress" prop 1`] = ` .c1 { width: 80%; - background-color: #28a745; + background-color: #2da44e; } .c0 { @@ -38,7 +38,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = ` display: -ms-flexbox; display: flex; overflow: hidden; - background-color: #e1e4e8; + background-color: #d0d7de; border-radius: 3px; height: 8px; } diff --git a/src/__tests__/__snapshots__/SelectMenu.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.tsx.snap index 0fa494a034f..cdaa899d40c 100644 --- a/src/__tests__/__snapshots__/SelectMenu.tsx.snap +++ b/src/__tests__/__snapshots__/SelectMenu.tsx.snap @@ -23,10 +23,10 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` text-decoration: none; text-align: center; font-size: 14px; - color: #24292e; - background-color: #fafbfc; - border: 1px solid rgba(27,31,35,0.15); - box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + color: #24292f; + background-color: #f6f8fa; + border: 1px solid rgba(27,31,36,0.15); + box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c1:hover { @@ -48,23 +48,23 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` .c1:hover { background-color: #f3f4f6; - border-color: rgba(27,31,35,0.15); + border-color: rgba(27,31,36,0.15); } .c1:focus { - border-color: rgba(27,31,35,0.15); - box-shadow: 0 0 0 3px rgba(3,102,214,0.3); + border-color: rgba(27,31,36,0.15); + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); } .c1:active { background-color: hsla(220,14%,94%,1); - box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15); + box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15); } .c1:disabled { - color: #959da5; - background-color: #fafbfc; - border-color: rgba(27,31,35,0.15); + color: #57606a; + background-color: #f6f8fa; + border-color: rgba(27,31,36,0.15); } .c6 { @@ -72,18 +72,18 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` margin: 0; font-size: 12px; font-weight: 600; - color: #6a737d; + color: #57606a; background-color: #f6f8fa; - border-bottom: 1px solid hsla(214,13%,93%,1); + border-bottom: 1px solid hsla(210,18%,87%,1); } .c7 { margin-top: -1px; padding: 8px 16px; font-size: 12px; - color: #6a737d; + color: #57606a; text-align: center; - border-top: 1px solid hsla(214,13%,93%,1); + border-top: 1px solid hsla(210,18%,87%,1); } .c5 { @@ -101,8 +101,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` cursor: pointer; background-color: #ffffff; border: 0; - border-bottom: 1px solid hsla(214,13%,93%,1); - color: #586069; + border-bottom: 1px solid hsla(210,18%,87%,1); + color: #57606a; -webkit-text-decoration: none; text-decoration: none; font-size: 12px; @@ -143,7 +143,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` .c5[aria-checked='true'] { font-weight: 500; - color: #24292e; + color: #24292f; } .c5[aria-checked='true'] .SelectMenu-selected-icon { @@ -185,7 +185,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` flex-direction: column; background-color: #ffffff; border-radius: 6px; - box-shadow: 0 1px 0 rgba(27,31,35,0.04); + box-shadow: 0 1px 0 rgba(27,31,36,0.04); -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; width: 300px; @@ -217,7 +217,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` left: 0; pointer-events: none; content: ''; - background-color: rgba(27,31,35,0.5); + background-color: rgba(27,31,36,0.5); } .c0 > summary { @@ -249,33 +249,33 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` .c5:hover, .c5:active, .c5:focus { - background-color: #f6f8fa; + background-color: rgba(234,238,242,0.5); } } @media (hover:none) { .c5 { - -webkit-tap-highlight-color: rgba(209,213,218,0.5); + -webkit-tap-highlight-color: rgba(175,184,193,0.5); } .c5:focus, .c5:active { - background-color: #fafbfc; + background-color: #f6f8fa; } } @media (hover:hover) { .c4 .SelectMenuTab:focus { - background-color: #dbedff; + background-color: #b6e3ff; } .c4 .SelectMenuTab:not([aria-checked='true']):hover { - color: #24292e; + color: #24292f; background-color: #f6f8fa; } .c4 .SelectMenuTab:not([aria-checked='true']):active { - color: #24292e; + color: #24292f; background-color: #f6f8fa; } } @@ -286,9 +286,9 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` max-height: 350px; margin: 4px 0 16px 0; font-size: 12px; - border: 1px solid #e1e4e8; + border: 1px solid #d0d7de; border-radius: 6px; - box-shadow: 0 1px 0 rgba(27,31,35,0.04); + box-shadow: 0 1px 0 rgba(27,31,36,0.04); } } diff --git a/src/__tests__/__snapshots__/SelectPanel.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.tsx.snap index 32d0bcb0897..c2b1d6d58ed 100644 --- a/src/__tests__/__snapshots__/SelectPanel.tsx.snap +++ b/src/__tests__/__snapshots__/SelectPanel.tsx.snap @@ -4,7 +4,7 @@ exports[`SelectPanel renders consistently 1`] = ` .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5; - color: #24292e; + color: #24292f; } .c1 { @@ -29,10 +29,10 @@ exports[`SelectPanel renders consistently 1`] = ` text-decoration: none; text-align: center; font-size: 14px; - color: #24292e; - background-color: #fafbfc; - border: 1px solid rgba(27,31,35,0.15); - box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + color: #24292f; + background-color: #f6f8fa; + border: 1px solid rgba(27,31,36,0.15); + box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c1:hover { @@ -54,23 +54,23 @@ exports[`SelectPanel renders consistently 1`] = ` .c1:hover { background-color: #f3f4f6; - border-color: rgba(27,31,35,0.15); + border-color: rgba(27,31,36,0.15); } .c1:focus { - border-color: rgba(27,31,35,0.15); - box-shadow: 0 0 0 3px rgba(3,102,214,0.3); + border-color: rgba(27,31,36,0.15); + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); } .c1:active { background-color: hsla(220,14%,94%,1); - box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15); + box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15); } .c1:disabled { - color: #959da5; - background-color: #fafbfc; - border-color: rgba(27,31,35,0.15); + color: #57606a; + background-color: #f6f8fa; + border-color: rgba(27,31,36,0.15); } .c2 { diff --git a/src/__tests__/__snapshots__/SideNav.tsx.snap b/src/__tests__/__snapshots__/SideNav.tsx.snap index 820f454a192..7ca1df5f5b9 100644 --- a/src/__tests__/__snapshots__/SideNav.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.tsx.snap @@ -2,7 +2,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c0 { - color: #0366d6; + color: #0969da; -webkit-text-decoration: none; text-decoration: none; position: relative; @@ -39,10 +39,10 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c1.variant-normal > .c0 { - color: #24292e; + color: #24292f; padding: 16px; border: 0; - border-top: 1px solid hsla(214,13%,93%,1); + border-top: 1px solid hsla(210,18%,87%,1); } .c1.variant-normal > .c0:first-child { @@ -68,18 +68,18 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c1.variant-normal > .c0:hover { - background-color: #f6f8fa; + background-color: rgba(234,238,242,0.5); outline: none; -webkit-text-decoration: none; text-decoration: none; } .c1.variant-normal > .c0:focus { - background-color: #f6f8fa; + background-color: rgba(234,238,242,0.5); outline: none; -webkit-text-decoration: none; text-decoration: none; - box-shadow: 0 0 0 3px rgba(3,102,214,0.3); + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); z-index: 1; } @@ -90,33 +90,33 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c1.variant-normal > .c0[aria-current='page']::before, .c1.variant-normal > .c0[aria-selected='true']::before { - background-color: #f9826c; + background-color: #FD8C73; } .c1.variant-lightweight > .c0 { padding: 4px 0; - color: #0366d6; + color: #0969da; } .c1.variant-lightweight > .c0:hover { - color: #24292e; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; outline: none; } .c1.variant-lightweight > .c0:focus { - color: #24292e; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; outline: none; - box-shadow: 0 0 0 3px rgba(3,102,214,0.3); + box-shadow: 0 0 0 3px rgba(9,105,218,0.3); z-index: 1; } .c1.variant-lightweight > .c0[aria-current='page'], .c1.variant-lightweight > .c0[aria-selected='true'] { - color: #24292e; + color: #24292f; font-weight: 500; } @@ -129,12 +129,12 @@ exports[`SideNav renders consistently 1`] = ` .c0 { border-width: 0; border-style: solid; - border-color: #e1e4e8; + border-color: #d0d7de; border-radius: 6px; } .c1 { - background-color: #fafbfc; + background-color: #f6f8fa; }