diff --git a/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss b/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss index 98c0db9f61..4b5bfef1af 100644 --- a/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss +++ b/app/javascript/flavours/glitch/components/form_fields/combobox.module.scss @@ -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); diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss index 3d360bfdd2..bbd32d579c 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss +++ b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss @@ -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) ); } } diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss b/app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss index 469ac3a894..e16eca5254 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss +++ b/app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss @@ -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; diff --git a/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss b/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss index f825659c1d..f0ba5e635d 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/_mixins.scss @@ -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; diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index 6780100ec0..5f0671dd96 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -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); } diff --git a/app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss b/app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss index 94d592aa70..85fd0dab45 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/theme/_base.scss @@ -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; } diff --git a/app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss b/app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss index 9485464e09..9af3385d45 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/theme/_dark.scss @@ -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%; } diff --git a/app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss b/app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss index 534a18367c..64390017b3 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/theme/_light.scss @@ -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 */