Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 03:00:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Update web theme tokens with latest design system tokens

Browse Source 
Port 37236acd3b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2026-03-25 15:34:38 +01:00
committed by Claire
parent 1599047922
commit bb3f258c64
22 changed files with 295 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/javascript/flavours/glitch/components/callout/styles.module.css
View File

@@ -3,7 +3,7 @@
align-items: start; align-items: start;
padding: 12px; padding: 12px;
gap: 8px; gap: 8px;
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
color: var(--color-text-primary); color: var(--color-text-primary);
border-radius: 12px; border-radius: 12px;
} }
@@ -86,11 +86,11 @@
} }
.variantSubtle { .variantSubtle {
border: 1px solid var(--color-bg-brand-softer); border: 1px solid var(--color-bg-brand-softest);
background-color: var(--color-bg-primary); background-color: var(--color-bg-primary);
.icon { .icon {
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
} }
} }
@@ -105,11 +105,11 @@
.variantInverted { .variantInverted {
background-color: var(--color-bg-inverted); background-color: var(--color-bg-inverted);
color: var(--color-text-on-inverted); color: var(--color-text-inverted);
} }
.variantSuccess { .variantSuccess {
background-color: var(--color-bg-success-softer); background-color: var(--color-bg-success-softest);
.icon { .icon {
background-color: var(--color-bg-success-soft); background-color: var(--color-bg-success-soft);
@@ -117,7 +117,7 @@
} }
.variantWarning { .variantWarning {
background-color: var(--color-bg-warning-softer); background-color: var(--color-bg-warning-softest);
.icon { .icon {
background-color: var(--color-bg-warning-soft); background-color: var(--color-bg-warning-soft);
@@ -125,7 +125,7 @@
} }
.variantError { .variantError {
background-color: var(--color-bg-error-softer); background-color: var(--color-bg-error-softest);
.icon { .icon {
background-color: var(--color-bg-error-soft); background-color: var(--color-bg-error-soft);

2
app/javascript/flavours/glitch/components/form_fields/select.module.scss
View File

@@ -61,6 +61,6 @@
} }
[data-has-error='true'] & { [data-has-error='true'] & {
border-color: var(--color-text-error); border-color: var(--color-border-error);
} }
} }

4
app/javascript/flavours/glitch/components/form_fields/text_input.module.scss
View File

@@ -32,11 +32,11 @@
&:focus:user-invalid, &:focus:user-invalid,
&:required:user-invalid, &:required:user-invalid,
[data-has-error='true'] & { [data-has-error='true'] & {
outline-color: var(--color-text-error); outline-color: var(--color-border-error);
} }
&:focus { &:focus {
outline-color: var(--color-text-brand); outline-color: var(--color-border-brand);
} }
&:required:user-valid { &:required:user-valid {

4
app/javascript/flavours/glitch/components/tags/style.module.css
View File

@@ -22,8 +22,8 @@ button.tag:focus-visible {
} }
.active { .active {
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
color: var(--color-text-brand); color: var(--color-text-brand);
} }

2
app/javascript/flavours/glitch/features/account_edit/modals/styles.module.scss
View File

@@ -58,7 +58,7 @@
transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;
&:hover { &:hover {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
&:focus-visible { &:focus-visible {

6
app/javascript/flavours/glitch/features/account_edit/styles.module.scss
View File

@@ -160,7 +160,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
} }
&:disabled { &:disabled {
@@ -177,7 +177,7 @@
.deleteButton { .deleteButton {
--default-icon-color: var(--color-text-error); --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); --hover-icon-color: var(--color-text-on-error-base);
} }
@@ -201,7 +201,7 @@
&, &,
&:global(.active) { &:global(.active) {
// Overrides the transparent background added by default with .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; position: absolute;

12
app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
View File

@@ -93,7 +93,7 @@
} }
svg { svg {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
width: 28px; width: 28px;
height: 28px; height: 28px;
padding: 5px; padding: 5px;
@@ -184,7 +184,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
.badgeMuted { .badgeMuted {
background-color: var(--color-bg-inverted); background-color: var(--color-bg-inverted);
color: var(--color-text-on-inverted); color: var(--color-text-inverted);
} }
.badgeBlocked { .badgeBlocked {
@@ -270,7 +270,7 @@ svg.badgeIcon {
} }
.fieldVerified { .fieldVerified {
background-color: var(--color-bg-success-softer); background-color: var(--color-bg-success-softest);
dt { dt {
padding-right: 24px; padding-right: 24px;
@@ -292,8 +292,8 @@ svg.badgeIcon {
} }
.fieldOverflowButton { .fieldOverflowButton {
--default-bg-color: var(--color-bg-secondary-solid); --default-bg-color: var(--color-bg-secondary);
--hover-bg-color: var(--color-bg-brand-softer-solid); --hover-bg-color: var(--color-bg-brand-softest);
position: absolute; position: absolute;
right: 8px; right: 8px;
@@ -413,7 +413,7 @@ svg.badgeIcon {
:global(.active) { :global(.active) {
color: var(--color-text-brand); color: var(--color-text-brand);
border-bottom: 4px solid var(--color-text-brand); border-bottom: 4px solid var(--color-border-brand);
padding-bottom: 14px; padding-bottom: 14px;
} }
} }

2
app/javascript/flavours/glitch/features/ui/components/skip_links/skip_links.module.scss
View File

@@ -33,7 +33,7 @@
&:focus-within { &:focus-within {
outline: var(--outline-focus-default); outline: var(--outline-focus-default);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
:any-link { :any-link {

2
app/javascript/flavours/glitch/styles/mastodon/_mixins.scss
View File

@@ -18,7 +18,7 @@
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
color: var(--color-text-primary); color: var(--color-text-primary);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--color-border-on-bg-secondary); border: 1px solid var(--color-border-primary);
font-size: 17px; font-size: 17px;
line-height: normal; line-height: normal;
margin: 0; margin: 0;

16
app/javascript/flavours/glitch/styles/mastodon/accounts.scss
View File

@@ -13,7 +13,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
} }
@@ -221,8 +221,8 @@
.information-badge { .information-badge {
&.superapp { &.superapp {
color: var(--color-text-success); color: var(--color-text-success);
background-color: var(--color-bg-success-softer); background-color: var(--color-bg-success-softest);
border-color: var(--color-border-on-bg-success-softer); border-color: var(--color-border-success-soft);
} }
} }
@@ -230,7 +230,7 @@
display: inline-flex; display: inline-flex;
padding: 4px; padding: 4px;
padding-inline-end: 8px; padding-inline-end: 8px;
border: 1px solid var(--color-text-brand); border: 1px solid var(--color-border-brand);
color: var(--color-text-brand); color: var(--color-text-brand);
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
@@ -256,8 +256,8 @@
.simple_form .not_recommended { .simple_form .not_recommended {
color: var(--color-text-error); color: var(--color-text-error);
background-color: var(--color-bg-error-softer); background-color: var(--color-bg-error-softest);
border-color: var(--color-border-on-bg-error-softer); border-color: var(--color-border-error-soft);
} }
.simple_form .glitch_only { .simple_form .glitch_only {
@@ -317,8 +317,8 @@
} }
.verified { .verified {
border: 1px solid var(--color-border-on-bg-success-softer); border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softer); background: var(--color-bg-success-softest);
a { a {
color: var(--color-text-success); color: var(--color-text-success);

20
app/javascript/flavours/glitch/styles/mastodon/admin.scss
View File

@@ -68,7 +68,7 @@ $content-width: 840px;
border-radius: 4px; border-radius: 4px;
&:focus { &:focus {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
.material-close { .material-close {
@@ -437,7 +437,7 @@ $content-width: 840px;
} }
ul .simple-navigation-active-leaf a { ul .simple-navigation-active-leaf a {
border-bottom-color: var(--color-text-brand); border-bottom-color: var(--color-border-brand);
} }
} }
} }
@@ -498,7 +498,7 @@ body,
kbd { kbd {
font-family: Courier, monospace; font-family: Courier, monospace;
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
padding: 4px; padding: 4px;
padding-bottom: 2px; padding-bottom: 2px;
border-radius: 5px; border-radius: 5px;
@@ -565,7 +565,7 @@ kbd {
&.selected { &.selected {
color: var(--color-text-brand); color: var(--color-text-brand);
border-bottom: 2px solid var(--color-text-brand); border-bottom: 2px solid var(--color-border-brand);
} }
} }
} }
@@ -844,14 +844,14 @@ a.name-tag,
.speech-bubble { .speech-bubble {
margin-bottom: 20px; margin-bottom: 20px;
border-inline-start: 4px solid var(--color-text-brand); border-inline-start: 4px solid var(--color-border-brand);
&.positive { &.positive {
border-color: var(--color-text-success); border-color: var(--color-text-success);
} }
&.negative { &.negative {
border-color: var(--color-text-error); border-color: var(--color-border-error);
} }
&.warning { &.warning {
@@ -1313,7 +1313,7 @@ a.sparkline {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
@@ -1937,7 +1937,7 @@ a.sparkline {
width: calc(1.375rem + 1px); width: calc(1.375rem + 1px);
height: calc(1.375rem + 1px); height: calc(1.375rem + 1px);
background: var(--color-bg-primary); background: var(--color-bg-primary);
border: 1px solid var(--color-text-brand); border: 1px solid var(--color-border-brand);
color: var(--color-text-brand); color: var(--color-text-brand);
border-radius: 8px; border-radius: 8px;
} }
@@ -2021,8 +2021,8 @@ a.sparkline {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
border: 1px solid var(--color-border-on-bg-brand-softer); border: 1px solid var(--color-border-brand-soft);
border-radius: 8px; border-radius: 8px;
padding: 8px 13px; padding: 8px 13px;
position: relative; position: relative;

6
app/javascript/flavours/glitch/styles/mastodon/basics.scss
View File

@@ -2,13 +2,13 @@
html { html {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-ambient); background: var(--color-bg-primary);
&.custom-scrollbars { &.custom-scrollbars {
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); 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; --avatar-border-radius: 8px;
--max-media-height-small: 460px; --max-media-height-small: 460px;
--max-media-height-large: 566px; --max-media-height-large: 566px;
@@ -46,7 +46,7 @@ html.has-modal {
body { body {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
background: var(--color-bg-ambient); background: var(--color-bg-primary);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;

162
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@@ -114,7 +114,7 @@
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-bg-brand-base); outline: var(--outline-focus-default);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -169,12 +169,12 @@
color: var(--color-text-brand); color: var(--color-text-brand);
background: transparent; background: transparent;
padding: 6px 17px; padding: 6px 17px;
border: 1px solid var(--color-text-brand); border: 1px solid var(--color-border-brand);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
color: var(--color-text-brand); color: var(--color-text-brand);
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
@@ -184,7 +184,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: var(--color-text-error); border-color: var(--color-border-error);
color: var(--color-text-error); color: var(--color-text-error);
} }
} }
@@ -284,8 +284,8 @@
--default-icon-color: var(--color-text-secondary); --default-icon-color: var(--color-text-secondary);
--default-bg-color: transparent; --default-bg-color: transparent;
--hover-icon-color: var(--color-text-primary); --hover-icon-color: var(--color-text-primary);
--hover-bg-color: var(--color-bg-brand-softer); --hover-bg-color: var(--color-bg-brand-softest);
--focus-outline-color: var(--color-text-brand); --focus-outline-color: var(--color-border-brand);
display: inline-flex; display: inline-flex;
color: var(--default-icon-color); color: var(--default-icon-color);
@@ -364,8 +364,8 @@
&.copied { &.copied {
color: var(--color-text-success); color: var(--color-text-success);
transition: none; transition: none;
background-color: var(--color-bg-success-softer); background-color: var(--color-bg-success-softest);
border-color: var(--color-border-on-bg-brand-softer); border-color: var(--color-border-success-soft);
} }
} }
@@ -537,21 +537,21 @@ body > [data-popper-placement] {
flex-direction: column; flex-direction: column;
flex: 0 1 auto; flex: 0 1 auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--color-border-on-bg-secondary); border: 1px solid var(--color-border-primary);
transition: border-color 300ms linear; transition: border-color 300ms linear;
position: relative; position: relative;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
&.active { &.active {
transition: none; transition: none;
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
} }
} }
&__warning { &__warning {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-warning-softer); background: var(--color-bg-warning-softest);
border: 1px solid var(--color-border-on-bg-warning-softer); border: 1px solid var(--color-border-warning-soft);
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
@@ -619,7 +619,7 @@ body > [data-popper-placement] {
.spoiler-input__input { .spoiler-input__input {
padding: 12px 12px - 5px; padding: 12px 12px - 5px;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
color: var(--color-text-brand); color: var(--color-text-brand);
} }
@@ -938,7 +938,7 @@ body > [data-popper-placement] {
line-height: 20px; line-height: 20px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
color: var(--color-text-brand); color: var(--color-text-brand);
background-color: var(--color-bg-secondary-solid); background-color: var(--color-bg-secondary);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@@ -970,7 +970,7 @@ body > [data-popper-placement] {
gap: 4px; gap: 4px;
color: var(--color-text-brand); color: var(--color-text-brand);
background: transparent; background: transparent;
border: 1px solid var(--color-text-brand); border: 1px solid var(--color-border-brand);
border-radius: 6px; border-radius: 6px;
padding: 4px 8px; padding: 4px 8px;
font-size: 13px; font-size: 13px;
@@ -1523,9 +1523,9 @@ body > [data-popper-placement] {
.focusable { .focusable {
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-text-brand); outline: 2px solid var(--color-border-brand);
outline-offset: -2px; outline-offset: -2px;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
@@ -1647,7 +1647,7 @@ body > [data-popper-placement] {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
opacity: 0; opacity: 0;
animation: fade 0.7s reverse both 0.3s; animation: fade 0.7s reverse both 0.3s;
pointer-events: none; pointer-events: none;
@@ -1802,7 +1802,7 @@ body > [data-popper-placement] {
.notification-ungrouped--direct, .notification-ungrouped--direct,
.notification-group--direct, .notification-group--direct,
.notification-group--annual-report { .notification-group--annual-report {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
&:focus { &:focus {
background: var(--color-bg-brand-soft); background: var(--color-bg-brand-soft);
@@ -1943,7 +1943,7 @@ body > [data-popper-placement] {
.detailed-status__wrapper-direct { .detailed-status__wrapper-direct {
.detailed-status, .detailed-status,
.detailed-status__action-bar { .detailed-status__action-bar {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
.status__prepend { .status__prepend {
@@ -1998,7 +1998,7 @@ body > [data-popper-placement] {
line-height: 20px; line-height: 20px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
border-radius: 8px; border-radius: 8px;
cursor: default; cursor: default;
} }
@@ -2126,7 +2126,7 @@ body > [data-popper-placement] {
&__domain-pill { &__domain-pill {
display: inline-flex; display: inline-flex;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
border-radius: 4px; border-radius: 4px;
border: 0; border: 0;
color: var(--color-text-brand); color: var(--color-text-brand);
@@ -2187,7 +2187,7 @@ body > [data-popper-placement] {
&__handle { &__handle {
border: 2px dashed var(--color-border-on-brand-softer); border: 2px dashed var(--color-border-on-brand-softer);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
padding: 12px 8px; padding: 12px 8px;
color: var(--color-text-brand); color: var(--color-text-brand);
border-radius: 4px; border-radius: 4px;
@@ -2968,11 +2968,15 @@ a.account__display-name {
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
&:not(:disabled, [aria-disabled='true']) { &:where(:not(:disabled, [aria-disabled='true'])) {
background: var(--color-bg-secondary); background: var(--color-bg-brand-softest);
outline: 0; outline: 0;
} }
} }
&:focus-visible {
outline: var(--outline-focus-default);
}
} }
button:disabled, button:disabled,
@@ -3137,7 +3141,7 @@ a.account__display-name {
} }
&:focus-visible { &:focus-visible {
border-top-color: var(--color-text-brand); border-top-color: var(--color-border-brand);
border-radius: 0; border-radius: 0;
} }
} }
@@ -3152,7 +3156,7 @@ a.account__display-name {
border-top: 0; border-top: 0;
@media screen and (min-width: $no-gap-breakpoint) { @media screen and (min-width: $no-gap-breakpoint) {
border-top: 10px solid var(--color-bg-ambient); border-top: 10px solid var(--color-bg-primary);
} }
} }
@@ -3651,7 +3655,7 @@ a.account__display-name {
&.focused { &.focused {
transition: none; transition: none;
outline: 0; outline: 0;
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
} }
&.copied { &.copied {
@@ -4051,25 +4055,14 @@ a.account__display-name {
height: 20px; height: 20px;
padding: 0; padding: 0;
border-radius: 10px; border-radius: 10px;
background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%); background-color: var(--color-bg-tertiary);
border: 1px solid rgb(from var(--color-text-brand) r g b / 50%); border: 1px solid var(--color-border-primary);
box-sizing: border-box; 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 & { .react-toggle--checked & {
background-color: var(--color-bg-brand-base); background-color: var(--color-bg-brand-base);
border-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, .react-toggle-track-check,
@@ -4085,6 +4078,7 @@ a.account__display-name {
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-text-on-brand-base); 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; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left; transition-property: border-color, left;
@@ -4146,8 +4140,8 @@ a.account__display-name {
&:focus-visible { &:focus-visible {
outline: none; outline: none;
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
&--logo { &--logo {
@@ -4545,7 +4539,7 @@ a.status-card {
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-text-brand); outline: var(--outline-focus-default);
outline-offset: -2px; outline-offset: -2px;
} }
} }
@@ -4633,7 +4627,7 @@ a.status-card {
z-index: 1; z-index: 1;
&.active { &.active {
box-shadow: 0 1px 0 var(--color-bg-brand-softer); box-shadow: 0 1px 0 var(--color-bg-brand-softest);
&::before { &::before {
display: block; display: block;
@@ -4743,7 +4737,7 @@ a.status-card {
&.active { &.active {
.column-header__icon { .column-header__icon {
color: var(--color-text-brand); 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);
} }
} }
@@ -5289,7 +5283,7 @@ a.status-card {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
color: color-mix( color: color-mix(
in oklab, in oklab,
var(--color-text-primary), var(--color-text-primary),
@@ -5996,7 +5990,7 @@ a.status-card {
.visibility-modal { .visibility-modal {
&__quote-warning { &__quote-warning {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-warning-softer); background: var(--color-bg-warning-softest);
padding: 16px; padding: 16px;
border-radius: 4px; border-radius: 4px;
@@ -6031,7 +6025,7 @@ a.status-card {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-secondary-solid); background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
padding: 8px 12px; padding: 8px 12px;
width: 100%; width: 100%;
@@ -6092,7 +6086,8 @@ a.status-card {
.icon-button { .icon-button {
padding: 0; padding: 0;
color: var(--color-text-secondary);
--default-icon-color: inherit;
} }
.icon { .icon {
@@ -6145,7 +6140,10 @@ a.status-card {
background: var(--color-bg-brand-base); background: var(--color-bg-brand-base);
.icon-button { .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);
} }
} }
@@ -6244,7 +6242,7 @@ a.status-card {
} }
&:focus-visible { &: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'] { &[aria-hidden='true'] {
@@ -6498,9 +6496,7 @@ a.status-card {
--default-icon-color: var(--color-text-on-media); --default-icon-color: var(--color-text-on-media);
--default-bg-color: transparent; --default-bg-color: transparent;
--hover-icon-color: var(--color-text-on-media); --hover-icon-color: var(--color-text-on-media);
--hover-bg-color: rgb( --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%);
from var(--color-text-on-media) r g b / var(--overlay-strength-brand)
);
.icon { .icon {
filter: var(--overlay-icon-shadow); filter: var(--overlay-icon-shadow);
@@ -6516,8 +6512,7 @@ a.status-card {
--default-icon-color: var(--color-text-favourite-highlight); --default-icon-color: var(--color-text-favourite-highlight);
--hover-icon-color: var(--color-text-favourite-highlight); --hover-icon-color: var(--color-text-favourite-highlight);
--hover-bg-color: rgb( --hover-bg-color: rgb(
from var(--color-text-favourite-highlight) r g b / from var(--color-text-favourite-highlight) r g b / 10%
var(--overlay-strength-brand)
); );
} }
@@ -7186,7 +7181,7 @@ a.status-card {
} }
.button.button-secondary { .button.button-secondary {
border-color: var(--color-text-error); border-color: var(--color-border-error);
color: var(--color-text-error); color: var(--color-text-error);
flex: 0 0 auto; flex: 0 0 auto;
@@ -7254,7 +7249,7 @@ a.status-card {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
} }
@@ -7778,7 +7773,7 @@ img.modal-warning {
inset: 2px; inset: 2px;
z-index: 1; z-index: 1;
border-radius: inherit; 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); outline: 2px solid var(--color-bg-inverted);
pointer-events: none; pointer-events: none;
} }
@@ -8484,7 +8479,7 @@ img.modal-warning {
&.checked, &.checked,
&.indeterminate { &.indeterminate {
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
} }
.icon { .icon {
@@ -9026,7 +9021,7 @@ noscript {
} }
&:focus { &:focus {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
} }
@@ -9288,7 +9283,7 @@ noscript {
} }
&__root { &__root {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
font-size: 13px; font-size: 13px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@@ -9372,13 +9367,13 @@ noscript {
&__item { &__item {
flex-shrink: 0; flex-shrink: 0;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
color: color-mix( color: color-mix(
in oklab, in oklab,
var(--color-text-primary), var(--color-text-primary),
var(--color-text-secondary) 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; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
margin: 2px; margin: 2px;
@@ -9427,8 +9422,8 @@ noscript {
&.active { &.active {
color: var(--color-text-brand); color: var(--color-text-brand);
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
} }
@@ -9491,7 +9486,7 @@ noscript {
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-inline-start: 4px solid var(--color-text-brand); border-inline-start: 4px solid var(--color-border-brand);
pointer-events: none; pointer-events: none;
} }
} }
@@ -10020,7 +10015,7 @@ noscript {
} }
&.invalid &__input { &.invalid &__input {
border-color: var(--color-text-error); border-color: var(--color-border-error);
} }
&.expanded .search__popout { &.expanded .search__popout {
@@ -10291,8 +10286,8 @@ noscript {
margin: 10px; margin: 10px;
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-border-on-bg-brand-softer); border: 1px solid var(--color-border-brand-soft);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
@@ -10358,8 +10353,8 @@ noscript {
} }
.warning-banner { .warning-banner {
border: 1px solid var(--color-border-on-bg-error-softer); border: 1px solid var(--color-border-error-soft);
background: var(--color-bg-error-softer); background: var(--color-bg-error-softest);
&__message { &__message {
h1 { h1 {
@@ -10695,7 +10690,7 @@ noscript {
width: auto; width: auto;
padding: 15px; padding: 15px;
margin: 0; margin: 0;
color: var(--color-text-on-inverted); color: var(--color-text-inverted);
background: var(--color-bg-inverted); background: var(--color-bg-inverted);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid var(--color-border-on-bg-inverted); border: 1px solid var(--color-border-on-bg-inverted);
@@ -10750,7 +10745,7 @@ noscript {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
@@ -10852,13 +10847,16 @@ noscript {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
padding: 4px 12px; padding: 4px 12px;
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active,
.focusable:focus-visible &,
.detailed-status__wrapper-direct .detailed-status &,
.status__wrapper-direct & {
background: var(--color-bg-brand-soft); background: var(--color-bg-brand-soft);
} }
} }
@@ -10878,10 +10876,10 @@ noscript {
padding: 16px 0; padding: 16px 0;
padding-bottom: 0; padding-bottom: 0;
border-bottom: 1px solid var(--color-border-primary); border-bottom: 1px solid var(--color-border-primary);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
&.focusable:focus-visible { &.focusable:focus-visible {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
&__header { &__header {
@@ -11549,7 +11547,7 @@ noscript {
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-inline-start: 4px solid var(--color-text-brand); border-inline-start: 4px solid var(--color-border-brand);
pointer-events: none; pointer-events: none;
} }
} }
@@ -11746,8 +11744,8 @@ noscript {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
border: 1px solid var(--color-border-on-bg-brand-softer); border: 1px solid var(--color-border-brand-soft);
border-radius: 8px; border-radius: 8px;
padding: 8px (5px + 8px); padding: 8px (5px + 8px);
position: relative; position: relative;

6
app/javascript/flavours/glitch/styles/mastodon/dashboard.scss
View File

@@ -30,7 +30,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
} }
@@ -100,12 +100,12 @@
} }
&.positive { &.positive {
background: var(--color-bg-success-softer); background: var(--color-bg-success-softest);
color: var(--color-text-success); color: var(--color-text-success);
} }
&.negative { &.negative {
background: var(--color-bg-error-softer); background: var(--color-bg-error-softest);
color: var(--color-text-error); color: var(--color-text-error);
} }

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

@@ -168,7 +168,7 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
border-radius: 100%; border-radius: 100%;
} }
} }

28
app/javascript/flavours/glitch/styles/mastodon/forms.scss
View File

@@ -32,7 +32,7 @@ code {
display: block; display: block;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
var(--color-bg-secondary-solid), var(--color-bg-secondary),
transparent transparent
); );
position: absolute; position: absolute;
@@ -574,7 +574,7 @@ code {
input[type='datetime-local'] { input[type='datetime-local'] {
&:focus:user-invalid:not(:placeholder-shown), &:focus:user-invalid:not(:placeholder-shown),
&:required:user-invalid:not(:placeholder-shown) { &:required:user-invalid:not(:placeholder-shown) {
border-color: var(--color-text-error); border-color: var(--color-border-error);
} }
} }
@@ -764,7 +764,7 @@ code {
input[type='datetime-local'], input[type='datetime-local'],
textarea, textarea,
select { select {
border-color: var(--color-text-error); border-color: var(--color-border-error);
} }
} }
@@ -802,27 +802,27 @@ code {
.flash-message { .flash-message {
color: var(--color-text-brand); color: var(--color-text-brand);
background: transparent; background: transparent;
border: 1px solid var(--color-text-brand); border: 1px solid var(--color-border-brand);
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 var(--color-border-on-bg-success-softer); border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softer); background: var(--color-bg-success-softest);
color: var(--color-text-success); color: var(--color-text-success);
} }
&.warning { &.warning {
border: 1px solid var(--color-border-on-bg-warning-softer); border: 1px solid var(--color-border-warning-soft);
background: var(--color-bg-warning-softer); background: var(--color-bg-warning-softest);
color: var(--color-text-warning); color: var(--color-text-warning);
} }
&.alert { &.alert {
border: 1px solid var(--color-border-on-bg-error-softer); border: 1px solid var(--color-border-error-soft);
background: var(--color-bg-error-softer); background: var(--color-bg-error-softest);
color: var(--color-text-error); color: var(--color-text-error);
} }
@@ -888,7 +888,7 @@ code {
} }
&:focus { &:focus {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
} }
} }
@@ -1374,7 +1374,7 @@ code {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--color-bg-brand-softer); background-color: var(--color-bg-brand-softest);
} }
img { img {
@@ -1405,7 +1405,7 @@ code {
} }
&.invalid img { &.invalid img {
outline: 1px solid var(--color-text-error); outline: 1px solid var(--color-border-error);
outline-offset: -1px; outline-offset: -1px;
} }
@@ -1415,7 +1415,7 @@ code {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
background: var(--color-bg-error-softer); background: var(--color-bg-error-softest);
z-index: 2; z-index: 2;
border-radius: 8px; border-radius: 8px;
} }

4
app/javascript/flavours/glitch/styles/mastodon/modal.scss
View File

@@ -1,7 +1,7 @@
@use 'variables' as *; @use 'variables' as *;
.modal-layout { .modal-layout {
background: var(--color-bg-brand-softer); background: var(--color-bg-brand-softest);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
@@ -42,7 +42,7 @@
position: absolute; position: absolute;
inset: auto 0 0; inset: auto 0 0;
height: 32px; 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 */ /* Decorative zig-zag pattern at the bottom of the page */
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');

2
app/javascript/flavours/glitch/styles/mastodon/polls.scss
View File

@@ -86,7 +86,7 @@
padding: 8px 12px; padding: 8px 12px;
&:focus { &:focus {
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
} }
@media screen and (width <= 600px) { @media screen and (width <= 600px) {

63
app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss
View File

@@ -1,40 +1,69 @@
@mixin palette { @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-white: #fff;
--color-indigo-700: #5638cc; --color-black: #000;
--color-indigo-600: #6147e6;
--color-indigo-400: #8280f9; // Grey
--color-indigo-300: #a5abfd; --color-grey-50: #f6f6f9;
--color-indigo-200: #c8cdfe; --color-grey-100: #eeedf3;
--color-indigo-100: #e0e3ff; --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-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-50: #fef2f2;
--color-red-100: #ffe2e2; --color-red-100: #ffe2e2;
--color-red-200: #ffc9c9;
--color-red-300: #ffa2a2; --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-800: #9f0712;
--color-red-900: #82181a; --color-red-900: #82181a;
--color-red-950: #460809; --color-red-950: #460809;
// Yellow
--color-yellow-50: #fffbeb; --color-yellow-50: #fffbeb;
--color-yellow-100: #fef3c6; --color-yellow-100: #fef3c6;
--color-yellow-200: #fee685;
--color-yellow-300: #ffd230;
--color-yellow-400: #ffb900; --color-yellow-400: #ffb900;
--color-yellow-500: #fe9a00;
--color-yellow-600: #e17100; --color-yellow-600: #e17100;
--color-yellow-700: #bb4d00; --color-yellow-700: #bb4d00;
--color-yellow-800: #973c00;
--color-yellow-900: #7b3306; --color-yellow-900: #7b3306;
--color-yellow-950: #461901; --color-yellow-950: #461901;
// Green
--color-green-50: #f0fdf4; --color-green-50: #f0fdf4;
--color-green-100: #dcfce7; --color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-400: #05df72; --color-green-400: #05df72;
--color-green-500: #00c950;
--color-green-600: #00a63e; --color-green-600: #00a63e;
--color-green-700: #008236;
--color-green-800: #016630;
--color-green-900: #0d542b; --color-green-900: #0d542b;
--color-green-950: #032e15; --color-green-950: #032e15;
} }

158
app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss
View File

@@ -5,150 +5,92 @@
--color-text-primary: var(--color-grey-100); --color-text-primary: var(--color-grey-100);
--color-text-secondary: var(--color-grey-300); --color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400); --color-text-tertiary: var(--color-grey-400); // legacy
--color-text-on-inverted: var(--color-grey-950); --color-text-inverted: var(--color-grey-950);
--color-text-brand: var(--color-indigo-300); --color-text-brand: var(--color-indigo-300);
--color-text-brand-soft: color-mix( --color-text-brand-soft: color-mix(
in oklab, in oklab,
var(--color-text-primary), var(--color-text-primary),
var(--color-text-brand) var(--color-text-brand)
); ); // legacy
--color-text-on-brand-base: var(--color-white); --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-error: var(--color-red-300);
--color-text-on-error-base: var(--color-white); --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-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-on-success-base: var(--color-white);
--color-text-disabled: var(--color-grey-600); --color-text-disabled: var(--color-grey-600); // legacy
--color-text-on-disabled: var(--color-grey-400); --color-text-on-disabled: var(--color-grey-400); // legacy
--color-text-bookmark-highlight: var(--color-text-error); --color-text-bookmark-highlight: var(--color-text-error); // legacy
--color-text-favourite-highlight: var(--color-text-warning); --color-text-favourite-highlight: var(--color-text-warning); // legacy
--color-text-on-media: var(--color-white); --color-text-on-media: var(--color-white); // legacy
--color-text-status-links: color-mix( --color-text-status-links: color-mix(
in oklab, in oklab,
var(--color-text-primary), var(--color-text-primary),
var(--color-text-secondary) var(--color-text-secondary)
); ); // legacy
/* BACKGROUND TOKENS */ /* BACKGROUND TOKENS */
// Neutrals // Neutrals
--color-bg-primary: var(--color-grey-950); --color-bg-primary: var(--color-grey-950);
--overlay-strength-secondary: 4%; --overlay-strength-secondary: 4%;
--color-bg-secondary-base: var(--color-white); --color-bg-secondary: var(--color-grey-900);
--color-bg-secondary: #{utils.css-alpha( --color-bg-tertiary: var(--color-grey-800); // legacy
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))
);
// Utility // Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-50); --color-bg-inverted: var(--color-grey-50);
--color-bg-media-base: var(--color-black); --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-media-strength: 65%; --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-white), 5%)};
--color-bg-media: #{utils.css-alpha( --color-bg-overlay: var(--color-black); // legacy
var(--color-bg-media-base), --color-bg-media-base: var(--color-black); // legacy
var(--color-bg-media-strength) --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
)}; --color-bg-disabled: var(--color-grey-700); // legacy
--color-bg-overlay: var(--color-black);
--color-bg-disabled: var(--color-grey-700);
// Brand // Brand
--overlay-strength-brand: 22%;
--color-bg-brand-base: var(--color-indigo-700); --color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix( --color-bg-brand-base-hover: var(--color-indigo-800); // legacy
in oklab, --color-bg-brand-soft: var(--color-indigo-900);
var(--color-bg-brand-base), --color-bg-brand-softest: var(--color-indigo-950);
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)
);
// Error // Error
--overlay-strength-error: 10%; --color-bg-error-base: var(--color-red-700);
--color-bg-error-base: var(--color-red-800); --color-bg-error-base-hover: var(--color-red-800); // legacy
--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-soft: var(--color-red-900); --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 // Warning
--overlay-strength-warning: 10%; --color-bg-warning-base: var(--color-yellow-700); // legacy
--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-soft: var(--color-yellow-900); --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 // Success
--overlay-strength-success: 15%; --color-bg-success-base: var(--color-green-600); // legacy
--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-soft: var(--color-green-900); --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 TOKENS */
--border-strength-primary: 18%; --color-border-primary: var(--color-grey-800);
--color-border-primary: #{utils.css-alpha( --color-border-brand: var(--color-text-brand);
var(--color-indigo-200), --color-border-brand-soft: var(--color-indigo-800);
var(--border-strength-primary) --color-border-error: var(--color-red-300);
)}; --color-border-media: rgb(252 248 255 / 15%); // legacy
--color-border-media: rgb(252 248 255 / 15%); --color-border-error-soft: #{utils.css-alpha(var(--color-border-error), 50%)}; // legacy
--color-border-verified: rgb(220, 3, 240); --color-border-warning-soft: #{utils.css-alpha(
--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(
var(--color-text-warning), var(--color-text-warning),
50% 50%
)}; )}; // legacy
--color-border-on-bg-success-softer: #{utils.css-alpha(
--color-border-success-soft: #{utils.css-alpha(
var(--color-text-success), var(--color-text-success),
50% 50%
)}; )}; // legacy
--color-border-on-bg-inverted: var(--color-border-primary);
/* SHADOW TOKENS */ /* SHADOW TOKENS (LEGACY) */
--shadow-strength-primary: 80%; --shadow-strength-primary: 80%;
--color-shadow-primary: #{utils.css-alpha( --color-shadow-primary: #{utils.css-alpha(
@@ -160,16 +102,16 @@
0 8px 10px -6px var(--color-shadow-primary); 0 8px 10px -6px var(--color-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px 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-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-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-stroke: var(--color-text-disabled);
--color-graph-disabled-fill: var(--color-bg-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-container-color: rgb(87 24 60 / 100%);
--rich-text-text-color: rgb(255 175 212 / 100%); --rich-text-text-color: rgb(255 175 212 / 100%);
@@ -182,7 +124,9 @@
--color-text-primary: var(--color-grey-50); --color-text-primary: var(--color-grey-50);
--color-text-status-links: var(--color-text-brand); --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);
} }

158
app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss
View File

@@ -5,145 +5,88 @@
--color-text-primary: var(--color-grey-950); --color-text-primary: var(--color-grey-950);
--color-text-secondary: var(--color-grey-600); --color-text-secondary: var(--color-grey-600);
--color-text-tertiary: var(--color-grey-500); --color-text-tertiary: var(--color-grey-500); // legacy
--color-text-on-inverted: var(--color-white); --color-text-inverted: var(--color-white);
--color-text-brand: var(--color-indigo-700); --color-text-brand: var(--color-indigo-700);
--color-text-brand-soft: color-mix( --color-text-brand-soft: color-mix(
in oklab, in oklab,
var(--color-text-primary), var(--color-text-primary),
var(--color-text-brand) var(--color-text-brand)
); ); // legacy
--color-text-on-brand-base: var(--color-white); --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-error: var(--color-red-800);
--color-text-on-error-base: var(--color-white); --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-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-on-success-base: var(--color-white);
--color-text-disabled: var(--color-grey-300); --color-text-disabled: var(--color-grey-300); // legacy
--color-text-on-disabled: var(--color-grey-200); --color-text-on-disabled: var(--color-grey-200); // legacy
--color-text-bookmark-highlight: var(--color-text-error); --color-text-bookmark-highlight: var(--color-text-error); // legacy
--color-text-favourite-highlight: var(--color-text-warning); --color-text-favourite-highlight: var(--color-text-warning); // legacy
--color-text-on-media: var(--color-white); --color-text-on-media: var(--color-white); // legacy
--color-text-status-links: var(--color-text-brand); --color-text-status-links: var(--color-text-brand); // legacy
/* BACKGROUND TOKENS */ /* BACKGROUND TOKENS */
// Neutrals // Neutrals
--color-bg-primary: var(--color-white); --color-bg-primary: var(--color-white);
--overlay-strength-secondary: 4%; --overlay-strength-secondary: 4%;
--color-bg-secondary-base: #000550; --color-bg-secondary: var(--color-grey-50);
--color-bg-secondary: #{color-mix( --color-bg-tertiary: var(--color-grey-100); // legacy
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))
)};
// Utility // Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-950); --color-bg-inverted: var(--color-grey-950);
--color-bg-media-base: var(--color-black); --color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-media-strength: 65%; --color-bg-overlay-highlight: #{utils.css-alpha(var(--color-grey-950), 5%)};
--color-bg-media: #{utils.css-alpha( --color-bg-overlay: var(--color-bg-primary); // legacy
var(--color-bg-media-base), --color-bg-media-base: var(--color-black); // legacy
var(--color-bg-media-strength) --color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
)}; --color-bg-disabled: var(--color-grey-400); // legacy
--color-bg-overlay: var(--color-bg-primary);
--color-bg-disabled: var(--color-grey-400);
// Brand // Brand
--overlay-strength-brand: 6%;
--color-bg-brand-base: var(--color-indigo-700); --color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix( --color-bg-brand-base-hover: var(--color-indigo-800); // legacy
in oklab, --color-bg-brand-soft: var(--color-indigo-100);
var(--color-bg-brand-base), --color-bg-brand-softest: var(--color-indigo-50);
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)
);
// Error // Error
--overlay-strength-error: 5%; --color-bg-error-base: var(--color-red-700);
--color-bg-error-base: var(--color-red-800); --color-bg-error-base-hover: var(--color-red-800); // legacy
--color-bg-error-base-hover: color-mix(
in oklab,
var(--color-bg-error-base),
black var(--overlay-strength-error)
);
--color-bg-error-soft: var(--color-red-100); --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 // Warning
--overlay-strength-warning: 10%; --color-bg-warning-base: var(--color-yellow-700); // legacy
--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-soft: var(--color-yellow-100); --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 // Success
--overlay-strength-success: 15%; --color-bg-success-base: var(--color-green-600); // legacy
--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-soft: var(--color-green-100); --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 TOKENS */
--border-strength-primary: 15%; --color-border-primary: var(--color-grey-200);
--color-border-primary: color-mix( --color-border-brand: var(--color-text-brand);
in oklab, --color-border-brand-soft: var(--color-indigo-200);
var(--color-bg-primary), --color-border-error: var(--color-red-700);
var(--color-grey-950) var(--border-strength-primary) --color-border-media: rgb(252 248 255 / 15%); // legacy
); --color-border-error-soft: #{utils.css-alpha(var(--color-text-error), 50%)}; // legacy
--color-border-media: rgb(252 248 255 / 15%); --color-border-warning-soft: #{utils.css-alpha(
--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(
var(--color-text-warning), var(--color-text-warning),
50% 50%
)}; )}; // legacy
--color-border-on-bg-success-softer: #{utils.css-alpha(
--color-border-success-soft: #{utils.css-alpha(
var(--color-text-success), var(--color-text-success),
50% 50%
)}; )}; // legacy
--color-border-on-bg-inverted: var(--color-border-primary);
/* SHADOW TOKENS */ /* SHADOW TOKENS (LEGACY) */
--shadow-strength-primary: 30%; --shadow-strength-primary: 30%;
--color-shadow-primary: #{utils.css-alpha( --color-shadow-primary: #{utils.css-alpha(
@@ -155,16 +98,16 @@
0 8px 10px -6px var(--color-shadow-primary); 0 8px 10px -6px var(--color-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px 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-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-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-stroke: var(--color-text-disabled);
--color-graph-disabled-fill: var(--color-bg-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-container-color: rgb(255 216 231 / 100%);
--rich-text-text-color: rgb(114 47 83 / 100%); --rich-text-text-color: rgb(114 47 83 / 100%);
@@ -179,8 +122,9 @@
--color-text-tertiary: var(--color-grey-700); --color-text-tertiary: var(--color-grey-700);
--color-text-brand: var(--color-indigo-600); --color-text-brand: var(--color-indigo-600);
/* BORDER TOKENS */ /* BACKGROUND TOKENS */
--color-bg-error-base: var(--color-red-800);
--border-strength-primary: 30%; /* BORDER TOKENS */
--color-border-on-bg-secondary: var(--color-grey-300); --color-border-primary: var(--color-grey-300);
} }

2
app/javascript/flavours/glitch/styles/mastodon/widgets.scss
View File

@@ -69,7 +69,7 @@
} }
&.active .avatar-stack .account__avatar { &.active .avatar-stack .account__avatar {
border-color: var(--color-text-brand); border-color: var(--color-border-brand);
} }
.trends__item__current { .trends__item__current {