UX: Codeblocks experiment merge (#29870)

app/assets/stylesheets/color_definitions.scss

@@ -109,15 +109,20 @@
   --facebook-or-white: #{$facebook-or-white};
   --twitter-or-white: #{$twitter-or-white};
 
-  --hljs-comment: #{$hljs-comment};
+  --hljs-attr: #{$hljs-attr};
-  --hljs-number: #{$hljs-number};
-  --hljs-string: #{$hljs-string};
-  --hljs-literal: #{$hljs-literal};
-  --hljs-tag: #{$hljs-tag};
   --hljs-attribute: #{$hljs-attribute};
-  --hljs-symbol: #{$hljs-symbol};
+  --hljs-addition: #{$hljs-addition};
   --hljs-bg: #{$hljs-bg};
-  --hljs-builtin-name: #{$hljs-builtin-name};
+  --hljs-comment: #{$hljs-comment};
+  --hljs-deletion: #{$hljs-deletion};
+  --hljs-keyword: #{$hljs-keyword};
+  --hljs-title: #{$hljs-title};
+  --hljs-name: #{$hljs-name};
+  --hljs-punctuation: #{$hljs-punctuation};
+  --hljs-symbol: #{$hljs-symbol};
+  --hljs-variable: #{$hljs-variable};
+  --hljs-string: #{$hljs-string};
+
   --google: #{$google};
   --google-hover: #{$google-hover};
   --instagram: #{$instagram};

app/assets/stylesheets/common/base/code_highlighting.scss

@@ -5,14 +5,20 @@ li > code,
 pre > code,
 strong > code,
 em > code {
+  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono",
+    Menlo, Monaco, Consolas, monospace;
   color: var(--primary-very-high);
   background: var(--hljs-bg);
+  border-radius: var(--d-button-border-radius);
+  font-size: 14px;
+  line-height: calc((13 + 4) / 13);
 }
 
 .hljs {
   display: block;
-  padding: 0.5em;
+  padding: 12px;
   color: var(--primary-very-high);
+  background-color: var(--hljs-bg);
 }
 
 .hljs-comment,
@@ -23,12 +29,15 @@ em > code {
   font-style: italic;
 }
 
+.hljs-color {
+  color: var(--hljs-color);
+}
+
 .hljs-keyword,
 .hljs-subst,
 .hljs-request,
 .hljs-status {
-  color: var(--primary-very-high);
+  color: var(--hljs-keyword);
-  font-weight: bold;
 }
 
 .hljs-number {
@@ -43,15 +52,20 @@ em > code {
   color: var(--hljs-string);
 }
 
-.hljs-title,
+.hljs-title {
-.hljs-name,
+  color: var(--hljs-title);
+}
+
+.hljs-name {
+  color: var(--hljs-name);
+}
+
 .hljs-quote,
 .hljs-operator,
 .hljs-selector-pseudo,
 .hljs-selector-tag,
 .hljs-link {
   color: var(--hljs-string);
-  font-weight: bold;
 }
 
 .hljs-subst {
@@ -60,27 +74,34 @@ em > code {
 
 .hljs-literal,
 .hljs-class .hljs-title {
-  color: var(--hljs-literal);
+  color: var(--hljs-title);
-  font-weight: bold;
 }
 
 .hljs-tag,
-.hljs-punctuation,
 .hljs-tag .hljs-title {
   color: var(--hljs-tag);
   font-weight: normal;
 }
 
-.hljs-tag .hljs-attr,
+.hljs-punctuation {
-.hljs-tag .hljs-name {
+  color: var(--hljs-punctuation);
-  color: var(--hljs-attribute);
+}
+
+.hljs-attr {
+  color: var(--hljs-attr);
 }
 
-.hljs-attribute,
 .hljs-selector-attr,
 .hljs-selector-class,
-.hljs-selector-id,
+.hljs-selector-id {
+  color: var(--hljs-attr);
+}
+
 .hljs-variable {
+  color: var(--hljs-variable);
+}
+
+.hljs-attribute {
   color: var(--hljs-attribute);
 }
 
@@ -95,20 +116,21 @@ em > code {
 
 .hljs-built_in,
 .hljs-builtin-name {
-  color: var(--hljs-builtin-name);
+  color: var(--hljs-name);
 }
 
 .hljs-deletion {
   background: var(--danger-low);
+  color: var(--hljs-deletion);
 }
 
 .hljs-addition {
   background: var(--success-low);
+  color: var(--hljs-addition);
 }
 
 .hljs-section {
-  color: var(--hljs-builtin-name);
+  color: var(--hljs-name);
-  font-weight: bold;
 }
 
 .hljs-bullet {

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -159,18 +159,22 @@ $facebook-or-white: dark-light-choose($facebook, unquote("#fff")) !default;
 $twitter-or-white: dark-light-choose($twitter, unquote("#fff")) !default;
 
 // code highlighting
-$hljs-comment: dark-light-choose(unquote("#998"), unquote("#bba")) !default;
+// stack overflow light & dark color pallets
-$hljs-number: dark-light-choose(unquote("#099"), unquote("#aff")) !default;
+// https://github.com/highlightjs/highlight.js/blob/main/src/styles/stackoverflow-dark.css
-$hljs-string: dark-light-choose(unquote("#d14"), unquote("#f99")) !default;
+// https://github.com/highlightjs/highlight.js/blob/main/src/styles/stackoverflow-light.css
-$hljs-literal: dark-light-choose(unquote("#458"), unquote("#9ae")) !default;
+$hljs-attr: dark-light-choose(#015692, #88aece) !default;
-$hljs-tag: dark-light-choose(unquote("#000080"), unquote("#99f")) !default;
+$hljs-attribute: dark-light-choose(#803378, #c59bc1) !default;
-$hljs-attribute: dark-light-choose(
+$hljs-addition: dark-light-choose(#2f6f44, #76c490) !default;
-  unquote("#008080"),
+$hljs-bg: dark-light-choose($primary-50, rgba(0, 0, 0, 0.25)) !default;
-  unquote("#0ee")
+$hljs-comment: $primary-500 !default;
-) !default;
+$hljs-deletion: dark-light-choose(#c02d2e, #de7176) !default;
-$hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
+$hljs-keyword: dark-light-choose(#015692, #88aece) !default;
-$hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;
+$hljs-title: dark-light-choose(#b75501, #f08d49) !default;
-$hljs-builtin-name: dark-light-choose($tertiary-high, $tertiary-hover) !default;
+$hljs-name: dark-light-choose(#b75501, #f08d49) !default;
+$hljs-punctuation: dark-light-choose(#535a60, #cccccc) !default;
+$hljs-symbol: dark-light-choose(#54790d, #b5bd68) !default;
+$hljs-variable: dark-light-choose(#54790d, #b5bd68) !default;
+$hljs-string: dark-light-choose(#54790d, #b5bd68) !default;
 
 // shadow opacity variables
 $shadow-opacity-modal: dark-light-choose(0.6, 1) !default;