mirror of
https://github.com/grafana/grafana.git
synced 2025-07-29 17:02:20 +08:00
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
This commit is contained in:
@ -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':
|
||||
|
Reference in New Issue
Block a user