From d5cada7bc83d27e5e8cff7df5997c23c3f18337e Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Tue, 29 Sep 2026 14:44:33 +0100 Subject: [PATCH 1/5] feat: add a focus color --- src/assets/stylesheets/InternalStyles.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index 4cae26ed2..b2bd393ad 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/src/assets/stylesheets/InternalStyles.scss @@ -58,6 +58,7 @@ --editor-color-text: var(--rpf-text-primary); --editor-color-text-secondary: var(--rpf-text-secondary); --editor-color-tab-background: var(--rpf-off-white); + --editor-focus-color: var(--rpf-raspberry-800); --rpf-files-list-item-active: var(--editor-color-theme-tertiary); --rpf-files-list-item-hover: var(--editor-color-theme-tertiary); @@ -88,6 +89,7 @@ --editor-color-theme-tertiary: var(--rpf-navy-900); --editor-color-text: var(--rpf-white); --editor-color-text-secondary: var(--rpf-text-secondary-darkmode); + --editor-focus-color: var(--rpf-raspberry-800); --rpf-files-list-item-active: var(--editor-color-layer-2); --rpf-files-list-item-hover: var(--editor-color-layer-2); From dbdbd38fe5b54a2cdce6a979c38ee7dc0ebe7a9a Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Tue, 29 Sep 2026 14:48:29 +0100 Subject: [PATCH 2/5] fix: use editor-focus-color --- src/assets/stylesheets/EditorPanel.scss | 2 +- src/assets/stylesheets/Global.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss index 6e7ae5989..aeb0903c3 100644 --- a/src/assets/stylesheets/EditorPanel.scss +++ b/src/assets/stylesheets/EditorPanel.scss @@ -24,7 +24,7 @@ position: absolute; z-index: 201; inset: 4px; - outline: 4px solid var(--rpf-input-outline-color); + outline: 4px solid var(--editor-focus-color); pointer-events: none; } diff --git a/src/assets/stylesheets/Global.scss b/src/assets/stylesheets/Global.scss index 663b7875a..0b5711847 100644 --- a/src/assets/stylesheets/Global.scss +++ b/src/assets/stylesheets/Global.scss @@ -14,7 +14,7 @@ a:not(:where(.rpf-button)) { &:focus-visible { - outline: 3px solid var(--rpf-raspberry-800); + outline: 3px solid var(--editor-focus-color); } } @@ -22,7 +22,7 @@ button:not(:where(.rpf-button)) { all: initial; cursor: pointer; &:focus-visible { - outline: 3px solid var(--rpf-raspberry-800); + outline: 3px solid var(--editor-focus-color); } } From 134ceca15b86f5b2f85a716436808c4eedd8b5c3 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Tue, 29 Sep 2026 14:50:43 +0100 Subject: [PATCH 3/5] refactor: remove unused custom property Confirmed this is not used anywhere across our products --- src/assets/stylesheets/InternalStyles.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index b2bd393ad..681145b44 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/src/assets/stylesheets/InternalStyles.scss @@ -153,7 +153,6 @@ white 30% ); - --rpf-button-background-color-focus: var(--editor-color-theme); --rpf-button-background-color-disabled: var(--rpf-grey-500); // Some parts of the button are not currently themeable via dedicated custom properties yet From a9a79070349678d5ef94ab54d224ee9476440942 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Tue, 29 Sep 2026 14:57:10 +0100 Subject: [PATCH 4/5] refactor: replace all focus uses of `$rpf-brand-raspberry` with new `--editor-focus-color` --- src/assets/stylesheets/Button.scss | 9 +++++---- src/assets/stylesheets/HtmlRunner.scss | 2 +- src/assets/stylesheets/Instructions.scss | 2 +- src/assets/stylesheets/Modal.scss | 2 +- src/assets/stylesheets/SelectButtons.scss | 2 +- src/assets/stylesheets/Tabs.scss | 4 ++-- 6 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 0631e7b46..69a799302 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -31,7 +31,7 @@ } &:focus-visible { - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); outline: none; } @@ -219,10 +219,11 @@ &:focus-visible { background-clip: padding-box; border: 2px solid transparent; - outline: 3px solid $rpf-brand-raspberry; + outline: 3px solid var(--editor-focus-color); } - &.btn--secondary, &.btn--secondary:hover { + &.btn--secondary, + &.btn--secondary:hover { border-color: var(--rpf-alert-error); --rpf-button-secondary-border-color-hover: var(--rpf-alert-error); } @@ -276,7 +277,7 @@ outline: none; .btn { - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); } } diff --git a/src/assets/stylesheets/HtmlRunner.scss b/src/assets/stylesheets/HtmlRunner.scss index 8078ef75f..fdda40540 100644 --- a/src/assets/stylesheets/HtmlRunner.scss +++ b/src/assets/stylesheets/HtmlRunner.scss @@ -40,7 +40,7 @@ a.htmlrunner-link { &:focus-visible { background-color: inherit; - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); outline: none; } diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss index 32c680570..47e2fad0a 100644 --- a/src/assets/stylesheets/Instructions.scss +++ b/src/assets/stylesheets/Instructions.scss @@ -349,7 +349,7 @@ border: 0; &:focus-visible { - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); outline: none; } } diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss index 6cb3235d9..d2b9c2b50 100644 --- a/src/assets/stylesheets/Modal.scss +++ b/src/assets/stylesheets/Modal.scss @@ -38,7 +38,7 @@ } &:focus-visible { - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); outline: none; } } diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss index 37e48fca4..c5704402f 100644 --- a/src/assets/stylesheets/SelectButtons.scss +++ b/src/assets/stylesheets/SelectButtons.scss @@ -82,5 +82,5 @@ } .select-buttons__button:focus-visible + .select-buttons__label { - outline: 3px solid $rpf-brand-raspberry; + outline: 3px solid var(--editor-focus-color); } diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss index 636bca3c3..d7fb6464e 100644 --- a/src/assets/stylesheets/Tabs.scss +++ b/src/assets/stylesheets/Tabs.scss @@ -53,7 +53,7 @@ &:focus-visible { outline-offset: -3px; - outline: 3px solid $rpf-brand-raspberry; + outline: 3px solid var(--editor-focus-color); } &:focus:after { @@ -87,7 +87,7 @@ border: 0; svg { - border: 3px solid $rpf-brand-raspberry; + border: 3px solid var(--editor-focus-color); } } } From 3c127e92b407ad1971b3a726bb96371dd3879774 Mon Sep 17 00:00:00 2001 From: Max Elkins Date: Tue, 29 Sep 2026 15:05:18 +0100 Subject: [PATCH 5/5] refactor: replace all focus uses of `--rpf-brand-raspberry` with new `--editor-focus-color` --- src/assets/stylesheets/Button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 69a799302..3e674d4b5 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -309,7 +309,7 @@ --rpf-button-primary-text-color: var(--rpf-white); // Secondary - --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry); + --rpf-button-secondary-background-color-focus: var(--editor-focus-color); --rpf-button-secondary-background-color-hover: var( --editor-color-theme-tertiary ); @@ -341,7 +341,7 @@ --rpf-button-primary-text-color: var(--rpf-black); // Secondary - --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry); + --rpf-button-secondary-background-color-focus: var(--editor-focus-color); --rpf-button-secondary-background-color-hover: var(--editor-color-outline); --rpf-button-secondary-background-color-active: var(--rpf-navy-200); --rpf-button-secondary-background-color-disabled: var(--editor-color-layer-3);