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 GitHub
parent 6b1e9912ef
commit c6e17a789b
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;