Merge pull request #333 from unisonweb/color-token-aliases

Improve button color configs

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"
 

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
         )
 

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
         )
 

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);

src/css/ui/components/button.css

@@ -1,34 +1,45 @@
 .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);
   --color-button-default-hover-text: var(--u-color_text-on-action_hovered);
   --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,40 +127,40 @@ 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 {
   color: var(--color-button-primary-text);
   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 {
   color: var(--color-button-primary-hover-text);
   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);