refactor: modularize chroma css

assets/css/compiled/main.css

@@ -12,6 +12,168 @@ body.zen-mode-enable {
     display: none !important;
   }
 }
+.prose .chroma {
+  position: static;
+  border-radius: var(--radius-md);
+  background-color: rgba(var(--color-neutral-50), 1);
+  color: rgba(var(--color-neutral-700), 1);
+  &:is(.dark *) {
+    background-color: rgba(var(--color-neutral-700), 1);
+  }
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-200), 1);
+  }
+}
+.chroma .lntd, .chroma .lntd pre {
+  margin: calc(var(--spacing) * 0);
+  --tw-border-style: none;
+  border-style: none;
+  padding: calc(var(--spacing) * 0);
+  vertical-align: top;
+}
+.chroma .lntable {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 3);
+  font-size: var(--text-base);
+  line-height: var(--tw-leading, var(--text-base--line-height));
+  border-spacing: 0;
+}
+.chroma .hl {
+  margin-inline: calc(var(--spacing) * -4);
+  display: block;
+  width: auto;
+  background-color: rgba(var(--color-primary-100), 1);
+  padding-inline: calc(var(--spacing) * 4);
+  &:is(.dark *) {
+    background-color: rgba(var(--color-primary-900), 1);
+  }
+}
+.chroma .lntd .hl {
+  margin: calc(var(--spacing) * 0);
+  padding: calc(var(--spacing) * 0);
+}
+.chroma .lnt, .chroma .ln {
+  margin-right: 0.4em;
+  padding-inline: 0.4em;
+  padding-block: calc(var(--spacing) * 0);
+  color: rgba(var(--color-neutral-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-300), 1);
+  }
+}
+.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
+  color: rgba(var(--color-primary-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-300), 1);
+  }
+}
+.chroma .kc {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-600), 1);
+  }
+}
+.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
+  color: rgba(var(--color-secondary-900), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-200), 1);
+  }
+}
+.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
+  color: rgba(var(--color-secondary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-300), 1);
+  }
+}
+.chroma .no, .chroma .ne, .chroma .vg {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .nf {
+  color: rgba(var(--color-secondary-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
+  color: rgba(var(--color-primary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-400), 1);
+  }
+}
+.chroma .se {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .sr, .chroma .ss {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-primary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-400), 1);
+  }
+}
+.chroma .ow {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-primary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-600), 1);
+  }
+}
+.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
+  color: rgba(var(--color-neutral-500), 1);
+  font-style: italic;
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-400), 1);
+  }
+}
+.chroma .ch {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-neutral-500), 1);
+  font-style: italic;
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-400), 1);
+  }
+}
+.chroma .ge {
+  font-style: italic;
+}
+.chroma .gh {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-neutral-500), 1);
+}
+.chroma .gs {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+}
+.chroma .gu, .chroma .gt {
+  color: rgba(var(--color-neutral-500), 1);
+}
+.chroma .gl {
+  text-decoration-line: underline;
+}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -3521,171 +3683,9 @@ a {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
-.prose .chroma {
-  position: static;
-  border-radius: var(--radius-md);
-  background-color: rgba(var(--color-neutral-50), 1);
-  color: rgba(var(--color-neutral-700), 1);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-neutral-700), 1);
-  }
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-200), 1);
-  }
-}
 .prose-invert .highlight pre > code {
   background-color: unset;
 }
-.chroma .lntd, .chroma .lntd pre {
-  margin: calc(var(--spacing) * 0);
-  --tw-border-style: none;
-  border-style: none;
-  padding: calc(var(--spacing) * 0);
-  vertical-align: top;
-}
-.chroma .lntable {
-  display: block;
-  width: auto;
-  overflow: hidden;
-  padding-inline: calc(var(--spacing) * 4);
-  padding-block: calc(var(--spacing) * 3);
-  font-size: var(--text-base);
-  line-height: var(--tw-leading, var(--text-base--line-height));
-  border-spacing: 0;
-}
-.chroma .hl {
-  margin-inline: calc(var(--spacing) * -4);
-  display: block;
-  width: auto;
-  background-color: rgba(var(--color-primary-100), 1);
-  padding-inline: calc(var(--spacing) * 4);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-primary-900), 1);
-  }
-}
-.chroma .lntd .hl {
-  margin: calc(var(--spacing) * 0);
-  padding: calc(var(--spacing) * 0);
-}
-.chroma .lnt, .chroma .ln {
-  margin-right: 0.4em;
-  padding-inline: 0.4em;
-  padding-block: calc(var(--spacing) * 0);
-  color: rgba(var(--color-neutral-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-300), 1);
-  }
-}
-.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
-  color: rgba(var(--color-primary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-300), 1);
-  }
-}
-.chroma .kc {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-600), 1);
-  }
-}
-.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
-  color: rgba(var(--color-secondary-900), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-200), 1);
-  }
-}
-.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
-  color: rgba(var(--color-secondary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-300), 1);
-  }
-}
-.chroma .no, .chroma .ne, .chroma .vg {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .nf {
-  color: rgba(var(--color-secondary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .se {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .sr, .chroma .ss {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .ow {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-600), 1);
-  }
-}
-.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ch {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ge {
-  font-style: italic;
-}
-.chroma .gh {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gs {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-}
-.chroma .gu, .chroma .gt {
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gl {
-  text-decoration-line: underline;
-}
 pre {
   text-align: left;
 }
@@ -3946,6 +3946,10 @@ pre {
     }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4069,10 +4073,6 @@ pre {
   syntax: "*";
   inherits: false;
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-tracking {
   syntax: "*";
   inherits: false;
@@ -4277,6 +4277,7 @@ pre {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -4304,7 +4305,6 @@ pre {
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
-      --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;

assets/css/components/chroma.css

@@ -0,0 +1,226 @@
+
+/* -- Chroma Highlight -- */
+/* Background */
+.prose .chroma {
+  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+}
+
+/* LineTableTD */
+.chroma .lntd,
+.chroma .lntd pre {
+  @apply p-0 m-0 align-top border-none;
+}
+
+/* LineTable */
+.chroma .lntable {
+  @apply block w-auto px-4 py-3 overflow-hidden text-base;
+  border-spacing: 0;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
+}
+
+.chroma .lntd .hl {
+  @apply p-0 m-0;
+}
+
+/* LineNumbersTable */
+/* LineNumbers */
+.chroma .lnt,
+.chroma .ln {
+  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
+}
+
+/* Keyword */
+/* KeywordDeclaration */
+/* KeywordNamespace */
+/* KeywordPseudo */
+/* KeywordReserved */
+/* NameClass */
+/* NameFunctionMagic */
+/* NameNamespace */
+/* NameVariableClass */
+/* Operator */
+.chroma .k,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .nc,
+.chroma .fm,
+.chroma .nn,
+.chroma .vc,
+.chroma .o {
+  @apply text-primary-600 dark:text-primary-300;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* KeywordType */
+/* NameVariable */
+/* NameVariableInstance */
+/* NameVariableMagic */
+/* LiteralNumber */
+/* LiteralNumberBin */
+/* LiteralNumberFloat */
+/* LiteralNumberHex */
+/* LiteralNumberInteger */
+/* LiteralNumberIntegerLong */
+/* LiteralNumberOct */
+.chroma .kt,
+.chroma .nv,
+.chroma .vi,
+.chroma .vm,
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
+  @apply text-secondary-400 dark:text-secondary-600;
+}
+
+/* Name */
+/* NameDecorator */
+/* NameEntity */
+/* NameLabel */
+.chroma .n,
+.chroma .nd,
+.chroma .ni,
+.chroma .nl {
+  @apply text-secondary-900 dark:text-secondary-200;
+}
+
+/* NameAttribute */
+/* NameBuiltin */
+/* NameBuiltinPseudo */
+/* NameOther */
+/* NameProperty */
+/* NameTag */
+.chroma .na,
+.chroma .nb,
+.chroma .bp,
+.chroma .nx,
+.chroma .py,
+.chroma .nt {
+  @apply text-secondary-800 dark:text-secondary-300;
+}
+
+/* NameConstant */
+/* NameException */
+/* NameVariableGlobal */
+.chroma .no,
+.chroma .ne,
+.chroma .vg {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* NameFunction */
+.chroma .nf {
+  @apply text-secondary-600 dark:text-secondary-500;
+}
+
+/* Literal */
+/* LiteralDate */
+/* LiteralString */
+/* LiteralStringAffix */
+/* LiteralStringBacktick */
+/* LiteralStringChar */
+/* LiteralStringDelimiter */
+/* LiteralStringDoc */
+/* LiteralStringDouble */
+/* LiteralStringHeredoc */
+/* LiteralStringInterpol */
+/* LiteralStringOther */
+/* LiteralStringSingle */
+/* GenericInserted */
+/* GenericOutput */
+/* GenericPrompt */
+.chroma .l,
+.chroma .ld,
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .sh,
+.chroma .si,
+.chroma .sx,
+.chroma .s1,
+.chroma .gi,
+.chroma .go,
+.chroma .gp {
+  @apply text-primary-800 dark:text-primary-400;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* LiteralStringRegex */
+/* LiteralStringSymbol */
+.chroma .sr,
+.chroma .ss {
+  @apply font-semibold text-primary-800 dark:text-primary-400;
+}
+
+/* OperatorWord */
+.chroma .ow {
+  @apply font-semibold text-primary-400 dark:text-primary-600;
+}
+
+/* Comment */
+/* CommentMultiline */
+/* CommentSingle */
+/* CommentSpecial */
+/* CommentPreproc */
+/* CommentPreprocFile */
+.chroma .c,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
+  @apply italic text-neutral-500 dark:text-neutral-400;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
+}
+
+/* GenericEmph */
+.chroma .ge {
+  @apply italic;
+}
+
+/* GenericHeading */
+.chroma .gh {
+  @apply font-semibold text-neutral-500;
+}
+
+/* GenericStrong */
+.chroma .gs {
+  @apply font-semibold;
+}
+
+/* GenericSubheading */
+/* GenericTraceback */
+.chroma .gu,
+.chroma .gt {
+  @apply text-neutral-500;
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  @apply underline;
+}

assets/css/main.css

@@ -1,6 +1,7 @@
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 
 @import "./components/zen-mode.css";
+@import "./components/chroma.css";
 
 @import "tailwindcss";
 @config "../../tailwind.config.js";
@@ -151,236 +152,10 @@ a {
   overflow-wrap: break-word;
 }
 
-/* -- Chroma Highlight -- */
-/* Background */
-.prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
-}
-
 .prose-invert .highlight pre > code {
   background-color: unset;
 }
 
-/* LineTableTD */
-.chroma .lntd,
-.chroma .lntd pre {
-  @apply p-0 m-0 align-top border-none;
-}
-
-/* LineTable */
-.chroma .lntable {
-  @apply block w-auto px-4 py-3 overflow-hidden text-base;
-  border-spacing: 0;
-}
-
-/* LineHighlight */
-.chroma .hl {
-  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
-}
-
-.chroma .lntd .hl {
-  @apply p-0 m-0;
-}
-
-/* LineNumbersTable */
-/* LineNumbers */
-.chroma .lnt,
-.chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
-}
-
-/* Keyword */
-/* KeywordDeclaration */
-/* KeywordNamespace */
-/* KeywordPseudo */
-/* KeywordReserved */
-/* NameClass */
-/* NameFunctionMagic */
-/* NameNamespace */
-/* NameVariableClass */
-/* Operator */
-.chroma .k,
-.chroma .kd,
-.chroma .kn,
-.chroma .kp,
-.chroma .kr,
-.chroma .nc,
-.chroma .fm,
-.chroma .nn,
-.chroma .vc,
-.chroma .o {
-  @apply text-primary-600 dark:text-primary-300;
-}
-
-/* KeywordConstant */
-.chroma .kc {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* KeywordType */
-/* NameVariable */
-/* NameVariableInstance */
-/* NameVariableMagic */
-/* LiteralNumber */
-/* LiteralNumberBin */
-/* LiteralNumberFloat */
-/* LiteralNumberHex */
-/* LiteralNumberInteger */
-/* LiteralNumberIntegerLong */
-/* LiteralNumberOct */
-.chroma .kt,
-.chroma .nv,
-.chroma .vi,
-.chroma .vm,
-.chroma .m,
-.chroma .mb,
-.chroma .mf,
-.chroma .mh,
-.chroma .mi,
-.chroma .il,
-.chroma .mo {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-
-/* Name */
-/* NameDecorator */
-/* NameEntity */
-/* NameLabel */
-.chroma .n,
-.chroma .nd,
-.chroma .ni,
-.chroma .nl {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-
-/* NameAttribute */
-/* NameBuiltin */
-/* NameBuiltinPseudo */
-/* NameOther */
-/* NameProperty */
-/* NameTag */
-.chroma .na,
-.chroma .nb,
-.chroma .bp,
-.chroma .nx,
-.chroma .py,
-.chroma .nt {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-
-/* NameConstant */
-/* NameException */
-/* NameVariableGlobal */
-.chroma .no,
-.chroma .ne,
-.chroma .vg {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* NameFunction */
-.chroma .nf {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-
-/* Literal */
-/* LiteralDate */
-/* LiteralString */
-/* LiteralStringAffix */
-/* LiteralStringBacktick */
-/* LiteralStringChar */
-/* LiteralStringDelimiter */
-/* LiteralStringDoc */
-/* LiteralStringDouble */
-/* LiteralStringHeredoc */
-/* LiteralStringInterpol */
-/* LiteralStringOther */
-/* LiteralStringSingle */
-/* GenericInserted */
-/* GenericOutput */
-/* GenericPrompt */
-.chroma .l,
-.chroma .ld,
-.chroma .s,
-.chroma .sa,
-.chroma .sb,
-.chroma .sc,
-.chroma .dl,
-.chroma .sd,
-.chroma .s2,
-.chroma .sh,
-.chroma .si,
-.chroma .sx,
-.chroma .s1,
-.chroma .gi,
-.chroma .go,
-.chroma .gp {
-  @apply text-primary-800 dark:text-primary-400;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* LiteralStringRegex */
-/* LiteralStringSymbol */
-.chroma .sr,
-.chroma .ss {
-  @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  @apply font-semibold text-primary-400 dark:text-primary-600;
-}
-
-/* Comment */
-/* CommentMultiline */
-/* CommentSingle */
-/* CommentSpecial */
-/* CommentPreproc */
-/* CommentPreprocFile */
-.chroma .c,
-.chroma .cm,
-.chroma .c1,
-.chroma .cs,
-.chroma .cp,
-.chroma .cpf {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
-}
-
-/* GenericEmph */
-.chroma .ge {
-  @apply italic;
-}
-
-/* GenericHeading */
-.chroma .gh {
-  @apply font-semibold text-neutral-500;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  @apply font-semibold;
-}
-
-/* GenericSubheading */
-/* GenericTraceback */
-.chroma .gu,
-.chroma .gt {
-  @apply text-neutral-500;
-}
-
-/* GenericUnderline */
-.chroma .gl {
-  @apply underline;
-}
-
 /* Custom */
 
 pre {