From 7a09daed696b4adde1f07c66eb04e2ccd88cafa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=B8jberg?= Date: Tue, 19 Apr 2022 10:08:23 -0400 Subject: [PATCH] Improve button color configs --- src/UI/Button.elm | 10 --- src/UnisonLocal/PerspectiveLanding.elm | 4 +- src/UnisonShare/PerspectiveLanding.elm | 4 +- src/css/themes/unison-light.css | 20 ++++- src/css/ui/components/button.css | 101 ++++++++++++------------- 5 files changed, 69 insertions(+), 70 deletions(-) diff --git a/src/UI/Button.elm b/src/UI/Button.elm index b29678a..c985219 100644 --- a/src/UI/Button.elm +++ b/src/UI/Button.elm @@ -16,7 +16,6 @@ module UI.Button exposing , medium , preventDefault , primary - , primaryMono , share , small , stopPropagation @@ -229,7 +228,6 @@ type Type type Color = Default - | PrimaryMono | Primary | Share | Danger @@ -255,11 +253,6 @@ default = withColor Default -primaryMono : Button clickMsg -> Button clickMsg -primaryMono = - withColor PrimaryMono - - primary : Button clickMsg -> Button clickMsg primary = withColor Primary @@ -354,9 +347,6 @@ colorToClassName color = Default -> "default" - PrimaryMono -> - "primary-mono" - Primary -> "primary" diff --git a/src/UnisonLocal/PerspectiveLanding.elm b/src/UnisonLocal/PerspectiveLanding.elm index fb3698b..cb94bd6 100644 --- a/src/UnisonLocal/PerspectiveLanding.elm +++ b/src/UnisonLocal/PerspectiveLanding.elm @@ -121,7 +121,7 @@ viewEmptyStateRoot = ] ] (Button.iconThenLabel Find Icon.search "Find Definition" - |> Button.primaryMono + |> Button.primary |> Button.medium ) @@ -136,7 +136,7 @@ viewEmptyStateNamespace fqn = (FQN.view fqn) [ p [] [ text "Browse, search, read docs, open definitions, and explore" ] ] (Button.iconThenLabel Find Icon.search ("Find Definitions in " ++ fqn_) - |> Button.primaryMono + |> Button.primary |> Button.medium ) diff --git a/src/UnisonShare/PerspectiveLanding.elm b/src/UnisonShare/PerspectiveLanding.elm index ab03a2a..0cafb49 100644 --- a/src/UnisonShare/PerspectiveLanding.elm +++ b/src/UnisonShare/PerspectiveLanding.elm @@ -115,7 +115,7 @@ viewEmptyStateRoot = (span [ class "unison-share" ] [ text "Unison ", span [ class "context" ] [ text "Share" ] ]) [ p [] [ text "Explore to discover and share Unison libraries, documentation, types, and terms." ] ] (Button.iconThenLabel Find Icon.search "Find Definition" - |> Button.primaryMono + |> Button.primary |> Button.medium ) @@ -130,7 +130,7 @@ viewEmptyStateNamespace fqn = (FQN.view fqn) [ p [] [ text "Browse, search, read docs, open definitions, and explore" ] ] (Button.iconThenLabel Find Icon.search ("Find Definitions in " ++ fqn_) - |> Button.primaryMono + |> Button.primary |> Button.medium ) diff --git a/src/css/themes/unison-light.css b/src/css/themes/unison-light.css index 1bdf4b3..03b0f95 100644 --- a/src/css/themes/unison-light.css +++ b/src/css/themes/unison-light.css @@ -13,6 +13,8 @@ element, interactive, focus-border, focus-outline, divider, caret, backdrop, scrollbar, scrollbar-track + text-on-action vs action-text + emphasis -------- none, very-subdued, subdued, emphasized @@ -33,9 +35,6 @@ --u-color_scrollbar: var(--color-gray-lighten-30); --u-color_scrollbar-track: var(--color-transparent); - --u-color_search-highlight_text: var(--color-gray-blue-2); - --u-color_search-highlight_background: var(--color-transparent); - --u-color_text: var(--color-gray-darken-20); --u-color_text_very-subdued: var(--color-gray-lighten-30); --u-color_text_subdued: var(--color-gray-lighten-20); @@ -63,6 +62,9 @@ --u-color_action_emphasized: var(--color-gray-darken-20); --u-color_text-on-action-emphasized: var(--color-gray-lighten-60); --u-color_icon-on-action-emphasized: var(--color-gray-lighten-30); + --u-color_action_emphasized_hovered: var(--color-gray-darken-10); + --u-color_text-on-action-emphasized_hovered: var(--color-gray-lighten-60); + --u-color_icon-on-action-emphasized_hovered: var(--color-gray-lighten-30); --u-color_container: var(--color-gray-lighten-100); --u-color_container_hovered: var(--color-gray-lighten-60); --u-color_container_selected: var(--color-gray-lighten-60); @@ -81,11 +83,23 @@ --u-color_element_emphasized_hovered: var(--color-gray-lighten-50); --u-color_element_emphasized_selected: var(--color-gray-lighten-50); + --u-color_search-highlight_text: var(--color-gray-blue-2); + --u-color_search-highlight_background: var(--color-transparent); + --u-color_critical_text: var(--color-pink-1); --u-color_critical_text_subdued: var(--color-pink-3); --u-color_critical_icon: var(--color-pink-3); + --u-color_critical_action: var(--color-pink-1); + --u-color_critical_text-on-action: var(--color-gray-lighten-100); + --u-color_critical_icon-on-action: var(--color-pink-3); + --u-color_critical_action_hovered: var(--color-pink-2); + --u-color_critical_text-on-action_hovered: var(--color-gray-lighten-100); + --u-color_critical_icon-on-action_hovered: var(--color-pink-3); --u-color_info_container_subdued: var(--color-blue-5); + --u-color_info_text: var(--color-blue-2); + + --u-color_positive_text: var(--color-green-2); /* Syntax */ --color-syntax-plain: var(--u-color_text); diff --git a/src/css/ui/components/button.css b/src/css/ui/components/button.css index 856624d..1e44f24 100644 --- a/src/css/ui/components/button.css +++ b/src/css/ui/components/button.css @@ -1,5 +1,4 @@ .button { - /* @color-todo */ --color-button-default-text: var(--u-color_text-on-action); --color-button-default-icon: var(--u-color_icon-on-action); --color-button-default-bg: var(--u-color_action); @@ -7,28 +6,40 @@ --color-button-default-hover-icon: var(--u-color_text-on-action_hovered); --color-button-default-hover-bg: var(--u-color_action_hovered); - --color-button-primary-mono-text: var(--color-gray-lighten-60); - --color-button-primary-mono-bg: var(--color-gray-darken-20); - --color-button-primary-mono-hover-text: var(--color-gray-lighten-60); - --color-button-primary-mono-hover-bg: var(--color-gray-darken-10); - - /* @deprecate */ - --color-button-primary-text: var(--color-gray-lighten-60); - --color-button-primary-bg: var(--color-blue-2); - --color-button-primary-hover-text: var(--color-gray-lighten-60); - --color-button-primary-hover-bg: var(--color-blue-1); + --color-button-primary-text: var(--u-color_text-on-action-emphasized); + --color-button-primary-icon: var(--u-color_icon-on-action-emphasized); + --color-button-primary-bg: var(--u-color_action_emphasized); + --color-button-primary-hover-text: var( + -u-color_text-on-action-emphasized_hovered + ); + --color-button-primary-hover-icon: var( + -u-color_icon-on-action-emphasized_hovered + ); + --color-button-primary-hover-bg: var(--u-color_action_emphasized_hovered); + + --color-button-danger-text: var(--u-color_critical_text-on-action); + --color-button-danger-icon: var(--u-color_critical_icon-on-action); + --color-button-danger-bg: var(--u-color_critical_action); + --color-button-danger-hover-text: var( + --u-color_critical_text-on-action_hovered + ); + --color-button-danger-hover-icon: var( + --u-color_critical_icon-on-action_hovered + ); + --color-button-danger-hover-bg: var(--u-color_critical_action_hovered); + /* @color-todo */ /* @decorative */ + --color-button-decorative-blue-text: var(--color-gray-lighten-60); + --color-button-decorative-blue-bg: var(--color-blue-2); + --color-button-decorative-blue-hover-text: var(--color-gray-lighten-60); + --color-button-decorative-blue-hover-bg: var(--color-blue-1); + --color-button-share-text: var(--color-purple-1); --color-button-share-bg: var(--color-purple-4); --color-button-share-hover-text: var(--color-purple-2); --color-button-share-hover-bg: var(--color-purple-4); - --color-button-danger-text: var(--color-gray-lighten-100); - --color-button-danger-bg: var(--color-pink-1); - --color-button-danger-hover-text: var(--color-gray-lighten-100); - --color-button-danger-hover-bg: var(--color-pink-2); - display: inline-flex; font-family: var(--font-sans-serif); border: 0; @@ -107,7 +118,7 @@ a.button:hover { background: var(--color-button-default-bg); } .button.contained.default .icon { - color: var(--color-button-default-text); + color: var(--color-button-default-icon); } .button.contained.default:hover { @@ -116,24 +127,7 @@ a.button:hover { } .button.contained.default:hover .icon { - color: var(--color-button-default-hover-text); -} - -.button.contained.primary-mono { - color: var(--color-button-primary-mono-text); - background: var(--color-button-primary-mono-bg); -} - -.button.contained.primary-mono .icon { - color: var(--color-button-primary-mono-text); -} - -.button.contained.primary-mono:hover { - color: var(--color-button-primary-mono-hover-text); - background: var(--color-button-primary-mono-hover-bg); -} -.button.contained.primary-mono:hover .icon { - color: var(--color-button-primary-mono-hover-text); + color: var(--color-button-default-hover-icon); } .button.contained.primary { @@ -141,7 +135,7 @@ a.button:hover { background: var(--color-button-primary-bg); } .button.contained.primary .icon { - color: var(--color-button-primary-text); + color: var(--color-button-primary-icon); } .button.contained.primary:hover { @@ -149,7 +143,24 @@ a.button:hover { background: var(--color-button-primary-hover-bg); } .button.contained.primary:hover .icon { - color: var(--color-button-primary-hover-text); + color: var(--color-button-primary-hover-icon); +} + +.button.contained.danger { + color: var(--color-button-danger-text); + background: var(--color-button-danger-bg); +} + +.button.contained.danger .icon { + color: var(--color-button-danger-icon); +} + +.button.contained.danger:hover { + color: var(--color-button-danger-text); + background: var(--color-button-danger-bg); +} +.button.contained.danger:hover .icon { + color: var(--color-button-danger-icon); } .button.contained.share { @@ -170,22 +181,6 @@ a.button:hover { color: var(--color-button-share-hover-text); } -.button.contained.danger { - color: var(--color-button-danger-text); - background: var(--color-button-danger-bg); -} -.button.contained.danger .icon { - color: var(--color-button-danger-text); -} - -.button.contained.danger:hover { - color: var(--color-button-danger-text); - background: var(--color-button-danger-bg); -} -.button.contained.danger:hover .icon { - color: var(--color-button-danger-text); -} - /* -- Uncontained & Colors ------------------------------------------------- */ .button.uncontained { background: var(--color-transparent);