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.
cdlib · Jan 23, 2023 · dcb079e · dcb079e
1 parent e547e92
commit dcb079e
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -115,7 +115,7 @@
 
   h2,
   h3 {
-    color: rgb(var(--color-red));
+    color: var(--color-dark-red);
   }
 
 }