tweaked styles for 1.20.5

public/css/theme-blurple-dyslexia.css

@@ -194,10 +194,10 @@
     --color-input-text: #d5dbe6;
     --color-input-background: #232933;
     --color-input-toggle-background: #454a57;
-    --color-input-border: #454a57;
+    --color-input-border: var(--color-secondary);
-    --color-input-border-hover: #505667;
+    --color-input-border-hover: var(--color-secondary-dark-1);
-    --color-header-wrapper: #2a2e3a;
+    --color-header-wrapper: #202430;
-    --color-header-wrapper-transparent: #2a2e3a00;
+    --color-header-wrapper-transparent: #20243000;
     --color-light: #00000028;
     --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
     --color-light-border: #ffffff28;
@@ -220,20 +220,19 @@
     --color-caret: var(--color-text);
     --color-reaction-bg: #ffffff12;
     --color-reaction-hover-bg: var(--color-primary-light-4);
-    --color-reaction-active-bg: var(--color-primary-alpha-40);
+    --color-reaction-active-bg: var(--color-primary-light-5);
     --color-tooltip-text: #ffffff;
     --color-tooltip-bg: #000000f0;
     --color-nav-bg: #232834;
     --color-nav-hover-bg: #383c47;
     --color-label-text: #dfe3ec;
-    --color-label-active-bg: #4c525e;
+    --color-label-bg: #7c84974b;
     --color-label-hover-bg: #7c8497a0;
     --color-label-active-bg: #7c8497ff;
     --color-accent: var(--color-primary-light-1);
     --color-small-accent: var(--color-primary-light-5);
     --color-active-line: #534d1b;
     accent-color: var(--color-accent);
-    --color-label-bg: #2A2E3A;
     color-scheme: dark;
   }
 }

public/css/theme-blurple.css

@@ -169,10 +169,10 @@
     --color-input-text: #d5dbe6;
     --color-input-background: #232933;
     --color-input-toggle-background: #454a57;
-    --color-input-border: #454a57;
+    --color-input-border: var(--color-secondary);
-    --color-input-border-hover: #505667;
+    --color-input-border-hover: var(--color-secondary-dark-1);
-    --color-header-wrapper: #2a2e3a;
+    --color-header-wrapper: #202430;
-    --color-header-wrapper-transparent: #2a2e3a00;
+    --color-header-wrapper-transparent: #20243000;
     --color-light: #00000028;
     --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
     --color-light-border: #ffffff28;
@@ -195,20 +195,19 @@
     --color-caret: var(--color-text);
     --color-reaction-bg: #ffffff12;
     --color-reaction-hover-bg: var(--color-primary-light-4);
-    --color-reaction-active-bg: var(--color-primary-alpha-40);
+    --color-reaction-active-bg: var(--color-primary-light-5);
     --color-tooltip-text: #ffffff;
     --color-tooltip-bg: #000000f0;
     --color-nav-bg: #232834;
     --color-nav-hover-bg: #383c47;
     --color-label-text: #dfe3ec;
-    --color-label-active-bg: #4c525e;
+    --color-label-bg: #7c84974b;
     --color-label-hover-bg: #7c8497a0;
     --color-label-active-bg: #7c8497ff;
     --color-accent: var(--color-primary-light-1);
     --color-small-accent: var(--color-primary-light-5);
     --color-active-line: #534d1b;
     accent-color: var(--color-accent);
-    --color-label-bg: #2A2E3A;
     color-scheme: dark;
   }
 }

templates/scss/partials/_blurple_roots.scss

@@ -169,10 +169,10 @@
         --color-input-text: #d5dbe6;
         --color-input-background: #232933;
         --color-input-toggle-background: #454a57;
-        --color-input-border: #454a57;
+        --color-input-border: var(--color-secondary);
-        --color-input-border-hover: #505667;
+        --color-input-border-hover: var(--color-secondary-dark-1);
-        --color-header-wrapper: #2a2e3a;
+        --color-header-wrapper: #202430;
-        --color-header-wrapper-transparent: #2a2e3a00;
+        --color-header-wrapper-transparent: #20243000;
         --color-light: #00000028;
         --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
         --color-light-border: #ffffff28;
@@ -195,20 +195,19 @@
         --color-caret: var(--color-text);
         --color-reaction-bg: #ffffff12;
         --color-reaction-hover-bg: var(--color-primary-light-4);
-        --color-reaction-active-bg: var(--color-primary-alpha-40);
+        --color-reaction-active-bg: var(--color-primary-light-5);
         --color-tooltip-text: #ffffff;
         --color-tooltip-bg: #000000f0;
         --color-nav-bg: #232834;
         --color-nav-hover-bg: #383c47;
         --color-label-text: #dfe3ec;
-        --color-label-active-bg: #4c525e;
+        --color-label-bg: #7c84974b;
         --color-label-hover-bg: #7c8497a0;
         --color-label-active-bg: #7c8497ff;
         --color-accent: var(--color-primary-light-1);
         --color-small-accent: var(--color-primary-light-5);
         --color-active-line: #534d1b;
         accent-color: var(--color-accent);
-        --color-label-bg: #2A2E3A;
         color-scheme: dark
     }
 }

templates/scss/partials/_theme_blurple.scss

@@ -2,309 +2,394 @@
 DO NOT INCLUEDE ANY :root(s) IN THIS FILE!!!
 **/
 @media (prefers-color-scheme: dark) {
-    .chroma {
+  .chroma {
-      background-color: var(--color-code-bg);
+      background-color: var(--color-code-bg)
-    }
+  }
-    .chroma .lntd {
+
+  .chroma .lntd {
       vertical-align: top;
       padding: 0;
       margin: 0;
-      border: 0;
+      border: 0
-    }
+  }
-    .chroma .lntable {
+
+  .chroma .lntable {
       border-spacing: 0;
       padding: 0;
       margin: 0;
       border: 0;
       width: auto;
       overflow: auto;
+      display: block
+  }
+
+  .chroma .hl {
       display: block;
-    }
+      width: 100%
-    .chroma .hl {
-      display: block;
-      width: 100%;
-    }
-    .chroma .lnt,
-    .chroma .ln {
-      margin-right: 0.4em;
-      padding: 0 0.4em;
-    }
-    .chroma .gs {
-      font-weight: var(--font-weight-semibold);
-    }
-    .chroma .gl {
-      text-decoration: underline;
-    }
   }
-  @media (prefers-color-scheme: dark) {
+
-    .chroma .bp {
+  .chroma .lnt,
-      color: #fabd2f;
+  .chroma .ln {
-    }
+      margin-right: .4em;
-    .chroma .c,
+      padding: 0 .4em
-    .chroma .c1,
+  }
-    .chroma .ch,
+
-    .chroma .cm {
+  .chroma .gs {
-      color: #777e94;
+      font-weight: var(--font-weight-semibold)
-    }
+  }
-    .chroma .cp {
+
-      color: #8ec07c;
+  .chroma .gl {
-    }
+      text-decoration: underline
-    .chroma .cpf {
+  }
-      color: #649bc4;
+}
-    }
+
-    .chroma .cs {
+@media (prefers-color-scheme: dark) {
-      color: #9075cd;
+  .chroma .bp {
-    }
+      color: #fabd2f
-    .chroma .dl {
+  }
-      color: #649bc4;
+
-    }
+  .chroma .c,
-    .chroma .gd {
+  .chroma .c1,
+  .chroma .ch,
+  .chroma .cm {
+      color: #777e94
+  }
+
+  .chroma .cp {
+      color: #8ec07c
+  }
+
+  .chroma .cpf {
+      color: #649bc4
+  }
+
+  .chroma .cs {
+      color: #9075cd
+  }
+
+  .chroma .dl {
+      color: #649bc4
+  }
+
+  .chroma .gd {
       color: #fff;
-      background-color: #5f3737;
+      background-color: #5f3737
-    }
+  }
-    .chroma .ge {
+
-      color: #ddee30;
+  .chroma .ge {
-    }
+      color: #ddee30
-    .chroma .gh {
+  }
-      color: #ffaa10;
+
-    }
+  .chroma .gh {
-    .chroma .gi {
+      color: #ffaa10
+  }
+
+  .chroma .gi {
       color: #fff;
-      background-color: #3a523a;
+      background-color: #3a523a
-    }
-    .chroma .go {
-      color: #777e94;
-    }
-    .chroma .gp {
-      color: #ebdbb2;
-    }
-    .chroma .gr {
-      color: #f43;
-    }
-    .chroma .gs {
-      color: #ebdbb2;
-    }
-    .chroma .gt {
-      color: #ff7540;
-    }
-    .chroma .gu {
-      color: #b8bb26;
-    }
-    .chroma .il {
-      color: #649bc4;
-    }
-    .chroma .k {
-      color: #ff7540;
-    }
-    .chroma .kc {
-      color: #649bc4;
-    }
-    .chroma .kd {
-      color: #ff7540;
-    }
-    .chroma .kn {
-      color: #ffaa10;
-    }
-    .chroma .kp {
-      color: #5f8700;
-    }
-    .chroma .kr {
-      color: #ff7540;
-    }
-    .chroma .kt {
-      color: #ff7b72;
-    }
-    .chroma .m,
-    .chroma .mb,
-    .chroma .mf,
-    .chroma .mh,
-    .chroma .mi,
-    .chroma .mo {
-      color: #649bc4;
-    }
-    .chroma .n {
-      color: #c9d1d9;
-    }
-    .chroma .na {
-      color: #b8bb26;
-    }
-    .chroma .nb {
-      color: #fabd2f;
-    }
-    .chroma .nc {
-      color: #ffaa10;
-    }
-    .chroma .nd {
-      color: #8ec07c;
-    }
-    .chroma .ne {
-      color: #ff7540;
-    }
-    .chroma .nf,
-    .chroma .ni {
-      color: #fabd2f;
-    }
-    .chroma .nl {
-      color: #ff7540;
-    }
-    .chroma .nn {
-      color: #c9d1d9;
-    }
-    .chroma .no {
-      color: #649bc4;
-    }
-    .chroma .nt {
-      color: #ff7540;
-    }
-    .chroma .nv {
-      color: #ebdbb2;
-    }
-    .chroma .nx {
-      color: #b6bac5;
-    }
-    .chroma .o {
-      color: #ff7540;
-    }
-    .chroma .ow {
-      color: #5f8700;
-    }
-    .chroma .p {
-      color: #d2d4db;
-    }
-    .chroma .s,
-    .chroma .s1,
-    .chroma .s2 {
-      color: #b8bb26;
-    }
-    .chroma .sa {
-      color: #649bc4;
-    }
-    .chroma .sb {
-      color: #b8bb26;
-    }
-    .chroma .sc {
-      color: #649bc4;
-    }
-    .chroma .sd {
-      color: #777e94;
-    }
-    .chroma .se {
-      color: #ff7540;
-    }
-    .chroma .sh {
-      color: #649bc4;
-    }
-    .chroma .si {
-      color: #ffaa10;
-    }
-    .chroma .sr {
-      color: #9075cd;
-    }
-    .chroma .ss {
-      color: #ff7540;
-    }
-    .chroma .sx {
-      color: #ffaa10;
-    }
-    .chroma .vc {
-      color: #ff7540;
-    }
-    .chroma .vg,
-    .chroma .vi {
-      color: #ffaa10;
-    }
-    .chroma .w {
-      color: #7f8699;
-    }
   }
-  @media (prefers-color-scheme: dark) {
+
-    .CodeMirror.cm-s-default .cm-property,
+  .chroma .go {
-    .CodeMirror.cm-s-paper .cm-property {
+      color: #777e94
-      color: #a0cc75;
-    }
-    .CodeMirror.cm-s-default .cm-header,
-    .CodeMirror.cm-s-paper .cm-header {
-      color: #9daccc;
-    }
-    .CodeMirror.cm-s-default .cm-quote,
-    .CodeMirror.cm-s-paper .cm-quote {
-      color: #090;
-    }
-    .CodeMirror.cm-s-default .cm-keyword,
-    .CodeMirror.cm-s-paper .cm-keyword {
-      color: #cc8a61;
-    }
-    .CodeMirror.cm-s-default .cm-atom,
-    .CodeMirror.cm-s-paper .cm-atom {
-      color: #ef5e77;
-    }
-    .CodeMirror.cm-s-default .cm-number,
-    .CodeMirror.cm-s-paper .cm-number {
-      color: #ff5656;
-    }
-    .CodeMirror.cm-s-default .cm-def,
-    .CodeMirror.cm-s-paper .cm-def {
-      color: #e4e4e4;
-    }
-    .CodeMirror.cm-s-default .cm-variable-2,
-    .CodeMirror.cm-s-paper .cm-variable-2 {
-      color: #00bdbf;
-    }
-    .CodeMirror.cm-s-default .cm-variable-3,
-    .CodeMirror.cm-s-paper .cm-variable-3 {
-      color: #085;
-    }
-    .CodeMirror.cm-s-default .cm-comment,
-    .CodeMirror.cm-s-paper .cm-comment {
-      color: #8e9ab3;
-    }
-    .CodeMirror.cm-s-default .cm-string,
-    .CodeMirror.cm-s-paper .cm-string {
-      color: #a77272;
-    }
-    .CodeMirror.cm-s-default .cm-string-2,
-    .CodeMirror.cm-s-paper .cm-string-2 {
-      color: #f50;
-    }
-    .CodeMirror.cm-s-default .cm-meta,
-    .CodeMirror.cm-s-paper .cm-meta,
-    .CodeMirror.cm-s-default .cm-qualifier,
-    .CodeMirror.cm-s-paper .cm-qualifier {
-      color: #ffb176;
-    }
-    .CodeMirror.cm-s-default .cm-builtin,
-    .CodeMirror.cm-s-paper .cm-builtin {
-      color: #b7c951;
-    }
-    .CodeMirror.cm-s-default .cm-bracket,
-    .CodeMirror.cm-s-paper .cm-bracket {
-      color: #997;
-    }
-    .CodeMirror.cm-s-default .cm-tag,
-    .CodeMirror.cm-s-paper .cm-tag {
-      color: #f1d273;
-    }
-    .CodeMirror.cm-s-default .cm-attribute,
-    .CodeMirror.cm-s-paper .cm-attribute {
-      color: #bfcc70;
-    }
-    .CodeMirror.cm-s-default .cm-hr,
-    .CodeMirror.cm-s-paper .cm-hr {
-      color: #999;
-    }
-    .CodeMirror.cm-s-default .cm-url,
-    .CodeMirror.cm-s-paper .cm-url {
-      color: #c5cfd0;
-    }
-    .CodeMirror.cm-s-default .cm-link,
-    .CodeMirror.cm-s-paper .cm-link {
-      color: #d8c792;
-    }
-    .CodeMirror.cm-s-default .cm-error,
-    .CodeMirror.cm-s-paper .cm-error {
-      color: #dbdbeb;
-    }
   }
+
+  .chroma .gp {
+      color: #ebdbb2
+  }
+
+  .chroma .gr {
+      color: #f43
+  }
+
+  .chroma .gs {
+      color: #ebdbb2
+  }
+
+  .chroma .gt {
+      color: #ff7540
+  }
+
+  .chroma .gu {
+      color: #b8bb26
+  }
+
+  .chroma .il {
+      color: #649bc4
+  }
+
+  .chroma .k {
+      color: #ff7540
+  }
+
+  .chroma .kc {
+      color: #649bc4
+  }
+
+  .chroma .kd {
+      color: #ff7540
+  }
+
+  .chroma .kn {
+      color: #ffaa10
+  }
+
+  .chroma .kp {
+      color: #5f8700
+  }
+
+  .chroma .kr {
+      color: #ff7540
+  }
+
+  .chroma .kt {
+      color: #ff7b72
+  }
+
+  .chroma .m,
+  .chroma .mb,
+  .chroma .mf,
+  .chroma .mh,
+  .chroma .mi,
+  .chroma .mo {
+      color: #649bc4
+  }
+
+  .chroma .n {
+      color: #c9d1d9
+  }
+
+  .chroma .na {
+      color: #b8bb26
+  }
+
+  .chroma .nb {
+      color: #fabd2f
+  }
+
+  .chroma .nc {
+      color: #ffaa10
+  }
+
+  .chroma .nd {
+      color: #8ec07c
+  }
+
+  .chroma .ne {
+      color: #ff7540
+  }
+
+  .chroma .nf,
+  .chroma .ni {
+      color: #fabd2f
+  }
+
+  .chroma .nl {
+      color: #ff7540
+  }
+
+  .chroma .nn {
+      color: #c9d1d9
+  }
+
+  .chroma .no {
+      color: #649bc4
+  }
+
+  .chroma .nt {
+      color: #ff7540
+  }
+
+  .chroma .nv {
+      color: #ebdbb2
+  }
+
+  .chroma .nx {
+      color: #b6bac5
+  }
+
+  .chroma .o {
+      color: #ff7540
+  }
+
+  .chroma .ow {
+      color: #5f8700
+  }
+
+  .chroma .p {
+      color: #d2d4db
+  }
+
+  .chroma .s,
+  .chroma .s1,
+  .chroma .s2 {
+      color: #b8bb26
+  }
+
+  .chroma .sa {
+      color: #649bc4
+  }
+
+  .chroma .sb {
+      color: #b8bb26
+  }
+
+  .chroma .sc {
+      color: #649bc4
+  }
+
+  .chroma .sd {
+      color: #777e94
+  }
+
+  .chroma .se {
+      color: #ff7540
+  }
+
+  .chroma .sh {
+      color: #649bc4
+  }
+
+  .chroma .si {
+      color: #ffaa10
+  }
+
+  .chroma .sr {
+      color: #9075cd
+  }
+
+  .chroma .ss {
+      color: #ff7540
+  }
+
+  .chroma .sx {
+      color: #ffaa10
+  }
+
+  .chroma .vc {
+      color: #ff7540
+  }
+
+  .chroma .vg,
+  .chroma .vi {
+      color: #ffaa10
+  }
+
+  .chroma .w {
+      color: #7f8699
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .CodeMirror.cm-s-default .cm-property,
+  .CodeMirror.cm-s-paper .cm-property {
+      color: #a0cc75
+  }
+
+  .CodeMirror.cm-s-default .cm-header,
+  .CodeMirror.cm-s-paper .cm-header {
+      color: #9daccc
+  }
+
+  .CodeMirror.cm-s-default .cm-quote,
+  .CodeMirror.cm-s-paper .cm-quote {
+      color: #090
+  }
+
+  .CodeMirror.cm-s-default .cm-keyword,
+  .CodeMirror.cm-s-paper .cm-keyword {
+      color: #cc8a61
+  }
+
+  .CodeMirror.cm-s-default .cm-atom,
+  .CodeMirror.cm-s-paper .cm-atom {
+      color: #ef5e77
+  }
+
+  .CodeMirror.cm-s-default .cm-number,
+  .CodeMirror.cm-s-paper .cm-number {
+      color: #ff5656
+  }
+
+  .CodeMirror.cm-s-default .cm-def,
+  .CodeMirror.cm-s-paper .cm-def {
+      color: #e4e4e4
+  }
+
+  .CodeMirror.cm-s-default .cm-variable-2,
+  .CodeMirror.cm-s-paper .cm-variable-2 {
+      color: #00bdbf
+  }
+
+  .CodeMirror.cm-s-default .cm-variable-3,
+  .CodeMirror.cm-s-paper .cm-variable-3 {
+      color: #085
+  }
+
+  .CodeMirror.cm-s-default .cm-comment,
+  .CodeMirror.cm-s-paper .cm-comment {
+      color: #8e9ab3
+  }
+
+  .CodeMirror.cm-s-default .cm-string,
+  .CodeMirror.cm-s-paper .cm-string {
+      color: #a77272
+  }
+
+  .CodeMirror.cm-s-default .cm-string-2,
+  .CodeMirror.cm-s-paper .cm-string-2 {
+      color: #f50
+  }
+
+  .CodeMirror.cm-s-default .cm-meta,
+  .CodeMirror.cm-s-paper .cm-meta,
+  .CodeMirror.cm-s-default .cm-qualifier,
+  .CodeMirror.cm-s-paper .cm-qualifier {
+      color: #ffb176
+  }
+
+  .CodeMirror.cm-s-default .cm-builtin,
+  .CodeMirror.cm-s-paper .cm-builtin {
+      color: #b7c951
+  }
+
+  .CodeMirror.cm-s-default .cm-bracket,
+  .CodeMirror.cm-s-paper .cm-bracket {
+      color: #997
+  }
+
+  .CodeMirror.cm-s-default .cm-tag,
+  .CodeMirror.cm-s-paper .cm-tag {
+      color: #f1d273
+  }
+
+  .CodeMirror.cm-s-default .cm-attribute,
+  .CodeMirror.cm-s-paper .cm-attribute {
+      color: #bfcc70
+  }
+
+  .CodeMirror.cm-s-default .cm-hr,
+  .CodeMirror.cm-s-paper .cm-hr {
+      color: #999
+  }
+
+  .CodeMirror.cm-s-default .cm-url,
+  .CodeMirror.cm-s-paper .cm-url {
+      color: #c5cfd0
+  }
+
+  .CodeMirror.cm-s-default .cm-link,
+  .CodeMirror.cm-s-paper .cm-link {
+      color: #d8c792
+  }
+
+  .CodeMirror.cm-s-default .cm-error,
+  .CodeMirror.cm-s-paper .cm-error {
+      color: #dbdbeb
+  }
+}
+
+
   .emoji[aria-label="check mark"],
   .emoji[aria-label="currency exchange"],
   .emoji[aria-label="TOP arrow"],
@@ -325,5 +410,5 @@ DO NOT INCLUEDE ANY :root(s) IN THIS FILE!!!
   .emoji[aria-label="paw prints"],
   .emoji[aria-label="musical note"],
   .emoji[aria-label="musical notes"] {
-    filter: invert(100%) hue-rotate(180deg);
+      filter: invert(100%) hue-rotate(180deg)
   }