opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-29 17:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Theming: Updates to select styles and theme model progress (#32797)

Browse Source 
* Theming: Updates to select styles and theme model progress

* Progress

* Update menu

* Updated menu group

* Improving button styles

* Added transitions to theme

* solving the hover & selected, focus issues

* Updated snapshot

* adding some colors from figma, but waiting to use them as not enough components use new layer colors

* Updates

* Updates

* Progress

* Renames

* Improvements to theme overview

* updated test

* demo update

* More new theme colors

* Wip new card styles

* Card tweaks hover is not working

* Updates more colors from figma

* Progress

* Progress

* Updated radio button styles

* Progress on new colors

* Progress

* New page toolbar and toolbar button design

* New toolbar button design

* Reverted to older toolbar and button look

* Updated snapshot

* Updated generated files

* Updated design

* Updates

* Added card hover

* Fixed button group

* Updates
This commit is contained in:
Torkel Ödegaard
2021-04-12 14:23:00 +02:00
committed by GitHub
parent 44b6c896ae
commit 629603dd92
62 changed files with 955 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -3,7 +3,7 @@ import { css, CSSObject, cx } from '@emotion/css';
import { useTheme } from '../../themes';
import { IconName } from '../../types/icon';
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
import { GrafanaTheme, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
import { colorManipulator, GrafanaTheme, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
import { ComponentSize } from '../../types/size';
import { getFocusStyles } from '../../themes/mixins';
import { Icon } from '../Icon/Icon';
@ -86,15 +86,14 @@ export const getButtonStyles = (props: StyleProps) => {
const disabledStyles: CSSObject = {
cursor: 'not-allowed',
opacity: 0.65,
boxShadow: 'none',
background: theme.v2.palette.formComponent.disabledBackground,
border: `1px solid ${theme.v2.palette.formComponent.disabledBackground}`,
background: theme.v2.palette.action.disabledBackground,
border: `1px solid transparent`,
color: theme.v2.palette.text.disabled,
pointerEvents: 'none',
'&:hover': {
background: theme.v2.palette.formComponent.disabledBackground,
background: theme.v2.palette.action.disabledBackground,
color: theme.v2.palette.text.disabled,
},
};
@ -147,10 +146,14 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemePaletteColor)
color: color.contrastText,
boxShadow: theme.shadows.z1,
border: `1px solid transparent`,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
duration: theme.transitions.duration.short,
}),
'&:hover': {
background: theme.palette.getHoverColor(color.main),
background: color.shade,
color: color.contrastText,
boxShadow: theme.shadows.z2,
},
'&:focus': {
@ -178,7 +181,7 @@ export function getPropertiesForVariant(theme: GrafanaThemeV2, variant: ButtonVa
},
'&:hover': {
color: theme.palette.getHoverColor(theme.palette.text.link),
background: colorManipulator.alpha(theme.palette.text.link, theme.palette.action.hoverOpacity),
textDecoration: 'underline',
},
};