From dcb079ef48ae8372234815980ce3dd31c6fe5ad5 Mon Sep 17 00:00:00 2001
From: JoelCDL <joel.hagedorn@ucop.edu>
Date: Fri, 20 Jan 2023 16:04:46 -0800
Subject: [PATCH] Convert red colors in rgb to oklch color space

Use 30 hue for red and dark-red variances. Use the same 45% lightness as with blue color.
---
 scss/_headernav.scss | 2 +-
 scss/_heading.scss   | 6 +++---
 scss/_link.scss      | 2 +-
 scss/_list.scss      | 2 +-
 scss/_posttype.scss  | 2 +-
 scss/_status.scss    | 2 +-
 scss/_table.scss     | 2 +-
 scss/_variables.scss | 4 ++--
 scss/_well.scss      | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/scss/_headernav.scss b/scss/_headernav.scss
index 261af6c..f1f1f37 100644
--- a/scss/_headernav.scss
+++ b/scss/_headernav.scss
@@ -94,7 +94,7 @@
   // Panel list links:
   > ul > li > ul > li > a {
     margin-block-end: var(--headernav-item-margin);
-    color: rgb(var(--color-red));
+    color: var(--color-dark-red);
     text-decoration: none;
 
     &:focus,
diff --git a/scss/_heading.scss b/scss/_heading.scss
index c8e9a75..7ac1c89 100644
--- a/scss/_heading.scss
+++ b/scss/_heading.scss
@@ -32,7 +32,7 @@ h1 {
 
 %o-heading2 {
   @extend %o-heading;
-  color: rgb(var(--color-red));
+  color: var(--color-dark-red);
   font-size: 1.25em;
   font-weight: 600;
 }
@@ -43,7 +43,7 @@ h2 {
 
 %o-heading3 {
   @extend %o-heading;
-  color: rgb(var(--color-red));
+  color: var(--color-dark-red);
   font-size: 1.125em;
 }
 
@@ -53,7 +53,7 @@ h3 {
 
 %o-heading4 {
   @extend %o-heading;
-  color: rgb(var(--color-red));
+  color: var(--color-dark-red);
   font-size: 1em;
   font-weight: 600;
 }
diff --git a/scss/_link.scss b/scss/_link.scss
index 61328b0..8fa32d7 100644
--- a/scss/_link.scss
+++ b/scss/_link.scss
@@ -104,7 +104,7 @@ a[href^='mailto:']::after {
 }
 
 a[href^='https://sp.ucop.edu']::after {
-  background-color: rgb(var(--color-red));
+  background-color: var(--color-dark-red);
   mask-size: 0.8rem;
   mask-image: url('data-url:/fa-solid/lock.svg');
 }
diff --git a/scss/_list.scss b/scss/_list.scss
index 1b3cdc5..6411ad2 100644
--- a/scss/_list.scss
+++ b/scss/_list.scss
@@ -53,7 +53,7 @@ dl {
 
 dt {
   margin-block-end: 0.2rem;
-  color: rgb(var(--color-red));
+  color: var(--color-dark-red);
   font-weight: 500;
 }
 
diff --git a/scss/_posttype.scss b/scss/_posttype.scss
index 5ebc646..b8fc1ab 100644
--- a/scss/_posttype.scss
+++ b/scss/_posttype.scss
@@ -15,7 +15,7 @@
 }
 
 .c-posttype__doc {
-  background-color: rgb(var(--color-light-red));
+  background-color: var(--color-red);
 }
 
 .c-posttype__page {
diff --git a/scss/_status.scss b/scss/_status.scss
index 66ff97e..907e5ae 100644
--- a/scss/_status.scss
+++ b/scss/_status.scss
@@ -54,7 +54,7 @@
 
     &::before {
       opacity: 1;
-      background-color: rgb(var(--color-light-red));
+      background-color: var(--color-red);
     }
 
   }
diff --git a/scss/_table.scss b/scss/_table.scss
index e2be650..b259ebd 100644
--- a/scss/_table.scss
+++ b/scss/_table.scss
@@ -26,7 +26,7 @@ table {
 
     th {
       background-color: var(--color-light-blue);
-      color: rgb(var(--color-red));
+      color: var(--color-dark-red);
     }
 
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index bf0cb48..3625d14 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -5,8 +5,8 @@
 
   --color-light-blue: oklch(94% 0.02 250);
   --color-blue: oklch(45% 0.12 250);
-  --color-light-red: 219 0 0;
-  --color-red: 151 54 32;
+  --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;
diff --git a/scss/_well.scss b/scss/_well.scss
index 08d4511..6116d98 100644
--- a/scss/_well.scss
+++ b/scss/_well.scss
@@ -115,7 +115,7 @@
 
   h2,
   h3 {
-    color: rgb(var(--color-red));
+    color: var(--color-dark-red);
   }
 
 }