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: Make new theme exposed by ThemeContext and make new theme include v1 for compatability (to pass to useTheme) (#33207)

Browse Source 
* WIP: Making new theme the default

* Progress

* Updates, lots of updates

* Things are working

* Fixed issues with storybook

* Fixed tests
This commit is contained in:
Torkel Ödegaard
2021-04-21 14:25:43 +02:00
committed by GitHub
parent 569fb3f112
commit 7e2bf4f6c3
111 changed files with 1505 additions and 1534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { css, CSSObject, cx } from '@emotion/css';
import { useTheme } from '../../themes';
import { useTheme2 } from '../../themes';
import { IconName } from '../../types/icon';
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
import { colorManipulator, GrafanaTheme, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
import { colorManipulator, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
import { ComponentSize } from '../../types/size';
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
import { Icon } from '../Icon/Icon';
@ -24,7 +24,7 @@ export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ variant = 'primary', size = 'md', icon, fullWidth, children, className, ...otherProps }, ref) => {
const theme = useTheme();
const theme = useTheme2();
const styles = getButtonStyles({
theme,
size,
@ -62,7 +62,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
},
ref
) => {
const theme = useTheme();
const theme = useTheme2();
const styles = getButtonStyles({
theme,
fullWidth,
@ -88,32 +88,32 @@ export interface StyleProps {
size: ComponentSize;
variant: ButtonVariant;
iconOnly?: boolean;
theme: GrafanaTheme;
theme: GrafanaThemeV2;
fullWidth?: boolean;
narrow?: boolean;
}
export const getButtonStyles = (props: StyleProps) => {
const { theme, variant, size, iconOnly, fullWidth } = props;
const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme.v2);
const variantStyles = getPropertiesForVariant(theme.v2, variant);
const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme);
const variantStyles = getPropertiesForVariant(theme, variant);
const disabledStyles: CSSObject = {
cursor: 'not-allowed',
boxShadow: 'none',
background: theme.v2.palette.action.disabledBackground,
background: theme.palette.action.disabledBackground,
border: `1px solid transparent`,
color: theme.v2.palette.text.disabled,
color: theme.palette.text.disabled,
pointerEvents: 'none',
'&:hover': {
background: theme.v2.palette.action.disabledBackground,
color: theme.v2.palette.text.disabled,
background: theme.palette.action.disabledBackground,
color: theme.palette.text.disabled,
boxShadow: 'none',
},
};
const focusStyle = getFocusStyles(theme.v2);
const focusStyle = getFocusStyles(theme);
return {
button: css({
@ -121,18 +121,18 @@ export const getButtonStyles = (props: StyleProps) => {
display: 'inline-flex',
alignItems: 'center',
fontSize: fontSize,
fontWeight: theme.v2.typography.fontWeightMedium,
fontFamily: theme.v2.typography.fontFamily,
padding: theme.v2.spacing(0, padding),
height: theme.v2.spacing(height),
fontWeight: theme.typography.fontWeightMedium,
fontFamily: theme.typography.fontFamily,
padding: theme.spacing(0, padding),
height: theme.spacing(height),
// Deduct border from line-height for perfect vertical centering on windows and linux
lineHeight: `${theme.v2.spacing.gridSize * height - 2}px`,
lineHeight: `${theme.spacing.gridSize * height - 2}px`,
verticalAlign: 'middle',
cursor: 'pointer',
borderRadius: theme.v2.shape.borderRadius(1),
borderRadius: theme.shape.borderRadius(1),
'&:focus': focusStyle,
'&:focus-visible': focusStyle,
'&:focus:not(:focus-visible)': getMouseFocusStyles(theme.v2),
'&:focus:not(:focus-visible)': getMouseFocusStyles(theme),
...(fullWidth && {
flexGrow: 1,
justifyContent: 'center',
@ -145,10 +145,10 @@ export const getButtonStyles = (props: StyleProps) => {
img: css`
width: 16px;
height: 16px;
margin: ${theme.v2.spacing(0, 1, 0, 0.5)};
margin: ${theme.spacing(0, 1, 0, 0.5)};
`,
icon: css`
margin: ${theme.v2.spacing(0, (iconOnly ? -padding : padding) / 2, 0, -(padding / 2))};
margin: ${theme.spacing(0, (iconOnly ? -padding : padding) / 2, 0, -(padding / 2))};
`,
content: css`
display: flex;