Skip to content

Commit 6328599

Browse files
ClearlyClaireClearlyClaire
authored
Merge pull request #3015 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes up to 8a3bed1
2 parents ca204e6 + 3bfc576 commit 6328599

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+491
-332
lines changed

Diff for: ‎app/javascript/flavours/glitch/styles/_functions.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@use 'sass:color';
2+
3+
$darken-multiplier: -1 !default;
4+
$lighten-multiplier: 1 !default;
5+
6+
// Invert darkened and lightened colors
7+
@function darken($color, $amount) {
8+
@return color.adjust(
9+
$color,
10+
$lightness: $amount * $darken-multiplier,
11+
$space: hsl
12+
);
13+
}
14+
15+
@function lighten($color, $amount) {
16+
@return color.adjust(
17+
$color,
18+
$lightness: $amount * $lighten-multiplier,
19+
$space: hsl
20+
);
21+
}

Diff for: ‎app/javascript/flavours/glitch/styles/_mixins.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables' as *;
2+
13
@mixin fullwidth-gallery {
24
&.full-width {
35
margin-left: -14px;

Diff for: ‎app/javascript/flavours/glitch/styles/variables.scss renamed to ‎app/javascript/flavours/glitch/styles/_variables.scss

+6-29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'sass:color';
2+
@use 'functions' as *;
23

34
// Commonly used web colors
45
$black: #000000; // Black
@@ -96,6 +97,7 @@ $media-modal-media-max-height: 80%;
9697

9798
$no-gap-breakpoint: 1175px;
9899
$mobile-breakpoint: 630px;
100+
$no-columns-breakpoint: 600px;
99101

100102
$font-sans-serif: 'mastodon-font-sans-serif' !default;
101103
$font-display: 'mastodon-font-display' !default;
@@ -107,32 +109,7 @@ $ui-avatar-border-size: 8%;
107109
// More variables
108110
$dismiss-overlay-width: 4rem;
109111

110-
:root {
111-
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
112-
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
113-
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
114-
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
115-
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
116-
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
117-
--modal-border-color: #{lighten($ui-base-color, 4%)};
118-
--background-border-color: #{lighten($ui-base-color, 4%)};
119-
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
120-
--background-color: #{darken($ui-base-color, 8%)};
121-
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
122-
--surface-background-color: #{darken($ui-base-color, 4%)};
123-
--surface-variant-background-color: #{$ui-base-color};
124-
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
125-
--on-surface-color: #{transparentize($ui-base-color, 0.5)};
126-
--avatar-border-radius: 8px;
127-
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
128-
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
129-
--error-background-color: #{darken($error-red, 16%)};
130-
--error-active-background-color: #{darken($error-red, 12%)};
131-
--on-error-color: #fff;
132-
--rich-text-container-color: rgba(87, 24, 60, 100%);
133-
--rich-text-text-color: rgba(255, 175, 212, 100%);
134-
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
135-
--input-placeholder-color: #{$dark-text-color};
136-
--input-background-color: var(--surface-variant-background-color);
137-
--on-input-color: #{$secondary-text-color};
138-
}
112+
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
113+
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
114+
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
115+
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;

Diff for: ‎app/javascript/flavours/glitch/styles/about.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables' as *;
2+
13
$maximum-width: 1235px;
24
$fluid-breakpoint: $maximum-width + 20px;
35

Diff for: ‎app/javascript/flavours/glitch/styles/accessibility.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
2-
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
3-
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
4-
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
1+
@use 'variables' as *;
52

63
%emoji-color-inversion {
74
filter: invert(1);

Diff for: ‎app/javascript/flavours/glitch/styles/accounts.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'variables' as *;
2+
@use 'functions' as *;
3+
14
.card {
25
& > a {
36
display: block;

Diff for: ‎app/javascript/flavours/glitch/styles/admin.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use 'sass:math';
2+
@use 'functions' as *;
3+
@use 'variables' as *;
24

35
$no-columns-breakpoint: 890px;
46
$sidebar-width: 300px;

Diff for: ‎app/javascript/flavours/glitch/styles/annual_reports.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables' as *;
2+
13
:root {
24
--indigo-1: #17063b;
35
--indigo-2: #2f0c7a;

Diff for: ‎app/javascript/flavours/glitch/styles/application.scss

+28-26
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
@import 'mixins';
2-
@import 'variables';
3-
@import 'styles/fonts/roboto';
4-
@import 'styles/fonts/roboto-mono';
1+
@use 'functions';
2+
@use 'mixins';
3+
@use 'variables';
4+
@use 'css_variables';
5+
@use 'styles/fonts/roboto';
6+
@use 'styles/fonts/roboto-mono';
57

6-
@import 'reset';
7-
@import 'basics';
8-
@import 'branding';
9-
@import 'containers';
10-
@import 'lists';
11-
@import 'widgets';
12-
@import 'forms';
13-
@import 'accounts';
14-
@import 'components';
15-
@import 'polls';
16-
@import 'modal';
17-
@import 'emoji_picker';
18-
@import 'annual_reports';
19-
@import 'about';
20-
@import 'tables';
21-
@import 'admin';
22-
@import 'dashboard';
23-
@import 'rtl';
24-
@import 'accessibility';
25-
@import 'rich_text';
26-
@import 'glitch_local_settings';
27-
@import 'glitch_doodle';
8+
@use 'reset';
9+
@use 'basics';
10+
@use 'branding';
11+
@use 'containers';
12+
@use 'lists';
13+
@use 'widgets';
14+
@use 'forms';
15+
@use 'accounts';
16+
@use 'components';
17+
@use 'polls';
18+
@use 'modal';
19+
@use 'emoji_picker';
20+
@use 'annual_reports';
21+
@use 'about';
22+
@use 'tables';
23+
@use 'admin';
24+
@use 'dashboard';
25+
@use 'rtl';
26+
@use 'accessibility';
27+
@use 'rich_text';
28+
@use 'glitch_local_settings';
29+
@use 'glitch_doodle';

Diff for: ‎app/javascript/flavours/glitch/styles/basics.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'variables' as *;
2+
@use 'functions' as *;
3+
14
@function hex-color($color) {
25
@if type-of($color) == 'color' {
36
$color: str-slice(ie-hex-str($color), 4);

Diff for: ‎app/javascript/flavours/glitch/styles/branding.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables' as *;
2+
13
.logo {
24
color: $primary-text-color;
35
}

Diff for: ‎app/javascript/flavours/glitch/styles/components.scss

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@use 'sass:color';
2+
@use 'variables' as *;
3+
@use 'functions' as *;
4+
@use 'mixins' as *;
5+
16
.app-body {
27
-webkit-overflow-scrolling: touch;
38
-ms-overflow-style: -ms-autohiding-scrollbar;
@@ -1899,18 +1904,22 @@ body > [data-popper-placement] {
18991904
.detailed-status__wrapper-direct {
19001905
.detailed-status,
19011906
.detailed-status__action-bar {
1902-
background: mix($ui-base-color, $ui-highlight-color, 95%);
1907+
background: color.mix($ui-base-color, $ui-highlight-color, 95%);
19031908
}
19041909

19051910
&:focus {
19061911
.detailed-status,
19071912
.detailed-status__action-bar {
1908-
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
1913+
background: color.mix(
1914+
lighten($ui-base-color, 4%),
1915+
$ui-highlight-color,
1916+
95%
1917+
);
19091918
}
19101919
}
19111920

19121921
.detailed-status__action-bar {
1913-
border-top-color: mix(
1922+
border-top-color: color.mix(
19141923
lighten($ui-base-color, 8%),
19151924
$ui-highlight-color,
19161925
95%
@@ -8818,7 +8827,7 @@ noscript {
88188827
&.active {
88198828
transition: all 100ms ease-in;
88208829
transition-property: background-color, color;
8821-
background-color: mix(
8830+
background-color: color.mix(
88228831
lighten($ui-base-color, 12%),
88238832
$ui-highlight-color,
88248833
80%

Diff for: ‎app/javascript/flavours/glitch/styles/containers.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables' as *;
2+
13
.container-alt {
24
width: 700px;
35
margin: 0 auto;

Diff for: ‎app/javascript/flavours/glitch/styles/contrast.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import 'contrast/variables';
2-
@import 'application';
3-
@import 'contrast/diff';
1+
@use 'contrast/variables';
2+
@use 'application';
3+
@use 'contrast/diff';

Diff for: ‎app/javascript/flavours/glitch/styles/contrast/diff.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../variables' as *;
2+
13
.status__content a,
24
.reply-indicator__content a,
35
.edit-indicator__content a,

Diff for: ‎app/javascript/flavours/glitch/styles/contrast/variables.scss

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../functions' as *;
2+
13
// Dependent colors
24
$black: #000000;
35

@@ -11,12 +13,13 @@ $ui-primary-color: $classic-primary-color !default;
1113
$ui-secondary-color: $classic-secondary-color !default;
1214
$ui-highlight-color: $classic-highlight-color !default;
1315

14-
$darker-text-color: lighten($ui-primary-color, 20%) !default;
15-
$dark-text-color: lighten($ui-primary-color, 12%) !default;
16-
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
17-
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
18-
$action-button-color: lighten($ui-base-color, 50%);
19-
20-
$inverted-text-color: $black !default;
21-
$lighter-text-color: darken($ui-base-color, 6%) !default;
22-
$light-text-color: darken($ui-primary-color, 40%) !default;
16+
@use '../variables' with (
17+
$darker-text-color: lighten($ui-primary-color, 20%),
18+
$dark-text-color: lighten($ui-primary-color, 12%),
19+
$secondary-text-color: lighten($ui-secondary-color, 6%),
20+
$highlight-text-color: lighten($ui-highlight-color, 10%),
21+
$action-button-color: lighten($ui-base-color, 50%),
22+
$inverted-text-color: $black,
23+
$lighter-text-color: darken($ui-base-color, 6%),
24+
$light-text-color: darken($ui-primary-color, 40%)
25+
);

Diff for: ‎app/javascript/flavours/glitch/styles/css_variables.scss

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@use 'sass:color';
2+
@use 'functions' as *;
3+
@use 'variables' as *;
4+
5+
:root {
6+
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
7+
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
8+
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
9+
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
10+
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
11+
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
12+
--modal-border-color: #{lighten($ui-base-color, 4%)};
13+
--background-border-color: #{lighten($ui-base-color, 4%)};
14+
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
15+
--background-color: #{darken($ui-base-color, 8%)};
16+
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
17+
--surface-background-color: #{darken($ui-base-color, 4%)};
18+
--surface-variant-background-color: #{$ui-base-color};
19+
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
20+
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
21+
--avatar-border-radius: 8px;
22+
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
23+
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
24+
--error-background-color: #{darken($error-red, 16%)};
25+
--error-active-background-color: #{darken($error-red, 12%)};
26+
--on-error-color: #fff;
27+
--rich-text-container-color: rgba(87, 24, 60, 100%);
28+
--rich-text-text-color: rgba(255, 175, 212, 100%);
29+
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
30+
--input-placeholder-color: #{$dark-text-color};
31+
--input-background-color: var(--surface-variant-background-color);
32+
--on-input-color: #{$secondary-text-color};
33+
}

Diff for: ‎app/javascript/flavours/glitch/styles/dashboard.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'functions' as *;
2+
@use 'variables' as *;
3+
14
.dashboard__counters {
25
display: flex;
36
flex-wrap: wrap;

Diff for: ‎app/javascript/flavours/glitch/styles/emoji_picker.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'variables' as *;
2+
@use 'functions' as *;
3+
14
.emoji-mart {
25
font-size: 13px;
36
display: inline-block;

Diff for: ‎app/javascript/flavours/glitch/styles/forms.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
$no-columns-breakpoint: 600px;
1+
@use 'variables' as *;
2+
@use 'functions' as *;
23

34
code {
45
font-family: $font-monospace, monospace;

Diff for: ‎app/javascript/flavours/glitch/styles/glitch_local_settings.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'functions' as *;
2+
@use 'variables' as *;
3+
14
.glitch.local-settings {
25
position: relative;
36
display: flex;

Diff for: ‎app/javascript/flavours/glitch/styles/mastodon-light.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
@import 'mastodon-light/variables';
2-
@import 'application';
3-
@import 'mastodon-light/diff';
1+
@use 'mastodon-light/variables';
2+
@use 'mastodon-light/css_variables';
3+
@use 'application';
4+
@use 'mastodon-light/diff';

Diff for: ‎app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@use 'sass:color';
2+
@use '../variables' as *;
3+
@use 'variables' as *;
4+
@use '../functions' as *;
5+
6+
body {
7+
--dropdown-border-color: hsl(240deg, 25%, 88%);
8+
--dropdown-background-color: #fff;
9+
--modal-border-color: hsl(240deg, 25%, 88%);
10+
--modal-background-color: var(--background-color-tint);
11+
--background-border-color: hsl(240deg, 25%, 88%);
12+
--background-color: #fff;
13+
--background-color-tint: rgba(255, 255, 255, 80%);
14+
--background-filter: blur(10px);
15+
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
16+
--rich-text-container-color: rgba(255, 216, 231, 100%);
17+
--rich-text-text-color: rgba(114, 47, 83, 100%);
18+
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
19+
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
20+
--input-background-color: #{darken($ui-base-color, 10%)};
21+
}

0 commit comments

Comments
 (0)