Convert green and gold colors in rgb to oklch color space

cdlib · Jan 23, 2023 · 019660f · 019660f
1 parent dcb079e
commit 019660f
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 18 deletions.
diff --git a/scss/_link.scss b/scss/_link.scss
@@ -94,12 +94,12 @@ a[href^='https://sp.ucop.edu']::after {
 }
 
 a[data-wpel-link='external']::after {
-  background-color: rgb(var(--color-gold));
+  background-color: var(--color-gold);
   mask-image: url('data-url:/fa-solid/arrow-up-right-from-square.svg');
 }
 
 a[href^='mailto:']::after {
-  background-color: rgb(var(--color-gold));
+  background-color: var(--color-gold);
   mask-image: url('data-url:/fa-solid/envelope.svg');
 }
 

diff --git a/scss/_meet.scss b/scss/_meet.scss
@@ -22,7 +22,7 @@
 
     a {
       margin-block-start: var(--space2);
-      color: rgb(var(--color-light-gold));
+      color: oklch(86% 0.13 80); // lighter version of --color-gold for better a11y contrast against background
     }
 
   }

diff --git a/scss/_news.scss b/scss/_news.scss
@@ -15,7 +15,7 @@
       flex: none;
       block-size: 1rem;
       inline-size: 1rem;
-      background-color: rgb(var(--color-gold));
+      background-color: var(--color-gold);
       mask: url('data-url:/fa-solid/rss.svg') center / contain no-repeat;
     }
   }

diff --git a/scss/_newsreel.scss b/scss/_newsreel.scss
@@ -95,7 +95,7 @@
   &:focus,
   &:hover {
     &::after {
-      background-color: rgb(var(--color-gold));
+      background-color: var(--color-gold);
     }
   }
 

diff --git a/scss/_posttype.scss b/scss/_posttype.scss
@@ -23,5 +23,5 @@
 }
 
 .c-posttype__post {
-  background-color: rgb(var(--color-green));
+  background-color: var(--color-green);
 }
diff --git a/scss/_quicklink.scss b/scss/_quicklink.scss
@@ -34,7 +34,7 @@
       flex: none;
       block-size: 1.1rem;
       inline-size: 1.1rem;
-      background-color: rgb(var(--color-gold));
+      background-color: var(--color-gold);
       mask: url('data-url:/fa-solid/arrow-up-right-from-square.svg') center / contain;
     }
   }

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
@@ -53,7 +53,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: 0.8em;
-    color: rgb(var(--color-light-gold));
+    color: var(--color-gold);
     cursor: pointer;
 
     span {
@@ -71,7 +71,7 @@
     flex: none;
     block-size: 100%; // size relative to button size defined in '.c-slideshow__controls button' selector above
     inline-size: 100%; // " "
-    background-color: rgb(var(--color-light-gold));
+    background-color: var(--color-gold);
     mask-size: 0.7rem;
     mask-position: center;
     mask-repeat: no-repeat;
@@ -158,7 +158,7 @@
 
     // if there's a link in the copy:
     a {
-      color: rgb(var(--color-light-gold));
+      color: var(--color-gold);
       text-decoration: underline;
 
       &:focus,

diff --git a/scss/_staff.scss b/scss/_staff.scss
@@ -36,7 +36,7 @@
             flex: none;
             block-size: 1.5rem;
             inline-size: 1.5rem;
-            background-color: rgb(var(--color-gold));
+            background-color: var(--color-gold);
             mask: url('data-url:/fa-solid/circle-user.svg') center / contain;
           }
 

diff --git a/scss/_status.scss b/scss/_status.scss
@@ -36,7 +36,7 @@
 
     &::before {
       opacity: 1;
-      background-color: rgb(var(--color-green));
+      background-color: var(--color-green);
     }
 
   }
@@ -45,7 +45,7 @@
 
     &::before {
       opacity: 1;
-      background-color: rgb(var(--color-orange));
+      background-color: var(--color-gold);
     }
 
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1,16 +1,14 @@
 // ***** Variables ***** //
 
 :root {
-  // Colors in RGB:
+  // Colors in OKLCH:
 
   --color-light-blue: oklch(94% 0.02 250);
   --color-blue: oklch(45% 0.12 250);
   --color-red: oklch(56% 0.22 30);
   --color-dark-red: oklch(45% 0.18 30);
-  --color-orange: 255 153 0;
-  --color-green: 82 122 0;
-  --color-light-gold: 255 197 71;
-  --color-gold: 255 181 17;
+  --color-green: oklch(56% 0.16 135);
+  --color-gold: oklch(82% 0.16 80);
 
   // Spacing: