gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 19:03:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Theme tokens initial commit

Browse Source
This commit is contained in:
diondiondion 2025-09-01 13:56:18 +02:00
parent 2c5d3f934c
commit ebe7fa7459
29 changed files with 1305 additions and 1039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/mastodon/components/status.jsx
View File

@ -553,7 +553,6 @@ class Status extends ImmutablePureComponent {
} }
const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status); const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
return ( return (
<Hotkeys handlers={handlers} focusable={!unfocusable}> <Hotkeys handlers={handlers} focusable={!unfocusable}>
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}> <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>

2
app/javascript/mastodon/components/status/boost_button.tsx
View File

@ -63,6 +63,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
title={intl.formatMessage(meta ?? title)} title={intl.formatMessage(meta ?? title)}
icon='retweet' icon='retweet'
iconComponent={iconComponent} iconComponent={iconComponent}
className='status__action-bar__button'
onClick={!disabled ? handleClick : undefined} onClick={!disabled ? handleClick : undefined}
counter={ counter={
counters counters
@ -192,6 +193,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote, isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
)} )}
icon='retweet' icon='retweet'
className='status__action-bar__button'
iconComponent={boostIcon} iconComponent={boostIcon}
counter={ counter={
counters counters

10
app/javascript/mastodon/components/status_action_bar/index.jsx
View File

@ -405,15 +405,19 @@ class StatusActionBar extends ImmutablePureComponent {
scrollKey={scrollKey} scrollKey={scrollKey}
status={status} status={status}
items={menu} items={menu}
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
direction='right' direction='right'
title={intl.formatMessage(messages.more)}
onOpen={() => { onOpen={() => {
dismissQuoteHint(); dismissQuoteHint();
return true; return true;
}} }}
>
<IconButton
className='status__action-bar__button'
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
title={intl.formatMessage(messages.more)}
/> />
</Dropdown>
)} )}
</RemoveQuoteHint> </RemoveQuoteHint>
</div> </div>

27
app/javascript/styles/application.scss
View File

@ -1,27 +1,2 @@
@use 'mastodon/functions';
@use 'mastodon/mixins';
@use 'mastodon/variables';
@use 'mastodon/css_variables'; @use 'mastodon/css_variables';
@use 'fonts/roboto'; @use 'common';
@use 'fonts/roboto-mono';
@use 'mastodon/reset';
@use 'mastodon/basics';
@use 'mastodon/branding';
@use 'mastodon/containers';
@use 'mastodon/lists';
@use 'mastodon/widgets';
@use 'mastodon/forms';
@use 'mastodon/accounts';
@use 'mastodon/components';
@use 'mastodon/polls';
@use 'mastodon/modal';
@use 'mastodon/emoji_picker';
@use 'mastodon/annual_reports';
@use 'mastodon/about';
@use 'mastodon/tables';
@use 'mastodon/admin';
@use 'mastodon/dashboard';
@use 'mastodon/rtl';
@use 'mastodon/accessibility';
@use 'mastodon/rich_text';

26
app/javascript/styles/common.scss Normal file
View File

@ -0,0 +1,26 @@
@use 'mastodon/functions';
@use 'mastodon/mixins';
@use 'mastodon/variables';
@use 'fonts/roboto';
@use 'fonts/roboto-mono';
@use 'mastodon/reset';
@use 'mastodon/basics';
@use 'mastodon/branding';
@use 'mastodon/containers';
@use 'mastodon/lists';
@use 'mastodon/widgets';
@use 'mastodon/forms';
@use 'mastodon/accounts';
@use 'mastodon/components';
@use 'mastodon/polls';
@use 'mastodon/modal';
@use 'mastodon/emoji_picker';
@use 'mastodon/annual_reports';
@use 'mastodon/about';
@use 'mastodon/tables';
@use 'mastodon/admin';
@use 'mastodon/dashboard';
@use 'mastodon/rtl';
@use 'mastodon/accessibility';
@use 'mastodon/rich_text';

3
app/javascript/styles/contrast/diff.scss
View File

@ -1,4 +1,5 @@
@use '../mastodon/variables' as *; @use '../mastodon/variables' as *;
@use '../mastodon/theme_utils' as *;
.status__content a, .status__content a,
.reply-indicator__content a, .reply-indicator__content a,
@ -34,7 +35,7 @@
.status__content a, .status__content a,
.reply-indicator__content a, .reply-indicator__content a,
.edit-indicator__content a { .edit-indicator__content a {
color: $highlight-text-color; color: var(--text-accent-color);
} }
.report-dialog-modal__textarea::placeholder { .report-dialog-modal__textarea::placeholder {

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

@ -14,9 +14,7 @@ $ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default; $ui-highlight-color: $classic-highlight-color !default;
@use '../mastodon/variables' with ( @use '../mastodon/variables' with (
$darker-text-color: lighten($ui-primary-color, 20%),
$dark-text-color: lighten($ui-primary-color, 12%), $dark-text-color: lighten($ui-primary-color, 12%),
$secondary-text-color: lighten($ui-secondary-color, 6%),
$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: $black,

3
app/javascript/styles/mastodon-light.scss
View File

@ -1,4 +1,3 @@
@use 'mastodon-light/variables'; @use 'mastodon-light/variables';
@use 'mastodon-light/css_variables'; @use 'mastodon-light/css_variables';
@use 'application'; @use 'common';
@use 'mastodon-light/diff';

174
app/javascript/styles/mastodon-light/css_variables.scss
View File

@ -1,23 +1,155 @@
@use 'sass:color'; @use '../mastodon/theme_utils' as *;
@use '../mastodon/variables' as *;
@use 'variables' as *;
@use '../mastodon/functions' as *;
body { :root {
--dropdown-border-color: hsl(240deg, 25%, 88%); --clr-black: #000;
--dropdown-background-color: #fff; --clr-grey-950: #181821;
--modal-border-color: hsl(240deg, 25%, 88%); --clr-grey-700: #444664;
--modal-background-color: var(--background-color); --clr-grey-600: #545778;
--background-border-color: hsl(240deg, 25%, 88%); --clr-grey-500: #696d91;
--background-color: #fff; --clr-grey-400: #8b8dac;
--background-color-tint: rgba(255, 255, 255, 80%); --clr-grey-300: #b4b6cb;
--background-filter: blur(10px); --clr-grey-200: #d8d9e3;
--surface-variant-background-color: #f1ebfb; --clr-grey-100: #f0f0f5;
--surface-border-color: #cac4d0; --clr-grey-50: #f0f1ff;
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)}; --clr-white: #fff;
--rich-text-container-color: rgba(255, 216, 231, 100%); --clr-indigo-600: #6147e6;
--rich-text-text-color: rgba(114, 47, 83, 100%); --clr-indigo-200: #c8cdfe;
--rich-text-decorations-color: rgba(255, 175, 212, 100%); --clr-indigo-100: #e0e3ff;
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)}; --clr-indigo-50: #f0f1ff;
--input-background-color: #{darken($ui-base-color, 10%)}; --clr-light-pink: #ededff;
--clr-red: #df405a;
--clr-red-100: #ffe4e6;
--clr-red-600: #ec003f;
--clr-yellow-50: #fffbeb;
--clr-yellow-600: #e17100;
--clr-green: #79bd9a;
--clr-green-100: #dcfce7;
--clr-green-600: #00a63e;
/* TEXT TOKENS */
--clr-text-primary: var(--clr-grey-950);
--clr-text-secondary: var(--clr-grey-600);
--clr-text-on-inverted: var(--clr-white);
--clr-text-accent: var(--clr-indigo-600);
--clr-text-accent-subtle: color-mix(
in oklab,
var(--clr-text-primary),
var(--clr-text-accent)
);
--clr-text-on-accent-strong: var(--clr-white);
--clr-text-error: var(--clr-red-600);
--clr-text-on-error-strong: var(--clr-white);
--clr-text-warning: var(--clr-yellow-600);
--clr-text-on-warning-strong: var(--clr-white);
--clr-text-success: var(--clr-green-600);
--clr-text-on-success-strong: var(--clr-white);
--clr-text-disabled: var(--clr-grey-300);
--clr-text-on-disabled: var(--clr-grey-200);
/* BACKGROUND TOKENS */
--clr-bg-primary: var(--clr-white);
--clr-bg-secondary-base: var(--clr-grey-600);
--clr-bg-secondary-strength: 5%;
--clr-bg-secondary: #{color-mix(
in oklab,
var(--clr-bg-primary),
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
)};
--clr-bg-secondary-solid: #{color-mix(
in srgb,
var(--clr-bg-primary),
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
)};
--clr-bg-tertiary: #{color-mix(
in oklab,
var(--clr-bg-primary),
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
)};
--clr-bg-elevated: var(--clr-bg-primary);
--clr-bg-inverted: var(--clr-grey-950);
--clr-bg-disabled: var(--clr-grey-400);
--clr-bg-accent-subtle-base: var(--clr-indigo-600);
--clr-bg-accent-subtle-strength: 12%;
--clr-bg-accent-subtle: #{css-alpha(
var(--clr-bg-accent-subtle-base),
var(--clr-bg-accent-subtle-strength)
)};
--clr-bg-accent-subtle-highlighted: #{css-alpha(
var(--clr-bg-accent-subtle-base),
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
)};
--clr-bg-accent-strong: var(--clr-indigo-600);
--clr-bg-accent-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-accent-strong),
black var(--clr-bg-accent-subtle-strength)
);
--clr-bg-error-subtle-base: #f41b3b;
--clr-bg-error-subtle-strength: 12%;
--clr-bg-error-subtle: #{css-alpha(
var(--clr-bg-error-subtle-base),
var(--clr-bg-error-subtle-strength)
)};
--clr-bg-error-strong: var(--clr-red-600);
--clr-bg-error-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-error-strong),
black var(--clr-bg-error-subtle-strength)
);
--clr-bg-warning-subtle-base: #ffca1b;
--clr-bg-warning-subtle-strength: 10%;
--clr-bg-warning-subtle: #{css-alpha(
var(--clr-bg-warning-subtle-base),
var(--clr-bg-warning-subtle-strength)
)};
--clr-bg-warning-strong: var(--clr-yellow-600);
--clr-bg-warning-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-warning-strong),
black var(--clr-bg-warning-subtle-strength)
);
--clr-bg-success-subtle-base: #17e865;
--clr-bg-success-subtle-strength: 15%;
--clr-bg-success-subtle: #{css-alpha(
var(--clr-bg-success-subtle-base),
var(--clr-bg-success-subtle-strength)
)};
--clr-bg-success-strong: var(--clr-green-600);
--clr-bg-success-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-success-strong),
black var(--clr-bg-success-subtle-strength)
);
/* BORDER TOKENS */
--clr-border-primary-base: #000856;
--clr-border-primary-strength: 15%;
--clr-border-primary: color-mix(
in oklab,
var(--clr-bg-primary),
var(--clr-border-primary-base) var(--clr-border-primary-strength)
);
--clr-border-strong: var(--clr-grey-950);
--clr-border-media: rgb(252 248 255 / 15%);
--clr-border-on-bg-secondary: var(--clr-grey-200);
--clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
--clr-border-on-bg-error-subtle: #{css-alpha(var(--clr-text-error), 50%)};
--clr-border-on-bg-warning-subtle: #{css-alpha(var(--clr-text-warning), 50%)};
--clr-border-on-bg-success-subtle: #{css-alpha(var(--clr-text-success), 50%)};
/* LEGACY TOKENS */
--rich-text-container-color: rgb(255 216 231 / 100%);
--rich-text-text-color: rgb(114 47 83 / 100%);
--rich-text-decorations-color: rgb(255 175 212 / 100%);
/* MISCELLANEOUS */
--avatar-border-radius: 8px;
--dropdown-shadow:
0 20px 25px -5px rgb(0 0 0 / 25%), 0 8px 10px -6px rgb(0 0 0 / 25%);
--overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 35%));
} }

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

@ -3,6 +3,7 @@
@use 'sass:color'; @use 'sass:color';
@use '../mastodon/functions' as *; @use '../mastodon/functions' as *;
@use '../mastodon/variables' as *; @use '../mastodon/variables' as *;
@use '../mastodon/theme_utils' as *;
.simple_form .button.button-tertiary { .simple_form .button.button-tertiary {
color: $highlight-text-color; color: $highlight-text-color;
@ -28,7 +29,7 @@
// Change default background colors of columns // Change default background colors of columns
.interaction-modal { .interaction-modal {
background: $white; background: $white;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
} }
.rules-list li::before { .rules-list li::before {
@ -39,10 +40,6 @@
background: lighten($ui-base-color, 12%); background: lighten($ui-base-color, 12%);
} }
.account__header {
background: $white;
}
.column-header__button.active { .column-header__button.active {
color: $ui-highlight-color; color: $ui-highlight-color;
@ -71,27 +68,19 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: $primary-text-color; color: var(--text-primary-color);
} }
} }
.getting-started .navigation-bar { .getting-started .navigation-bar {
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 0; border-top: 0;
} }
} }
.search__input,
.search__popout,
.setting-text,
.report-dialog-modal__textarea,
.audio-player {
border: 1px solid var(--background-border-color);
}
.report-dialog-modal .dialog-option .poll__input { .report-dialog-modal .dialog-option .poll__input {
color: $white; color: $white;
} }
@ -133,7 +122,7 @@
.dialog-modal__content__preview { .dialog-modal__content__preview {
background: #fff; background: #fff;
border-bottom: 1px solid var(--modal-border-color); border-bottom: 1px solid var(--clr-border-primary);
} }
.reactions-bar__item:hover, .reactions-bar__item:hover,
@ -179,10 +168,6 @@
color: $white; color: $white;
} }
.flash-message.warning {
color: lighten($gold-star, 16%);
}
.boost-modal__action-bar, .boost-modal__action-bar,
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar, .mute-modal__action-bar,
@ -207,7 +192,7 @@
.embed-modal .embed-modal__container .embed-modal__html { .embed-modal .embed-modal__container .embed-modal__html {
background: $white; background: $white;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
&:focus { &:focus {
border-color: lighten($ui-base-color, 12%); border-color: lighten($ui-base-color, 12%);
@ -231,7 +216,7 @@
// Change the default color used for the text in an empty column or on the error column // Change the default color used for the text in an empty column or on the error column
.empty-column-indicator, .empty-column-indicator,
.error-column { .error-column {
color: $primary-text-color; color: var(--text-primary-color);
background: $white; background: $white;
} }
@ -246,7 +231,7 @@
.directory__tag > a, .directory__tag > a,
.directory__tag > div { .directory__tag > div {
background: $white; background: $white;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
} }
.picture-in-picture-placeholder { .picture-in-picture-placeholder {
@ -275,22 +260,22 @@
.account-grid-card { .account-grid-card {
.controls { .controls {
.icon-button { .icon-button {
color: $darker-text-color; color: var(--clr-text-secondary);
} }
} }
.name { .name {
a { a {
color: $primary-text-color; color: var(--text-primary-color);
} }
} }
.username { .username {
color: $darker-text-color; color: var(--clr-text-secondary);
} }
.account__header__content { .account__header__content {
color: $primary-text-color; color: var(--text-primary-color);
} }
} }
} }
@ -382,25 +367,6 @@
} }
} }
.compose-form__actions .icon-button.active,
.dropdown-button.active,
.language-dropdown__dropdown__results__item:focus,
.language-dropdown__dropdown__results__item.active,
.language-dropdown__dropdown__results__item:focus
.language-dropdown__dropdown__results__item__common-name,
.language-dropdown__dropdown__results__item.active
.language-dropdown__dropdown__results__item__common-name {
color: $white;
}
.privacy-dropdown__option,
.visibility-dropdown__option {
&:focus,
&.active {
--dropdown-text-color: #{$white};
}
}
.compose-form .spoiler-input__input { .compose-form .spoiler-input__input {
color: lighten($ui-highlight-color, 8%); color: lighten($ui-highlight-color, 8%);
} }
@ -515,7 +481,7 @@ a.sparkline {
@supports not selector(::-webkit-scrollbar) { @supports not selector(::-webkit-scrollbar) {
html { html {
scrollbar-color: color.change($action-button-color, $alpha: 0.25) scrollbar-color: color.change($action-button-color, $alpha: 0.25)
var(--background-border-color); var(--clr-border-primary);
} }
} }

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

@ -33,8 +33,6 @@ $classic-highlight-color: $blurple-500;
$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,
$primary-text-color: $black,
$darker-text-color: $classic-base-color,
$lighter-text-color: $classic-base-color, $lighter-text-color: $classic-base-color,
$highlight-text-color: $classic-highlight-color, $highlight-text-color: $classic-highlight-color,
$dark-text-color: hsl(240deg, 16%, 32%), $dark-text-color: hsl(240deg, 16%, 32%),

9
app/javascript/styles/mastodon/_mixins.scss
View File

@ -1,5 +1,6 @@
@use 'sass:color'; @use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'theme_utils' as *;
@mixin search-input { @mixin search-input {
outline: 0; outline: 0;
@ -7,17 +8,17 @@
width: 100%; width: 100%;
box-shadow: none; box-shadow: none;
font-family: inherit; font-family: inherit;
background: var(--input-background-color); background: var(--clr-bg-secondary);
color: $darker-text-color; color: var(--clr-text-primary);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-on-bg-secondary);
font-size: 17px; font-size: 17px;
line-height: normal; line-height: normal;
margin: 0; margin: 0;
} }
@mixin search-popout { @mixin search-popout {
background: $simple-background-color; background: var(--clr-bg-elevated);
border-radius: 4px; border-radius: 4px;
padding: 10px 14px; padding: 10px 14px;
padding-bottom: 14px; padding-bottom: 14px;

7
app/javascript/styles/mastodon/_theme_utils.scss Normal file
View File

@ -0,0 +1,7 @@
@function css-alpha($base-color, $amount) {
@return #{rgb(from $base-color r g b / $amount)};
}
@function css-mix($base-color, $mix-color, $amount) {
@return #{color-mix(in oklab, $base-color, $mix-color $amount)};
}

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

@ -31,8 +31,6 @@ $base-shadow-color: $black !default;
$base-overlay-background: $black !default; $base-overlay-background: $black !default;
$base-border-color: $white !default; $base-border-color: $white !default;
$simple-background-color: $white !default; $simple-background-color: $white !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors // Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest $ui-base-color: $classic-base-color !default; // Darkest
@ -64,17 +62,8 @@ $ui-button-tertiary-border-color: $blurple-300 !default;
$ui-button-tertiary-focus-background-color: $blurple-600 !default; $ui-button-tertiary-focus-background-color: $blurple-600 !default;
$ui-button-tertiary-focus-color: $white !default; $ui-button-tertiary-focus-color: $white !default;
$ui-button-destructive-background-color: $red-500 !default;
$ui-button-destructive-focus-background-color: $red-600 !default;
$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
// Variables for texts // Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default; $dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-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;

12
app/javascript/styles/mastodon/about.scss
View File

@ -28,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
li { li {
position: relative; position: relative;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
padding: 1em 1.75em; padding: 1em 1.75em;
padding-inline-start: 3em; padding-inline-start: 3em;
font-weight: 500; font-weight: 500;
@ -85,13 +85,13 @@ $fluid-breakpoint: $maximum-width + 20px;
} }
&__text { &__text {
color: $primary-text-color; color: var(--clr-text-primary);
} }
&__hint { &__hint {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
} }
@ -104,21 +104,21 @@ $fluid-breakpoint: $maximum-width + 20px;
> label { > label {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $primary-text-color; color: var(--clr-text-primary);
} }
> select { > select {
appearance: none; appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;

54
app/javascript/styles/mastodon/accounts.scss
View File

@ -23,7 +23,7 @@
height: 130px; height: 130px;
position: relative; position: relative;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-bottom: none; border-bottom: none;
img { img {
@ -45,8 +45,8 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: var(--background-color); background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-top: none; border-top: none;
.avatar { .avatar {
@ -76,7 +76,7 @@
strong { strong {
font-size: 15px; font-size: 15px;
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -85,7 +85,7 @@
span { span {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -106,7 +106,7 @@
.page, .page,
.gap { .gap {
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
padding: 6px 10px; padding: 6px 10px;
@ -128,7 +128,7 @@
.older, .older,
.newer { .newer {
text-transform: uppercase; text-transform: uppercase;
color: $secondary-text-color; color: var(--clr-text-primary);
} }
.older { .older {
@ -163,7 +163,7 @@
.nothing-here { .nothing-here {
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2); box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
color: $darker-text-color; color: var(--clr-text-secondary);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -196,7 +196,7 @@
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
color: $ui-secondary-color; color: var(--clr-text-primary);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -206,8 +206,16 @@
.simple_form .overridden, .simple_form .overridden,
.simple_form .recommended, .simple_form .recommended,
.simple_form .not_recommended { .simple_form .not_recommended {
background-color: color.change($ui-secondary-color, $alpha: 0.1); background-color: var(--clr-bg-secondary);
border: 1px solid color.change($ui-secondary-color, $alpha: 0.5); border: 1px solid var(--clr-border-primary);
}
.information-badge {
&.superapp {
color: var(--clr-text-success);
background-color: var(--clr-bg-success-subtle);
border-color: var(--clr-border-on-bg-success-subtle);
}
} }
.account-role { .account-role {
@ -238,14 +246,6 @@
} }
} }
.information-badge {
&.superapp {
color: $success-green;
background-color: color.change($success-green, $alpha: 0.1);
border-color: color.change($success-green, $alpha: 0.5);
}
}
.simple_form .not_recommended { .simple_form .not_recommended {
color: lighten($error-red, 12%); color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1); background-color: rgba(lighten($error-red, 12%), 0.1);
@ -282,13 +282,13 @@
font-weight: 500; font-weight: 500;
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: $secondary-text-color; color: var(--clr-text-primary);
background: rgba(darken($ui-base-color, 8%), 0.5); background: rgba(darken($ui-base-color, 8%), 0.5);
} }
dd { dd {
flex: 1 1 auto; flex: 1 1 auto;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
a { a {
@ -303,16 +303,16 @@
} }
.verified { .verified {
border: 1px solid color.change($valid-value-color, $alpha: 0.5); border: 1px solid var(--clr-border-on-bg-success-subtle);
background: color.change($valid-value-color, $alpha: 0.25); background: var(--clr-bg-success-subtle);
a { a {
color: $valid-value-color; color: var(--clr-text-success);
font-weight: 500; font-weight: 500;
} }
&__mark { &__mark {
color: $valid-value-color; color: var(--clr-text-success);
} }
} }
@ -327,7 +327,7 @@
.pending-account { .pending-account {
&__header { &__header {
color: $darker-text-color; color: var(--clr-text-secondary);
a { a {
color: $ui-secondary-color; color: $ui-secondary-color;
@ -341,7 +341,7 @@
} }
strong { strong {
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 700; font-weight: 700;
} }

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

@ -34,7 +34,7 @@ $content-width: 840px;
&__inner { &__inner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background: var(--background-color); background: var(--clr-bg-primary);
height: 100%; height: 100%;
} }
} }
@ -46,7 +46,7 @@ $content-width: 840px;
&__toggle { &__toggle {
display: none; display: none;
background: var(--background-color); background: var(--clr-bg-primary);
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%);
align-items: center; align-items: center;
@ -61,7 +61,7 @@ $content-width: 840px;
&__icon { &__icon {
display: block; display: block;
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 18px; font-size: 18px;
@ -124,20 +124,20 @@ $content-width: 840px;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 15px; padding: 15px;
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
&:hover { &:hover {
color: $primary-text-color; color: var(--clr-text-primary);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color; transition-property: color, background-color;
} }
} }
ul { ul {
background: var(--background-color); background: var(--clr-bg-primary);
margin: 0; margin: 0;
a { a {
@ -227,7 +227,7 @@ $content-width: 840px;
align-items: center; align-items: center;
padding: 7px 10px; padding: 7px 10px;
border-radius: 4px; border-radius: 4px;
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
gap: 5px; gap: 5px;
@ -245,7 +245,7 @@ $content-width: 840px;
&.selected { &.selected {
font-weight: 700; font-weight: 700;
color: $primary-text-color; color: var(--clr-text-primary);
background: $ui-highlight-color; background: $ui-highlight-color;
} }
} }
@ -270,7 +270,7 @@ $content-width: 840px;
font-size: 12px; font-size: 12px;
display: block; display: block;
font-weight: 500; font-weight: 500;
color: $darker-text-color; color: var(--clr-text-secondary);
line-height: 18px; line-height: 18px;
} }
@ -281,14 +281,14 @@ $content-width: 840px;
} }
h2 { h2 {
color: $secondary-text-color; color: var(--clr-text-primary);
font-size: 24px; font-size: 24px;
line-height: 36px; line-height: 36px;
font-weight: 700; font-weight: 700;
} }
h3 { h3 {
color: $secondary-text-color; color: var(--clr-text-primary);
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
@ -299,21 +299,21 @@ $content-width: 840px;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: $darker-text-color; color: var(--clr-text-secondary);
padding-top: 24px; padding-top: 24px;
margin-bottom: 8px; margin-bottom: 8px;
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
} }
h6 { h6 {
font-size: 16px; font-size: 16px;
color: $secondary-text-color; color: var(--clr-text-primary);
line-height: 28px; line-height: 28px;
font-weight: 500; font-weight: 500;
} }
.fields-group h6 { .fields-group h6 {
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
} }
@ -325,7 +325,7 @@ $content-width: 840px;
.directory__tag h4 { .directory__tag h4 {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $primary-text-color; color: var(--clr-text-primary);
text-transform: none; text-transform: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
@ -339,12 +339,12 @@ $content-width: 840px;
&.private-comment { &.private-comment {
display: block; display: block;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
&.public-comment { &.public-comment {
display: block; display: block;
color: $secondary-text-color; color: var(--clr-text-primary);
} }
} }
} }
@ -352,11 +352,11 @@ $content-width: 840px;
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 21px; line-height: 21px;
color: $secondary-text-color; color: var(--clr-text-primary);
margin-bottom: 20px; margin-bottom: 20px;
strong { strong {
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -371,7 +371,7 @@ $content-width: 840px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
margin: 20px 0; margin: 20px 0;
&.spacer { &.spacer {
@ -409,7 +409,7 @@ $content-width: 840px;
inset-inline-start: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
overflow-y: auto; overflow-y: auto;
background: var(--background-color); background: var(--clr-bg-primary);
} }
} }
@ -445,10 +445,10 @@ hr.spacer {
body, body,
.admin-wrapper .content { .admin-wrapper .content {
.muted-hint { .muted-hint {
color: $darker-text-color; color: var(--clr-text-secondary);
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -468,22 +468,22 @@ body,
} }
.positive-hint { .positive-hint {
color: $valid-value-color; color: var(--clr-text-success);
font-weight: 500; font-weight: 500;
} }
.negative-hint { .negative-hint {
color: $error-value-color; color: var(--clr-text-error);
font-weight: 500; font-weight: 500;
} }
.neutral-hint { .neutral-hint {
color: $dark-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
} }
.warning-hint { .warning-hint {
color: $gold-star; color: var(--clr-text-warning);
font-weight: 500; font-weight: 500;
} }
} }
@ -543,7 +543,7 @@ kbd {
a { a {
display: inline-block; display: inline-block;
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@ -551,7 +551,7 @@ kbd {
border-bottom: 2px solid $ui-base-color; border-bottom: 2px solid $ui-base-color;
&:hover { &:hover {
color: $primary-text-color; color: var(--clr-text-primary);
border-bottom: 2px solid lighten($ui-base-color, 5%); border-bottom: 2px solid lighten($ui-base-color, 5%);
} }
@ -581,7 +581,7 @@ kbd {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $secondary-text-color; color: var(--clr-text-primary);
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
@ -670,25 +670,25 @@ kbd {
line-height: 20px; line-height: 20px;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: var(--background-color); background: var(--clr-bg-primary);
border-right: 1px solid var(--background-border-color); border-right: 1px solid var(--clr-border-primary);
border-left: 1px solid var(--background-border-color); border-left: 1px solid var(--clr-border-primary);
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: var(--clr-text-secondary);
font-size: 14px; font-size: 14px;
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
} }
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
} }
&__avatar { &__avatar {
@ -714,7 +714,7 @@ kbd {
a, a,
.username, .username,
.target { .target {
color: $secondary-text-color; color: var(--clr-text-primary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }
@ -733,12 +733,12 @@ kbd {
line-height: 20px; line-height: 20px;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: var(--background-color); background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: var(--clr-text-secondary);
font-size: 14px; font-size: 14px;
margin-bottom: 15px; margin-bottom: 15px;
@ -774,7 +774,7 @@ a.name-tag,
a.inline-name-tag, a.inline-name-tag,
.inline-name-tag { .inline-name-tag {
text-decoration: none; text-decoration: none;
color: $secondary-text-color; color: var(--clr-text-primary);
&:hover { &:hover {
color: $highlight-text-color; color: $highlight-text-color;
@ -844,7 +844,7 @@ a.name-tag,
font-weight: 500; font-weight: 500;
a { a {
color: $darker-text-color; color: var(--clr-text-secondary);
} }
} }
@ -859,8 +859,8 @@ a.name-tag,
} }
.report-card { .report-card {
background: var(--background-color); background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
@ -882,7 +882,7 @@ a.name-tag,
&__stats { &__stats {
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 500; font-weight: 500;
color: $darker-text-color; color: var(--clr-text-secondary);
text-transform: uppercase; text-transform: uppercase;
text-align: end; text-align: end;
@ -893,12 +893,12 @@ a.name-tag,
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
.red { .red {
color: $error-value-color; color: var(--clr-text-error);
} }
} }
} }
@ -907,7 +907,7 @@ a.name-tag,
&__item { &__item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
&__reported-by, &__reported-by,
&__assigned { &__assigned {
@ -915,7 +915,7 @@ a.name-tag,
flex: 0 0 auto; flex: 0 0 auto;
box-sizing: border-box; box-sizing: border-box;
width: 150px; width: 150px;
color: $darker-text-color; color: var(--clr-text-secondary);
&, &,
.username { .username {
@ -941,10 +941,10 @@ a.name-tag,
width: 100%; width: 100%;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: var(--clr-text-secondary);
&:hover { &:hover {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -981,15 +981,15 @@ a.name-tag,
.account__header__fields, .account__header__fields,
.account__header__content { .account__header__content {
background: var(--background-color); background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
} }
.account__header__fields { .account__header__fields {
margin: 0; margin: 0;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -1000,14 +1000,14 @@ a.name-tag,
} }
.verified a { .verified a {
color: $valid-value-color; color: var(--clr-text-success);
} }
} }
.account__header__content { .account__header__content {
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
color: $primary-text-color; color: var(--clr-text-primary);
} }
} }
@ -1018,8 +1018,8 @@ a.name-tag,
.applications-list__item, .applications-list__item,
.filters-list__item { .filters-list__item {
padding: 15px 0; padding: 15px 0;
background: var(--background-color); background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
margin-top: 15px; margin-top: 15px;
} }
@ -1036,13 +1036,13 @@ a.name-tag,
.announcements-list, .announcements-list,
.filters-list { .filters-list {
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
border-bottom: none; border-bottom: none;
&__item { &__item {
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
&__title { &__title {
padding: 0 15px; padding: 0 15px;
@ -1050,7 +1050,7 @@ a.name-tag,
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
color: $secondary-text-color; color: var(--clr-text-primary);
text-decoration: none; text-decoration: none;
margin-bottom: 10px; margin-bottom: 10px;
@ -1071,7 +1071,7 @@ a.name-tag,
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: $primary-text-color; color: var(--clr-text-primary);
} }
} }
@ -1167,7 +1167,7 @@ a.name-tag,
&__table { &__table {
&__number { &__number {
color: var(--background-color); color: var(--clr-bg-primary);
padding: 10px; padding: 10px;
} }
@ -1189,23 +1189,26 @@ a.name-tag,
&__label { &__label {
font-weight: 700; font-weight: 700;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
&__box { &__box {
box-sizing: border-box; box-sizing: border-box;
background: var(--background-color);
padding: 10px;
font-weight: 500;
color: $primary-text-color;
width: 52px; width: 52px;
margin: 1px; margin: 1px;
padding: 10px;
font-weight: 500;
color: var(--clr-text-primary);
background: var(--clr-bg-primary);
@for $i from 0 through 10 { @for $i from 0 through 10 {
&--#{10 * $i} { &--#{10 * $i} {
background-color: rgba( @if $i > 5 {
$ui-highlight-color, color: var(--clr-text-on-accent-strong);
1 * (math.div(max(1, $i), 10)) }
background-color: rgb(
from var(--clr-bg-accent-strong) r g b / #{math.div(max(1, $i), 10)}
); );
} }
} }
@ -1216,9 +1219,9 @@ a.name-tag,
.sparkline { .sparkline {
display: block; display: block;
text-decoration: none; text-decoration: none;
background: var(--background-color); background: var(--clr-bg-primary);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
padding: 0; padding: 0;
position: relative; position: relative;
padding-bottom: 55px + 20px; padding-bottom: 55px + 20px;
@ -1236,22 +1239,22 @@ a.name-tag,
margin-inline-end: 10px; margin-inline-end: 10px;
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
color: $primary-text-color; color: var(--clr-text-primary);
} }
&__change { &__change {
display: block; display: block;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: $darker-text-color; color: var(--clr-text-secondary);
margin-bottom: -3px; margin-bottom: -3px;
&.positive { &.positive {
color: $valid-value-color; color: var(--clr-text-success);
} }
&.negative { &.negative {
color: $error-value-color; color: var(--clr-text-error);
} }
} }
} }
@ -1260,7 +1263,7 @@ a.name-tag,
padding: 0 20px; padding: 0 20px;
padding-bottom: 10px; padding-bottom: 10px;
text-transform: uppercase; text-transform: uppercase;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 500; font-weight: 500;
} }
@ -1275,12 +1278,12 @@ a.name-tag,
} }
path:first-child { path:first-child {
fill: color.change($highlight-text-color, $alpha: 0.25) !important; fill: var(--clr-bg-accent-subtle) !important;
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }
path:last-child { path:last-child {
stroke: lighten($highlight-text-color, 6%) !important; stroke: var(--clr-text-accent) !important;
fill: none !important; fill: none !important;
} }
} }
@ -1290,17 +1293,17 @@ a.sparkline {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $ui-base-color; background: var(--clr-bg-accent-subtle);
} }
} }
.skeleton { .skeleton {
background-color: var(--background-color); background-color: var(--clr-bg-primary);
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
lighten($ui-base-color, 8%), var(--clr-bg-primary),
lighten($ui-base-color, 12%), var(--clr-bg-secondary),
lighten($ui-base-color, 8%) var(--clr-bg-primary)
); );
background-size: 200px 100%; background-size: 200px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1327,7 +1330,7 @@ a.sparkline {
} }
&__item { &__item {
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid var(--clr-border-primary);
&__key { &__key {
font-weight: 500; font-weight: 500;
@ -1336,7 +1339,7 @@ a.sparkline {
&__value { &__value {
text-align: end; text-align: end;
color: $darker-text-color; color: var(--clr-text-secondary);
padding: 11px 10px; padding: 11px 10px;
} }
@ -1345,14 +1348,13 @@ a.sparkline {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: $ui-highlight-color; background: var(--clr-text-accent);
margin-inline-end: 10px; margin-inline-end: 10px;
@for $i from 0 through 10 { @for $i from 0 through 10 {
&--#{10 * $i} { &--#{10 * $i} {
background-color: rgba( background-color: rgb(
$ui-highlight-color, from var(--clr-text-accent) r g b / #{math.div(max(1, $i), 10)}
1 * (math.div(max(1, $i), 10))
); );
} }
} }
@ -1363,11 +1365,11 @@ a.sparkline {
} }
&.negative { &.negative {
color: $error-value-color; color: var(--clr-text-error);
font-weight: 700; font-weight: 700;
.dimension__item__value { .dimension__item__value {
color: $error-value-color; color: var(--clr-text-error);
} }
} }
} }
@ -1375,12 +1377,12 @@ a.sparkline {
.report-reason-selector { .report-reason-selector {
border-radius: 4px; border-radius: 4px;
background: var(--background-color); background: var(--clr-bg-primary);
margin-bottom: 20px; margin-bottom: 20px;
&__category { &__category {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid var(--clr-border-primary);
&__label { &__label {
padding: 15px; padding: 15px;
@ -1410,7 +1412,7 @@ a.sparkline {
&__details { &__details {
&__item { &__item {
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
padding: 15px 0; padding: 15px 0;
&:last-child { &:last-child {
@ -1441,7 +1443,7 @@ a.sparkline {
.account-card { .account-card {
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
position: relative; position: relative;
&__warning-badge { &__warning-badge {
@ -1453,7 +1455,7 @@ a.sparkline {
background: background:
url('@/images/warning-stripes.svg') repeat-y left, url('@/images/warning-stripes.svg') repeat-y left,
url('@/images/warning-stripes.svg') repeat-y right, url('@/images/warning-stripes.svg') repeat-y right,
var(--background-color); var(--clr-bg-primary);
} }
&__permalink { &__permalink {
@ -1472,7 +1474,7 @@ a.sparkline {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background: darken($ui-base-color, 8%); background: var(--clr-bg-secondary);
} }
} }
@ -1490,21 +1492,21 @@ a.sparkline {
margin: 0; margin: 0;
width: 56px; width: 56px;
height: 56px; height: 56px;
background-color: darken($ui-base-color, 8%); background-color: var(--clr-bg-secondary);
border-radius: 8px; border-radius: 8px;
border: 1px solid $ui-base-color; border: 1px solid var(--clr-border-media);
} }
} }
.display-name { .display-name {
color: $darker-text-color; color: var(--clr-text-secondary);
padding-bottom: 15px; padding-bottom: 15px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
bdi { bdi {
display: block; display: block;
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 700; font-weight: 700;
} }
} }
@ -1533,7 +1535,7 @@ a.sparkline {
} }
a { a {
color: $secondary-text-color; color: var(--clr-text-primary);
text-decoration: none; text-decoration: none;
unicode-bidi: isolate; unicode-bidi: isolate;
@ -1584,14 +1586,14 @@ a.sparkline {
&__item { &__item {
padding: 15px 0; padding: 15px 0;
text-align: center; text-align: center;
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
line-height: 21px; line-height: 21px;
small { small {
display: block; display: block;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
@ -1604,11 +1606,11 @@ a.sparkline {
margin-bottom: 20px; margin-bottom: 20px;
&__item { &__item {
background: var(--background-color); background: var(--clr-bg-primary);
position: relative; position: relative;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
@ -1630,13 +1632,13 @@ a.sparkline {
} }
&__header { &__header {
color: $darker-text-color; color: var(--clr-text-secondary);
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
margin-bottom: 4px; margin-bottom: 4px;
.username { .username {
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
margin-inline-end: 5px; margin-inline-end: 5px;
@ -1653,7 +1655,7 @@ a.sparkline {
} }
a.timestamp { a.timestamp {
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -1674,7 +1676,7 @@ a.sparkline {
line-height: 20px; line-height: 20px;
overflow-wrap: break-word; overflow-wrap: break-word;
font-weight: 400; font-weight: 400;
color: $primary-text-color; color: var(--clr-text-primary);
p { p {
margin-bottom: 20px; margin-bottom: 20px;
@ -1776,10 +1778,10 @@ a.sparkline {
line-height: 20px; line-height: 20px;
overflow-wrap: break-word; overflow-wrap: break-word;
font-weight: 400; font-weight: 400;
color: $primary-text-color; color: var(--clr-text-primary);
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
a { a {
@ -1808,34 +1810,34 @@ a.sparkline {
list-style: disc; list-style: disc;
padding-inline-start: 15px; padding-inline-start: 15px;
margin-bottom: 20px; margin-bottom: 20px;
color: $darker-text-color; color: var(--clr-text-secondary);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&__text { &__text {
color: $primary-text-color; color: var(--clr-text-primary);
} }
} }
&__statuses-list { &__statuses-list {
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
&__item { &__item {
padding: 16px; padding: 16px;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&__meta { &__meta {
color: $darker-text-color; color: var(--clr-text-secondary);
} }
a { a {
@ -1872,16 +1874,16 @@ a.sparkline {
flex: 0 0 auto; flex: 0 0 auto;
width: 4px; width: 4px;
height: 21px; height: 21px;
background: lighten($ui-base-color, 8%); background: var(--clr-bg-secondary);
margin: 0 2px; margin: 0 2px;
border-radius: 2px; border-radius: 2px;
&.positive { &.positive {
background: $valid-value-color; background: var(--clr-bg-success-strong);
} }
&.negative { &.negative {
background: $error-value-color; background: var(--clr-bg-error-strong);
} }
} }
} }
@ -1938,7 +1940,7 @@ a.sparkline {
&__entry { &__entry {
h5 { h5 {
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--clr-text-primary);
line-height: 25px; line-height: 25px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -1959,7 +1961,7 @@ a.sparkline {
overflow-wrap: break-word; overflow-wrap: break-word;
font-weight: 400; font-weight: 400;
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid lighten($ui-base-color, 4%);
color: $primary-text-color; color: var(--clr-text-primary);
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
@ -2103,23 +2105,23 @@ a.sparkline {
.admin { .admin {
&__terms-of-service { &__terms-of-service {
&__container { &__container {
background: var(--surface-background-color); background: var(--clr-bg-tertiary);
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
overflow: hidden; overflow: hidden;
&__header { &__header {
padding: 16px; padding: 16px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: $secondary-text-color; color: var(--clr-text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
&__body { &__body {
background: var(--background-color); background: var(--clr-bg-primary);
padding: 16px; padding: 16px;
overflow-y: scroll; overflow-y: scroll;
height: 30vh; height: 30vh;
@ -2128,7 +2130,7 @@ a.sparkline {
&__history { &__history {
& > li { & > li {
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -2170,10 +2172,10 @@ a.sparkline {
} }
&.success { &.success {
color: $valid-value-color; color: var(--clr-text-success);
.dot-indicator__indicator { .dot-indicator__indicator {
background-color: $valid-value-color; background-color: var(--clr-bg-success-strong);
} }
} }
} }

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

@ -1,5 +1,6 @@
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@use 'theme_utils' as *;
html.has-modal { html.has-modal {
&, &,
@ -17,11 +18,11 @@ html.has-modal {
body { body {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
background: var(--background-color); background: var(--clr-bg-ambient);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;
color: $primary-text-color; color: var(--clr-text-primary);
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
// Disable kerning for Japanese text to preserve monospaced alignment for readability // Disable kerning for Japanese text to preserve monospaced alignment for readability
@ -228,7 +229,7 @@ button {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
&:hover, &:hover,
&:focus, &:focus,
@ -238,11 +239,11 @@ button {
} }
&__footer { &__footer {
color: $dark-text-color; color: var(--clr-text-secondary);
font-size: 13px; font-size: 13px;
a { a {
color: $dark-text-color; color: var(--clr-text-secondary);
} }
} }
@ -250,7 +251,7 @@ button {
display: inline; display: inline;
border: 0; border: 0;
background: transparent; background: transparent;
color: $dark-text-color; color: var(--clr-text-secondary);
font: inherit; font: inherit;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -267,7 +268,7 @@ button {
} }
&.copied { &.copied {
color: $valid-value-color; color: var(--mas-status-success-color);
transition: none; transition: none;
} }
} }

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

@ -1,5 +1,5 @@
@use 'variables' as *; @use 'variables' as *;
.logo { .logo {
color: $primary-text-color; color: var(--clr-text-primary);
} }

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

File diff suppressed because it is too large Load Diff

9
app/javascript/styles/mastodon/containers.scss
View File

@ -1,4 +1,5 @@
@use 'variables' as *; @use 'variables' as *;
@use 'theme_utils' as *;
.container-alt { .container-alt {
width: 700px; width: 700px;
@ -27,7 +28,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $primary-text-color; color: var(--clr-text-primary);
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
padding: 12px 16px; padding: 12px 16px;
@ -65,7 +66,7 @@
padding: 20px 0; padding: 20px 0;
margin-top: 40px; margin-top: 40px;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
@media screen and (width <= 440px) { @media screen and (width <= 440px) {
width: 100%; width: 100%;
@ -89,7 +90,7 @@
.name { .name {
flex: 1 1 auto; flex: 1 1 auto;
color: $secondary-text-color; color: var(--clr-text-primary);
.username { .username {
display: block; display: block;
@ -97,7 +98,7 @@
line-height: 24px; line-height: 24px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
color: $primary-text-color; color: var(--clr-text-primary);
} }
} }

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

@ -1,42 +1,170 @@
@use 'sass:color'; @use 'sass:color';
@use 'functions' as *; @use 'functions' as *;
@use 'variables' as *; @use 'variables' as *;
@use 'theme_utils' as *;
:root { :root {
--dropdown-border-color: #{lighten($ui-base-color, 4%)}; --clr-black: #000;
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; --clr-grey-950: #181821;
--dropdown-shadow: --clr-grey-800: #292938;
0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)}, --clr-grey-700: #444664;
0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)}; --clr-grey-600: #545778;
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; --clr-grey-500: #606085;
--modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)}; --clr-grey-400: #8b8dac;
--modal-border-color: #{lighten($ui-base-color, 4%)}; --clr-grey-300: #b4b6cb;
--background-border-color: #{lighten($ui-base-color, 4%)}; --clr-grey-200: #d8d9e3;
--background-color: #{darken($ui-base-color, 8%)}; --clr-grey-100: #f0f0f5;
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)}; --clr-grey-50: #f0f1ff;
--surface-background-color: #{darken($ui-base-color, 4%)}; --clr-white: #fff;
--surface-variant-background-color: #{$ui-base-color}; --clr-indigo-600: #6147e6;
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)}; --clr-indigo-400: #8886ff;
--surface-border-color: #{lighten($ui-base-color, 8%)}; --clr-indigo-200: #c8cdfe;
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)}; --clr-indigo-100: #e0e3ff;
--avatar-border-radius: 8px; --clr-indigo-50: #f0f1ff;
--media-outline-color: #{rgba(#fcf8ff, 0.15)}; --clr-light-pink: #ededff;
--overlay-icon-shadow: drop-shadow( --clr-red: #df405a;
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)} --clr-red-100: #ffe4e6;
--clr-red-500: #ff637e;
--clr-red-600: #ec003f;
--clr-yellow-50: #fffbeb;
--clr-yellow-400: #ffb900;
--clr-yellow-600: #e17100;
--clr-green: #79bd9a;
--clr-green-100: #dcfce7;
--clr-green-400: #05df72;
--clr-green-600: #00a63e;
/* TEXT TOKENS */
--clr-text-primary: var(--clr-grey-50);
--clr-text-secondary: var(--clr-grey-400);
--clr-text-on-inverted: var(--clr-grey-950);
--clr-text-accent: var(--clr-indigo-400);
--clr-text-accent-subtle: color-mix(
in oklab,
var(--clr-text-primary),
var(--clr-text-accent)
); );
--error-background-color: #{darken($error-red, 16%)}; --clr-text-on-accent-strong: var(--clr-white);
--error-active-background-color: #{darken($error-red, 12%)}; --clr-text-error: var(--clr-red-500);
--on-error-color: #fff; --clr-text-on-error-strong: var(--clr-white);
--rich-text-container-color: rgba(87, 24, 60, 100%); --clr-text-warning: var(--clr-yellow-400);
--rich-text-text-color: rgba(255, 175, 212, 100%); --clr-text-on-warning-strong: var(--clr-white);
--rich-text-decorations-color: rgba(128, 58, 95, 100%); --clr-text-success: var(--clr-green-400);
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%); --clr-text-on-success-strong: var(--clr-white);
--nested-card-text: #{$secondary-text-color}; --clr-text-disabled: var(--clr-grey-400);
--nested-card-border: 1px solid --clr-text-on-disabled: var(--clr-grey-400);
color(from #{$ui-highlight-color} srgb r g b / 15%);
--input-placeholder-color: #{$dark-text-color}; /* BACKGROUND TOKENS */
--input-background-color: var(--surface-variant-background-color);
--on-input-color: #{$secondary-text-color}; --clr-bg-primary: var(--clr-grey-950);
--clr-bg-secondary-base: var(--clr-indigo-200);
--clr-bg-secondary-strength: 12%;
--clr-bg-secondary: #{css-alpha(
var(--clr-bg-secondary-base),
var(--clr-bg-secondary-strength)
)};
--clr-bg-secondary-solid: #{color-mix(
in srgb,
var(--clr-bg-primary),
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
)};
/* Secondary with doubled mix amount */
--clr-bg-tertiary: #{color-mix(
in oklab,
var(--clr-bg-primary),
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
)};
--clr-bg-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-grey-800);
--clr-bg-inverted: var(--clr-grey-950);
--clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400);
--clr-bg-accent-subtle-strength: 10%;
--clr-bg-accent-subtle: #{css-alpha(
var(--clr-bg-accent-subtle-base),
var(--clr-bg-accent-subtle-strength)
)};
--clr-bg-accent-subtle-highlighted: #{css-alpha(
var(--clr-bg-accent-subtle-base),
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
)};
--clr-bg-accent-strong: var(--clr-indigo-600);
--clr-bg-accent-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-accent-strong),
black var(--clr-bg-accent-subtle-strength)
);
--clr-bg-error-subtle-base: #f41b3b;
--clr-bg-error-subtle-strength: 12%;
--clr-bg-error-subtle: #{css-alpha(
var(--clr-bg-error-subtle-base),
var(--clr-bg-error-subtle-strength)
)};
--clr-bg-error-strong: var(--clr-red-600);
--clr-bg-error-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-error-strong),
black var(--clr-bg-error-subtle-strength)
);
--clr-bg-warning-subtle-base: #ffca1b;
--clr-bg-warning-subtle-strength: 10%;
--clr-bg-warning-subtle: #{css-alpha(
var(--clr-bg-warning-subtle-base),
var(--clr-bg-warning-subtle-strength)
)};
--clr-bg-warning-strong: var(--clr-yellow-600);
--clr-bg-warning-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-warning-strong),
black var(--clr-bg-warning-subtle-strength)
);
--clr-bg-success-subtle-base: #17e865;
--clr-bg-success-subtle-strength: 15%;
--clr-bg-success-subtle: #{css-alpha(
var(--clr-bg-success-subtle-base),
var(--clr-bg-success-subtle-strength)
)};
--clr-bg-success-strong: var(--clr-green-600);
--clr-bg-success-strong-highlighted: color-mix(
in oklab,
var(--clr-bg-success-strong),
black var(--clr-bg-success-subtle-strength)
);
/* BORDER TOKENS */
--clr-border-primary-base: var(--clr-indigo-200);
--clr-border-primary-strength: 18%;
--clr-border-primary: #{css-alpha(
var(--clr-border-primary-base),
var(--clr-border-primary-strength)
)};
--clr-border-strong: var(--clr-grey-200);
--clr-border-media: rgb(252 248 255 / 15%);
--clr-border-on-bg-secondary: #{css-alpha(
var(--clr-border-primary-base),
calc(var(--clr-border-primary-strength) / 1.5)
)};
--clr-border-on-bg-accent-subtle: var(--clr-border-primary);
--clr-border-on-bg-error-subtle: #{css-alpha(var(--clr-text-error), 50%)};
--clr-border-on-bg-warning-subtle: #{css-alpha(var(--clr-text-warning), 50%)};
--clr-border-on-bg-success-subtle: #{css-alpha(var(--clr-text-success), 50%)};
/* LEGACY TOKENS */
--rich-text-container-color: rgb(87 24 60 / 100%);
--rich-text-text-color: rgb(255 175 212 / 100%);
--rich-text-decorations-color: rgb(128 58 95 / 100%);
/* MISCELLANEOUS */
--outline-focus-default: 2px solid var(--clr-text-accent);
--avatar-border-radius: 8px;
--dropdown-shadow:
0 20px 25px -5px rgb(0 0 0 / 80%), 0 8px 10px -6px rgb(0 0 0 / 80%);
--overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 80%));
} }
body { body {

22
app/javascript/styles/mastodon/dashboard.scss
View File

@ -16,9 +16,9 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: var(--background-color); background: var(--clr-bg-primary);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
@ -41,7 +41,7 @@
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
color: $primary-text-color; color: var(--clr-text-primary);
margin-bottom: 20px; margin-bottom: 20px;
line-height: 30px; line-height: 30px;
} }
@ -52,7 +52,7 @@
&__label { &__label {
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--clr-text-secondary);
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
@ -85,8 +85,8 @@
display: flex; display: flex;
align-items: baseline; align-items: baseline;
border-radius: 4px; border-radius: 4px;
background: $ui-button-background-color; background: var(--clr-bg-accent-strong);
color: $primary-text-color; color: var(--clr-text-on-accent-strong);
transition: all 100ms ease-in; transition: all 100ms ease-in;
font-size: 14px; font-size: 14px;
padding: 8px 16px; padding: 8px 16px;
@ -96,18 +96,18 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: $ui-button-focus-background-color; background-color: var(--clr-bg-accent-strong-highlighted);
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
&.positive { &.positive {
background: lighten($ui-base-color, 4%); background: var(--clr-bg-success-subtle);
color: $valid-value-color; color: var(--clr-text-success);
} }
&.negative { &.negative {
background: lighten($ui-base-color, 4%); background: var(--clr-bg-error-subtle);
color: $error-value-color; color: var(--clr-text-error);
} }
span { span {

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

@ -18,7 +18,7 @@
.emoji-mart-bar { .emoji-mart-bar {
&:first-child { &:first-child {
background: var(--dropdown-border-color); background: var(--clr-border-primary);
} }
} }
@ -39,10 +39,14 @@
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: 0; border: 0;
color: $darker-text-color; color: var(--clr-text-secondary);
&:hover { &:hover {
color: lighten($darker-text-color, 4%); color: color-mix(
in oklab,
var(--clr-text-primary),
var(--clr-text-secondary)
);
} }
} }
@ -101,9 +105,9 @@
font-family: inherit; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
background: $ui-base-color; background: var(--clr-bg-secondary);
color: $darker-text-color; color: var(--clr-text-secondary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
&::-moz-focus-inner { &::-moz-focus-inner {
@ -133,7 +137,6 @@
transition: all 100ms linear; transition: all 100ms linear;
transition-property: opacity; transition-property: opacity;
pointer-events: auto; pointer-events: auto;
opacity: 0.7;
&:disabled { &:disabled {
cursor: default; cursor: default;
@ -141,7 +144,7 @@
} }
svg { svg {
fill: $darker-text-color; fill: currentColor;
} }
} }
@ -165,7 +168,7 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--dropdown-border-color); background-color: var(--clr-border-primary);
border-radius: 100%; border-radius: 100%;
} }
} }

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

@ -16,7 +16,7 @@ code {
.form-section { .form-section {
border-radius: 8px; border-radius: 8px;
background: var(--surface-background-color); background: var(--clr-bg-tertiary);
padding: 24px; padding: 24px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -31,11 +31,7 @@ code {
&::after { &::after {
content: ''; content: '';
display: block; display: block;
background: linear-gradient( background: linear-gradient(to bottom, var(--clr-bg-tertiary), transparent);
to bottom,
var(--surface-background-color),
transparent
);
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
@ -58,7 +54,7 @@ code {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
color: $primary-text-color; color: var(--clr-text-primary);
&.success { &.success {
background: $success-green; background: $success-green;
@ -126,7 +122,7 @@ code {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
padding-top: 5px; padding-top: 5px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
width: auto; width: auto;
} }
@ -189,7 +185,7 @@ code {
.lead { .lead {
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
color: $secondary-text-color; color: var(--clr-text-primary);
margin-bottom: 30px; margin-bottom: 30px;
&.invited-by { &.invited-by {
@ -208,7 +204,7 @@ code {
} }
.hint { .hint {
color: $darker-text-color; color: var(--clr-text-secondary);
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -242,7 +238,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: $darker-text-color; color: var(--clr-text-secondary);
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;
@ -278,7 +274,7 @@ code {
& > label { & > label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
min-width: 150px; min-width: 150px;
flex: 0 0 auto; flex: 0 0 auto;
@ -300,7 +296,7 @@ code {
.label_input > label { .label_input > label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -322,7 +318,7 @@ code {
& > label { & > label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 20px;
@ -381,7 +377,7 @@ code {
.required abbr { .required abbr {
text-decoration: none; text-decoration: none;
color: lighten($error-value-color, 12%); color: var(--clr-text-error);
} }
.fields-group { .fields-group {
@ -474,7 +470,7 @@ code {
margin-bottom: 5px; margin-bottom: 5px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
width: auto; width: auto;
} }
@ -484,7 +480,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: inline-block; display: inline-block;
width: auto; width: auto;
position: relative; position: relative;
@ -505,7 +501,7 @@ code {
.input.static .label_input__wrapper { .input.static .label_input__wrapper {
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
border: 1px solid $dark-text-color; border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
} }
@ -519,14 +515,14 @@ code {
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: $ui-base-color; background: var(--clr-bg-primary);
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
padding: 10px 16px; padding: 10px 16px;
@ -535,7 +531,7 @@ code {
} }
&:required:valid { &:required:valid {
border-color: $valid-value-color; border-color: var(--clr-text-success);
} }
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@ -550,13 +546,13 @@ code {
input[type='datetime-local'] { input[type='datetime-local'] {
&:focus:invalid:not(:placeholder-shown), &:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) { &:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%); border-color: var(--clr-text-error);
} }
} }
.input.field_with_errors { .input.field_with_errors {
label { label {
color: lighten($error-red, 12%); color: var(--clr-text-error);
} }
input[type='text'], input[type='text'],
@ -566,13 +562,13 @@ code {
input[type='datetime-local'], input[type='datetime-local'],
textarea, textarea,
select { select {
border-color: lighten($error-red, 12%); border-color: var(--clr-text-error);
} }
.error { .error {
display: block; display: block;
font-weight: 500; font-weight: 500;
color: lighten($error-red, 12%); color: var(--clr-text-error);
margin-top: 4px; margin-top: 4px;
} }
} }
@ -605,8 +601,8 @@ code {
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: $ui-button-background-color; background: var(--clr-bg-accent-strong);
color: $ui-button-color; color: var(--clr-text-on-accent-strong);
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
height: auto; height: auto;
@ -625,21 +621,22 @@ code {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: $ui-button-focus-background-color; background: var(--clr-bg-accent-strong-highlighted);
} }
&:disabled, &:disabled,
&:disabled:hover { &:disabled:hover {
background-color: $ui-button-disabled-color; color: var(--clr-text-on-disabled);
background: var(--clr-bg-disabled);
} }
&.negative { &.negative {
background: $ui-button-destructive-background-color; background: var(--clr-bg-error-strong);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background-color: $ui-button-destructive-focus-background-color; background: var(--clr-bg-error-strong-highlighted);
} }
} }
} }
@ -648,7 +645,7 @@ code {
appearance: none; appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--clr-text-primary);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
@ -657,7 +654,7 @@ code {
background: $ui-base-color background: $ui-base-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px; no-repeat right 8px center / auto 14px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
@ -729,30 +726,30 @@ code {
} }
.flash-message { .flash-message {
background: var(--background-color); color: var(--clr-text-accent);
color: $highlight-text-color; background: var(--clr-bg-accent-subtle);
border: 1px solid $highlight-text-color; border: 1px solid var(--clr-text-accent);
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
&.notice { &.notice {
border: 1px solid color.change($valid-value-color, $alpha: 0.5); border: 1px solid var(--clr-border-on-bg-accent-subtle);
background: color.change($valid-value-color, $alpha: 0.25); background: var(--clr-bg-success-subtle);
color: $valid-value-color; color: var(--clr-text-success);
} }
&.warning { &.warning {
border: 1px solid color.change($gold-star, $alpha: 0.5); border: 1px solid var(--clr-border-on-bg-warning-subtle);
background: color.change($gold-star, $alpha: 0.25); background: var(--clr-bg-warning-subtle);
color: $gold-star; color: var(--clr-text-warning);
} }
&.alert { &.alert {
border: 1px solid color.change($error-value-color, $alpha: 0.5); border: 1px solid var(--clr-border-on-bg-error-subtle);
background: color.change($error-value-color, $alpha: 0.1); background: var(--clr-bg-error-subtle);
color: $error-value-color; color: var(--clr-text-error);
} }
&.hidden { &.hidden {
@ -767,11 +764,11 @@ code {
a { a {
display: inline-block; display: inline-block;
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $primary-text-color; color: var(--clr-text-primary);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -802,7 +799,7 @@ code {
padding: 10px; padding: 10px;
font-family: $font-monospace, monospace; font-family: $font-monospace, monospace;
background: $ui-base-color; background: $ui-base-color;
color: $primary-text-color; color: var(--clr-text-primary);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -873,7 +870,7 @@ code {
text-align: center; text-align: center;
a { a {
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -909,7 +906,7 @@ code {
.oauth-prompt, .oauth-prompt,
.follow-prompt { .follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
color: $darker-text-color; color: var(--clr-text-secondary);
h2 { h2 {
font-size: 16px; font-size: 16px;
@ -918,7 +915,7 @@ code {
} }
strong { strong {
color: $secondary-text-color; color: var(--clr-text-primary);
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -987,7 +984,7 @@ code {
.qr-alternative { .qr-alternative {
margin-bottom: 20px; margin-bottom: 20px;
color: $secondary-text-color; color: var(--clr-text-primary);
flex: 150px; flex: 150px;
samp { samp {
@ -999,8 +996,8 @@ code {
.simple_form { .simple_form {
.warning { .warning {
box-sizing: border-box; box-sizing: border-box;
background: color.change($error-value-color, $alpha: 0.5); background: var(--clr-bg-error-subtle);
color: $primary-text-color; color: var(--clr-text-primary);
text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3); text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4); box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
border-radius: 4px; border-radius: 4px;
@ -1008,7 +1005,7 @@ code {
margin-bottom: 15px; margin-bottom: 15px;
a { a {
color: $primary-text-color; color: var(--clr-text-primary);
text-decoration: underline; text-decoration: underline;
&:hover, &:hover,
@ -1051,7 +1048,7 @@ code {
.post-follow-actions { .post-follow-actions {
text-align: center; text-align: center;
color: $darker-text-color; color: var(--clr-text-secondary);
div { div {
margin-bottom: 4px; margin-bottom: 4px;
@ -1064,7 +1061,7 @@ code {
h4 { h4 {
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--clr-text-primary);
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
border: 0; border: 0;
@ -1127,11 +1124,11 @@ code {
} }
&.copied { &.copied {
border-color: $valid-value-color; border-color: var(--clr-text-success);
transition: none; transition: none;
button { button {
background: $valid-value-color; background: var(--clr-bg-success-strong);
transition: none; transition: none;
} }
} }
@ -1166,7 +1163,7 @@ code {
} }
&__type { &__type {
color: $darker-text-color; color: var(--clr-text-secondary);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
} }
@ -1175,7 +1172,7 @@ code {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 18px; font-size: 18px;
width: 30px; width: 30px;
color: $valid-value-color; color: var(--clr-text-success);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -1268,7 +1265,7 @@ code {
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: $secondary-text-color; color: var(--clr-text-primary);
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
width: 100px; width: 100px;
@ -1319,10 +1316,14 @@ code {
&__header-input { &__header-input {
display: block; display: block;
border-radius: 8px; border-radius: 8px;
background: var(--surface-variant-background-color); background: var(--clr-bg-secondary);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:hover {
background-color: var(--clr-bg-accent-subtle);
}
img { img {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1337,12 +1338,12 @@ code {
inset-inline-start: 50%; inset-inline-start: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: $darker-text-color; color: var(--clr-text-secondary);
z-index: 3; z-index: 3;
} }
&.selected .icon { &.selected .icon {
color: $primary-text-color; color: var(--clr-text-primary);
transform: none; transform: none;
inset-inline-start: auto; inset-inline-start: auto;
inset-inline-end: 8px; inset-inline-end: 8px;
@ -1351,7 +1352,7 @@ code {
} }
&.invalid img { &.invalid img {
outline: 1px solid $error-value-color; outline: 1px solid var(--clr-text-error);
outline-offset: -1px; outline-offset: -1px;
} }
@ -1361,14 +1362,10 @@ code {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background: color.change($error-value-color, $alpha: 0.25); background: var(--clr-bg-error-subtle);
z-index: 2; z-index: 2;
border-radius: 8px; border-radius: 8px;
} }
&:hover {
background-color: var(--surface-variant-active-background-color);
}
} }
&__avatar-input { &__avatar-input {
@ -1384,7 +1381,7 @@ code {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
color: $darker-text-color; color: var(--clr-text-secondary);
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -1401,14 +1398,14 @@ code {
flex: 1 1 auto; flex: 1 1 auto;
strong { strong {
color: $primary-text-color; color: var(--clr-text-primary);
font-weight: 600; font-weight: 600;
} }
.hint { .hint {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
.recommended { .recommended {
@ -1426,7 +1423,7 @@ code {
&__toggle > div { &__toggle > div {
display: flex; display: flex;
border-inline-start: 1px solid var(--background-border-color); border-inline-start: 1px solid var(--clr-border-primary);
padding-inline-start: 16px; padding-inline-start: 16px;
} }
} }
@ -1437,19 +1434,19 @@ code {
padding: 8px 0; padding: 8px 0;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--clr-text-primary);
margin-bottom: 16px; margin-bottom: 16px;
&__text { &__text {
flex: 1 1 auto; flex: 1 1 auto;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: $darker-text-color; color: var(--clr-text-secondary);
strong { strong {
font-weight: 600; font-weight: 600;
display: block; display: block;
color: $primary-text-color; color: var(--clr-text-primary);
} }
.icon { .icon {

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

@ -78,11 +78,11 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
color: $secondary-text-color; color: var(--clr-text-primary);
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid $darker-text-color; border: 1px solid var(--clr-text-secondary);
border-radius: 4px; border-radius: 4px;
padding: 8px 12px; padding: 8px 12px;
@ -111,7 +111,7 @@
&__input { &__input {
display: block; display: block;
position: relative; position: relative;
border: 1px solid $ui-primary-color; border: 1px solid var(--clr-bg-primary);
box-sizing: border-box; box-sizing: border-box;
width: 17px; width: 17px;
height: 17px; height: 17px;
@ -125,13 +125,13 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: lighten($valid-value-color, 15%); border-color: var(--clr-text-success);
border-width: 4px; border-width: 4px;
} }
&.active { &.active {
background-color: $valid-value-color; background-color: var(--clr-bg-success-strong);
border-color: $valid-value-color; border-color: var(--clr-text-success);
} }
&::-moz-focus-inner { &::-moz-focus-inner {

9
app/javascript/styles/mastodon/reset.scss
View File

@ -1,4 +1,5 @@
@use 'variables' as *; @use 'variables' as *;
@use 'theme_utils' as *;
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
@ -57,7 +58,7 @@ table {
@supports not selector(::-webkit-scrollbar) { @supports not selector(::-webkit-scrollbar) {
html { html {
scrollbar-color: $action-button-color var(--background-border-color); scrollbar-color: $action-button-color var(--clr-border-primary);
} }
} }
@ -69,14 +70,14 @@ table {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $action-button-color; background-color: $action-button-color;
border: 2px var(--background-border-color); border: 2px var(--clr-border-primary);
border-radius: 12px; border-radius: 12px;
width: 6px; width: 6px;
box-shadow: inset 0 0 0 2px var(--background-border-color); box-shadow: inset 0 0 0 2px var(--clr-border-primary);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: var(--background-border-color); background-color: var(--clr-border-primary);
border-radius: 0px; border-radius: 0px;
} }

56
app/javascript/styles/mastodon/tables.scss
View File

@ -12,9 +12,9 @@
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
text-align: start; text-align: start;
background: var(--background-color); background: var(--clr-bg-primary);
&.critical { &.critical {
font-weight: 700; font-weight: 700;
@ -33,7 +33,7 @@
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > th {
background: var(--background-color); background: var(--clr-bg-primary);
} }
& > tbody > tr:last-child > td, & > tbody > tr:last-child > td,
@ -42,7 +42,7 @@
} }
a { a {
color: $darker-text-color; color: var(--clr-text-secondary);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -84,30 +84,30 @@
& > tbody > tr > td { & > tbody > tr > td {
padding: 11px 10px; padding: 11px 10px;
background: transparent; background: transparent;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
color: $secondary-text-color; color: var(--clr-text-primary);
} }
& > tbody > tr > th { & > tbody > tr > th {
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 600; font-weight: 600;
} }
} }
&.batch-table { &.batch-table {
& > thead > tr > th { & > thead > tr > th {
background: var(--background-color); background: var(--clr-bg-primary);
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
border-bottom: 1px solid var(--background-border-color); border-bottom: 1px solid var(--clr-border-primary);
&:first-child { &:first-child {
border-radius: 4px 0 0; border-radius: 4px 0 0;
border-inline-start: 1px solid var(--background-border-color); border-inline-start: 1px solid var(--clr-border-primary);
} }
&:last-child { &:last-child {
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
border-inline-end: 1px solid var(--background-border-color); border-inline-end: 1px solid var(--clr-border-primary);
} }
} }
} }
@ -138,7 +138,7 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-inline-end: 5px; margin-inline-end: 5px;
padding: 0 10px; padding: 0 10px;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
@ -196,8 +196,8 @@ a.table-action-link {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 200; z-index: 200;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
background: var(--background-color); background: var(--clr-bg-primary);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
height: 47px; height: 47px;
align-items: center; align-items: center;
@ -213,13 +213,13 @@ a.table-action-link {
} }
&__select-all { &__select-all {
background: var(--background-color); background: var(--clr-bg-primary);
height: 47px; height: 47px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-top: 0; border-top: 0;
color: $secondary-text-color; color: var(--clr-text-primary);
display: none; display: none;
&.active { &.active {
@ -263,9 +263,9 @@ a.table-action-link {
&__form { &__form {
padding: 16px; padding: 16px;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-top: 0; border-top: 0;
background: var(--background-color); background: var(--clr-bg-primary);
.fields-row { .fields-row {
padding-top: 0; padding-top: 0;
@ -274,13 +274,13 @@ a.table-action-link {
} }
&__row { &__row {
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-top: 0; border-top: 0;
background: var(--background-color); background: var(--clr-bg-primary);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child { .optional &:first-child {
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
} }
} }
@ -331,7 +331,7 @@ a.table-action-link {
&__extra { &__extra {
flex: 0 0 auto; flex: 0 0 auto;
text-align: end; text-align: end;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 500; font-weight: 500;
} }
} }
@ -363,17 +363,17 @@ a.table-action-link {
} }
.nothing-here { .nothing-here {
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-top: 0; border-top: 0;
box-shadow: none; box-shadow: none;
background: var(--background-color); background: var(--clr-bg-primary);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
} }
&--no-toolbar { &--no-toolbar {
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--clr-border-primary);
} }
} }

19
app/javascript/styles/mastodon/widgets.scss
View File

@ -1,6 +1,7 @@
@use 'sass:color'; @use 'sass:color';
@use 'variables' as *; @use 'variables' as *;
@use 'functions' as *; @use 'functions' as *;
@use 'theme_utils' as *;
.directory { .directory {
&__tag { &__tag {
@ -12,7 +13,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid var(--background-border-color); border: 1px solid var(--clr-border-primary);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
@ -42,13 +43,13 @@
flex: 1 1 auto; flex: 1 1 auto;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $primary-text-color; color: var(--clr-text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.fa { .fa {
color: $darker-text-color; color: var(--clr-text-secondary);
} }
small { small {
@ -56,7 +57,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
margin-top: 8px; margin-top: 8px;
color: $darker-text-color; color: var(--clr-text-secondary);
} }
} }
@ -65,7 +66,7 @@
.fa, .fa,
small, small,
.trends__item__current { .trends__item__current {
color: $primary-text-color; color: var(--clr-text-primary);
} }
} }
@ -100,7 +101,7 @@
thead th { thead th {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;
@ -124,11 +125,11 @@
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--clr-text-primary);
small { small {
display: block; display: block;
color: $darker-text-color; color: var(--clr-text-secondary);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@ -137,7 +138,7 @@
tbody td.accounts-table__extra { tbody td.accounts-table__extra {
width: 120px; width: 120px;
text-align: end; text-align: end;
color: $darker-text-color; color: var(--clr-text-secondary);
padding-inline-end: 16px; padding-inline-end: 16px;
a { a {