Theme: Refactoring theme colors variables (#23513)

* Theme: Typography updates

* Updated

* Updated snapshot

* Renamed colors to palette

* Introduce colors namespace

* Massive theme color move

* Removing color selection logic with more abstract concepts

* Updates

* Minor sidemenu change
This commit is contained in:
Torkel Ödegaard
2020-04-12 15:05:49 +02:00
committed by GitHub
parent 0fd5945542
commit 1ba8f1647e
104 changed files with 769 additions and 734 deletions

View File

@ -1,20 +1,15 @@
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant, stylesFactory } from '../../themes';
import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
const backdropBackground = selectThemeVariant(
{
light: theme.colors.bodyBg,
dark: theme.colors.gray25,
},
theme.type
);
const backdropBackground = theme.colors.bg1;
return {
modal: css`
position: fixed;
z-index: ${theme.zIndex.modal};
background: ${theme.colors.pageBg};
background: ${theme.colors.bodyBg};
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;
outline: none;
@ -37,8 +32,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
opacity: 0.7;
`,
modalHeader: css`
background: ${theme.colors.pageHeaderBg};
box-shadow: ${theme.shadow.pageHeader};
background: ${theme.colors.bg1};
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
height: 42px;