From 42dd2f5b7b1055583b4260d852c35d9d15b627aa Mon Sep 17 00:00:00 2001 From: tbradbury Date: Tue, 28 Jun 2022 14:22:58 +0100 Subject: [PATCH] feat(PPDSC-2151): Add Outline Style Presets (#214) * feat(PPDSC-2151): add outline to style Preset * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): interactiveFocus darktheme value * feat(PPDSC-2151): interactiveFocus darktheme value * feat(PPDSC-2151): update button style presets * feat(PPDSC-2151): update icon-button style presets * feat(PPDSC-2151): checkbox and radiobutton updated * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): update inputField preset * feat(PPDSC-2151): update slider preset * feat(PPDSC-2151): update switch preset * feat(PPDSC-2151): update link preset * feat(PPDSC-2151): remove safari css for link * feat(PPDSC-2151): sort conflicts from merge * feat(PPDSC-2151): update tab preset * feat(PPDSC-2151): update menu preset * feat(PPDSC-2151): update tag preset * feat(PPDSC-2151): update switch component * feat(PPDSC-2151): add Sarari style for consistency * feat(PPDSC-2151): add padding to decorator * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): checkbox and radiobutton update * feat(PPDSC-2151): update inputField focus * feat(PPDSC-2151): update safari style for darkmode * feat(PPDSC-2152): add documentation for outline * feat(PPDSC-2151): fix axe error * feat(PPDSC-2151): update style-presets page * feat(PPDSC-2151): add storybook outline examples * feat(PPDSC-2151): add new images * feat(PPDSC-2151): remove coma * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): fix typos * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): update pseudo state tests * feat(PPDSC-2151): update snapshots * feat(PPDSC-2151): update SVG components * feat(PPDSC-2151): remove padding from storybook * feat(PPDSC-2151): refactor call * feat(PPDSC-2151): change from outline to outlines * feat(PPDSC-2151): defaultFocusVisible added * feat(PPDSC-2151): update link * feat(PPDSC-2151): add outline to accordion * feat(PPDSC-2151): changes based on review --- .../__snapshots__/site-header.test.tsx.snap | 402 +- .../__snapshots__/component-api.test.tsx.snap | 35 +- .../checked-focus-visible-hover.tsx | 131 + .../checked-invalid-focus-visible-hover.tsx | 145 + .../checked-valid-focus-visible-hover.tsx | 141 + .../style-presets/focus-visible-hover.tsx | 131 + .../invalid-focus-visible-hover.tsx | 143 + .../valid-focus-visible-hover.tsx | 139 + .../__snapshots__/meta.test.tsx.snap | 60 + site/components/outline-card/index.ts | 1 + site/components/outline-card/outline-card.tsx | 94 + .../sidebar-navigation.test.tsx.snap | 45 + .../__snapshots__/sidebar.test.tsx.snap | 390 +- site/components/site-header.tsx | 6 +- .../__snapshots__/table.test.tsx.snap | 15 + site/components/table/column-map.ts | 5 + site/components/table/column-renderer.tsx | 36 + site/components/table/types.ts | 7 +- .../tabs-with-table.test.tsx.snap | 35 +- .../__snapshots__/svg-previewer.test.tsx.snap | 90 + site/pages/theme/foundation/outlines.tsx | 210 + site/pages/theme/presets/style-presets.tsx | 114 + site/routes.ts | 16 + .../__snapshots__/doc-theme.test.ts.snap | 500 +- site/theme/colors-dark.json | 3 +- site/theme/doc-theme.ts | 3 + site/theme/style-presets.ts | 42 + .../__snapshots__/index.test.ts.snap | 1 + .../__snapshots__/accordion.test.tsx.snap | 154 + src/accordion/__tests__/accordion.stories.tsx | 6 + src/accordion/style-presets.ts | 7 +- .../audio-player-composable.test.tsx.snap | 150 + .../__snapshots__/audio-player.test.tsx.snap | 255 + .../__snapshots__/popout-button.test.tsx.snap | 15 + .../__snapshots__/banner.test.tsx.snap | 210 + src/base-switch/base-switch.tsx | 9 +- src/base-switch/styled.tsx | 17 +- .../__snapshots__/button.test.tsx.snap | 255 + src/button/style-presets.ts | 16 + .../__snapshots__/byline.test.tsx.snap | 60 + .../__snapshots__/card.test.tsx.snap | 180 + .../__snapshots__/checkbox.test.tsx.snap | 4317 +++++++++++++++-- src/checkbox/__tests__/checkbox.stories.tsx | 2 + src/checkbox/__tests__/checkbox.test.tsx | 19 + src/checkbox/style-presets.ts | 202 +- .../consent-settings-link.test.tsx.snap | 45 + .../__snapshots__/drawer.test.tsx.snap | 240 + .../__snapshots__/fieldset.test.tsx.snap | 675 ++- .../__snapshots__/form.test.tsx.snap | 1399 +++++- .../__snapshots__/icon-button.test.tsx.snap | 105 + src/icon-button/style-presets.ts | 16 + .../__snapshots__/link.test.tsx.snap | 120 + src/link/__tests__/link.stories.tsx | 7 +- src/link/style-presets.ts | 5 + .../__snapshots__/menu.test.tsx.snap | 465 ++ src/menu/style-presets.ts | 4 + .../__snapshots__/modal.test.tsx.snap | 150 + .../__snapshots__/radio-button.test.tsx.snap | 171 +- src/radio-button/style-presets.ts | 137 +- .../__snapshots__/select.test.tsx.snap | 302 +- .../__snapshots__/share-bar.test.tsx.snap | 225 + .../__snapshots__/slider.test.tsx.snap | 128 + .../stateful-slider.test.tsx.snap | 16 + src/slider/style-presets.ts | 5 + .../__snapshots__/stack-child.test.tsx.snap | 60 + .../__snapshots__/switch.test.tsx.snap | 902 +++- src/switch/style-presets.ts | 19 +- .../__snapshots__/tabs.test.tsx.snap | 3756 ++++++++------ src/tabs/__tests__/tabs.test.tsx | 23 +- src/tabs/defaults.ts | 3 + src/tabs/style-presets.ts | 16 + src/tabs/styled.tsx | 26 +- src/tabs/tab-panel.tsx | 38 +- .../__tests__/__snapshots__/tag.test.tsx.snap | 330 ++ src/tag/__tests__/tag.stories.tsx | 9 +- src/tag/style-presets.ts | 3 + .../__snapshots__/text-field.test.tsx.snap | 170 +- .../__snapshots__/creator.test.ts.snap | 18 +- .../__snapshots__/theme.test.ts.snap | 534 +- .../__snapshots__/index.test.ts.snap | 18 +- .../foundations/__tests__/outline.stories.tsx | 220 + src/theme/foundations/index.ts | 1 + src/theme/foundations/outlines.ts | 8 + src/theme/newskit-dark.ts | 4 + src/theme/presets/style-presets.ts | 10 +- src/theme/presets/types.ts | 13 + src/theme/types.ts | 1 + .../__snapshots__/title-bar.test.tsx.snap | 45 + .../__snapshots__/toast.test.tsx.snap | 45 + .../unordered-list.test.tsx.snap | 15 + .../__snapshots__/style-preset.test.tsx.snap | 196 + src/utils/__tests__/style-preset.test.tsx | 103 + src/utils/default-focus-visible.ts | 7 + src/utils/style/getters.ts | 1 + src/utils/style/style-preset.ts | 42 +- .../volume-control.test.tsx.snap | 135 + 96 files changed, 17400 insertions(+), 2400 deletions(-) create mode 100644 site/components/illustrations/theme/style-presets/checked-focus-visible-hover.tsx create mode 100644 site/components/illustrations/theme/style-presets/checked-invalid-focus-visible-hover.tsx create mode 100644 site/components/illustrations/theme/style-presets/checked-valid-focus-visible-hover.tsx create mode 100644 site/components/illustrations/theme/style-presets/focus-visible-hover.tsx create mode 100644 site/components/illustrations/theme/style-presets/invalid-focus-visible-hover.tsx create mode 100644 site/components/illustrations/theme/style-presets/valid-focus-visible-hover.tsx create mode 100644 site/components/outline-card/index.ts create mode 100644 site/components/outline-card/outline-card.tsx create mode 100644 site/pages/theme/foundation/outlines.tsx create mode 100644 src/theme/foundations/__tests__/outline.stories.tsx create mode 100644 src/theme/foundations/outlines.ts create mode 100644 src/utils/default-focus-visible.ts diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index 63d1f197c2..823a12fc44 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -137,6 +137,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi fill: #C0C0C0; } +.emotion-4:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-4:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-4 { transition-property: background-color; @@ -365,6 +380,68 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi justify-self: start; } +.emotion-17 { + display: inline-block; + color: #577FFB; + -webkit-text-decoration: none; + text-decoration: none; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-17 { + transition-property: color,fill; + transition-duration: 200ms,200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-17 { + transition-property: color,fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-17 svg { + fill: #577FFB; +} + +.emotion-17:hover:not(:disabled) { + color: #3358CC; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-17:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-17:active:not(:disabled) { + color: #213A82; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-17:active:not(:disabled) svg { + fill: #213A82; +} + +.emotion-17:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-17:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-22 { grid-area: menu; justify-self: start; @@ -468,6 +545,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi text-decoration: none; } +.emotion-25:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-25:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-25 { transition-property: background-color; @@ -585,6 +677,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi text-decoration: none; } +.emotion-30:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-30:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-30 { transition-property: background-color; @@ -681,6 +788,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi fill: #C0C0C0; } +.emotion-50:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-50:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-50 { transition-property: background-color; @@ -791,6 +913,21 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi background-color: #CCCCCC; } +.emotion-57:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-57:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-57 { transition-property: background-color; @@ -953,7 +1090,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi class="emotion-16" > { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default CheckedFocusVisibleHover; diff --git a/site/components/illustrations/theme/style-presets/checked-invalid-focus-visible-hover.tsx b/site/components/illustrations/theme/style-presets/checked-invalid-focus-visible-hover.tsx new file mode 100644 index 0000000000..3d82ee4fef --- /dev/null +++ b/site/components/illustrations/theme/style-presets/checked-invalid-focus-visible-hover.tsx @@ -0,0 +1,145 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const CheckedInvalidFocusVisibleHover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default CheckedInvalidFocusVisibleHover; diff --git a/site/components/illustrations/theme/style-presets/checked-valid-focus-visible-hover.tsx b/site/components/illustrations/theme/style-presets/checked-valid-focus-visible-hover.tsx new file mode 100644 index 0000000000..2f5358edac --- /dev/null +++ b/site/components/illustrations/theme/style-presets/checked-valid-focus-visible-hover.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const CheckedValidFocusVisibleHover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default CheckedValidFocusVisibleHover; diff --git a/site/components/illustrations/theme/style-presets/focus-visible-hover.tsx b/site/components/illustrations/theme/style-presets/focus-visible-hover.tsx new file mode 100644 index 0000000000..f2906159ea --- /dev/null +++ b/site/components/illustrations/theme/style-presets/focus-visible-hover.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const FocusVisibleHover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FocusVisibleHover; diff --git a/site/components/illustrations/theme/style-presets/invalid-focus-visible-hover.tsx b/site/components/illustrations/theme/style-presets/invalid-focus-visible-hover.tsx new file mode 100644 index 0000000000..3cafcf0631 --- /dev/null +++ b/site/components/illustrations/theme/style-presets/invalid-focus-visible-hover.tsx @@ -0,0 +1,143 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const InvalidFocusVisibleHover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default InvalidFocusVisibleHover; diff --git a/site/components/illustrations/theme/style-presets/valid-focus-visible-hover.tsx b/site/components/illustrations/theme/style-presets/valid-focus-visible-hover.tsx new file mode 100644 index 0000000000..86c1bc0c86 --- /dev/null +++ b/site/components/illustrations/theme/style-presets/valid-focus-visible-hover.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const ValidFocusVisibleHover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default ValidFocusVisibleHover; diff --git a/site/components/meta/__tests__/__snapshots__/meta.test.tsx.snap b/site/components/meta/__tests__/__snapshots__/meta.test.tsx.snap index 66243640d3..faa7fe7b4b 100644 --- a/site/components/meta/__tests__/__snapshots__/meta.test.tsx.snap +++ b/site/components/meta/__tests__/__snapshots__/meta.test.tsx.snap @@ -420,6 +420,21 @@ exports[`Meta renders with mandatory props 1`] = ` fill: #C0C0C0; } +.emotion-26:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-26:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-26 { transition-property: background-color; @@ -1483,6 +1498,21 @@ exports[`Meta renders with mandatory props and figma button 1`] = ` fill: #C0C0C0; } +.emotion-26:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-26:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-26 { transition-property: background-color; @@ -2594,6 +2624,21 @@ exports[`Meta renders with mandatory props and version above v5 1`] = ` fill: #5E44E4; } +.emotion-23:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-23:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-24 { display: -webkit-box; display: -webkit-flex; @@ -2766,6 +2811,21 @@ exports[`Meta renders with mandatory props and version above v5 1`] = ` fill: #C0C0C0; } +.emotion-32:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-32:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-32 { transition-property: background-color; diff --git a/site/components/outline-card/index.ts b/site/components/outline-card/index.ts new file mode 100644 index 0000000000..cf023c77bf --- /dev/null +++ b/site/components/outline-card/index.ts @@ -0,0 +1 @@ +export * from './outline-card'; diff --git a/site/components/outline-card/outline-card.tsx b/site/components/outline-card/outline-card.tsx new file mode 100644 index 0000000000..e13914f0e2 --- /dev/null +++ b/site/components/outline-card/outline-card.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { + getBorderCssFromTheme, + getOutlineCssFromTheme, + getColorCssFromTheme, + getSizingCssFromTheme, + styled, + newskitLightTheme, + compileTheme, +} from 'newskit'; + +export interface OutlineCardProps { + outlineStyleToken?: string; + outlineWidthToken?: string; + outlineOffsetToken?: string; + safariOutlineStyleToken?: string; + safariOutlineOffsetToken?: string; +} + +const compiledNewskitLightTheme = compileTheme(newskitLightTheme); + +const StyledOutlineCard = styled.div<{ + outlineStyleToken: string; + outlineWidthToken: string; + outlineOffsetToken: string; + safariOutlineStyleToken?: string; + safariOutlineOffsetToken?: string; +}>` + display: flex; + ${getSizingCssFromTheme('width', 'sizing100')}; + ${getSizingCssFromTheme('height', 'sizing100')}; + ${getSizingCssFromTheme('margin-left', 'sizing010')}; + border: solid; + ${getColorCssFromTheme('borderColor', 'interface060')}; + ${getColorCssFromTheme('background', 'interface020')}; + + ${getBorderCssFromTheme( + 'borderRadius', + 'borderRadiusRounded020', + )({theme: compiledNewskitLightTheme})}; + + ${getOutlineCssFromTheme( + 'outlineColor', + 'outlineColorDefault', + )({theme: compiledNewskitLightTheme})}; + + ${({outlineStyleToken}) => + getOutlineCssFromTheme( + 'outlineStyle', + outlineStyleToken, + )({theme: compiledNewskitLightTheme})}; + + ${({outlineWidthToken}) => + getOutlineCssFromTheme( + 'outlineWidth', + outlineWidthToken, + )({theme: compiledNewskitLightTheme})}; + + ${({outlineOffsetToken}) => + getOutlineCssFromTheme( + 'outlineOffset', + outlineOffsetToken, + )({theme: compiledNewskitLightTheme})}; + + ${({safariOutlineStyleToken}) => + safariOutlineStyleToken && + getOutlineCssFromTheme( + 'outlineStyle', + safariOutlineStyleToken, + )({theme: compiledNewskitLightTheme})}; + + ${({safariOutlineOffsetToken}) => + safariOutlineOffsetToken && + getOutlineCssFromTheme( + 'outlineOffset', + safariOutlineOffsetToken, + )({theme: compiledNewskitLightTheme})}; +`; + +export const OutlineCard: React.FC = ({ + outlineStyleToken = 'outlineStyleDefault', + outlineWidthToken = 'outlineWidthDefault', + outlineOffsetToken = 'outlineOffsetDefault', + safariOutlineOffsetToken, + safariOutlineStyleToken, +}) => ( + +); diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap index 48709f2727..fd3af92a3b 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap @@ -177,6 +177,21 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` fill: #C0C0C0; } +.emotion-6:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-6:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-6 { transition-property: background-color; @@ -1217,6 +1232,21 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` fill: #C0C0C0; } +.emotion-6:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-6:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-6 { transition-property: background-color; @@ -2008,6 +2038,21 @@ exports[`Sidebar navigation should render only routes under current section 1`] fill: #C0C0C0; } +.emotion-6:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-6:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-6 { transition-property: background-color; diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index bd6265abac..ea32198b5f 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -365,6 +365,21 @@ exports[`Sidebar renders correctly when closed 1`] = ` fill: #C0C0C0; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-9 { transition-property: background-color; @@ -676,7 +691,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` display: block; } -.emotion-547 { +.emotion-557 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -684,7 +699,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` margin-bottom: 8px; } -.emotion-548 { +.emotion-558 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -695,55 +710,55 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 480px) { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 768px) { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 1024px) { - .emotion-549 { + .emotion-559 { display: block; } } @media screen and (min-width: 1440px) { - .emotion-549 { + .emotion-559 { display: block; } } -.emotion-551 { +.emotion-561 { margin-bottom: 32px; } -.emotion-552 { +.emotion-562 { margin-inline: 32px; margin-block: 24px; } -.emotion-553 { +.emotion-563 { -webkit-text-decoration: none; text-decoration: none; } -.emotion-554 { +.emotion-564 { display: grid; grid-template-columns: 1fr 24px; } -.emotion-555 { +.emotion-565 { margin: 0; color: #2E2E2E; font-family: "Poppins",sans-serif; @@ -753,11 +768,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` letter-spacing: 0; } -.emotion-555 svg { +.emotion-565 svg { fill: #2E2E2E; } -.emotion-556 { +.emotion-566 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -767,7 +782,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-556 { + .emotion-566 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -775,19 +790,19 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-556 { + .emotion-566 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-556.emotion-556 { +.emotion-566.emotion-566 { width: 24px; height: 24px; } -.emotion-558 { +.emotion-568 { margin-block: 24px; } @@ -1363,6 +1378,31 @@ exports[`Sidebar renders correctly when closed 1`] = `
@@ -3657,7 +3722,7 @@ exports[`Sidebar renders correctly when closed 1`] = `

Github

@@ -3959,6 +4024,21 @@ exports[`Sidebar renders correctly when closed 1`] = ` fill: #C0C0C0; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-9 { transition-property: background-color; @@ -4270,7 +4350,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` display: block; } -.emotion-547 { +.emotion-557 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -4278,7 +4358,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` margin-bottom: 8px; } -.emotion-548 { +.emotion-558 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -4288,7 +4368,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` width: 100%; } -.emotion-551 { +.emotion-561 { margin-bottom: 32px; } @@ -4830,6 +4910,30 @@ exports[`Sidebar renders correctly when closed 1`] = `
+
  • + +
    +
    + + Outlines + +
    +
    +     +
  • @@ -7031,11 +7159,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
    • @@ -7056,7 +7184,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` />
    @@ -7428,6 +7556,21 @@ exports[`Sidebar renders correctly when open 1`] = ` fill: #C0C0C0; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-9 { transition-property: background-color; @@ -7739,7 +7882,7 @@ exports[`Sidebar renders correctly when open 1`] = ` display: block; } -.emotion-547 { +.emotion-557 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -7747,7 +7890,7 @@ exports[`Sidebar renders correctly when open 1`] = ` margin-bottom: 8px; } -.emotion-548 { +.emotion-558 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -7758,55 +7901,55 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 480px) { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 768px) { - .emotion-549 { + .emotion-559 { display: none; } } @media screen and (min-width: 1024px) { - .emotion-549 { + .emotion-559 { display: block; } } @media screen and (min-width: 1440px) { - .emotion-549 { + .emotion-559 { display: block; } } -.emotion-551 { +.emotion-561 { margin-bottom: 32px; } -.emotion-552 { +.emotion-562 { margin-inline: 32px; margin-block: 24px; } -.emotion-553 { +.emotion-563 { -webkit-text-decoration: none; text-decoration: none; } -.emotion-554 { +.emotion-564 { display: grid; grid-template-columns: 1fr 24px; } -.emotion-555 { +.emotion-565 { margin: 0; color: #2E2E2E; font-family: "Poppins",sans-serif; @@ -7816,11 +7959,11 @@ exports[`Sidebar renders correctly when open 1`] = ` letter-spacing: 0; } -.emotion-555 svg { +.emotion-565 svg { fill: #2E2E2E; } -.emotion-556 { +.emotion-566 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -7830,7 +7973,7 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-556 { + .emotion-566 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -7838,19 +7981,19 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-556 { + .emotion-566 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-556.emotion-556 { +.emotion-566.emotion-566 { width: 24px; height: 24px; } -.emotion-558 { +.emotion-568 { margin-block: 24px; } @@ -8410,6 +8553,30 @@ exports[`Sidebar renders correctly when open 1`] = `
    @@ -10623,7 +10814,7 @@ exports[`Sidebar renders correctly when open 1`] = `

    Github

    @@ -10924,6 +11115,21 @@ exports[`Sidebar renders correctly when open 1`] = ` fill: #C0C0C0; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-9 { transition-property: background-color; @@ -11235,7 +11441,7 @@ exports[`Sidebar renders correctly when open 1`] = ` display: block; } -.emotion-547 { +.emotion-557 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -11243,7 +11449,7 @@ exports[`Sidebar renders correctly when open 1`] = ` margin-bottom: 8px; } -.emotion-548 { +.emotion-558 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -11253,7 +11459,7 @@ exports[`Sidebar renders correctly when open 1`] = ` width: 100%; } -.emotion-551 { +.emotion-561 { margin-bottom: 32px; } @@ -11798,6 +12004,30 @@ exports[`Sidebar renders correctly when open 1`] = `
    +
  • + +
    +
    + + Outlines + +
    +
    +     +
  • @@ -13999,11 +14253,11 @@ exports[`Sidebar renders correctly when open 1`] = `
    • @@ -14024,7 +14278,7 @@ exports[`Sidebar renders correctly when open 1`] = ` />
    diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx index 56831bcfaf..1cf22084da 100644 --- a/site/components/site-header.tsx +++ b/site/components/site-header.tsx @@ -164,11 +164,7 @@ const SiteHeader = React.forwardRef( {Areas => ( <> - + diff --git a/site/components/table/__tests__/__snapshots__/table.test.tsx.snap b/site/components/table/__tests__/__snapshots__/table.test.tsx.snap index 31b7b9b528..bb668a6df8 100644 --- a/site/components/table/__tests__/__snapshots__/table.test.tsx.snap +++ b/site/components/table/__tests__/__snapshots__/table.test.tsx.snap @@ -444,6 +444,21 @@ exports[`Table renders links correctly 1`] = ` fill: #213A82; } +.emotion-5:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-5:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-6 { display: -webkit-box; display: -webkit-flex; diff --git a/site/components/table/column-map.ts b/site/components/table/column-map.ts index 56fc3b29ca..4adb39843d 100644 --- a/site/components/table/column-map.ts +++ b/site/components/table/column-map.ts @@ -44,6 +44,11 @@ export const columnMap: Record = { Token: {...medium, cellType: 'flag'}, 'Border radius': {...medium, cellType: 'borderRadius'}, 'Border width': {...medium, cellType: 'borderWidth'}, + 'Outline Style': {...medium, cellType: 'outlineStyle'}, + 'Outline Width': {...medium, cellType: 'outlineWidth'}, + 'Outline Offset': {...medium, cellType: 'outlineOffset'}, + 'Safari Outline Style': {...medium, cellType: 'safariOutlineStyle'}, + 'Safari Outline Offset': {...medium, cellType: 'safariOutlineOffset'}, 'Common uses': {...xlarge, cellType: 'text'}, Duration: {...large, cellType: 'motionDurationSwatch'}, Timing: {...large, cellType: 'motionTimingSwatch'}, diff --git a/site/components/table/column-renderer.tsx b/site/components/table/column-renderer.tsx index b7bb30321c..65b472b567 100644 --- a/site/components/table/column-renderer.tsx +++ b/site/components/table/column-renderer.tsx @@ -4,6 +4,7 @@ import {Link} from '../link'; import {SwatchCard} from '../swatch-card'; import {MonoColor} from '../flags/mono-color'; import {BorderCard} from '../border-card'; +import {OutlineCard} from '../outline-card'; import {getByTitle} from '../../utils/get-route-object'; import {StyledDataCell} from './styled'; import {TableProps, TableRow, TableRowValue, CellWithOverrides} from './types'; @@ -211,6 +212,41 @@ export const renderCols = ( break; } + case 'outlineStyle': { + cellContent = cellValue && ( + + ); + break; + } + + case 'outlineWidth': { + cellContent = cellValue && ( + + ); + break; + } + + case 'outlineOffset': { + cellContent = cellValue && ( + + ); + break; + } + + case 'safariOutlineStyle': { + cellContent = cellValue && ( + + ); + break; + } + + case 'safariOutlineOffset': { + cellContent = cellValue && ( + + ); + break; + } + case 'boxShadow': { cellContent = cellValue && ( diff --git a/site/components/table/types.ts b/site/components/table/types.ts index 977cdbb095..b082cd5924 100644 --- a/site/components/table/types.ts +++ b/site/components/table/types.ts @@ -34,7 +34,12 @@ export interface ColumnMapObject extends TableCellProps { | 'fontWeight' | 'fontLineHeight' | 'fontLetterSpacing' - | 'typographyPreset'; + | 'typographyPreset' + | 'outlineStyle' + | 'outlineWidth' + | 'outlineOffset' + | 'safariOutlineStyle' + | 'safariOutlineOffset'; } export interface CellWithOverrides { diff --git a/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap b/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap index 99fb3cb01c..d0cc46aa48 100644 --- a/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap +++ b/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap @@ -441,18 +441,6 @@ exports[`TabsWithTable renders with default data 1`] = ` } } -.emotion-15:focus { - outline-offset: -1px; -} - -@media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-15:focus { - outline-offset: -5px; - } - } -} - .emotion-16 { display: -webkit-box; display: -webkit-flex; @@ -572,18 +560,6 @@ exports[`TabsWithTable renders with default data 1`] = ` } } -.emotion-21:focus { - outline-offset: -1px; -} - -@media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-21:focus { - outline-offset: -5px; - } - } -} - .emotion-25 { background-color: #577FFB; position: absolute; @@ -608,14 +584,17 @@ exports[`TabsWithTable renders with default data 1`] = ` width: 100%; } -.emotion-27:focus { - outline-offset: -1px; +.emotion-27:focus:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: -3px; } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-27:focus { - outline-offset: -5px; + .emotion-27:focus:not(:disabled) { + outline-style: auto; } } } diff --git a/site/components/tools/__tests__/__snapshots__/svg-previewer.test.tsx.snap b/site/components/tools/__tests__/__snapshots__/svg-previewer.test.tsx.snap index acbb714b24..5c8b40a9d6 100644 --- a/site/components/tools/__tests__/__snapshots__/svg-previewer.test.tsx.snap +++ b/site/components/tools/__tests__/__snapshots__/svg-previewer.test.tsx.snap @@ -82,6 +82,21 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff fill: #C0C0C0; } +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-2 { transition-property: background-color; @@ -211,6 +226,21 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff fill: #C0C0C0; } +.emotion-8:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-8:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-8 { transition-property: background-color; @@ -286,6 +316,21 @@ exports[`SvgPreviewer should change theme colors correctly when selecting a diff fill: #C0C0C0; } +.emotion-12:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-12:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-12 { transition-property: background-color; @@ -1711,6 +1756,21 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = fill: #C0C0C0; } +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-2 { transition-property: background-color; @@ -1840,6 +1900,21 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = fill: #C0C0C0; } +.emotion-8:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-8:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-8 { transition-property: background-color; @@ -1915,6 +1990,21 @@ exports[`SvgPreviewer should render correctly when receiving one svg data 1`] = fill: #C0C0C0; } +.emotion-12:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-12:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-12 { transition-property: background-color; diff --git a/site/pages/theme/foundation/outlines.tsx b/site/pages/theme/foundation/outlines.tsx new file mode 100644 index 0000000000..d92d0ff429 --- /dev/null +++ b/site/pages/theme/foundation/outlines.tsx @@ -0,0 +1,210 @@ +import React from 'react'; +import {newskitLightTheme, compileTheme, InlineMessage} from 'newskit'; +import {FoundationPageTemplate} from '../../../templates/foundation-page-template'; +import {Table} from '../../../components/table'; +import {ComponentPageCell} from '../../../components/layout-cells'; +import {LayoutProps} from '../../../components/layout'; +import {getTokenType} from '../../../utils/get-token-type'; +import {Link} from '../../../components/link'; +import { + ContentSection, + ContentPrimary, + ContentSecondary, + ContentColSpan, +} from '../../../components/content-structure'; +import {Code} from '../../../components/code'; + +const compiledNewskitLightTheme = compileTheme(newskitLightTheme); +const outlineRows = (type: string) => + getTokenType(compiledNewskitLightTheme.outlines, type).map( + ({tokenName, tokenValue}) => ({ + [type]: tokenName, + token: tokenName, + tokenValue: tokenValue as string, + }), + ); + +type CodeExampleType = { + [key: string]: string; +}; + +const codeExamples: CodeExampleType = { + outlineColor: `outlineColor: '{{outlines.outlineColorDefault}}'`, + outlineStyle: `outlineStyle: '{{outlines.outlineStyleDefault}}'`, + outlineWidth: `outlineWidth: '{{outlines.outlineWidthDefault}}'`, + outlineOffset: `outlineOffset: '{{outlines.outlineOffsetDefault}}'`, + safariOutlineStyle: `safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}'`, + safariOutlineOffset: `safariOutlineOffset: '-7px'`, +}; + +interface ExampleSectionProps { + section: string; + showSeparator?: boolean; +} + +const ExampleSection: React.FC = ({ + section, + showSeparator, +}) => ( + + {codeExamples[section]} + +); + +const Outline = (layoutProps: LayoutProps) => ( + + + + + + + + + + + + + + + + + + + + + Safari's implementation of outline CSS is significantly + different to other main browsers. The solid style will not have + rounded corners, and using auto will not allow control over its + colour. See Safari Outline Style. + + + + + + +
    + + + + + + If you wish to move away from the default provided, we recommend + using border tokens + + } + showSeparator + /> + + + + +
    + + + + + + If you wish to move away from the default provided, we recommend + using border tokens + + } + /> + + + + Safari's implementation of outline CSS is significantly + different to other main browsers. You may find your offset is not + the same on Safari. See Safari Outline Style. + + + + + + +
    + + + + + + + +
    + + + + + + +); + +export default Outline; diff --git a/site/pages/theme/presets/style-presets.tsx b/site/pages/theme/presets/style-presets.tsx index 5a715f8c09..4b7c78f907 100644 --- a/site/pages/theme/presets/style-presets.tsx +++ b/site/pages/theme/presets/style-presets.tsx @@ -234,6 +234,46 @@ const CSS_PROPS = [ ), description: 'The transition between two or more specified colors', }, + { + token: 'outlineColor', + acceptedValues: foundations outline, + description: 'The colour property of the outline', + }, + { + token: 'outlineStyle', + acceptedValues: ( + foundations outline + ), + description: 'The style property of the outline', + }, + { + token: 'outlineWidth', + acceptedValues: ( + foundations outline + ), + description: 'The style property of the outline', + }, + { + token: 'outlineOffset', + acceptedValues: ( + foundations outline + ), + description: 'The offset property of the outline', + }, + { + token: 'safariOutlineOffset', + acceptedValues: ( + foundations outline + ), + description: 'The offset property of the outline for Safari', + }, + { + token: 'safariOutlineStyle', + acceptedValues: ( + foundations outline + ), + description: 'The style property of the outline for Safari', + }, ]; const ImageWrapper = styled.div` @@ -469,6 +509,80 @@ const STYLE_PRESET_STATES = [ description: 'Visually represents text links a user has already visited, and in a focus state', }, + { + example: getImage('theme/style-presets/focus'), + state: 'focus-visible', + description: + 'Highlights an element to a user that has received focus, by using an input method such as a keyboard or voice. User agent determins if focus should be given to element.', + }, + { + example: getImage('theme/style-presets/valid-focus'), + state: 'valid:focus-visible', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is valid, and in a focus state', + }, + { + example: getImage('theme/style-presets/invalid-focus'), + state: 'invalid:focus-visible', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is invalid, and in a focus state', + }, + { + example: getImage('theme/style-presets/focus-visible-hover'), + state: 'focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component has focus state and hover state', + }, + { + example: getImage('theme/style-presets/valid-focus-visible-hover'), + state: 'valid:focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is valid has focus state and hover state', + }, + { + example: getImage('theme/style-presets/invalid-focus-visible-hover'), + state: 'invalid:focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is invalid has focus state and hover state', + }, + { + example: getImage('theme/style-presets/checked-focus'), + state: 'checked:focus-visible', + description: + 'The style of a component changes to visually communicate and provide feedback to a user that a component has been checked, and in a focus state', + }, + { + example: getImage('theme/style-presets/checked-focus-visible-hover'), + state: 'checked:focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is checked, focused and in a hover state', + }, + { + example: getImage('theme/style-presets/checked-valid-focus'), + state: 'checked:valid:focus-visible', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is valid, checked, and in a focus state', + }, + { + example: getImage('theme/style-presets/checked-invalid-focus'), + state: 'checked:invalid:focus-visible', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is invalid, checked, and in a focus state', + }, + { + example: getImage('theme/style-presets/checked-valid-focus-visible-hover'), + state: 'checked:valid:focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is checked, valid, focused and in a hover state', + }, + { + example: getImage( + 'theme/style-presets/checked-invalid-focus-visible-hover', + ), + state: 'checked:invalid:focus-visible:hover', + description: + 'The style of a component changes to visually communicate and provide feedback to the user that a component is checked, invalid, focused and in a hover state', + }, ]; const StylePresets = (layoutProps: LayoutProps) => ( diff --git a/site/routes.ts b/site/routes.ts index 221c9014a6..8df91a5e13 100644 --- a/site/routes.ts +++ b/site/routes.ts @@ -122,6 +122,14 @@ export default [ title: 'Foundations', id: '/theme/foundation', subNav: [ + { + title: 'Borders', + page: true, + id: '/theme/foundation/borders', + illustration: 'theme/borders/hero', + description: + 'Borders direct attention, identify components, communicate state, and express a brand.', + }, { title: 'Breakpoints', page: true, @@ -177,6 +185,14 @@ export default [ description: 'Motion is used to create movement and narrative within a product. Timely animated interface elements attract attention, provide guidance and enhance user experience.', }, + { + title: 'Outlines', + page: true, + id: '/theme/foundation/outlines', + illustration: 'theme/borders/hero', + description: + 'Outlines provide visual cues about the focus or active states of elements.', + }, { title: 'Opacity', page: true, diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index db13cc4157..b6618874ae 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -126,7 +126,7 @@ Object { "inkWhiteContrast": "{{colors.white}}", "inkWhiteSubtle": "{{colors.whiteTint080}}", "interactiveDisabled010": "{{colors.darkBlue080}}", - "interactiveFocus010": "{{colors.focus010}}", + "interactiveFocus010": "{{colors.white}}", "interactiveInput010": "{{colors.neutral010}}", "interactiveInput020": "{{colors.neutral040}}", "interactiveInput030": "{{colors.blue010}}", @@ -600,6 +600,17 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-accessibility-dark", + "outline": Object { + "safariOutlineStyleDefault": "solid", + }, + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -738,6 +749,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -756,6 +774,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -782,6 +807,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -1189,7 +1221,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -1199,7 +1235,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -1213,7 +1249,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -1229,6 +1265,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -1261,6 +1304,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -1398,6 +1448,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -2883,6 +2940,14 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-accessibility-light", + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -3021,6 +3086,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -3039,6 +3111,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -3065,6 +3144,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -3472,7 +3558,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -3482,7 +3572,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -3496,7 +3586,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -3512,6 +3602,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -3544,6 +3641,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -3681,6 +3785,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -4692,7 +4803,7 @@ Object { "inkWhiteContrast": "{{colors.white}}", "inkWhiteSubtle": "{{colors.whiteTint080}}", "interactiveDisabled010": "{{colors.darkBlue080}}", - "interactiveFocus010": "{{colors.focus010}}", + "interactiveFocus010": "{{colors.white}}", "interactiveInput010": "{{colors.neutral010}}", "interactiveInput020": "{{colors.neutral040}}", "interactiveInput030": "{{colors.blue010}}", @@ -5166,6 +5277,17 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-theme-dark", + "outline": Object { + "safariOutlineStyleDefault": "solid", + }, + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -5304,6 +5426,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -5322,6 +5451,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -5348,6 +5484,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -5755,7 +5898,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -5765,7 +5912,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -5779,7 +5926,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -5795,6 +5942,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -5827,6 +5981,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -5964,6 +6125,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -7449,6 +7617,14 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-theme-light", + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -7587,6 +7763,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -7605,6 +7788,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -7631,6 +7821,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -8038,7 +8235,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -8048,7 +8249,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -8062,7 +8263,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -8078,6 +8279,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -8110,6 +8318,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -8247,6 +8462,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -9258,7 +9480,7 @@ Object { "inkWhiteContrast": "{{colors.white}}", "inkWhiteSubtle": "{{colors.whiteTint080}}", "interactiveDisabled010": "{{colors.darkBlue080}}", - "interactiveFocus010": "{{colors.focus010}}", + "interactiveFocus010": "{{colors.white}}", "interactiveInput010": "{{colors.neutral010}}", "interactiveInput020": "{{colors.neutral040}}", "interactiveInput030": "{{colors.blue010}}", @@ -9732,6 +9954,17 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-foundations-dark", + "outline": Object { + "safariOutlineStyleDefault": "solid", + }, + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -9870,6 +10103,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -9888,6 +10128,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -9914,6 +10161,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -10321,7 +10575,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -10331,7 +10589,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -10345,7 +10603,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -10361,6 +10619,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -10393,6 +10658,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -10530,6 +10802,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -12015,6 +12294,14 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-foundations-light", + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -12153,6 +12440,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -12171,6 +12465,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -12197,6 +12498,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -12604,7 +12912,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -12614,7 +12926,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -12628,7 +12940,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -12644,6 +12956,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -12676,6 +12995,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -12813,6 +13139,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -13824,7 +14157,7 @@ Object { "inkWhiteContrast": "{{colors.white}}", "inkWhiteSubtle": "{{colors.whiteTint080}}", "interactiveDisabled010": "{{colors.darkBlue080}}", - "interactiveFocus010": "{{colors.focus010}}", + "interactiveFocus010": "{{colors.white}}", "interactiveInput010": "{{colors.neutral010}}", "interactiveInput020": "{{colors.neutral040}}", "interactiveInput030": "{{colors.blue010}}", @@ -14298,6 +14631,17 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-patterns-dark", + "outline": Object { + "safariOutlineStyleDefault": "solid", + }, + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -14436,6 +14780,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -14454,6 +14805,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -14480,6 +14838,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -14887,7 +15252,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -14897,7 +15266,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -14911,7 +15280,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -14927,6 +15296,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -14959,6 +15335,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -15096,6 +15479,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", @@ -16581,6 +16971,14 @@ Object { "motionTimingLinear": "linear", }, "name": "docs-patterns-light", + "outlines": Object { + "outlineColorDefault": "{{colors.interactiveFocus010}}", + "outlineOffsetDefault": "{{borders.borderWidth020}}", + "outlineStyleDefault": "solid", + "outlineWidthDefault": "{{borders.borderWidth020}}", + "safariOutlineOffsetDefault": "{{borders.borderWidth020}}", + "safariOutlineStyleDefault": "auto", + }, "overlays": Object { "opacity000": "0", "opacity010": "0.1", @@ -16719,6 +17117,13 @@ Object { "backgroundColor": "{{colors.interactiveSecondary010}}", "borderRadius": "{{borders.borderRadiusCircle}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveSecondary020}}", }, @@ -16737,6 +17142,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", }, @@ -16763,6 +17175,13 @@ Object { "color": "{{colors.inkNonEssential}}", "iconColor": "{{colors.inkNonEssential}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse010}}", "borderColor": "{{colors.interactiveInverse040}}", @@ -17170,7 +17589,11 @@ Object { }, "focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{colors.transparent}}", + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", }, "hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -17180,7 +17603,7 @@ Object { }, "invalid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "invalid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -17194,7 +17617,7 @@ Object { }, "valid:focus": Object { "backgroundColor": "{{colors.interactiveInput010}}", - "borderColor": "{{colors.interactiveInput040}}", + "borderColor": "{{outlines.outlineColorDefault}}", }, "valid:hover": Object { "backgroundColor": "{{colors.interactiveInput010}}", @@ -17210,6 +17633,13 @@ Object { "color": "{{colors.interactivePrimary040}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.interactivePrimary030}}", "textDecoration": "underline", @@ -17242,6 +17672,13 @@ Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "color": "{{colors.inkSubtle}}", "textDecoration": "none", @@ -17379,6 +17816,13 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, + "focus-visible": Object { + "outlineColor": "{{outlines.outlineColorDefault}}", + "outlineOffset": "{{outlines.outlineOffsetDefault}}", + "outlineStyle": "{{outlines.outlineStyleDefault}}", + "outlineWidth": "{{outlines.outlineWidthDefault}}", + "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", + }, "hover": Object { "backgroundColor": "{{colors.interactiveInverse020}}", "color": "{{colors.inkWhiteContrast}}", diff --git a/site/theme/colors-dark.json b/site/theme/colors-dark.json index 177766f9d7..78f6f6da6b 100644 --- a/site/theme/colors-dark.json +++ b/site/theme/colors-dark.json @@ -67,7 +67,8 @@ "illustrationInterface100": "{{colors.blue010}}", "illustrationAnatomySubtle": "{{colors.blue040}}", "illustrationAnatomyBorder010": "{{colors.blue080}}", - "illustrationAnatomyBorder020": "{{colors.blue040}}" + "illustrationAnatomyBorder020": "{{colors.blue040}}", + "interactiveFocus010": "{{colors.white}}" }, "shadows": { "shadow010": "0 0 2px 0 rgba(10,10,10,0.28)", diff --git a/site/theme/doc-theme.ts b/site/theme/doc-theme.ts index 6fc1406ba7..cb57039c41 100644 --- a/site/theme/doc-theme.ts +++ b/site/theme/doc-theme.ts @@ -303,6 +303,9 @@ export const darkOverrides = { shadows: colorsDark.shadows, colors: colorsDark.colors, overlays: overlaysDark, + outline: { + safariOutlineStyleDefault: 'solid', + }, }; export const lightOverrides = { diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index a7ee25008d..ca563dfbf0 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -21,6 +21,13 @@ export const stylePresets = { active: { backgroundColor: '{{colors.interactiveSecondary020}}', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, linkSectionNavigation: { base: { @@ -52,6 +59,13 @@ export const stylePresets = { color: '{{colors.interactivePrimary030}}', textDecoration: 'none', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, sideBarNavigation: { base: { @@ -424,6 +438,13 @@ export const stylePresets = { color: '{{colors.interactivePrimary020}}', textDecoration: 'none', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, roadmapCardContainerInteractive: { base: { @@ -523,6 +544,13 @@ export const stylePresets = { color: '{{colors.inkBrand030}}', iconColor: '{{colors.inkBrand030}}', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, principleCard: { @@ -785,6 +813,13 @@ export const stylePresets = { loading: { backgroundColor: '{{colors.interactiveInverse020}}', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, buttonOutlinedInverseDocs: { base: { @@ -813,6 +848,13 @@ export const stylePresets = { backgroundColor: '{{colors.interactiveInverse020}}', borderStyle: 'none', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + outlineOffset: '{{outlines.outlineOffsetDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, dividerInverse: { base: { diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap index 830baca67d..d182f39437 100644 --- a/src/__tests__/__snapshots__/index.test.ts.snap +++ b/src/__tests__/__snapshots__/index.test.ts.snap @@ -171,6 +171,7 @@ Array [ "getMotionCssFromTheme", "getMotionDurationValue", "getMotionFromTheme", + "getOutlineCssFromTheme", "getOverlayCssFromTheme", "getPresetStyles", "getResponsiveBorder", diff --git a/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap b/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap index 684e3e3dd5..33c73218f6 100644 --- a/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap +++ b/src/accordion/__tests__/__snapshots__/accordion.test.tsx.snap @@ -46,6 +46,20 @@ exports[`Accordion renders as a h4 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -306,6 +320,20 @@ exports[`Accordion renders with collapsed state and icon 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -566,6 +594,20 @@ exports[`Accordion renders with default props 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -1075,6 +1117,20 @@ exports[`Accordion renders with expanded state and icon 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -1335,6 +1391,20 @@ exports[`Accordion renders with indicatorIcon component overrides 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -1591,6 +1661,20 @@ exports[`Accordion renders with indicatorIcon prop overrides 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -1870,6 +1954,20 @@ exports[`Accordion renders with no header 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -2037,6 +2135,20 @@ exports[`Accordion renders with no label 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -2564,6 +2676,20 @@ exports[`Accordion renders without leading icon 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -2733,6 +2859,20 @@ exports[`Accordion should render with custom ariaControls and id 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; @@ -2992,6 +3132,20 @@ exports[`AccordionGroup different type of children 1`] = ` color: #C0C0C0; } +.emotion-1:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-1:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-2 { text-align: start; -webkit-flex: 1; diff --git a/src/accordion/__tests__/accordion.stories.tsx b/src/accordion/__tests__/accordion.stories.tsx index 6e18c14c41..16cec9838a 100644 --- a/src/accordion/__tests__/accordion.stories.tsx +++ b/src/accordion/__tests__/accordion.stories.tsx @@ -33,6 +33,12 @@ const myCustomAccordionTheme = createTheme({ backgroundColor: '#f08080', color: '#FFD23F', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, accordionPanelCustom: { base: { diff --git a/src/accordion/style-presets.ts b/src/accordion/style-presets.ts index ac993da185..f51e984dd5 100644 --- a/src/accordion/style-presets.ts +++ b/src/accordion/style-presets.ts @@ -13,11 +13,16 @@ export default { backgroundColor: '{{colors.interactiveInput010}}', color: '{{colors.interactiveInput040}}', }, - // To Do: Focus state should be added in or after https://nidigitalsolutions.jira.com/browse/PPDSC-2151. disabled: { backgroundColor: '{{colors.interactiveDisabled010}}', color: '{{colors.inkNonEssential}}', }, + 'focus-visible': { + outlineColor: '{{outlines.outlineColorDefault}}', + outlineStyle: '{{outlines.outlineStyleDefault}}', + outlineWidth: '{{outlines.outlineWidthDefault}}', + safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}', + }, }, accordionPanel: { base: { diff --git a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap index 24769aeb75..930595dc38 100644 --- a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap +++ b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap @@ -76,6 +76,21 @@ exports[`Audio Player Composable VolumeControl should render correctly with coll fill: #C0C0C0; } +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-2 { transition-property: background-color; @@ -274,6 +289,21 @@ exports[`Audio Player Composable VolumeControl should render correctly with vert fill: #C0C0C0; } +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-2 { transition-property: background-color; @@ -997,6 +1027,21 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected fill: #C0C0C0; } +.emotion-5:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-5:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-5 { transition-property: background-color; @@ -1139,6 +1184,21 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -1252,6 +1312,21 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected fill: #C0C0C0; } +.emotion-17:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-17:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-17 { transition-property: background-color; @@ -1456,6 +1531,21 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected fill: #C0C0C0; } +.emotion-29:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-29:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-29 { transition-property: background-color; @@ -2479,6 +2569,21 @@ exports[`Audio Player Composable should phasing playPause button loading state a fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -3412,6 +3517,21 @@ exports[`Audio Player Composable should render with no errors 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -3525,6 +3645,21 @@ exports[`Audio Player Composable should render with no errors 1`] = ` fill: #C0C0C0; } +.emotion-16:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-16:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-16 { transition-property: background-color; @@ -3754,6 +3889,21 @@ exports[`Audio Player Composable should render with no errors 1`] = ` fill: #C0C0C0; } +.emotion-28:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-28:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-28 { transition-property: background-color; diff --git a/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap b/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap index 2e293715fd..5399232148 100644 --- a/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap +++ b/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap @@ -367,6 +367,21 @@ exports[`Audio Player hides previousTrack as expected 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -667,6 +682,21 @@ exports[`Audio Player hides previousTrack as expected 1`] = ` fill: #C0C0C0; } +.emotion-40:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-40:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-40 { transition-property: background-color; @@ -2020,6 +2050,21 @@ exports[`Audio Player hides seek buttons as expected 1`] = ` fill: #C0C0C0; } +.emotion-32:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-32:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-32 { transition-property: background-color; @@ -3055,6 +3100,21 @@ exports[`Audio Player hides volume control as expected 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -4348,6 +4408,21 @@ exports[`Audio Player live player renders as expected 1`] = ` fill: #C0C0C0; } +.emotion-22:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-22:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-22 { transition-property: background-color; @@ -4628,6 +4703,21 @@ exports[`Audio Player live player renders as expected 1`] = ` fill: #C0C0C0; } +.emotion-40:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-40:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-40 { transition-property: background-color; @@ -5143,6 +5233,21 @@ exports[`Audio Player play button loading state is phasing as expected 2`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -5636,6 +5741,21 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -5778,6 +5898,21 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = ` fill: #C0C0C0; } +.emotion-16:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-16:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-16 { transition-property: background-color; @@ -5887,6 +6022,21 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = ` fill: #C0C0C0; } +.emotion-26:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-26:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-26 { transition-property: background-color; @@ -6069,6 +6219,21 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = ` fill: #C0C0C0; } +.emotion-41:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-41:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-41 { transition-property: background-color; @@ -7296,6 +7461,21 @@ exports[`Audio Player recorded player renders as expected 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -7653,6 +7833,21 @@ exports[`Audio Player recorded player renders as expected 1`] = ` fill: #C0C0C0; } +.emotion-40:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-40:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-40 { transition-property: background-color; @@ -8746,6 +8941,21 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -9103,6 +9313,21 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = ` fill: #C0C0C0; } +.emotion-40:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-40:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-40 { transition-property: background-color; @@ -10198,6 +10423,21 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] = fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -10555,6 +10795,21 @@ exports[`Audio Player recorded player renders with logical props overrides 1`] = fill: #C0C0C0; } +.emotion-40:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-40:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-40 { transition-property: background-color; diff --git a/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap b/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap index 69c744a098..4db4585489 100644 --- a/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap +++ b/src/audio-player/__tests__/__snapshots__/popout-button.test.tsx.snap @@ -61,6 +61,21 @@ exports[`PopoutButton renders correctly with default props 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; diff --git a/src/banner/__tests__/__snapshots__/banner.test.tsx.snap b/src/banner/__tests__/__snapshots__/banner.test.tsx.snap index c90e6247c4..d6c5615b79 100644 --- a/src/banner/__tests__/__snapshots__/banner.test.tsx.snap +++ b/src/banner/__tests__/__snapshots__/banner.test.tsx.snap @@ -819,6 +819,21 @@ exports[`Banner renders with content as string and link 1`] = ` fill: #5E44E4; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -1179,6 +1194,21 @@ exports[`Banner renders with content as string and link 1`] = ` fill: #5E44E4; } +.emotion-9:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-9:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -2724,6 +2754,21 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -3162,6 +3207,21 @@ exports[`Banner renders with multiple action buttons and overridden spaceInline fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -3601,6 +3661,21 @@ exports[`Banner renders with single action button on horizontal layout 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -4020,6 +4095,21 @@ exports[`Banner renders with single action button on vertical layout 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -5020,6 +5110,21 @@ exports[`Banner with action and close buttons renders correctly on horizontal la fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -5157,6 +5262,21 @@ exports[`Banner with action and close buttons renders correctly on horizontal la fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -5588,6 +5708,21 @@ exports[`Banner with action and close buttons renders correctly on vertical layo fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -5716,6 +5851,21 @@ exports[`Banner with action and close buttons renders correctly on vertical layo fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -6099,6 +6249,21 @@ exports[`Banner with close button renders correctly on horizontal layout 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -6537,6 +6702,21 @@ exports[`Banner with close button renders correctly on vertical layout 1`] = ` fill: #C0C0C0; } +.emotion-10:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-10:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-10 { transition-property: background-color; @@ -6996,6 +7176,21 @@ exports[`renders grid and cell overrides on banner 1`] = ` fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -7474,6 +7669,21 @@ exports[`renders grid and cell overrides on banner 1`] = ` fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; diff --git a/src/base-switch/base-switch.tsx b/src/base-switch/base-switch.tsx index 42f1451afd..e1dc322694 100644 --- a/src/base-switch/base-switch.tsx +++ b/src/base-switch/base-switch.tsx @@ -68,10 +68,13 @@ export const BaseSwitch = React.forwardRef( const onInputFocus = useCallback( (e: React.FocusEvent) => { - setIsInputFocusVisible(isFocusVisible(e)); - setIsInputFocused(true); + if (isFocusVisible(e)) { + setIsInputFocusVisible(true); + } else { + setIsInputFocused(true); + } }, - [setIsInputFocused], + [setIsInputFocused, setIsInputFocusVisible], ); const onInputBlur = useCallback(() => { diff --git a/src/base-switch/styled.tsx b/src/base-switch/styled.tsx index 8c03cf505c..00a3f17d4a 100644 --- a/src/base-switch/styled.tsx +++ b/src/base-switch/styled.tsx @@ -86,7 +86,6 @@ const insetCSS = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; `; @@ -99,11 +98,12 @@ export const StyledSwitch = styled.div< } >` ${insetCSS} + width: 100%; display: flex; justify-content: center; align-items: center; - ${({size, checked, state, isFocused, isHovered, path}) => + ${({size, checked, state, isFocused, isHovered, isFocusedVisible, path}) => getStylePreset(`${path}.${size}.input`, 'input', { isChecked: checked, isDisabled: state === 'disabled', @@ -111,14 +111,9 @@ export const StyledSwitch = styled.div< isValid: state === 'valid', isFocused, isHovered, + isFocusedVisible, })}; - ${({isFocusedVisible}) => - isFocusedVisible && - ` outline: 5px auto Highlight; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: 3px; - `} ${({feedbackIsVisible}) => feedbackIsVisible && `z-index: ${STACKING_CONTEXT.input}`}; @@ -165,11 +160,11 @@ export const StyledSwitchFeedback = styled.div< // when is not HOVER we need to remove the hover so it does not apply as class:hover omitStates: isHovered ? [] : ['hover'], })} - ${({size, path}) => + ${({size, path, isHovered}) => getResponsiveSize( rectSize => ({ - width: rectSize, - height: rectSize, + width: isHovered ? rectSize : '1px', + height: isHovered ? rectSize : '1px', transform: `translate3d(calc(${rectSize} / -2), calc(${rectSize} / -2), 0)`, }), `${path}.${size}.feedback`, diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap index bf3dbb6701..fe4a2c2c1d 100644 --- a/src/button/__tests__/__snapshots__/button.test.tsx.snap +++ b/src/button/__tests__/__snapshots__/button.test.tsx.snap @@ -351,6 +351,21 @@ exports[`Button Loading Button renders a button with fixed for minWidth and minH fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -503,6 +518,21 @@ exports[`Button Loading Button renders a button with fixed for width and height fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -655,6 +685,21 @@ exports[`Button Loading Button renders a button with percentage for minWidth and fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -807,6 +852,21 @@ exports[`Button Loading Button renders a button with percentage for width and he fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -959,6 +1019,21 @@ exports[`Button Loading Button renders a button with token set for minWidth and fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -1111,6 +1186,21 @@ exports[`Button Loading Button renders a button with token set for width and hei fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -1263,6 +1353,21 @@ exports[`Button renders Large Button 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -1415,6 +1520,21 @@ exports[`Button renders Small Button 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -1567,6 +1687,21 @@ exports[`Button renders button link when href passed 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -1854,6 +1989,21 @@ exports[`Button renders fixed-width Button 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2006,6 +2156,21 @@ exports[`Button renders full-width Button 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2158,6 +2323,21 @@ exports[`Button renders text and icon button with fallback formatting 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2355,6 +2535,21 @@ exports[`Button renders with different spaceInset preset 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2512,6 +2707,21 @@ exports[`Button renders with different style preset 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2664,6 +2874,21 @@ exports[`Button renders with different typography preset 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2816,6 +3041,21 @@ exports[`Button renders with fallback formatting 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; @@ -2972,6 +3212,21 @@ exports[`Button renders with logical props overrides 1`] = ` fill: #C0C0C0; } +.emotion-0:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-0:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-0 { transition-property: background-color; diff --git a/src/button/style-presets.ts b/src/button/style-presets.ts index 9641bda3f7..b07377e656 100644 --- a/src/button/style-presets.ts +++ b/src/button/style-presets.ts @@ -1,4 +1,5 @@ import {StylePreset} from '../theme/types'; +import {defaultFocusVisible} from '../utils/default-focus-visible'; export default { buttonSolidPrimary: { @@ -24,6 +25,7 @@ export default { color: '{{colors.inkBrand010}}', iconColor: '{{colors.inkBrand010}}', }, + 'focus-visible': defaultFocusVisible, }, buttonSolidSecondary: { base: { @@ -48,6 +50,7 @@ export default { color: '{{colors.inkBase}}', iconColor: '{{colors.inkBase}}', }, + 'focus-visible': defaultFocusVisible, }, buttonSolidNegative: { base: { @@ -72,6 +75,7 @@ export default { color: '{{colors.inkNegative}}', iconColor: '{{colors.inkNegative}}', }, + 'focus-visible': defaultFocusVisible, }, buttonSolidPositive: { base: { @@ -96,6 +100,7 @@ export default { color: '{{colors.inkPositive}}', iconColor: '{{colors.inkPositive}}', }, + 'focus-visible': defaultFocusVisible, }, buttonSolidInverse: { base: { @@ -120,6 +125,7 @@ export default { color: '{{colors.inkInverse}}', iconColor: '{{colors.inkInverse}}', }, + 'focus-visible': defaultFocusVisible, }, buttonOutlinedPrimary: { @@ -149,6 +155,7 @@ export default { backgroundColor: '{{colors.interactivePrimary020}}', borderStyle: 'none', }, + 'focus-visible': defaultFocusVisible, }, buttonOutlinedSecondary: { base: { @@ -177,6 +184,7 @@ export default { backgroundColor: '{{colors.interactiveSecondary020}}', borderStyle: 'none', }, + 'focus-visible': defaultFocusVisible, }, buttonOutlinedNegative: { base: { @@ -205,6 +213,7 @@ export default { backgroundColor: '{{colors.interactiveNegative020}}', borderStyle: 'none', }, + 'focus-visible': defaultFocusVisible, }, buttonOutlinedPositive: { base: { @@ -233,6 +242,7 @@ export default { backgroundColor: '{{colors.interactivePositive020}}', borderStyle: 'none', }, + 'focus-visible': defaultFocusVisible, }, buttonOutlinedInverse: { base: { @@ -261,6 +271,7 @@ export default { backgroundColor: '{{colors.interactiveInverse020}}', borderStyle: 'none', }, + 'focus-visible': defaultFocusVisible, }, buttonMinimalPrimary: { @@ -283,6 +294,7 @@ export default { loading: { backgroundColor: '{{colors.interactivePrimary020}}', }, + 'focus-visible': defaultFocusVisible, }, buttonMinimalSecondary: { base: { @@ -304,6 +316,7 @@ export default { loading: { backgroundColor: '{{colors.interactiveSecondary020}}', }, + 'focus-visible': defaultFocusVisible, }, buttonMinimalNegative: { base: { @@ -325,6 +338,7 @@ export default { loading: { backgroundColor: '{{colors.interactiveNegative020}}', }, + 'focus-visible': defaultFocusVisible, }, buttonMinimalPositive: { base: { @@ -346,6 +360,7 @@ export default { loading: { backgroundColor: '{{colors.interactivePositive020}}', }, + 'focus-visible': defaultFocusVisible, }, buttonMinimalInverse: { base: { @@ -367,5 +382,6 @@ export default { loading: { backgroundColor: '{{colors.interactiveInverse020}}', }, + 'focus-visible': defaultFocusVisible, }, } as Record; diff --git a/src/byline/__tests__/__snapshots__/byline.test.tsx.snap b/src/byline/__tests__/__snapshots__/byline.test.tsx.snap index 428882bda3..26bce91a9b 100644 --- a/src/byline/__tests__/__snapshots__/byline.test.tsx.snap +++ b/src/byline/__tests__/__snapshots__/byline.test.tsx.snap @@ -142,6 +142,21 @@ exports[`Byline renders correctly multiple authors with link only 1`] = ` fill: #5E44E4; } +.emotion-4:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-4:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-5 { display: -webkit-box; display: -webkit-flex; @@ -514,6 +529,21 @@ exports[`Byline renders correctly with authors and links 1`] = ` fill: #5E44E4; } +.emotion-4:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-4:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-5 { display: -webkit-box; display: -webkit-flex; @@ -812,6 +842,21 @@ exports[`Byline renders correctly with authors, location, titles and links 1`] = fill: #5E44E4; } +.emotion-4:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-4:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-5 { display: -webkit-box; display: -webkit-flex; @@ -1078,6 +1123,21 @@ exports[`Byline renders correctly with logical props overrides 1`] = ` fill: #5E44E4; } +.emotion-4:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-4:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + .emotion-5 { display: -webkit-box; display: -webkit-flex; diff --git a/src/card/__tests__/__snapshots__/card.test.tsx.snap b/src/card/__tests__/__snapshots__/card.test.tsx.snap index 800b086386..c281281a0b 100644 --- a/src/card/__tests__/__snapshots__/card.test.tsx.snap +++ b/src/card/__tests__/__snapshots__/card.test.tsx.snap @@ -275,6 +275,21 @@ exports[`Card renders actions section with given component 1`] = ` border-width: 1px; } +.emotion-7:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-7:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-7 { transition-property: background-color; @@ -403,6 +418,21 @@ exports[`Card renders actions section with given component 1`] = ` fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -676,6 +706,21 @@ exports[`Card renders actions section with overrides for minHeight 1`] = ` border-width: 1px; } +.emotion-7:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-7:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-7 { transition-property: background-color; @@ -804,6 +849,21 @@ exports[`Card renders actions section with overrides for minHeight 1`] = ` fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -1077,6 +1137,21 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = ` border-width: 1px; } +.emotion-7:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-7:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-7 { transition-property: background-color; @@ -1205,6 +1280,21 @@ exports[`Card renders actions section with overrides for spaceInset 1`] = ` fill: #C0C0C0; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -2777,6 +2867,21 @@ exports[`Card renders with card items 1`] = ` border-width: 1px; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -2905,6 +3010,21 @@ exports[`Card renders with card items 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; @@ -4798,6 +4918,21 @@ exports[`Card with href renders correctly with actions 1`] = ` border-width: 1px; } +.emotion-8:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-8:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-8 { transition-property: background-color; @@ -4926,6 +5061,21 @@ exports[`Card with href renders correctly with actions 1`] = ` fill: #C0C0C0; } +.emotion-12:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-12:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-12 { transition-property: background-color; @@ -6647,6 +6797,21 @@ exports[`CardInset renders with card items 1`] = ` border-width: 1px; } +.emotion-11:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-11:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-11 { transition-property: background-color; @@ -6775,6 +6940,21 @@ exports[`CardInset renders with card items 1`] = ` fill: #C0C0C0; } +.emotion-15:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-15:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-15 { transition-property: background-color; diff --git a/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap b/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap index 46ac35f760..b8dac30704 100644 --- a/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap +++ b/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap @@ -40,8 +40,8 @@ exports[`Checkbox active state: active off 1`] = ` background-color: #3358CC; border-radius: 50%; opacity: 0; - width: 48px; - height: 48px; + width: 1px; + height: 1px; -webkit-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -moz-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -ms-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); @@ -96,8 +96,8 @@ exports[`Checkbox active state: active off 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; + width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -234,6 +234,207 @@ exports[`Checkbox active state: active off 1`] = ` fill: #C0C0C0; } +.emotion-3:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #3358CC; + border-color: #3358CC; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:invalid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + border-color: #D20600; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:invalid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:invalid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #D20600; + border-color: #D20600; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:invalid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:valid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #FAFAFA; + border-color: #148F39; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:valid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:valid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #148F39; + border-color: #148F39; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:valid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #E0E7FF; + border-color: #2B4AAB; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #2B4AAB; + border-color: #2B4AAB; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:invalid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #FFE6E5; + border-color: #A60100; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:invalid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:invalid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #A60100; + border-color: #A60100; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:invalid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:valid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #E6FAEB; + border-color: #0A782A; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:valid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:valid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #0A782A; + border-color: #0A782A; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:valid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-3 { transition-property: background-color,border-color; @@ -254,7 +455,6 @@ exports[`Checkbox active state: active off 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; margin: 0; opacity: 0; @@ -326,8 +526,8 @@ exports[`Checkbox active state: active on 1`] = ` background-color: #3358CC; border-radius: 50%; opacity: 0; - width: 48px; - height: 48px; + width: 1px; + height: 1px; -webkit-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -moz-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -ms-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); @@ -382,8 +582,8 @@ exports[`Checkbox active state: active on 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; + width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -520,6 +720,207 @@ exports[`Checkbox active state: active on 1`] = ` fill: #C0C0C0; } +.emotion-3:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #3358CC; + border-color: #3358CC; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:invalid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + border-color: #D20600; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:invalid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:invalid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #D20600; + border-color: #D20600; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:invalid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:valid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #FAFAFA; + border-color: #148F39; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:valid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:valid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #148F39; + border-color: #148F39; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:valid:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #E0E7FF; + border-color: #2B4AAB; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #2B4AAB; + border-color: #2B4AAB; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:invalid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #FFE6E5; + border-color: #A60100; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:invalid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:invalid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #A60100; + border-color: #A60100; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:invalid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:valid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #E6FAEB; + border-color: #0A782A; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:valid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + +.emotion-3:checked:valid:focus-visible:hover:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #0A782A; + border-color: #0A782A; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:valid:focus-visible:hover:not(:disabled) { + outline-style: auto; + } + } +} + @media screen and (prefers-reduced-motion: no-preference) { .emotion-3 { transition-property: background-color,border-color; @@ -540,7 +941,6 @@ exports[`Checkbox active state: active on 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; margin: 0; opacity: 0; @@ -645,8 +1045,8 @@ exports[`Checkbox hover on feedback shows it: with hover 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; + width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -691,7 +1091,6 @@ exports[`Checkbox hover on feedback shows it: with hover 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; margin: 0; opacity: 0; @@ -781,8 +1180,8 @@ exports[`Checkbox hover on feedback shows it: without hover 1`] = ` background-color: #3358CC; border-radius: 50%; opacity: 0; - width: 48px; - height: 48px; + width: 1px; + height: 1px; -webkit-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -moz-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); -ms-transform: translate3d(calc(48px / -2), calc(48px / -2), 0); @@ -837,8 +1236,8 @@ exports[`Checkbox hover on feedback shows it: without hover 1`] = ` position: absolute; top: 0; left: 0; - width: 100%; height: 100%; + width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -975,89 +1374,289 @@ exports[`Checkbox hover on feedback shows it: without hover 1`] = ` fill: #C0C0C0; } -@media screen and (prefers-reduced-motion: no-preference) { - .emotion-3 { - transition-property: background-color,border-color; - transition-duration: 200ms,200ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); - } +.emotion-3:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; } -@media screen and (prefers-reduced-motion: reduce) { - .emotion-3 { - transition-property: background-color,border-color; - transition-duration: 0ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1); +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:focus-visible:not(:disabled) { + outline-style: auto; + } } } -.emotion-4 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - margin: 0; - opacity: 0; - cursor: inherit; +.emotion-3:checked:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + background-color: #3358CC; + border-color: #3358CC; } -.emotion-5 { - color: #2E2E2E; - font-family: "DM Sans",sans-serif; - font-size: 14px; - line-height: 1.5; - font-weight: 400; - letter-spacing: 0; +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-3:checked:focus-visible:not(:disabled) { + outline-style: auto; + } + } } -.emotion-5:disabled { - color: #C0C0C0; +.emotion-3:invalid:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + border-color: #D20600; } -