From 37236acd3b0c25b240b9eb0f205eec1d1f654218 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Wed, 25 Mar 2026 15:34:38 +0100 Subject: [PATCH] Update web theme tokens with latest design system tokens (#38387) --- .../components/callout/styles.module.css | 14 +- .../components/form_fields/select.module.scss | 2 +- .../form_fields/text_input.module.scss | 4 +- .../mastodon/components/tags/style.module.css | 4 +- .../account_edit/modals/styles.module.scss | 2 +- .../features/account_edit/styles.module.scss | 6 +- .../components/redesign.module.scss | 12 +- .../skip_links/skip_links.module.scss | 2 +- app/javascript/styles/mastodon/_mixins.scss | 2 +- app/javascript/styles/mastodon/accounts.scss | 16 +- app/javascript/styles/mastodon/admin.scss | 20 +-- app/javascript/styles/mastodon/basics.scss | 6 +- .../styles/mastodon/components.scss | 162 +++++++++--------- app/javascript/styles/mastodon/dashboard.scss | 6 +- .../styles/mastodon/emoji_picker.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 28 +-- app/javascript/styles/mastodon/modal.scss | 4 +- app/javascript/styles/mastodon/polls.scss | 2 +- .../styles/mastodon/theme/_base.scss | 63 +++++-- .../styles/mastodon/theme/_dark.scss | 158 ++++++----------- .../styles/mastodon/theme/_light.scss | 158 ++++++----------- app/javascript/styles/mastodon/widgets.scss | 2 +- 22 files changed, 295 insertions(+), 380 deletions(-) diff --git a/app/javascript/mastodon/components/callout/styles.module.css b/app/javascript/mastodon/components/callout/styles.module.css index 14003ccf5d..9df3ea40d2 100644 --- a/app/javascript/mastodon/components/callout/styles.module.css +++ b/app/javascript/mastodon/components/callout/styles.module.css @@ -3,7 +3,7 @@ align-items: start; padding: 12px; gap: 8px; - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); color: var(--color-text-primary); border-radius: 12px; } @@ -86,11 +86,11 @@ } .variantSubtle { - border: 1px solid var(--color-bg-brand-softer); + border: 1px solid var(--color-bg-brand-softest); background-color: var(--color-bg-primary); .icon { - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); } } @@ -105,11 +105,11 @@ .variantInverted { background-color: var(--color-bg-inverted); - color: var(--color-text-on-inverted); + color: var(--color-text-inverted); } .variantSuccess { - background-color: var(--color-bg-success-softer); + background-color: var(--color-bg-success-softest); .icon { background-color: var(--color-bg-success-soft); @@ -117,7 +117,7 @@ } .variantWarning { - background-color: var(--color-bg-warning-softer); + background-color: var(--color-bg-warning-softest); .icon { background-color: var(--color-bg-warning-soft); @@ -125,7 +125,7 @@ } .variantError { - background-color: var(--color-bg-error-softer); + background-color: var(--color-bg-error-softest); .icon { background-color: var(--color-bg-error-soft); diff --git a/app/javascript/mastodon/components/form_fields/select.module.scss b/app/javascript/mastodon/components/form_fields/select.module.scss index e68e248fec..7ba0a53cbf 100644 --- a/app/javascript/mastodon/components/form_fields/select.module.scss +++ b/app/javascript/mastodon/components/form_fields/select.module.scss @@ -61,6 +61,6 @@ } [data-has-error='true'] & { - border-color: var(--color-text-error); + border-color: var(--color-border-error); } } diff --git a/app/javascript/mastodon/components/form_fields/text_input.module.scss b/app/javascript/mastodon/components/form_fields/text_input.module.scss index f432f57055..105b956cc5 100644 --- a/app/javascript/mastodon/components/form_fields/text_input.module.scss +++ b/app/javascript/mastodon/components/form_fields/text_input.module.scss @@ -32,11 +32,11 @@ &:focus:user-invalid, &:required:user-invalid, [data-has-error='true'] & { - outline-color: var(--color-text-error); + outline-color: var(--color-border-error); } &:focus { - outline-color: var(--color-text-brand); + outline-color: var(--color-border-brand); } &:required:user-valid { diff --git a/app/javascript/mastodon/components/tags/style.module.css b/app/javascript/mastodon/components/tags/style.module.css index f3c507b644..dd14cc43df 100644 --- a/app/javascript/mastodon/components/tags/style.module.css +++ b/app/javascript/mastodon/components/tags/style.module.css @@ -22,8 +22,8 @@ button.tag:focus-visible { } .active { - border-color: var(--color-text-brand); - background: var(--color-bg-brand-softer); + border-color: var(--color-border-brand); + background: var(--color-bg-brand-softest); color: var(--color-text-brand); } diff --git a/app/javascript/mastodon/features/account_edit/modals/styles.module.scss b/app/javascript/mastodon/features/account_edit/modals/styles.module.scss index ebe36d412b..f4eaf04f09 100644 --- a/app/javascript/mastodon/features/account_edit/modals/styles.module.scss +++ b/app/javascript/mastodon/features/account_edit/modals/styles.module.scss @@ -58,7 +58,7 @@ transition: background 0.2s ease-in-out; &:hover { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } &:focus-visible { diff --git a/app/javascript/mastodon/features/account_edit/styles.module.scss b/app/javascript/mastodon/features/account_edit/styles.module.scss index b2ab20ae3b..69abdb856b 100644 --- a/app/javascript/mastodon/features/account_edit/styles.module.scss +++ b/app/javascript/mastodon/features/account_edit/styles.module.scss @@ -160,7 +160,7 @@ &:active, &:focus, &:hover { - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); } &:disabled { @@ -177,7 +177,7 @@ .deleteButton { --default-icon-color: var(--color-text-error); - --hover-bg-color: var(--color-bg-error-base-hover); + --hover-bg-color: var(--color-bg-error-base); --hover-icon-color: var(--color-text-on-error-base); } @@ -201,7 +201,7 @@ &, &:global(.active) { // Overrides the transparent background added by default with .active - --hover-bg-color: var(--color-bg-brand-softer-solid); + --hover-bg-color: var(--color-bg-brand-softest); } position: absolute; diff --git a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss index 3b6a95d099..d483922e77 100644 --- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss +++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss @@ -93,7 +93,7 @@ } svg { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); width: 28px; height: 28px; padding: 5px; @@ -184,7 +184,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .badgeMuted { background-color: var(--color-bg-inverted); - color: var(--color-text-on-inverted); + color: var(--color-text-inverted); } .badgeBlocked { @@ -270,7 +270,7 @@ svg.badgeIcon { } .fieldVerified { - background-color: var(--color-bg-success-softer); + background-color: var(--color-bg-success-softest); dt { padding-right: 24px; @@ -292,8 +292,8 @@ svg.badgeIcon { } .fieldOverflowButton { - --default-bg-color: var(--color-bg-secondary-solid); - --hover-bg-color: var(--color-bg-brand-softer-solid); + --default-bg-color: var(--color-bg-secondary); + --hover-bg-color: var(--color-bg-brand-softest); position: absolute; right: 8px; @@ -413,7 +413,7 @@ svg.badgeIcon { :global(.active) { color: var(--color-text-brand); - border-bottom: 4px solid var(--color-text-brand); + border-bottom: 4px solid var(--color-border-brand); padding-bottom: 14px; } } diff --git a/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss b/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss index 1d4dc1c3f5..ad206dfecc 100644 --- a/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss +++ b/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss @@ -33,7 +33,7 @@ &:focus-within { outline: var(--outline-focus-default); - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } :any-link { diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index a8c3604dc5..c92c8d8cee 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -7,7 +7,7 @@ background: var(--color-bg-secondary); color: var(--color-text-primary); border-radius: 4px; - border: 1px solid var(--color-border-on-bg-secondary); + border: 1px solid var(--color-border-primary); font-size: 17px; line-height: normal; margin: 0; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index d1c35e3f9e..fad41b5eb8 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -13,7 +13,7 @@ &:active, &:focus { .card__bar { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } } @@ -220,8 +220,8 @@ .information-badge { &.superapp { color: var(--color-text-success); - background-color: var(--color-bg-success-softer); - border-color: var(--color-border-on-bg-success-softer); + background-color: var(--color-bg-success-softest); + border-color: var(--color-border-success-soft); } } @@ -229,7 +229,7 @@ display: inline-flex; padding: 4px; padding-inline-end: 8px; - border: 1px solid var(--color-text-brand); + border: 1px solid var(--color-border-brand); color: var(--color-text-brand); font-weight: 500; font-size: 12px; @@ -255,8 +255,8 @@ .simple_form .not_recommended { color: var(--color-text-error); - background-color: var(--color-bg-error-softer); - border-color: var(--color-border-on-bg-error-softer); + background-color: var(--color-bg-error-softest); + border-color: var(--color-border-error-soft); } .account__header__fields { @@ -310,8 +310,8 @@ } .verified { - border: 1px solid var(--color-border-on-bg-success-softer); - background: var(--color-bg-success-softer); + border: 1px solid var(--color-border-success-soft); + background: var(--color-bg-success-softest); a { color: var(--color-text-success); diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 8e716d2bc7..47f3ff080c 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -68,7 +68,7 @@ $content-width: 840px; border-radius: 4px; &:focus { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } .material-close { @@ -438,7 +438,7 @@ $content-width: 840px; } ul .simple-navigation-active-leaf a { - border-bottom-color: var(--color-text-brand); + border-bottom-color: var(--color-border-brand); } } } @@ -499,7 +499,7 @@ body, kbd { font-family: Courier, monospace; - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); padding: 4px; padding-bottom: 2px; border-radius: 5px; @@ -566,7 +566,7 @@ kbd { &.selected { color: var(--color-text-brand); - border-bottom: 2px solid var(--color-text-brand); + border-bottom: 2px solid var(--color-border-brand); } } } @@ -829,14 +829,14 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-inline-start: 4px solid var(--color-text-brand); + border-inline-start: 4px solid var(--color-border-brand); &.positive { border-color: var(--color-text-success); } &.negative { - border-color: var(--color-text-error); + border-color: var(--color-border-error); } &.warning { @@ -1298,7 +1298,7 @@ a.sparkline { &:hover, &:focus, &:active { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } @@ -1922,7 +1922,7 @@ a.sparkline { width: calc(1.375rem + 1px); height: calc(1.375rem + 1px); background: var(--color-bg-primary); - border: 1px solid var(--color-text-brand); + border: 1px solid var(--color-border-brand); color: var(--color-text-brand); border-radius: 8px; } @@ -2006,8 +2006,8 @@ a.sparkline { display: block; box-sizing: border-box; color: var(--color-text-primary); - background: var(--color-bg-brand-softer); - border: 1px solid var(--color-border-on-bg-brand-softer); + background: var(--color-bg-brand-softest); + border: 1px solid var(--color-border-brand-soft); border-radius: 8px; padding: 8px 13px; position: relative; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 610730df5a..a16afbe9a5 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -2,13 +2,13 @@ html { color: var(--color-text-primary); - background: var(--color-bg-ambient); + background: var(--color-bg-primary); &.custom-scrollbars { scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); } - --outline-focus-default: 2px solid var(--color-text-brand); + --outline-focus-default: 2px solid var(--color-border-brand); --avatar-border-radius: 8px; --max-media-height-small: 460px; --max-media-height-large: 566px; @@ -46,7 +46,7 @@ html.has-modal { body { font-family: $font-sans-serif, sans-serif; - background: var(--color-bg-ambient); + background: var(--color-bg-primary); font-size: 13px; line-height: 18px; font-weight: 400; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e38193c30b..d254d0ae52 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -114,7 +114,7 @@ } &:focus-visible { - outline: 2px solid var(--color-bg-brand-base); + outline: var(--outline-focus-default); outline-offset: 2px; } @@ -169,12 +169,12 @@ color: var(--color-text-brand); background: transparent; padding: 6px 17px; - border: 1px solid var(--color-text-brand); + border: 1px solid var(--color-border-brand); &:active, &:focus, &:hover { - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); color: var(--color-text-brand); background-color: transparent; text-decoration: none; @@ -184,7 +184,7 @@ &:active, &:focus, &:hover { - border-color: var(--color-text-error); + border-color: var(--color-border-error); color: var(--color-text-error); } } @@ -284,8 +284,8 @@ --default-icon-color: var(--color-text-secondary); --default-bg-color: transparent; --hover-icon-color: var(--color-text-primary); - --hover-bg-color: var(--color-bg-brand-softer); - --focus-outline-color: var(--color-text-brand); + --hover-bg-color: var(--color-bg-brand-softest); + --focus-outline-color: var(--color-border-brand); display: inline-flex; color: var(--default-icon-color); @@ -364,8 +364,8 @@ &.copied { color: var(--color-text-success); transition: none; - background-color: var(--color-bg-success-softer); - border-color: var(--color-border-on-bg-brand-softer); + background-color: var(--color-bg-success-softest); + border-color: var(--color-border-success-soft); } } @@ -537,21 +537,21 @@ body > [data-popper-placement] { flex-direction: column; flex: 0 1 auto; border-radius: 4px; - border: 1px solid var(--color-border-on-bg-secondary); + border: 1px solid var(--color-border-primary); transition: border-color 300ms linear; position: relative; background: var(--color-bg-secondary); &.active { transition: none; - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); } } &__warning { color: var(--color-text-primary); - background: var(--color-bg-warning-softer); - border: 1px solid var(--color-border-on-bg-warning-softer); + background: var(--color-bg-warning-softest); + border: 1px solid var(--color-border-warning-soft); padding: 8px 10px; border-radius: 4px; font-size: 13px; @@ -619,7 +619,7 @@ body > [data-popper-placement] { .spoiler-input__input { padding: 12px 12px - 5px; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); color: var(--color-text-brand); } @@ -885,7 +885,7 @@ body > [data-popper-placement] { line-height: 20px; letter-spacing: 0.1px; color: var(--color-text-brand); - background-color: var(--color-bg-secondary-solid); + background-color: var(--color-bg-secondary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -917,7 +917,7 @@ body > [data-popper-placement] { gap: 4px; color: var(--color-text-brand); background: transparent; - border: 1px solid var(--color-text-brand); + border: 1px solid var(--color-border-brand); border-radius: 6px; padding: 4px 8px; font-size: 13px; @@ -1464,9 +1464,9 @@ body > [data-popper-placement] { .focusable { &:focus-visible { - outline: 2px solid var(--color-text-brand); + outline: 2px solid var(--color-border-brand); outline-offset: -2px; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } @@ -1587,7 +1587,7 @@ body > [data-popper-placement] { content: ''; position: absolute; inset: 0; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); opacity: 0; animation: fade 0.7s reverse both 0.3s; pointer-events: none; @@ -1739,7 +1739,7 @@ body > [data-popper-placement] { .notification-ungrouped--direct, .notification-group--direct, .notification-group--annual-report { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); &:focus { background: var(--color-bg-brand-soft); @@ -1877,7 +1877,7 @@ body > [data-popper-placement] { .detailed-status__wrapper-direct { .detailed-status, .detailed-status__action-bar { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } .status__prepend { @@ -1932,7 +1932,7 @@ body > [data-popper-placement] { line-height: 20px; letter-spacing: 0.25px; color: var(--color-text-secondary); - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); border-radius: 8px; cursor: default; } @@ -2060,7 +2060,7 @@ body > [data-popper-placement] { &__domain-pill { display: inline-flex; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); border-radius: 4px; border: 0; color: var(--color-text-brand); @@ -2121,7 +2121,7 @@ body > [data-popper-placement] { &__handle { border: 2px dashed var(--color-border-on-brand-softer); - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); padding: 12px 8px; color: var(--color-text-brand); border-radius: 4px; @@ -2903,11 +2903,15 @@ a.account__display-name { &:focus, &:hover, &:active { - &:not(:disabled, [aria-disabled='true']) { - background: var(--color-bg-secondary); + &:where(:not(:disabled, [aria-disabled='true'])) { + background: var(--color-bg-brand-softest); outline: 0; } } + + &:focus-visible { + outline: var(--outline-focus-default); + } } button:disabled, @@ -3072,7 +3076,7 @@ a.account__display-name { } &:focus-visible { - border-top-color: var(--color-text-brand); + border-top-color: var(--color-border-brand); border-radius: 0; } } @@ -3087,7 +3091,7 @@ a.account__display-name { border-top: 0; @media screen and (min-width: $no-gap-breakpoint) { - border-top: 10px solid var(--color-bg-ambient); + border-top: 10px solid var(--color-bg-primary); } } @@ -3586,7 +3590,7 @@ a.account__display-name { &.focused { transition: none; outline: 0; - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); } &.copied { @@ -3986,25 +3990,14 @@ a.account__display-name { height: 20px; padding: 0; border-radius: 10px; - background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%); - border: 1px solid rgb(from var(--color-text-brand) r g b / 50%); + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border-primary); box-sizing: border-box; - .react-toggle:hover:not(.react-toggle--disabled) & { - background-color: rgb( - from var(--color-bg-brand-softer) r g b / - calc(50% + var(--overlay-strength-brand)) - ); - } - .react-toggle--checked & { background-color: var(--color-bg-brand-base); border-color: var(--color-bg-brand-base); } - - .react-toggle--checked:not(.react-toggle--disabled):hover & { - background-color: var(--color-bg-brand-base-hover); - } } .react-toggle-track-check, @@ -4020,6 +4013,7 @@ a.account__display-name { height: 16px; border-radius: 50%; background-color: var(--color-text-on-brand-base); + box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%); box-sizing: border-box; transition: all 0.25s ease; transition-property: border-color, left; @@ -4081,8 +4075,8 @@ a.account__display-name { &:focus-visible { outline: none; - border-color: var(--color-text-brand); - background: var(--color-bg-brand-softer); + border-color: var(--color-border-brand); + background: var(--color-bg-brand-softest); } &--logo { @@ -4457,7 +4451,7 @@ a.status-card { } &:focus-visible { - outline: 2px solid var(--color-text-brand); + outline: var(--outline-focus-default); outline-offset: -2px; } } @@ -4545,7 +4539,7 @@ a.status-card { z-index: 1; &.active { - box-shadow: 0 1px 0 var(--color-bg-brand-softer); + box-shadow: 0 1px 0 var(--color-bg-brand-softest); &::before { display: block; @@ -4655,7 +4649,7 @@ a.status-card { &.active { .column-header__icon { color: var(--color-text-brand); - text-shadow: 0 0 10px var(--color-bg-brand-softer); + text-shadow: 0 0 10px var(--color-bg-brand-softest); } } @@ -5150,7 +5144,7 @@ a.status-card { &:hover, &:active, &:focus { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); color: color-mix( in oklab, var(--color-text-primary), @@ -5752,7 +5746,7 @@ a.status-card { .visibility-modal { &__quote-warning { color: var(--color-text-primary); - background: var(--color-bg-warning-softer); + background: var(--color-bg-warning-softest); padding: 16px; border-radius: 4px; @@ -5787,7 +5781,7 @@ a.status-card { display: flex; align-items: center; color: var(--color-text-primary); - background: var(--color-bg-secondary-solid); + background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); padding: 8px 12px; width: 100%; @@ -5848,7 +5842,8 @@ a.status-card { .icon-button { padding: 0; - color: var(--color-text-secondary); + + --default-icon-color: inherit; } .icon { @@ -5901,7 +5896,10 @@ a.status-card { background: var(--color-bg-brand-base); .icon-button { - color: inherit; + --default-icon-color: inherit; + --default-bg-color: transparent; + --hover-icon-color: inherit; + --hover-bg-color: var(--color-bg-brand-base-hover); } } @@ -6000,7 +5998,7 @@ a.status-card { } &:focus-visible { - box-shadow: 0 0 0 2px var(--color-text-brand); + box-shadow: 0 0 0 2px var(--color-border-brand); } &[aria-hidden='true'] { @@ -6254,9 +6252,7 @@ a.status-card { --default-icon-color: var(--color-text-on-media); --default-bg-color: transparent; --hover-icon-color: var(--color-text-on-media); - --hover-bg-color: rgb( - from var(--color-text-on-media) r g b / var(--overlay-strength-brand) - ); + --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%); .icon { filter: var(--overlay-icon-shadow); @@ -6272,8 +6268,7 @@ a.status-card { --default-icon-color: var(--color-text-favourite-highlight); --hover-icon-color: var(--color-text-favourite-highlight); --hover-bg-color: rgb( - from var(--color-text-favourite-highlight) r g b / - var(--overlay-strength-brand) + from var(--color-text-favourite-highlight) r g b / 10% ); } @@ -6918,7 +6913,7 @@ a.status-card { } .button.button-secondary { - border-color: var(--color-text-error); + border-color: var(--color-border-error); color: var(--color-text-error); flex: 0 0 auto; @@ -6986,7 +6981,7 @@ a.status-card { &:hover, &:active, &:focus { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } } @@ -7431,7 +7426,7 @@ a.status-card { inset: 2px; z-index: 1; border-radius: inherit; - border: 2px solid var(--color-text-on-inverted); + border: 2px solid var(--color-text-inverted); outline: 2px solid var(--color-bg-inverted); pointer-events: none; } @@ -8150,7 +8145,7 @@ a.status-card { &.checked, &.indeterminate { - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); } .icon { @@ -8691,7 +8686,7 @@ noscript { } &:focus { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } } @@ -8953,7 +8948,7 @@ noscript { } &__root { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); font-size: 13px; display: flex; align-items: flex-end; @@ -9037,13 +9032,13 @@ noscript { &__item { flex-shrink: 0; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); color: color-mix( in oklab, var(--color-text-primary), var(--color-text-secondary) ); - border: 1px solid var(--color-border-on-bg-brand-softer); + border: 1px solid var(--color-border-brand-soft); border-radius: 3px; box-sizing: border-box; margin: 2px; @@ -9092,8 +9087,8 @@ noscript { &.active { color: var(--color-text-brand); - background-color: var(--color-bg-brand-softer); - border-color: var(--color-text-brand); + background-color: var(--color-bg-brand-softest); + border-color: var(--color-border-brand); transition: all 100ms ease-in; transition-property: background-color, color; } @@ -9156,7 +9151,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid var(--color-text-brand); + border-inline-start: 4px solid var(--color-border-brand); pointer-events: none; } } @@ -9679,7 +9674,7 @@ noscript { } &.invalid &__input { - border-color: var(--color-text-error); + border-color: var(--color-border-error); } &.expanded .search__popout { @@ -9950,8 +9945,8 @@ noscript { margin: 10px; margin-bottom: 5px; border-radius: 8px; - border: 1px solid var(--color-border-on-bg-brand-softer); - background: var(--color-bg-brand-softer); + border: 1px solid var(--color-border-brand-soft); + background: var(--color-bg-brand-softest); overflow: hidden; flex-shrink: 0; @@ -10017,8 +10012,8 @@ noscript { } .warning-banner { - border: 1px solid var(--color-border-on-bg-error-softer); - background: var(--color-bg-error-softer); + border: 1px solid var(--color-border-error-soft); + background: var(--color-bg-error-softest); &__message { h1 { @@ -10354,7 +10349,7 @@ noscript { width: auto; padding: 15px; margin: 0; - color: var(--color-text-on-inverted); + color: var(--color-text-inverted); background: var(--color-bg-inverted); backdrop-filter: blur(8px); border-radius: 8px; @@ -10408,7 +10403,7 @@ noscript { &:hover, &:focus, &:active { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } @@ -10510,13 +10505,16 @@ noscript { color: inherit; text-decoration: none; padding: 4px 12px; - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); border-radius: 4px; font-weight: 500; &:hover, &:focus, - &:active { + &:active, + .focusable:focus-visible &, + .detailed-status__wrapper-direct .detailed-status &, + .status__wrapper-direct & { background: var(--color-bg-brand-soft); } } @@ -10536,10 +10534,10 @@ noscript { padding: 16px 0; padding-bottom: 0; border-bottom: 1px solid var(--color-border-primary); - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); &.focusable:focus-visible { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } &__header { @@ -11201,7 +11199,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inline-start: 4px solid var(--color-text-brand); + border-inline-start: 4px solid var(--color-border-brand); pointer-events: none; } } @@ -11398,8 +11396,8 @@ noscript { display: block; box-sizing: border-box; color: var(--color-text-primary); - background: var(--color-bg-brand-softer); - border: 1px solid var(--color-border-on-bg-brand-softer); + background: var(--color-bg-brand-softest); + border: 1px solid var(--color-border-brand-soft); border-radius: 8px; padding: 8px (5px + 8px); position: relative; diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index db3f0e8a84..014021394b 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -30,7 +30,7 @@ &:hover, &:focus, &:active { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } } @@ -100,12 +100,12 @@ } &.positive { - background: var(--color-bg-success-softer); + background: var(--color-bg-success-softest); color: var(--color-text-success); } &.negative { - background: var(--color-bg-error-softer); + background: var(--color-bg-error-softest); color: var(--color-text-error); } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index ad2f2f630d..2d1e03d7b9 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -168,7 +168,7 @@ inset-inline-start: 0; width: 100%; height: 100%; - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); border-radius: 100%; } } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index cc6827db4c..7d2af8ddc1 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -32,7 +32,7 @@ code { display: block; background: linear-gradient( to bottom, - var(--color-bg-secondary-solid), + var(--color-bg-secondary), transparent ); position: absolute; @@ -573,7 +573,7 @@ code { input[type='datetime-local'] { &:focus:user-invalid:not(:placeholder-shown), &:required:user-invalid:not(:placeholder-shown) { - border-color: var(--color-text-error); + border-color: var(--color-border-error); } } @@ -763,7 +763,7 @@ code { input[type='datetime-local'], textarea, select { - border-color: var(--color-text-error); + border-color: var(--color-border-error); } } @@ -801,27 +801,27 @@ code { .flash-message { color: var(--color-text-brand); background: transparent; - border: 1px solid var(--color-text-brand); + border: 1px solid var(--color-border-brand); border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; text-align: center; &.notice { - border: 1px solid var(--color-border-on-bg-success-softer); - background: var(--color-bg-success-softer); + border: 1px solid var(--color-border-success-soft); + background: var(--color-bg-success-softest); color: var(--color-text-success); } &.warning { - border: 1px solid var(--color-border-on-bg-warning-softer); - background: var(--color-bg-warning-softer); + border: 1px solid var(--color-border-warning-soft); + background: var(--color-bg-warning-softest); color: var(--color-text-warning); } &.alert { - border: 1px solid var(--color-border-on-bg-error-softer); - background: var(--color-bg-error-softer); + border: 1px solid var(--color-border-error-soft); + background: var(--color-bg-error-softest); color: var(--color-text-error); } @@ -887,7 +887,7 @@ code { } &:focus { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); } } @@ -1373,7 +1373,7 @@ code { cursor: pointer; &:hover { - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); } img { @@ -1404,7 +1404,7 @@ code { } &.invalid img { - outline: 1px solid var(--color-text-error); + outline: 1px solid var(--color-border-error); outline-offset: -1px; } @@ -1414,7 +1414,7 @@ code { width: 100%; height: 100%; position: absolute; - background: var(--color-bg-error-softer); + background: var(--color-bg-error-softest); z-index: 2; border-radius: 8px; } diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 6af2a182b6..4ffbd1d7bb 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,7 +1,7 @@ @use 'variables' as *; .modal-layout { - background: var(--color-bg-brand-softer); + background: var(--color-bg-brand-softest); display: flex; flex-direction: column; height: 100vh; @@ -42,7 +42,7 @@ position: absolute; inset: auto 0 0; height: 32px; - background-color: var(--color-bg-brand-softer); + background-color: var(--color-bg-brand-softest); /* Decorative zig-zag pattern at the bottom of the page */ mask-image: url('data:image/svg+xml;utf8,'); diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 19fb8dd505..ce7f51f8cd 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -86,7 +86,7 @@ padding: 8px 12px; &:focus { - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); } @media screen and (width <= 600px) { diff --git a/app/javascript/styles/mastodon/theme/_base.scss b/app/javascript/styles/mastodon/theme/_base.scss index 85fd0dab45..9b39f1b02e 100644 --- a/app/javascript/styles/mastodon/theme/_base.scss +++ b/app/javascript/styles/mastodon/theme/_base.scss @@ -1,40 +1,69 @@ @mixin palette { - --color-black: #000; - --color-grey-950: #181820; - --color-grey-800: #3a3a50; - --color-grey-700: #44445f; - --color-grey-600: #535374; - --color-grey-500: #67678e; - --color-grey-400: #88a; - --color-grey-300: #b2b1c8; - --color-grey-200: #d7d6e1; - --color-grey-100: #eeedf3; - --color-grey-50: #f6f6f9; --color-white: #fff; - --color-indigo-700: #5638cc; - --color-indigo-600: #6147e6; - --color-indigo-400: #8280f9; - --color-indigo-300: #a5abfd; - --color-indigo-200: #c8cdfe; - --color-indigo-100: #e0e3ff; + --color-black: #000; + + // Grey + --color-grey-50: #f6f6f9; + --color-grey-100: #eeedf3; + --color-grey-200: #d7d6e1; + --color-grey-300: #b2b1c8; + --color-grey-400: #88a; + --color-grey-500: #67678e; + --color-grey-600: #535374; + --color-grey-700: #44445f; + --color-grey-800: #3a3a50; + --color-grey-900: #21212c; + --color-grey-950: #181820; + + // Indigo --color-indigo-50: #f0f1ff; + --color-indigo-100: #e0e3ff; + --color-indigo-200: #c8cdfe; + --color-indigo-300: #a5abfd; + --color-indigo-400: #8280f9; + --color-indigo-500: #7263f2; + --color-indigo-600: #6147e6; + --color-indigo-700: #5638cc; + --color-indigo-800: #48359c; + --color-indigo-900: #3d317c; + --color-indigo-950: #261e48; + + // Red --color-red-50: #fef2f2; --color-red-100: #ffe2e2; + --color-red-200: #ffc9c9; --color-red-300: #ffa2a2; + --color-red-400: #ff6467; + --color-red-500: #fb2c36; + --color-red-600: #e7000b; + --color-red-700: #c10007; --color-red-800: #9f0712; --color-red-900: #82181a; --color-red-950: #460809; + + // Yellow --color-yellow-50: #fffbeb; --color-yellow-100: #fef3c6; + --color-yellow-200: #fee685; + --color-yellow-300: #ffd230; --color-yellow-400: #ffb900; + --color-yellow-500: #fe9a00; --color-yellow-600: #e17100; --color-yellow-700: #bb4d00; + --color-yellow-800: #973c00; --color-yellow-900: #7b3306; --color-yellow-950: #461901; + + // Green --color-green-50: #f0fdf4; --color-green-100: #dcfce7; + --color-green-200: #b9f8cf; + --color-green-300: #7bf1a8; --color-green-400: #05df72; + --color-green-500: #00c950; --color-green-600: #00a63e; + --color-green-700: #008236; + --color-green-800: #016630; --color-green-900: #0d542b; --color-green-950: #032e15; } diff --git a/app/javascript/styles/mastodon/theme/_dark.scss b/app/javascript/styles/mastodon/theme/_dark.scss index a22c7cc8f4..161524cdc4 100644 --- a/app/javascript/styles/mastodon/theme/_dark.scss +++ b/app/javascript/styles/mastodon/theme/_dark.scss @@ -5,150 +5,92 @@ --color-text-primary: var(--color-grey-100); --color-text-secondary: var(--color-grey-300); - --color-text-tertiary: var(--color-grey-400); - --color-text-on-inverted: var(--color-grey-950); + --color-text-tertiary: var(--color-grey-400); // legacy + --color-text-inverted: var(--color-grey-950); --color-text-brand: var(--color-indigo-300); --color-text-brand-soft: color-mix( in oklab, var(--color-text-primary), var(--color-text-brand) - ); + ); // legacy + --color-text-on-brand-base: var(--color-white); - --color-text-brand-on-inverted: var(--color-indigo-600); + --color-text-brand-on-inverted: var(--color-indigo-600); // legacy --color-text-error: var(--color-red-300); --color-text-on-error-base: var(--color-white); - --color-text-warning: var(--color-yellow-400); + --color-text-warning: var(--color-yellow-400); // legacy --color-text-on-warning-base: var(--color-white); - --color-text-success: var(--color-green-400); + --color-text-success: var(--color-green-400); // legacy --color-text-on-success-base: var(--color-white); - --color-text-disabled: var(--color-grey-600); - --color-text-on-disabled: var(--color-grey-400); - --color-text-bookmark-highlight: var(--color-text-error); - --color-text-favourite-highlight: var(--color-text-warning); - --color-text-on-media: var(--color-white); + --color-text-disabled: var(--color-grey-600); // legacy + --color-text-on-disabled: var(--color-grey-400); // legacy + --color-text-bookmark-highlight: var(--color-text-error); // legacy + --color-text-favourite-highlight: var(--color-text-warning); // legacy + --color-text-on-media: var(--color-white); // legacy --color-text-status-links: color-mix( in oklab, var(--color-text-primary), var(--color-text-secondary) - ); + ); // legacy /* BACKGROUND TOKENS */ // Neutrals --color-bg-primary: var(--color-grey-950); --overlay-strength-secondary: 4%; - --color-bg-secondary-base: var(--color-white); - --color-bg-secondary: #{utils.css-alpha( - var(--color-bg-secondary-base), - var(--overlay-strength-secondary) - )}; - --color-bg-secondary-solid: color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - ); - --color-bg-tertiary: color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) - ); + --color-bg-secondary: var(--color-grey-900); + --color-bg-tertiary: var(--color-grey-800); // legacy // Utility - --color-bg-ambient: var(--color-bg-primary); --color-bg-inverted: var(--color-grey-50); - --color-bg-media-base: var(--color-black); - --color-bg-media-strength: 65%; - --color-bg-media: #{utils.css-alpha( - var(--color-bg-media-base), - var(--color-bg-media-strength) - )}; - --color-bg-overlay: var(--color-black); - --color-bg-disabled: var(--color-grey-700); + --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)}; + --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-white), 5%)}; + --color-bg-overlay: var(--color-black); // legacy + --color-bg-media-base: var(--color-black); // legacy + --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy + --color-bg-disabled: var(--color-grey-700); // legacy // Brand - --overlay-strength-brand: 22%; --color-bg-brand-base: var(--color-indigo-700); - --color-bg-brand-base-hover: color-mix( - in oklab, - var(--color-bg-brand-base), - var(--color-bg-primary) var(--overlay-strength-brand) - ); - --color-bg-brand-soft: #{utils.css-alpha( - #6f4df5, - calc(var(--overlay-strength-brand) * 2) - )}; - --color-bg-brand-softer: #{utils.css-alpha( - var(--color-bg-brand-base), - var(--overlay-strength-brand) - )}; - --color-bg-brand-softer-solid: color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-brand-base) var(--overlay-strength-brand) - ); + --color-bg-brand-base-hover: var(--color-indigo-800); // legacy + --color-bg-brand-soft: var(--color-indigo-900); + --color-bg-brand-softest: var(--color-indigo-950); // Error - --overlay-strength-error: 10%; - --color-bg-error-base: var(--color-red-800); - --color-bg-error-base-hover: color-mix( - in oklab, - var(--color-bg-error-base), - var(--color-bg-primary) var(--overlay-strength-error) - ); + --color-bg-error-base: var(--color-red-700); + --color-bg-error-base-hover: var(--color-red-800); // legacy --color-bg-error-soft: var(--color-red-900); - --color-bg-error-softer: var(--color-red-950); + --color-bg-error-softest: var(--color-red-950); // Warning - --overlay-strength-warning: 10%; - --color-bg-warning-base: var(--color-yellow-700); - --color-bg-warning-base-hover: color-mix( - in oklab, - var(--color-bg-warning-base), - var(--color-bg-primary) var(--overlay-strength-warning) - ); + --color-bg-warning-base: var(--color-yellow-700); // legacy --color-bg-warning-soft: var(--color-yellow-900); - --color-bg-warning-softer: var(--color-yellow-950); + --color-bg-warning-softest: var(--color-yellow-950); // Success - --overlay-strength-success: 15%; - --color-bg-success-base: var(--color-green-600); - --color-bg-success-base-hover: color-mix( - in oklab, - var(--color-bg-success-base), - var(--color-bg-primary) var(--overlay-strength-success) - ); + --color-bg-success-base: var(--color-green-600); // legacy --color-bg-success-soft: var(--color-green-900); - --color-bg-success-softer: var(--color-green-950); + --color-bg-success-softest: var(--color-green-950); /* BORDER TOKENS */ - --border-strength-primary: 18%; - --color-border-primary: #{utils.css-alpha( - var(--color-indigo-200), - var(--border-strength-primary) - )}; - --color-border-media: rgb(252 248 255 / 15%); - --color-border-verified: rgb(220, 3, 240); - --color-border-on-bg-secondary: #{utils.css-alpha( - var(--color-indigo-200), - calc(var(--border-strength-primary) / 1.5) - )}; - --color-border-on-bg-brand-softer: var(--color-border-primary); - --color-border-on-bg-error-softer: #{utils.css-alpha( - var(--color-text-error), - 50% - )}; - --color-border-on-bg-warning-softer: #{utils.css-alpha( + --color-border-primary: var(--color-grey-800); + --color-border-brand: var(--color-text-brand); + --color-border-brand-soft: var(--color-indigo-800); + --color-border-error: var(--color-red-300); + --color-border-media: rgb(252 248 255 / 15%); // legacy + --color-border-error-soft: #{utils.css-alpha(var(--color-border-error), 50%)}; // legacy + --color-border-warning-soft: #{utils.css-alpha( var(--color-text-warning), 50% - )}; - --color-border-on-bg-success-softer: #{utils.css-alpha( + )}; // legacy + + --color-border-success-soft: #{utils.css-alpha( var(--color-text-success), 50% - )}; - --color-border-on-bg-inverted: var(--color-border-primary); + )}; // legacy - /* SHADOW TOKENS */ + /* SHADOW TOKENS (LEGACY) */ --shadow-strength-primary: 80%; --color-shadow-primary: #{utils.css-alpha( @@ -160,16 +102,16 @@ 0 8px 10px -6px var(--color-shadow-primary); --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); - /* GRAPHS/CHARTS TOKENS */ + /* GRAPHS/CHARTS TOKENS (LEGACY) */ --color-graph-primary-stroke: var(--color-text-brand); - --color-graph-primary-fill: var(--color-bg-brand-softer); + --color-graph-primary-fill: var(--color-bg-brand-softest); --color-graph-warning-stroke: var(--color-text-warning); - --color-graph-warning-fill: var(--color-bg-warning-softer); + --color-graph-warning-fill: var(--color-bg-warning-softest); --color-graph-disabled-stroke: var(--color-text-disabled); --color-graph-disabled-fill: var(--color-bg-disabled); - /* LEGACY TOKENS */ + /* RICH TEXT TOKENS (LEGACY) */ --rich-text-container-color: rgb(87 24 60 / 100%); --rich-text-text-color: rgb(255 175 212 / 100%); @@ -182,7 +124,9 @@ --color-text-primary: var(--color-grey-50); --color-text-status-links: var(--color-text-brand); - /* BORDER TOKENS */ + /* BACKGROUND TOKENS */ + --color-bg-error-base: var(--color-red-800); - --border-strength-primary: 30%; + /* BORDER TOKENS */ + --color-border-primary: var(--color-grey-600); } diff --git a/app/javascript/styles/mastodon/theme/_light.scss b/app/javascript/styles/mastodon/theme/_light.scss index 47d32320fa..5759fffd75 100644 --- a/app/javascript/styles/mastodon/theme/_light.scss +++ b/app/javascript/styles/mastodon/theme/_light.scss @@ -5,145 +5,88 @@ --color-text-primary: var(--color-grey-950); --color-text-secondary: var(--color-grey-600); - --color-text-tertiary: var(--color-grey-500); - --color-text-on-inverted: var(--color-white); + --color-text-tertiary: var(--color-grey-500); // legacy + --color-text-inverted: var(--color-white); --color-text-brand: var(--color-indigo-700); --color-text-brand-soft: color-mix( in oklab, var(--color-text-primary), var(--color-text-brand) - ); + ); // legacy + --color-text-on-brand-base: var(--color-white); - --color-text-brand-on-inverted: var(--color-indigo-400); + --color-text-brand-on-inverted: var(--color-indigo-400); // legacy --color-text-error: var(--color-red-800); --color-text-on-error-base: var(--color-white); - --color-text-warning: var(--color-yellow-600); + --color-text-warning: var(--color-yellow-600); // legacy --color-text-on-warning-base: var(--color-white); - --color-text-success: var(--color-green-600); + --color-text-success: var(--color-green-600); // legacy --color-text-on-success-base: var(--color-white); - --color-text-disabled: var(--color-grey-300); - --color-text-on-disabled: var(--color-grey-200); - --color-text-bookmark-highlight: var(--color-text-error); - --color-text-favourite-highlight: var(--color-text-warning); - --color-text-on-media: var(--color-white); - --color-text-status-links: var(--color-text-brand); + --color-text-disabled: var(--color-grey-300); // legacy + --color-text-on-disabled: var(--color-grey-200); // legacy + --color-text-bookmark-highlight: var(--color-text-error); // legacy + --color-text-favourite-highlight: var(--color-text-warning); // legacy + --color-text-on-media: var(--color-white); // legacy + --color-text-status-links: var(--color-text-brand); // legacy /* BACKGROUND TOKENS */ // Neutrals --color-bg-primary: var(--color-white); --overlay-strength-secondary: 4%; - --color-bg-secondary-base: #000550; - --color-bg-secondary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-secondary-solid: #{color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-secondary-base) var(--overlay-strength-secondary) - )}; - --color-bg-tertiary: #{color-mix( - in oklab, - var(--color-bg-primary), - var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary)) - )}; + --color-bg-secondary: var(--color-grey-50); + --color-bg-tertiary: var(--color-grey-100); // legacy // Utility - --color-bg-ambient: var(--color-bg-primary); --color-bg-inverted: var(--color-grey-950); - --color-bg-media-base: var(--color-black); - --color-bg-media-strength: 65%; - --color-bg-media: #{utils.css-alpha( - var(--color-bg-media-base), - var(--color-bg-media-strength) - )}; - --color-bg-overlay: var(--color-bg-primary); - --color-bg-disabled: var(--color-grey-400); + --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)}; + --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-grey-950), 5%)}; + --color-bg-overlay: var(--color-bg-primary); // legacy + --color-bg-media-base: var(--color-black); // legacy + --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy + --color-bg-disabled: var(--color-grey-400); // legacy // Brand - --overlay-strength-brand: 6%; --color-bg-brand-base: var(--color-indigo-700); - --color-bg-brand-base-hover: color-mix( - in oklab, - var(--color-bg-brand-base), - black var(--overlay-strength-brand) - ); - --color-bg-brand-soft: #{utils.css-alpha( - #0012d8, - calc(var(--overlay-strength-brand) * 2) - )}; - --color-bg-brand-softer: #{utils.css-alpha( - #0012d8, - var(--overlay-strength-brand) - )}; - --color-bg-brand-softer-solid: color-mix( - in srgb, - var(--color-bg-primary), - var(--color-bg-brand-base) var(--overlay-strength-brand) - ); + --color-bg-brand-base-hover: var(--color-indigo-800); // legacy + --color-bg-brand-soft: var(--color-indigo-100); + --color-bg-brand-softest: var(--color-indigo-50); // Error - --overlay-strength-error: 5%; - --color-bg-error-base: var(--color-red-800); - --color-bg-error-base-hover: color-mix( - in oklab, - var(--color-bg-error-base), - black var(--overlay-strength-error) - ); + --color-bg-error-base: var(--color-red-700); + --color-bg-error-base-hover: var(--color-red-800); // legacy --color-bg-error-soft: var(--color-red-100); - --color-bg-error-softer: var(--color-red-50); + --color-bg-error-softest: var(--color-red-50); // Warning - --overlay-strength-warning: 10%; - --color-bg-warning-base: var(--color-yellow-700); - --color-bg-warning-base-hover: color-mix( - in oklab, - var(--color-bg-warning-base), - black var(--overlay-strength-warning) - ); + --color-bg-warning-base: var(--color-yellow-700); // legacy --color-bg-warning-soft: var(--color-yellow-100); - --color-bg-warning-softer: var(--color-yellow-50); + --color-bg-warning-softest: var(--color-yellow-50); // Success - --overlay-strength-success: 15%; - --color-bg-success-base: var(--color-green-600); - --color-bg-success-base-hover: color-mix( - in oklab, - var(--color-bg-success-base), - black var(--overlay-strength-success) - ); + --color-bg-success-base: var(--color-green-600); // legacy --color-bg-success-soft: var(--color-green-100); - --color-bg-success-softer: var(--color-green-50); + --color-bg-success-softest: var(--color-green-50); /* BORDER TOKENS */ - --border-strength-primary: 15%; - --color-border-primary: color-mix( - in oklab, - var(--color-bg-primary), - var(--color-grey-950) var(--border-strength-primary) - ); - --color-border-media: rgb(252 248 255 / 15%); - --color-border-verified: rgb(220, 3, 240); - --color-border-on-bg-secondary: var(--color-grey-200); - --color-border-on-bg-brand-softer: var(--color-indigo-200); - --color-border-on-bg-error-softer: #{utils.css-alpha( - var(--color-text-error), - 50% - )}; - --color-border-on-bg-warning-softer: #{utils.css-alpha( + --color-border-primary: var(--color-grey-200); + --color-border-brand: var(--color-text-brand); + --color-border-brand-soft: var(--color-indigo-200); + --color-border-error: var(--color-red-700); + --color-border-media: rgb(252 248 255 / 15%); // legacy + --color-border-error-soft: #{utils.css-alpha(var(--color-text-error), 50%)}; // legacy + --color-border-warning-soft: #{utils.css-alpha( var(--color-text-warning), 50% - )}; - --color-border-on-bg-success-softer: #{utils.css-alpha( + )}; // legacy + + --color-border-success-soft: #{utils.css-alpha( var(--color-text-success), 50% - )}; - --color-border-on-bg-inverted: var(--color-border-primary); + )}; // legacy - /* SHADOW TOKENS */ + /* SHADOW TOKENS (LEGACY) */ --shadow-strength-primary: 30%; --color-shadow-primary: #{utils.css-alpha( @@ -155,16 +98,16 @@ 0 8px 10px -6px var(--color-shadow-primary); --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary)); - /* GRAPHS/CHARTS TOKENS */ + /* GRAPHS/CHARTS TOKENS (LEGACY) */ --color-graph-primary-stroke: var(--color-text-brand); - --color-graph-primary-fill: var(--color-bg-brand-softer); + --color-graph-primary-fill: var(--color-bg-brand-softest); --color-graph-warning-stroke: var(--color-text-warning); - --color-graph-warning-fill: var(--color-bg-warning-softer); + --color-graph-warning-fill: var(--color-bg-warning-softest); --color-graph-disabled-stroke: var(--color-text-disabled); --color-graph-disabled-fill: var(--color-bg-disabled); - /* LEGACY TOKENS */ + /* RICH TEXT TOKENS (LEGACY) */ --rich-text-container-color: rgb(255 216 231 / 100%); --rich-text-text-color: rgb(114 47 83 / 100%); @@ -179,8 +122,9 @@ --color-text-tertiary: var(--color-grey-700); --color-text-brand: var(--color-indigo-600); - /* BORDER TOKENS */ + /* BACKGROUND TOKENS */ + --color-bg-error-base: var(--color-red-800); - --border-strength-primary: 30%; - --color-border-on-bg-secondary: var(--color-grey-300); + /* BORDER TOKENS */ + --color-border-primary: var(--color-grey-300); } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 69c79cd1e6..d237a184c9 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -69,7 +69,7 @@ } &.active .avatar-stack .account__avatar { - border-color: var(--color-text-brand); + border-color: var(--color-border-brand); } .trends__item__current {