From 3713253f3e6f6d56273fa986332231161d56b15a Mon Sep 17 00:00:00 2001
From: JoelCDL <joel.hagedorn@ucop.edu>
Date: Fri, 20 Jan 2023 17:08:38 -0800
Subject: [PATCH] Convert green and gold colors in rgb to oklch color space

Use gold color in place of orange.
---
 scss/_link.scss      | 4 ++--
 scss/_meet.scss      | 2 +-
 scss/_news.scss      | 2 +-
 scss/_newsreel.scss  | 2 +-
 scss/_posttype.scss  | 2 +-
 scss/_quicklink.scss | 2 +-
 scss/_slideshow.scss | 6 +++---
 scss/_staff.scss     | 2 +-
 scss/_status.scss    | 4 ++--
 scss/_variables.scss | 8 +++-----
 10 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/scss/_link.scss b/scss/_link.scss
index 8fa32d7..deb4d2f 100644
--- 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
index e7bc811..4103fc6 100644
--- 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
index f953852..98a9a82 100644
--- 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
index 1656172..1892454 100644
--- 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
index b8fc1ab..b343b81 100644
--- 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
index a9ab1f9..4129ab5 100644
--- 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
index c639279..8da63e4 100644
--- 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
index 9b1835a..ec35c47 100644
--- 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
index 907e5ae..546a417 100644
--- 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
index 3625d14..e6043cf 100644
--- 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: