From 541d958e5004163e0a47a79aff3d078564c781fc Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Mon, 14 Apr 2025 10:34:00 -0600 Subject: [PATCH 1/5] Feat: Update focus ring colors in `CodeBlock` and `CodeEditor` --- .../modifiers/hds-code-editor/palettes/hds-dark-palette.ts | 2 ++ .../src/modifiers/hds-code-editor/themes/hds-dark-theme.ts | 6 ++++-- .../components/src/styles/components/code-block/index.scss | 5 +++++ .../components/src/styles/components/code-block/theme.scss | 3 +++ .../components/src/styles/components/code-editor/index.scss | 5 +++++ .../components/src/styles/components/code-editor/theme.scss | 2 ++ 6 files changed, 21 insertions(+), 2 deletions(-) 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..6c921b7f150 100644 --- a/packages/components/src/styles/components/code-block/theme.scss +++ b/packages/components/src/styles/components/code-block/theme.scss @@ -47,6 +47,9 @@ // 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 + --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..de74a2b6544 100644 --- a/packages/components/src/styles/components/code-editor/theme.scss +++ b/packages/components/src/styles/components/code-editor/theme.scss @@ -17,4 +17,6 @@ --hds-code-editor-color-surface-faint: #15181e; --hds-code-editor-color-surface-primary: #0d0e12; --hds-code-editor-color-surface-interactive-active: #2b303c; + --hds-code-editor-color-focus-action-internal: #9bc7fd; + --hds-code-editor-color-focus-action-external: #0d69f2; } From 6310796d0d43c0fe598d6ed952731be889bb4942 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Mon, 14 Apr 2025 10:34:30 -0600 Subject: [PATCH 2/5] Feat: Update focus ring colors in `SideNav` --- .../src/styles/components/side-nav/content.scss | 2 ++ .../styles/components/side-nav/toggle-button.scss | 4 ++-- .../src/styles/components/side-nav/vars.scss | 6 ++++++ .../src/styles/mixins/_interactive-dark-theme.scss | 14 +++++++++++--- 4 files changed, 21 insertions(+), 5 deletions(-) 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 @@ // /