From c42549a8dc8dda3a81aecc431c1f22880d313c09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 10 Feb 2023 15:07:22 +0100 Subject: [PATCH] Migrate Button component to semantic color tokens (#1881) --- .../circuit-ui/components/Button/Button.tsx | 146 ++++++++---- .../Button/__snapshots__/Button.spec.tsx.snap | 134 ++++++----- .../components/ButtonGroup/ButtonGroup.tsx | 4 +- .../__snapshots__/ButtonGroup.spec.tsx.snap | 216 ++++++++++-------- .../__snapshots__/Carousel.spec.js.snap | 64 +++--- .../__snapshots__/Buttons.spec.js.snap | 16 +- .../__snapshots__/CloseButton.spec.tsx.snap | 16 +- .../__snapshots__/Hamburger.spec.tsx.snap | 64 +++--- .../__snapshots__/IconButton.spec.tsx.snap | 16 +- .../__snapshots__/ImageInput.spec.tsx.snap | 80 ++++--- .../Modal/__snapshots__/Modal.spec.tsx.snap | 16 +- .../NotificationBanner.spec.tsx.snap | 32 +-- .../NotificationFullscreen.spec.tsx.snap | 48 ++-- .../NotificationInline.spec.tsx.snap | 6 +- .../NotificationModal.spec.tsx.snap | 210 +++++++++-------- .../NotificationToast.spec.tsx.snap | 96 ++++---- .../__snapshots__/Pagination.spec.tsx.snap | 46 ++-- .../__snapshots__/PageList.spec.tsx.snap | 22 +- .../MobileNavigation.spec.tsx.snap | 32 +-- .../__snapshots__/SidePanel.spec.tsx.snap | 32 +-- .../SidePanelContext.spec.tsx.snap | 48 ++-- .../Header/__snapshots__/Header.spec.tsx.snap | 32 +-- .../__snapshots__/Sidebar.spec.js.snap | 32 +-- .../__snapshots__/CloseButton.spec.tsx.snap | 32 +-- .../Tag/__snapshots__/Tag.spec.tsx.snap | 16 +- .../__snapshots__/TopNavigation.spec.tsx.snap | 16 +- 26 files changed, 845 insertions(+), 627 deletions(-) diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx index 30872691a1..3f8ed5c6c1 100644 --- a/packages/circuit-ui/components/Button/Button.tsx +++ b/packages/circuit-ui/components/Button/Button.tsx @@ -56,7 +56,7 @@ export interface BaseProps { */ 'disabled'?: boolean; /** - * Change the color from blue to red to signal to the user that the action + * Change the color from accent to danger to signal to the user that the action * is irreversible or otherwise dangerous. */ 'destructive'?: boolean; @@ -157,34 +157,93 @@ const Content = styled.span<{ isLoading: boolean }>( contentLoadingStyles, ); -const COLOR_MAP = { +const PRIMARY_COLOR_MAP = { default: { - default: 'p500', - hover: 'p700', - active: 'p900', + bg: { + idle: 'var(--cui-bg-accent-strong)', + hovered: 'var(--cui-bg-accent-strong-hovered)', + pressed: 'var(--cui-bg-accent-strong-pressed)', + }, + fg: { + idle: 'var(--cui-fg-on-strong)', + hovered: 'var(--cui-fg-on-strong-hovered)', + pressed: 'var(--cui-fg-on-strong-pressed)', + }, + border: { + idle: 'var(--cui-border-accent)', + hovered: 'var(--cui-border-accent-hovered)', + pressed: 'var(--cui-border-accent-pressed)', + }, }, destructive: { - default: 'alert', - hover: 'r700', - active: 'r900', + bg: { + idle: 'var(--cui-bg-danger-strong)', + hovered: 'var(--cui-bg-danger-strong-hovered)', + pressed: 'var(--cui-bg-danger-strong-pressed)', + }, + fg: { + idle: 'var(--cui-fg-on-strong)', + hovered: 'var(--cui-fg-on-strong-hovered)', + pressed: 'var(--cui-fg-on-strong-pressed)', + }, + border: { + idle: 'var(--cui-border-danger)', + hovered: 'var(--cui-border-danger-hovered)', + pressed: 'var(--cui-border-danger-pressed)', + }, }, } as const; const SECONDARY_COLOR_MAP = { default: { - text: 'black', - default: 'n500', - hover: 'n700', - active: 'n800', + bg: { + idle: 'var(--cui-bg-normal)', + hovered: 'var(--cui-bg-normal-hovered)', + pressed: 'var(--cui-bg-normal-pressed)', + }, + fg: { + idle: 'var(--cui-fg-normal)', + hovered: 'var(--cui-fg-normal-hovered)', + pressed: 'var(--cui-fg-normal-pressed)', + }, + border: { + idle: 'var(--cui-border-normal)', + hovered: 'var(--cui-border-normal-hovered)', + pressed: 'var(--cui-border-normal-pressed)', + }, }, destructive: { - text: 'alert', - default: 'alert', - hover: 'r700', - active: 'r900', + bg: { + idle: 'var(--cui-bg-normal)', + hovered: 'var(--cui-bg-normal-hovered)', + pressed: 'var(--cui-bg-normal-pressed)', + }, + fg: { + idle: 'var(--cui-fg-danger)', + hovered: 'var(--cui-fg-danger-hovered)', + pressed: 'var(--cui-fg-danger-pressed)', + }, + border: { + idle: 'var(--cui-border-danger)', + hovered: 'var(--cui-border-danger-hovered)', + pressed: 'var(--cui-border-danger-pressed)', + }, }, } as const; +const TERTIARY_COLOR_MAP = { + default: { + idle: 'var(--cui-fg-accent)', + hovered: 'var(--cui-fg-accent-hovered)', + pressed: 'var(--cui-fg-accent-pressed)', + }, + destructive: { + idle: 'var(--cui-fg-danger)', + hovered: 'var(--cui-fg-danger-hovered)', + pressed: 'var(--cui-fg-danger-pressed)', + }, +}; + type StyledButtonProps = Pick< ButtonProps, 'variant' | 'destructive' | 'size' | 'stretch' @@ -215,40 +274,42 @@ const baseStyles = ({ theme }: StyleProps) => css` `; const primaryStyles = ({ - theme, variant = 'secondary', destructive, -}: StyledButtonProps & StyleProps) => { +}: StyledButtonProps) => { if (variant !== 'primary') { return null; } - const colors = destructive ? COLOR_MAP.destructive : COLOR_MAP.default; + const colors = destructive + ? PRIMARY_COLOR_MAP.destructive + : PRIMARY_COLOR_MAP.default; return css` - background-color: ${theme.colors[colors.default]}; - border-color: ${theme.colors[colors.default]}; - color: ${theme.colors.white}; + background-color: ${colors.bg.idle}; + border-color: ${colors.border.idle}; + color: ${colors.fg.idle}; &:hover { - background-color: ${theme.colors[colors.hover]}; - border-color: ${theme.colors[colors.hover]}; + background-color: ${colors.bg.hovered}; + border-color: ${colors.border.hovered}; + color: ${colors.fg.hovered}; } &:active, &[aria-expanded='true'], &[aria-pressed='true'] { - background-color: ${theme.colors[colors.active]}; - border-color: ${theme.colors[colors.active]}; + background-color: ${colors.bg.pressed}; + border-color: ${colors.border.pressed}; + color: ${colors.fg.pressed}; } `; }; export const secondaryStyles = ({ - theme, variant = 'secondary', destructive, -}: StyledButtonProps & StyleProps) => { +}: StyledButtonProps) => { if (variant !== 'secondary') { return null; } @@ -258,44 +319,47 @@ export const secondaryStyles = ({ : SECONDARY_COLOR_MAP.default; return css` - background-color: ${theme.colors.white}; - border-color: ${theme.colors[colors.default]}; - color: ${theme.colors[colors.text]}; + background-color: ${colors.bg.idle}; + border-color: ${colors.border.idle}; + color: ${colors.fg.idle}; &:hover { - background-color: ${theme.colors.n100}; - border-color: ${theme.colors[colors.hover]}; + background-color: ${colors.bg.hovered}; + border-color: ${colors.border.hovered}; + color: ${colors.fg.hovered}; } &:active, &[aria-expanded='true'], &[aria-pressed='true'] { - background-color: ${theme.colors.n200}; - border-color: ${theme.colors[colors.active]}; + background-color: ${colors.bg.pressed}; + border-color: ${colors.border.pressed}; + color: ${colors.fg.pressed}; } `; }; export const tertiaryStyles = ({ - theme, variant = 'secondary', destructive, -}: StyledButtonProps & StyleProps) => { +}: StyledButtonProps) => { if (variant !== 'tertiary') { return null; } - const colors = destructive ? COLOR_MAP.destructive : COLOR_MAP.default; + const colors = destructive + ? TERTIARY_COLOR_MAP.destructive + : TERTIARY_COLOR_MAP.default; return css` background-color: transparent; border-color: transparent; - color: ${theme.colors[colors.default]}; + color: ${colors.idle}; padding-left: 0; padding-right: 0; &:hover { - color: ${theme.colors[colors.hover]}; + color: ${colors.hovered}; background-color: transparent; border-color: transparent; } @@ -303,7 +367,7 @@ export const tertiaryStyles = ({ &:active, &[aria-expanded='true'], &[aria-pressed='true'] { - color: ${theme.colors[colors.active]}; + color: ${colors.pressed}; background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap index ae58cc92ad..3a572b9291 100644 --- a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap +++ b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap @@ -57,9 +57,9 @@ exports[`Button should render with loading styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -86,15 +86,17 @@ exports[`Button should render with loading styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -217,9 +219,9 @@ exports[`Button styles should render a button with icon 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -246,15 +248,17 @@ exports[`Button styles should render a button with icon 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -389,9 +393,9 @@ exports[`Button styles should render a disabled button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -418,15 +422,17 @@ exports[`Button styles should render a disabled button 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -537,9 +543,9 @@ exports[`Button styles should render a giga button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -566,15 +572,17 @@ exports[`Button styles should render a giga button 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -684,9 +692,9 @@ exports[`Button styles should render a kilo button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(4px - 1px) calc(16px - 1px); position: relative; overflow: hidden; @@ -713,15 +721,17 @@ exports[`Button styles should render a kilo button 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -831,9 +841,9 @@ exports[`Button styles should render a primary button by default 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -860,15 +870,17 @@ exports[`Button styles should render a primary button by default 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -978,9 +990,9 @@ exports[`Button styles should render a secondary button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1007,15 +1019,17 @@ exports[`Button styles should render a secondary button 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -1125,9 +1139,9 @@ exports[`Button styles should render a stretched button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); width: 100%; position: relative; @@ -1155,15 +1169,17 @@ exports[`Button styles should render a stretched button 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -1276,7 +1292,7 @@ exports[`Button styles should render a tertiary button 1`] = ` padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -1304,7 +1320,7 @@ exports[`Button styles should render a tertiary button 1`] = ` } .circuit-0:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -1312,7 +1328,7 @@ exports[`Button styles should render a tertiary button 1`] = ` .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx index 51a2779ffe..235d5fa2b8 100644 --- a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx +++ b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx @@ -72,12 +72,12 @@ const secondaryButtonStyles = ({ }: ButtonProps & StyleProps) => css` ${theme.mq.kilo} { margin-right: ${theme.spacings.mega}; - ${secondaryStyles({ theme, variant: 'secondary', destructive })} + ${secondaryStyles({ variant: 'secondary', destructive })} } ${theme.mq.untilKilo} { margin-right: 0; margin-top: ${theme.spacings.mega}; - ${tertiaryStyles({ theme, variant: 'tertiary', destructive })} + ${tertiaryStyles({ variant: 'tertiary', destructive })} } `; diff --git a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap index 9a519ff813..43bebbdce8 100644 --- a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap +++ b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap @@ -68,9 +68,9 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -97,15 +97,17 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` } .circuit-1:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-2 { @@ -180,9 +182,9 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -209,35 +211,39 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-5 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -247,13 +253,13 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-5:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -261,7 +267,7 @@ exports[`ButtonGroup should render aligned to the center 1`] = ` .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -373,9 +379,9 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -402,15 +408,17 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` } .circuit-1:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-2 { @@ -485,9 +493,9 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -514,35 +522,39 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-5 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -552,13 +564,13 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-5:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -566,7 +578,7 @@ exports[`ButtonGroup should render aligned to the left 1`] = ` .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -678,9 +690,9 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -707,15 +719,17 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` } .circuit-1:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-2 { @@ -790,9 +804,9 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -819,35 +833,39 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-5 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -857,13 +875,13 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-5:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -871,7 +889,7 @@ exports[`ButtonGroup should render aligned to the right 1`] = ` .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -983,9 +1001,9 @@ exports[`ButtonGroup should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1012,15 +1030,17 @@ exports[`ButtonGroup should render with default styles 1`] = ` } .circuit-1:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-2 { @@ -1095,9 +1115,9 @@ exports[`ButtonGroup should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1124,35 +1144,39 @@ exports[`ButtonGroup should render with default styles 1`] = ` } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-5 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -1162,13 +1186,13 @@ exports[`ButtonGroup should render with default styles 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-5:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -1176,7 +1200,7 @@ exports[`ButtonGroup should render with default styles 1`] = ` .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap b/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap index 0b8dee877d..586febe7ce 100644 --- a/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap +++ b/packages/circuit-ui/components/Carousel/__snapshots__/Carousel.spec.js.snap @@ -362,9 +362,9 @@ exports[`Carousel styles should render with children as a function 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -393,15 +393,17 @@ exports[`Carousel styles should render with children as a function 1`] = ` } .circuit-49:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-49:active, .circuit-49[aria-expanded='true'], .circuit-49[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-49:first-of-type { @@ -1040,9 +1042,9 @@ exports[`Carousel styles should render with children as a node 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1071,15 +1073,17 @@ exports[`Carousel styles should render with children as a node 1`] = ` } .circuit-49:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-49:active, .circuit-49[aria-expanded='true'], .circuit-49[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-49:first-of-type { @@ -1717,9 +1721,9 @@ exports[`Carousel styles should render with default paused styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1748,15 +1752,17 @@ exports[`Carousel styles should render with default paused styles 1`] = ` } .circuit-49:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-49:active, .circuit-49[aria-expanded='true'], .circuit-49[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-49:first-of-type { @@ -2365,9 +2371,9 @@ exports[`Carousel styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -2396,15 +2402,17 @@ exports[`Carousel styles should render with default styles 1`] = ` } .circuit-49:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-49:active, .circuit-49[aria-expanded='true'], .circuit-49[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-49:first-of-type { diff --git a/packages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/packages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap index 03bb5c2ae6..267ec8ff23 100644 --- a/packages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap +++ b/packages/circuit-ui/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap @@ -56,9 +56,9 @@ exports[`Buttons styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -87,15 +87,17 @@ exports[`Buttons styles should render with default styles 1`] = ` } .circuit-3:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-3:active, .circuit-3[aria-expanded='true'], .circuit-3[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-3:first-of-type { diff --git a/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap b/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap index 926f54ee7b..4f8a95d2cd 100644 --- a/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap +++ b/packages/circuit-ui/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap @@ -41,9 +41,9 @@ exports[`CloseButton should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -72,15 +72,17 @@ exports[`CloseButton should render with default styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { diff --git a/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap b/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap index 699d684d1c..8d9f026d38 100644 --- a/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap +++ b/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap @@ -41,9 +41,9 @@ exports[`Hamburger should render with active styles when passed the isActive pro border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -73,15 +73,17 @@ exports[`Hamburger should render with active styles when passed the isActive pro } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -291,9 +293,9 @@ exports[`Hamburger should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -323,15 +325,17 @@ exports[`Hamburger should render with default styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -514,9 +518,9 @@ exports[`Hamburger should render with giga styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -546,15 +550,17 @@ exports[`Hamburger should render with giga styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { @@ -737,9 +743,9 @@ exports[`Hamburger should render with kilo styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -769,15 +775,17 @@ exports[`Hamburger should render with kilo styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { diff --git a/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap b/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap index 7f02524f4d..d8c880309d 100644 --- a/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap +++ b/packages/circuit-ui/components/IconButton/__snapshots__/IconButton.spec.tsx.snap @@ -41,9 +41,9 @@ exports[`IconButton should render with the default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -71,15 +71,17 @@ exports[`IconButton should render with the default styles 1`] = ` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-1 { diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap index 585d6d0ed0..f38c37d6f5 100644 --- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap +++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap @@ -168,9 +168,9 @@ exports[`ImageInput Styles should render with a custom component 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #DE331D; - border-color: #DE331D; - color: #FFF; + background-color: var(--cui-bg-danger-strong); + border-color: var(--cui-border-danger); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -201,15 +201,17 @@ exports[`ImageInput Styles should render with a custom component 1`] = ` } .circuit-5:hover { - background-color: #B22426; - border-color: #B22426; + background-color: var(--cui-bg-danger-strong-hovered); + border-color: var(--cui-border-danger-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #941618; - border-color: #941618; + background-color: var(--cui-bg-danger-strong-pressed); + border-color: var(--cui-border-danger-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-6 { @@ -551,9 +553,9 @@ exports[`ImageInput Styles should render with a giga button 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -586,15 +588,17 @@ exports[`ImageInput Styles should render with a giga button 1`] = ` } .circuit-6:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-6 svg { @@ -937,9 +941,9 @@ exports[`ImageInput Styles should render with an existing image 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #DE331D; - border-color: #DE331D; - color: #FFF; + background-color: var(--cui-bg-danger-strong); + border-color: var(--cui-border-danger); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -970,15 +974,17 @@ exports[`ImageInput Styles should render with an existing image 1`] = ` } .circuit-6:hover { - background-color: #B22426; - border-color: #B22426; + background-color: var(--cui-bg-danger-strong-hovered); + border-color: var(--cui-border-danger-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #941618; - border-color: #941618; + background-color: var(--cui-bg-danger-strong-pressed); + border-color: var(--cui-border-danger-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-7 { @@ -1320,9 +1326,9 @@ exports[`ImageInput Styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1354,15 +1360,17 @@ exports[`ImageInput Styles should render with default styles 1`] = ` } .circuit-6:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-7 { @@ -1708,9 +1716,9 @@ exports[`ImageInput Styles should render with invalid styles and an error messag border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1742,15 +1750,17 @@ exports[`ImageInput Styles should render with invalid styles and an error messag } .circuit-6:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-7 { diff --git a/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap index 73015b4a65..f1089e3097 100644 --- a/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap +++ b/packages/circuit-ui/components/Modal/__snapshots__/Modal.spec.tsx.snap @@ -150,9 +150,9 @@ exports[`Modal should match the snapshot 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -185,15 +185,17 @@ exports[`Modal should match the snapshot 1`] = ` } .circuit-3:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-3:active, .circuit-3[aria-expanded='true'], .circuit-3[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-4 { diff --git a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap b/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap index 95f8816b43..7332870579 100644 --- a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap +++ b/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap @@ -111,9 +111,9 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -142,15 +142,17 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = ` } .circuit-4:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-4:active, .circuit-4[aria-expanded='true'], .circuit-4[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } @media (min-width: 768px) { @@ -377,9 +379,9 @@ exports[`NotificationBanner styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -408,15 +410,17 @@ exports[`NotificationBanner styles should render with default styles 1`] = ` } .circuit-4:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-4:active, .circuit-4[aria-expanded='true'], .circuit-4[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } @media (min-width: 768px) { diff --git a/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap b/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap index 47f510698b..42a6d84885 100644 --- a/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap +++ b/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap @@ -106,9 +106,9 @@ exports[`NotificationFullscreen styles should render with an svg component as th border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -135,15 +135,17 @@ exports[`NotificationFullscreen styles should render with an svg component as th } .circuit-5:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-6 { @@ -357,9 +359,9 @@ exports[`NotificationFullscreen styles should render with body text 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -386,15 +388,17 @@ exports[`NotificationFullscreen styles should render with body text 1`] = ` } .circuit-5:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-6 { @@ -593,9 +597,9 @@ exports[`NotificationFullscreen styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -622,15 +626,17 @@ exports[`NotificationFullscreen styles should render with default styles 1`] = ` } .circuit-4:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-4:active, .circuit-4[aria-expanded='true'], .circuit-4[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-5 { diff --git a/packages/circuit-ui/components/NotificationInline/__snapshots__/NotificationInline.spec.tsx.snap b/packages/circuit-ui/components/NotificationInline/__snapshots__/NotificationInline.spec.tsx.snap index 0960dddbee..b1c8b06f9a 100644 --- a/packages/circuit-ui/components/NotificationInline/__snapshots__/NotificationInline.spec.tsx.snap +++ b/packages/circuit-ui/components/NotificationInline/__snapshots__/NotificationInline.spec.tsx.snap @@ -618,7 +618,7 @@ exports[`NotificationInline styles should render notification toast with an acti padding: calc(4px - 1px) calc(16px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -650,7 +650,7 @@ exports[`NotificationInline styles should render notification toast with an acti } .circuit-6:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -658,7 +658,7 @@ exports[`NotificationInline styles should render notification toast with an acti .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap b/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap index f02934d8f4..703b8a9f57 100644 --- a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap +++ b/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap @@ -89,9 +89,9 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -123,15 +123,17 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` } .circuit-2:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { @@ -268,9 +270,9 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -297,15 +299,17 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` } .circuit-12:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-12:active, .circuit-12[aria-expanded='true'], .circuit-12[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-16 { @@ -332,9 +336,9 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -361,35 +365,39 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` } .circuit-16:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-16:active, .circuit-16[aria-expanded='true'], .circuit-16[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-16 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-16:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-16:active, .circuit-16[aria-expanded='true'], .circuit-16[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -399,13 +407,13 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-16:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -413,7 +421,7 @@ exports[`NotificationModal styles should render with an SVG 1`] = ` .circuit-16:active, .circuit-16[aria-expanded='true'], .circuit-16[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -644,9 +652,9 @@ exports[`NotificationModal styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -678,15 +686,17 @@ exports[`NotificationModal styles should render with default styles 1`] = ` } .circuit-2:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { @@ -822,9 +832,9 @@ exports[`NotificationModal styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -851,15 +861,17 @@ exports[`NotificationModal styles should render with default styles 1`] = ` } .circuit-11:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-11:active, .circuit-11[aria-expanded='true'], .circuit-11[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-15 { @@ -886,9 +898,9 @@ exports[`NotificationModal styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -915,35 +927,39 @@ exports[`NotificationModal styles should render with default styles 1`] = ` } .circuit-15:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-15:active, .circuit-15[aria-expanded='true'], .circuit-15[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-15 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-15:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-15:active, .circuit-15[aria-expanded='true'], .circuit-15[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -953,13 +969,13 @@ exports[`NotificationModal styles should render with default styles 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-15:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -967,7 +983,7 @@ exports[`NotificationModal styles should render with default styles 1`] = ` .circuit-15:active, .circuit-15[aria-expanded='true'], .circuit-15[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -1182,9 +1198,9 @@ exports[`NotificationModal styles should render without an image 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1216,15 +1232,17 @@ exports[`NotificationModal styles should render without an image 1`] = ` } .circuit-2:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { @@ -1352,9 +1370,9 @@ exports[`NotificationModal styles should render without an image 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1381,15 +1399,17 @@ exports[`NotificationModal styles should render without an image 1`] = ` } .circuit-10:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-10:active, .circuit-10[aria-expanded='true'], .circuit-10[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-14 { @@ -1416,9 +1436,9 @@ exports[`NotificationModal styles should render without an image 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1445,35 +1465,39 @@ exports[`NotificationModal styles should render without an image 1`] = ` } .circuit-14:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-14:active, .circuit-14[aria-expanded='true'], .circuit-14[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 480px) { .circuit-14 { margin-right: 16px; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); } .circuit-14:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-14:active, .circuit-14[aria-expanded='true'], .circuit-14[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } } @@ -1483,13 +1507,13 @@ exports[`NotificationModal styles should render without an image 1`] = ` margin-top: 16px; background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; } .circuit-14:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -1497,7 +1521,7 @@ exports[`NotificationModal styles should render without an image 1`] = ` .circuit-14:active, .circuit-14[aria-expanded='true'], .circuit-14[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap b/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap index b20e128f1a..47843e2380 100644 --- a/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap +++ b/packages/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap @@ -123,9 +123,9 @@ exports[`NotificationToast styles should render with a headline 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -167,15 +167,17 @@ exports[`NotificationToast styles should render with a headline 1`] = ` } .circuit-7:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-7:active, .circuit-7[aria-expanded='true'], .circuit-7[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-8 { @@ -418,9 +420,9 @@ exports[`NotificationToast styles should render with alert variant styles 1`] = border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -462,15 +464,17 @@ exports[`NotificationToast styles should render with alert variant styles 1`] = } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -708,9 +712,9 @@ exports[`NotificationToast styles should render with confirm variant styles 1`] border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -752,15 +756,17 @@ exports[`NotificationToast styles should render with confirm variant styles 1`] } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -998,9 +1004,9 @@ exports[`NotificationToast styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1042,15 +1048,17 @@ exports[`NotificationToast styles should render with default styles 1`] = ` } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -1288,9 +1296,9 @@ exports[`NotificationToast styles should render with info variant styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1332,15 +1340,17 @@ exports[`NotificationToast styles should render with info variant styles 1`] = ` } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -1595,9 +1605,9 @@ exports[`NotificationToast styles should render with notify variant styles 1`] = border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -1639,15 +1649,17 @@ exports[`NotificationToast styles should render with notify variant styles 1`] = } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap index d62a882c4b..4cc99a2f32 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -61,7 +61,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -94,7 +94,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` } .circuit-1:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -102,7 +102,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -191,9 +191,9 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(4px - 1px) calc(16px - 1px); position: relative; overflow: hidden; @@ -223,15 +223,17 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` } .circuit-7:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-7:active, .circuit-7[aria-expanded='true'], .circuit-7[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } li:last-child .circuit-7 { @@ -265,7 +267,7 @@ li:last-child .circuit-7 { padding: calc(4px - 1px) calc(16px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -296,7 +298,7 @@ li:last-child .circuit-7 { } .circuit-11:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -304,7 +306,7 @@ li:last-child .circuit-7 { .circuit-11:active, .circuit-11[aria-expanded='true'], .circuit-11[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -340,7 +342,7 @@ li:last-child .circuit-11 { padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -373,7 +375,7 @@ li:last-child .circuit-11 { } .circuit-27:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -381,7 +383,7 @@ li:last-child .circuit-11 { .circuit-27:active, .circuit-27[aria-expanded='true'], .circuit-27[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -634,7 +636,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -667,7 +669,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] } .circuit-1:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -675,7 +677,7 @@ exports[`Pagination with more than 5 pages should render with default styles 1`] .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } @@ -870,7 +872,7 @@ select:not(:active)~.circuit-13 { padding: calc(12px - 1px) calc(24px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -903,7 +905,7 @@ select:not(:active)~.circuit-13 { } .circuit-15:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -911,7 +913,7 @@ select:not(:active)~.circuit-13 { .circuit-15:active, .circuit-15[aria-expanded='true'], .circuit-15[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap index fcc86528bb..3a46acba7c 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap @@ -53,9 +53,9 @@ exports[`PageList styles should render with default styles 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(4px - 1px) calc(16px - 1px); position: relative; overflow: hidden; @@ -85,15 +85,17 @@ exports[`PageList styles should render with default styles 1`] = ` } .circuit-1:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-1:active, .circuit-1[aria-expanded='true'], .circuit-1[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } li:last-child .circuit-1 { @@ -175,7 +177,7 @@ li:last-child .circuit-1 { padding: calc(4px - 1px) calc(16px - 1px); background-color: transparent; border-color: transparent; - color: #3063E9; + color: var(--cui-fg-accent); padding-left: 0; padding-right: 0; position: relative; @@ -206,7 +208,7 @@ li:last-child .circuit-1 { } .circuit-5:hover { - color: #234BC3; + color: var(--cui-fg-accent-hovered); background-color: transparent; border-color: transparent; } @@ -214,7 +216,7 @@ li:last-child .circuit-1 { .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - color: #1A368E; + color: var(--cui-fg-accent-pressed); background-color: transparent; border-color: transparent; } diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/__snapshots__/MobileNavigation.spec.tsx.snap b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/__snapshots__/MobileNavigation.spec.tsx.snap index c47f992af5..99800b9a55 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/__snapshots__/MobileNavigation.spec.tsx.snap +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/__snapshots__/MobileNavigation.spec.tsx.snap @@ -115,9 +115,9 @@ exports[`MobileNavigation styles should render with secondary links 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -147,15 +147,17 @@ exports[`MobileNavigation styles should render with secondary links 1`] = ` } .circuit-4:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-4:active, .circuit-4[aria-expanded='true'], .circuit-4[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-5 { @@ -754,9 +756,9 @@ exports[`MobileNavigation styles should render without secondary links 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -786,15 +788,17 @@ exports[`MobileNavigation styles should render without secondary links 1`] = ` } .circuit-4:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-4:active, .circuit-4[aria-expanded='true'], .circuit-4[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-5 { diff --git a/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanel.spec.tsx.snap b/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanel.spec.tsx.snap index a4fbfa4f63..2aa08c75fb 100644 --- a/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanel.spec.tsx.snap +++ b/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanel.spec.tsx.snap @@ -123,9 +123,9 @@ exports[`SidePanel should match the snapshot 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -158,15 +158,17 @@ exports[`SidePanel should match the snapshot 1`] = ` } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-6 { @@ -449,9 +451,9 @@ exports[`SidePanel when the panel is on mobile resolution should match the snaps border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -484,15 +486,17 @@ exports[`SidePanel when the panel is on mobile resolution should match the snaps } .circuit-5:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-5:active, .circuit-5[aria-expanded='true'], .circuit-5[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-6 { diff --git a/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanelContext.spec.tsx.snap b/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanelContext.spec.tsx.snap index 110064d5b2..985ca5bd9e 100644 --- a/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanelContext.spec.tsx.snap +++ b/packages/circuit-ui/components/SidePanel/__snapshots__/SidePanelContext.spec.tsx.snap @@ -150,9 +150,9 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -185,15 +185,17 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -490,9 +492,9 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -525,15 +527,17 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { @@ -829,9 +833,9 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -864,15 +868,17 @@ exports[`SidePanelContext SidePanelProvider render should render the side panel } .circuit-6:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-6:active, .circuit-6[aria-expanded='true'], .circuit-6[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-7 { diff --git a/packages/circuit-ui/components/SidePanel/components/Header/__snapshots__/Header.spec.tsx.snap b/packages/circuit-ui/components/SidePanel/components/Header/__snapshots__/Header.spec.tsx.snap index 88a5439ad4..ac4ef5a67c 100644 --- a/packages/circuit-ui/components/SidePanel/components/Header/__snapshots__/Header.spec.tsx.snap +++ b/packages/circuit-ui/components/SidePanel/components/Header/__snapshots__/Header.spec.tsx.snap @@ -87,9 +87,9 @@ exports[`Header should have a bottom separator when sticky 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -122,15 +122,17 @@ exports[`Header should have a bottom separator when sticky 1`] = ` } .circuit-2:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-3 { @@ -312,9 +314,9 @@ exports[`Header should match the snapshot 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -347,15 +349,17 @@ exports[`Header should match the snapshot 1`] = ` } .circuit-2:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-3 { diff --git a/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap index e15946d3f1..c67cb7f792 100644 --- a/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap +++ b/packages/circuit-ui/components/Sidebar/__snapshots__/Sidebar.spec.js.snap @@ -114,9 +114,9 @@ HTMLCollection [ border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -155,15 +155,17 @@ HTMLCollection [ } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 960px) { @@ -359,9 +361,9 @@ HTMLCollection [ border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -398,15 +400,17 @@ HTMLCollection [ } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 960px) { diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap b/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap index 26560f3173..8a389023da 100644 --- a/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap +++ b/packages/circuit-ui/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.tsx.snap @@ -41,9 +41,9 @@ exports[`CloseButton styles should render and match snapshot when not visible 1` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -80,15 +80,17 @@ exports[`CloseButton styles should render and match snapshot when not visible 1` } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 960px) { @@ -225,9 +227,9 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] = border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -266,15 +268,17 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] = } .circuit-0:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-0:active, .circuit-0[aria-expanded='true'], .circuit-0[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } @media (min-width: 960px) { diff --git a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap index cfd9ffd402..dce09eebdb 100644 --- a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap +++ b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap @@ -173,9 +173,9 @@ exports[`Tag when is selected should change the close icon color 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #3063E9; - border-color: #3063E9; - color: #FFF; + background-color: var(--cui-bg-accent-strong); + border-color: var(--cui-border-accent); + color: var(--cui-fg-on-strong); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -213,15 +213,17 @@ exports[`Tag when is selected should change the close icon color 1`] = ` } .circuit-2:hover { - background-color: #234BC3; - border-color: #234BC3; + background-color: var(--cui-bg-accent-strong-hovered); + border-color: var(--cui-border-accent-hovered); + color: var(--cui-fg-on-strong-hovered); } .circuit-2:active, .circuit-2[aria-expanded='true'], .circuit-2[aria-pressed='true'] { - background-color: #1A368E; - border-color: #1A368E; + background-color: var(--cui-bg-accent-strong-pressed); + border-color: var(--cui-border-accent-pressed); + color: var(--cui-fg-on-strong-pressed); } .circuit-3 { diff --git a/packages/circuit-ui/components/TopNavigation/__snapshots__/TopNavigation.spec.tsx.snap b/packages/circuit-ui/components/TopNavigation/__snapshots__/TopNavigation.spec.tsx.snap index 2efb77e6fa..835393fac7 100644 --- a/packages/circuit-ui/components/TopNavigation/__snapshots__/TopNavigation.spec.tsx.snap +++ b/packages/circuit-ui/components/TopNavigation/__snapshots__/TopNavigation.spec.tsx.snap @@ -88,9 +88,9 @@ exports[`TopNavigation styles should match the snapshot 1`] = ` border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - background-color: #FFF; - border-color: #999; - color: #000; + background-color: var(--cui-bg-normal); + border-color: var(--cui-border-normal); + color: var(--cui-fg-normal); padding: calc(12px - 1px) calc(24px - 1px); position: relative; overflow: hidden; @@ -123,15 +123,17 @@ exports[`TopNavigation styles should match the snapshot 1`] = ` } .circuit-3:hover { - background-color: #F5F5F5; - border-color: #666; + background-color: var(--cui-bg-normal-hovered); + border-color: var(--cui-border-normal-hovered); + color: var(--cui-fg-normal-hovered); } .circuit-3:active, .circuit-3[aria-expanded='true'], .circuit-3[aria-pressed='true'] { - background-color: #E6E6E6; - border-color: #333; + background-color: var(--cui-bg-normal-pressed); + border-color: var(--cui-border-normal-pressed); + color: var(--cui-fg-normal-pressed); } .circuit-3:focus {