Themes: Unify secondary button and ToolbarButton (#68250)

* Themes: Unify secondary button and ToolbarButton

* Update

* Update light theme

* fix test

* fix toolbar button border

* fix disabled outline button style

* Use transparent color instead of dynamic computed color for hover bg for text/outline versions. this is what figma components do

packages/grafana-data/src/themes/createColors.ts

@@ -109,11 +109,12 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   secondary = {
-    main: `rgba(${this.whiteBase}, 0.16)`,
-    shade: `rgba(${this.whiteBase}, 0.20)`,
+    main: `rgba(${this.whiteBase}, 0.10)`,
+    shade: `rgba(${this.whiteBase}, 0.14)`,
+    transparent: `rgba(${this.whiteBase}, 0.08)`,
     text: this.text.primary,
     contrastText: `rgb(${this.whiteBase})`,
-    border: this.border.strong,
+    border: `rgba(${this.whiteBase}, 0.08)`,
   };
 
   info = this.primary;
@@ -185,11 +186,12 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   secondary = {
-    main: `rgba(${this.blackBase}, 0.16)`,
-    shade: `rgba(${this.blackBase}, 0.20)`,
+    main: `rgba(${this.blackBase}, 0.08)`,
+    shade: `rgba(${this.blackBase}, 0.15)`,
+    transparent: `rgba(${this.blackBase}, 0.08)`,
     contrastText: `rgba(${this.blackBase},  1)`,
     text: this.text.primary,
-    border: this.border.strong,
+    border: this.border.weak,
   };
 
   info = {

packages/grafana-ui/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { css, CSSObject, cx } from '@emotion/css';
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 
-import { colorManipulator, GrafanaTheme2, ThemeRichColor } from '@grafana/data';
+import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 
 import { useTheme2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
@@ -216,18 +216,30 @@ export const getButtonStyles = (props: StyleProps) => {
 };
 
 function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill): CSSObject {
+  let outlineBorderColor = color.border;
+  let borderColor = 'transparent';
+  let hoverBorderColor = 'transparent';
+
+  // Secondary button has some special rules as we lack theem color token to
+  // specify border color for normal button vs border color for outline button
+  if (color.name === 'secondary') {
+    borderColor = color.border;
+    hoverBorderColor = theme.colors.emphasize(color.border, 0.25);
+    outlineBorderColor = theme.colors.border.strong;
+  }
+
   if (fill === 'outline') {
     return {
       background: 'transparent',
       color: color.text,
-      border: `1px solid ${color.border}`,
+      border: `1px solid ${outlineBorderColor}`,
       transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
         duration: theme.transitions.duration.short,
       }),
 
       '&:hover': {
-        background: colorManipulator.alpha(color.main, theme.colors.action.hoverOpacity),
-        borderColor: theme.colors.emphasize(color.border, 0.25),
+        background: color.transparent,
+        borderColor: theme.colors.emphasize(outlineBorderColor, 0.25),
         color: color.text,
       },
     };
@@ -248,7 +260,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
       },
 
       '&:hover': {
-        background: colorManipulator.alpha(color.shade, theme.colors.action.hoverOpacity),
+        background: color.transparent,
         textDecoration: 'none',
       },
     };
@@ -257,7 +269,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
   return {
     background: color.main,
     color: color.contrastText,
-    border: `1px solid transparent`,
+    border: `1px solid ${borderColor}`,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short,
     }),
@@ -266,6 +278,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
       background: color.shade,
       color: color.contrastText,
       boxShadow: theme.shadows.z1,
+      borderColor: hoverBorderColor,
     },
   };
 }
@@ -290,7 +303,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
     return {
       ...disabledStyles,
       background: 'transparent',
-      border: `1px solid ${theme.colors.action.disabledText}`,
+      border: `1px solid ${theme.colors.border.weak}`,
     };
   }
 
@@ -304,6 +317,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
 export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
   switch (variant) {
     case 'secondary':
+      // The seconday button has some special handling as it's outline border is it's default color border
       return getButtonVariantStyles(theme, theme.colors.secondary, fill);
 
     case 'destructive':

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx

@@ -92,27 +92,29 @@ BasicWithIcon.args = {
 };
 
 export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
-  const variants: ToolbarButtonVariant[] = ['default', 'active', 'primary', 'destructive'];
+  const variants: ToolbarButtonVariant[] = ['default', 'canvas', 'active', 'primary', 'destructive'];
 
   return (
     <DashboardStoryCanvas>
       <VerticalGroup>
         Button states
         <ToolbarButtonRow>
-          <ToolbarButton>Just text</ToolbarButton>
-          <ToolbarButton icon="sync" tooltip="Sync" />
-          <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
-          <ToolbarButton icon="cloud" isOpen={true}>
+          <ToolbarButton variant="canvas">Just text</ToolbarButton>
+          <ToolbarButton variant="canvas" icon="sync" tooltip="Sync" />
+          <ToolbarButton variant="canvas" imgSrc="./grafana_icon.svg">
+            With imgSrc
+          </ToolbarButton>
+          <ToolbarButton variant="canvas" icon="cloud" isOpen={true}>
             isOpen
           </ToolbarButton>
-          <ToolbarButton icon="cloud" isOpen={false}>
+          <ToolbarButton variant="canvas" icon="cloud" isOpen={false}>
             isOpen = false
           </ToolbarButton>
         </ToolbarButtonRow>
         <br />
         disabled
         <ToolbarButtonRow>
-          <ToolbarButton icon="sync" disabled>
+          <ToolbarButton variant="canvas" icon="sync" disabled>
             Disabled
           </ToolbarButton>
         </ToolbarButtonRow>
@@ -128,15 +130,15 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
         <br />
         Wrapped in noSpacing ButtonGroup
         <ButtonGroup>
-          <ToolbarButton icon="clock-nine" tooltip="Time picker">
+          <ToolbarButton variant="canvas" icon="clock-nine" tooltip="Time picker">
             2020-10-02
           </ToolbarButton>
-          <ToolbarButton icon="search-minus" />
+          <ToolbarButton variant="canvas" icon="search-minus" />
         </ButtonGroup>
         <br />
         <ButtonGroup>
-          <ToolbarButton icon="sync" />
-          <ToolbarButton isOpen={false} narrow />
+          <ToolbarButton variant="canvas" icon="sync" />
+          <ToolbarButton variant="canvas" isOpen={false} narrow />
         </ButtonGroup>
         <br />
         Inside button group

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -129,12 +129,13 @@ const getStyles = (theme: GrafanaTheme2) => {
   const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid');
 
   const defaultOld = css`
-    color: ${theme.colors.text.secondary};
-    background-color: ${theme.colors.background.primary};
+    color: ${theme.colors.text.primary};
+    background: ${theme.colors.secondary.main};
 
     &:hover {
       color: ${theme.colors.text.primary};
-      background: ${theme.colors.background.secondary};
+      background: ${theme.colors.secondary.shade};
+      border: 1px solid ${theme.colors.border.medium};
     }
   `;
 
@@ -160,7 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       border-radius: ${theme.shape.borderRadius()};
       line-height: ${theme.components.height.md * theme.spacing.gridSize - 2}px;
       font-weight: ${theme.typography.fontWeightMedium};
-      border: 1px solid ${theme.colors.border.weak};
+      border: 1px solid ${theme.colors.secondary.border};
       white-space: nowrap;
       transition: ${theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
         duration: theme.transitions.duration.short,