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

Replace $base-shadow-color

Browse Source
This commit is contained in:
diondiondion 2025-09-04 15:42:10 +02:00
parent e642098174
commit d596baa4bc
8 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
@use '../mastodon/theme_utils' as *;
@use '../mastodon/theme_utils' as utils;
:root {
--clr-black: #000;
@ -78,11 +78,11 @@
--clr-bg-disabled: var(--clr-grey-400);
--clr-bg-accent-subtle-base: var(--clr-indigo-600);
--clr-bg-accent-subtle-strength: 12%;
--clr-bg-accent-subtle: #{css-alpha(
--clr-bg-accent-subtle: #{utils.css-alpha(
var(--clr-bg-accent-subtle-base),
var(--clr-bg-accent-subtle-strength)
)};
--clr-bg-accent-subtle-highlighted: #{css-alpha(
--clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
var(--clr-bg-accent-subtle-base),
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
)};
@ -94,7 +94,7 @@
);
--clr-bg-error-subtle-base: #f41b3b;
--clr-bg-error-subtle-strength: 12%;
--clr-bg-error-subtle: #{css-alpha(
--clr-bg-error-subtle: #{utils.css-alpha(
var(--clr-bg-error-subtle-base),
var(--clr-bg-error-subtle-strength)
)};
@ -106,7 +106,7 @@
);
--clr-bg-warning-subtle-base: #ffca1b;
--clr-bg-warning-subtle-strength: 10%;
--clr-bg-warning-subtle: #{css-alpha(
--clr-bg-warning-subtle: #{utils.css-alpha(
var(--clr-bg-warning-subtle-base),
var(--clr-bg-warning-subtle-strength)
)};
@ -118,7 +118,7 @@
);
--clr-bg-success-subtle-base: #17e865;
--clr-bg-success-subtle-strength: 15%;
--clr-bg-success-subtle: #{css-alpha(
--clr-bg-success-subtle: #{utils.css-alpha(
var(--clr-bg-success-subtle-base),
var(--clr-bg-success-subtle-strength)
)};
@ -142,9 +142,31 @@
--clr-border-media: rgb(252 248 255 / 15%);
--clr-border-on-bg-secondary: var(--clr-grey-200);
--clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
--clr-border-on-bg-error-subtle: #{css-alpha(var(--clr-text-error), 50%)};
--clr-border-on-bg-warning-subtle: #{css-alpha(var(--clr-text-warning), 50%)};
--clr-border-on-bg-success-subtle: #{css-alpha(var(--clr-text-success), 50%)};
--clr-border-on-bg-error-subtle: #{utils.css-alpha(
var(--clr-text-error),
50%
)};
--clr-border-on-bg-warning-subtle: #{utils.css-alpha(
var(--clr-text-warning),
50%
)};
--clr-border-on-bg-success-subtle: #{utils.css-alpha(
var(--clr-text-success),
50%
)};
/* SHADOW TOKENS */
--clr-shadow-primary-base: var(--clr-black);
--clr-shadow-primary-strength: 30%;
--clr-shadow-primary: #{utils.css-alpha(
var(--clr-shadow-primary-base),
var(--clr-shadow-primary-strength)
)};
--dropdown-shadow:
0 20px 25px -5px var(--clr-shadow-primary),
0 8px 10px -6px var(--clr-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
/* LEGACY TOKENS */
@ -154,8 +176,6 @@
/* MISCELLANEOUS */
--outline-focus-default: 2px solid var(--clr-text-accent);
--avatar-border-radius: 8px;
--dropdown-shadow:
0 20px 25px -5px rgb(0 0 0 / 25%), 0 8px 10px -6px rgb(0 0 0 / 25%);
--overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 35%));
}

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

@ -24,7 +24,7 @@
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
box-shadow: 2px 4px 15px var(--clr-shadow-primary);
h4 {
text-transform: uppercase;

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

@ -14,7 +14,6 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;

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

@ -162,7 +162,7 @@
.nothing-here {
background: $ui-base-color;
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 0 0 15px var(--clr-shadow-primary);
color: var(--clr-text-secondary);
font-size: 14px;
font-weight: 500;

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

@ -640,7 +640,7 @@
&__warning {
color: $inverted-text-color;
background: $ui-primary-color;
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3);
box-shadow: 0 2px 6px var(--clr-shadow-primary);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
@ -2318,7 +2318,7 @@
inset-inline-start: 50%;
transform: translate(-50%, -50%);
color: var(--clr-text-primary);
text-shadow: 1px 1px 2px $base-shadow-color;
text-shadow: 1px 1px 2px var(--clr-shadow-primary-base);
font-weight: 700;
font-size: 15px;
}
@ -4211,7 +4211,7 @@ a.account__display-name {
cursor: pointer;
& > div {
background: color.change($base-shadow-color, $alpha: 0.6);
background: rgb(from var(--clr-shadow-primary-base) r g b / 60%);
border-radius: 8px;
padding: 12px 9px;
backdrop-filter: $backdrop-blur-filter;
@ -5450,7 +5450,7 @@ a.status-card {
z-index: -1;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 0 0 5px var(--clr-shadow-primary);
}
.upload-area__content {
@ -7607,11 +7607,11 @@ a.status-card {
.video-player {
overflow: hidden;
position: relative;
background: $base-shadow-color;
color: var(--clr-text-on-media);
background: var(--clr-bg-media);
max-width: 100%;
border-radius: 8px;
box-sizing: border-box;
color: $white;
display: flex;
align-items: center;
outline: 1px solid var(--clr-border-media);
@ -7648,8 +7648,8 @@ a.status-card {
box-sizing: border-box;
background: linear-gradient(
0deg,
color.change($base-shadow-color, $alpha: 0.85) 0,
color.change($base-shadow-color, $alpha: 0.45) 60%,
rgb(from var(--clr-bg-media) r g b / 85%) 0,
rgb(from var(--clr-bg-media) r g b / 45%) 60%,
transparent
);
padding: 0 15px;
@ -7689,7 +7689,7 @@ a.status-card {
height: 100%;
z-index: 4;
border: 0;
background: var(--clr-bg-overlay);
background: var(--clr-bg-primary);
color: var(--clr-text-secondary);
transition: none;
pointer-events: none;
@ -7845,7 +7845,7 @@ a.status-card {
margin-inline-start: -6px;
transform: translate(0, -50%);
background: $white;
box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 1px 2px 6px var(--clr-shadow-primary);
opacity: 0;
.no-reduce-motion & {
@ -7915,7 +7915,7 @@ a.status-card {
top: 10px;
margin-inline-start: -6px;
background: $white;
box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 1px 2px 6px var(--clr-shadow-primary);
.no-reduce-motion & {
transition: opacity 0.1s ease;
@ -7939,7 +7939,7 @@ a.status-card {
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
background: color.change($base-shadow-color, $alpha: 0.45);
background: rgb(from var(--clr-bg-media) r g b / 45%);
backdrop-filter: $backdrop-blur-filter;
color: $white;
border-radius: 8px;
@ -8296,7 +8296,7 @@ noscript {
transform: translate(-50%, -50%);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35);
box-shadow: 0 0 0 9999em var(--clr-shadow-primary);
pointer-events: none;
}
}
@ -10345,8 +10345,8 @@ noscript {
border: 1px solid var(--clr-border-on-bg-inverted);
border-radius: 8px;
box-shadow:
0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25);
0 10px 15px -3px var(--clr-shadow-primary),
0 4px 6px -4px var(--clr-shadow-primary);
cursor: default;
font-size: 15px;
line-height: 21px;

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

@ -165,6 +165,19 @@
)};
--clr-border-on-bg-inverted: var(--clr-border-primary);
/* SHADOW TOKENS */
--clr-shadow-primary-base: var(--clr-black);
--clr-shadow-primary-strength: 80%;
--clr-shadow-primary: #{utils.css-alpha(
var(--clr-shadow-primary-base),
var(--clr-shadow-primary-strength)
)};
--dropdown-shadow:
0 20px 25px -5px var(--clr-shadow-primary),
0 8px 10px -6px var(--clr-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
/* GRAPHS/CHARTS TOKENS */
--clr-graph-primary-stroke: var(--clr-text-accent);
@ -184,9 +197,6 @@
--outline-focus-default: 2px solid var(--clr-text-accent);
--avatar-border-radius: 8px;
--dropdown-shadow:
0 20px 25px -5px rgb(0 0 0 / 80%), 0 8px 10px -6px rgb(0 0 0 / 80%);
--overlay-icon-shadow: drop-shadow(0 0 8px rgb(0 0 0 / 80%));
}
body {

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

@ -975,7 +975,7 @@ code {
background: $simple-background-color;
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 0 0 15px var(--clr-shadow-primary);
display: inline-block;
svg {
@ -1000,8 +1000,8 @@ code {
box-sizing: border-box;
background: var(--clr-bg-error-subtle);
color: var(--clr-text-primary);
text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
text-shadow: 1px 1px 0 var(--clr-shadow-primary);
box-shadow: 0 2px 6px var(--clr-shadow-primary);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;

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

@ -18,7 +18,7 @@
padding: 15px;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
box-shadow: 0 0 15px var(--clr-shadow-primary);
}
& > a {