Merge branch 'use-light-codeblock-theme' into 'main'

Use light theme for codeblocks

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/3873

Merged-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Marcel Amirault <mamirault@gitlab.com>

2 files changed, 70 insertions, 64 deletions

diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 6ab346e6..bb5274e2 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -148,9 +148,10 @@
   }
 
   pre {
-    background-color: desaturate($theme-indigo-950, 20%);
+    background-color: desaturate($gray-50, 20%);
     border-radius: 4px;
-    color: $white;
+    border: solid 1px $purple-100;
+    color: $gray-800;
     padding: 1rem;
   }
 
diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss
index 5fcdcf0d..cefb6c11 100644
--- a/content/assets/stylesheets/highlight.scss
+++ b/content/assets/stylesheets/highlight.scss
@@ -7,69 +7,74 @@ pre.highlight {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background: #f0f0f0;
 
-  .hll { background-color: #4f5b66 }
-  .c { color: #7D8B97 } /* Comment */
-  .err { color: #FA6B61 } /* Error */
-  .k { color: #b48ead } /* Keyword */
-  .l { color: #d08770 } /* Literal */
-  .n { color: #eff1f5 } /* Name */
-  .o { color: #96b5b4 } /* Operator */
-  .p { color: #eff1f5 } /* Punctuation */
-  .cm { color: #7D8B97 } /* Comment.Multiline */
-  .cp { color: #7D8B97 } /* Comment.Preproc */
-  .c1 { color: #7D8B97 } /* Comment.Single */
-  .cs { color: #7D8B97 } /* Comment.Special */
-  .gd { color: #FA6B61 } /* Generic.Deleted */
+  .hll { background-color: #ffffcc }
+  .c { color: #028000; font-style: italic } /* Comment */
+  .err { color: #FF0000 } /* Error */
+  .k { color: #0F778A; font-weight: bold } /* Keyword */
+  .o { color: #666666 } /* Operator */
+  .ch { color: #028000; font-style: italic } /* Comment.Hashbang */
+  .cm { color: #028000; font-style: italic } /* Comment.Multiline */
+  .cp { color: #BC7A00 } /* Comment.Preproc */
+  .cpf { color: #028000; font-style: italic } /* Comment.PreprocFile */
+  .c1 { color: #028000; font-style: italic } /* Comment.Single */
+  .cs { color: #028000; font-style: italic } /* Comment.Special */
+  .gd { color: #A00000 } /* Generic.Deleted */
   .ge { font-style: italic } /* Generic.Emph */
-  .gh { color: #eff1f5; font-weight: bold } /* Generic.Heading */
-  .gi { color: #a3be8c } /* Generic.Inserted */
-  .gp { color: #7D8B97; font-weight: bold } /* Generic.Prompt */
+  .gr { color: #FF0000 } /* Generic.Error */
+  .gh { color: #800080; font-weight: bold } /* Generic.Heading */
+  .gi { color: #00A000 } /* Generic.Inserted */
+  .go { color: #888888 } /* Generic.Output */
+  .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
   .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #96b5b4; font-weight: bold } /* Generic.Subheading */
-  .kc { color: #b48ead } /* Keyword.Constant */
-  .kd { color: #b48ead } /* Keyword.Declaration */
-  .kn { color: #96b5b4 } /* Keyword.Namespace */
-  .kp { color: #b48ead } /* Keyword.Pseudo */
-  .kr { color: #b48ead } /* Keyword.Reserved */
-  .kt { color: #ebcb8b } /* Keyword.Type */
-  .ld { color: #a3be8c } /* Literal.Date */
-  .m { color: #d08770 } /* Literal.Number */
-  .s { color: #a3be8c } /* Literal.String */
-  .na { color: #8fa1b3 } /* Name.Attribute */
-  .nb { color: #eff1f5 } /* Name.Builtin */
-  .nc { color: #ebcb8b } /* Name.Class */
-  .no { color: #FA6B61 } /* Name.Constant */
-  .nd { color: #96b5b4 } /* Name.Decorator */
-  .ni { color: #eff1f5 } /* Name.Entity */
-  .ne { color: #FA6B61 } /* Name.Exception */
-  .nf { color: #8fa1b3 } /* Name.Function */
-  .nl { color: #eff1f5 } /* Name.Label */
-  .nn { color: #ebcb8b } /* Name.Namespace */
-  .nx { color: #8fa1b3 } /* Name.Other */
-  .py { color: #eff1f5 } /* Name.Property */
-  .nt { color: #96b5b4 } /* Name.Tag */
-  .nv { color: #FA6B61 } /* Name.Variable */
-  .ow { color: #96b5b4 } /* Operator.Word */
-  .w { color: #eff1f5 } /* Text.Whitespace */
-  .mf { color: #d08770 } /* Literal.Number.Float */
-  .mh { color: #d08770 } /* Literal.Number.Hex */
-  .mi { color: #d08770 } /* Literal.Number.Integer */
-  .mo { color: #d08770 } /* Literal.Number.Oct */
-  .sb { color: #a3be8c } /* Literal.String.Backtick */
-  .sc { color: #eff1f5 } /* Literal.String.Char */
-  .sd { color: #7D8B97 } /* Literal.String.Doc */
-  .s2 { color: #a3be8c } /* Literal.String.Double */
-  .se { color: #d08770 } /* Literal.String.Escape */
-  .sh { color: #a3be8c } /* Literal.String.Heredoc */
-  .si { color: #d08770 } /* Literal.String.Interpol */
-  .sx { color: #a3be8c } /* Literal.String.Other */
-  .sr { color: #a3be8c } /* Literal.String.Regex */
-  .s1 { color: #a3be8c } /* Literal.String.Single */
-  .ss { color: #a3be8c } /* Literal.String.Symbol */
-  .bp { color: #eff1f5 } /* Name.Builtin.Pseudo */
-  .vc { color: #FA6B61 } /* Name.Variable.Class */
-  .vg { color: #FA6B61 } /* Name.Variable.Global */
-  .vi { color: #FA6B61 } /* Name.Variable.Instance */
-  .il { color: #d08770 } /* Literal.Number.Integer.Long */
+  .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+  .gt { color: #0044DD } /* Generic.Traceback */
+  .kc { color: #BA2121; font-weight: bold } /* Keyword.Constant */
+  .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+  .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+  .kp { color: #BA2121; font-weight: bold } /* Keyword.Pseudo */
+  .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+  .kt { color: #B00040 } /* Keyword.Type */
+  .m { color: #666666; font-weight: bold } /* Literal.Number */
+  .s { color: #BA2121 } /* Literal.String */
+  .na { color: #0F778A } /* Name.Attribute */
+  .nb { color: #008000 } /* Name.Builtin */
+  .nc { color: #0000FF } /* Name.Class */
+  .no { color: #880000; font-weight: bold } /* Name.Constant */
+  .nd { color: #AA22FF } /* Name.Decorator */
+  .ni { color: #999999; font-weight: bold } /* Name.Entity */
+  .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+  .nf { color: #0000FF } /* Name.Function */
+  .nl { color: #0F778A } /* Name.Label */
+  .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+  .nt { color: #008000; font-weight: bold } /* Name.Tag */
+  .nv { color: #19177C } /* Name.Variable */
+  .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+  .w { color: #bbbbbb } /* Text.Whitespace */
+  .mb { color: #666666; font-weight: bold } /* Literal.Number.Bin */
+  .mf { color: #666666; font-weight: bold } /* Literal.Number.Float */
+  .mh { color: #666666; font-weight: bold } /* Literal.Number.Hex */
+  .mi { color: #BA2121; font-weight: bold } /* Literal.Number.Integer */
+  .mo { color: #666666; font-weight: bold } /* Literal.Number.Oct */
+  .sa { color: #BA2121 } /* Literal.String.Affix */
+  .sb { color: #BA2121 } /* Literal.String.Backtick */
+  .sc { color: #BA2121 } /* Literal.String.Char */
+  .dl { color: #BA2121 } /* Literal.String.Delimiter */
+  .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+  .s2 { color: #BA2121 } /* Literal.String.Double */
+  .se { color: #404040; font-weight: bold } /* Literal.String.Escape */
+  .sh { color: #BA2121 } /* Literal.String.Heredoc */
+  .si { color: #BA2121; font-weight: bold } /* Literal.String.Interpol */
+  .sx { color: #008000 } /* Literal.String.Other */
+  .sr { color: #BB6688 } /* Literal.String.Regex */
+  .s1 { color: #BA2121 } /* Literal.String.Single */
+  .ss { color: #19177C } /* Literal.String.Symbol */
+  .bp { color: #008000 } /* Name.Builtin.Pseudo */
+  .fm { color: #0000FF } /* Name.Function.Magic */
+  .vc { color: #19177C } /* Name.Variable.Class */
+  .vg { color: #19177C } /* Name.Variable.Global */
+  .vi { color: #19177C } /* Name.Variable.Instance */
+  .vm { color: #19177C } /* Name.Variable.Magic */
+  .il { color: #666666 } /* Literal.Number.Integer.Long */
 }