gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 10:53:39 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Replace "classic" tokens and dark-text-color

Browse Source
This commit is contained in:
diondiondion 2025-09-02 17:00:31 +02:00
parent cc58079e94
commit a2642ed379
10 changed files with 79 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/styles/contrast/variables.scss
View File

@ -1,23 +1,14 @@
@use '../mastodon/functions' as *; @use '../mastodon/functions' as *;
// Dependent colors $ui-base-color: hsl(240deg, 16%, 19%) !default;
$black: #000; $ui-primary-color: hsl(240deg, 29%, 70%) !default;
$ui-secondary-color: hsl(255deg, 25%, 88%) !default;
$classic-base-color: hsl(240deg, 16%, 19%); $ui-highlight-color: hsl(240deg, 100%, 69%) !default;
$classic-primary-color: hsl(240deg, 29%, 70%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: hsl(240deg, 100%, 69%);
$ui-base-color: $classic-base-color !default;
$ui-primary-color: $classic-primary-color !default;
$ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default;
@use '../mastodon/variables' with ( @use '../mastodon/variables' with (
$dark-text-color: lighten($ui-primary-color, 12%),
$highlight-text-color: lighten($ui-highlight-color, 10%), $highlight-text-color: lighten($ui-highlight-color, 10%),
$action-button-color: lighten($ui-base-color, 50%), $action-button-color: lighten($ui-base-color, 50%),
$inverted-text-color: $black, $inverted-text-color: #000,
$lighter-text-color: darken($ui-base-color, 6%), $lighter-text-color: darken($ui-base-color, 6%),
$light-text-color: $classic-primary-color $light-text-color: hsl(240deg, 29%, 70%)
); );

6
app/javascript/styles/mastodon-light/diff.scss
View File

@ -458,12 +458,6 @@ a.sparkline {
background: darken($ui-base-color, 10%); background: darken($ui-base-color, 10%);
} }
.autosuggest-account {
.display-name__account {
color: $dark-text-color;
}
}
.notification-group--annual-report { .notification-group--annual-report {
.notification-group__icon, .notification-group__icon,
.notification-group__main .link-button { .notification-group__main .link-button {

14
app/javascript/styles/mastodon-light/variables.scss
View File

@ -11,26 +11,20 @@ $blurple-500: #6364ff; // Brand purple
$grey-600: hsl(240deg, 8%, 33%); // Trout $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz $grey-100: hsl(240deg, 51%, 90%); // Topaz
$classic-base-color: hsl(240deg, 16%, 19%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: $blurple-500;
@use '../mastodon/variables' with ( @use '../mastodon/variables' with (
$base-overlay-background: $white, $base-overlay-background: $white,
$ui-base-color: $classic-secondary-color, $ui-base-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%), $ui-base-lighter-color: hsl(250deg, 24%, 75%),
$ui-secondary-color: $classic-base-color, $ui-secondary-color: hsl(240deg, 16%, 19%),
$ui-button-secondary-color: $grey-600, $ui-button-secondary-color: $grey-600,
$ui-button-secondary-border-color: $grey-600, $ui-button-secondary-border-color: $grey-600,
$ui-button-secondary-focus-color: $white, $ui-button-secondary-focus-color: $white,
$ui-button-tertiary-color: $blurple-500, $ui-button-tertiary-color: $blurple-500,
$ui-button-tertiary-border-color: $blurple-500, $ui-button-tertiary-border-color: $blurple-500,
$lighter-text-color: $classic-base-color, $lighter-text-color: hsl(240deg, 16%, 19%),
$highlight-text-color: $classic-highlight-color, $highlight-text-color: $blurple-500,
$dark-text-color: hsl(240deg, 16%, 32%),
$light-text-color: hsl(240deg, 16%, 32%), $light-text-color: hsl(240deg, 16%, 32%),
$inverted-text-color: $black, $inverted-text-color: $black,

15
app/javascript/styles/mastodon/_variables.scss
View File

@ -13,12 +13,6 @@ $blurple-300: #858afa; // Faded Blue
$grey-600: hsl(240deg, 8%, 33%); // Trout $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz $grey-100: hsl(240deg, 51%, 90%); // Topaz
// Values from the classic Mastodon UI
$classic-base-color: hsl(240deg, 16%, 19%);
$classic-primary-color: hsl(240deg, 29%, 70%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: $blurple-500;
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;
$base-overlay-background: $black !default; $base-overlay-background: $black !default;
@ -26,14 +20,14 @@ $base-border-color: $white !default;
$simple-background-color: $white !default; $simple-background-color: $white !default;
// Tell UI to use selected colors // Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest $ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
$ui-base-lighter-color: lighten( $ui-base-lighter-color: lighten(
$ui-base-color, $ui-base-color,
26% 26%
) !default; // Lighter darkest ) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter $ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; $ui-highlight-color: $blurple-500 !default;
$ui-button-color: $white !default; $ui-button-color: $white !default;
$ui-button-background-color: $blurple-500 !default; $ui-button-background-color: $blurple-500 !default;
$ui-button-focus-background-color: $blurple-600 !default; $ui-button-focus-background-color: $blurple-600 !default;
@ -56,7 +50,6 @@ $ui-button-tertiary-focus-background-color: $blurple-600 !default;
$ui-button-tertiary-focus-color: $white !default; $ui-button-tertiary-focus-color: $white !default;
// Variables for texts // Variables for texts
$dark-text-color: $ui-base-lighter-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $highlight-text-color: lighten($ui-highlight-color, 8%) !default;
$action-button-color: $ui-base-lighter-color !default; $action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;

10
app/javascript/styles/mastodon/admin.scss
View File

@ -708,7 +708,7 @@ kbd {
} }
&__timestamp { &__timestamp {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
a, a,
@ -854,7 +854,7 @@ a.name-tag,
} }
time { time {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -1088,7 +1088,7 @@ a.name-tag,
&__meta { &__meta {
padding: 0 15px; padding: 0 15px;
color: $dark-text-color; color: var(--clr-text-tertiary);
a { a {
color: inherit; color: inherit;
@ -1733,7 +1733,7 @@ a.sparkline {
&__description { &__description {
padding: 15px; padding: 15px;
font-size: 14px; font-size: 14px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -2168,7 +2168,7 @@ a.sparkline {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: $dark-text-color; background: var(--clr-text-tertiary);
} }
&.success { &.success {

96
app/javascript/styles/mastodon/components.scss
View File

@ -1439,11 +1439,11 @@
line-height: 22px; line-height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
.status__wrapper--filtered { .status__wrapper--filtered {
color: $dark-text-color; color: var(--clr-text-tertiary);
border: 0; border: 0;
font-size: inherit; font-size: inherit;
text-align: center; text-align: center;
@ -1612,7 +1612,7 @@
} }
.notification__relative_time { .notification__relative_time {
color: $dark-text-color; color: var(--clr-text-tertiary);
float: right; float: right;
font-size: 14px; font-size: 14px;
padding-bottom: 1px; padding-bottom: 1px;
@ -1683,7 +1683,7 @@
padding: 0 10px; padding: 0 10px;
.detailed-status__display-name { .detailed-status__display-name {
color: $dark-text-color; color: var(--clr-text-tertiary);
span { span {
display: inline; display: inline;
@ -1818,7 +1818,7 @@
.logo { .logo {
width: 40px; width: 40px;
height: 40px; height: 40px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -1845,7 +1845,7 @@
.detailed-status__meta { .detailed-status__meta {
margin-top: 24px; margin-top: 24px;
color: $dark-text-color; color: var(--clr-text-tertiary);
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
@ -2210,7 +2210,7 @@
color: var(--clr-text-secondary); color: var(--clr-text-secondary);
&--missing { &--missing {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
p { p {
@ -2500,11 +2500,11 @@ a.account__display-name {
.status__content, .status__content,
.status__content p, .status__content p,
.status__content a { .status__content a {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
.status__display-name strong { .status__display-name strong {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
.status__avatar { .status__avatar {
@ -3449,7 +3449,7 @@ a.account__display-name {
&__source { &__source {
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
color: $dark-text-color; color: var(--clr-text-tertiary);
@container (width >= 400px) { @container (width >= 400px) {
padding-inline-start: 60px; padding-inline-start: 60px;
@ -4130,7 +4130,7 @@ a.account__display-name {
} }
.getting-started { .getting-started {
color: $dark-text-color; color: var(--clr-text-tertiary);
overflow: auto; overflow: auto;
border: 1px solid var(--clr-border-primary); border: 1px solid var(--clr-border-primary);
border-top: 0; border-top: 0;
@ -4728,7 +4728,7 @@ a.status-card {
} }
&:disabled { &:disabled {
color: $dark-text-color; color: var(--clr-text-disabled);
cursor: default; cursor: default;
} }
} }
@ -4832,7 +4832,7 @@ a.status-card {
} }
.loading-indicator { .loading-indicator {
color: $dark-text-color; color: var(--clr-text-secondary);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
@ -5135,7 +5135,7 @@ a.status-card {
} }
&__placeholder { &__placeholder {
color: $dark-text-color; color: var(--clr-text-tertiary);
padding-inline-start: 2px; padding-inline-start: 2px;
font-size: 12px; font-size: 12px;
} }
@ -5173,12 +5173,12 @@ a.status-card {
&__dropdown-indicator { &__dropdown-indicator {
cursor: pointer; cursor: pointer;
transition: none; transition: none;
color: $dark-text-color; color: var(--clr-text-tertiary);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($dark-text-color, 4%); color: var(--clr-text-secondary);
} }
} }
@ -5236,7 +5236,7 @@ a.status-card {
} }
.empty-column-indicator { .empty-column-indicator {
color: $dark-text-color; color: var(--clr-text-tertiary);
text-align: center; text-align: center;
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
@ -5253,7 +5253,7 @@ a.status-card {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -5796,7 +5796,7 @@ a.status-card {
&__helper { &__helper {
margin-top: 4px; margin-top: 4px;
font-size: 0.8em; font-size: 0.8em;
color: var(--clr-text-secondary); color: var(--clr-text-tertiary);
} }
} }
@ -6418,7 +6418,7 @@ a.status-card {
align-items: center; align-items: center;
gap: 4px; gap: 4px;
margin-bottom: 8px; margin-bottom: 8px;
color: $dark-text-color; color: var(--clr-text-tertiary);
bdi { bdi {
color: inherit; color: inherit;
@ -6429,7 +6429,7 @@ a.status-card {
display: -webkit-box; display: -webkit-box;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
color: $dark-text-color; color: var(--clr-text-tertiary);
line-clamp: 4; line-clamp: 4;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -6446,7 +6446,7 @@ a.status-card {
margin-top: 0; margin-top: 0;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -6538,7 +6538,7 @@ a.status-card {
&__hint { &__hint {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
.link-button { .link-button {
@ -7223,7 +7223,7 @@ a.status-card {
&__icon { &__icon {
flex: 0 0 auto; flex: 0 0 auto;
color: $dark-text-color; color: var(--clr-text-tertiary);
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-inline-end: 1px solid var(--clr-border-primary); border-inline-end: 1px solid var(--clr-border-primary);
@ -7249,7 +7249,7 @@ a.status-card {
a { a {
text-decoration: none; text-decoration: none;
color: $dark-text-color; color: var(--clr-text-tertiary);
font-weight: 500; font-weight: 500;
&:hover { &:hover {
@ -7267,7 +7267,7 @@ a.status-card {
} }
.icon { .icon {
color: $dark-text-color; color: var(--clr-text-tertiary);
vertical-align: middle; vertical-align: middle;
} }
} }
@ -8547,7 +8547,7 @@ noscript {
width: auto; width: auto;
background: transparent; background: transparent;
text-transform: uppercase; text-transform: uppercase;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
dd { dd {
@ -8671,7 +8671,7 @@ noscript {
border-radius: 4px; border-radius: 4px;
&::placeholder { &::placeholder {
color: $dark-text-color; color: var(--clr-text-tertiary);
opacity: 1; opacity: 1;
} }
@ -8741,7 +8741,7 @@ noscript {
&__name { &__name {
flex: 1 1 auto; flex: 1 1 auto;
color: $dark-text-color; color: var(--clr-text-tertiary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -9228,7 +9228,7 @@ noscript {
line-height: 21px; line-height: 21px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
color: $dark-text-color; color: var(--clr-text-tertiary);
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
.icon { .icon {
@ -9310,7 +9310,7 @@ noscript {
.search__icon { .search__icon {
top: 12px; top: 12px;
inset-inline-end: 12px; inset-inline-end: 12px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -10100,7 +10100,7 @@ noscript {
} }
&__footer { &__footer {
color: $dark-text-color; color: var(--clr-text-tertiary);
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
@ -10347,10 +10347,10 @@ noscript {
width: auto; width: auto;
padding: 15px; padding: 15px;
margin: 0; margin: 0;
color: $white; color: var(--clr-text-on-inverted);
background: color.change($black, $alpha: 0.85); background: var(--clr-bg-inverted);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85); border: 1px solid var(--clr-border-on-bg-inverted);
border-radius: 8px; border-radius: 8px;
box-shadow: box-shadow:
0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25), 0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
@ -10394,7 +10394,7 @@ noscript {
background: transparent; background: transparent;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
color: $blurple-300; color: var(--clr-text-accent);
font-weight: 700; font-weight: 700;
border-radius: 4px; border-radius: 4px;
padding: 0 4px; padding: 0 4px;
@ -10402,7 +10402,7 @@ noscript {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: color.change($white, $alpha: 0.15); background: var(--clr-bg-accent-subtle);
} }
} }
@ -10678,7 +10678,7 @@ noscript {
&__source { &__source {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: $dark-text-color; color: var(--clr-text-tertiary);
gap: 4px; gap: 4px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -10934,7 +10934,7 @@ noscript {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
color: $dark-text-color; color: var(--clr-text-tertiary);
.icon { .icon {
width: 28px; width: 28px;
@ -10958,7 +10958,7 @@ noscript {
&--relationships-severance-event &__icon, &--relationships-severance-event &__icon,
&--admin-report &__icon, &--admin-report &__icon,
&--admin-sign-up &__icon { &--admin-sign-up &__icon {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
&--moderation-warning &__icon { &--moderation-warning &__icon {
@ -11014,7 +11014,7 @@ noscript {
} }
time { time {
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
@container (width < 350px) { @container (width < 350px) {
@ -11033,7 +11033,7 @@ noscript {
} }
&__additional-content { &__additional-content {
color: $dark-text-color; color: var(--clr-text-tertiary);
margin-top: -8px; // to offset the parent's `gap` property margin-top: -8px; // to offset the parent's `gap` property
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
@ -11055,7 +11055,7 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
color: $dark-text-color; color: var(--clr-text-tertiary);
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
@ -11093,7 +11093,7 @@ noscript {
margin-top: 0; margin-top: 0;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
} }
@ -11114,7 +11114,7 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: $dark-text-color; color: var(--clr-text-tertiary);
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
font-weight: 500; font-weight: 500;
@ -11285,7 +11285,7 @@ noscript {
&__note { &__note {
&-label { &-label {
color: $dark-text-color; color: var(--clr-text-tertiary);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@ -11318,7 +11318,7 @@ noscript {
&__account { &__account {
display: block; display: block;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
} }
@ -11345,7 +11345,7 @@ noscript {
dt { dt {
flex: 0 1 auto; flex: 0 1 auto;
color: $dark-text-color; color: var(--clr-text-tertiary);
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

4
app/javascript/styles/mastodon/css_variables.scss
View File

@ -35,6 +35,7 @@
--clr-text-primary: var(--clr-grey-50); --clr-text-primary: var(--clr-grey-50);
--clr-text-secondary: var(--clr-grey-400); --clr-text-secondary: var(--clr-grey-400);
--clr-text-tertiary: var(--clr-grey-500);
--clr-text-on-inverted: var(--clr-grey-950); --clr-text-on-inverted: var(--clr-grey-950);
--clr-text-accent: var(--clr-indigo-400); --clr-text-accent: var(--clr-indigo-400);
--clr-text-accent-subtle: color-mix( --clr-text-accent-subtle: color-mix(
@ -77,7 +78,7 @@
); );
--clr-bg-ambient: var(--clr-bg-primary); --clr-bg-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-grey-800); --clr-bg-elevated: var(--clr-grey-800);
--clr-bg-inverted: var(--clr-grey-950); --clr-bg-inverted: var(--clr-grey-50);
--clr-bg-disabled: var(--clr-grey-700); --clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400); --clr-bg-accent-subtle-base: var(--clr-indigo-400);
--clr-bg-accent-subtle-strength: 10%; --clr-bg-accent-subtle-strength: 10%;
@ -159,6 +160,7 @@
var(--clr-text-success), var(--clr-text-success),
50% 50%
)}; )};
--clr-border-on-bg-inverted: var(--clr-border-primary);
/* GRAPHS/CHARTS TOKENS */ /* GRAPHS/CHARTS TOKENS */

2
app/javascript/styles/mastodon/emoji_picker.scss
View File

@ -228,7 +228,7 @@
.emoji-mart-no-results { .emoji-mart-no-results {
font-size: 14px; font-size: 14px;
color: $dark-text-color; color: var(--clr-text-tertiary);
text-align: center; text-align: center;
padding: 5px 6px; padding: 5px 6px;
padding-top: 70px; padding-top: 70px;

2
app/javascript/styles/mastodon/forms.scss
View File

@ -694,7 +694,7 @@ code {
top: 1px; top: 1px;
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
color: $dark-text-color; color: var(--clr-text-tertiary);
font-family: inherit; font-family: inherit;
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;

14
app/javascript/styles/mastodon/polls.scss
View File

@ -145,16 +145,16 @@
} }
&.disabled { &.disabled {
border-color: $dark-text-color; border-color: var(--clr-text-disabled);
&.active { &.active {
background: $dark-text-color; background: var(--clr-text-disabled);
} }
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: $dark-text-color; border-color: var(--clr-text-disabled);
border-width: 1px; border-width: 1px;
} }
} }
@ -189,7 +189,7 @@
&__footer { &__footer {
padding-top: 6px; padding-top: 6px;
padding-bottom: 5px; padding-bottom: 5px;
color: $dark-text-color; color: var(--clr-text-tertiary);
} }
&__link { &__link {
@ -198,7 +198,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
color: $dark-text-color; color: var(--clr-text-tertiary);
text-decoration: underline; text-decoration: underline;
font-size: inherit; font-size: inherit;
@ -208,7 +208,7 @@
&:active, &:active,
&:focus { &:focus {
background-color: color.change($dark-text-color, $alpha: 0.1); background-color: var(--clr-bg-secondary);
} }
} }
@ -221,7 +221,7 @@
} }
.muted .poll { .muted .poll {
color: $dark-text-color; color: var(--clr-text-tertiary);
&__chart { &__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7); background: rgba(darken($ui-primary-color, 14%), 0.7);