From d6eba9c8691a0929aae9da8381a2322bbd506927 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 30 May 2023 15:11:36 -0500
Subject: [PATCH 1/4] fix faux font weight issue, add scss base color

---
 source/_layouts/base.liquid                     |  2 +-
 .../assets/sass/vendor/_syntax-accessible.scss  | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/source/_layouts/base.liquid b/source/_layouts/base.liquid
index bad78575f..f48dfd5df 100644
--- a/source/_layouts/base.liquid
+++ b/source/_layouts/base.liquid
@@ -17,7 +17,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
     <link
-      href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
+      href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400;1,600|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
       media="screen"
       rel="stylesheet" />
     <link
diff --git a/source/assets/sass/vendor/_syntax-accessible.scss b/source/assets/sass/vendor/_syntax-accessible.scss
index 76644ac34..1f077c180 100644
--- a/source/assets/sass/vendor/_syntax-accessible.scss
+++ b/source/assets/sass/vendor/_syntax-accessible.scss
@@ -1,4 +1,5 @@
 @use '../functions';
+@use '../visual-design/typography';
 
 /**
  * Based on the GHColors theme by Avi Aryan (http://aviaryan.in)
@@ -35,7 +36,11 @@ pre[class*="language-"] {
   font-style: italic;
 }
 
-[class*="language-css"] {
+[class*='language-scss'] {
+  --sl-color--code-text: #006666;
+}
+
+[class*='language-css'] {
   & .token.comment {
     --sl-color--code-text: #006666;
   }
@@ -54,7 +59,7 @@ pre[class*="language-"] {
 .token.operator {
   --sl-color--code-text: #393A34;
   /* no highlight */
-  font-weight: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 .token.entity,
@@ -67,7 +72,7 @@ pre[class*="language-"] {
 .token.regex,
 .token.inserted {
   --sl-color--code-text: #990000;
-  font-weight: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 
@@ -76,7 +81,7 @@ pre[class*="language-"] {
 .token.attr-name,
 .language-autohotkey .token.selector {
   --sl-color--code-text: #000000;
-  font-weight: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 .token.function,
@@ -89,13 +94,13 @@ pre[class*="language-"] {
 .token.selector,
 .language-autohotkey .token.keyword {
   --sl-color--code-text: #445588;
-  font-weight: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 .token.important,
 .token.function,
 .token.bold {
-  font-weight: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 [class*="language-shell"] {

From eb736e41ceae2c162fb079e56242ce020e2a131b Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 30 May 2023 15:42:18 -0500
Subject: [PATCH 2/4] add colors to variables, add one highlight color

---
 source/_layouts/base.liquid                   |  2 +-
 source/assets/sass/config/color/_content.scss |  8 ++++++
 .../sass/vendor/_syntax-accessible.scss       | 25 +++++++++----------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/source/_layouts/base.liquid b/source/_layouts/base.liquid
index f48dfd5df..35925be8b 100644
--- a/source/_layouts/base.liquid
+++ b/source/_layouts/base.liquid
@@ -17,7 +17,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
     <link
-      href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400;1,600|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
+      href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
       media="screen"
       rel="stylesheet" />
     <link
diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
index db0cce03e..1e5b7c821 100644
--- a/source/assets/sass/config/color/_content.scss
+++ b/source/assets/sass/config/color/_content.scss
@@ -8,3 +8,11 @@ $sl-color--active: color.adjust(brand.$sl-color--venus, $lightness: -10%);
 $sl-color--code-background: #f8f8f8;
 $sl-color--code-text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
 $sl-color--link-action: rgba(218, 219, 223, 25%);
+$sl-color--code-warm: #cf1666;
+$sl-color--code-bright-dark: #990000;
+$sl-color--code-bright: #df1144;
+$sl-color--code-muted-dark: #393A34;
+$sl-color--code-muted: #656556;
+$sl-color--code-base: #006666;
+$sl-color--code-cool: #445588;
+$sl-color--code-dark: #000000;
diff --git a/source/assets/sass/vendor/_syntax-accessible.scss b/source/assets/sass/vendor/_syntax-accessible.scss
index 1f077c180..a1fa5bbe4 100644
--- a/source/assets/sass/vendor/_syntax-accessible.scss
+++ b/source/assets/sass/vendor/_syntax-accessible.scss
@@ -32,17 +32,17 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  --sl-color--code-text: #656556;
+  --sl-color--code-text: var(--sl-color--code-muted);
   font-style: italic;
 }
 
 [class*='language-scss'] {
-  --sl-color--code-text: #006666;
+  --sl-color--code-text: var(--sl-color--code-base);
 }
 
 [class*='language-css'] {
   & .token.comment {
-    --sl-color--code-text: #006666;
+    --sl-color--code-text: var(--sl-color--code-base);
   }
 }
 
@@ -52,12 +52,12 @@ pre[class*="language-"] {
 
 .token.string,
 .token.attr-value {
-  --sl-color--code-text: #df1144;
+  --sl-color--code-text: var(--sl-color--code-bright);
 }
 
 .token.punctuation,
 .token.operator {
-  --sl-color--code-text: #393A34;
+  --sl-color--code-text: var(--sl-color--code-muted-dark);
   /* no highlight */
   font-weight: typography.$sl-font-weight--bold;
 }
@@ -71,29 +71,28 @@ pre[class*="language-"] {
 .token.property,
 .token.regex,
 .token.inserted {
-  --sl-color--code-text: #990000;
+  --sl-color--code-text: var(--sl-color--code-warm);
   font-weight: typography.$sl-font-weight--bold;
 }
 
-
 .token.atrule,
 .token.keyword,
 .token.attr-name,
 .language-autohotkey .token.selector {
-  --sl-color--code-text: #000000;
+  --sl-color--code-text: var(--sl-color--code-dark);
   font-weight: typography.$sl-font-weight--bold;
 }
 
 .token.function,
 .token.deleted,
 .language-autohotkey .token.tag {
-  --sl-color--code-text: #9a050f;
+  --sl-color--code-text: var(--sl-color--code-bright-dark);
 }
 
 .token.tag,
 .token.selector,
 .language-autohotkey .token.keyword {
-  --sl-color--code-text: #445588;
+  --sl-color--code-text: var(--sl-color--code-cool);
   font-weight: typography.$sl-font-weight--bold;
 }
 
@@ -106,7 +105,7 @@ pre[class*="language-"] {
 [class*="language-shell"] {
   & .token.function {
     --sl-color--code-text: unset;
-    font-weight: normal;
+    font-weight: typography.$sl-font-weight--regular;
   }
 }
 
@@ -116,6 +115,6 @@ pre[class*="language-"] {
 
 .token.variable,
 .token[class*="placeholder"] {
-  --sl-color--code-text: #006666;
-  font-weight: normal;
+  --sl-color--code-text: var(--sl-color--code-base);
+  font-weight: typography.$sl-font-weight--regular;
 }

From a5f33c5d3360fd1e0e3221996c49cabc3a433965 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 14 Jun 2023 11:05:48 -0500
Subject: [PATCH 3/4] lint colors

---
 source/assets/sass/config/color/_content.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
index 1e5b7c821..6762537c0 100644
--- a/source/assets/sass/config/color/_content.scss
+++ b/source/assets/sass/config/color/_content.scss
@@ -9,10 +9,10 @@ $sl-color--code-background: #f8f8f8;
 $sl-color--code-text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
 $sl-color--link-action: rgba(218, 219, 223, 25%);
 $sl-color--code-warm: #cf1666;
-$sl-color--code-bright-dark: #990000;
+$sl-color--code-bright-dark: #900;
 $sl-color--code-bright: #df1144;
-$sl-color--code-muted-dark: #393A34;
+$sl-color--code-muted-dark: #393a34;
 $sl-color--code-muted: #656556;
-$sl-color--code-base: #006666;
-$sl-color--code-cool: #445588;
-$sl-color--code-dark: #000000;
+$sl-color--code-base: #066;
+$sl-color--code-cool: #458;
+$sl-color--code-dark: black;

From cb73a0a1094212952d20efd5058a49a82bc52856 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Wed, 14 Jun 2023 11:06:06 -0500
Subject: [PATCH 4/4] add support for ::selection (chrome)

---
 source/assets/sass/visual-design/_theme.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss
index 0a3e9ab61..7dcfe4a88 100644
--- a/source/assets/sass/visual-design/_theme.scss
+++ b/source/assets/sass/visual-design/_theme.scss
@@ -3,9 +3,12 @@
 @use '../config/color/brand';
 
 html {
-  @include config.tokens(config.$scale);
-  @include config.tokens(config.$brand-colors);
-  @include config.tokens(config.$content-colors);
+  &,
+  &::selection {
+    @include config.tokens(config.$scale);
+    @include config.tokens(config.$brand-colors);
+    @include config.tokens(config.$content-colors);
+  }
 
   background: #f8f9fa
     url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f1f3f5' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E");