Reorganize Chroma styles (#13934)

This moves the Chroma styles into separate files with base,light and
dark variants. Should work exactly as before.

3 files changed, 184 insertions, 0 deletions

diff --git a/web_src/less/chroma/base.less b/web_src/less/chroma/base.less
new file mode 100644
index 0000000000..597ee2a72d
--- /dev/null
+++ b/web_src/less/chroma/base.less
@@ -0,0 +1,50 @@
+.chroma {
+  background-color: var(--color-code-bg);
+}
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: auto;
+  overflow: auto;
+  display: block;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  display: block;
+  width: 100%;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  margin-right: .4em;
+  padding: 0 .4em;
+}
+
+/* LineNumbers */
+.chroma .ln {
+  margin-right: .4em;
+  padding: 0 .4em;
+}
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: 600;
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  text-decoration: underline;
+}
diff --git a/web_src/less/chroma/dark.less b/web_src/less/chroma/dark.less
new file mode 100644
index 0000000000..24a3b6568d
--- /dev/null
+++ b/web_src/less/chroma/dark.less
@@ -0,0 +1,67 @@
+.chroma .hl { background-color: #3f424d; } /* LineHighlight */
+.chroma .lnt { color: #7f7f7f; } /* LineNumbersTable */
+.chroma .ln { color: #7f7f7f; } /* LineNumbers */
+.chroma .k { color: #f63; } /* Keyword */
+.chroma .kc { color: #fa1; } /* KeywordConstant */
+.chroma .kd { color: #9daccc; } /* KeywordDeclaration */
+.chroma .kn { color: #fa1; } /* KeywordNamespace */
+.chroma .kp { color: #5f8700; } /* KeywordPseudo */
+.chroma .kr { color: #f63; } /* KeywordReserved */
+.chroma .kt { color: #9daccc; } /* KeywordType */
+.chroma .na { color: #8a8a8a; } /* NameAttribute */
+.chroma .nb { color: #9daccc; } /* NameBuiltin */
+.chroma .bp { color: #9daccc; } /* NameBuiltinPseudo */
+.chroma .nc { color: #fa1; } /* NameClass */
+.chroma .no { color: #fa1; } /* NameConstant */
+.chroma .nd { color: #9daccc; } /* NameDecorator */
+.chroma .ni { color: #fa1; } /* NameEntity */
+.chroma .ne { color: #af8700; } /* NameException */
+.chroma .nf { color: #9daccc; } /* NameFunction */
+.chroma .nl { color: #fa1; } /* NameLabel */
+.chroma .nn { color: #fa1; } /* NameNamespace */
+.chroma .nx { color: #9daccc; } /* NameOther */
+.chroma .nt { color: #9daccc; } /* NameTag */
+.chroma .nv { color: #9daccc; } /* NameVariable */
+.chroma .vc { color: #f81; } /* NameVariableClass */
+.chroma .vg { color: #fa1; } /* NameVariableGlobal */
+.chroma .vi { color: #fa1; } /* NameVariableInstance */
+.chroma .s { color: #1af; } /* LiteralString */
+.chroma .sa { color: #1af; } /* LiteralStringAffix */
+.chroma .sb { color: #a0cc75; } /* LiteralStringBacktick */
+.chroma .sc { color: #1af; } /* LiteralStringChar */
+.chroma .dl { color: #1af; } /* LiteralStringDelimiter */
+.chroma .sd { color: #6a737d; } /* LiteralStringDoc */
+.chroma .s2 { color: #a0cc75; } /* LiteralStringDouble */
+.chroma .se { color: #f63; } /* LiteralStringEscape */
+.chroma .sh { color: #1af; } /* LiteralStringHeredoc */
+.chroma .si { color: #fa1; } /* LiteralStringInterpol */
+.chroma .sx { color: #fa1; } /* LiteralStringOther */
+.chroma .sr { color: #97c; } /* LiteralStringRegex */
+.chroma .s1 { color: #a0cc75; } /* LiteralStringSingle */
+.chroma .ss { color: #fa1; } /* LiteralStringSymbol */
+.chroma .m { color: #1af; } /* LiteralNumber */
+.chroma .mb { color: #1af; } /* LiteralNumberBin */
+.chroma .mf { color: #1af; } /* LiteralNumberFloat */
+.chroma .mh { color: #1af; } /* LiteralNumberHex */
+.chroma .mi { color: #1af; } /* LiteralNumberInteger */
+.chroma .il { color: #1af; } /* LiteralNumberIntegerLong */
+.chroma .mo { color: #1af; } /* LiteralNumberOct */
+.chroma .o { color: #f63; } /* Operator */
+.chroma .ow { color: #5f8700; } /* OperatorWord */
+.chroma .c { color: #6a737d; } /* Comment */
+.chroma .ch { color: #6a737d; } /* CommentHashbang */
+.chroma .cm { color: #6a737d; } /* CommentMultiline */
+.chroma .c1 { color: #6a737d; } /* CommentSingle */
+.chroma .cs { color: #637d; } /* CommentSpecial */
+.chroma .cp { color: #fc6; } /* CommentPreproc */
+.chroma .cpf { color: #fc6; } /* CommentPreprocFile */
+.chroma .gd { color: #fff; background-color: #5f3737; } /* GenericDeleted */
+.chroma .ge { color: #ef5; } /* GenericEmph */
+.chroma .gr { color: #f33; } /* GenericError */
+.chroma .gh { color: #fa1; } /* GenericHeading */
+.chroma .gi { color: #fff; background-color: #3a523a; } /* GenericInserted */
+.chroma .go { color: #888888; } /* GenericOutput */
+.chroma .gp { color: #555555; } /* GenericPrompt */
+.chroma .gu { color: #9daccc; } /* GenericSubheading */
+.chroma .gt { color: #f63; } /* GenericTraceback */
+.chroma .w { color: #bbbbbb; } /* TextWhitespace */
diff --git a/web_src/less/chroma/light.less b/web_src/less/chroma/light.less
new file mode 100644
index 0000000000..4cd1c1d425
--- /dev/null
+++ b/web_src/less/chroma/light.less
@@ -0,0 +1,67 @@
+.chroma .hl { background-color: #e5e5e5; } /* LineHighlight */
+.chroma .lnt { color: #7f7f7f; } /* LineNumbersTable */
+.chroma .ln { color: #7f7f7f; } /* LineNumbers */
+.chroma .k { color: #d73a49; } /* Keyword */
+.chroma .kc { color: #d73a49; } /* KeywordConstant */
+.chroma .kd { color: #d73a49; } /* KeywordDeclaration */
+.chroma .kn { color: #d73a49; } /* KeywordNamespace */
+.chroma .kp { color: #d73a49; } /* KeywordPseudo */
+.chroma .kr { color: #d73a49; } /* KeywordReserved */
+.chroma .kt { color: #445588; } /* KeywordType */
+.chroma .na { color: #d73a49; } /* NameAttribute */
+.chroma .nb { color: #005cc5; } /* NameBuiltin */
+.chroma .bp { color: #999999; } /* NameBuiltinPseudo */
+.chroma .nc { color: #445588; } /* NameClass */
+.chroma .no { color: #008080; } /* NameConstant */
+.chroma .nd { color: #3c5d5d; } /* NameDecorator */
+.chroma .ni { color: #6f42c1; } /* NameEntity */
+.chroma .ne { color: #990000; } /* NameException */
+.chroma .nf { color: #005cc5; } /* NameFunction */
+.chroma .nl { color: #990000; } /* NameLabel */
+.chroma .nn { color: #555555; } /* NameNamespace */
+.chroma .nx { color: #24292e; } /* NameOther */
+.chroma .nt { color: #22863a; } /* NameTag */
+.chroma .nv { color: #008080; } /* NameVariable */
+.chroma .vc { color: #008080; } /* NameVariableClass */
+.chroma .vg { color: #008080; } /* NameVariableGlobal */
+.chroma .vi { color: #008080; } /* NameVariableInstance */
+.chroma .s { color: #032f62; } /* LiteralString */
+.chroma .sa { color: #032f62; } /* LiteralStringAffix */
+.chroma .sb { color: #032f62; } /* LiteralStringBacktick */
+.chroma .sc { color: #032f62; } /* LiteralStringChar */
+.chroma .dl { color: #032f62; } /* LiteralStringDelimiter */
+.chroma .sd { color: #032f62; } /* LiteralStringDoc */
+.chroma .s2 { color: #032f62; } /* LiteralStringDouble */
+.chroma .se { color: #032f62; } /* LiteralStringEscape */
+.chroma .sh { color: #032f62; } /* LiteralStringHeredoc */
+.chroma .si { color: #032f62; } /* LiteralStringInterpol */
+.chroma .sx { color: #032f62; } /* LiteralStringOther */
+.chroma .sr { color: #22863a; } /* LiteralStringRegex */
+.chroma .s1 { color: #24292e; } /* LiteralStringSingle */
+.chroma .ss { color: #032f62; } /* LiteralStringSymbol */
+.chroma .m { color: #009999; } /* LiteralNumber */
+.chroma .mb { color: #009999; } /* LiteralNumberBin */
+.chroma .mf { color: #009999; } /* LiteralNumberFloat */
+.chroma .mh { color: #009999; } /* LiteralNumberHex */
+.chroma .mi { color: #009999; } /* LiteralNumberInteger */
+.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */
+.chroma .mo { color: #009999; } /* LiteralNumberOct */
+.chroma .o { color: #d73a49; } /* Operator */
+.chroma .ow { color: #d73a49; } /* OperatorWord */
+.chroma .c { color: #6a737d; } /* Comment */
+.chroma .ch { color: #6a737d; } /* CommentHashbang */
+.chroma .cm { color: #999988; } /* CommentMultiline */
+.chroma .c1 { color: #6a737d; } /* CommentSingle */
+.chroma .cs { color: #999999; } /* CommentSpecial */
+.chroma .cp { color: #999999; } /* CommentPreproc */
+.chroma .cpf { color: #999999; } /* CommentPreprocFile */
+.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */
+.chroma .ge { color: #000000; } /* GenericEmph */
+.chroma .gr { color: #aa0000; } /* GenericError */
+.chroma .gh { color: #999999; } /* GenericHeading */
+.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */
+.chroma .go { color: #888888; } /* GenericOutput */
+.chroma .gp { color: #555555; } /* GenericPrompt */
+.chroma .gu { color: #aaaaaa; } /* GenericSubheading */
+.chroma .gt { color: #aa0000; } /* GenericTraceback */
+.chroma .w { color: #bbbbbb; } /* TextWhitespace */