From 4d64b092bc79e037a1f98bd0ce5962ef132bb5f7 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Fri, 7 Aug 2026 18:55:22 -0700 Subject: [PATCH] Clean up CSS color opacity application to theme colors --- frontend/src/components/Editor.svelte | 23 +------------------ .../floating-menus/ColorPicker.svelte | 5 +++- .../src/components/layout/FloatingMenu.svelte | 2 +- frontend/src/components/panels/Layers.svelte | 2 +- frontend/src/components/views/Graph.svelte | 20 ++++++++-------- .../inputs/ColorComparisonInput.svelte | 2 +- .../widgets/inputs/ColorInput.svelte | 2 +- .../widgets/inputs/NumberInput.svelte | 2 +- frontend/src/components/window/Panel.svelte | 2 +- .../src/components/window/StatusBar.svelte | 2 +- website/sass/base.scss | 1 - 11 files changed, 22 insertions(+), 41 deletions(-) diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte index ed8339ef81..1ecd7ce305 100644 --- a/frontend/src/components/Editor.svelte +++ b/frontend/src/components/Editor.svelte @@ -83,45 +83,24 @@ } :root { - // Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it - // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function - // Specifically, support for the relative syntax is needed: `color(from var(--color-0-black) srgb r g b / 0.5)` to convert black to 50% alpha --color-0-black: #000; - --color-0-black-rgb: 0, 0, 0; --color-1-nearblack: #111; - --color-1-nearblack-rgb: 17, 17, 17; --color-2-mildblack: #222; - --color-2-mildblack-rgb: 34, 34, 34; --color-3-darkgray: #333; - --color-3-darkgray-rgb: 51, 51, 51; --color-4-dimgray: #444; - --color-4-dimgray-rgb: 68, 68, 68; --color-5-dullgray: #555; - --color-5-dullgray-rgb: 85, 85, 85; --color-6-lowergray: #666; - --color-6-lowergray-rgb: 102, 102, 102; --color-7-middlegray: #777; - --color-7-middlegray-rgb: 109, 109, 109; --color-8-uppergray: #888; - --color-8-uppergray-rgb: 136, 136, 136; --color-9-palegray: #999; - --color-9-palegray-rgb: 153, 153, 153; --color-a-softgray: #aaa; - --color-a-softgray-rgb: 170, 170, 170; --color-b-lightgray: #bbb; - --color-b-lightgray-rgb: 187, 187, 187; --color-c-brightgray: #ccc; - --color-c-brightgray-rgb: 204, 204, 204; --color-d-mildwhite: #ddd; - --color-d-mildwhite-rgb: 221, 221, 221; --color-e-nearwhite: #eee; - --color-e-nearwhite-rgb: 238, 238, 238; --color-f-white: #fff; - --color-f-white-rgb: 255, 255, 255; --color-error-red: #d6536e; - --color-error-red-rgb: 214, 83, 110; --color-warning-yellow: #d5aa43; - --color-warning-yellow-rgb: 213, 170, 67; --color-data-general: #cfcfcf; --color-data-general-dim: #8a8a8a; @@ -277,7 +256,7 @@ & { // Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering // https://stackoverflow.com/a/71753552/775283 - background-color: rgba(var(--color-4-dimgray-rgb), calc(254 / 255)); + background-color: rgb(from var(--color-4-dimgray) r g b / calc(254 / 255)); } } } diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte index e8046b3ac3..aec680c23f 100644 --- a/frontend/src/components/floating-menus/ColorPicker.svelte +++ b/frontend/src/components/floating-menus/ColorPicker.svelte @@ -98,7 +98,6 @@ .details { margin-left: 16px; width: 200px; - gap: 8px; > .widget-span { --row-height: 24px; @@ -107,6 +106,10 @@ margin-top: auto; } + &:not(:last-child) { + margin-bottom: 8px; + } + > .text-label { // TODO: Use a table or grid layout for this width to match the widest label. Hard-coding it won't work when we add translation/localization. flex: 0 0 34px; diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte index dfe286dbcd..58654511ae 100644 --- a/frontend/src/components/layout/FloatingMenu.svelte +++ b/frontend/src/components/layout/FloatingMenu.svelte @@ -539,7 +539,7 @@ .floating-menu-content { background: var(--color-2-mildblack); - box-shadow: rgba(var(--color-0-black-rgb), 0.5) 0 2px 4px; + box-shadow: rgb(from var(--color-0-black) r g b / 0.5) 0 2px 4px; border: 1px solid var(--color-3-darkgray); border-radius: 4px; border-top-left-radius: var(--content-border-top-left-radius, 4px); diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte index a9995954f3..539c71298c 100644 --- a/frontend/src/components/panels/Layers.svelte +++ b/frontend/src/components/panels/Layers.svelte @@ -781,7 +781,7 @@ } &.selected-but-not-in-selected-network { - background: rgba(var(--color-4-dimgray-rgb), 0.5); + background: rgb(from var(--color-4-dimgray) r g b / 0.5); } &.insert-folder::after { diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index caf29d5a8f..3b8534f450 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -985,7 +985,7 @@ & { // Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering // https://stackoverflow.com/a/71753552/775283 - background-color: rgba(var(--color-e-nearwhite-rgb), calc(254 / 255)); + background-color: rgb(from var(--color-e-nearwhite) r g b / calc(254 / 255)); } } } @@ -1182,7 +1182,7 @@ // ancestor elements, `.graph` and `.panel`, each have the simultaneous pairing of `overflow: hidden` and `border-radius`. // See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox // backdrop-filter: blur(4px); - background: rgba(var(--color-0-black-rgb), 0.33); + background: rgb(from var(--color-0-black) r g b / 0.33); &::after { content: ""; @@ -1202,7 +1202,7 @@ } &.disabled { - background: rgba(var(--color-4-dimgray-rgb), 0.33); + background: rgb(from var(--color-4-dimgray) r g b / 0.33); color: var(--color-a-softgray); .icon-label { @@ -1256,10 +1256,10 @@ } &.selected { - background: rgba(var(--color-5-dullgray-rgb), 0.33); + background: rgb(from var(--color-5-dullgray) r g b / 0.33); &.in-selected-network { - background: rgba(var(--color-6-lowergray-rgb), 0.33); + background: rgb(from var(--color-6-lowergray) r g b / 0.33); } } @@ -1398,18 +1398,18 @@ &.selected { .primary { - background: rgba(var(--color-f-white-rgb), 0.15); + background: rgb(from var(--color-f-white) r g b / 0.15); &.in-selected-network { - background: rgba(var(--color-f-white-rgb), 0.2); + background: rgb(from var(--color-f-white) r g b / 0.2); } } .secondary { - background: rgba(var(--color-f-white-rgb), 0.1); + background: rgb(from var(--color-f-white) r g b / 0.1); &.in-selected-network { - background: rgba(var(--color-f-white-rgb), 0.15); + background: rgb(from var(--color-f-white) r g b / 0.15); } } } @@ -1435,7 +1435,7 @@ width: 100%; height: 24px; border-radius: 2px 2px 0 0; - background: rgba(var(--color-f-white-rgb), 0.05); + background: rgb(from var(--color-f-white) r g b / 0.05); &.no-secondary-section { border-radius: 2px; diff --git a/frontend/src/components/widgets/inputs/ColorComparisonInput.svelte b/frontend/src/components/widgets/inputs/ColorComparisonInput.svelte index 7169178f2c..a2218f4d87 100644 --- a/frontend/src/components/widgets/inputs/ColorComparisonInput.svelte +++ b/frontend/src/components/widgets/inputs/ColorComparisonInput.svelte @@ -70,7 +70,7 @@ bottom: 0; left: 0; right: 0; - box-shadow: inset 0 0 0 1px rgba(var(--color-0-black-rgb), var(--outline-amount)); + box-shadow: inset 0 0 0 1px rgb(from var(--color-0-black) r g b / var(--outline-amount)); } &.transparency { diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte index d6ff57ad92..625ade1bec 100644 --- a/frontend/src/components/widgets/inputs/ColorInput.svelte +++ b/frontend/src/components/widgets/inputs/ColorInput.svelte @@ -116,7 +116,7 @@ bottom: 0; left: 0; right: 0; - box-shadow: inset 0 0 0 1px rgba(var(--color-5-dullgray-rgb), var(--outline-amount)); + box-shadow: inset 0 0 0 1px rgb(from var(--color-5-dullgray) r g b / var(--outline-amount)); } &.transparency > button { diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte index 2678e26fee..67f71fb7b0 100644 --- a/frontend/src/components/widgets/inputs/NumberInput.svelte +++ b/frontend/src/components/widgets/inputs/NumberInput.svelte @@ -864,7 +864,7 @@ padding: calc(var(--widget-height) / 2 - var(--arrow-radius)) 0; border: none; border-radius: 2px; - background: rgba(var(--color-1-nearblack-rgb), 0.5); + background: rgb(from var(--color-1-nearblack) r g b / 0.5); // An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing outline: none; // TODO: This is a quick, imperfect way to make the arrow buttons appear like they're behind the text (without messing with the element click targets if we used z-index). diff --git a/frontend/src/components/window/Panel.svelte b/frontend/src/components/window/Panel.svelte index a9dd17f76e..cfce94fefc 100644 --- a/frontend/src/components/window/Panel.svelte +++ b/frontend/src/components/window/Panel.svelte @@ -650,7 +650,7 @@ .docking-ghost { position: absolute; - background: rgba(var(--color-f-white-rgb), 0.2); + background: rgb(from var(--color-f-white) r g b / 0.2); border-radius: 6px; pointer-events: none; z-index: 1; diff --git a/frontend/src/components/window/StatusBar.svelte b/frontend/src/components/window/StatusBar.svelte index 8ca11f7463..99deabb601 100644 --- a/frontend/src/components/window/StatusBar.svelte +++ b/frontend/src/components/window/StatusBar.svelte @@ -84,7 +84,7 @@ bottom: 0; left: -40px; width: 40px; - background: linear-gradient(to right, rgba(var(--color-2-mildblack-rgb), 0) 0%, rgba(var(--color-2-mildblack-rgb), 1) 100%); + background: linear-gradient(to right, rgb(from var(--color-2-mildblack) r g b / 0) 0%, var(--color-2-mildblack) 100%); } } diff --git a/website/sass/base.scss b/website/sass/base.scss index 9a5749459d..41df592d6f 100644 --- a/website/sass/base.scss +++ b/website/sass/base.scss @@ -18,7 +18,6 @@ --color-ale: #cd8f7a; --color-flamingo: #d2697c; --color-seaside: #b0d6cb; - --color-seaside-rgb: 176, 214, 203; // --color-cove: #83c0b9; // --color-sage: #91b99a; --color-storm: #495875;