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
commit
0f4890dda5
  1. 346
      tildes/scss/themes/_theme_base.scss
  2. 310
      tildes/scss/themes/_theme_mixins.scss

346
tildes/scss/themes/_theme_base.scss

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

310
tildes/scss/themes/_theme_mixins.scss

@ -11,7 +11,7 @@
&.btn-used:hover {
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
// 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(
map-get($theme, "background-primary"),
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(
map-get($theme, "button"),
map-get($theme, "black"),
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(
map-get($theme, "error"),
map-get($theme, "black"),
map-get($theme, "white")
)};
--foreground-extreme:
--foreground-extreme-color:
#{choose-by-brightness(
map-get($theme, "background-primary"),
map-get($theme, "black"),
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(
map-get($theme, "foreground-primary"),
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
@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 {
--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
@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 {
--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.
--white: #{map-get($theme, "white")};
--white-color: #{map-get($theme, "white")};
// Variables for the comment labels.
@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 {
--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 {
.highlight {
.syntax-c {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment
.syntax-err {
color: var(--foreground);
color: var(--foreground-color);
} // Error
.syntax-g {
color: var(--foreground);
color: var(--foreground-color);
} // Generic
.syntax-k {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword
.syntax-l {
color: var(--foreground);
color: var(--foreground-color);
} // Literal
.syntax-n {
color: var(--foreground);
color: var(--foreground-color);
} // Name
.syntax-o {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Operator
.syntax-x {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Other
.syntax-p {
color: var(--foreground);
color: var(--foreground-color);
} // Punctuation
.syntax-cm {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Multiline
.syntax-cp {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Preproc
.syntax-c1 {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Single
.syntax-cs {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Comment.Special
.syntax-gd {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Generic.Deleted
.syntax-ge {
color: var(--foreground);
color: var(--foreground-color);
font-style: italic;
} // Generic.Emph
.syntax-gr {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Error
.syntax-gh {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Heading
.syntax-gi {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Generic.Inserted
.syntax-go {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Output
.syntax-gp {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Prompt
.syntax-gs {
color: var(--foreground);
color: var(--foreground-color);
font-weight: bold;
} // Generic.Strong
.syntax-gu {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Generic.Subheading
.syntax-gt {
color: var(--foreground);
color: var(--foreground-color);
} // Generic.Traceback
.syntax-kc {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Keyword.Constant
.syntax-kd {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Declaration
.syntax-kn {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Keyword.Namespace
.syntax-kp {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Keyword.Pseudo
.syntax-kr {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Reserved
.syntax-kt {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Keyword.Type
.syntax-ld {
color: var(--foreground);
color: var(--foreground-color);
} // Literal.Date
.syntax-m {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.Number
.syntax-s {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String
.syntax-na {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Attribute
.syntax-nb {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Builtin
.syntax-nc {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Class
.syntax-no {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Name.Constant
.syntax-nd {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Decorator
.syntax-ni {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Entity
.syntax-ne {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Exception
.syntax-nf {
color: var(--syntax-builtin);
color: var(--syntax-builtin-color);
} // Name.Function
.syntax-nl {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Label
.syntax-nn {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Namespace
.syntax-nx {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Other
.syntax-py {
color: var(--foreground);
color: var(--foreground-color);
} // Name.Property
.syntax-nt {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Tag
.syntax-nv {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable
.syntax-ow {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Operator.Word
.syntax-w {
color: var(--foreground);
color: var(--foreground-color);
} // Text.Whitespace
.syntax-mf {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Float
.syntax-mh {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Hex
.syntax-mi {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Integer
.syntax-mo {
color: var(--syntax-literal);
color: var(--syntax-literal-color);
} // Literal.Number.Oct
.syntax-sb {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Backtick
.syntax-sc {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Char
.syntax-sd {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String.Doc
.syntax-s2 {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Double
.syntax-se {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Literal.String.Escape
.syntax-sh {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.String.Heredoc
.syntax-si {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Interpol
.syntax-sx {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Other
.syntax-sr {
color: var(--syntax-constant);
color: var(--syntax-constant-color);
} // Literal.String.Regex
.syntax-s1 {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Single
.syntax-ss {
color: var(--syntax-string);
color: var(--syntax-string-color);
} // Literal.String.Symbol
.syntax-bp {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Builtin.Pseudo
.syntax-vc {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Class
.syntax-vg {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Global
.syntax-vi {
color: var(--syntax-keyword);
color: var(--syntax-keyword-color);
} // Name.Variable.Instance
.syntax-il {
color: var(--syntax-comment);
color: var(--syntax-comment-color);
} // Literal.Number.Integer.Long
}
}
Loading…
Cancel
Save