Convert red colors in rgb to oklch color space

JoelCDL · JoelCDL · commit dcb079ef48ae · 2023-01-23T12:08:11.000-08:00
Use 30 hue for red and dark-red variances. Use the same 45% lightness as with blue color.
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);
   }
 
 }

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ a[href^='mailto:']::after {`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`a[href^='https://sp.ucop.edu']::after {`
`107`		`- background-color: rgb(var(--color-red));`
	`107`	`+ background-color: var(--color-dark-red);`
`108`	`108`	`mask-size: 0.8rem;`
`109`	`109`	`mask-image: url('data-url:/fa-solid/lock.svg');`
`110`	`110`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ dl {`
`53`	`53`
`54`	`54`	`dt {`
`55`	`55`	`margin-block-end: 0.2rem;`
`56`		`- color: rgb(var(--color-red));`
	`56`	`+ color: var(--color-dark-red);`
`57`	`57`	`font-weight: 500;`
`58`	`58`	`}`
`59`	`59`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.c-posttype__doc {`
`18`		`- background-color: rgb(var(--color-light-red));`
	`18`	`+ background-color: var(--color-red);`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.c-posttype__page {`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`
`55`	`55`	`&::before {`
`56`	`56`	`opacity: 1;`
`57`		`- background-color: rgb(var(--color-light-red));`
	`57`	`+ background-color: var(--color-red);`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ table {`
`26`	`26`
`27`	`27`	`th {`
`28`	`28`	`background-color: var(--color-light-blue);`
`29`		`- color: rgb(var(--color-red));`
	`29`	`+ color: var(--color-dark-red);`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@`
`115`	`115`
`116`	`116`	`h2,`
`117`	`117`	`h3 {`
`118`		`- color: rgb(var(--color-red));`
	`118`	`+ color: var(--color-dark-red);`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`}`