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] Theme tokens sync

Browse Source 
Port e4bb347f72 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2026-02-12 12:33:28 +01:00
committed by Claire
parent e451416d90
commit f16bef3f7d
8 changed files with 87 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,7 @@
padding: 4px;
border-radius: 4px;
color: var(--color-text-primary);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);

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

@@ -272,7 +272,7 @@ svg.badgeIcon {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--color-bg-elevated);
background-color: var(--color-bg-primary);
box-shadow: 0 1px 4px 0 var(--color-shadow-primary);
border-radius: 9999px;
transition:
@@ -295,7 +295,7 @@ svg.badgeIcon {
background-color: color-mix(
in oklab,
var(--color-bg-brand-base) var(--overlay-strength-brand),
var(--color-bg-elevated)
var(--color-bg-primary)
);
}
}

2
app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss
View File

@@ -24,7 +24,7 @@
}
.filterOverlay {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border-radius: 12px;
box-shadow: var(--dropdown-shadow);
min-width: 230px;

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

@@ -25,7 +25,7 @@
}
@mixin search-popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;

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

@@ -411,7 +411,7 @@ body > [data-popper-placement] {
&__suggestions {
box-shadow: var(--dropdown-shadow);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 0 0 4px 4px;
color: var(--color-text-primary);
@@ -2132,7 +2132,7 @@ body > [data-popper-placement] {
}
&__popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -2835,7 +2835,7 @@ a.account__display-name {
}
.dropdown-menu {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
padding: 2px; // glitch: reduced padding
@@ -5308,7 +5308,7 @@ a.status-card {
@include search-popout;
padding: 0;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
}
&__menu-list {
@@ -5478,7 +5478,7 @@ a.status-card {
position: relative;
margin-top: 5px;
z-index: 2;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -5505,7 +5505,7 @@ a.status-card {
z-index: 4;
top: -5px;
inset-inline-start: -9px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 4px;
box-shadow: var(--dropdown-shadow);
@@ -5572,7 +5572,7 @@ a.status-card {
inset-inline-start: 0;
z-index: -1;
border-radius: 4px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
box-shadow: 0 0 5px var(--color-shadow-primary);
}
@@ -5677,7 +5677,7 @@ a.status-card {
.language-dropdown__dropdown,
.visibility-dropdown__dropdown {
box-shadow: var(--dropdown-shadow);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
padding: 4px;
border-radius: 4px;
@@ -5897,7 +5897,7 @@ a.status-card {
.emoji-mart-search {
padding: 10px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
input {
padding: 8px 12px;
@@ -5930,7 +5930,7 @@ a.status-card {
.emoji-mart-scroll {
padding: 0 10px 10px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
}
&__results {
@@ -6056,7 +6056,7 @@ a.status-card {
inset-inline-start: 0;
margin-top: -2px;
width: 100%;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 0 0 4px 4px;
box-shadow: var(--dropdown-shadow);
@@ -6813,7 +6813,7 @@ a.status-card {
width: 588px;
max-height: 80vh;
flex-direction: column;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
border-radius: 16px;
@@ -6897,7 +6897,7 @@ a.status-card {
}
&__popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -7203,7 +7203,7 @@ a.status-card {
.actions-modal {
border-radius: 8px 8px 0 0;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border-color: var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -7421,7 +7421,7 @@ img.modal-warning {
&--solid {
color: var(--color-text-primary);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
}

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

@@ -1,27 +1,40 @@
@mixin palette {
--color-black: #000;
--color-grey-950: #181821;
--color-grey-800: #292938;
--color-grey-700: #444664;
--color-grey-600: #545778;
--color-grey-500: #696d91;
--color-grey-400: #8b8dac;
--color-grey-300: #b4b6cb;
--color-grey-200: #d8d9e3;
--color-grey-100: #f0f0f5;
--color-grey-50: #f0f1ff;
--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: #8886ff;
--color-indigo-400: #8280f9;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-indigo-50: #f0f1ff;
--color-red-500: #ff637e;
--color-red-600: #ec003f;
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-300: #ffa2a2;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-red-950: #460809;
--color-yellow-50: #fffbeb;
--color-yellow-100: #fef3c6;
--color-yellow-400: #ffb900;
--color-yellow-600: #e17100;
--color-yellow-700: #bb4d00;
--color-yellow-900: #7b3306;
--color-yellow-950: #461901;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-400: #05df72;
--color-green-600: #00a63e;
--color-green-900: #0d542b;
--color-green-950: #032e15;
}

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

@@ -3,11 +3,11 @@
@mixin tokens {
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-400);
--color-text-tertiary: var(--color-grey-500);
--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-brand: var(--color-indigo-400);
--color-text-brand: var(--color-indigo-300);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
@@ -15,7 +15,7 @@
);
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-600);
--color-text-error: var(--color-red-500);
--color-text-error: var(--color-red-300);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-400);
--color-text-on-warning-base: var(--color-white);
@@ -36,8 +36,8 @@
// Neutrals
--color-bg-primary: var(--color-grey-950);
--overlay-strength-secondary: 8%;
--color-bg-secondary-base: var(--color-indigo-200);
--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)
@@ -55,7 +55,6 @@
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-elevated: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-50);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
@@ -67,16 +66,16 @@
--color-bg-disabled: var(--color-grey-700);
// Brand
--overlay-strength-brand: 10%;
--color-bg-brand-base: var(--color-indigo-600);
--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),
black var(--overlay-strength-brand)
var(--color-bg-primary) var(--overlay-strength-brand)
);
--color-bg-brand-soft: #{utils.css-alpha(
var(--color-bg-brand-base),
calc(var(--overlay-strength-brand) * 1.5)
#6f4df5,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
var(--color-bg-brand-base),
@@ -84,21 +83,15 @@
)};
// Error
--overlay-strength-error: 12%;
--color-bg-error-base: var(--color-red-600);
--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),
black var(--overlay-strength-error)
var(--color-bg-primary) var(--overlay-strength-error)
);
--color-bg-error-soft: #{utils.css-alpha(
var(--color-bg-error-base),
calc(var(--overlay-strength-error) * 1.5)
)};
--color-bg-error-softer: #{utils.css-alpha(
var(--color-bg-error-base),
var(--overlay-strength-error)
)};
--color-bg-error-soft: var(--color-red-900);
--color-bg-error-softer: var(--color-red-950);
// Warning
--overlay-strength-warning: 10%;
@@ -106,16 +99,10 @@
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
black var(--overlay-strength-warning)
var(--color-bg-primary) var(--overlay-strength-warning)
);
--color-bg-warning-soft: #{utils.css-alpha(
var(--color-bg-warning-base),
calc(var(--overlay-strength-warning) * 1.5)
)};
--color-bg-warning-softer: #{utils.css-alpha(
var(--color-bg-warning-base),
var(--overlay-strength-warning)
)};
--color-bg-warning-soft: var(--color-yellow-900);
--color-bg-warning-softer: var(--color-yellow-950);
// Success
--overlay-strength-success: 15%;
@@ -123,16 +110,10 @@
--color-bg-success-base-hover: color-mix(
in oklab,
var(--color-bg-success-base),
black var(--overlay-strength-success)
var(--color-bg-primary) var(--overlay-strength-success)
);
--color-bg-success-soft: #{utils.css-alpha(
var(--color-bg-success-base),
calc(var(--overlay-strength-success) * 1.5)
)};
--color-bg-success-softer: #{utils.css-alpha(
var(--color-bg-success-base),
var(--overlay-strength-success)
)};
--color-bg-success-soft: var(--color-green-900);
--color-bg-success-softer: var(--color-green-950);
/* BORDER TOKENS */
@@ -194,12 +175,9 @@
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-brand: var(--color-indigo-300);
--color-text-status-links: var(--color-text-brand);
/* BORDER TOKENS */
--border-strength-primary: 18%;
--border-strength-primary: 30%;
}

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

@@ -7,7 +7,7 @@
--color-text-secondary: var(--color-grey-600);
--color-text-tertiary: var(--color-grey-500);
--color-text-on-inverted: var(--color-white);
--color-text-brand: var(--color-indigo-600);
--color-text-brand: var(--color-indigo-700);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
@@ -15,7 +15,7 @@
);
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-400);
--color-text-error: var(--color-red-600);
--color-text-error: var(--color-red-800);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-600);
--color-text-on-warning-base: var(--color-white);
@@ -32,8 +32,8 @@
// Neutrals
--color-bg-primary: var(--color-white);
--overlay-strength-secondary: 5%;
--color-bg-secondary-base: var(--color-grey-600);
--overlay-strength-secondary: 4%;
--color-bg-secondary-base: #000550;
--color-bg-secondary: #{color-mix(
in oklab,
var(--color-bg-primary),
@@ -52,7 +52,6 @@
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-elevated: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-950);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
@@ -64,38 +63,32 @@
--color-bg-disabled: var(--color-grey-400);
// Brand
--overlay-strength-brand: 8%;
--color-bg-brand-base: var(--color-indigo-600);
--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(
var(--color-bg-brand-base),
calc(var(--overlay-strength-brand) * 1.5)
#0012d8,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
var(--color-bg-brand-base),
#0012d8,
var(--overlay-strength-brand)
)};
// Error
--overlay-strength-error: 12%;
--color-bg-error-base: var(--color-red-600);
--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-soft: #{utils.css-alpha(
var(--color-bg-error-base),
calc(var(--overlay-strength-error) * 1.5)
)};
--color-bg-error-softer: #{utils.css-alpha(
var(--color-bg-error-base),
var(--overlay-strength-error)
)};
--color-bg-error-soft: var(--color-red-100);
--color-bg-error-softer: var(--color-red-50);
// Warning
--overlay-strength-warning: 10%;
@@ -105,14 +98,8 @@
var(--color-bg-warning-base),
black var(--overlay-strength-warning)
);
--color-bg-warning-soft: #{utils.css-alpha(
var(--color-bg-warning-base),
calc(var(--overlay-strength-warning) * 1.5)
)};
--color-bg-warning-softer: #{utils.css-alpha(
var(--color-bg-warning-base),
var(--overlay-strength-warning)
)};
--color-bg-warning-soft: var(--color-yellow-100);
--color-bg-warning-softer: var(--color-yellow-50);
// Success
--overlay-strength-success: 15%;
@@ -122,14 +109,8 @@
var(--color-bg-success-base),
black var(--overlay-strength-success)
);
--color-bg-success-soft: #{utils.css-alpha(
var(--color-bg-success-base),
calc(var(--overlay-strength-success) * 1.5)
)};
--color-bg-success-softer: #{utils.css-alpha(
var(--color-bg-success-base),
var(--overlay-strength-success)
)};
--color-bg-success-soft: var(--color-green-100);
--color-bg-success-softer: var(--color-green-50);
/* BORDER TOKENS */