fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up CSS color opacity application to theme colors (#4420)

Browse Source
This commit is contained in:
Keavon Chambers
2026-08-07 19:21:17 -07:00
committed by Dennis Kobert
parent f1512f5d2d
commit 567e5cb9dd
11 changed files with 22 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Editor.svelte
View File

@@ -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));
}
}
}

5
frontend/src/components/floating-menus/ColorPicker.svelte
View File

@@ -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;

2
frontend/src/components/layout/FloatingMenu.svelte
View File

@@ -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);

2
frontend/src/components/panels/Layers.svelte
View File

@@ -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 {

20
frontend/src/components/views/Graph.svelte
View File

@@ -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;

2
frontend/src/components/widgets/inputs/ColorComparisonInput.svelte
View File

@@ -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 {

2
frontend/src/components/widgets/inputs/ColorInput.svelte
View File

@@ -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 {

2
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@@ -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).

2
frontend/src/components/window/Panel.svelte
View File

@@ -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;

2
frontend/src/components/window/StatusBar.svelte
View File

@@ -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%);
}
}

1
website/sass/base.scss
View File

@@ -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;