From 5bbc3a40a0b4199c85642ff5a50f0307b9f204ff Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 19 Oct 2026 13:11:42 +0200 Subject: [PATCH] Update focus color token --- apps/website/screens/common/HeadingLink.tsx | 2 +- .../components/branding/ColorCard.tsx | 2 +- packages/lib/src/accordion/AccordionItem.tsx | 4 +- packages/lib/src/action-icon/ActionIcon.tsx | 2 +- packages/lib/src/base-menu/ItemAction.tsx | 2 +- packages/lib/src/breadcrumbs/Item.tsx | 2 +- packages/lib/src/button/utils.ts | 2 +- packages/lib/src/card/utils.ts | 10 ++--- packages/lib/src/checkbox/Checkbox.tsx | 2 +- packages/lib/src/chip/utils.ts | 2 +- .../lib/src/container/Container.stories.tsx | 2 +- packages/lib/src/data-grid/DataGrid.tsx | 2 +- packages/lib/src/date-input/Calendar.tsx | 2 +- packages/lib/src/date-input/DatePicker.tsx | 2 +- .../lib/src/date-input/DateUnitPicker.tsx | 2 +- packages/lib/src/dropdown/Dropdown.tsx | 2 +- .../lib/src/dropdown/DropdownMenuItem.tsx | 2 +- packages/lib/src/file-input/FileInput.tsx | 2 +- packages/lib/src/footer/Footer.tsx | 2 +- packages/lib/src/link/Link.tsx | 2 +- packages/lib/src/message-input/utils.ts | 42 +++++++++++-------- packages/lib/src/nav-tabs/Tab.tsx | 2 +- packages/lib/src/quick-nav/QuickNav.tsx | 2 +- packages/lib/src/radio-group/RadioInput.tsx | 2 +- .../src/resultset-table/ResultsetTable.tsx | 2 +- packages/lib/src/search-bar/SearchBar.tsx | 2 +- packages/lib/src/select/ListOption.tsx | 2 +- packages/lib/src/slider/Slider.tsx | 2 +- packages/lib/src/switch/Switch.tsx | 2 +- packages/lib/src/tabs/Tab.tsx | 2 +- packages/lib/src/text-input/Suggestion.tsx | 2 +- .../lib/src/time-input/TimePickerColumn.tsx | 2 +- packages/lib/src/wizard/Wizard.tsx | 2 +- 33 files changed, 62 insertions(+), 54 deletions(-) diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx index 4a85898880..b2cb094112 100644 --- a/apps/website/screens/common/HeadingLink.tsx +++ b/apps/website/screens/common/HeadingLink.tsx @@ -40,7 +40,7 @@ const HeadingAnchor = styled.a` } &:focus { opacity: 1; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -4px; } &:hover { diff --git a/apps/website/screens/theme-generator/components/branding/ColorCard.tsx b/apps/website/screens/theme-generator/components/branding/ColorCard.tsx index c056ddcbbc..014743f72f 100644 --- a/apps/website/screens/theme-generator/components/branding/ColorCard.tsx +++ b/apps/website/screens/theme-generator/components/branding/ColorCard.tsx @@ -17,7 +17,7 @@ const ColorBox = styled.button<{ color: string }>` &:focus { outline-style: solid; outline-width: var(--border-width-m); - outline-color: var(--border-color-secondary-medium); + outline-color: var(--border-color-neutral-dark); outline-offset: 2px; } `; diff --git a/packages/lib/src/accordion/AccordionItem.tsx b/packages/lib/src/accordion/AccordionItem.tsx index c71f1649ec..c5cbb9c35b 100644 --- a/packages/lib/src/accordion/AccordionItem.tsx +++ b/packages/lib/src/accordion/AccordionItem.tsx @@ -27,14 +27,14 @@ const AccordionTrigger = styled.button` cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; :focus, :focus-visible { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } :hover:enabled, :active:enabled { background-color: var(--color-bg-primary-lighter); } :active:enabled { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } &[aria-expanded="true"] { diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 1442ed9c62..a3b963d861 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -45,7 +45,7 @@ const ActionIconContainer = styled.div< &:active:enabled { outline-style: solid; outline-width: ${getOutlineWidth(size)}; - outline-color: var(--border-color-secondary-medium); + outline-color: var(--border-color-neutral-dark); outline-offset: -2px; } `} diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx index df7d2a0480..4ef1812b9a 100644 --- a/packages/lib/src/base-menu/ItemAction.tsx +++ b/packages/lib/src/base-menu/ItemAction.tsx @@ -38,7 +38,7 @@ const Action = styled.a<{ selected ? "var(--color-bg-primary-medium)" : "var(--color-bg-neutral-light)"}; } &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } `; diff --git a/packages/lib/src/breadcrumbs/Item.tsx b/packages/lib/src/breadcrumbs/Item.tsx index 59b7707e02..c64bf1396a 100644 --- a/packages/lib/src/breadcrumbs/Item.tsx +++ b/packages/lib/src/breadcrumbs/Item.tsx @@ -31,7 +31,7 @@ const Link = styled.a` cursor: pointer; &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } `; diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index 9bd0f81cbe..bf8c0e627b 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -15,7 +15,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | border-radius: var(--border-radius-s); &:focus:enabled { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; }`; diff --git a/packages/lib/src/card/utils.ts b/packages/lib/src/card/utils.ts index 20c84aa68f..856ca2b8dd 100644 --- a/packages/lib/src/card/utils.ts +++ b/packages/lib/src/card/utils.ts @@ -35,17 +35,17 @@ export const getCardStyles = ( if (mode === "elevated") { hover = `box-shadow: var(--shadow-300);`; focus = `box-shadow: var(--shadow-100); - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`; + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`; active = `box-shadow: var(--shadow-100);`; } else if (mode === "outlined") { if (selected) { hover = `border-width: var(--border-width-none);`; - focus = `border-width: var(--border-width-none); outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`; + focus = `border-width: var(--border-width-none); outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`; active = `border-width: var(--border-width-none);`; } else { hover = `border-width: var(--border-width-m); border-color: var(--border-color-neutral-medium);outline-offset: var(--border-width-none);`; - focus = `border-width: var(--boselectedrder-width-m); - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);outline-offset: var(--border-width-none);`; + focus = `border-width: var(--border-width-m); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);outline-offset: var(--border-width-none);`; active = `border-width: var(--border-width-m); border-color: var(--border-color-neutral-strong);outline-offset: var(--border-width-none);`; } } @@ -67,7 +67,7 @@ export const getSelectableWrapperStyles = (selected: boolean) => { if (selected) { hover = `outline-color: var(--border-color-primary-stronger);`; - focus = `outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`; + focus = `outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`; active = `outline-color: var(--border-color-primary-strong);`; } diff --git a/packages/lib/src/checkbox/Checkbox.tsx b/packages/lib/src/checkbox/Checkbox.tsx index 4a0cfc3f50..3f2a5e4d4e 100644 --- a/packages/lib/src/checkbox/Checkbox.tsx +++ b/packages/lib/src/checkbox/Checkbox.tsx @@ -28,7 +28,7 @@ const Checkbox = styled.span<{ ${({ disabled }) => disabled && "pointer-events: none;"} &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } svg { diff --git a/packages/lib/src/chip/utils.ts b/packages/lib/src/chip/utils.ts index adbb9804d4..efde4534d0 100644 --- a/packages/lib/src/chip/utils.ts +++ b/packages/lib/src/chip/utils.ts @@ -9,7 +9,7 @@ export const getChipStyles = (mode: ChipPropsType["mode"], selected?: boolean) = const commonStyles = ` &:focus { border-color: transparent; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); }`; switch (mode) { diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx index 89f777fdf1..e306e26a82 100644 --- a/packages/lib/src/container/Container.stories.tsx +++ b/packages/lib/src/container/Container.stories.tsx @@ -270,7 +270,7 @@ const Container = () => ( diff --git a/packages/lib/src/date-input/DatePicker.tsx b/packages/lib/src/date-input/DatePicker.tsx index d40fbbdfb0..0cfed35404 100644 --- a/packages/lib/src/date-input/DatePicker.tsx +++ b/packages/lib/src/date-input/DatePicker.tsx @@ -45,7 +45,7 @@ const HeaderButton = styled.button` background-color: var(--color-bg-primary-light); } &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } &:active { color: var(--color-fg-neutral-bright); diff --git a/packages/lib/src/date-input/DateUnitPicker.tsx b/packages/lib/src/date-input/DateUnitPicker.tsx index 2df05ad725..35d20e0e58 100644 --- a/packages/lib/src/date-input/DateUnitPicker.tsx +++ b/packages/lib/src/date-input/DateUnitPicker.tsx @@ -55,7 +55,7 @@ const PickerButton = styled.button<{ color: var(--color-fg-neutral-dark); } &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } &:active { color: var(--color-fg-neutral-bright); diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 5537d2945e..7efcc9aa05 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -62,7 +62,7 @@ const DropdownTrigger = styled.button<{ !props.disabled && ` &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } &:hover, &:active { diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx index b11b21dfd0..b56c6ef98a 100644 --- a/packages/lib/src/dropdown/DropdownMenuItem.tsx +++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx @@ -21,7 +21,7 @@ const DropdownMenuItemContainer = styled.li<{ ${(props) => props.visuallyFocused && ` - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: calc(-1 * var(--border-width-m)); `} &:first-child { diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx index 92ed214386..d9283aa77e 100644 --- a/packages/lib/src/file-input/FileInput.tsx +++ b/packages/lib/src/file-input/FileInput.tsx @@ -79,7 +79,7 @@ const DragDropArea = styled.div<{ props.isDragging && ` background-color: var(--color-bg-secondary-lightest); - border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + border: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); `} cursor: ${(props) => props.disabled && "not-allowed"}; `; diff --git a/packages/lib/src/footer/Footer.tsx b/packages/lib/src/footer/Footer.tsx index 0edd31c5bc..63cadef133 100644 --- a/packages/lib/src/footer/Footer.tsx +++ b/packages/lib/src/footer/Footer.tsx @@ -109,7 +109,7 @@ const SocialAnchor = styled.a` &:focus, &:focus-visible { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: 0px; } `; diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx index 9c177da890..16ee0b3c4c 100644 --- a/packages/lib/src/link/Link.tsx +++ b/packages/lib/src/link/Link.tsx @@ -35,7 +35,7 @@ const Link = styled.a<{ ${({ disabled, inheritColor }) => !inheritColor && !disabled && "&:visited { color: var(--color-fg-primary-strongest); }"}; &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); ${({ disabled }) => disabled && "outline: none"} } `; diff --git a/packages/lib/src/message-input/utils.ts b/packages/lib/src/message-input/utils.ts index 527cf9ee9c..2c892c306b 100644 --- a/packages/lib/src/message-input/utils.ts +++ b/packages/lib/src/message-input/utils.ts @@ -12,39 +12,47 @@ export const getFilePreview = (file: File): string => { }; export const inputStylesByStatePromptInput = (disabled: boolean, error: boolean, focus?: boolean) => css` - background-color: ${disabled - ? `var(--color-bg-neutral-lighter)` - : `var(--color-bg-neutral-lightest); -`}; + background-color: ${ + disabled + ? `var(--color-bg-neutral-lighter)` + : `var(--color-bg-neutral-lightest); +` + }; border-radius: var(--border-radius-l); border-width: ${!disabled && error ? "var(--border-width-m)" : "var(--border-width-s)"}; border-style: var(--border-style-default); - border-color: ${disabled - ? "var(--border-color-neutral-strong)" - : error - ? "var(--border-color-error-medium)" - : "var(--border-color-neutral-lighter)"}; + border-color: ${ + disabled + ? "var(--border-color-neutral-strong)" + : error + ? "var(--border-color-error-medium)" + : "var(--border-color-neutral-lighter)" + }; - ${!disabled - ? ` + ${ + !disabled + ? ` &:hover { border-color: ${error ? "var(--border-color-error-strong)" : "var(--border-color-primary-strong)"}; } &:focus { outline-offset: -2px; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); border-color: transparent; } ` - : "cursor: not-allowed;"}; + : "cursor: not-allowed;" + }; - ${focus && !disabled - ? ` + ${ + focus && !disabled + ? ` outline-offset: -2px; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); border-color: transparent; ` - : ""}; + : "" + }; `; diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index ac4f76b96e..f9d9643904 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -41,7 +41,7 @@ const TabLink = styled.div< background-color: var(--color-bg-primary-lighter); } :focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: calc(var(--border-width-m) * -1); } :active { diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx index 5e322e1cad..fec736a526 100644 --- a/packages/lib/src/quick-nav/QuickNav.tsx +++ b/packages/lib/src/quick-nav/QuickNav.tsx @@ -55,7 +55,7 @@ const Link = styled.a` color: var(--color-fg-primary-strong); } &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } `; diff --git a/packages/lib/src/radio-group/RadioInput.tsx b/packages/lib/src/radio-group/RadioInput.tsx index c48be3d49d..d3a57238c4 100644 --- a/packages/lib/src/radio-group/RadioInput.tsx +++ b/packages/lib/src/radio-group/RadioInput.tsx @@ -25,7 +25,7 @@ const RadioButton = styled.span` ${({ disabled }) => disabled && "pointer-events: none;"} &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } `; diff --git a/packages/lib/src/resultset-table/ResultsetTable.tsx b/packages/lib/src/resultset-table/ResultsetTable.tsx index a493f8281b..f64a4f0084 100644 --- a/packages/lib/src/resultset-table/ResultsetTable.tsx +++ b/packages/lib/src/resultset-table/ResultsetTable.tsx @@ -23,7 +23,7 @@ const SortingHeader = styled.span<{ ? `border-radius: var(--border-radius-xs); cursor: pointer; &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);s + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); }` : "cursor: default;"} `; diff --git a/packages/lib/src/search-bar/SearchBar.tsx b/packages/lib/src/search-bar/SearchBar.tsx index 6d641b3510..d069009d47 100644 --- a/packages/lib/src/search-bar/SearchBar.tsx +++ b/packages/lib/src/search-bar/SearchBar.tsx @@ -33,7 +33,7 @@ const SearchBarContainer = styled.div<{ disabled: Required["disa &:focus-visible { border-color: transparent; outline-offset: -2px; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } ` : css` diff --git a/packages/lib/src/select/ListOption.tsx b/packages/lib/src/select/ListOption.tsx index c5015cd8a8..0a508d83f5 100644 --- a/packages/lib/src/select/ListOption.tsx +++ b/packages/lib/src/select/ListOption.tsx @@ -20,7 +20,7 @@ const OptionItem = styled.li<{ } ${({ visualFocused }) => visualFocused && - "outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px;"} + "outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px;"} `; const StyledOption = styled.span<{ diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx index f5e55eb6d0..fc4d0e1099 100644 --- a/packages/lib/src/slider/Slider.tsx +++ b/packages/lib/src/slider/Slider.tsx @@ -82,7 +82,7 @@ const thumbStyles = (disabled: SliderPropsType["disabled"]) => css` } `; const thumbFocusStyles = css` - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: 2px; `; const SliderInput = styled.input<{ diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx index 08cd1d0afe..6b4ad1199a 100644 --- a/packages/lib/src/switch/Switch.tsx +++ b/packages/lib/src/switch/Switch.tsx @@ -53,7 +53,7 @@ const SwitchContainer = styled.div<{ /* Thumb focus */ &:not([aria-disabled="true"]) { > span::before { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: var(--spacing-padding-xxxs); } } diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx index 84283f2725..bf2d92eafa 100644 --- a/packages/lib/src/tabs/Tab.tsx +++ b/packages/lib/src/tabs/Tab.tsx @@ -21,7 +21,7 @@ export const sharedTabStyles = ` background: var(--color-bg-primary-lighter); } &:focus:enabled { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px; } &:disabled { diff --git a/packages/lib/src/text-input/Suggestion.tsx b/packages/lib/src/text-input/Suggestion.tsx index 20cdc03761..462f709cd0 100644 --- a/packages/lib/src/text-input/Suggestion.tsx +++ b/packages/lib/src/text-input/Suggestion.tsx @@ -19,7 +19,7 @@ const SuggestionContainer = styled.li<{ } ${({ visuallyFocused }) => visuallyFocused && - "outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px;"} + "outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px;"} `; const StyledSuggestion = styled.span` diff --git a/packages/lib/src/time-input/TimePickerColumn.tsx b/packages/lib/src/time-input/TimePickerColumn.tsx index a5e9537265..7db35e0b2b 100644 --- a/packages/lib/src/time-input/TimePickerColumn.tsx +++ b/packages/lib/src/time-input/TimePickerColumn.tsx @@ -23,7 +23,7 @@ const TimePickerOption = styled.li<{ color: ${(props) => (props.selected ? "var(--color-fg-neutral-bright);" : "var(--color-fg-neutral-dark);")}; &:focus { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: calc(var(--border-width-m) * -1); } &:hover { diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index fb0799b368..50d1cd06b8 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -113,7 +113,7 @@ const Step = styled.button<{ } `} &:focus:enabled { - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); } &:disabled { cursor: not-allowed;