From c52ab372fe239939b543ee70402677db9b75f28e Mon Sep 17 00:00:00 2001 From: Rui Sousa <30603437+ItzaMi@users.noreply.github.com> Date: Mon, 27 Mar 2023 21:03:16 +0100 Subject: [PATCH 01/12] feat(Dialog): use new `Button` + change `DialogButtonProps` to match it + change `autoFocus` logic so first `button` gets focus when navigating with tabs --- src/Dialog/Dialog.tsx | 24 +++++++++--------------- src/stories/Dialog.stories.tsx | 14 +++++++------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index be9fa186567..e40703b56ca 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react' import styled from 'styled-components' -import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button' +import {Button, ButtonProps} from '../Button' import Box from '../Box' import {get} from '../constants' import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' @@ -24,12 +24,12 @@ export type DialogButtonProps = ButtonProps & { /** * The type of Button element to use */ - buttonType?: 'normal' | 'primary' | 'danger' + buttonType?: 'default' | 'primary' | 'danger' /** * The Button's inner text */ - content: React.ReactNode + children: React.ReactNode /** * If true, and if this is the only button with autoFocus set to true, @@ -366,15 +366,10 @@ const Footer = styled.div` ${sx}; ` -const buttonTypes = { - normal: Button, - primary: ButtonPrimary, - danger: ButtonDanger, -} const Buttons: React.FC> = ({buttons}) => { const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref) - let autoFocusCount = 0 - const [hasRendered, setHasRendered] = useState(0) + let autoFocusCount = -1 + const [hasRendered, setHasRendered] = useState(-1) useEffect(() => { // hack to work around dialogs originating from other focus traps. if (hasRendered === 1) { @@ -387,17 +382,16 @@ const Buttons: React.FC> return ( <> {buttons.map((dialogButtonProps, index) => { - const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps - const ButtonElement = buttonTypes[buttonType] + const {children, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps return ( - - {content} - + {children} + ) })} diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx index 9dab6838f5a..5440db836cb 100644 --- a/src/stories/Dialog.stories.tsx +++ b/src/stories/Dialog.stories.tsx @@ -125,8 +125,8 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => { width={width} height={height} footerButtons={[ - {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose}, - {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true}, + {buttonType: 'danger', children: 'Delete the universe', onClick: onDialogClose}, + {buttonType: 'primary', children: 'Proceed', onClick: openSecondDialog, autoFocus: true}, ]} > {lipsum} @@ -189,8 +189,8 @@ export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) renderFooter={CustomFooter} onClose={onDialogClose} footerButtons={[ - {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose}, - {buttonType: 'primary', content: 'Proceed'}, + {buttonType: 'danger', children: 'Delete the universe', onClick: onDialogClose}, + {buttonType: 'primary', children: 'Proceed'}, ]} > {lipsum} @@ -207,7 +207,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => { const onDialogClose = useCallback(() => setIsOpen(false), []) const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) const openSecondDialog = useCallback(() => setSecondOpen(true), []) - const manyButtons = new Array(10).fill(undefined).map((_, i) => ({content: `Button ${i}`})) + const manyButtons = new Array(10).fill(undefined).map((_, i) => ({children: `Button ${i}`})) return ( <> ) })} diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx index 5440db836cb..9dab6838f5a 100644 --- a/src/stories/Dialog.stories.tsx +++ b/src/stories/Dialog.stories.tsx @@ -125,8 +125,8 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => { width={width} height={height} footerButtons={[ - {buttonType: 'danger', children: 'Delete the universe', onClick: onDialogClose}, - {buttonType: 'primary', children: 'Proceed', onClick: openSecondDialog, autoFocus: true}, + {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose}, + {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true}, ]} > {lipsum} @@ -189,8 +189,8 @@ export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) renderFooter={CustomFooter} onClose={onDialogClose} footerButtons={[ - {buttonType: 'danger', children: 'Delete the universe', onClick: onDialogClose}, - {buttonType: 'primary', children: 'Proceed'}, + {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose}, + {buttonType: 'primary', content: 'Proceed'}, ]} > {lipsum} @@ -207,7 +207,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => { const onDialogClose = useCallback(() => setIsOpen(false), []) const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) const openSecondDialog = useCallback(() => setSecondOpen(true), []) - const manyButtons = new Array(10).fill(undefined).map((_, i) => ({children: `Button ${i}`})) + const manyButtons = new Array(10).fill(undefined).map((_, i) => ({content: `Button ${i}`})) return ( <> @@ -251,7 +251,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -279,10 +279,10 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -435,11 +435,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -474,7 +474,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -502,10 +502,10 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -697,7 +697,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -727,10 +727,10 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -922,7 +922,7 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -952,10 +952,10 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -1143,10 +1143,10 @@ exports[`Token components AvatarToken renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; } @@ -1214,7 +1214,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -1242,10 +1242,10 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: #1F2328; + border-color: #24292f; border-style: solid; border-width: 1px; - color: #1F2328; + color: #24292f; max-width: 100%; padding-left: 4px; } @@ -1352,7 +1352,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); width: 100%; height: 100%; } @@ -1380,10 +1380,10 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -1536,11 +1536,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -1709,11 +1709,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -1882,11 +1882,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -2440,10 +2440,10 @@ exports[`Token components IssueLabelToken renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; } @@ -2658,11 +2658,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -2831,11 +2831,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3115,11 +3115,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3163,10 +3163,10 @@ exports[`Token components Token renders all sizes 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3295,11 +3295,11 @@ exports[`Token components Token renders all sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -3343,10 +3343,10 @@ exports[`Token components Token renders all sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3475,11 +3475,11 @@ exports[`Token components Token renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3523,10 +3523,10 @@ exports[`Token components Token renders all sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3705,10 +3705,10 @@ exports[`Token components Token renders all sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3887,10 +3887,10 @@ exports[`Token components Token renders all sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -4054,10 +4054,10 @@ exports[`Token components Token renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; } @@ -4134,10 +4134,10 @@ exports[`Token components Token renders isSelected 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: #1F2328; + border-color: #24292f; border-style: solid; border-width: 1px; - color: #1F2328; + color: #24292f; max-width: 100%; } @@ -4224,10 +4224,10 @@ exports[`Token components Token renders with a leadingVisual 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; } @@ -4330,10 +4330,10 @@ exports[`Token components Token renders with a remove button 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -4462,11 +4462,11 @@ exports[`Token components Token renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap index 31095a86b83..ab8203e973f 100644 --- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap +++ b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap @@ -42,7 +42,7 @@ exports[`UnderlineNav renders consistently 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - color: #1F2328; + color: #24292f; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -127,7 +127,7 @@ exports[`UnderlineNav renders consistently 1`] = ` line-height: 1; border-radius: 20px; background-color: rgba(175,184,193,0.2); - color: #1F2328; + color: #24292f; } .c7:empty { diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap index b3b1834f906..513bf64fb12 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Pagination renders consistently 1`] = ` padding: 0.5rem calc((2rem - 1.25rem) / 2); font-style: normal; line-height: 1; - color: #1F2328; + color: #24292f; text-align: center; white-space: nowrap; vertical-align: middle; diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index efbeb0b7aa8..1a17e5cc076 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5; - color: #1F2328; + color: #24292f; } .c2 { @@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c1 { border-radius: 6px; border: 1px solid; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); font-family: inherit; font-weight: 500; font-size: 14px; @@ -64,7 +64,7 @@ exports[`ActionMenu renders consistently 1`] = ` transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c1:focus:not(:disabled) { @@ -210,17 +210,17 @@ exports[`ActionMenu renders consistently 1`] = ` .c1:hover:not([disabled]) { background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } .c1:active:not([disabled]) { background-color: hsla(220,14%,93%,1); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } .c1[aria-expanded=true] { background-color: hsla(220,14%,93%,1); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } @media (forced-colors:active) { diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index c01e1a5cfaf..b64fb744818 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5; - color: #1F2328; + color: #24292f; } .c1 { @@ -31,8 +31,8 @@ exports[`AnchoredOverlay renders consistently 1`] = ` font-size: 14px; color: #24292f; background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + 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,7 +54,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c1:hover { background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } .c1:focus { @@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c1:disabled { color: #8c959f; background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); }
:not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -71,7 +71,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -164,7 +164,7 @@ exports[`snapshots renders a loading state 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -221,7 +221,7 @@ exports[`snapshots renders a loading state 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -230,7 +230,7 @@ exports[`snapshots renders a loading state 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -358,7 +358,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -415,7 +415,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -424,7 +424,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -538,7 +538,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -644,7 +644,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = } .c10 svg { - fill: #656d76; + fill: #57606a; font-size: 12px; } @@ -1315,7 +1315,7 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1372,7 +1372,7 @@ exports[`snapshots renders a multiselect input 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1381,7 +1381,7 @@ exports[`snapshots renders a multiselect input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1495,7 +1495,7 @@ exports[`snapshots renders a multiselect input 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -2182,7 +2182,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2239,7 +2239,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2248,7 +2248,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2362,7 +2362,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -3060,7 +3060,7 @@ exports[`snapshots renders a single select input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3117,7 +3117,7 @@ exports[`snapshots renders a single select input 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3126,7 +3126,7 @@ exports[`snapshots renders a single select input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3240,7 +3240,7 @@ exports[`snapshots renders a single select input 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -3683,7 +3683,7 @@ exports[`snapshots renders with a custom text input component 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -4068,7 +4068,7 @@ exports[`snapshots renders with an input value 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4125,7 +4125,7 @@ exports[`snapshots renders with an input value 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4134,7 +4134,7 @@ exports[`snapshots renders with an input value 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap index 3a2e8e4b28d..81c3acf395a 100644 --- a/src/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Avatar renders consistently 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(31,35,40,0.15); + box-shadow: 0 0 0 1px rgba(27,31,36,0.15); } summary { @@ -268,12 +268,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` } .c4 .SelectMenuTab:not([aria-checked='true']):hover { - color: #1F2328; + color: #24292f; background-color: #f6f8fa; } .c4 .SelectMenuTab:not([aria-checked='true']):active { - color: #1F2328; + color: #24292f; background-color: #f6f8fa; } } @@ -286,7 +286,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` font-size: 12px; border: 1px solid #d0d7de; border-radius: 6px; - box-shadow: 0 1px 0 rgba(31,35,40,0.04); + box-shadow: 0 1px 0 rgba(27,31,36,0.04); } } diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index d54bec24567..416de17cba3 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap @@ -42,7 +42,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c2.variant-normal > .c1 { - color: #1F2328; + color: #24292f; padding: 16px; border: 0; border-top: 1px solid hsla(210,18%,87%,1); @@ -100,13 +100,13 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c2.variant-lightweight > .c1:hover { - color: #1F2328; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; } .c2.variant-lightweight > .c1:focus { - color: #1F2328; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; outline: solid 1px #0969da; @@ -115,7 +115,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c2.variant-lightweight > .c1[aria-current='page'], .c2.variant-lightweight > .c1[aria-selected='true'] { - color: #1F2328; + color: #24292f; font-weight: 500; } diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap index 8e37ba389fc..0766b036b9e 100644 --- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap @@ -8,7 +8,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p font-size: 14px; line-height: 20px; min-height: 34px; - color: #1F2328; + color: #24292f; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -47,7 +47,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #656d76; + color: #57606a; } .c0.selected { @@ -75,7 +75,7 @@ exports[`SubNav.Link renders consistently 1`] = ` font-size: 14px; line-height: 20px; min-height: 34px; - color: #1F2328; + color: #24292f; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -114,7 +114,7 @@ exports[`SubNav.Link renders consistently 1`] = ` .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #656d76; + color: #57606a; } .c0.selected { @@ -140,7 +140,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` font-size: 14px; line-height: 20px; min-height: 34px; - color: #1F2328; + color: #24292f; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -179,7 +179,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #656d76; + color: #57606a; } .c0.selected { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index a02f8b8c3c2..f0eb6baefb9 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -4,7 +4,7 @@ exports[`TextInput renders 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -61,7 +61,7 @@ exports[`TextInput renders 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -70,7 +70,7 @@ exports[`TextInput renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -122,7 +122,7 @@ exports[`TextInput renders block 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -187,7 +187,7 @@ exports[`TextInput renders block 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -196,7 +196,7 @@ exports[`TextInput renders block 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -248,7 +248,7 @@ exports[`TextInput renders consistently 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -305,7 +305,7 @@ exports[`TextInput renders consistently 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -314,7 +314,7 @@ exports[`TextInput renders consistently 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -365,7 +365,7 @@ exports[`TextInput renders contrast 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -423,7 +423,7 @@ exports[`TextInput renders contrast 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -432,7 +432,7 @@ exports[`TextInput renders contrast 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -484,7 +484,7 @@ exports[`TextInput renders error 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -548,7 +548,7 @@ exports[`TextInput renders error 1`] = ` box-shadow: inset 0 0 0 1px #0969da; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -557,7 +557,7 @@ exports[`TextInput renders error 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -609,7 +609,7 @@ exports[`TextInput renders large 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -672,7 +672,7 @@ exports[`TextInput renders large 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -681,7 +681,7 @@ exports[`TextInput renders large 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -734,7 +734,7 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -791,7 +791,7 @@ exports[`TextInput renders leadingVisual 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -800,7 +800,7 @@ exports[`TextInput renders leadingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -879,7 +879,7 @@ exports[`TextInput renders monospace 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -937,7 +937,7 @@ exports[`TextInput renders monospace 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -946,7 +946,7 @@ exports[`TextInput renders monospace 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -998,7 +998,7 @@ exports[`TextInput renders placeholder 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1055,7 +1055,7 @@ exports[`TextInput renders placeholder 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1064,7 +1064,7 @@ exports[`TextInput renders placeholder 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1117,7 +1117,7 @@ exports[`TextInput renders small 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1182,7 +1182,7 @@ exports[`TextInput renders small 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1191,7 +1191,7 @@ exports[`TextInput renders small 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1397,7 +1397,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c4 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #656d76; + color: #57606a; } .c4 [data-component="text"] { @@ -1412,7 +1412,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c4 [data-component="trailingAction"] { margin-right: -4px; - color: #656d76; + color: #57606a; } .c4 [data-component="buttonContent"] { @@ -1448,7 +1448,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` } .c4[data-component="IconButton"][data-no-visuals] { - color: #656d76; + color: #57606a; } .c4[data-no-visuals] { @@ -1483,7 +1483,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1534,7 +1534,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1543,7 +1543,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2043,7 +2043,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c3 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #656d76; + color: #57606a; } .c3 [data-component="text"] { @@ -2058,7 +2058,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c3 [data-component="trailingAction"] { margin-right: -4px; - color: #656d76; + color: #57606a; } .c3 [data-component="buttonContent"] { @@ -2094,7 +2094,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` } .c3[data-component="IconButton"][data-no-visuals] { - color: #656d76; + color: #57606a; } .c3[data-no-visuals] { @@ -2129,7 +2129,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2180,7 +2180,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2189,7 +2189,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2444,7 +2444,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c4 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #656d76; + color: #57606a; } .c4 [data-component="text"] { @@ -2459,7 +2459,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c4 [data-component="trailingAction"] { margin-right: -4px; - color: #656d76; + color: #57606a; } .c4 [data-component="buttonContent"] { @@ -2495,7 +2495,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` } .c4[data-component="IconButton"][data-no-visuals] { - color: #656d76; + color: #57606a; } .c4[data-no-visuals] { @@ -2530,7 +2530,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2581,7 +2581,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2590,7 +2590,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2916,7 +2916,7 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2973,7 +2973,7 @@ exports[`TextInput renders trailingVisual 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2982,7 +2982,7 @@ exports[`TextInput renders trailingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3061,7 +3061,7 @@ exports[`TextInput renders warning 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3081,7 +3081,7 @@ exports[`TextInput renders warning 1`] = ` background-position: right 8px center; padding-left: 0; padding-right: 0; - border-color: #9a6700; + border-color: #bf8700; } .c0 input, @@ -3119,7 +3119,7 @@ exports[`TextInput renders warning 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3128,7 +3128,7 @@ exports[`TextInput renders warning 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3201,7 +3201,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3258,7 +3258,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3267,7 +3267,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3373,7 +3373,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3430,7 +3430,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3439,7 +3439,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3577,7 +3577,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3634,7 +3634,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3643,7 +3643,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3758,7 +3758,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3815,7 +3815,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3824,7 +3824,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4008,7 +4008,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4065,7 +4065,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4074,7 +4074,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4258,7 +4258,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4315,7 +4315,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4324,7 +4324,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4502,7 +4502,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4559,7 +4559,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4568,7 +4568,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4714,7 +4714,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4771,7 +4771,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4780,7 +4780,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4958,7 +4958,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5015,7 +5015,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5024,7 +5024,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5179,7 +5179,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5244,7 +5244,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5253,7 +5253,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5478,7 +5478,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5535,7 +5535,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5544,7 +5544,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5768,7 +5768,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5831,7 +5831,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5840,7 +5840,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -6031,7 +6031,7 @@ exports[`TextInput should render a password input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -6088,7 +6088,7 @@ exports[`TextInput should render a password input 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -6097,7 +6097,7 @@ exports[`TextInput should render a password input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index bd1f7ba606b..a710afbad03 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -55,7 +55,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -119,7 +119,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -128,7 +128,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -180,10 +180,10 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -191,7 +191,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -826,13 +826,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c8 { font-size: 16px; - color: #656d76; + color: #57606a; } .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -896,7 +896,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -905,7 +905,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -957,10 +957,10 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -968,7 +968,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -1241,7 +1241,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1323,7 +1323,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1332,7 +1332,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1445,7 +1445,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1513,7 +1513,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -1522,7 +1522,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1574,10 +1574,10 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -1585,7 +1585,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -2169,7 +2169,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2240,7 +2240,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2249,7 +2249,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2299,10 +2299,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -2310,7 +2310,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -2469,11 +2469,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2520,11 +2520,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2571,11 +2571,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2622,11 +2622,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2673,11 +2673,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2724,11 +2724,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2775,11 +2775,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2826,11 +2826,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -2894,7 +2894,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2965,7 +2965,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -2974,7 +2974,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3024,10 +3024,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3035,7 +3035,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -3194,11 +3194,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3245,11 +3245,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3296,11 +3296,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3347,11 +3347,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3398,11 +3398,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3449,11 +3449,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3500,11 +3500,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3551,11 +3551,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={15} > @@ -3619,7 +3619,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3683,7 +3683,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -3692,7 +3692,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3742,10 +3742,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -3753,7 +3753,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -4337,7 +4337,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4401,7 +4401,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -4410,7 +4410,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4462,10 +4462,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -4473,7 +4473,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -5057,7 +5057,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5121,7 +5121,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5130,7 +5130,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5182,10 +5182,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -5193,7 +5193,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -5777,7 +5777,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5843,7 +5843,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -5852,7 +5852,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5904,10 +5904,10 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -5915,7 +5915,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -6499,7 +6499,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -6563,7 +6563,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -6572,7 +6572,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -6624,17 +6624,17 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; } .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c5 { @@ -6944,7 +6944,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -7008,7 +7008,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -7017,7 +7017,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7069,10 +7069,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -7080,7 +7080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -7719,7 +7719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -7783,7 +7783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -7792,7 +7792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7844,10 +7844,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -7855,7 +7855,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c6:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c9 { @@ -8526,7 +8526,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -8590,7 +8590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -8599,7 +8599,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -8651,10 +8651,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -8662,7 +8662,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -9310,7 +9310,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -9374,7 +9374,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -9383,7 +9383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -9435,10 +9435,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -9446,7 +9446,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -10163,7 +10163,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -10227,7 +10227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -10236,7 +10236,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -10288,10 +10288,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -10299,7 +10299,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -11016,7 +11016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -11080,7 +11080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -11089,7 +11089,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -11141,10 +11141,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -11152,7 +11152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -11863,7 +11863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -11927,7 +11927,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -11936,7 +11936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -11988,10 +11988,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -11999,7 +11999,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -12678,7 +12678,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -12742,7 +12742,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -12751,7 +12751,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -12803,10 +12803,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -12814,7 +12814,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c6:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c9 { @@ -13525,7 +13525,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -13589,7 +13589,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -13598,7 +13598,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -13650,10 +13650,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -13661,7 +13661,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -14349,7 +14349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -14420,7 +14420,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -14429,7 +14429,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -14479,10 +14479,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -14490,7 +14490,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -14718,11 +14718,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -14769,11 +14769,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -14820,11 +14820,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -14871,11 +14871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -14922,11 +14922,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -14973,11 +14973,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -15024,11 +15024,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -15075,11 +15075,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 12 12" + viewBox="0 0 16 16" width={12} > @@ -15247,7 +15247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -15311,7 +15311,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -15320,7 +15320,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -15372,10 +15372,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -15383,7 +15383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -16140,7 +16140,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -16204,7 +16204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -16213,7 +16213,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -16263,10 +16263,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -16274,7 +16274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c10 { @@ -16997,7 +16997,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -17061,7 +17061,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -17070,7 +17070,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -17122,10 +17122,10 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); border-style: solid; border-width: 1px; - color: #656d76; + color: #57606a; max-width: 100%; padding-right: 0; } @@ -17133,7 +17133,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #1F2328; + color: #24292f; } .c7 { @@ -17704,7 +17704,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -17768,7 +17768,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -17777,7 +17777,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -18383,7 +18383,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -18447,7 +18447,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` padding: 12px; } -.c0 > :not(:last-child) { +.c0 >:not(:last-child) { margin-right: 8px; } @@ -18456,7 +18456,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #656d76; + color: #57606a; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index b0c63ebe245..291f828423b 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Textarea renders consistently 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #1F2328; + color: #24292f; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap index 101fd03be24..9c4e84902b4 100644 --- a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +++ b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap @@ -2,7 +2,7 @@ exports[`has default theme 1`] = ` .c0 { - color: #1F2328; + color: #24292f; margin-bottom: 4px; } diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap index 764e81dd26d..2c032992665 100644 --- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap +++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap @@ -49,7 +49,7 @@ exports[`renders consistently 1`] = ` } .c7 { - color: #656d76; + color: #57606a; line-height: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -87,7 +87,7 @@ exports[`renders consistently 1`] = ` .c1 { font-size: 14px; - color: #1F2328; + color: #24292f; margin-left: 8px; margin-right: 8px; position: relative; diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap index 728670dcac0..400ce2f4e58 100644 --- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap @@ -6,7 +6,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #1F2328; + color: #24292f; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -15,7 +15,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a .c0:hover, .c0:focus { - color: #1F2328; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -25,16 +25,16 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #656d76; + color: #57606a; } .c0.PRC-selected { - color: #1F2328; + color: #24292f; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #1F2328; + color: #24292f; } .c0:focus:not(:disabled) { @@ -66,7 +66,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #1F2328; + color: #24292f; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -75,7 +75,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` .c0:hover, .c0:focus { - color: #1F2328; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -85,16 +85,16 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #656d76; + color: #57606a; } .c0.PRC-selected { - color: #1F2328; + color: #24292f; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #1F2328; + color: #24292f; } .c0:focus:not(:disabled) { @@ -124,7 +124,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #1F2328; + color: #24292f; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -133,7 +133,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` .c0:hover, .c0:focus { - color: #1F2328; + color: #24292f; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -143,16 +143,16 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #656d76; + color: #57606a; } .c0.PRC-selected { - color: #1F2328; + color: #24292f; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #1F2328; + color: #24292f; } .c0:focus:not(:disabled) { diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap index e261d464937..aeba8dd6d70 100644 --- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap @@ -144,7 +144,7 @@ exports[`ActionList.Item renders consistently 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #1F2328; + color: #24292f; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap index 2b488c64daf..a293df82422 100644 --- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap @@ -25,8 +25,8 @@ exports[`ActionMenu renders consistently 1`] = ` font-size: 14px; color: #24292f; background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + 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); } .c0:hover { @@ -48,7 +48,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0:hover { background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } .c0:focus { @@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0:disabled { color: #8c959f; background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); + border-color: rgba(27,31,36,0.15); } @@ -251,7 +251,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -279,10 +279,10 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -435,11 +435,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -474,7 +474,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -502,10 +502,10 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -697,7 +697,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -727,10 +727,10 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -922,7 +922,7 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -952,10 +952,10 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -1143,10 +1143,10 @@ exports[`Token components AvatarToken renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; } @@ -1214,7 +1214,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -1242,10 +1242,10 @@ exports[`Token components AvatarToken renders isSelected 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: #24292f; + border-color: #1F2328; border-style: solid; border-width: 1px; - color: #24292f; + color: #1F2328; max-width: 100%; padding-left: 4px; } @@ -1352,7 +1352,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); width: 100%; height: 100%; } @@ -1380,10 +1380,10 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; padding-left: 4px; @@ -1536,11 +1536,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -1709,11 +1709,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -1882,11 +1882,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -2440,10 +2440,10 @@ exports[`Token components IssueLabelToken renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; } @@ -2658,11 +2658,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -2831,11 +2831,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3115,11 +3115,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3163,10 +3163,10 @@ exports[`Token components Token renders all sizes 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3295,11 +3295,11 @@ exports[`Token components Token renders all sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -3343,10 +3343,10 @@ exports[`Token components Token renders all sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3475,11 +3475,11 @@ exports[`Token components Token renders all sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3523,10 +3523,10 @@ exports[`Token components Token renders all sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3705,10 +3705,10 @@ exports[`Token components Token renders all sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3887,10 +3887,10 @@ exports[`Token components Token renders all sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -4054,10 +4054,10 @@ exports[`Token components Token renders consistently 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; } @@ -4134,10 +4134,10 @@ exports[`Token components Token renders isSelected 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: #24292f; + border-color: #1F2328; border-style: solid; border-width: 1px; - color: #24292f; + color: #1F2328; max-width: 100%; } @@ -4224,10 +4224,10 @@ exports[`Token components Token renders with a leadingVisual 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; } @@ -4330,10 +4330,10 @@ exports[`Token components Token renders with a remove button 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -4462,11 +4462,11 @@ exports[`Token components Token renders with a remove button 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap index ab8203e973f..31095a86b83 100644 --- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap +++ b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap @@ -42,7 +42,7 @@ exports[`UnderlineNav renders consistently 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - color: #24292f; + color: #1F2328; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -127,7 +127,7 @@ exports[`UnderlineNav renders consistently 1`] = ` line-height: 1; border-radius: 20px; background-color: rgba(175,184,193,0.2); - color: #24292f; + color: #1F2328; } .c7:empty { diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap index 513bf64fb12..b3b1834f906 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Pagination renders consistently 1`] = ` padding: 0.5rem calc((2rem - 1.25rem) / 2); font-style: normal; line-height: 1; - color: #24292f; + color: #1F2328; text-align: center; white-space: nowrap; vertical-align: middle; diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 1a17e5cc076..efbeb0b7aa8 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5; - color: #24292f; + color: #1F2328; } .c2 { @@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c1 { border-radius: 6px; border: 1px solid; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); font-family: inherit; font-weight: 500; font-size: 14px; @@ -64,7 +64,7 @@ exports[`ActionMenu renders consistently 1`] = ` transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); + box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c1:focus:not(:disabled) { @@ -210,17 +210,17 @@ exports[`ActionMenu renders consistently 1`] = ` .c1:hover:not([disabled]) { background-color: #f3f4f6; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } .c1:active:not([disabled]) { background-color: hsla(220,14%,93%,1); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } .c1[aria-expanded=true] { background-color: hsla(220,14%,93%,1); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } @media (forced-colors:active) { diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index b64fb744818..359244ccee2 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5; - color: #24292f; + color: #1F2328; } .c1 { @@ -31,8 +31,8 @@ exports[`AnchoredOverlay renders consistently 1`] = ` font-size: 14px; 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); + border: 1px solid rgba(31,35,40,0.15); + box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c1:hover { @@ -54,7 +54,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c1:hover { background-color: #f3f4f6; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } .c1:focus { @@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` .c1:disabled { color: #8c959f; background-color: #f6f8fa; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); }
:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -71,7 +71,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -164,7 +164,7 @@ exports[`snapshots renders a loading state 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -221,7 +221,7 @@ exports[`snapshots renders a loading state 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -230,7 +230,7 @@ exports[`snapshots renders a loading state 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -358,7 +358,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -415,7 +415,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -424,7 +424,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -538,7 +538,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -644,7 +644,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = } .c10 svg { - fill: #57606a; + fill: #656d76; font-size: 12px; } @@ -1315,7 +1315,7 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1372,7 +1372,7 @@ exports[`snapshots renders a multiselect input 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1381,7 +1381,7 @@ exports[`snapshots renders a multiselect input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1495,7 +1495,7 @@ exports[`snapshots renders a multiselect input 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -2182,7 +2182,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2239,7 +2239,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2248,7 +2248,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2362,7 +2362,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -3060,7 +3060,7 @@ exports[`snapshots renders a single select input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3117,7 +3117,7 @@ exports[`snapshots renders a single select input 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3126,7 +3126,7 @@ exports[`snapshots renders a single select input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3240,7 +3240,7 @@ exports[`snapshots renders a single select input 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -3683,7 +3683,7 @@ exports[`snapshots renders with a custom text input component 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; @@ -4068,7 +4068,7 @@ exports[`snapshots renders with an input value 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4125,7 +4125,7 @@ exports[`snapshots renders with an input value 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4134,7 +4134,7 @@ exports[`snapshots renders with an input value 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap index 81c3acf395a..3a2e8e4b28d 100644 --- a/src/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Avatar renders consistently 1`] = ` line-height: 1; vertical-align: middle; border-radius: 50%; - box-shadow: 0 0 0 1px rgba(27,31,36,0.15); + box-shadow: 0 0 0 1px rgba(31,35,40,0.15); } summary { @@ -268,12 +268,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` } .c4 .SelectMenuTab:not([aria-checked='true']):hover { - color: #24292f; + color: #1F2328; background-color: #f6f8fa; } .c4 .SelectMenuTab:not([aria-checked='true']):active { - color: #24292f; + color: #1F2328; background-color: #f6f8fa; } } @@ -286,7 +286,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` font-size: 12px; border: 1px solid #d0d7de; border-radius: 6px; - box-shadow: 0 1px 0 rgba(27,31,36,0.04); + box-shadow: 0 1px 0 rgba(31,35,40,0.04); } } diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index 416de17cba3..d54bec24567 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap @@ -42,7 +42,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c2.variant-normal > .c1 { - color: #24292f; + color: #1F2328; padding: 16px; border: 0; border-top: 1px solid hsla(210,18%,87%,1); @@ -100,13 +100,13 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` } .c2.variant-lightweight > .c1:hover { - color: #24292f; + color: #1F2328; -webkit-text-decoration: none; text-decoration: none; } .c2.variant-lightweight > .c1:focus { - color: #24292f; + color: #1F2328; -webkit-text-decoration: none; text-decoration: none; outline: solid 1px #0969da; @@ -115,7 +115,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c2.variant-lightweight > .c1[aria-current='page'], .c2.variant-lightweight > .c1[aria-selected='true'] { - color: #24292f; + color: #1F2328; font-weight: 500; } diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap index 0766b036b9e..8e37ba389fc 100644 --- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap @@ -8,7 +8,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p font-size: 14px; line-height: 20px; min-height: 34px; - color: #24292f; + color: #1F2328; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -47,7 +47,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #57606a; + color: #656d76; } .c0.selected { @@ -75,7 +75,7 @@ exports[`SubNav.Link renders consistently 1`] = ` font-size: 14px; line-height: 20px; min-height: 34px; - color: #24292f; + color: #1F2328; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -114,7 +114,7 @@ exports[`SubNav.Link renders consistently 1`] = ` .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #57606a; + color: #656d76; } .c0.selected { @@ -140,7 +140,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` font-size: 14px; line-height: 20px; min-height: 34px; - color: #24292f; + color: #1F2328; text-align: center; -webkit-text-decoration: none; text-decoration: none; @@ -179,7 +179,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` .c0:hover .SubNav-octicon, .c0:focus .SubNav-octicon { - color: #57606a; + color: #656d76; } .c0.selected { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index f0eb6baefb9..a02f8b8c3c2 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -4,7 +4,7 @@ exports[`TextInput renders 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -61,7 +61,7 @@ exports[`TextInput renders 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -70,7 +70,7 @@ exports[`TextInput renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -122,7 +122,7 @@ exports[`TextInput renders block 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -187,7 +187,7 @@ exports[`TextInput renders block 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -196,7 +196,7 @@ exports[`TextInput renders block 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -248,7 +248,7 @@ exports[`TextInput renders consistently 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -305,7 +305,7 @@ exports[`TextInput renders consistently 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -314,7 +314,7 @@ exports[`TextInput renders consistently 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -365,7 +365,7 @@ exports[`TextInput renders contrast 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -423,7 +423,7 @@ exports[`TextInput renders contrast 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -432,7 +432,7 @@ exports[`TextInput renders contrast 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -484,7 +484,7 @@ exports[`TextInput renders error 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -548,7 +548,7 @@ exports[`TextInput renders error 1`] = ` box-shadow: inset 0 0 0 1px #0969da; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -557,7 +557,7 @@ exports[`TextInput renders error 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -609,7 +609,7 @@ exports[`TextInput renders large 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -672,7 +672,7 @@ exports[`TextInput renders large 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -681,7 +681,7 @@ exports[`TextInput renders large 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -734,7 +734,7 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -791,7 +791,7 @@ exports[`TextInput renders leadingVisual 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -800,7 +800,7 @@ exports[`TextInput renders leadingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -879,7 +879,7 @@ exports[`TextInput renders monospace 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -937,7 +937,7 @@ exports[`TextInput renders monospace 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -946,7 +946,7 @@ exports[`TextInput renders monospace 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -998,7 +998,7 @@ exports[`TextInput renders placeholder 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1055,7 +1055,7 @@ exports[`TextInput renders placeholder 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1064,7 +1064,7 @@ exports[`TextInput renders placeholder 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1117,7 +1117,7 @@ exports[`TextInput renders small 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1182,7 +1182,7 @@ exports[`TextInput renders small 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1191,7 +1191,7 @@ exports[`TextInput renders small 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1397,7 +1397,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c4 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #57606a; + color: #656d76; } .c4 [data-component="text"] { @@ -1412,7 +1412,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c4 [data-component="trailingAction"] { margin-right: -4px; - color: #57606a; + color: #656d76; } .c4 [data-component="buttonContent"] { @@ -1448,7 +1448,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` } .c4[data-component="IconButton"][data-no-visuals] { - color: #57606a; + color: #656d76; } .c4[data-no-visuals] { @@ -1483,7 +1483,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1534,7 +1534,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1543,7 +1543,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2043,7 +2043,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c3 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #57606a; + color: #656d76; } .c3 [data-component="text"] { @@ -2058,7 +2058,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c3 [data-component="trailingAction"] { margin-right: -4px; - color: #57606a; + color: #656d76; } .c3 [data-component="buttonContent"] { @@ -2094,7 +2094,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` } .c3[data-component="IconButton"][data-no-visuals] { - color: #57606a; + color: #656d76; } .c3[data-no-visuals] { @@ -2129,7 +2129,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2180,7 +2180,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2189,7 +2189,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2444,7 +2444,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c4 [data-component="leadingVisual"] { grid-area: leadingVisual; - color: #57606a; + color: #656d76; } .c4 [data-component="text"] { @@ -2459,7 +2459,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c4 [data-component="trailingAction"] { margin-right: -4px; - color: #57606a; + color: #656d76; } .c4 [data-component="buttonContent"] { @@ -2495,7 +2495,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` } .c4[data-component="IconButton"][data-no-visuals] { - color: #57606a; + color: #656d76; } .c4[data-no-visuals] { @@ -2530,7 +2530,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2581,7 +2581,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2590,7 +2590,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2916,7 +2916,7 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2973,7 +2973,7 @@ exports[`TextInput renders trailingVisual 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2982,7 +2982,7 @@ exports[`TextInput renders trailingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3061,7 +3061,7 @@ exports[`TextInput renders warning 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3081,7 +3081,7 @@ exports[`TextInput renders warning 1`] = ` background-position: right 8px center; padding-left: 0; padding-right: 0; - border-color: #bf8700; + border-color: #9a6700; } .c0 input, @@ -3119,7 +3119,7 @@ exports[`TextInput renders warning 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3128,7 +3128,7 @@ exports[`TextInput renders warning 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3201,7 +3201,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3258,7 +3258,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3267,7 +3267,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3373,7 +3373,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3430,7 +3430,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3439,7 +3439,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3577,7 +3577,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3634,7 +3634,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3643,7 +3643,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3758,7 +3758,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3815,7 +3815,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3824,7 +3824,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4008,7 +4008,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4065,7 +4065,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4074,7 +4074,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4258,7 +4258,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4315,7 +4315,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4324,7 +4324,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4502,7 +4502,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4559,7 +4559,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4568,7 +4568,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4714,7 +4714,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4771,7 +4771,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4780,7 +4780,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4958,7 +4958,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5015,7 +5015,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5024,7 +5024,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5179,7 +5179,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5244,7 +5244,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5253,7 +5253,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5478,7 +5478,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5535,7 +5535,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5544,7 +5544,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5768,7 +5768,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5831,7 +5831,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5840,7 +5840,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -6031,7 +6031,7 @@ exports[`TextInput should render a password input 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -6088,7 +6088,7 @@ exports[`TextInput should render a password input 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -6097,7 +6097,7 @@ exports[`TextInput should render a password input 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index a710afbad03..bd1f7ba606b 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -55,7 +55,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -119,7 +119,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -128,7 +128,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -180,10 +180,10 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -191,7 +191,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -826,13 +826,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c8 { font-size: 16px; - color: #57606a; + color: #656d76; } .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -896,7 +896,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -905,7 +905,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -957,10 +957,10 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -968,7 +968,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -1241,7 +1241,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1323,7 +1323,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1332,7 +1332,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1445,7 +1445,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -1513,7 +1513,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -1522,7 +1522,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1574,10 +1574,10 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -1585,7 +1585,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -2169,7 +2169,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2240,7 +2240,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2249,7 +2249,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -2299,10 +2299,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -2310,7 +2310,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -2469,11 +2469,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2520,11 +2520,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2571,11 +2571,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2622,11 +2622,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2673,11 +2673,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2724,11 +2724,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2775,11 +2775,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2826,11 +2826,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -2894,7 +2894,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -2965,7 +2965,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -2974,7 +2974,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3024,10 +3024,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3035,7 +3035,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -3194,11 +3194,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3245,11 +3245,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3296,11 +3296,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3347,11 +3347,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3398,11 +3398,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3449,11 +3449,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3500,11 +3500,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3551,11 +3551,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={15} > @@ -3619,7 +3619,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -3683,7 +3683,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -3692,7 +3692,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -3742,10 +3742,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -3753,7 +3753,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -4337,7 +4337,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -4401,7 +4401,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -4410,7 +4410,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -4462,10 +4462,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -4473,7 +4473,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -5057,7 +5057,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5121,7 +5121,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5130,7 +5130,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5182,10 +5182,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -5193,7 +5193,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -5777,7 +5777,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -5843,7 +5843,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -5852,7 +5852,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -5904,10 +5904,10 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -5915,7 +5915,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -6499,7 +6499,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -6563,7 +6563,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -6572,7 +6572,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -6624,17 +6624,17 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; } .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c5 { @@ -6944,7 +6944,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -7008,7 +7008,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -7017,7 +7017,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7069,10 +7069,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -7080,7 +7080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -7719,7 +7719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -7783,7 +7783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -7792,7 +7792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7844,10 +7844,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -7855,7 +7855,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c6:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c9 { @@ -8526,7 +8526,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -8590,7 +8590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -8599,7 +8599,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -8651,10 +8651,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -8662,7 +8662,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -9310,7 +9310,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -9374,7 +9374,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -9383,7 +9383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -9435,10 +9435,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -9446,7 +9446,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -10163,7 +10163,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -10227,7 +10227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -10236,7 +10236,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -10288,10 +10288,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -10299,7 +10299,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -11016,7 +11016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -11080,7 +11080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -11089,7 +11089,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -11141,10 +11141,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -11152,7 +11152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -11863,7 +11863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -11927,7 +11927,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -11936,7 +11936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -11988,10 +11988,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -11999,7 +11999,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -12678,7 +12678,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -12742,7 +12742,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -12751,7 +12751,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -12803,10 +12803,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -12814,7 +12814,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c6:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c9 { @@ -13525,7 +13525,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -13589,7 +13589,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -13598,7 +13598,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -13650,10 +13650,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -13661,7 +13661,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -14349,7 +14349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -14420,7 +14420,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -14429,7 +14429,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -14479,10 +14479,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-left: 4px; padding-right: 4px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -14490,7 +14490,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -14718,11 +14718,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -14769,11 +14769,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -14820,11 +14820,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -14871,11 +14871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -14922,11 +14922,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -14973,11 +14973,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -15024,11 +15024,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -15075,11 +15075,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` "verticalAlign": "text-bottom", } } - viewBox="0 0 16 16" + viewBox="0 0 12 12" width={12} > @@ -15247,7 +15247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -15311,7 +15311,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -15320,7 +15320,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -15372,10 +15372,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -15383,7 +15383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -16140,7 +16140,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -16204,7 +16204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -16213,7 +16213,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -16263,10 +16263,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-left: 8px; padding-right: 8px; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -16274,7 +16274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c7:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c10 { @@ -16997,7 +16997,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -17061,7 +17061,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -17070,7 +17070,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -17122,10 +17122,10 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding-top: 0; padding-bottom: 0; background-color: rgba(234,238,242,0.5); - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); border-style: solid; border-width: 1px; - color: #57606a; + color: #656d76; max-width: 100%; padding-right: 0; } @@ -17133,7 +17133,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c4:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); - color: #24292f; + color: #1F2328; } .c7 { @@ -17704,7 +17704,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -17768,7 +17768,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -17777,7 +17777,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -18383,7 +18383,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; @@ -18447,7 +18447,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` padding: 12px; } -.c0 >:not(:last-child) { +.c0 > :not(:last-child) { margin-right: 8px; } @@ -18456,7 +18456,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - color: #57606a; + color: #656d76; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index 291f828423b..b0c63ebe245 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Textarea renders consistently 1`] = ` .c0 { font-size: 14px; line-height: 20px; - color: #24292f; + color: #1F2328; vertical-align: middle; background-color: #ffffff; border: 1px solid #d0d7de; diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap index 9c4e84902b4..101fd03be24 100644 --- a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +++ b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap @@ -2,7 +2,7 @@ exports[`has default theme 1`] = ` .c0 { - color: #24292f; + color: #1F2328; margin-bottom: 4px; } diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap index 2c032992665..764e81dd26d 100644 --- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap +++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap @@ -49,7 +49,7 @@ exports[`renders consistently 1`] = ` } .c7 { - color: #57606a; + color: #656d76; line-height: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -87,7 +87,7 @@ exports[`renders consistently 1`] = ` .c1 { font-size: 14px; - color: #24292f; + color: #1F2328; margin-left: 8px; margin-right: 8px; position: relative; diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap index 400ce2f4e58..728670dcac0 100644 --- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap @@ -6,7 +6,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #24292f; + color: #1F2328; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -15,7 +15,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a .c0:hover, .c0:focus { - color: #24292f; + color: #1F2328; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -25,16 +25,16 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #57606a; + color: #656d76; } .c0.PRC-selected { - color: #24292f; + color: #1F2328; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #24292f; + color: #1F2328; } .c0:focus:not(:disabled) { @@ -66,7 +66,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #24292f; + color: #1F2328; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -75,7 +75,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` .c0:hover, .c0:focus { - color: #24292f; + color: #1F2328; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -85,16 +85,16 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #57606a; + color: #656d76; } .c0.PRC-selected { - color: #24292f; + color: #1F2328; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #24292f; + color: #1F2328; } .c0:focus:not(:disabled) { @@ -124,7 +124,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` margin-right: 16px; font-size: 14px; line-height: 1.5; - color: #24292f; + color: #1F2328; text-align: center; border-bottom: 2px solid transparent; -webkit-text-decoration: none; @@ -133,7 +133,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` .c0:hover, .c0:focus { - color: #24292f; + color: #1F2328; -webkit-text-decoration: none; text-decoration: none; border-bottom-color: rgba(175,184,193,0.2); @@ -143,16 +143,16 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` .c0:hover .PRC-UnderlineNav-octicon, .c0:focus .PRC-UnderlineNav-octicon { - color: #57606a; + color: #656d76; } .c0.PRC-selected { - color: #24292f; + color: #1F2328; border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { - color: #24292f; + color: #1F2328; } .c0:focus:not(:disabled) { diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap index aeba8dd6d70..e261d464937 100644 --- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap @@ -144,7 +144,7 @@ exports[`ActionList.Item renders consistently 1`] = ` display: -ms-flexbox; display: flex; border-radius: 6px; - color: #24292f; + color: #1F2328; -webkit-transition: background 33.333ms linear; transition: background 33.333ms linear; -webkit-text-decoration: none; diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap index a293df82422..2b488c64daf 100644 --- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap @@ -25,8 +25,8 @@ exports[`ActionMenu renders consistently 1`] = ` font-size: 14px; 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); + border: 1px solid rgba(31,35,40,0.15); + box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c0:hover { @@ -48,7 +48,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0:hover { background-color: #f3f4f6; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } .c0:focus { @@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = ` .c0:disabled { color: #8c959f; background-color: #f6f8fa; - border-color: rgba(27,31,36,0.15); + border-color: rgba(31,35,40,0.15); } } - items={[{text: 'Show dialog', onAction: onButtonClick}]} - /> + + + + @@ -95,36 +98,36 @@ describe('ConfirmationDialog', () => { }) it('focuses the primary action when opened and the confirmButtonType is not set', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement) expect(getByText('Secondary')).not.toEqual(document.activeElement) }) it('focuses the primary action when opened and the confirmButtonType is not danger', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement) expect(getByText('Secondary')).not.toEqual(document.activeElement) }) it('focuses the secondary action when opened and the confirmButtonType is danger', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).not.toEqual(document.activeElement) - expect(getByText('Secondary')).toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).not.toEqual(document.activeElement) + expect(getByRole('button', {name: 'Secondary'})).toEqual(document.activeElement) }) it('supports nested `focusTrap`s', async () => { const spy = jest.spyOn(console, 'error').mockImplementationOnce(() => {}) - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show menu')) fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement) + expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement) // REACT_VERSION_LATEST should be treated as a constant for the test // environment diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap index 1d33d06ccb4..158b2d7dab2 100644 --- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap @@ -7,68 +7,218 @@ exports[`ConfirmationDialog renders consistently 1`] = ` color: #1F2328; } +.c2 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c1 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 6px; + border: 1px solid; + border-color: rgba(31,35,40,0.15); font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: 500; + font-size: 14px; cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -webkit-text-decoration: none; text-decoration: none; text-align: center; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: 32px; + padding: 0 12px; + gap: 8px; + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } -.c1:hover { +.c1:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: -2px; +} + +.c1:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c1:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: -2px; +} + +.c1[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1[href]:hover { -webkit-text-decoration: none; text-decoration: none; } -.c1:focus { - outline: none; +.c1:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c1:active { + -webkit-transition: none; + transition: none; } .c1:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; + color: #8c959f; } -.c1:disabled svg { - opacity: 0.6; +.c1:disabled [data-component=ButtonCounter] { + color: inherit; } -.c1:hover { +.c1 [data-component=ButtonCounter] { + font-size: 14px; +} + +.c1[data-component=IconButton] { + display: inline-grid; + padding: unset; + place-content: center; + width: 32px; + min-width: unset; +} + +.c1[data-size="small"] { + padding: 0 8px; + height: 28px; + gap: 4px; + font-size: 12px; +} + +.c1[data-size="small"] [data-component="text"] { + line-height: calc(20 / 12); +} + +.c1[data-size="small"] [data-component=ButtonCounter] { + font-size: 12px; +} + +.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: 4px; +} + +.c1[data-size="small"][data-component=IconButton] { + width: 28px; + padding: unset; +} + +.c1[data-size="large"] { + padding: 0 16px; + height: 40px; + gap: 8px; +} + +.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: 8px; +} + +.c1[data-size="large"][data-component=IconButton] { + width: 40px; + padding: unset; +} + +.c1[data-block="block"] { + width: 100%; +} + +.c1 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c1 [data-component="text"] { + grid-area: text; + line-height: calc(20/14); + white-space: nowrap; +} + +.c1 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c1 [data-component="trailingAction"] { + margin-right: -4px; +} + +.c1 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c1 [data-component="buttonContent"] > :not(:last-child) { + margin-right: 8px; +} + +.c1:hover:not([disabled]) { background-color: #f3f4f6; border-color: rgba(31,35,40,0.15); } -.c1:focus { - outline: solid 2px #0969da; +.c1:active:not([disabled]) { + background-color: hsla(220,14%,93%,1); + border-color: rgba(31,35,40,0.15); } -.c1:active { - background-color: hsla(220,14%,94%,1); +.c1[aria-expanded=true] { + background-color: hsla(220,14%,93%,1); + border-color: rgba(31,35,40,0.15); } -.c1:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); +@media (forced-colors:active) { + .c1:focus { + outline: solid 1px transparent; + } }
`; From 754f5a9463f8f406edaa80e89800c4b0c641eb5c Mon Sep 17 00:00:00 2001 From: Rui Sousa <30603437+ItzaMi@users.noreply.github.com> Date: Fri, 2 Jun 2023 13:04:40 +0100 Subject: [PATCH 09/12] Update src/__tests__/ConfirmationDialog.test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Armağan --- src/__tests__/ConfirmationDialog.test.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index 8ec7d9cb943..d568860c084 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -64,10 +64,14 @@ const ShorthandHookFromActionMenu = () => { - - + + {text} + + + Show dialog + + + From 41e850f69a3aec61817d1a76b27b90fa0f57fe9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Fri, 7 Jul 2023 12:30:03 +1000 Subject: [PATCH 10/12] import ActionList and remove unused buttonRef and extra lines --- src/__tests__/ConfirmationDialog.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index d568860c084..22e302f467f 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -3,6 +3,7 @@ import {axe} from 'jest-axe' import React, {useCallback, useRef, useState} from 'react' import {ActionMenu} from '../ActionMenu' +import {ActionList} from '../ActionList'` import BaseStyles from '../BaseStyles' import Box from '../Box' import {Button} from '../Button' @@ -45,7 +46,6 @@ const Basic = ({confirmButtonType}: Pick { const confirm = useConfirm() const [text, setText] = useState('Show menu') - const buttonRef = useRef(null) const onButtonClick = useCallback(async () => { if ( await confirm({ @@ -64,14 +64,12 @@ const ShorthandHookFromActionMenu = () => { - {text} Show dialog - From 26c8d7423276ac6edd889d4f3709c9123584ff0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Fri, 7 Jul 2023 12:40:03 +1000 Subject: [PATCH 11/12] fix the import --- src/__tests__/ConfirmationDialog.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index 22e302f467f..50d0dbe0a91 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -3,7 +3,7 @@ import {axe} from 'jest-axe' import React, {useCallback, useRef, useState} from 'react' import {ActionMenu} from '../ActionMenu' -import {ActionList} from '../ActionList'` +import {ActionList} from '../ActionList' import BaseStyles from '../BaseStyles' import Box from '../Box' import {Button} from '../Button' From fd72658b5de4795d2c02868ed478606073d35f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Wed, 12 Jul 2023 11:17:09 +1000 Subject: [PATCH 12/12] Add changed components to .changeset/cool-schools-cheer.md --- .changeset/cool-schools-cheer.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/cool-schools-cheer.md b/.changeset/cool-schools-cheer.md index 148fd48e01c..c4296018733 100644 --- a/.changeset/cool-schools-cheer.md +++ b/.changeset/cool-schools-cheer.md @@ -3,3 +3,4 @@ --- [Dialog] Replaces deprecated button for current one +