alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Recolour remaining green brand-accent surfaces to the accent token
Build and Deploy Verso / deploy (push) Successful in 7m50s
Details

Browse Source 
The $accent knob caught primary buttons, but several places still
referenced the green ramp directly as a brand-accent colour (rather than
genuine success semantics). Repoint those at the --bg-accent-* tokens so
they too follow the single $accent knob:

- navbar Sign in / Register ("primary" + subdued/link hover) buttons
- file-tree selected-item highlight and drag background (IDE redesign,
  light and dark)
- document-outline highlighted item (IDE redesign, light and dark)
- the Visual/Code editor-switcher button mixin
- web/content hyperlinks (--link-web*), e.g. on the project dashboard;
  dark-theme variants point at the blue ramp to stay readable on dark

Genuine success/positive greens (notification success icon,
$content-positive, beta badges, etc.) are deliberately left green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-01 11:49:12 +00:00
parent b3541ba6f3
commit 3e10d1c4ee
5 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/abstracts/mixins.scss
+3 -3
View File
@@ -68,11 +68,11 @@
@mixin editor-switcher-button {
@include ol-button-variant(
$color: var(--green-60),
$color: var(--bg-accent-02),
$background: var(--bg-accent-03),
$border: var(--green-50),
$border: var(--bg-accent-01),
$hover-background: var(--bg-accent-03),
$hover-border: var(--green-40),
$hover-border: var(--bg-accent-01),
$borderless: false
);
}
services/web/frontend/stylesheets/components/nav.scss
+5 -5
View File
@@ -34,20 +34,20 @@
calc(var(--navbar-btn-padding-h) + 1px);
--navbar-subdued-color: var(--white);
--navbar-subdued-hover-bg: var(--white);
--navbar-subdued-hover-color: var(--green-50);
--navbar-subdued-hover-color: var(--bg-accent-01);
// Properties of "primary" items
--navbar-primary-color: var(--white);
--navbar-primary-border-color: var(--green-50);
--navbar-primary-bg: var(--green-50);
--navbar-primary-hover-bg: var(--green-60);
--navbar-primary-border-color: var(--bg-accent-01);
--navbar-primary-bg: var(--bg-accent-01);
--navbar-primary-hover-bg: var(--bg-accent-02);
--navbar-primary-hover-border-color: var(--navbar-primary-hover-bg);
// Links
--navbar-link-color: var(--white);
--navbar-link-border-color: var(--navbar-link-color);
--navbar-link-hover-color: var(--white);
--navbar-link-hover-bg: var(--green-50);
--navbar-link-hover-bg: var(--bg-accent-01);
--navbar-link-hover-border-color: var(--navbar-link-hover-bg);
// Toggler
services/web/frontend/stylesheets/foundations/colors.scss
+12 -12
View File
@@ -109,9 +109,9 @@ $border-disabled: $neutral-20;
$border-active: $blue-50;
$border-danger: $red-50;
$border-divider: $neutral-20;
$link-web: $green-60;
$link-web-hover: $green-70;
$link-web-visited: $green-60;
$link-web: $accent;
$link-web-hover: $accent-dark;
$link-web-visited: $accent;
$link-ui: $blue-50;
$link-ui-hover: $blue-60;
$link-ui-visited: $blue-60;
@@ -129,9 +129,9 @@ $border-disabled-dark: $neutral-80;
$border-active-dark: $blue-30;
$border-danger-dark: $red-40;
$border-divider-dark: $neutral-80;
$link-web-dark: $green-30;
$link-web-hover-dark: $green-40;
$link-web-visited-dark: $green-40;
$link-web-dark: $blue-30;
$link-web-hover-dark: $blue-40;
$link-web-visited-dark: $blue-40;
$link-ui-dark: $blue-30;
$link-ui-hover-dark: $blue-40;
$link-ui-visited-dark: $blue-40;
@@ -222,9 +222,9 @@ $link-ui-visited-dark: $blue-40;
--border-danger: var(--red-50);
--border-divider: var(--neutral-20);
--border-dark-divider: var(--neutral-70);
--link-web: var(--green-60);
--link-web-hover: var(--green-70);
--link-web-visited: var(--green-60);
--link-web: var(--bg-accent-01);
--link-web-hover: var(--bg-accent-02);
--link-web-visited: var(--bg-accent-01);
--link-ui: var(--blue-50);
--link-ui-hover: var(--blue-60);
--link-ui-visited: var(--blue-60);
@@ -242,9 +242,9 @@ $link-ui-visited-dark: $blue-40;
--border-active-dark: var(--blue-30);
--border-danger-dark: var(--red-40);
--border-divider-dark: var(--neutral-80);
--link-web-dark: var(--green-30);
--link-web-hover-dark: var(--green-40);
--link-web-visited-dark: var(--green-40);
--link-web-dark: var(--blue-30);
--link-web-hover-dark: var(--blue-40);
--link-web-visited-dark: var(--blue-40);
--link-ui-dark: var(--blue-30);
--link-ui-hover-dark: var(--blue-40);
--link-ui-visited-dark: var(--blue-40);
services/web/frontend/stylesheets/pages/editor/file-tree.scss
+5 -5
View File
@@ -25,11 +25,11 @@
.ide-redesign-main {
--file-tree-item-hover-bg: var(--bg-light-secondary);
--file-tree-item-selected-bg: var(--bg-accent-03);
--file-tree-item-selected-color: var(--green-70);
--file-tree-item-selected-color: var(--bg-accent-02);
--file-tree-item-color: var(--content-primary);
--file-tree-bg: var(--white);
--file-tree-icon-colour: var(--content-primary);
--file-tree-item-dragging-bg: var(--green-60);
--file-tree-item-dragging-bg: var(--bg-accent-01);
--file-tree-item-dragging-color: var(--white);
--file-tree-item-icon-dragging-color: var(--file-tree-item-dragging-color);
--file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
@@ -41,12 +41,12 @@
// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
.ide-redesign-main {
--file-tree-item-hover-bg: var(--bg-dark-secondary);
--file-tree-item-selected-bg: var(--green-70);
--file-tree-item-selected-color: var(--green-10);
--file-tree-item-selected-bg: var(--bg-accent-01);
--file-tree-item-selected-color: var(--content-primary-dark);
--file-tree-item-color: var(--content-primary-dark);
--file-tree-bg: var(--bg-dark-primary);
--file-tree-icon-colour: var(--content-primary-dark);
--file-tree-item-dragging-bg: var(--green-40);
--file-tree-item-dragging-bg: var(--bg-accent-01);
--file-tree-item-dragging-color: var(--content-primary-dark);
--file-tree-item-icon-dragging-color: var(--file-tree-item-dragging-color);
--file-tree-item-dragging-preview-bg: #{rgb($bg-dark-secondary, 0.6)};
services/web/frontend/stylesheets/pages/editor/outline.scss
+3 -3
View File
@@ -27,7 +27,7 @@
.ide-redesign-main {
--outline-item-highlight-bg: var(--bg-accent-03);
--outline-item-highlight-color: var(--green-70);
--outline-item-highlight-color: var(--bg-accent-02);
--outline-item-highlight-font-weight: bold;
--outline-line-guide-color: color-mix(
in srgb,
@@ -46,8 +46,8 @@
--outline-line-guide-color: var(--border-primary);
--outline-container-color-bg: var(--bg-primary-themed);
--outline-content-color: var(--content-primary-themed);
--outline-item-highlight-bg: var(--green-70);
--outline-item-highlight-color: var(--green-10);
--outline-item-highlight-bg: var(--bg-accent-01);
--outline-item-highlight-color: var(--content-primary-dark);
--outline-item-highlight-font-weight: bold;
--outline-item-carat-color: var(--content-primary-themed);