styles - improve prism colors

site/_includes/css/prism.css

@@ -23,7 +23,11 @@ pre[class*="language-"] {
   padding: 0.1em;
 }
 pre[class*="language-"] {
-  background: color-mix(in lch, var(--c-text-background-light) 20%, transparent);
+  background: color-mix(
+    in lch,
+    var(--c-text-background-light) 20%,
+    transparent
+  );
   > code {
     white-space: pre-wrap;
     word-break: break-all;
@@ -34,12 +38,18 @@ pre[class*="language-"] {
   box-shadow: inset 0 0 6rem -2rem var(--c-highlight);
   counter-reset: lineNumber;
   --places: 1;
-  &:has(.highlight-line:nth-child(10)) { --places: 2 }
+  &:has(.highlight-line:nth-child(10)) {
-  &:has(.highlight-line:nth-child(100)) { --places: 3 }
+    --places: 2;
-  &:has(.highlight-line:nth-child(1000)) { --places: 4 }
+  }
+  &:has(.highlight-line:nth-child(100)) {
+    --places: 3;
+  }
+  &:has(.highlight-line:nth-child(1000)) {
+    --places: 4;
+  }
   --lineNumWidth: calc(1em + var(--places) * 1ch);
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     height: 100%;
     top: 0;
@@ -69,56 +79,81 @@ p:has(+ pre[class*="language-"]) > code {
   border-radius: none;
   background: none;
 }
-p:has(>code) + pre[class*="language-"] {
+p:has(> code) + pre[class*="language-"] {
   margin-top: 0;
 }
 [class*="language-"] .namespace {
   opacity: 0.7;
 }
-.token.id { font-weight: bold; }
+.token.id {
-.token.important { font-weight: bold; }
+  font-weight: bold;
+}
+.token.important {
+  font-weight: bold;
+}
 
 @media screen {
-  pre[class*="language-"] { color: var(--c-text-dim); }
+  pre[class*="language-"] {
+    color: var(--c-text-dim);
+  }
   .language-css > code,
   .language-sass > code,
   .language-scss > code {
-    color: #fd9170;
+    color: oklch(85% 0.139 37.8);
+  }
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    font-weight: 700;
+    opacity: 0.75;
+  }
+  .token.deleted,
+  .token.entity,
+  .token.selector,
+  .token.tag,
+  .token.url,
+  .token.variable {
+    color: oklch(85% 0.275 23.2);
+  }
+  .token.number,
+  .token.unit {
+    color: oklch(85% 0.201 37.8);
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.class {
+    color: oklch(85% 0.128 81.1);
+  }
+  .token.class-name,
+  .token.hexcode,
+  .token.regex {
+    color: oklch(85% 0.214 113.5);
+  }
+  .token.attr-value,
+  .token.attribute,
+  .token.pseudo-class,
+  .token.pseudo-element,
+  .token.string {
+    color: oklch(85% 0.201 129.4);
+  }
+  .token.cdata,
+  .token.char,
+  .token.inserted,
+  .token.property {
+    color: oklch(85% 0.075 188.2);
+  }
+  .token.operator,
+  .token.punctuation {
+    color: oklch(85% 0.094 225.9);
+  }
+  .token.atrule,
+  .token.boolean,
+  .token.constant,
+  .token.function,
+  .token.id,
+  .token.important,
+  .token.keyword,
+  .token.symbol {
+    color: oklch(85% 0.214 311.1);
   }
-  .token.atrule { color: #c792ea; }
-  .token.attr-name { color: #ffcb6b; }
-  .token.attr-value { color: #a5e844; }
-  .token.attribute { color: #a5e844; }
-  .token.boolean { color: #c792ea; }
-  .token.builtin { color: #ffcb6b; }
-  .token.cdata { color: #80cbc4; }
-  .token.char { color: #80cbc4; }
-  .token.class { color: #ffcb6b; }
-  .token.class-name { color: #f2ff00; }
-  .token.comment { color: #616161; }
-  .token.constant { color: #c792ea; }
-  .token.deleted { color: #ff6666; }
-  .token.doctype { color: #616161; }
-  .token.entity { color: #ff6666; }
-  .token.function { color: #c792ea; }
-  .token.hexcode { color: #f2ff00; }
-  .token.id { color: #c792ea; }
-  .token.important { color: #c792ea; }
-  .token.inserted { color: #80cbc4; }
-  .token.keyword { color: #c792ea; }
-  .token.number { color: #fd9170; }
-  .token.operator { color: #89ddff; }
-  .token.prolog { color: #616161; }
-  .token.property { color: #80cbc4; }
-  .token.pseudo-class { color: #a5e844; }
-  .token.pseudo-element { color: #a5e844; }
-  .token.punctuation { color: #89ddff; }
-  .token.regex { color: #f2ff00; }
-  .token.selector { color: #ff6666; }
-  .token.string { color: #a5e844; }
-  .token.symbol { color: #c792ea; }
-  .token.tag { color: #ff6666; }
-  .token.unit { color: #fd9170; }
-  .token.url { color: #ff6666; }
-  .token.variable { color: #ff6666; }
 }