diff --git a/.changeset/little-sheep-shave.md b/.changeset/little-sheep-shave.md new file mode 100644 index 00000000000..9f274d18451 --- /dev/null +++ b/.changeset/little-sheep-shave.md @@ -0,0 +1,9 @@ +--- +"@hashicorp/design-system-components": minor +--- + +`CodeBlock` - Updated focus ring colors in interactive elements to fix a11y color contrast issues + +`CodeEditor` - Updated focus ring colors in interactive elements to fix a11y color contrast issues + +`SideNav` - Updated focus ring colors in interactive elements to fix a11y color contrast issues diff --git a/packages/components/src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts b/packages/components/src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts index 9be0d5e6c06..2c7a41b4cd5 100644 --- a/packages/components/src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts +++ b/packages/components/src/modifiers/hds-code-editor/palettes/hds-dark-palette.ts @@ -21,3 +21,5 @@ export const HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL = '#EF3016'; export const HDS_CODE_EDITOR_COLOR_SURFACE_PRIMARY = '#0D0E12'; export const HDS_CODE_EDITOR_COLOR_SURFACE_FAINT = '#15181e'; export const HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE = '#2B303C'; +export const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL = '#9BC7FD'; +export const HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL = '#0D69F2'; diff --git a/packages/components/src/modifiers/hds-code-editor/themes/hds-dark-theme.ts b/packages/components/src/modifiers/hds-code-editor/themes/hds-dark-theme.ts index 8a6ea4848fb..18f34035852 100644 --- a/packages/components/src/modifiers/hds-code-editor/themes/hds-dark-theme.ts +++ b/packages/components/src/modifiers/hds-code-editor/themes/hds-dark-theme.ts @@ -14,6 +14,8 @@ import { HDS_CODE_EDITOR_COLOR_SURFACE_INTERACTIVE_ACTIVE, HDS_CODE_EDITOR_COLOR_FOREGROUND_CRITICAL, HDS_CODE_EDITOR_COLOR_FOREGROUND_FAINT, + HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL, + HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL, } from '../palettes/hds-dark-palette.ts'; const CLOSE_BUTTON_SELECTOR = '.cm-panel.cm-panel-lint button[name="close"]'; @@ -125,8 +127,8 @@ const hdsDark = EditorView.theme( '.cm-panel.cm-panel-lint ul:focus li.cm-diagnostic[aria-selected]': { background: 'none', backgroundColor: 'var(--token-color-palette-neutral-700)', - border: `4px solid var(--token-color-focus-critical-external)`, - boxShadow: `inset 0 0 0 1px var(--token-color-focus-critical-internal)`, + border: `4px solid ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_EXTERNAL}`, + boxShadow: `inset 0 0 0 1px ${HDS_CODE_EDITOR_COLOR_FOCUS_ACTION_INTERNAL}`, color: 'var(--token-color-foreground-high-contrast)', }, '.cm-panels-bottom .cm-panel.cm-panel-lint': { diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss index c68f7f36e98..ca7a907e647 100644 --- a/packages/components/src/styles/components/code-block/index.scss +++ b/packages/components/src/styles/components/code-block/index.scss @@ -167,6 +167,11 @@ $hds-code-block-code-padding: 16px; &.mock-focus, &:focus-visible { background-color: var(--hds-code-block-color-surface-faint); + border-color: var(--hds-code-block-color-focus-action-internal); + + &::before { + border-color: var(--hds-code-block-color-focus-action-external); + } } &.hds-copy-button--status-success { diff --git a/packages/components/src/styles/components/code-block/theme.scss b/packages/components/src/styles/components/code-block/theme.scss index 5b94a1b4fb6..573915b3d31 100644 --- a/packages/components/src/styles/components/code-block/theme.scss +++ b/packages/components/src/styles/components/code-block/theme.scss @@ -47,6 +47,10 @@ // lines of code - highlighted ---- --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%); --hds-code-block-color-line-highlight-border: #1555d4; + // Copy Button + // TODO: Remove focus tokens once global tokens for dark themes are implemented + --hds-code-block-color-focus-action-internal: #9bc7fd; + --hds-code-block-color-focus-action-external: #0d69f2; // Syntax highlighting tokens: // general ---- diff --git a/packages/components/src/styles/components/code-editor/index.scss b/packages/components/src/styles/components/code-editor/index.scss index 68e50073526..69ed146ff3c 100644 --- a/packages/components/src/styles/components/code-editor/index.scss +++ b/packages/components/src/styles/components/code-editor/index.scss @@ -96,6 +96,11 @@ &:focus, &:hover { background-color: var(--hds-code-editor-color-surface-primary); + border-color: var(--hds-code-editor-color-focus-action-internal); + + &::before { + border-color: var(--hds-code-editor-color-focus-action-external); + } .hds-button__icon { color: var(--hds-code-editor-color-foreground-primary); diff --git a/packages/components/src/styles/components/code-editor/theme.scss b/packages/components/src/styles/components/code-editor/theme.scss index d1a67626b95..01425605138 100644 --- a/packages/components/src/styles/components/code-editor/theme.scss +++ b/packages/components/src/styles/components/code-editor/theme.scss @@ -17,4 +17,7 @@ --hds-code-editor-color-surface-faint: #15181e; --hds-code-editor-color-surface-primary: #0d0e12; --hds-code-editor-color-surface-interactive-active: #2b303c; + // TODO: Remove focus tokens once global tokens for dark themes are implemented + --hds-code-editor-color-focus-action-internal: #9bc7fd; + --hds-code-editor-color-focus-action-external: #0d69f2; } diff --git a/packages/components/src/styles/components/side-nav/content.scss b/packages/components/src/styles/components/side-nav/content.scss index 12ac3595efc..338d9c4a122 100644 --- a/packages/components/src/styles/components/side-nav/content.scss +++ b/packages/components/src/styles/components/side-nav/content.scss @@ -79,6 +79,8 @@ // /