Mirror
/
tildes
mirror of https://gitlab.com/tildes/tildes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

CSS: add "-color" suffix to all custom properties 

I think it's best to be specific that all of these are colors, otherwise
there could be some confusing usages (and potential collisions) with
ones like --border.

Sorry @Bauke (and probably some others), I know this will most likely
mess with any changes you've already made to override these properties,
but I wanted to do it eventually and it's only going to get worse the
longer I wait.
merge-requests/126/merge
Deimos 4 years ago
parent
0cbe17f763
commit
0f4890dda5
2 changed files with 328 additions and 328 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 346
      tildes/scss/themes/_theme_base.scss
  2. 310
      tildes/scss/themes/_theme_mixins.scss

346
tildes/scss/themes/_theme_base.scss
View File

@ -12,26 +12,26 @@
// will fall back to the default value from `$default-theme` instead. // will fall back to the default value from `$default-theme` instead.
body { body {
color: var(--foreground-primary);
background-color: var(--background-secondary);
color: var(--foreground-primary-color);
background-color: var(--background-secondary-color);
* { * {
border-color: var(--border);
border-color: var(--border-color);
} }
a { a {
color: var(--link);
color: var(--link-color);
&:hover { &:hover {
color: var(--link-hover);
color: var(--link-hover-color);
} }
&:visited { &:visited {
color: var(--link-visited);
color: var(--link-visited-color);
} }
code { code {
color: var(--link);
color: var(--link-color);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -39,293 +39,293 @@ body {
} }
&:visited code { &:visited code {
color: var(--link-visited);
color: var(--link-visited-color);
} }
} }
a.link-user, a.link-user,
a.link-group { a.link-group {
&:visited { &:visited {
color: var(--link);
color: var(--link-color);
} }
} }
a.logged-in-user-alert { a.logged-in-user-alert {
color: var(--alert);
color: var(--alert-color);
&:visited { &:visited {
color: var(--alert);
color: var(--alert-color);
} }
} }
@include syntax-highlighting; @include syntax-highlighting;
blockquote { blockquote {
border-color: var(--foreground-highlight);
background-color: var(--background-secondary);
border-color: var(--foreground-highlight-color);
background-color: var(--background-secondary-color);
code, code,
pre { pre {
background-color: var(--background-primary);
background-color: var(--background-primary-color);
} }
} }
code, code,
pre { pre {
color: var(--foreground-highlight);
background-color: var(--background-secondary);
color: var(--foreground-highlight-color);
background-color: var(--background-secondary-color);
} }
main { main {
background-color: var(--background-primary);
background-color: var(--background-primary-color);
} }
meter { meter {
// Crazy styles to get this to work adapted from Spectre.css's _meters.scss // Crazy styles to get this to work adapted from Spectre.css's _meters.scss
background: var(--background-secondary);
background: var(--background-secondary-color);
&::-webkit-meter-bar { &::-webkit-meter-bar {
background: var(--background-secondary);
background: var(--background-secondary-color);
} }
// For some mysterious reason, none of the below rules can be merged // For some mysterious reason, none of the below rules can be merged
&::-webkit-meter-optimum-value { &::-webkit-meter-optimum-value {
background: var(--success);
background: var(--success-color);
} }
&:-moz-meter-optimum::-moz-meter-bar { &:-moz-meter-optimum::-moz-meter-bar {
background: var(--success);
background: var(--success-color);
} }
&::-webkit-meter-suboptimum-value { &::-webkit-meter-suboptimum-value {
background: var(--warning);
background: var(--warning-color);
} }
&:-moz-meter-sub-optimum::-moz-meter-bar { &:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--warning);
background: var(--warning-color);
} }
&::-webkit-meter-even-less-good-value { &::-webkit-meter-even-less-good-value {
background: var(--error);
background: var(--error-color);
} }
&:-moz-meter-sub-sub-optimum::-moz-meter-bar { &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--error);
background: var(--error-color);
} }
} }
tbody tr:nth-of-type(2n + 1) { tbody tr:nth-of-type(2n + 1) {
background-color: var(--background-secondary);
background-color: var(--background-secondary-color);
} }
.table td { .table td {
border-bottom-color: var(--border);
border-bottom-color: var(--border-color);
} }
.table th { .table th {
border-bottom-color: var(--foreground-highlight);
border-bottom-color: var(--foreground-highlight-color);
} }
.form-autocomplete { .form-autocomplete {
.menu { .menu {
background-color: var(--background-secondary);
background-color: var(--background-secondary-color);
} }
} }
.breadcrumb .breadcrumb-item { .breadcrumb .breadcrumb-item {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
&:not(:last-child) { &:not(:last-child) {
a { a {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
} }
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
} }
&:last-child { &:last-child {
a { a {
color: var(--link);
color: var(--link-color);
} }
} }
} }
.btn { .btn {
color: var(--button);
color: var(--button-color);
background-color: transparent; background-color: transparent;
border-color: var(--button);
border-color: var(--button-color);
&:hover { &:hover {
background-color: var(--button-transparent);
background-color: var(--button-transparent-color);
} }
} }
.btn-comment-collapse:hover { .btn-comment-collapse:hover {
border-color: var(--border);
border-color: var(--border-color);
} }
.btn-light { .btn-light {
color: var(--foreground-secondary);
border-color: var(--border);
color: var(--foreground-secondary-color);
border-color: var(--border-color);
&:hover { &:hover {
color: var(--link);
color: var(--link-color);
} }
} }
.btn.btn-link { .btn.btn-link {
color: var(--link);
color: var(--link-color);
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
&:hover { &:hover {
color: var(--link);
color: var(--link-color);
} }
} }
.btn.btn-primary { .btn.btn-primary {
color: var(--button-by-brightness);
color: var(--button-by-brightness-color);
background-color: var(--button);
border-color: var(--button);
background-color: var(--button-color);
border-color: var(--button-color);
&:hover { &:hover {
background-color: var(--button-darkened-10);
border-color: var(--button-darkened-10);
background-color: var(--button-darkened-10-color);
border-color: var(--button-darkened-10-color);
} }
&:visited { &:visited {
color: var(--button-by-brightness);
color: var(--button-by-brightness-color);
} }
} }
.btn-used { .btn-used {
color: var(--button-used);
border-color: var(--button-used-darkened-3);
color: var(--button-used-color);
border-color: var(--button-used-darkened-3-color);
&:hover { &:hover {
background-color: var(--button-used-darkened-3);
border-color: var(--button-used-darkened-8);
color: var(--white);
background-color: var(--button-used-darkened-3-color);
border-color: var(--button-used-darkened-8-color);
color: var(--white-color);
} }
} }
.btn-post-action { .btn-post-action {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
&:hover { &:hover {
color: var(--foreground-extreme);
color: var(--foreground-extreme-color);
} }
} }
.btn-post-action-used { .btn-post-action-used {
color: var(--button-used);
color: var(--button-used-color);
} }
.btn-comment-label-exemplary { .btn-comment-label-exemplary {
@include label-button(var(--comment-label-exemplary));
@include label-button(var(--comment-label-exemplary-color));
} }
.btn-comment-label-joke { .btn-comment-label-joke {
@include label-button(var(--comment-label-joke));
@include label-button(var(--comment-label-joke-color));
} }
.btn-comment-label-noise { .btn-comment-label-noise {
@include label-button(var(--comment-label-noise));
@include label-button(var(--comment-label-noise-color));
} }
.btn-comment-label-offtopic { .btn-comment-label-offtopic {
@include label-button(var(--comment-label-offtopic));
@include label-button(var(--comment-label-offtopic-color));
} }
.btn-comment-label-malice { .btn-comment-label-malice {
@include label-button(var(--comment-label-malice));
@include label-button(var(--comment-label-malice-color));
} }
.chip { .chip {
background-color: var(--background-secondary);
color: var(--foreground-highlight);
background-color: var(--background-secondary-color);
color: var(--foreground-highlight-color);
&.active { &.active {
background-color: var(--button);
color: var(--button-by-brightness);
background-color: var(--button-color);
color: var(--button-by-brightness-color);
.btn { .btn {
color: var(--button-by-brightness);
color: var(--button-by-brightness-color);
} }
} }
&.error { &.error {
background-color: var(--error);
background-color: var(--error-color);
color: var(--error-by-brightness);
color: var(--error-by-brightness-color);
.btn { .btn {
color: var(--error-by-brightness);
color: var(--error-by-brightness-color);
} }
} }
} }
.comment-branch-counter { .comment-branch-counter {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.comment-nav-link, .comment-nav-link,
.comment-nav-link:visited { .comment-nav-link:visited {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.comment-removed-warning { .comment-removed-warning {
color: var(--warning);
color: var(--warning-color);
} }
.label-comment-exemplary { .label-comment-exemplary {
@include theme-special-label( @include theme-special-label(
var(--background-label-exemplary),
var(--foreground-label-exemplary),
var(--comment-label-exemplary)
var(--background-label-exemplary-color),
var(--foreground-label-exemplary-color),
var(--comment-label-exemplary-color)
); );
} }
.label-comment-joke { .label-comment-joke {
@include theme-special-label( @include theme-special-label(
var(--background-label-joke),
var(--foreground-label-joke),
var(--comment-label-joke)
var(--background-label-joke-color),
var(--foreground-label-joke-color),
var(--comment-label-joke-color)
); );
} }
.label-comment-noise { .label-comment-noise {
@include theme-special-label( @include theme-special-label(
var(--background-label-noise),
var(--foreground-label-noise),
var(--comment-label-noise)
var(--background-label-noise-color),
var(--foreground-label-noise-color),
var(--comment-label-noise-color)
); );
} }
.label-comment-offtopic { .label-comment-offtopic {
@include theme-special-label( @include theme-special-label(
var(--background-label-offtopic),
var(--foreground-label-offtopic),
var(--comment-label-offtopic)
var(--background-label-offtopic-color),
var(--foreground-label-offtopic-color),
var(--comment-label-offtopic-color)
); );
} }
.label-comment-malice { .label-comment-malice {
@include theme-special-label( @include theme-special-label(
var(--background-label-malice),
var(--foreground-label-malice),
var(--comment-label-malice)
var(--background-label-malice-color),
var(--foreground-label-malice-color),
var(--comment-label-malice-color)
); );
} }
%collapsed-theme { %collapsed-theme {
.comment-header { .comment-header {
background-color: var(--background-primary);
background-color: var(--background-primary-color);
} }
} }
@ -340,37 +340,37 @@ body {
} }
.comment-header { .comment-header {
color: var(--foreground-highlight);
background-color: var(--background-secondary);
color: var(--foreground-highlight-color);
background-color: var(--background-secondary-color);
} }
.comment:target > .comment-itself { .comment:target > .comment-itself {
border-left-color: var(--stripe-target);
border-left-color: var(--stripe-target-color);
} }
.divider { .divider {
border-color: var(--border);
border-color: var(--border-color);
} }
.divider[data-content]::after { .divider[data-content]::after {
color: var(--foreground-primary);
background-color: var(--background-primary);
color: var(--foreground-primary-color);
background-color: var(--background-primary-color);
} }
.donation-goal-meter-over-goal { .donation-goal-meter-over-goal {
background: var(--comment-label-exemplary);
background: var(--comment-label-exemplary-color);
&::-webkit-meter-bar { &::-webkit-meter-bar {
background: var(--comment-label-exemplary);
background: var(--comment-label-exemplary-color);
} }
} }
.dropdown .menu .btn-post-action:hover { .dropdown .menu .btn-post-action:hover {
background-color: var(--background-secondary);
background-color: var(--background-secondary-color);
} }
.empty-subtitle { .empty-subtitle {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.form-autocomplete .form-autocomplete-input .form-input { .form-autocomplete .form-autocomplete-input .form-input {
@ -379,45 +379,45 @@ body {
.form-input, .form-input,
.form-input[readonly] { .form-input[readonly] {
color: var(--foreground-primary);
background-color: var(--background-input);
border-color: var(--border);
color: var(--foreground-primary-color);
background-color: var(--background-input-color);
border-color: var(--border-color);
} }
// error colors for :invalid inputs, using same approach as Spectre // error colors for :invalid inputs, using same approach as Spectre
.form-input:not(:placeholder-shown):invalid { .form-input:not(:placeholder-shown):invalid {
border-color: var(--error);
border-color: var(--error-color);
&:focus { &:focus {
box-shadow: 0 0 0 1px var(--error);
box-shadow: 0 0 0 1px var(--error-color);
} }
+ .form-input-hint { + .form-input-hint {
color: var(--error);
color: var(--error-color);
} }
} }
.form-markdown-preview { .form-markdown-preview {
border-color: var(--border);
border-color: var(--border-color);
} }
.form-select { .form-select {
border-color: var(--border);
border-color: var(--border-color);
} }
.form-select:not([multiple]):not([size]) { .form-select:not([multiple]):not([size]) {
background-color: var(--background-input);
background-color: var(--background-input-color);
} }
.group-list-item-not-subscribed { .group-list-item-not-subscribed {
a.link-group { a.link-group {
color: var(--warning);
color: var(--warning-color);
} }
} }
.input-group-addon { .input-group-addon {
background-color: var(--background-secondary);
color: var(--foreground-highlight);
background-color: var(--background-secondary-color);
color: var(--foreground-highlight-color);
} }
.label-topic-tag { .label-topic-tag {
@ -426,133 +426,133 @@ body {
a, a,
a:hover, a:hover,
a:visited { a:visited {
color: var(--foreground-primary);
color: var(--foreground-primary-color);
} }
} }
.label-topic-tag-nsfw, .label-topic-tag-nsfw,
.label-topic-tag[class*="label-topic-tag-nsfw-"] { .label-topic-tag[class*="label-topic-tag-nsfw-"] {
@include theme-special-label( @include theme-special-label(
var(--topic-tag-nsfw),
var(--topic-tag-nsfw-foreground),
var(--topic-tag-nsfw-border)
var(--topic-tag-nsfw-color),
var(--topic-tag-nsfw-foreground-color),
var(--topic-tag-nsfw-border-color)
); );
} }
.label-topic-tag-spoiler, .label-topic-tag-spoiler,
.label-topic-tag[class*="label-topic-tag-spoiler-"] { .label-topic-tag[class*="label-topic-tag-spoiler-"] {
@include theme-special-label( @include theme-special-label(
var(--topic-tag-spoiler),
var(--topic-tag-spoiler-foreground),
var(--topic-tag-spoiler-border)
var(--topic-tag-spoiler-color),
var(--topic-tag-spoiler-foreground-color),
var(--topic-tag-spoiler-border-color)
); );
} }
.link-no-visited-color:visited { .link-no-visited-color:visited {
color: var(--link);
color: var(--link-color);
} }
.logged-in-user-username, .logged-in-user-username,
.logged-in-user-username:visited { .logged-in-user-username:visited {
color: var(--foreground-primary);
color: var(--foreground-primary-color);
} }
.menu { .menu {
background-color: var(--background-primary);
border-color: var(--border);
background-color: var(--background-primary-color);
border-color: var(--border-color);
} }
.message { .message {
header { header {
color: var(--foreground-highlight);
background-color: var(--background-secondary);
color: var(--foreground-highlight-color);
background-color: var(--background-secondary-color);
} }
} }
.nav .nav-item { .nav .nav-item {
a { a {
color: var(--link);
color: var(--link-color);
&:hover { &:hover {
color: var(--link-hover);
color: var(--link-hover-color);
} }
} }
&.active a { &.active a {
color: var(--link);
color: var(--link-color);
} }
} }
.settings-list { .settings-list {
a:visited { a:visited {
color: var(--link);
color: var(--link-color);
} }
} }
.sidebar-controls { .sidebar-controls {
background-color: var(--background-secondary);
background-color: var(--background-secondary-color);
} }
#sidebar { #sidebar {
background-color: var(--background-primary);
border-left-color: var(--border);
background-color: var(--background-primary-color);
border-left-color: var(--border-color);
} }
#site-footer a:visited { #site-footer a:visited {
color: var(--link);
color: var(--link-color);
} }
.site-header-context { .site-header-context {
a, a,
a:visited { a:visited {
color: var(--foreground-primary);
color: var(--foreground-primary-color);
} }
.toast a, .toast a,
.toast a:visited { .toast a:visited {
color: var(--link);
color: var(--link-color);
} }
} }
.site-header-logo, .site-header-logo,
.site-header-logo:visited { .site-header-logo:visited {
color: var(--foreground-highlight);
color: var(--foreground-highlight-color);
} }
.site-header-sidebar-button.badge[data-badge]::after { .site-header-sidebar-button.badge[data-badge]::after {
background-color: var(--alert);
background-color: var(--alert-color);
} }
.tab { .tab {
border-color: var(--border);
border-color: var(--border-color);
} }
.tab .tab-item { .tab .tab-item {
a { a {
color: var(--foreground-primary);
color: var(--foreground-primary-color);
} }
&.active a, &.active a,
&.active button { &.active button {
color: var(--link);
border-bottom-color: var(--link);
color: var(--link-color);
border-bottom-color: var(--link-color);
} }
} }
.text-error { .text-error {
color: var(--error);
color: var(--error-color);
} }
.text-link { .text-link {
color: var(--link);
color: var(--link-color);
} }
.text-secondary { .text-secondary {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.text-warning { .text-warning {
color: var(--warning);
color: var(--warning-color);
} }
.text-wiki { .text-wiki {
@ -563,76 +563,76 @@ body {
h5, h5,
h6 { h6 {
a { a {
color: var(--foreground-highlight);
color: var(--foreground-highlight-color);
} }
} }
} }
.toast { .toast {
color: var(--foreground-highlight);
background-color: var(--background-secondary);
color: var(--foreground-highlight-color);
background-color: var(--background-secondary-color);
a { a {
color: var(--link);
color: var(--link-color);
} }
} }
.toast.toast-warning { .toast.toast-warning {
border-color: var(--warning);
color: var(--warning-foreground);
background-color: var(--warning-background);
border-color: var(--warning-color);
color: var(--warning-foreground-color);
background-color: var(--warning-background-color);
} }
.topic-actions { .topic-actions {
.btn-post-action { .btn-post-action {
color: var(--link);
color: var(--link-color);
} }
.btn-post-action-used { .btn-post-action-used {
color: var(--link-visited);
color: var(--link-visited-color);
} }
} }
.topic-listing { .topic-listing {
> li:nth-of-type(2n) { > li:nth-of-type(2n) {
color: var(--foreground-mixed);
background-color: var(--background-mixed);
color: var(--foreground-mixed-color);
background-color: var(--background-mixed-color);
} }
} }
.topic-full-byline { .topic-full-byline {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.topic-full-tags { .topic-full-tags {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
a { a {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
} }
.topic-info-comments-new { .topic-info-comments-new {
color: var(--alert);
color: var(--alert-color);
} }
.topic-info-source-scheduled { .topic-info-source-scheduled {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.topic-log-entry-time { .topic-log-entry-time {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.topic-text-excerpt { .topic-text-excerpt {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
summary::after { summary::after {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
&[open] { &[open] {
color: var(--foreground-primary);
color: var(--foreground-primary-color);
} }
} }
@ -640,48 +640,48 @@ body {
border-color: transparent; border-color: transparent;
&:hover { &:hover {
background-color: var(--button-darkened-3);
border-color: var(--button-darkened-8);
background-color: var(--button-darkened-3-color);
border-color: var(--button-darkened-8-color);
} }
} }
.is-comment-deleted, .is-comment-deleted,
.is-comment-removed { .is-comment-removed {
color: var(--foreground-secondary);
color: var(--foreground-secondary-color);
} }
.is-comment-mine > .comment-itself { .is-comment-mine > .comment-itself {
border-left-color: var(--stripe-mine);
border-left-color: var(--stripe-mine-color);
} }
.is-comment-exemplary { .is-comment-exemplary {
> .comment-itself { > .comment-itself {
border-left-color: var(--comment-label-exemplary);
border-left-color: var(--comment-label-exemplary-color);
} }
} }
.is-comment-new { .is-comment-new {
> .comment-itself { > .comment-itself {
border-left-color: var(--alert);
border-left-color: var(--alert-color);
} }
.comment-text { .comment-text {
color: var(--foreground-highlight);
color: var(--foreground-highlight-color);
} }
} }
.is-message-mine, .is-message-mine,
.is-topic-mine { .is-topic-mine {
border-left-color: var(--stripe-mine);
border-left-color: var(--stripe-mine-color);
} }
.is-topic-official { .is-topic-official {
border-left-color: var(--alert);
border-left-color: var(--alert-color);
h1 { h1 {
a, a,
a:visited { a:visited {
color: var(--alert);
color: var(--alert-color);
} }
} }
} }

310
tildes/scss/themes/_theme_mixins.scss
View File

@ -11,7 +11,7 @@
&.btn-used:hover { &.btn-used:hover {
background-color: $color; background-color: $color;
color: var(--white);
color: var(--white-color);
} }
} }
@ -199,355 +199,355 @@
// When creating CSS custom properties and using any of Sass' capabilities // When creating CSS custom properties and using any of Sass' capabilities
// you'll have to interpolate it with the Sass syntax `#{...}` as seen below. // you'll have to interpolate it with the Sass syntax `#{...}` as seen below.
--alert: #{map-get($theme, "alert")};
--alert-color: #{map-get($theme, "alert")};
--background-input: #{map-get($theme, "background-input")};
--background-mixed:
--background-input-color: #{map-get($theme, "background-input")};
--background-mixed-color:
#{mix( #{mix(
map-get($theme, "background-primary"), map-get($theme, "background-primary"),
map-get($theme, "background-secondary") map-get($theme, "background-secondary")
)}; )};
--background-primary: #{map-get($theme, "background-primary")};
--background-secondary: #{map-get($theme, "background-secondary")};
--background-primary-color: #{map-get($theme, "background-primary")};
--background-secondary-color: #{map-get($theme, "background-secondary")};
--border: #{map-get($theme, "border")};
--border-color: #{map-get($theme, "border")};
--button: #{map-get($theme, "button")};
--button-by-brightness:
--button-color: #{map-get($theme, "button")};
--button-by-brightness-color:
#{choose-by-brightness( #{choose-by-brightness(
map-get($theme, "button"), map-get($theme, "button"),
map-get($theme, "black"), map-get($theme, "black"),
map-get($theme, "white") map-get($theme, "white")
)}; )};
--button-transparent: #{rgba(map-get($theme, "button"), 0.2)};
--button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)};
--button-darkened-3: #{darken(map-get($theme, "button"), 3%)};
--button-darkened-8: #{darken(map-get($theme, "button"), 8%)};
--button-darkened-10: #{darken(map-get($theme, "button"), 10%)};
--button-darkened-3-color: #{darken(map-get($theme, "button"), 3%)};
--button-darkened-8-color: #{darken(map-get($theme, "button"), 8%)};
--button-darkened-10-color: #{darken(map-get($theme, "button"), 10%)};
--button-used: #{map-get($theme, "button-used")};
--button-used-darkened-3: #{darken(map-get($theme, "button-used"), 3%)};
--button-used-darkened-8: #{darken(map-get($theme, "button-used"), 8%)};
--button-used-color: #{map-get($theme, "button-used")};
--button-used-darkened-3-color: #{darken(map-get($theme, "button-used"), 3%)};
--button-used-darkened-8-color: #{darken(map-get($theme, "button-used"), 8%)};
--error: #{map-get($theme, "error")};
--error-by-brightness:
--error-color: #{map-get($theme, "error")};
--error-by-brightness-color:
#{choose-by-brightness( #{choose-by-brightness(
map-get($theme, "error"), map-get($theme, "error"),
map-get($theme, "black"), map-get($theme, "black"),
map-get($theme, "white") map-get($theme, "white")
)}; )};
--foreground-extreme:
--foreground-extreme-color:
#{choose-by-brightness( #{choose-by-brightness(
map-get($theme, "background-primary"), map-get($theme, "background-primary"),
map-get($theme, "black"), map-get($theme, "black"),
map-get($theme, "white") map-get($theme, "white")
)}; )};
--foreground-highlight: #{map-get($theme, "foreground-highlight")};
--foreground-mixed:
--foreground-highlight-color: #{map-get($theme, "foreground-highlight")};
--foreground-mixed-color:
#{mix( #{mix(
map-get($theme, "foreground-primary"), map-get($theme, "foreground-primary"),
map-get($theme, "foreground-highlight") map-get($theme, "foreground-highlight")
)}; )};
--foreground-primary: #{map-get($theme, "foreground-primary")};
--foreground-secondary: #{map-get($theme, "foreground-secondary")};
--foreground-primary-color: #{map-get($theme, "foreground-primary")};
--foreground-secondary-color: #{map-get($theme, "foreground-secondary")};
--link: #{map-get($theme, "link")};
--link-hover: #{darken(map-get($theme, "link"), 5%)};
--link-visited: #{map-get($theme, "link-visited")};
--link-color: #{map-get($theme, "link")};
--link-hover-color: #{darken(map-get($theme, "link"), 5%)};
--link-visited-color: #{map-get($theme, "link-visited")};
--stripe-mine: #{map-get($theme, "stripe-mine")};
--stripe-target: #{map-get($theme, "stripe-target")};
--stripe-mine-color: #{map-get($theme, "stripe-mine")};
--stripe-target-color: #{map-get($theme, "stripe-target")};
--success: #{map-get($theme, "success")};
--success-color: #{map-get($theme, "success")};
--syntax-builtin: #{map-get($theme, "syntax-builtin")};
--syntax-comment: #{map-get($theme, "syntax-comment")};
--syntax-constant: #{map-get($theme, "syntax-constant")};
--syntax-keyword: #{map-get($theme, "syntax-keyword")};
--syntax-literal: #{map-get($theme, "syntax-literal")};
--syntax-string: #{map-get($theme, "syntax-string")};
--syntax-builtin-color: #{map-get($theme, "syntax-builtin")};
--syntax-comment-color: #{map-get($theme, "syntax-comment")};
--syntax-constant-color: #{map-get($theme, "syntax-constant")};
--syntax-keyword-color: #{map-get($theme, "syntax-keyword")};
--syntax-literal-color: #{map-get($theme, "syntax-literal")};
--syntax-string-color: #{map-get($theme, "syntax-string")};
// Colors for the special topic tags // Colors for the special topic tags
@if $is-light { @if $is-light {
--topic-tag-nsfw: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-foreground: #{map-get($theme, "white")};
--topic-tag-nsfw-border: transparent;
--topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-foreground-color: #{map-get($theme, "white")};
--topic-tag-nsfw-border-color: transparent;
--topic-tag-spoiler: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-foreground: #{map-get($theme, "white")};
--topic-tag-spoiler-border: transparent;
--topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-foreground-color: #{map-get($theme, "white")};
--topic-tag-spoiler-border-color: transparent;
} @else { } @else {
--topic-tag-nsfw: transparent;
--topic-tag-nsfw-foreground: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-border: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-color: transparent;
--topic-tag-nsfw-foreground-color: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-border-color: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-spoiler: transparent;
--topic-tag-spoiler-foreground: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-border: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-color: transparent;
--topic-tag-spoiler-foreground-color: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-border-color: #{map-get($theme, "topic-tag-spoiler")};
} }
--warning: #{map-get($theme, "warning")};
--warning-color: #{map-get($theme, "warning")};
// Colors for warning toasts // Colors for warning toasts
@if $is-light { @if $is-light {
--warning-background: #{rgba(map-get($theme, "warning"), 0.9)};
--warning-foreground: #{map-get($theme, "black")};
--warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)};
--warning-foreground-color: #{map-get($theme, "black")};
} @else { } @else {
--warning-background: transparent;
--warning-foreground: #{map-get($theme, "warning")};
--warning-background-color: transparent;
--warning-foreground-color: #{map-get($theme, "warning")};
} }
// Colors that were hardcoded in previously. // Colors that were hardcoded in previously.
--white: #{map-get($theme, "white")};
--white-color: #{map-get($theme, "white")};
// Variables for the comment labels. // Variables for the comment labels.
@if $is-light { @if $is-light {
--background-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
--background-label-joke: #{map-get($theme, "comment-label-joke")};
--background-label-noise: #{map-get($theme, "comment-label-noise")};
--background-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
--background-label-malice: #{map-get($theme, "comment-label-malice")};
--comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
--comment-label-joke: #{map-get($theme, "comment-label-joke")};
--comment-label-noise: #{map-get($theme, "comment-label-noise")};
--comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
--comment-label-malice: #{map-get($theme, "comment-label-malice")};
--foreground-label-exemplary: #{map-get($theme, "white")};
--foreground-label-joke: #{map-get($theme, "white")};
--foreground-label-noise: #{map-get($theme, "white")};
--foreground-label-offtopic: #{map-get($theme, "white")};
--foreground-label-malice: #{map-get($theme, "white")};
--background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
--background-label-joke-color: #{map-get($theme, "comment-label-joke")};
--background-label-noise-color: #{map-get($theme, "comment-label-noise")};
--background-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
--background-label-malice-color: #{map-get($theme, "comment-label-malice")};
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
--foreground-label-exemplary-color: #{map-get($theme, "white")};
--foreground-label-joke-color: #{map-get($theme, "white")};
--foreground-label-noise-color: #{map-get($theme, "white")};
--foreground-label-offtopic-color: #{map-get($theme, "white")};
--foreground-label-malice-color: #{map-get($theme, "white")};
} @else { } @else {
--background-label-exemplary: transparent;
--background-label-joke: transparent;
--background-label-noise: transparent;
--background-label-offtopic: transparent;
--background-label-malice: transparent;
--comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
--comment-label-joke: #{map-get($theme, "comment-label-joke")};
--comment-label-noise: #{map-get($theme, "comment-label-noise")};
--comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
--comment-label-malice: #{map-get($theme, "comment-label-malice")};
--foreground-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
--foreground-label-joke: #{map-get($theme, "comment-label-joke")};
--foreground-label-noise: #{map-get($theme, "comment-label-noise")};
--foreground-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
--foreground-label-malice: #{map-get($theme, "comment-label-malice")};
--background-label-exemplary-color: transparent;
--background-label-joke-color: transparent;
--background-label-noise-color: transparent;
--background-label-offtopic-color: transparent;
--background-label-malice-color: transparent;
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
--foreground-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
--foreground-label-joke-color: #{map-get($theme, "comment-label-joke")};
--foreground-label-noise-color: #{map-get($theme, "comment-label-noise")};
--foreground-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
--foreground-label-malice-color: #{map-get($theme, "comment-label-malice")};
} }
} }
@mixin syntax-highlighting { @mixin syntax-highlighting {
.highlight { .highlight {
.syntax-c { .syntax-c {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment } // Comment
.syntax-err { .syntax-err {
color: var(--foreground);
color: var(--foreground-color);
} // Error } // Error
.syntax-g { .syntax-g {
color: var(--foreground);
color: var(--foreground-color);
} // Generic } // Generic
.syntax-k { .syntax-k {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword } // Keyword
.syntax-l { .syntax-l {
color: var(--foreground);
color: var(--foreground-color);
} // Literal } // Literal
.syntax-n { .syntax-n {
color: var(--foreground);
color: var(--foreground-color);
} // Name } // Name
.syntax-o { .syntax-o {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Operator } // Operator
.syntax-x { .syntax-x {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Other } // Other
.syntax-p { .syntax-p {
color: var(--foreground);
color: var(--foreground-color);
} // Punctuation } // Punctuation
.syntax-cm { .syntax-cm {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Multiline } // Comment.Multiline
.syntax-cp { .syntax-cp {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Preproc } // Comment.Preproc
.syntax-c1 { .syntax-c1 {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Single } // Comment.Single
.syntax-cs { .syntax-cs {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Special } // Comment.Special
.syntax-gd { .syntax-gd {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Generic.Deleted } // Generic.Deleted
.syntax-ge { .syntax-ge {
color: var(--foreground);
color: var(--foreground-color);
font-style: italic; font-style: italic;
} // Generic.Emph } // Generic.Emph
.syntax-gr { .syntax-gr {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Error } // Generic.Error
.syntax-gh { .syntax-gh {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Heading } // Generic.Heading
.syntax-gi { .syntax-gi {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Generic.Inserted } // Generic.Inserted
.syntax-go { .syntax-go {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Output } // Generic.Output
.syntax-gp { .syntax-gp {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Prompt } // Generic.Prompt
.syntax-gs { .syntax-gs {
color: var(--foreground);
color: var(--foreground-color);
font-weight: bold; font-weight: bold;
} // Generic.Strong } // Generic.Strong
.syntax-gu { .syntax-gu {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Subheading } // Generic.Subheading
.syntax-gt { .syntax-gt {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Traceback } // Generic.Traceback
.syntax-kc { .syntax-kc {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Keyword.Constant } // Keyword.Constant
.syntax-kd { .syntax-kd {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Declaration } // Keyword.Declaration
.syntax-kn { .syntax-kn {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Keyword.Namespace } // Keyword.Namespace
.syntax-kp { .syntax-kp {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Keyword.Pseudo } // Keyword.Pseudo
.syntax-kr { .syntax-kr {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Reserved } // Keyword.Reserved
.syntax-kt { .syntax-kt {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Type } // Keyword.Type
.syntax-ld { .syntax-ld {
color: var(--foreground);
color: var(--foreground-color);
} // Literal.Date } // Literal.Date
.syntax-m { .syntax-m {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.Number } // Literal.Number
.syntax-s { .syntax-s {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String } // Literal.String
.syntax-na { .syntax-na {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Attribute } // Name.Attribute
.syntax-nb { .syntax-nb {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Builtin } // Name.Builtin
.syntax-nc { .syntax-nc {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Class } // Name.Class
.syntax-no { .syntax-no {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Name.Constant } // Name.Constant
.syntax-nd { .syntax-nd {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Decorator } // Name.Decorator
.syntax-ni { .syntax-ni {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Entity } // Name.Entity
.syntax-ne { .syntax-ne {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Exception } // Name.Exception
.syntax-nf { .syntax-nf {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Function } // Name.Function
.syntax-nl { .syntax-nl {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Label } // Name.Label
.syntax-nn { .syntax-nn {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Namespace } // Name.Namespace
.syntax-nx { .syntax-nx {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Other } // Name.Other
.syntax-py { .syntax-py {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Property } // Name.Property
.syntax-nt { .syntax-nt {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Tag } // Name.Tag
.syntax-nv { .syntax-nv {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable } // Name.Variable
.syntax-ow { .syntax-ow {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Operator.Word } // Operator.Word
.syntax-w { .syntax-w {
color: var(--foreground);
color: var(--foreground-color);
} // Text.Whitespace } // Text.Whitespace
.syntax-mf { .syntax-mf {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Float } // Literal.Number.Float
.syntax-mh { .syntax-mh {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Hex } // Literal.Number.Hex
.syntax-mi { .syntax-mi {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Integer } // Literal.Number.Integer
.syntax-mo { .syntax-mo {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Oct } // Literal.Number.Oct
.syntax-sb { .syntax-sb {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Backtick } // Literal.String.Backtick
.syntax-sc { .syntax-sc {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Char } // Literal.String.Char
.syntax-sd { .syntax-sd {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String.Doc } // Literal.String.Doc
.syntax-s2 { .syntax-s2 {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Double } // Literal.String.Double
.syntax-se { .syntax-se {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Literal.String.Escape } // Literal.String.Escape
.syntax-sh { .syntax-sh {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String.Heredoc } // Literal.String.Heredoc
.syntax-si { .syntax-si {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Interpol } // Literal.String.Interpol
.syntax-sx { .syntax-sx {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Other } // Literal.String.Other
.syntax-sr { .syntax-sr {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Literal.String.Regex } // Literal.String.Regex
.syntax-s1 { .syntax-s1 {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Single } // Literal.String.Single
.syntax-ss { .syntax-ss {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Symbol } // Literal.String.Symbol
.syntax-bp { .syntax-bp {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Builtin.Pseudo } // Name.Builtin.Pseudo
.syntax-vc { .syntax-vc {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Class } // Name.Variable.Class
.syntax-vg { .syntax-vg {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Global } // Name.Variable.Global
.syntax-vi { .syntax-vi {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Instance } // Name.Variable.Instance
.syntax-il { .syntax-il {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.Number.Integer.Long } // Literal.Number.Integer.Long
} }
} }
Write Preview
Loading…
Cancel
Save