feat: apply more accessible & stable color transformations scidsg#573

For Roadmap Item scidsg#533
rmlibre · Sep 13, 2024 · 4349394 · 4349394
1 parent ed8a92f
commit 4349394
Showing 1 changed file with 49 additions and 21 deletions.
diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css
@@ -3,16 +3,32 @@
   --color-border-dark: #7d7d7d;
   --color-border-dark-1: #555;
   --color-brand: oklch(48.55% 0.222 304.47);  /* #7d25c1 */
-  --color-brand-dark: oklch(from var(--color-brand) calc(1.8797 * l) calc(0.2117 * c) calc(1.0197 * h));  /* #ecdafa */
+  --color-brand-min-contrast: oklch(
+    from var(--color-brand) clamp(0.1, l, 0.6) c h
+  );
+  --color-brand-dark: oklch(  /* was #ecdafa now slightly more saturated */
+    from var(--color-brand)
+    clamp(0.85, l + 0.4271, 0.98) calc(0.25 * c) calc(h + 6)
+  );
   --color-text: #333;
   --color-text-dark-alt-2: #e4e4e4;
   --color-text-dark-alt: #c2c2c2;
   --color-text-dark: #dadada;
   --color-text-light: #595959;
-  --color-highlight: oklch(from var(--color-brand) l c h / 0.1);  /* rgba(125, 37, 193, 0.1) */
-  --color-highlight-dark: oklch(from var(--color-brand-dark) l c h / 0.2);  /* rgba(220, 198, 237, 0.2) */
-  --color-brand-bg: oklch(from var(--color-brand) calc(2.0058 * l) calc(0.0811 * c) calc(1.0337 * h));  /* #fbf3ff */
-  --color-dark-bg: oklch(from var(--color-brand) calc(0.5191 * l) calc(0.0676 * c) calc(1.0541 * h));  /* was #222 now with brand hue */
+  --color-highlight: oklch(  /* rgba(125, 37, 193, 0.1) */
+    from var(--color-brand) l c h / 0.1
+  );
+  --color-highlight-dark: oklch(  /* rgba(220, 198, 237, 0.2) */
+    from var(--color-brand-dark) l c h / 0.2
+  );
+  --color-brand-bg: oklch(  /* #fbf3ff */
+    from var(--color-brand)
+    clamp(0.6, l + 0.4883, 0.98) min(c, 0.0179) calc(h + 10.26)
+  );
+  --color-dark-bg: oklch(  /* was #222 now with brand hue */
+    from var(--color-brand)
+    clamp(0.15, l - 0.2335, 0.4) min(c, 0.012) calc(h + 16.47)
+  );
   --color-dark-bg-alt: #333;
   --color-dark-bg-alt-1: #444;
   --color-dark-bg-alt-transparent: rgba(51, 51, 51, 0.7);
@@ -74,7 +90,7 @@
   }
 
   a {
-    color: var(--color-brand);
+    color: var(--color-brand-min-contrast);
   }
 
   p.meta {
@@ -167,8 +183,8 @@
   button:focus,
   input[type="file"]::file-selector-button:focus,
   select:focus {
-    outline: 4px double var(--color-brand);
-    border: 1px solid var(--color-brand);
+    outline: 4px double var(--color-brand-min-contrast);
+    border: 1px solid var(--color-brand-min-contrast);
     box-shadow: none;
   }
 
@@ -177,17 +193,19 @@
   .btn,
   input[type="file"]::file-selector-button {
     border: 0px;
-    background-color: var(--color-brand);
+    background-color: var(--color-brand-min-contrast);
     color: white;
   }
 
   .formBody input[type="submit"],
   .formBody button,
   .btn {
     background-color: white;
-    color: var(--color-brand);
-    border: 1px solid var(--color-brand);
-    box-shadow: 0px 2px 0px 0px oklch(from var(--color-brand) l c h / 0.25);  /* rgba(125, 37, 193, 0.25) */
+    color: var(--color-brand-min-contrast);
+    border: 1px solid var(--color-brand-min-contrast);
+    box-shadow: 0px 2px 0px 0px oklch(  /* rgba(125, 37, 193, 0.25) */
+      from var(--color-brand) min(l, 0.95) c h / 0.25
+    );
   }
 
   .formBody input[type="submit"]:hover,
@@ -202,7 +220,9 @@
   .btn:active,
   input[type="file"]::file-selector-button:active,
   select:active {
-    box-shadow: inset 0px 2px 0px 0px oklch(from var(--color-brand) l c h / 0.25);  /* rgba(125, 37, 193, 0.25) */
+    box-shadow: inset 0px 2px 0px 0px oklch(  /* rgba(125, 37, 193, 0.25) */
+      from var(--color-brand) min(l, 0.95) c h / 0.25
+    );
   }
 
   .btn-danger,
@@ -213,8 +233,8 @@
 
   p.badge {
     background-color: white;
-    color: var(--color-brand);
-    border: 1px solid var(--color-brand);
+    color: var(--color-brand-min-contrast);
+    border: 1px solid var(--color-brand-min-contrast);
   }
 
   .search-highlight {
@@ -268,7 +288,7 @@
   }
 
   .toggle-ui input[type="checkbox"]:checked ~ label .toggle {
-    background: var(--color-brand);
+    background: var(--color-brand-min-contrast);
   }
 
   .flash-messages {
@@ -310,7 +330,7 @@
   }
 
   .banner {
-    background-color: var(--color-brand);
+    background-color: var(--color-brand-min-contrast);
     color: white;
   }
 
@@ -429,7 +449,9 @@
   /* Change background color of tabs on hover */
   .tab:hover,
   .subtab:hover {
-    background-color: oklch(from var(--color-dark-bg) l c h / 0.35);  /* was rgba(255, 255, 255, 0.1) now with color */
+    background-color: oklch(  /* was rgba(255, 255, 255, 0.1) now with color */
+      from var(--color-dark-bg) l c h / 0.2
+    );
   }
 
   /* Create an active/current tablink class */
@@ -475,7 +497,9 @@
     background-color: var(--color-dark);
     color: var(--color-brand-dark);
     border: 1px solid var(--color-brand-dark);
-    box-shadow: 0px 2px 0px 0px oklch(from var(--color-brand) l c h / 0.25);  /* rgba(125, 37, 193, 0.25) */
+    box-shadow: 0px 2px 0px 0px oklch(  /* rgba(125, 37, 193, 0.25) */
+      from var(--color-brand) l c h / 0.25
+    );
   }
 
   .formBody input[type="submit"]:hover,
@@ -489,7 +513,9 @@
   .formBody button:active,
   .btn:active,
   input[type="file"]::file-selector-button:active {
-    box-shadow: inset 0px 2px 0px 0px oklch(from var(--color-brand) l c h / 0.25);  /* rgba(125, 37, 193, 0.25) */
+    box-shadow: inset 0px 2px 0px 0px oklch(  /* rgba(125, 37, 193, 0.25) */
+      from var(--color-brand) l c h / 0.25
+    );
   }
 
   .btn-danger,
@@ -1171,7 +1197,9 @@ button,
 input[type="file"]::file-selector-button {
   cursor: pointer;
   text-decoration: none;
-  box-shadow: 0px 2px 0px 0px oklch(from var(--color-brand) l c h / 0.25);  /* rgba(125, 37, 193, 0.25) */
+  box-shadow: 0px 2px 0px 0px oklch(  /* rgba(125, 37, 193, 0.25) */
+    from var(--color-brand) l c h / 0.25
+  );
 }
 
 textarea {