Fine tune lightness (Luv) of rule colors in light theme

Trying to use same Luv for both light and dark theme does not really work -- best to have each them have their own Luv for rule colors.
lyrl · Jan 31, 2022 · f8c6be8 · f8c6be8
1 parent c5c4c95
commit f8c6be8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
@@ -34,7 +34,7 @@ html, body {
     outline: 0;
     }
 .tabButton.selected {
-    background-color: var(--primary-surface-2);
+    background-color: var(--dashboard-tab-active-surface);
     border-bottom: 3px solid var(--dashboard-tab-active-ink);
     color: var(--dashboard-tab-active-ink);
         fill: var(--dashboard-tab-active-ink);

diff --git a/src/css/themes/default.css b/src/css/themes/default.css
@@ -224,8 +224,6 @@
     --surface-3: rgb(var(--gray-80));
     --surface-4: rgb(var(--gray-75));
 
-    --primary-surface-2: rgb(var(--primary-color-70) / 15%);
-
     --border-1: rgb(var(--gray-75));
     --border-2: rgb(var(--gray-70));
     --border-3: rgb(var(--gray-65));
@@ -258,13 +256,9 @@
     --notice-surface: var(--accent-surface-1);
     --notice-surface-shadow: #000 0 2px 8px;
 
-    --dashboard-bar-shadow:
-        0px 0px 0px  1px rgb(var(--ink-rgb) /  4%),
-        0px 1px 2px  0px rgb(var(--ink-rgb) /  4%),
-        0px 2px 1px -1px rgb(var(--ink-rgb) / 12%),
-        0px 1px 6px  0px rgb(var(--ink-rgb) / 12%);
     --dashboard-tab-ink: var(--ink-1);
     --dashboard-tab-active-ink: var(--accent-surface-1);
+    --dashboard-tab-active-surface: rgb(var(--primary-color-70) / 10%);
     --dashboard-tab-surface-hover: var(--surface-2);
     --dashboard-tab-border-hover: var(--surface-3);
 
@@ -282,13 +276,13 @@
     --popup-cell-surface: var(--surface-2);
     --popup-cell-label-filter: opacity(40%);
     --popup-cell-cname-ink: rgb(var(--blue-50));
-    --popup-cell-allow-surface-rgb: 0 153 0;
+    --popup-cell-allow-surface-rgb: 0   125   0; /* h:127.7 S:100 Luv:45 */
+    --popup-cell-noop-surface-rgb:  107 107 107; /* h:0     S:0   Luv:45 */
+    --popup-cell-block-surface-rgb: 216   0   0; /* h:12.2  S:100 Luv:45 */
     --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-surface-rgb));
     --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 35%);
-    --popup-cell-noop-surface-rgb: 132 132 132;
     --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-surface-rgb));
     --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 35%);
-    --popup-cell-block-surface-rgb: 255 40  40;
     --popup-cell-block-own-surface: rgb(var(--popup-cell-block-surface-rgb));
     --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 35%);
     --popup-cell-label-mixed-surface: #c29100;
@@ -410,6 +404,9 @@
     /* popup panel */
     --popup-cell-label-filter: opacity(40%);
     --popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
+    --popup-cell-allow-surface-rgb:   0 153   0; /* h:127.7 S:100 Luv:55 */
+    --popup-cell-noop-surface-rgb:  132 132 132; /* h:0     S:0   Luv:55 */
+    --popup-cell-block-surface-rgb: 255  40  40; /* h:12.2  S:100 Luv:55 */
     --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 65%);
     --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 65%);
     --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 65%);