From df3d3197ffc0f37af019e2cb22b41149bbd79224 Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Tue, 3 Sep 2024 14:45:18 -0500 Subject: [PATCH] buttons: Simplify color declarations attached to .button. --- web/styles/app_components.css | 20 ++++++++++++-------- web/styles/app_variables.css | 22 ++++++++++++++++++++++ web/styles/dark_theme.css | 27 --------------------------- web/styles/settings.css | 5 ----- web/styles/widgets.css | 4 ++-- 5 files changed, 36 insertions(+), 42 deletions(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 0a00ecc8fe..38d29a3267 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -120,10 +120,10 @@ input::placeholder { line-height: normal; text-align: center; - background-color: hsl(0deg 0% 100%); + background-color: var(--color-background-zulip-button); color: inherit; outline: none; - border: 1px solid hsl(0deg 0% 80%); + border: 1px solid var(--color-border-zulip-button); border-radius: 2px; box-shadow: none; @@ -171,14 +171,18 @@ input::placeholder { } &:hover, - &:focus { - border-color: hsl(0deg 0% 60%); + &:focus, + &:active { + border-color: var(--color-border-zulip-button-interactive); + } + + &:hover { + background-color: var(--color-background-zulip-button-hover); } &:active { - border-color: hsl(0deg 0% 60%); color: inherit; - background-color: hsl(0deg 0% 95%); + background-color: var(--color-background-zulip-button-active); } &.add-subscription-button { @@ -241,11 +245,11 @@ input::placeholder { &:disabled { cursor: not-allowed; filter: saturate(0); - background-color: hsl(0deg 0% 93%); + background-color: var(--color-background-zulip-button-disabled); color: hsl(0deg 3% 52%); &:hover { - background-color: hsl(0deg 0% 93%); + background-color: var(--color-background-zulip-button-disabled); color: hsl(156deg 39% 54%); border-color: hsl(156deg 39% 77%); } diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index f64fc285d9..b1161a0e13 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -538,6 +538,7 @@ --color-message-header-icon-interactive: hsl(0deg 0% 0%); --color-background: hsl(0deg 0% 94%); --color-background-widget-input: hsl(0deg 0% 100%); + --color-background-widget-button: hsl(0deg 0% 100%); --color-background-navbar: hsl(0deg 0% 97%); --color-background-active-narrow-filter: hsl(202deg 56% 91%); --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%); @@ -920,6 +921,14 @@ since the modal is also used on billing pages and this file is not imported on billing pages. */ + /* Zulip-style button colors. */ + --color-background-zulip-button: hsl(0deg 0% 100%); + --color-background-zulip-button-hover: var(--color-background-zulip-button); + --color-background-zulip-button-active: hsl(0deg 0% 95%); + --color-background-zulip-button-disabled: hsl(0deg 0% 93%); + --color-border-zulip-button: hsl(0deg 0% 80%); + --color-border-zulip-button-interactive: hsl(0deg 0% 60%); + /* Emoji-picker colors */ --color-background-emoji-picker-popover: hsl(0deg 0% 93%); --color-background-emoji-picker-popover-tab-item-active: hsl( @@ -962,6 +971,7 @@ --color-message-list-border: hsl(0deg 0% 0% / 40%); --color-background: hsl(0deg 0% 11%); --color-background-widget-input: hsl(225deg 6% 10%); + --color-background-widget-button: hsl(0deg 0% 0% / 20%); --color-background-navbar: hsl(0deg 0% 13%); --color-background-active-narrow-filter: hsl(200deg 17% 18%); --color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%); @@ -1332,6 +1342,18 @@ --color-exit-button-background: hsl(226deg 1% 30% / 50%); --color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%); + /* Zulip-style button colors. */ + --color-background-zulip-button: hsl(0deg 0% 0% / 20%); + --color-background-zulip-button-hover: hsl(0deg 0% 0% / 15%); + --color-background-zulip-button-active: var( + --color-background-zulip-button-hover + ); + --color-background-zulip-button-disabled: var( + --color-background-zulip-button + ); + --color-border-zulip-button: hsl(0deg 0% 0% / 60%); + --color-border-zulip-button-interactive: var(--color-border-zulip-button); + /* Emoji-picker colors */ --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%); --color-background-emoji-picker-popover-tab-item-active: hsl( diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index 61c3fbf369..1abe03f141 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -362,29 +362,6 @@ opacity: 0.5; } - .rendered_markdown button, - .new-style .button { - background-color: hsl(0deg 0% 0% / 20%); - - &:not( - .sea-green, - .btn-danger, - .btn-warning, - .poll-vote, - button.poll-option, - button.add-task - ) { - border-color: hsl(0deg 0% 0% / 60%); - color: inherit; - } - - &:hover, - &:focus, - &:active { - background-color: hsl(0deg 0% 0% / 15%); - } - } - .rendered_markdown .message_inline_image { background: hsl(0deg 0% 100% / 3%); @@ -457,10 +434,6 @@ } } - .new-style .button.no-style { - background-color: transparent; - } - .create_user_group_plus_button, .create_stream_plus_button { color: hsl(0deg 0% 100%); diff --git a/web/styles/settings.css b/web/styles/settings.css index f638d6fe80..28145b27a8 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -501,12 +501,7 @@ input[type="checkbox"] { .language_selection_widget .language_selection_button { text-decoration: none; - color: hsl(0deg 0% 20%); min-width: 0; - - .fa.fa-pencil { - margin-left: 5px; - } } #user_enter_sends_label kbd, diff --git a/web/styles/widgets.css b/web/styles/widgets.css index bed1bc2012..856a4c7023 100644 --- a/web/styles/widgets.css +++ b/web/styles/widgets.css @@ -163,7 +163,7 @@ min-width: 25px; height: 25px; font-size: 13px; - background-color: hsl(0deg 0% 100%); + background-color: var(--color-background-widget-button); &:hover { border-color: hsl(156deg 30% 50%); @@ -205,7 +205,7 @@ button { width: max-content; flex: 0 0 auto; border-radius: 3px; - background-color: hsl(0deg 0% 100%); + background-color: var(--color-background-widget-button); padding: 4px; padding-left: 14px; padding-right: 14px;