chore(prism): replace Coldark theme with a custom theme

5 files changed, 310 insertions, 6 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index c232f9c..0a28c84 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -160,6 +160,12 @@ $color_grey-dark: hsla(206, 10%, 25%);
 $color_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
 $color_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
 $color_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
-$color_orange: hsl(34, 100%, 24%);
 $color_white: hsl(206, 15%, 97%);
 $color_white-o90: hsl(206, 15%, 97%, 0.9);
+$color_orange: hsl(28, 91%, 22%);
+$color_red: hsl(1, 72%, 29%);
+$color_green: hsl(105, 90%, 16%);
+$color_magenta: hsl(322, 80%, 28%);
+$color_purple: hsl(282, 84%, 31%);
+$color_yellow: hsl(49, 90%, 16%);
+$color_cyan: hsl(187, 84%, 17%);
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index f33ff00..6a04156 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -4,6 +4,7 @@
   --color-bg: #{var.$color_white};
   --color-bg-opacity: #{var.$color_white-o90};
   --color-bg-secondary: #{var.$color_grey-brighter};
+  --color-bg-tertiary: #{var.$color_grey-bright};
   --color-fg: #{var.$color_black};
   --color-fg-light: #{var.$color_grey-dark};
   --color-fg-inverted: #{var.$color_white};
@@ -20,4 +21,12 @@
   --color-shadow-light: #{var.$color_grey-dark-o40};
   --color-shadow-lighter: #{var.$color_grey-dark-o20};
   --color-shadow-dark: #{var.$color_grey-dark};
+  --color-token-red: #{var.$color_red};
+  --color-token-green: #{var.$color_green};
+  --color-token-purple: #{var.$color_purple};
+  --color-token-magenta: #{var.$color_magenta};
+  --color-token-cyan: #{var.$color_cyan};
+  --color-token-blue: #{var.$color_blue};
+  --color-token-yellow: #{var.$color_yellow};
+  --color-token-orange: #{var.$color_orange};
 }
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
index 4d21893..7d23008 100644
--- a/src/styles/components/_wp-blocks.scss
+++ b/src/styles/components/_wp-blocks.scss
@@ -35,11 +35,6 @@
   color: var(--color-primary-darker);
 }
 
-.wp-block-code[class*="language-"] {
-  margin: var(--spacing-sm) 0;
-  padding: 0 var(--spacing-sm);
-}
-
 .wp-block-columns {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index ec40a35..86e3ea8 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -6,6 +6,7 @@
  * Import each files separately to define vendors styles order.
  */
 @use "modern-normalize";
+@use "vendors/prism";
 
 /**
  * 2.0. Base
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
new file mode 100644
index 0000000..298a9c6
--- /dev/null
+++ b/src/styles/vendors/_prism.scss
@@ -0,0 +1,293 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+/// Custom theme for Prism
+
+.code-toolbar {
+  --gutter-size: #{fun.convert-px(90)};
+  --toolbar-height: #{fun.convert-px(40)};
+
+  position: relative;
+  margin-left: calc(var(--spacing-md) * -1);
+  margin-right: calc(var(--spacing-md) * -1);
+
+  .toolbar {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    height: var(--toolbar-height);
+    padding-right: var(--spacing-2xs);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--color-bg-tertiary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        left: var(--gutter-size);
+
+        &::before {
+          content: "";
+          display: block;
+          width: var(--gutter-size);
+          height: calc(var(--toolbar-height) + #{fun.convert-px(1)});
+          position: absolute;
+          top: fun.convert-px(-1);
+          left: calc((var(--gutter-size) * -1) - #{fun.convert-px(1)});
+          background: var(--color-bg);
+          border-bottom: fun.convert-px(1) solid var(--color-border-light);
+        }
+      }
+    }
+  }
+
+  .toolbar-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar-item:nth-child(1) {
+    order: 2;
+  }
+
+  .toolbar-item:nth-child(2) {
+    order: 1;
+    margin-right: auto;
+    padding: 0 var(--spacing-xs);
+    background: var(--color-bg-secondary);
+    border-right: fun.convert-px(1) solid var(--color-border-light);
+    color: var(--color-primary-darker);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    min-width: var(--gutter-size);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        min-width: unset;
+      }
+    }
+  }
+}
+
+pre[class*="language-"] {
+  max-height: 30vw;
+  margin: var(--spacing-md) 0;
+  padding: 0;
+  position: relative;
+  border: fun.convert-px(1) solid var(--color-border-light);
+
+  > code {
+    display: block;
+    padding: calc(var(--toolbar-height) + var(--spacing-xs)) 0 var(--spacing-xs)
+      calc(var(--gutter-size) + var(--spacing-xs));
+  }
+
+  .line-numbers-rows,
+  .command-line-prompt {
+    width: var(--gutter-size);
+    min-height: calc(100% - var(--toolbar-height));
+    padding: var(--spacing-xs);
+    position: absolute;
+    top: var(--toolbar-height);
+    left: 0;
+    pointer-events: none;
+    user-select: none;
+    background: var(--color-bg);
+    border-right: fun.convert-px(1) solid var(--color-border-lighter);
+  }
+
+  .token {
+    &.punctuation {
+      color: var(--color-primary-darker);
+    }
+
+    &.attr-name,
+    &.hexcode,
+    &.inserted,
+    &.string {
+      color: var(--color-token-green);
+    }
+
+    &.class,
+    &.coord,
+    &.id,
+    &.function {
+      color: var(--color-token-purple);
+    }
+
+    &.builtin,
+    &.builtin.class-name,
+    &.property-access,
+    &.regex,
+    &.scope {
+      color: var(--color-token-magenta);
+    }
+
+    &.class-name,
+    &.constant,
+    &.global,
+    &.interpolation,
+    &.key,
+    &.package,
+    &.this,
+    &.title,
+    &.variable {
+      color: var(--color-token-blue);
+    }
+
+    &.combinator,
+    &.keyword,
+    &.operator,
+    &.pseudo-class,
+    &.pseudo-element,
+    &.rule,
+    &.selector,
+    &.unit {
+      color: var(--color-token-orange);
+    }
+
+    &.attr-value,
+    &.boolean,
+    &.number {
+      color: var(--color-token-yellow);
+    }
+
+    &.delimiter,
+    &.doctype,
+    &.parameter,
+    &.parent,
+    &.property,
+    &.shebang,
+    &.tag {
+      color: var(--color-token-cyan);
+    }
+
+    &.deleted {
+      color: var(--color-token-red);
+    }
+
+    &.punctuation.brace-hover,
+    &.punctuation.brace-selected {
+      background: var(--color-bg);
+      outline: solid fun.convert-px(1) var(--color-primary-light);
+    }
+  }
+
+  span.inline-color-wrapper {
+    background: url(fun.encode-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
+    ));
+
+    /* Prevent glitches where 1px from the repeating pattern could be seen. */
+    background-position: center;
+    background-size: 110%;
+
+    display: inline-block;
+    height: 1.1ch;
+    width: 1.1ch;
+    margin: 0 0.5ch 0 0;
+    border: fun.convert-px(1) solid var(--color-bg);
+    outline: fun.convert-px(1) solid var(--color-border);
+    overflow: hidden;
+  }
+
+  span.inline-color {
+    display: block;
+
+    /* To prevent visual glitches again */
+    height: 120%;
+    width: 120%;
+  }
+}
+
+pre.line-numbers {
+  counter-reset: lineNumber;
+
+  .line-numbers-rows {
+    > span {
+      counter-increment: lineNumber;
+
+      &::before {
+        display: block;
+        padding: 0 var(--spacing-xs);
+        content: counter(lineNumber);
+        color: var(--color-primary-darker);
+        text-align: right;
+        line-height: var(--line-height);
+      }
+    }
+  }
+}
+
+pre.command-line {
+  --gutter-size: #{fun.convert-px(240)};
+
+  ~ .toolbar {
+    --gutter-size: #{fun.convert-px(240)};
+  }
+
+  .command-line-prompt {
+    > span {
+      &::before {
+        display: block;
+        content: "";
+      }
+
+      &[data-user]::before {
+        content: "[" attr(data-user) "@" attr(data-host) "] $";
+      }
+
+      &[data-user="root"]::before {
+        content: "[" attr(data-user) "@" attr(data-host) "] #";
+      }
+
+      &[data-prompt]::before {
+        content: attr(data-prompt);
+      }
+    }
+  }
+}
+
+.copy-to-clipboard-button {
+  display: block;
+  padding: 0 var(--spacing-xs);
+  background: var(--color-bg);
+  border: 0.4ex solid var(--color-primary);
+  border-radius: fun.convert-px(30);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+      var(--color-shadow-light),
+    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+      var(--color-shadow-light),
+    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+      var(--color-shadow-light);
+  color: var(--color-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  transition: all 0.35s ease-in-out 0s;
+
+  &:hover,
+  &:focus {
+    transform: translateX(#{fun.convert-px(-2)})
+      translateY(#{fun.convert-px(-2)});
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+        var(--color-shadow-lighter),
+      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+        var(--color-shadow-lighter),
+      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+        var(--color-shadow-lighter),
+      fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
+        var(--color-shadow-lighter);
+  }
+
+  &:focus {
+    text-decoration: underline var(--color-primary) fun.convert-px(3);
+  }
+
+  &:active {
+    text-decoration: none;
+    transform: translateY(#{fun.convert-px(2)});
+    box-shadow: 0 0 0 0 var(--color-shadow-light);
+  }
+}