gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-12-16 00:52:42 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Replace -subtle-base tokens with -strong

Browse Source
This commit is contained in:
diondiondion 2025-11-12 12:24:42 +01:00
parent 26cf9094a1
commit 805b649030
3 changed files with 40 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/javascript/styles_new/mastodon-light/css_variables.scss
View File

@ -84,53 +84,57 @@
)};
--color-bg-overlay: var(--color-bg-primary);
--color-bg-disabled: var(--color-grey-400);
--color-bg-accent-subtle-base: var(--color-indigo-600);
// Accent
--color-bg-accent-strong: var(--color-indigo-600);
--color-bg-accent-subtle-strength: 8%;
--color-bg-accent-subtle: #{utils.css-alpha(
var(--color-bg-accent-subtle-base),
var(--color-bg-accent-strong),
var(--color-bg-accent-subtle-strength)
)};
--color-bg-accent-subtle-highlighted: #{utils.css-alpha(
var(--color-bg-accent-subtle-base),
var(--color-bg-accent-strong),
calc(var(--color-bg-accent-subtle-strength) * 1.5)
)};
--color-bg-accent-strong: var(--color-indigo-600);
--color-bg-accent-strong-highlighted: color-mix(
in oklab,
var(--color-bg-accent-strong),
black var(--color-bg-accent-subtle-strength)
);
--color-bg-error-subtle-base: #f41b3b;
--color-bg-error-subtle-strength: 12%;
--color-bg-error-subtle: #{utils.css-alpha(
var(--color-bg-error-subtle-base),
var(--color-bg-error-subtle-strength)
)};
// Error
--color-bg-error-strong: var(--color-red-600);
--color-bg-error-layer-strength: 12%;
--color-bg-error-subtle: #{utils.css-alpha(
var(--color-bg-error-strong),
var(--color-bg-error-layer-strength)
)};
--color-bg-error-strong-highlighted: color-mix(
in oklab,
var(--color-bg-error-strong),
black var(--color-bg-error-subtle-strength)
black var(--color-bg-error-layer-strength)
);
--color-bg-warning-subtle-base: #ffca1b;
// Warning
--color-bg-warning-strong: var(--color-yellow-600);
--color-bg-warning-subtle-strength: 10%;
--color-bg-warning-subtle: #{utils.css-alpha(
var(--color-bg-warning-subtle-base),
var(--color-bg-warning-strong),
var(--color-bg-warning-subtle-strength)
)};
--color-bg-warning-strong: var(--color-yellow-600);
--color-bg-warning-strong-highlighted: color-mix(
in oklab,
var(--color-bg-warning-strong),
black var(--color-bg-warning-subtle-strength)
);
--color-bg-success-subtle-base: #17e865;
// Success
--color-bg-success-strong: var(--color-green-600);
--color-bg-success-subtle-strength: 15%;
--color-bg-success-subtle: #{utils.css-alpha(
var(--color-bg-success-subtle-base),
var(--color-bg-success-strong),
var(--color-bg-success-subtle-strength)
)};
--color-bg-success-strong: var(--color-green-600);
--color-bg-success-strong-highlighted: color-mix(
in oklab,
var(--color-bg-success-strong),
@ -139,12 +143,11 @@
/* BORDER TOKENS */
--color-border-primary-base: #000856;
--color-border-primary-strength: 15%;
--color-border-primary: color-mix(
in oklab,
var(--color-bg-primary),
var(--color-border-primary-base) var(--color-border-primary-strength)
var(--color-grey-950) var(--color-border-primary-strength)
);
--color-border-media: rgb(252 248 255 / 15%);
--color-border-on-bg-secondary: var(--color-grey-200);

6
app/javascript/styles_new/mastodon/components.scss
View File

@ -133,11 +133,7 @@
&:active,
&:focus,
&:hover {
background-color: color-mix(
in oklab,
var(--color-bg-error-strong),
black var(--color-bg-error-subtle-strength)
);
background-color: var(--color-bg-error-strong-highlighted);
transition: none;
}
}

32
app/javascript/styles_new/mastodon/css_variables.scss
View File

@ -70,8 +70,6 @@
var(--color-bg-primary),
var(--color-bg-secondary-base) var(--color-bg-secondary-strength)
);
/* Secondary with doubled mix amount */
--color-bg-tertiary: color-mix(
in oklab,
var(--color-bg-primary),
@ -88,53 +86,57 @@
)};
--color-bg-overlay: var(--color-bg-primary);
--color-bg-disabled: var(--color-grey-700);
--color-bg-accent-subtle-base: var(--color-indigo-400);
// Accent
--color-bg-accent-strong: var(--color-indigo-600);
--color-bg-accent-subtle-strength: 10%;
--color-bg-accent-subtle: #{utils.css-alpha(
var(--color-bg-accent-subtle-base),
var(--color-bg-accent-strong),
var(--color-bg-accent-subtle-strength)
)};
--color-bg-accent-subtle-highlighted: #{utils.css-alpha(
var(--color-bg-accent-subtle-base),
var(--color-bg-accent-strong),
calc(var(--color-bg-accent-subtle-strength) * 1.5)
)};
--color-bg-accent-strong: var(--color-indigo-600);
--color-bg-accent-strong-highlighted: color-mix(
in oklab,
var(--color-bg-accent-strong),
black var(--color-bg-accent-subtle-strength)
);
--color-bg-error-subtle-base: #f41b3b;
// Error
--color-bg-error-strong: var(--color-red-600);
--color-bg-error-subtle-strength: 12%;
--color-bg-error-subtle: #{utils.css-alpha(
var(--color-bg-error-subtle-base),
var(--color-bg-error-strong),
var(--color-bg-error-subtle-strength)
)};
--color-bg-error-strong: var(--color-red-600);
--color-bg-error-strong-highlighted: color-mix(
in oklab,
var(--color-bg-error-strong),
black var(--color-bg-error-subtle-strength)
);
--color-bg-warning-subtle-base: #ffca1b;
// Warning
--color-bg-warning-strong: var(--color-yellow-600);
--color-bg-warning-subtle-strength: 10%;
--color-bg-warning-subtle: #{utils.css-alpha(
var(--color-bg-warning-subtle-base),
var(--color-bg-warning-strong),
var(--color-bg-warning-subtle-strength)
)};
--color-bg-warning-strong: var(--color-yellow-600);
--color-bg-warning-strong-highlighted: color-mix(
in oklab,
var(--color-bg-warning-strong),
black var(--color-bg-warning-subtle-strength)
);
--color-bg-success-subtle-base: #17e865;
// Success
--color-bg-success-strong: var(--color-green-600);
--color-bg-success-subtle-strength: 15%;
--color-bg-success-subtle: #{utils.css-alpha(
var(--color-bg-success-subtle-base),
var(--color-bg-success-strong),
var(--color-bg-success-subtle-strength)
)};
--color-bg-success-strong: var(--color-green-600);
--color-bg-success-strong-highlighted: color-mix(
in oklab,
var(--color-bg-success-strong),