Merge pull request sass#56 from oddbird/highlight-styles

Highlight styles
asaf400 · Jun 14, 2023 · 00dfda0 · 00dfda0
2 parents e7496b4 + 8716e80
commit 00dfda0
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git 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|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
@@ -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: #900;
+$sl-color--code-bright: #df1144;
+$sl-color--code-muted-dark: #393a34;
+$sl-color--code-muted: #656556;
+$sl-color--code-base: #066;
+$sl-color--code-cool: #458;
+$sl-color--code-dark: black;
diff --git 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)
@@ -31,13 +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-css"] {
+[class*='language-scss'] {
+  --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);
   }
 }
 
@@ -47,14 +52,14 @@ 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: bold;
+  font-weight: typography.$sl-font-weight--bold;
 }
 
 .token.entity,
@@ -66,42 +71,41 @@ pre[class*="language-"] {
 .token.property,
 .token.regex,
 .token.inserted {
-  --sl-color--code-text: #990000;
-  font-weight: bold;
+  --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;
-  font-weight: bold;
+  --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;
-  font-weight: bold;
+  --sl-color--code-text: var(--sl-color--code-cool);
+  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"] {
   & .token.function {
     --sl-color--code-text: unset;
-    font-weight: normal;
+    font-weight: typography.$sl-font-weight--regular;
   }
 }
 
@@ -111,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;
 }
diff --git 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");