From 4487cf793d0e07c948c2c0a6988e048e28a23d26 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Mon, 18 Aug 2025 14:59:35 +0200 Subject: [PATCH 1/3] Add toggle --- app/assets/stylesheets/framework/super_sidebar.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index b34126c14cab80..2c845fd9d35287 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -773,3 +773,14 @@ $scroll-scrim-height: 2.25rem; .super-sidebar { background-color: var(--super-sidebar-bg); } + .gl-form-radio.custom-control { + --gl-control-background-color-selected-default: var(--gl-color-neutral-50); + --gl-control-background-color-selected-hover: var(--gl-color-neutral-10); + --gl-control-background-color-selected-focus: var(--gl-color-neutral-0); + + --gl-control-border-color-selected-default: var(--gl-color-neutral-50); + --gl-control-border-color-selected-hover: var(--gl-color-neutral-10); + --gl-control-border-color-selected-focus: var(--gl-color-neutral-0); + } +} +>>>>>>> cd53d37cd73c2 (Add toggle) -- GitLab From 26fd10f3e55a315a92ff0dcace58bd0440b70cf9 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Wed, 27 Aug 2025 14:29:16 +0200 Subject: [PATCH 2/3] Theme checkboxes, radios and toggle --- app/assets/stylesheets/framework/super_sidebar.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 2c845fd9d35287..b34126c14cab80 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -773,14 +773,3 @@ $scroll-scrim-height: 2.25rem; .super-sidebar { background-color: var(--super-sidebar-bg); } - .gl-form-radio.custom-control { - --gl-control-background-color-selected-default: var(--gl-color-neutral-50); - --gl-control-background-color-selected-hover: var(--gl-color-neutral-10); - --gl-control-background-color-selected-focus: var(--gl-color-neutral-0); - - --gl-control-border-color-selected-default: var(--gl-color-neutral-50); - --gl-control-border-color-selected-hover: var(--gl-color-neutral-10); - --gl-control-border-color-selected-focus: var(--gl-color-neutral-0); - } -} ->>>>>>> cd53d37cd73c2 (Add toggle) -- GitLab From 6c78cb5b185a76bcf259d333bcde45c3eb5a1bf2 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Thu, 11 Sep 2025 15:04:51 +0200 Subject: [PATCH 3/3] Rebase --- .../framework/ds_experiments_tokens.scss | 51 ++++++++++--------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/framework/ds_experiments_tokens.scss b/app/assets/stylesheets/framework/ds_experiments_tokens.scss index a965bb01a3bb11..6f42d444e7bdab 100644 --- a/app/assets/stylesheets/framework/ds_experiments_tokens.scss +++ b/app/assets/stylesheets/framework/ds_experiments_tokens.scss @@ -2,10 +2,15 @@ * DS token overrides */ - // Neutralize design tokens +// Neutralize design tokens :root.application-chrome { + --accent-default: var(--theme-accent-color); + --accent-hover: lch(from var(--accent-default) calc(l * 1.25) c h); + --accent-focus: lch(from var(--accent-default) calc(l / 1.5) c h); + --accent-active: lch(from var(--accent-default) calc(l / 1.5) c h); + --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-800); --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-950); --gl-button-confirm-primary-background-color-focus: var(--gl-color-neutral-950); @@ -32,28 +37,37 @@ --gl-tab-selected-indicator-color-default: var(--gl-color-neutral-800); - --gl-control-background-color-selected-default: var(--gl-color-neutral-800); - --gl-control-background-color-selected-hover: var(--gl-color-neutral-950); - --gl-control-background-color-selected-focus: var(--gl-color-neutral-950); - - --gl-control-border-color-selected-default: var(--gl-color-neutral-800); - --gl-control-border-color-selected-hover: var(--gl-color-neutral-950); - --gl-control-border-color-selected-focus: var(--gl-color-neutral-950); + --gl-control-background-color-selected-default: var(--accent-default); + --gl-control-background-color-selected-hover: var(--accent-hover); + --gl-control-background-color-selected-focus: var(--accent-focus); - --gl-toggle-switch-icon-color-checked-default: var(--gl-color-neutral-800); - --gl-toggle-switch-icon-color-checked-hover: var(--gl-color-neutral-950); - --gl-toggle-switch-icon-color-checked-focus: var(--gl-color-neutral-950); - --gl-toggle-switch-icon-color-checked-active: var(--gl-color-neutral-1000); + --gl-control-border-color-selected-default: var(--accent-default); + --gl-control-border-color-selected-hover: var(--accent-hover); + --gl-control-border-color-selected-focus: var(--accent-focus); --gl-action-strong-confirm-background-color-default: var(--gl-color-neutral-800); --gl-action-strong-confirm-background-color-hover: var(--gl-color-neutral-950); --gl-action-strong-confirm-background-color-focus: var(--gl-color-neutral-950); --gl-action-strong-confirm-background-color-active: var(--gl-color-neutral-1000); + .gl-toggle.is-checked { + --gl-toggle-switch-icon-color-checked-default: var(--accent-default); + --gl-toggle-switch-icon-color-checked-hover: var(--accent-hover); + --gl-toggle-switch-icon-color-checked-focus: var(--accent-focus); + --gl-toggle-switch-icon-color-checked-active: var(--accent-active); + + --gl-action-strong-confirm-background-color-default: var(--accent-default); + --gl-action-strong-confirm-background-color-hover: var(--accent-hover); + --gl-action-strong-confirm-background-color-focus: var(--accent-focus); + --gl-action-strong-confirm-background-color-active: var(--accent-active); + } + } :root.application-chrome.gl-dark { + --accent-default: hsl(from var(--theme-accent-color) calc(h - 10) s calc(l + 20)); + --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-50); --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-10); --gl-button-confirm-primary-background-color-focus: var(--gl-color-neutral-10); @@ -81,19 +95,6 @@ --gl-tab-selected-indicator-color-default: var(--gl-color-neutral-50); - --gl-control-background-color-selected-default: var(--gl-color-neutral-50); - --gl-control-background-color-selected-hover: var(--gl-color-neutral-10); - --gl-control-background-color-selected-focus: var(--gl-color-neutral-10); - - --gl-control-border-color-selected-default: var(--gl-color-neutral-50); - --gl-control-border-color-selected-hover: var(--gl-color-neutral-10); - --gl-control-border-color-selected-focus: var(--gl-color-neutral-10); - - --gl-toggle-switch-icon-color-checked-default: var(--gl-color-neutral-50); - --gl-toggle-switch-icon-color-checked-hover: var(--gl-color-neutral-10); - --gl-toggle-switch-icon-color-checked-focus: var(--gl-color-neutral-10); - --gl-toggle-switch-icon-color-checked-active: var(--gl-color-neutral-0); - --gl-action-strong-confirm-background-color-default: var(--gl-color-neutral-50); --gl-action-strong-confirm-background-color-hover: var(--gl-color-neutral-10); --gl-action-strong-confirm-background-color-focus: var(--gl-color-neutral-10); -- GitLab