From 7138e11984d9a71cfb0dcffecb9de5ac2d07654e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Fri, 10 Oct 2025 14:22:59 +0200 Subject: [PATCH] [feature] use css variables for select component - Search field - Notifications filter bar/account post bar - Status prepend part ('x' boosted) - body background color --- .../flavours/glitch/styles/_mixins.scss | 6 ++--- .../flavours/glitch/styles/basics.scss | 4 +-- .../glitch/styles/components/accounts.scss | 15 ++++++----- .../glitch/styles/components/search.scss | 9 +++++-- .../flavours/glitch/styles/gts.scss | 10 ------- .../flavours/glitch/styles/gts/colors.scss | 26 ++++++++++++++++++- .../styles/gts/status/status-prepend.scss | 2 +- 7 files changed, 46 insertions(+), 26 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 9579da8c0..9edd7f9a6 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -53,13 +53,13 @@ @mixin search-input() { width: 100%; - border: 1px solid var(--color-accent-lines); + border: 1px solid var(--color-search-lines); border-radius: var(--drawer-border-radius); box-sizing: border-box; - color: var(--color-accent-fg); + color: var(--color-search-fg); font-family: inherit; font-size: inherit; - background: var(--color-accent-bg); + background: var(--color-search-bg); } @mixin search-popout() { diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index d5bf2ae33..34abaa0f8 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -8,11 +8,11 @@ body { font-family: $font-sans-serif, sans-serif; - background: darken($ui-base-color, 7%); + background: var(--color-bg); font-size: 13px; line-height: 18px; font-weight: 400; - color: $primary-text-color; + color: var(--color-fg); text-rendering: optimizelegibility; font-feature-settings: 'kern'; text-size-adjust: none; diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 3b4852078..05f81ff55 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -361,9 +361,9 @@ display: flex; gap: 8px; padding: 6px; - border: 1px solid var(--color-accent-lines); + border: 1px solid var(--color-notifications-lines); cursor: default; - background: var(--color-accent-bg); + background: var(--color-notifications-bg); a, button { @@ -375,24 +375,25 @@ min-width: 32px; border: 0; border-radius: var(--button-border-radius); - color: $ui-primary-color; + color: var(--color-notifications-fg); line-height: 20px; text-decoration: none; background: transparent; + transition: all 0.3s; &:focus-visible, &:hover { - background: darken($ui-base-color, 10%); + background: var(--color-notifications-bg--hover); } } a.active, button.active { - background: lighten($ui-base-color, 4%); + background: var(--color-notifications-bg--active); &:focus-visible, &:hover { - background: lighten($ui-base-color, 10%); + background: var(--color-notifications-bg--hover); } } @@ -406,7 +407,7 @@ right: calc(100% + 3px); width: 2px; height: 24px; - background: lighten($ui-base-color, 10%); + background: var(--color-notifications-lines); content: ''; } } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 39ab7858c..27413d491 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -20,12 +20,17 @@ line-height: 20px; &::placeholder { - color: lighten($darker-text-color, 4%); + color: var(--color-search-placeholder); font-weight: 500; } &:focus { - background: darken($ui-base-color, 4%); + color: var(--color-search-fg--focus); + background: var(--color-search-bg--focus); + } + + &:focus::placeholder { + color: var(--color-search-placeholder--focus); } } diff --git a/app/javascript/flavours/glitch/styles/gts.scss b/app/javascript/flavours/glitch/styles/gts.scss index c50a08de9..65ba7838e 100644 --- a/app/javascript/flavours/glitch/styles/gts.scss +++ b/app/javascript/flavours/glitch/styles/gts.scss @@ -4,16 +4,6 @@ :root { --drawer-border-radius: 8px; --button-border-radius: 6px; - - /* Base */ - --color-bg: #261f3c; - --color-fg: #d6d2e0; - --color-lines: #3d4455; - - /* Accent */ - --color-accent-bg: #1f232b; - --color-accent-fg: #ffffff; - --color-accent-lines: rgba(172, 172, 249, 0.3); } /* Icons debug */ diff --git a/app/javascript/flavours/glitch/styles/gts/colors.scss b/app/javascript/flavours/glitch/styles/gts/colors.scss index 6192d312d..d09f12cf2 100644 --- a/app/javascript/flavours/glitch/styles/gts/colors.scss +++ b/app/javascript/flavours/glitch/styles/gts/colors.scss @@ -3,13 +3,17 @@ color-scheme: dark; /* Base */ - --color-fg: #d6d2e0; + --color-fg: #fff; + --color-bg: #191b22; + --color-lines: #3d4455; /* Accent */ --color-accent: #8c8dff; --color-accent-hover: #a3a3ff; --color-accent-focus: var(--color-accent-hover); + --color-accent-bg: #1f232b; --color-accent-fg: #9baec8; + --color-accent-lines: rgba(172, 172, 249, 0.3); --color-accent-muted-fg: #666f7a; /* Secondary */ @@ -18,6 +22,26 @@ --color-content-fg: var(--color-fg); --color-content-secondary-bg: var(--color-secondary-bg); + /* UI */ + --color-ui-base: ; + --color-ui-bg: ; + + /* Notifications */ + --color-notifications-bg: var(--color-accent-bg); + --color-notifications-bg--active: #313543; + --color-notifications-bg--hover: var(--color-lines); + --color-notifications-fg: var(--color-accent-fg); + --color-notifications-lines: var(--color-accent-lines); + + /* Search */ + --color-search-bg: var(--color-accent-bg); + --color-search-bg--focus: #1f232b; + --color-search-fg: var(--color-fg); + --color-search-fg--focus: var(--color-fg); + --color-search-lines: var(--color-accent-lines); + --color-search-placeholder: #9baec8; + --color-search-placeholder--focus: #5e6a7a; + /* Status */ --color-status-fg: ; --color-status-bg: #282c37; diff --git a/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss index 979b3317c..b4c19a2fb 100644 --- a/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss +++ b/app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss @@ -32,7 +32,7 @@ text-decoration-color: var(--color-accent-muted-fg); &:hover { - color: var(--color-accent-hover); + color: inherit; text-decoration-thickness: 2px; }