diff --git a/public/css/theme-blurple-dyslexia.css b/public/css/theme-blurple-dyslexia.css index d3af812..c050d41 100644 --- a/public/css/theme-blurple-dyslexia.css +++ b/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-hover: #505667; - --color-header-wrapper: #2a2e3a; - --color-header-wrapper-transparent: #2a2e3a00; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #202430; + --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; } } diff --git a/public/css/theme-blurple.css b/public/css/theme-blurple.css index b4f2ec1..e7210ed 100644 --- a/public/css/theme-blurple.css +++ b/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-hover: #505667; - --color-header-wrapper: #2a2e3a; - --color-header-wrapper-transparent: #2a2e3a00; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #202430; + --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; } } diff --git a/templates/scss/partials/_blurple_roots.scss b/templates/scss/partials/_blurple_roots.scss index 46e50a7..ee83efe 100644 --- a/templates/scss/partials/_blurple_roots.scss +++ b/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-hover: #505667; - --color-header-wrapper: #2a2e3a; - --color-header-wrapper-transparent: #2a2e3a00; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #202430; + --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 } } \ No newline at end of file diff --git a/templates/scss/partials/_theme_blurple.scss b/templates/scss/partials/_theme_blurple.scss index c6351d3..7014540 100644 --- a/templates/scss/partials/_theme_blurple.scss +++ b/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 { - background-color: var(--color-code-bg); - } - .chroma .lntd { + .chroma { + background-color: var(--color-code-bg) + } + + .chroma .lntd { vertical-align: top; padding: 0; margin: 0; - border: 0; - } - .chroma .lntable { + border: 0 + } + + .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; + display: block + } + + .chroma .hl { display: block; - } - .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; - } + width: 100% } - @media (prefers-color-scheme: dark) { - .chroma .bp { - color: #fabd2f; - } - .chroma .c, - .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 { + + .chroma .lnt, + .chroma .ln { + margin-right: .4em; + padding: 0 .4em + } + + .chroma .gs { + font-weight: var(--font-weight-semibold) + } + + .chroma .gl { + text-decoration: underline + } +} + +@media (prefers-color-scheme: dark) { + .chroma .bp { + color: #fabd2f + } + + .chroma .c, + .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; - } - .chroma .ge { - color: #ddee30; - } - .chroma .gh { - color: #ffaa10; - } - .chroma .gi { + background-color: #5f3737 + } + + .chroma .ge { + color: #ddee30 + } + + .chroma .gh { + color: #ffaa10 + } + + .chroma .gi { color: #fff; - 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; - } + background-color: #3a523a } - @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; - } + + .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, + .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) } \ No newline at end of file