re-visit light/dark theme colors (especially syntax highlighting)

2025-04-27 02:38:27 -04:00 · 2020-05-09 09:59:35 -04:00 · 2020-05-09 09:59:35 -04:00 · 3fe24f2216
commit 3fe24f2216
parent 1458e6e2a9
15 changed files with 301 additions and 256 deletions
--- a/.percy.yml
+++ b/.percy.yml
@ -6,9 +6,6 @@ snapshot:
    div.embed, iframe, video {
      display: none;
    }
-    code, div.highlight {
-      border: 0 !important;  /* no clue why this bugs out... */
-    }
    .wave, .beat {
      animation: none;
    }
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@ -3,55 +3,33 @@
 // Dark & Light Themes
 $themes: (
  light: (
-    color-background: #ffffff,
-    color-text: #202020,
-    color-medium-dark: #494949,
-    color-medium: #5e5e5e,
-    color-medium-light: #757575,
-    color-light: #d2d2d2,
-    color-kinda-light: #e3e3e3,
-    color-super-light: #f4f4f4,
-    color-super-duper-light: #fbfbfb,
-    color-links: #0e6dc2,
-    syntax-k: #0e6dc2,
-    syntax-n: #111111,
-    syntax-na: #337a15,
-    syntax-err: #d43d2e,
-    syntax-l: #8d4eff,
-    syntax-ld: #bd5500,
-    syntax-c: #6b6859,
-    syntax-lnt: #999999,
+    background: #ffffff,
+    background-top: #fcfcfc,
+    text: #202020,
+    medium-dark: #515151,
+    medium: #5e5e5e,
+    medium-light: #757575,
+    light: #d2d2d2,
+    kinda-light: #e3e3e3,
+    super-light: #f4f4f4,
+    super-duper-light: #fbfbfb,
+    links: #0e6dc2,
  ),
  dark: (
-    color-background: #292929,
-    color-text: #efefef,
-    color-medium-dark: #cfcfcf,
-    color-medium: #b1b1b1,
-    color-medium-light: #929292,
-    color-light: #646464,
-    color-kinda-light: #535353,
-    color-super-light: #272727,
-    color-super-duper-light: #1f1f1f,
-    color-links: #85baea,
-    syntax-k: #3b9dd2,
-    syntax-n: #cfcfcf,
-    syntax-na: #78df55,
-    syntax-err: #f95757,
-    syntax-l: #d588fb,
-    syntax-ld: #fd992a,
-    syntax-c: #929292,
-    syntax-lnt: #b1b1b1,
+    background: #292929,
+    background-top: #202020,
+    text: #efefef,
+    medium-dark: #d0d0d0,
+    medium: #b1b1b1,
+    medium-light: #929292,
+    light: #646464,
+    kinda-light: #535353,
+    super-light: #272727,
+    super-duper-light: #1f1f1f,
+    links: #85baea,
  ),
 );

-$color-light-background: #fbfbfb;
-$color-dark-background: #1f1f1f;
-
-// For nifty color swapping on svg logo hover in components/_header.scss
-$color-logo1: #6fbc4e;
-$color-logo2: #ffb900;
-$color-logo3: #009cdf;
-
 // Colorful Homepage
 $colors-home: (
  boston: (
@ -201,6 +179,11 @@ $colors-home: (
 );
 $color-serverless: #87cef7;

+// For nifty color swapping on svg logo hover in components/_header.scss
+$color-logo1: #6fbc4e;
+$color-logo2: #ffb900;
+$color-logo3: #009cdf;
+
 // Icons (modified twemojis)
 // lightbulb on
 $icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@ -19,7 +19,7 @@ div#content {
    border-bottom: 1px solid;

    @include themed() {
-      border-color: t(color-kinda-light);
+      border-color: t(kinda-light);
    }
  }

@ -47,7 +47,7 @@ div#content {
      font-size: 0.95em;

      @include themed() {
-        color: t(color-medium);
+        color: t(medium);
      }
    }
  }
--- a/assets/sass/components/_fonts.scss
+++ b/assets/sass/components/_fonts.scss
@ -31,3 +31,4 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF
 *  https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
 */
@include font-face("Hack", "vendor/hack/hack-regular-subset", 400);
+@include font-face("Hack", "vendor/hack/hack-italic-subset", 400, italic);
--- a/assets/sass/components/_footer.scss
+++ b/assets/sass/components/_footer.scss
@ -10,14 +10,13 @@ footer {
  border-top: 1px solid;

  @include themed() {
-    color: t(color-medium);
-    border-color: t(color-kinda-light);
-    background-color: t(color-super-duper-light);
+    color: t(medium-dark);
+    border-color: t(kinda-light);
  }

  a {
    @include themed() {
-      color: t(color-medium);
+      color: t(medium-dark);
    }
  }

@ -49,7 +48,7 @@ footer {
        border-bottom: 1px solid;

        @include themed() {
-          border-color: t(color-light);
+          border-color: t(light);
        }
      }
    }
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@ -10,6 +10,24 @@ body {
  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
  line-height: 1.5;
  box-sizing: border-box;
+
+  // manually setting light/dark mode backgrounds and bulb icon
+  // really just the color of header & footer
+  &.light {
+    background-color: map-get(map-get($themes, "light"), "background-top");
+
+    button.dark-mode-toggle {
+      background-image: url($icon-bulb-on);
+    }
+  }
+
+  &.dark {
+    background-color: map-get(map-get($themes, "dark"), "background-top");
+
+    button.dark-mode-toggle {
+      background-image: url($icon-bulb-off);
+    }
+  }
 }

 main {
@ -20,7 +38,7 @@ main {
  display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11

  @include themed() {
-    color: t(color-text);
+    color: t(text);
  }
 }

@ -33,8 +51,8 @@ a {
  transition: background-size 0.25s ease-in-out;

  @include themed() {
-    color: t(color-links);
-    background-image: underline-hack(t(color-links));
+    color: t(links);
+    background-image: underline-hack(t(links));
  }

  &:hover {
@ -52,12 +70,13 @@ strong {
 }

 blockquote {
-  margin-left: 0.5em;
-  padding-left: 1em;
-  border-left: 5px solid;
+  margin-left: 0;
+  padding-left: 1.5em;
+  border-left: 3px solid;

  @include themed() {
-    border-color: t(color-links);
+    color: t(medium-dark);
+    border-color: t(links);
  }
 }

@ -67,7 +86,7 @@ hr {
  border: 0;

  @include themed() {
-    background-color: t(color-light);
+    background-color: t(light);
  }
 }

@ -93,51 +112,6 @@ button {
  }
 }

-// all code
-code {
-  font-family: $webfont-mono;
-  font-size: 0.95em;
-  letter-spacing: 0;
-  page-break-inside: avoid;
-  border: 1px solid;
-
-  // inline code in paragraphs (single tildes)
-  padding: 0.2em;
-
-  @include themed() {
-    background-color: t(color-super-duper-light);
-    border-color: t(color-light);
-  }
-}
-
-// code fences
-div.highlight {
-  line-height: 1.6;
-  max-width: 100%;
-  overflow-x: scroll;
-  object-fit: scale-down;
-  margin: 1em 0;
-  border: 1px solid;
-  border-left: 3px solid;
-
-  @include themed() {
-    border-color: t(color-light);
-    border-left-color: t(color-links);
-    background-color: t(color-super-duper-light);
-  }
-
-  pre {
-    display: block;
-    margin-left: 1.5em;
-  }
-
-  // overrides inline code styles
-  code {
-    border: 0;
-    padding: 0;
-  }
-}
-
 // make SVG twemojis relative to surrounding text
 // https://github.com/twitter/twemoji#inline-styles
 img.emoji {
@ -153,27 +127,7 @@ div#wrap {
  width: 100%;

  @include themed() {
-    background-color: t(color-background);
-  }
-}
-
-// manually setting light/dark mode backgrounds and bulb icon
-// really just the color of header & footer
-body {
-  &.light {
-    background-color: $color-light-background;
-
-    button.dark-mode-toggle {
-      background-image: url($icon-bulb-on);
-    }
-  }
-
-  &.dark {
-    background-color: $color-dark-background;
-
-    button.dark-mode-toggle {
-      background-image: url($icon-bulb-off);
-    }
+    background-color: t(background);
  }
 }

--- a/assets/sass/components/_header.scss
+++ b/assets/sass/components/_header.scss
@ -8,8 +8,7 @@ header {
  border-bottom: 1px solid;

  @include themed() {
-    border-color: t(color-kinda-light);
-    background-color: t(color-super-duper-light);
+    border-color: t(kinda-light);
  }

  nav {
@ -26,7 +25,7 @@ header {
      align-items: center;

      @include themed() {
-        color: t(color-medium);
+        color: t(medium-dark);
      }

      h1#name {
@ -44,7 +43,7 @@ header {
      // mix up logo colors on hover
      &:hover {
        @include themed() {
-          color: t(color-links);
+          color: t(links);
        }

        svg {
@ -80,14 +79,14 @@ header {
          transition: transform 0.15s ease-in-out;

          @include themed() {
-            color: t(color-medium);
+            color: t(medium-dark);
          }

          &:hover {
            transform: scale(1.15);

            @include themed() {
-              color: t(color-links);
+              color: t(links);
            }
          }

--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@ -1,110 +1,222 @@
@charset "UTF-8";

-/*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
-div.highlight span {
-  &.k,
-  &.kc,
-  &.kd,
-  &.kp,
-  &.kr,
-  &.kt,
-  &.no {
-    @include themed() {
-      color: t(syntax-k);
-    }
-  }
-  &.n,
-  &.bp,
-  &.nb,
-  &.ni,
-  &.fm,
-  &.nl,
-  &.nn,
-  &.py,
-  &.nv,
-  &.vc,
-  &.vg,
-  &.vi,
-  &.vm,
-  &.p {
-    @include themed() {
-      color: t(syntax-n);
-    }
-  }
-  &.na,
-  &.nc,
-  &.nd,
-  &.ne,
-  &.nf,
-  &.nx {
-    @include themed() {
-      color: t(syntax-na);
-    }
-  }
-  &.err,
-  &.nt,
-  &.o,
-  &.ow,
-  &.kn {
-    @include themed() {
-      color: t(syntax-err);
-    }
-  }
-  &.l,
-  &.se,
-  &.m,
-  &.mb,
-  &.mf,
-  &.mh,
-  &.mi,
-  &.il,
-  &.mo {
-    @include themed() {
-      color: t(syntax-l);
-    }
-  }
-  &.ld,
-  &.s,
-  &.sa,
-  &.sb,
-  &.sc,
-  &.dl,
-  &.sd,
-  &.s2,
-  &.sh,
-  &.si,
-  &.sx,
-  &.sr,
-  &.s1,
-  &.ss {
-    @include themed() {
-      color: t(syntax-ld);
-    }
-  }
-  &.c,
-  &.ch,
-  &.cm,
-  &.c1,
-  &.cs,
-  &.cp,
-  &.cpf {
-    @include themed() {
-      color: t(syntax-c);
-    }
-  }
-  &.ge {
-    font-style: italic;
-  }
-  &.gs {
-    font-weight: bold;
+// all code
+code {
+  font-family: $webfont-mono;
+  font-size: 0.95em;
+  letter-spacing: 0;
+  page-break-inside: avoid;
+}
+
+// inline code in paragraphs (single tildes)
+p code {
+  padding: 0 0.15em;
+}
+
+// code fences
+div.highlight {
+  font-size: 0.975em;
+  line-height: 1.7;
+  max-width: 100%;
+  overflow-x: scroll;
+  object-fit: scale-down;
+  margin: 1em 0;
+  border: 1px solid;
+
+  @include themed() {
+    border-color: t(light);
  }

-  // line numbers
-  &.lnt {
-    user-select: none;
+  pre {
+    padding-left: 1.7em;
+  }

-    @include themed() {
-      color: t(syntax-lnt);
+  // global table styles for line numbers and font styles
+  .chroma {
+    .lntable {
+      border-spacing: 0;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      width: auto;
+      overflow: auto;
+      display: block;
+    }
+    // columns
+    .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+    // line numbers
+    .ln,
+    .lnt {
+      user-select: none;
+    }
+    .gh,
+    .gi,
+    .gu {
+      font-weight: bold;
+    }
+    .kd,
+    .nb,
+    .nl,
+    //.nv,
+    .vc,
+    .vg,
+    .vi,
+    .ge {
+      font-style: italic;
+    }
+    .gl {
+      text-decoration: underline;
+    }
+  }
+}
+
+/*! Syntax Highlighting - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
+body.light {
+  div.highlight {
+    color: #464646;
+    background-color: #fdfdfd;
+
+    .chroma {
+      .k,
+      .kc,
+      .kd,
+      .kp,
+      .kr,
+      .kt,
+      .no {
+        color: #029cb9;
+      }
+      .na,
+      .nc,
+      .nd,
+      .ne,
+      .nf,
+      .nx {
+        color: #70a800;
+      }
+      .nt,
+      .o,
+      .ow,
+      .kn {
+        color: #f92672;
+      }
+      .l,
+      .se,
+      .m,
+      .mb,
+      .mf,
+      .mh,
+      .mi,
+      .il,
+      .mo {
+        color: #ae81ff;
+      }
+      .ld,
+      .s,
+      .sa,
+      .sb,
+      .sc,
+      .dl,
+      .sd,
+      .s2,
+      .sh,
+      .si,
+      .sx,
+      .sr,
+      .s1,
+      .ss {
+        color: #d88200;
+      }
+      .c,
+      .ch,
+      .cm,
+      .c1,
+      .cs,
+      .cp,
+      .cpf {
+        color: #75715e;
+      }
+      .lnt {
+        color: #8a8a8a;
+      }
+    }
+  }
+}
+
+/*! Syntax Highlighting - modified from Dracula: https://github.com/dracula/pygments */
+body.dark {
+  div.highlight {
+    color: #dfdfdf;
+    background-color: #1f1f1f;
+
+    .chroma {
+      .k,
+      .kc,
+      .kd,
+      .kp,
+      .kr,
+      .kt,
+      .no {
+        color: #3b9dd2;
+      }
+      .na,
+      .nc,
+      .nd,
+      .ne,
+      .nf,
+      .nx {
+        color: #78df55;
+      }
+      .nt,
+      .o,
+      .ow,
+      .kn {
+        color: #f95757;
+      }
+      .l,
+      .se,
+      .m,
+      .mb,
+      .mf,
+      .mh,
+      .mi,
+      .il,
+      .mo {
+        color: #d588fb;
+      }
+      .ld,
+      .s,
+      .sa,
+      .sb,
+      .sc,
+      .dl,
+      .sd,
+      .s2,
+      .sh,
+      .si,
+      .sx,
+      .sr,
+      .s1,
+      .ss {
+        color: #fd992a;
+      }
+      .c,
+      .ch,
+      .cm,
+      .c1,
+      .cs,
+      .cp,
+      .cpf {
+        color: #929292;
+      }
+      .lnt {
+        color: #b1b1b1;
+      }
    }
  }
 }
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@ -49,7 +49,7 @@ main#home {
    border-radius: 50%;

    @include themed() {
-      border-color: t(color-light);
+      border-color: t(light);
    }
  }

@ -69,7 +69,7 @@ main#home {

    &#shh {
      @include themed() {
-        color: t(color-medium-light);
+        color: t(medium-light);
      }
    }

--- a/assets/sass/pages/_list.scss
+++ b/assets/sass/pages/_list.scss
@ -33,7 +33,7 @@ main#list {
        flex-shrink: 0;

        @include themed() {
-          color: t(color-medium);
+          color: t(medium);
        }
      }

--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@ -12,7 +12,7 @@ main#single {
    margin-top: 0.8em;

    @include themed() {
-      color: t(color-medium);
+      color: t(medium);
    }

    a {
--- a/assets/sass/pages/_videos.scss
+++ b/assets/sass/pages/_videos.scss
@ -21,7 +21,7 @@ main#video {
    margin: 1.25em 1em 0 1em;

    @include themed() {
-      color: t(color-medium-light);
+      color: t(medium-light);
    }

    a {
--- a/static/vendor/hack/hack-italic-subset.woff
+++ b/static/vendor/hack/hack-italic-subset.woff
--- a/static/vendor/hack/hack-italic-subset.woff2
+++ b/static/vendor/hack/hack-italic-subset.woff2
--- a/yarn.lock
+++ b/yarn.lock
@ -292,9 +292,9 @@ acorn-jsx@^5.2.0:
  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==

 acorn@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
+  integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==

 aggregate-error@^3.0.0:
  version "3.0.1"
@ -670,9 +670,9 @@ camelcase@^5.0.0, camelcase@^5.3.1:
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

 caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
-  version "1.0.30001052"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001052.tgz#33a5ddd13783cfe2c8a6a846ab983387d4edff75"
-  integrity sha512-b2/oWZwkpWzEB1+Azr2Z4FcpdDkH+9R4dn+bkwk/6eH9mRSrnZjhA6v32+zsV+TSqC0pp2Rxush2yUVTJ0dJTQ==
+  version "1.0.30001054"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz#7e82fc42d927980b0ce1426c4813df12381e1a75"
+  integrity sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==

 caw@^2.0.0, caw@^2.0.1:
  version "2.0.1"
@ -1263,9 +1263,9 @@ duplexer3@^0.1.4:
  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=

 electron-to-chromium@^1.3.413:
-  version "1.3.429"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.429.tgz#0d1ef6710ba84de3710615280c1f6f79c8205b47"
-  integrity sha512-YW8rXMJx33FalISp0uP0+AkvBx9gfzzQ4NotblGga6Z8ZX00bg2e5FNWV8fyDD/VN3WLhEtjFXNwzdJrdaAHEQ==
+  version "1.3.432"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz#3bf7b191978ff2e8bc3caf811bb52b1e9f9eab25"
+  integrity sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==

 elegant-spinner@^2.0.0:
  version "2.0.0"
@ -1514,9 +1514,9 @@ execa@^1.0.0:
    strip-eof "^1.0.0"

 execa@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.0.tgz#7f37d6ec17f09e6b8fc53288611695b6d12b9daf"
-  integrity sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.1.tgz#988488781f1f0238cd156f7aaede11c3e853b4c1"
+  integrity sha512-SCjM/zlBdOK8Q5TIjOn6iEHZaPHFsMoTxXQ2nvUvtPnuohz3H2dIozSg+etNR98dGoYUp2ENSKLL/XaMmbxVgw==
  dependencies:
    cross-spawn "^7.0.0"
    get-stream "^5.0.0"
@ -4523,9 +4523,9 @@ string_decoder@~1.1.1:
    safe-buffer "~5.1.0"

 stringify-entities@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.0.tgz#455abe501f8b7859ba5726a25a8872333c65b0a7"
-  integrity sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.1.tgz#32154b91286ab0869ab2c07696223bd23b6dbfc0"
+  integrity sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==
  dependencies:
    character-entities-html4 "^1.0.0"
    character-entities-legacy "^1.0.0"