diff --git a/.prettierignore b/.prettierignore index 2a78eb04c91..6d00a775936 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,4 +8,5 @@ vendor/ data/ e2e/tmp public/build/ +public/sass/*.generated.scss devenv/ diff --git a/packages/grafana-data/src/themes/colors.ts b/packages/grafana-data/src/themes/colors.ts index a0711951417..14c0d81f45e 100644 --- a/packages/grafana-data/src/themes/colors.ts +++ b/packages/grafana-data/src/themes/colors.ts @@ -2,48 +2,52 @@ export const colors = { white: '#fff', black: '#000', - // New greys palette used by next-gen form elements + // old gray98: '#f7f8fa', gray97: '#f1f5f9', gray95: '#e9edf2', - gray90: '#dce1e6', + //gray90: '#dce1e6', gray85: '#c7d0d9', gray70: '#9fa7b3', gray60: '#7b8087', gray33: '#464c54', gray25: '#2c3235', - gray15: '#202226', - gray10: '#141619', - gray05: '#0b0c0e', + gray15: '#22252b', //'#202226', + gray10: '#181b1f', // old '#141619', + gray05: '#0d0f16', // old '#0b0c0e', - blueDark1: '#3658E2', - blueDark2: '#5B93FF', + // new from figma, + darkLayer0: '#18181A', + darkLayer1: '#212124', + darkLayer2: '#2a2a2f', // figma used #34343B but a bit too bright - blueLight1: '#276EF1', - blueLight2: '#93BDFE', - blueLight3: '#1F62E0', + darkBorder1: '#34343B', + darkBorder2: '#64646B', - redDark1: '#D10E5C', - redDark2: '#FF5286', + // Dashboard bg / layer 0 (light theme) + gray90: '#F4F5F5', + // Card bg / layer 1 + gray100: '#F7F7F8', + // divider line + gray80: '#D0D1D3', + // from figma + lightBorder1: '#E4E7E7', - redLight1: '#CF0E5B', - redLight2: '#FF5286', + blueDarkMain: '#4165F5', + blueDarkText: '#5790FF', + redDarkMain: '#D10E5C', + redDarkText: '#FF5286', + greenDarkMain: '#1A7F4B', + greenDarkText: '#6CCF8E', + orangeDarkMain: '#F5B73D', + orangeDarkText: '#F8D06B', - green1: '#13875D', - green2: '#6CCF8E', - - // New reds palette used by next-gen form elements - red88: '#e02f44', // redBase - - // below taken from dark theme - redShade: '#c4162a', - redBase: '#e02f44', - greenBase: '#299c46', - greenShade: '#23843b', - red: '#d44a3a', - yellow: '#ecbb13', - purple: '#9933cc', - variable: '#32d1df', - orange: '#eb7b18', - orangeDark: '#ff780a', + blueLightMain: '#3871DC', + blueLightText: '#1F62E0', + redLightMain: '#E0226E', + redLightText: '#CF0E5B', + greenLightMain: '#1A7F4B', + greenLightText: '#1A7F4B', + orangeLightMain: '#E56F00', + orangeLightText: '#BD4B00', }; diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 8b5e356f086..4b7f02d071e 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -1,3 +1,6 @@ +import { ThemePalette } from './createPalette'; +import { ThemeShadows } from './createShadows'; + /** @beta */ export interface ThemeComponents { /** Applies to normal buttons, inputs, radio buttons, etc */ @@ -6,22 +9,58 @@ export interface ThemeComponents { md: number; lg: number; }; + form: { + background: string; + border: string; + borderHover: string; + text: string; + }; panel: { padding: number; headerHeight: number; + border: string; + boxShadow: string; + background: string; + }; + dashboard: { + background: string; + padding: number; }; } -export function createComponents(): ThemeComponents { +export function createComponents(palette: ThemePalette, shadows: ThemeShadows): ThemeComponents { + const panel = { + padding: 1, + headerHeight: 4, + background: palette.layer1, + border: palette.border0, + boxShadow: shadows.z0, + }; + return { height: { sm: 3, md: 4, lg: 6, }, - panel: { + form: + palette.mode === 'dark' + ? { + background: palette.layer0, + border: palette.border1, + borderHover: palette.border2, + text: palette.text.primary, + } + : { + background: palette.layer1, + border: palette.border1, + borderHover: palette.border2, + text: palette.text.primary, + }, + panel, + dashboard: { + background: palette.layer0, padding: 1, - headerHeight: 4, }, }; } diff --git a/packages/grafana-data/src/themes/createPalette.ts b/packages/grafana-data/src/themes/createPalette.ts index 035553003af..eb779eee6d0 100644 --- a/packages/grafana-data/src/themes/createPalette.ts +++ b/packages/grafana-data/src/themes/createPalette.ts @@ -1,5 +1,5 @@ import { merge } from 'lodash'; -import { emphasize, getContrastRatio } from './colorManipulator'; +import { darken, emphasize, getContrastRatio, lighten } from './colorManipulator'; import { colors } from './colors'; import { DeepPartial, ThemePaletteColor } from './types'; @@ -30,16 +30,27 @@ export interface ThemePaletteBase { layer1: string; layer2: string; + divider: string; + border0: string; border1: string; border2: string; - formComponent: { - background: string; - text: string; - border: string; + action: { + /** Used for selected menu item / select option */ + selected: string; + /** Used for hovered menu item / select option */ + hover: string; + /** Used for button/colored background hover opacity */ + hoverOpacity: number; + /** Used focused menu item / select option */ + focus: string; + /** Used for disabled buttons and inputs */ disabledBackground: string; + /** Disabled text */ disabledText: string; + /** Disablerd opacity */ + disabledOpacity: number; }; hoverFactor: number; @@ -47,12 +58,14 @@ export interface ThemePaletteBase { tonalOffset: number; } +export interface ThemeHoverStrengh {} + /** @beta */ export interface ThemePalette extends ThemePaletteBase { /** Returns a text color for the background */ getContrastText(background: string): string; - /* Retruns a hover color for any default color */ - getHoverColor(defaultColor: string): string; + /* Return a hover color for any color */ + getHoverColor(color: string, hoverFactor?: number): string; } /** @internal */ @@ -64,116 +77,129 @@ class DarkPalette implements ThemePaletteBase> { text = { primary: 'rgba(255, 255, 255, 0.75)', secondary: 'rgba(255, 255, 255, 0.50)', - disabled: 'rgba(255, 255, 255, 0.3)', - link: colors.blueDark2, + disabled: 'rgba(255, 255, 255, 0.35)', + link: colors.blueDarkText, maxContrast: colors.white, }; primary = { - main: colors.blueDark1, - border: colors.blueDark2, - text: colors.blueDark2, + main: colors.blueDarkMain, + text: colors.blueDarkText, + border: colors.blueDarkText, }; secondary = { main: 'rgba(255,255,255,0.1)', + shade: 'rgba(255,255,255,0.15)', + text: 'rgba(255,255,255,0.13)', contrastText: 'rgba(255, 255, 255, 0.8)', }; info = this.primary; error = { - main: colors.redDark1, - border: colors.redDark2, - text: colors.redDark2, + main: colors.redDarkMain, + text: colors.redDarkText, }; success = { - main: colors.green1, - text: colors.green2, - border: colors.green2, + main: colors.greenDarkMain, + text: colors.greenDarkText, }; warning = { - main: colors.orange, + main: colors.orangeDarkMain, + text: colors.orangeDarkText, }; layer0 = colors.gray05; layer1 = colors.gray10; layer2 = colors.gray15; - border0 = colors.gray15; - border1 = colors.gray25; - border2 = colors.gray33; + divider = 'rgba(218,224,254,0.06)'; - formComponent = { - background: this.layer0, - border: this.border1, - text: this.text.primary, + border0 = this.layer1; + border1 = 'rgba(218,224,254,0.15)'; + border2 = 'rgba(218,224,254,0.20)'; + + action = { + hover: 'rgba(255, 255, 255, 0.08)', + selected: 'rgba(255, 255, 255, 0.12)', + focus: 'rgba(255, 255, 255, 0.16)', + hoverOpacity: 0.08, disabledText: this.text.disabled, - disabledBackground: 'rgba(255, 255, 255, 0.04)', + disabledBackground: 'rgba(255,255,255,0.07)', + disabledOpacity: 0.38, }; contrastThreshold = 3; hoverFactor = 0.15; - tonalOffset = 0.1; + tonalOffset = 0.15; } class LightPalette implements ThemePaletteBase> { mode: ThemePaletteMode = 'light'; primary = { - main: colors.blueLight1, - border: colors.blueLight3, - text: colors.blueLight3, + main: colors.blueLightMain, + border: colors.blueLightText, + text: colors.blueLightText, }; secondary = { - main: 'rgba(0,0,0,0.18)', + main: 'rgba(0,0,0,0.11)', + shade: 'rgba(0,0,0,0.16)', contrastText: 'rgba(0, 0, 0, 0.75)', }; info = { - main: colors.blueLight1, - text: colors.blueLight3, + main: colors.blueLightMain, + text: colors.blueLightText, }; error = { - main: colors.redLight1, - text: colors.redLight2, - border: colors.redLight2, + main: colors.redLightMain, + text: colors.redLightText, + border: colors.redLightText, }; success = { - main: colors.greenBase, + main: colors.greenLightMain, + text: colors.greenLightText, }; warning = { - main: colors.orange, + main: colors.orangeLightMain, + text: colors.orangeLightText, }; text = { primary: 'rgba(0, 0, 0, 0.87)', - secondary: 'rgba(0, 0, 0, 0.54)', - disabled: 'rgba(0, 0, 0, 0.38)', + secondary: 'rgba(0, 0, 0, 0.55)', + disabled: 'rgba(0, 0, 0, 0.40)', link: this.primary.text, maxContrast: colors.black, }; - layer0 = colors.gray98; + layer0 = colors.gray90; layer1 = colors.white; - layer2 = colors.gray97; + layer2 = colors.gray100; - border0 = colors.gray90; - border1 = colors.gray85; - border2 = colors.gray70; + divider = 'rgba(0, 2, 78, 0.07)'; - formComponent = { - background: this.layer1, - border: this.border1, - text: this.text.primary, - disabledBackground: colors.gray95, + border0 = this.layer1; + + border1 = 'rgba(0, 2, 78, 0.20)'; + border2 = 'rgba(0, 2, 78, 0.30)'; + + action = { + hover: 'rgba(0, 0, 0, 0.04)', + selected: 'rgba(0, 0, 0, 0.08)', + hoverOpacity: 0.08, + focus: 'rgba(0, 0, 0, 0.12)', + disabledBackground: 'rgba(0,0,0,0.07)', disabledText: this.text.disabled, + disabledOpacity: 0.38, }; contrastThreshold = 3; @@ -207,8 +233,8 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette { return contrastText; } - function getHoverColor(color: string) { - return emphasize(color, hoverFactor); + function getHoverColor(color: string, factorOverride?: number) { + return emphasize(color, factorOverride ?? hoverFactor); } const getRichColor = ({ color, name }: GetRichColorProps): ThemePaletteColor => { @@ -216,12 +242,15 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette { if (!color.main) { throw new Error(`Missing main color for ${name}`); } - if (!color.border) { - color.border = color.main; - } if (!color.text) { color.text = color.main; } + if (!color.border) { + color.text = color.text; + } + if (!color.shade) { + color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset); + } if (!color.contrastText) { color.contrastText = getContrastText(color.main); } diff --git a/packages/grafana-data/src/themes/createShadows.ts b/packages/grafana-data/src/themes/createShadows.ts index 38561afcf0c..4c1ccddf230 100644 --- a/packages/grafana-data/src/themes/createShadows.ts +++ b/packages/grafana-data/src/themes/createShadows.ts @@ -2,15 +2,17 @@ import { ThemePalette } from './createPalette'; /** @beta */ export interface ThemeShadows { + z0: string; z1: string; z2: string; z3: string; + z4: string; } function createDarkShadow(...px: number[]) { - const shadowKeyUmbraOpacity = 0.2; - const shadowKeyPenumbraOpacity = 0.14; - const shadowAmbientShadowOpacity = 0.12; + const shadowKeyUmbraOpacity = 0.5; + const shadowKeyPenumbraOpacity = 0.4; + const shadowAmbientShadowOpacity = 0.3; return [ `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, @@ -35,15 +37,19 @@ function createLightShadow(...px: number[]) { export function createShadows(palette: ThemePalette): ThemeShadows { if (palette.mode === 'dark') { return { + z0: createDarkShadow(0, 1, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), z1: createDarkShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), z2: createDarkShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), - z3: createDarkShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), + z3: createDarkShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), + z4: createDarkShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), }; } return { - z1: createLightShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), - z2: createLightShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), - z3: createLightShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), + z0: createLightShadow(0, 1, 1, -1, 0, 0, 0, 0, 0, 1, 3, 0), + z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0), + z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), + z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), + z4: createLightShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), }; } diff --git a/packages/grafana-data/src/themes/createTheme.test.ts b/packages/grafana-data/src/themes/createTheme.test.ts index 6dc5c22f73a..0fbca3aa48b 100644 --- a/packages/grafana-data/src/themes/createTheme.test.ts +++ b/packages/grafana-data/src/themes/createTheme.test.ts @@ -1,201 +1,24 @@ import { createTheme } from './createTheme'; describe('createTheme', () => { + it('create custom theme', () => { + const custom = createTheme({ + palette: { + mode: 'dark', + primary: { + main: 'rgb(240,0,0)', + }, + layer0: '#123', + }, + }); + + expect(custom.palette.primary.main).toBe('rgb(240,0,0)'); + expect(custom.palette.primary.shade).toBe('rgb(242, 38, 38)'); + expect(custom.palette.layer0).toBe('#123'); + }); + it('create default theme', () => { const theme = createTheme(); - expect(theme).toMatchInlineSnapshot(` - Object { - "breakpoints": Object { - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - "xxl", - ], - "unit": "px", - "up": [Function], - "values": Object { - "lg": 992, - "md": 769, - "sm": 544, - "xl": 1200, - "xs": 0, - "xxl": 1440, - }, - }, - "components": Object { - "height": Object { - "lg": 6, - "md": 4, - "sm": 3, - }, - "panel": Object { - "headerHeight": 4, - "padding": 1, - }, - }, - "isDark": true, - "isLight": false, - "name": "Dark", - "palette": Object { - "border0": "#202226", - "border1": "#2c3235", - "border2": "#464c54", - "contrastThreshold": 3, - "error": Object { - "border": "#FF5286", - "contrastText": "#fff", - "main": "#D10E5C", - "name": "error", - "text": "#FF5286", - }, - "formComponent": Object { - "background": "#0b0c0e", - "border": "#2c3235", - "disabledBackground": "rgba(255, 255, 255, 0.04)", - "disabledText": "rgba(255, 255, 255, 0.3)", - "text": "rgba(255, 255, 255, 0.75)", - }, - "getContrastText": [Function], - "getHoverColor": [Function], - "hoverFactor": 0.15, - "info": Object { - "border": "#5B93FF", - "contrastText": "#fff", - "main": "#3658E2", - "name": "info", - "text": "#5B93FF", - }, - "layer0": "#0b0c0e", - "layer1": "#141619", - "layer2": "#202226", - "mode": "dark", - "primary": Object { - "border": "#5B93FF", - "contrastText": "#fff", - "main": "#3658E2", - "name": "primary", - "text": "#5B93FF", - }, - "secondary": Object { - "border": "rgba(255,255,255,0.1)", - "contrastText": "rgba(255, 255, 255, 0.8)", - "main": "rgba(255,255,255,0.1)", - "name": "secondary", - "text": "rgba(255,255,255,0.1)", - }, - "success": Object { - "border": "#6CCF8E", - "contrastText": "#fff", - "main": "#13875D", - "name": "success", - "text": "#6CCF8E", - }, - "text": Object { - "disabled": "rgba(255, 255, 255, 0.3)", - "link": "#5B93FF", - "maxContrast": "#fff", - "primary": "rgba(255, 255, 255, 0.75)", - "secondary": "rgba(255, 255, 255, 0.50)", - }, - "tonalOffset": 0.1, - "warning": Object { - "border": "#eb7b18", - "contrastText": "#000", - "main": "#eb7b18", - "name": "warning", - "text": "#eb7b18", - }, - }, - "shadows": Object { - "z1": "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "z2": "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "z3": "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - }, - "shape": Object { - "borderRadius": [Function], - }, - "spacing": [Function], - "typography": Object { - "body": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.5, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontFamilyMonospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2rem", - "fontWeight": 300, - "letterSpacing": "-0.05357em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.7142857142857142rem", - "fontWeight": 300, - "letterSpacing": "-0.02083em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.2857142857142858rem", - "fontWeight": 400, - "letterSpacing": "0.01389em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.1428571428571428rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 500, - "letterSpacing": "0.01071em", - "lineHeight": 1.6, - }, - "htmlFontSize": 14, - "pxToRem": [Function], - "size": Object { - "base": "14px", - "lg": "18px", - "md": "14px", - "sm": "12px", - "xs": "10px", - }, - }, - "zIndex": Object { - "dropdown": 1030, - "modal": 1060, - "modalBackdrop": 1050, - "navbarFixed": 1000, - "sidemenu": 1020, - "tooltip": 1040, - "typeahead": 1030, - }, - } - `); + expect(theme.palette.mode).toBe('dark'); }); }); diff --git a/packages/grafana-data/src/themes/createTheme.ts b/packages/grafana-data/src/themes/createTheme.ts index 628f1118449..2d48580a010 100644 --- a/packages/grafana-data/src/themes/createTheme.ts +++ b/packages/grafana-data/src/themes/createTheme.ts @@ -4,6 +4,7 @@ import { createPalette, ThemePalette, ThemePaletteInput } from './createPalette' import { createShadows, ThemeShadows } from './createShadows'; import { createShape, ThemeShape, ThemeShapeInput } from './createShape'; import { createSpacing, ThemeSpacingOptions, ThemeSpacing } from './createSpacing'; +import { createTransitions, ThemeTransitions } from './createTransitions'; import { createTypography, ThemeTypography, ThemeTypographyInput } from './createTypography'; import { ThemeZIndices, zIndex } from './zIndex'; @@ -20,6 +21,7 @@ export interface GrafanaThemeV2 { typography: ThemeTypography; zIndex: ThemeZIndices; shadows: ThemeShadows; + transitions: ThemeTransitions; } /** @internal */ @@ -45,9 +47,10 @@ export function createTheme(options: NewThemeOptions = {}): GrafanaThemeV2 { const breakpoints = createBreakpoints(); const spacing = createSpacing(spacingInput); const shape = createShape(shapeInput); - const components = createComponents(); const typography = createTypography(palette, typographyInput); const shadows = createShadows(palette); + const transitions = createTransitions(); + const components = createComponents(palette, shadows); return { name, @@ -60,6 +63,7 @@ export function createTheme(options: NewThemeOptions = {}): GrafanaThemeV2 { components, typography, shadows, + transitions, zIndex: { ...zIndex, }, diff --git a/packages/grafana-data/src/themes/createTransitions.test.ts b/packages/grafana-data/src/themes/createTransitions.test.ts new file mode 100644 index 00000000000..99b66d5fd78 --- /dev/null +++ b/packages/grafana-data/src/themes/createTransitions.test.ts @@ -0,0 +1,84 @@ +import { createTransitions } from './createTransitions'; + +describe('transitions', () => { + const { duration, easing, getAutoHeightDuration, create } = createTransitions(); + + describe('create() function', () => { + it('should create default transition without arguments', () => { + const transition = create(); + expect(transition).toEqual(`all ${duration.standard}ms ${easing.easeInOut} 0ms`); + }); + + it('should take string props as a first argument', () => { + const transition = create('color'); + expect(transition).toEqual(`color ${duration.standard}ms ${easing.easeInOut} 0ms`); + }); + + it('should also take array of props as first argument', () => { + const options = { delay: 20 }; + const multiple = create(['color', 'size'], options); + const single1 = create('color', options); + const single2 = create('size', options); + const expected = `${single1},${single2}`; + expect(multiple).toEqual(expected); + }); + + it('should optionally accept number "duration" option in second argument', () => { + const transition = create('font', { duration: 500 }); + expect(transition).toEqual(`font 500ms ${easing.easeInOut} 0ms`); + }); + + it('should optionally accept string "duration" option in second argument', () => { + const transition = create('font', { duration: '500ms' }); + expect(transition).toEqual(`font 500ms ${easing.easeInOut} 0ms`); + }); + + it('should round decimal digits of "duration" prop to whole numbers', () => { + const transition = create('font', { duration: 12.125 }); + expect(transition).toEqual(`font 12ms ${easing.easeInOut} 0ms`); + }); + + it('should optionally accept string "easing" option in second argument', () => { + const transition = create('transform', { easing: easing.sharp }); + expect(transition).toEqual(`transform ${duration.standard}ms ${easing.sharp} 0ms`); + }); + + it('should optionally accept number "delay" option in second argument', () => { + const transition = create('size', { delay: 150 }); + expect(transition).toEqual(`size ${duration.standard}ms ${easing.easeInOut} 150ms`); + }); + + it('should optionally accept string "delay" option in second argument', () => { + const transition = create('size', { delay: '150ms' }); + expect(transition).toEqual(`size ${duration.standard}ms ${easing.easeInOut} 150ms`); + }); + + it('should round decimal digits of "delay" prop to whole numbers', () => { + const transition = create('size', { delay: 1.547 }); + expect(transition).toEqual(`size ${duration.standard}ms ${easing.easeInOut} 2ms`); + }); + + it('should return NaN when passed a negative number', () => { + const zeroHeightDurationNegativeOne = getAutoHeightDuration(-1); + // eslint-disable-next-line no-restricted-globals + expect(isNaN(zeroHeightDurationNegativeOne)).toEqual(true); + const zeroHeightDurationSmallNegative = getAutoHeightDuration(-0.000001); + // eslint-disable-next-line no-restricted-globals + expect(isNaN(zeroHeightDurationSmallNegative)).toEqual(true); + const zeroHeightDurationBigNegative = getAutoHeightDuration(-100000); + // eslint-disable-next-line no-restricted-globals + expect(isNaN(zeroHeightDurationBigNegative)).toEqual(true); + }); + + it('should return values for pre-calculated positive examples', () => { + let zeroHeightDuration = getAutoHeightDuration(14); + expect(zeroHeightDuration).toEqual(159); + zeroHeightDuration = getAutoHeightDuration(100); + expect(zeroHeightDuration).toEqual(239); + zeroHeightDuration = getAutoHeightDuration(0.0001); + expect(zeroHeightDuration).toEqual(46); + zeroHeightDuration = getAutoHeightDuration(100000); + expect(zeroHeightDuration).toEqual(6685); + }); + }); +}); diff --git a/packages/grafana-data/src/themes/createTransitions.ts b/packages/grafana-data/src/themes/createTransitions.ts new file mode 100644 index 00000000000..d15b821aba5 --- /dev/null +++ b/packages/grafana-data/src/themes/createTransitions.ts @@ -0,0 +1,87 @@ +// Code based on Material UI +// The MIT License (MIT) +// Copyright (c) 2014 Call-Em-All + +// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves +// to learn the context in which each easing should be used. +const easing = { + // This is the most common easing curve. + easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)', + // Objects enter the screen at full velocity from off-screen and + // slowly decelerate to a resting point. + easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)', + // Objects leave the screen at full velocity. They do not decelerate when off-screen. + easeIn: 'cubic-bezier(0.4, 0, 1, 1)', + // The sharp curve is used by objects that may return to the screen at any time. + sharp: 'cubic-bezier(0.4, 0, 0.6, 1)', +}; + +// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations +// to learn when use what timing +const duration = { + shortest: 150, + shorter: 200, + short: 250, + // most basic recommended timing + standard: 300, + // this is to be used in complex animations + complex: 375, + // recommended when something is entering screen + enteringScreen: 225, + // recommended when something is leaving screen + leavingScreen: 195, +}; + +/** @alpha */ +export interface CreateTransitionOptions { + duration?: number | string; + easing?: string; + delay?: number | string; +} + +/** @alpha */ +export function create(props: string | string[] = ['all'], options: CreateTransitionOptions = {}) { + const { duration: durationOption = duration.standard, easing: easingOption = easing.easeInOut, delay = 0 } = options; + + return (Array.isArray(props) ? props : [props]) + .map( + (animatedProp) => + `${animatedProp} ${ + typeof durationOption === 'string' ? durationOption : formatMs(durationOption) + } ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}` + ) + .join(','); +} + +export function getAutoHeightDuration(height: number) { + if (!height) { + return 0; + } + + const constant = height / 36; + + // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10 + return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10); +} + +function formatMs(milliseconds: number) { + return `${Math.round(milliseconds)}ms`; +} + +/** @alpha */ +export interface ThemeTransitions { + create: typeof create; + duration: typeof duration; + easing: typeof easing; + getAutoHeightDuration: typeof getAutoHeightDuration; +} + +/** @internal */ +export function createTransitions(): ThemeTransitions { + return { + create, + duration, + easing, + getAutoHeightDuration, + }; +} diff --git a/packages/grafana-data/src/themes/index.ts b/packages/grafana-data/src/themes/index.ts index d2e833ae9cc..556dcb78acf 100644 --- a/packages/grafana-data/src/themes/index.ts +++ b/packages/grafana-data/src/themes/index.ts @@ -1,2 +1,3 @@ export { createTheme, GrafanaThemeV2 } from './createTheme'; export { ThemePaletteColor } from './types'; +export * as colorManipulator from './colorManipulator'; diff --git a/packages/grafana-data/src/themes/types.ts b/packages/grafana-data/src/themes/types.ts index e6b1976a800..8034bb29c5b 100644 --- a/packages/grafana-data/src/themes/types.ts +++ b/packages/grafana-data/src/themes/types.ts @@ -4,9 +4,11 @@ export interface ThemePaletteColor { name: string; /** Main color */ main: string; + /** Used for hover */ + shade: string; /** Used for text */ text: string; - /** Used for text */ + /** Used for borders */ border: string; /** Used subtly colored backgrounds */ transparent: string; diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts index c7e90f0a965..195fc81365b 100644 --- a/packages/grafana-ui/.storybook/storybookTheme.ts +++ b/packages/grafana-ui/.storybook/storybookTheme.ts @@ -31,9 +31,9 @@ const createTheme = (theme: GrafanaTheme) => { barBg: theme.v2.palette.layer1, // Form colors - inputBg: theme.v2.palette.formComponent.background, - inputBorder: theme.v2.palette.formComponent.border, - inputTextColor: theme.v2.palette.formComponent.text, + inputBg: theme.v2.components.form.background, + inputBorder: theme.v2.components.form.border, + inputTextColor: theme.v2.components.form.text, inputBorderRadius: theme.v2.shape.borderRadius(1), brandTitle: 'Grafana UI', diff --git a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap index 1a370a23628..d5faacde155 100644 --- a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap +++ b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap @@ -30,7 +30,7 @@ exports[`BigValue Render with basic options should render 1`] = ` = ({ children, ...args }) => { + ))} + + + + ); }; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index b3079e0d3d1..c7436a406e8 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -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', }, }; diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx index 3727d80ff03..90540605bfa 100644 --- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx @@ -112,34 +112,47 @@ const getStyles = (theme: GrafanaTheme) => { label: toolbar-button; display: flex; align-items: center; - height: ${theme.height.md}px; - padding: 0 ${theme.spacing.sm}; - border-radius: ${theme.border.radius.sm}; - line-height: ${theme.height.md - 2}px; - font-weight: ${theme.typography.weight.semibold}; - border: 1px solid ${theme.colors.border2}; + height: ${theme.v2.spacing(theme.v2.components.height.md)}; + padding: ${theme.v2.spacing(0, 1)}; + border-radius: ${theme.v2.shape.borderRadius()}; + line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px; + font-weight: ${theme.v2.typography.fontWeightMedium}; + border: 1px solid ${theme.v2.palette.border1}; + box-shadow: ${theme.v2.shadows.z0}; white-space: nowrap; + transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], { + duration: theme.v2.transitions.duration.short, + })}, &:focus { outline: none; } + &:hover { + box-shadow: ${theme.v2.shadows.z2}; + } + &[disabled], &:disabled { cursor: not-allowed; - opacity: 0.5; + opacity: ${theme.v2.palette.action.disabledOpacity}; + background: ${theme.v2.palette.action.disabledBackground}; + box-shadow: none; + &:hover { - color: ${theme.colors.textWeak}; - background: ${theme.colors.bg1}; + color: ${theme.v2.palette.text.disabled}; + background: ${theme.v2.palette.action.disabledBackground}; + box-shadow: none; } - } + } `, default: css` - color: ${theme.colors.textWeak}; - background-color: ${theme.colors.bg1}; + color: ${theme.v2.palette.text.secondary}; + background-color: ${theme.v2.palette.layer1}; + &:hover { - color: ${theme.colors.text}; - background: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; + color: ${theme.v2.palette.text.primary}; + background: ${theme.v2.palette.layer2}; } `, active: css` diff --git a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap index 956c186ca85..003bf2827f7 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap +++ b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
= ({ disabled }) => { export const AsLink: Story = ({ disabled }) => { return ( - + + + + + Meta tags + + ); }; diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index 22574a9851f..b7fd20db1d6 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -136,43 +136,28 @@ export const Card: CardInterface = ({ ); }; -/** - * @public - */ -export const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false, disableHover = false) => { - return css` - display: flex; - width: 100%; - color: ${theme.colors.textStrong}; - background: ${theme.colors.bg2}; - border-radius: ${theme.border.radius.sm}; - position: relative; - pointer-events: ${disabled ? 'none' : 'auto'}; - margin-bottom: ${theme.spacing.sm}; +const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false, disableHover = false) => { + return css({ + display: 'flex', + width: '100%', + background: theme.v2.palette.layer2, + borderRadius: theme.v2.shape.borderRadius(), + position: 'relative', + pointerEvents: disabled ? 'none' : 'auto', + marginBottom: theme.v2.spacing(1), + transition: theme.v2.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], { + duration: theme.v2.transitions.duration.short, + }), - &::after { - content: ''; - display: ${disabled ? 'block' : 'none'}; - position: absolute; - top: 1px; - left: 1px; - right: 1px; - bottom: 1px; - background: linear-gradient(180deg, rgba(75, 79, 84, 0.5) 0%, rgba(82, 84, 92, 0.5) 100%); - width: calc(100% - 2px); - height: calc(100% - 2px); - border-radius: ${theme.border.radius.sm}; - } - - &:hover { - background: ${disableHover ? theme.colors.bg2 : styleMixins.hoverColor(theme.colors.bg2, theme)}; - cursor: ${disableHover ? 'default' : 'pointer'}; - } - - &:focus { - ${styleMixins.focusCss(theme)}; - } - `; + ...(!disableHover && { + '&:hover': { + background: theme.v2.palette.getHoverColor(theme.v2.palette.layer2, 0.03), + cursor: 'pointer', + zIndex: 1, + }, + '&:focus': styleMixins.getFocusStyles(theme.v2), + }), + }); }); /** diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index d6d053a3d44..2c4d4281f40 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -155,12 +155,12 @@ const getStyles = (theme: GrafanaTheme) => { left: ${theme.spacing.xxs}; } .thumb-vertical { - background: ${theme.colors.bg3}; + background: ${theme.v2.palette.action.focus}; border-radius: ${theme.border.radius.md}; opacity: 0; } .thumb-horizontal { - background: ${theme.colors.bg3}; + background: ${theme.v2.palette.action.focus}; border-radius: ${theme.border.radius.md}; opacity: 0; } diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap index f709b0e6786..e5d012a5c47 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap +++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
(props: Props) => { }; return ( -
+ <> (props: Props) => {
)} -
+ ); }); @@ -79,10 +79,6 @@ ButtonSelect.displayName = 'ButtonSelect'; const getStyles = (theme: GrafanaTheme) => { return { - wrapper: css` - position: relative; - display: inline-flex; - `, menuWrapper: css` position: absolute; z-index: ${theme.zIndex.dropdown}; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 7271e1ba8bf..c79dff5496a 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -21,17 +21,14 @@ export interface RadioButtonProps { const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButtonSize, fullWidth?: boolean) => { const { fontSize, height, padding } = getPropertiesForButtonSize(size, theme.v2); - const c = theme.palette; - const textColor = theme.colors.textSemiWeak; - const textColorHover = theme.colors.text; - const textColorActive = theme.colors.textBlue; - const borderColor = theme.colors.border2; - const borderColorHover = theme.colors.border3; - const borderColorActive = theme.colors.border2; + const textColor = theme.v2.palette.text.secondary; + const textColorHover = theme.v2.palette.text.primary; + const textColorActive = theme.v2.palette.primary.text; + const borderColor = theme.v2.components.form.border; + const borderColorHover = theme.v2.components.form.borderHover; + const borderColorActive = theme.v2.components.form.border; const bg = theme.colors.bodyBg; - const bgDisabled = theme.isLight ? c.gray95 : c.gray15; - const bgActive = theme.colors.bg2; - + const bgActive = theme.v2.palette.layer2; const border = `1px solid ${borderColor}`; const borderActive = `1px solid ${borderColorActive}`; const borderHover = `1px solid ${borderColorHover}`; @@ -56,8 +53,8 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt &:disabled + label { cursor: default; - background: ${bgDisabled}; - color: ${textColor}; + color: ${theme.v2.palette.text.disabled}; + cursor: not-allowed; } `, radioLabel: css` diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index a7d2f254b17..4ac0956ba02 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -10,15 +10,15 @@ export const getFocusStyle = (theme: GrafanaTheme) => css` `; export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => { - const palette = theme.v2.palette; - const borderColor = invalid ? palette.error.border : palette.formComponent.border; - const background = palette.formComponent.background; - const textColor = palette.text.primary; + const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.form.border; + const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.form.borderHover; + const background = theme.v2.components.form.background; + const textColor = theme.v2.components.form.text; return css` - background-color: ${background}; - line-height: ${theme.typography.lineHeight.md}; - font-size: ${theme.typography.size.md}; + background: ${background}; + line-height: ${theme.v2.typography.body.lineHeight}; + font-size: ${theme.v2.typography.size.md}; color: ${textColor}; border: 1px solid ${borderColor}; padding: ${theme.v2.spacing(0, 1, 0, 1)}; @@ -38,7 +38,7 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => { } &:hover { - border-color: ${borderColor}; + border-color: ${borderColorHover}; } &:focus { @@ -46,12 +46,12 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => { } &:disabled { - background-color: ${palette.formComponent.disabledBackground}; - color: ${palette.text.disabled}; + background-color: ${theme.v2.palette.action.disabledBackground}; + color: ${theme.v2.palette.action.disabledText}; } &::placeholder { - color: ${palette.text.disabled}; + color: ${theme.v2.palette.text.disabled}; opacity: 1; } `; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index 1a470d5232e..5249724c484 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -13,7 +13,7 @@ export interface Props extends React.ButtonHTMLAttributes { name: IconName; /** Icon size */ size?: IconSize; - /** Need this to change hover effect based on what surface it is on */ + /** @deprecated */ surface?: SurfaceType; /** Type od the icon - mono or default */ iconType?: IconType; @@ -26,9 +26,9 @@ export interface Props extends React.ButtonHTMLAttributes { type SurfaceType = 'dashboard' | 'panel' | 'header'; export const IconButton = React.forwardRef( - ({ name, size = 'md', surface = 'panel', iconType, tooltip, tooltipPlacement, className, ...restProps }, ref) => { + ({ name, size = 'md', iconType, tooltip, tooltipPlacement, className, ...restProps }, ref) => { const theme = useTheme(); - const styles = getStyles(theme, surface, size); + const styles = getStyles(theme, size); const button = (
- {isSelected && ( - - - - )}
); } diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx index 1a6580e52ce..fa6ab342ab3 100644 --- a/packages/grafana-ui/src/components/Select/SingleValue.tsx +++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx @@ -11,7 +11,7 @@ import { GrafanaTheme } from '@grafana/data'; const getStyles = stylesFactory((theme: GrafanaTheme) => { const singleValue = css` label: singleValue; - color: ${theme.colors.formInputText}; + color: ${theme.v2.components.form.text}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 5f66b736b73..a62aa434a0f 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -3,17 +3,11 @@ import { css } from '@emotion/css'; import { GrafanaTheme } from '@grafana/data'; export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { - const bgColor = theme.colors.formInputBg; - const menuShadowColor = theme.colors.dropdownShadow; - const optionBgHover = theme.colors.dropdownOptionHoverBg; - const multiValueContainerBg = theme.colors.bg2; - const multiValueColor = theme.colors.text; - return { menu: css` label: grafana-select-menu; - background: ${bgColor}; - box-shadow: 0px 4px 4px ${menuShadowColor}; + background: ${theme.v2.palette.layer2}; + box-shadow: ${theme.v2.shadows.z3}; position: relative; min-width: 100%; z-index: 1; @@ -28,8 +22,9 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { white-space: nowrap; cursor: pointer; border-left: 2px solid transparent; + &:hover { - background: ${optionBgHover}; + background: ${theme.v2.palette.action.hover}; } `, optionImage: css` @@ -40,32 +35,28 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { optionDescription: css` label: grafana-select-option-description; font-weight: normal; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textWeak}; + font-size: ${theme.v2.typography.size.sm}; + color: ${theme.v2.palette.text.secondary}; white-space: normal; - line-height: ${theme.typography.lineHeight.md}; + line-height: ${theme.v2.typography.body.lineHeight}; `, optionBody: css` label: grafana-select-option-body; display: flex; - font-weight: ${theme.typography.weight.semibold}; + font-weight: ${theme.v2.typography.fontWeightMedium}; flex-direction: column; flex-grow: 1; `, optionFocused: css` label: grafana-select-option-focused; - background: ${optionBgHover}; - border-image: linear-gradient(#f05a28 30%, #fbca0a 99%); - border-image-slice: 1; - border-style: solid; - border-top: 0; - border-right: 0; - border-bottom: 0; - border-left-width: 2px; + background: ${theme.v2.palette.action.focus}; + `, + optionSelected: css` + background: ${theme.v2.palette.action.selected}; `, singleValue: css` label: grafana-select-single-value; - color: ${theme.colors.formInputText}; + color: ${theme.v2.components.form.text}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -88,7 +79,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { `, loadingMessage: css` label: grafana-select-loading-message; - padding: ${theme.spacing.sm}; + padding: ${theme.v2.spacing(1)}; text-align: center; width: 100%; `, @@ -97,16 +88,16 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { display: flex; align-items: center; line-height: 1; - background: ${multiValueContainerBg}; - border-radius: ${theme.border.radius.sm}; - margin: 0 ${theme.spacing.sm} 0 0; - padding: ${theme.spacing.xxs} 0 ${theme.spacing.xxs} ${theme.spacing.sm}; - color: ${multiValueColor}; + background: ${theme.v2.palette.layer2}; + border-radius: ${theme.v2.shape.borderRadius()}; + margin: ${theme.v2.spacing(0, 1, 0, 0)}; + padding: ${theme.v2.spacing(0.25, 0, 0.25, 1)}; + color: ${theme.v2.palette.text.primary}; font-size: ${theme.typography.size.sm}; `, multiValueRemove: css` label: grafana-select-multi-value-remove; - margin: 0 ${theme.spacing.xs}; + margin: ${theme.v2.spacing(0, 0.5)}; cursor: pointer; `, }; diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx index e93e1b5ffec..eaf90242acc 100644 --- a/packages/grafana-ui/src/components/Table/FilterList.tsx +++ b/packages/grafana-ui/src/components/Table/FilterList.tsx @@ -89,8 +89,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ overflow: hidden; text-overflow: ellipsis; padding: ${theme.spacing.xs}; + :hover { - background-color: ${theme.colors.bg3}; + background-color: ${theme.v2.palette.action.hover}; } `, filterListInput: css` diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.story.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.story.tsx deleted file mode 100644 index a682a255b1e..00000000000 --- a/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.story.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { ThemeColors } from './ThemeColors'; - -export default { - title: 'Docs Overview/Theme', - component: ThemeColors, - decorators: [], - parameters: { - options: { - showPanel: false, - }, - docs: {}, - }, -}; - -export const OldThemeDemo = () => { - return ; -}; diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.tsx deleted file mode 100644 index 47cc022c657..00000000000 --- a/packages/grafana-ui/src/components/ThemeDemos/ThemeColors.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React, { FC } from 'react'; -import { css, cx } from '@emotion/css'; -import { useTheme } from '../../themes/ThemeContext'; -import { Icon } from '../Icon/Icon'; -import { HorizontalGroup } from '../Layout/Layout'; - -interface DemoBoxProps { - bg: string; - border?: string; - textColor?: string; -} - -const DemoBox: FC = ({ bg, border, children }) => { - const style = cx( - css` - padding: 32px 32px 16px 32px; - background: ${bg}; - width: 100%; - `, - border - ? css` - border: 1px solid ${border}; - ` - : null - ); - - return
{children}
; -}; - -const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => { - const style = css` - padding: 4px; - color: ${color ?? 'inherit'}; - font-weight: ${bold ? 500 : 400}; - font-size: ${size ?? 14}px; - `; - - return
{children}
; -}; - -export const ThemeColors = () => { - const theme = useTheme(); - - return ( -
- - theme.colors.dashboardBg - - - theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1 - - - - colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on - elements placed ontop of bg1. This box is using border2. - - - colors.bg3 background used for elements placed on colors.bg2. - - - - - - - - <> - Text on main body background (bg1) - - textHeading Usually a bit bigger text - - - text - - - textSemiWeak - - - textWeak - - - textFaint - - - textStrong - - - formInputText - - - formLabel is also bold - - - formDescription - - - textBlue usually bold - - link - linkHover - linkDisabled - linkExternal - - - - This is inside form input bg (same as dashboard bg) - formInputText - formInputDisabledText - formInputPlaceholderText - - - Inside bg2 - - text - - - textWeak - - - textFaint - - - textStrong - - - -
- ); -}; diff --git a/packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.story.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx similarity index 77% rename from packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.story.tsx rename to packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx index 7f5ef2f2cad..e2d778ba0af 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.story.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { EmotionPerfTest } from './EmotionPerfTest'; -import { NewThemeDemo as NewThemeDemoComponent } from './NewThemeDemo'; +import { ThemeDemo as NewThemeDemoComponent } from './ThemeDemo'; export default { title: 'Docs Overview/Theme', @@ -14,7 +14,7 @@ export default { }, }; -export const NewThemeDemo = () => { +export const ThemeDemo = () => { return ; }; diff --git a/packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx similarity index 61% rename from packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.tsx rename to packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx index bc071ba81fd..ab23013a509 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/NewThemeDemo.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx @@ -2,7 +2,7 @@ import React, { FC, useState } from 'react'; import { css, cx } from '@emotion/css'; import { useTheme } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; -import { HorizontalGroup } from '../Layout/Layout'; +import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { GrafanaThemeV2, ThemePaletteColor } from '@grafana/data'; import { CollapsableSection } from '../Collapse/CollapsableSection'; import { Field } from '../Forms/Field'; @@ -10,6 +10,10 @@ import { Input } from '../Input/Input'; import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; import { Switch } from '../Switch/Switch'; import { allButtonVariants, Button } from '../Button'; +import { InlineField } from '../Forms/InlineField'; +import { InlineFieldRow } from '../Forms/InlineFieldRow'; +import { Card } from '../Card/Card'; +import { Select } from '../Select/Select'; interface DemoBoxProps { bg?: string; @@ -45,10 +49,12 @@ const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color return
{children}
; }; -export const NewThemeDemo = () => { +export const ThemeDemo = () => { const [radioValue, setRadioValue] = useState('v'); const [boolValue, setBoolValue] = useState(false); + const [selectValue, setSelectValue] = useState('Item 2'); const oldTheme = useTheme(); + const t = oldTheme.v2; const richColors = [ @@ -60,6 +66,12 @@ export const NewThemeDemo = () => { t.palette.info, ]; + const selectOptions = [ + { label: 'Item 1', value: 'Item 1' }, + { label: 'Item 2', value: 'Item 2' }, + { label: 'Item 3', value: 'Item 3' }, + { label: 'Item 4', value: 'Item 4' }, + ]; const radioOptions = [ { value: 'h', label: 'Horizontal' }, { value: 'v', label: 'Vertical' }, @@ -103,6 +115,7 @@ export const NewThemeDemo = () => { name main + shade (used for hover) border & text @@ -122,6 +135,9 @@ export const NewThemeDemo = () => { + + + + + + + + - - - + {Object.keys(t.shadows).map((key) => ( + + ))} - - {allButtonVariants.map((variant) => ( - + ))} + - ))} - - + + + + <> + {allButtonVariants.map((variant) => ( + + ))} + + + + + + + +
); @@ -183,14 +229,23 @@ export function RichColorDemo({ theme, color }: RichColorDemoProps) { color: ${color.contrastText}; padding: 8px; font-weight: 500; - &:hover { - background: ${theme.palette.getHoverColor(color.main)}; - } `} > {color.main} + +
+ {color.shade} +
+
{color.text} @@ -245,3 +297,55 @@ export function ShadowDemo({ name, shadow }: { name: string; shadow: string }) { }); return
{name}
; } + +export function ActionsDemo() { + const t = useTheme().v2; + + const item = css({ + padding: '8px', + ':hover': { + background: t.palette.action.hover, + }, + }); + const hover = css({ + background: t.palette.action.hover, + }); + const selected = css({ + background: t.palette.action.selected, + }); + const focused = css({ + background: t.palette.action.focus, + }); + + return ( + + + +
item
+
item
+
item hover
+
item selected
+
item focused
+ + + + +
item
+
item
+
item hover
+
item selected
+
item focused
+ + + + +
item
+
item
+
item hover
+
item selected
+
item focused
+ + + + ); +} diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx index 278159120a0..484e2d6f6aa 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx @@ -12,18 +12,16 @@ import { TimeRangeList } from './TimeRangeList'; import { TimePickerFooter } from './TimePickerFooter'; const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRanges, isContainerTall) => { - const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5; - return { container: css` - background: ${theme.colors.bodyBg}; - box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow}; + background: ${theme.v2.palette.layer2}; + box-shadow: ${theme.v2.shadows.z4}; position: absolute; z-index: ${theme.zIndex.dropdown}; width: 546px; top: 116%; border-radius: 2px; - border: 1px solid ${containerBorder}; + border: 1px solid ${theme.v2.palette.border0}; ${isReversed ? 'left' : 'right'}: 0; @media only screen and (max-width: ${theme.breakpoints.lg}) { @@ -37,14 +35,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRange leftSide: css` display: flex; flex-direction: column; - border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border1}`}; + border-right: ${isReversed ? 'none' : `1px solid ${theme.v2.palette.divider}`}; width: ${!hideQuickRanges ? '60%' : '100%'}; overflow: hidden; order: ${isReversed ? 1 : 0}; `, rightSide: css` width: 40% !important; - border-right: ${isReversed ? `1px solid ${theme.colors.border1}` : 'none'}; + border-right: ${isReversed ? `1px solid ${theme.v2.palette.divider}` : 'none'}; @media only screen and (max-width: ${theme.breakpoints.lg}) { width: 100% !important; @@ -63,12 +61,11 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme) => { flex-direction: row; justify-content: space-between; align-items: center; - border-bottom: 1px solid ${theme.colors.border1}; + border-bottom: 1px solid ${theme.v2.palette.divider}; padding: 7px 9px 7px 9px; `, body: css` - border-bottom: 1px solid ${theme.colors.border1}; - box-shadow: inset 0px 2px 2px ${theme.colors.dropdownShadow}; + border-bottom: 1px solid ${theme.v2.palette.divider}; `, form: css` padding: 7px 9px 7px 9px; @@ -97,11 +94,8 @@ const getFullScreenStyles = stylesFactory((theme: GrafanaTheme, hideQuickRanges? }); const getEmptyListStyles = stylesFactory((theme: GrafanaTheme) => { - const formBackground = theme.isDark ? theme.palette.gray15 : theme.palette.gray98; - return { container: css` - background-color: ${formBackground}; padding: 12px; margin: 12px; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx index 21092d2eb54..6f8aecee4b7 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx @@ -1,8 +1,7 @@ import React, { memo } from 'react'; -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import { GrafanaTheme, TimeOption } from '@grafana/data'; -import { useTheme, stylesFactory, styleMixins } from '../../../themes'; -import { Icon } from '../../Icon/Icon'; +import { useTheme, stylesFactory } from '../../../themes'; const getStyles = stylesFactory((theme: GrafanaTheme) => { return { @@ -11,20 +10,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { align-items: center; justify-content: space-between; padding: 7px 9px 7px 9px; - border-left: 2px solid rgba(255, 255, 255, 0); &:hover { - background: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; - border-image: linear-gradient(#f05a28 30%, #fbca0a 99%); - border-image-slice: 1; - border-style: solid; - border-top: 0; - border-right: 0; - border-bottom: 0; - border-left-width: 2px; + background: ${theme.v2.palette.action.hover}; cursor: pointer; } `, + selected: css` + background: ${theme.v2.palette.action.selected}; + } + `, }; }); @@ -39,9 +34,8 @@ export const TimeRangeOption = memo(({ value, onSelect, selected = false const styles = getStyles(theme); return ( -
onSelect(value)} tabIndex={-1}> +
onSelect(value)} tabIndex={-1}> {value.display} - {selected ? : null}
); }); diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss index 6b081064d2f..f2ed0343ef4 100644 --- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss +++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss @@ -31,7 +31,8 @@ $popper-margin-from-ref: 5px; background: $tooltipBackground; border-radius: $border-radius-sm; box-shadow: $tooltipShadow; - padding: $space-sm; + padding: $space-xs $space-sm; + font-size: $font-size-sm; color: $tooltipColor; font-weight: $font-weight-semi-bold; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index d71f1ef7e4b..1884e2d23c1 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -54,9 +54,17 @@ $gray-5: ${theme.palette.gray5}; $gray-6: ${theme.palette.gray6}; $input-black: ${theme.colors.formInputBg}; - $white: ${theme.palette.white}; +$layer0: ${theme.v2.palette.layer0}; +$layer1: ${theme.v2.palette.layer1}; +$layer2: ${theme.v2.palette.layer2}; + +$divider: ${theme.v2.palette.divider}; + +$border0: ${theme.v2.palette.border0}; +$border1: ${theme.v2.palette.border1}; + // Accent colors // ------------------------- $blue: ${theme.palette.blue85}; @@ -120,9 +128,10 @@ $hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: ${theme.colors.panelBg}; -$panel-border: 1px solid ${theme.colors.panelBorder}; -$panel-header-hover-bg: ${theme.colors.bg2}; +$panel-bg: ${theme.v2.components.panel.background}; +$panel-border: ${theme.v2.components.panel.border}; +$panel-header-hover-bg: ${theme.v2.palette.action.hover}; +$panel-box-shadow: ${theme.v2.components.panel.boxShadow}; $panel-corner: $panel-bg; // page header @@ -141,8 +150,8 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: ${theme.colors.bg2}; -$card-background-hover: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; +$card-background: ${theme.v2.palette.layer2}; +$card-background-hover: ${theme.v2.palette.layer2}; $card-shadow: none; // Lists @@ -159,11 +168,10 @@ $scrollbarBorder: black; // Tables // ------------------------- -$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; // for striping -$table-border: $dark-6; // table and cell border - -$table-bg-odd: $dark-3; -$table-bg-hover: $dark-6; +$table-bg-accent: ${theme.v2.palette.layer2}; +$table-border: ${theme.v2.palette.border1}; +$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)}; +$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)}; // Buttons // ------------------------- @@ -221,10 +229,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $panel-bg; -$dropdownBorder: ${theme.colors.panelBorder}; -$dropdownDividerTop: transparent; -$dropdownDividerBottom: ${theme.palette.gray25}; +$dropdownBackground: ${theme.v2.palette.layer2}; +$dropdownBorder: ${theme.v2.palette.border0}; +$dropdownDividerTop: ${theme.v2.palette.divider}; +$dropdownDividerBottom: ${theme.v2.palette.divider}; $dropdownLinkColor: $link-color; $dropdownLinkColorHover: $white; @@ -252,17 +260,14 @@ $side-menu-header-color: ${theme.colors.text}; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: ${theme.colors.bg1}; -$menu-dropdown-hover-bg: ${theme.colors.bg2}; -$menu-dropdown-shadow: 5px 5px 20px -5px $black; +$menu-dropdown-bg: ${theme.v2.palette.layer2}; +$menu-dropdown-hover-bg: ${theme.v2.palette.action.hover}; +$menu-dropdown-shadow: ${theme.v2.shadows.z3}; // Tabs // ------------------------- $tab-border-color: $dark-9; -// Toolbar -$toolbar-bg: $input-black; - // Form states and alerts // ------------------------- $warning-text-color: $warn; @@ -276,22 +281,21 @@ $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // Tooltips and popovers // ------------------------- -$tooltipColor: $text-color; $tooltipArrowWidth: 5px; $tooltipLinkColor: $link-color; -$tooltipShadow: 0 0 10px black; $graph-tooltip-bg: $dark-1; -$tooltipBackground: $gray15; -$tooltipColor: $text-color; -$tooltipArrowColor: $tooltipBackground; -$tooltipBackgroundError: $brand-danger; +$tooltipBackground: ${theme.v2.palette.layer2}; +$tooltipColor: ${theme.v2.palette.text.primary}; +$tooltipArrowColor: ${theme.v2.palette.layer2}; +$tooltipBackgroundError: ${theme.v2.palette.error.main}; +$tooltipShadow: ${theme.v2.shadows.z2}; -$popover-bg: $dark-2; -$popover-color: $text-color; -$popover-border-color: $dark-9; -$popover-header-bg: $dark-9; -$popover-shadow: 0 0 20px black; +$popover-bg: ${theme.v2.palette.layer2}; +$popover-color: ${theme.v2.palette.text.primary}; +$popover-border-color: ${theme.v2.palette.border1}; +$popover-header-bg: ${theme.v2.palette.layer2}; +$popover-shadow: ${theme.v2.shadows.z4}; $popover-help-bg: $tooltipBackground; $popover-help-color: $text-color; @@ -377,9 +381,6 @@ $panel-editor-tabs-line-color: #e3e3e3; $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); -$panel-options-group-border: none; -$panel-options-group-header-bg: ${theme.colors.bg2}; - $panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%); $panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80}; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index ab2d11c91e8..e8b0325933a 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -51,6 +51,15 @@ $gray-7: ${theme.palette.gray7}; $white: ${theme.palette.white}; +$layer0: ${theme.v2.palette.layer0}; +$layer1: ${theme.v2.palette.layer1}; +$layer2: ${theme.v2.palette.layer2}; + +$divider: ${theme.v2.palette.divider}; + +$border0: ${theme.v2.palette.border0}; +$border1: ${theme.v2.palette.border1}; + // Accent colors // ------------------------- $blue: ${theme.colors.textBlue}; @@ -113,10 +122,11 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- -$panel-bg: ${theme.colors.panelBg}; -$panel-border: 1px solid ${theme.colors.panelBorder}; -$panel-header-hover-bg: ${theme.colors.bg2}; -$panel-corner: $gray-4; +$panel-bg: ${theme.v2.components.panel.background}; +$panel-border: ${theme.v2.components.panel.border}; +$panel-header-hover-bg: ${theme.v2.palette.action.hover}; +$panel-box-shadow: ${theme.v2.components.panel.boxShadow}; +$panel-corner: $panel-bg; // Page header $page-header-bg: ${theme.colors.pageHeaderBg}; @@ -134,8 +144,8 @@ $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: ${theme.colors.bg2}; -$card-background-hover: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; +$card-background: ${theme.v2.palette.layer2}; +$card-background-hover: ${theme.v2.palette.layer2}; $card-shadow: none; // Lists @@ -152,11 +162,10 @@ $scrollbarBorder: $gray-7; // Tables // ------------------------- -$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; -$table-border: $gray-3; // table and cell border - -$table-bg-odd: $gray-6; -$table-bg-hover: $gray-5; +$table-bg-accent: ${theme.v2.palette.layer2}; +$table-border: ${theme.v2.palette.border1}; +$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)}; +$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)}; // Buttons // ------------------------- @@ -214,10 +223,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $white; -$dropdownBorder: $gray-4; -$dropdownDividerTop: $gray-6; -$dropdownDividerBottom: $gray-4; +$dropdownBackground: ${theme.v2.palette.layer2}; +$dropdownBorder: ${theme.v2.palette.border0}; +$dropdownDividerTop: ${theme.v2.palette.divider}; +$dropdownDividerBottom: ${theme.v2.palette.divider}; $dropdownLinkColor: $dark-2; $dropdownLinkColorHover: $link-color; @@ -247,17 +256,14 @@ $side-menu-header-color: ${theme.palette.gray95}; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $panel-bg; -$menu-dropdown-hover-bg: $gray-6; -$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; +$menu-dropdown-bg: ${theme.v2.palette.layer2}; +$menu-dropdown-hover-bg: ${theme.v2.palette.action.hover}; +$menu-dropdown-shadow: ${theme.v2.shadows.z3}; // Tabs // ------------------------- $tab-border-color: $gray-5; -// Toolbar -$toolbar-bg: white; - // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); @@ -270,22 +276,23 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // Tooltips and popovers -$tooltipBackground: $gray-1; -$tooltipColor: $gray-7; -$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip -$tooltipBackgroundError: $brand-danger; -$tooltipShadow: 0 0 5px $gray60; +$tooltipBackground: ${theme.v2.palette.layer2}; +$tooltipColor: ${theme.v2.palette.text.primary}; +$tooltipArrowColor: ${theme.v2.palette.layer2}; +$tooltipBackgroundError: ${theme.v2.palette.error.main}; +$tooltipShadow: ${theme.v2.shadows.z2}; + +$popover-bg: ${theme.v2.palette.layer2}; +$popover-color: ${theme.v2.palette.text.primary}; +$popover-border-color: ${theme.v2.palette.border1}; +$popover-header-bg: ${theme.v2.palette.layer2}; +$popover-shadow: ${theme.v2.shadows.z4}; + $graph-tooltip-bg: $gray-5; $tooltipArrowWidth: 5px; $tooltipLinkColor: lighten($tooltipColor, 5%); -$popover-bg: $page-bg; -$popover-color: $text-color; -$popover-border-color: $gray-5; -$popover-header-bg: $gray-5; -$popover-shadow: 0 0 20px $white; - $popover-error-bg: $btn-danger-bg; $popover-help-bg: $tooltipBackground; $popover-help-color: $tooltipColor; @@ -370,9 +377,6 @@ $panel-editor-tabs-line-color: $dark-2; $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); -$panel-options-group-border: none; -$panel-options-group-header-bg: $gray-5; - $panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%); $panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95}; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 8764f22fd15..01ac857883d 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -1,6 +1,8 @@ import defaultTheme, { commonColorsPalette } from './default'; import { GrafanaThemeType, GrafanaTheme, createTheme } from '@grafana/data'; +const v2 = createTheme({ palette: { mode: 'dark' } }); + const basicColors = { ...commonColorsPalette, black: '#000000', @@ -35,28 +37,28 @@ const basicColors = { }; const backgrounds = { - bg1: basicColors.gray10, - bg2: basicColors.gray15, - bg3: basicColors.gray25, - dashboardBg: basicColors.gray05, - bgBlue1: basicColors.blue80, - bgBlue2: basicColors.blue77, + bg1: v2.palette.layer1, + bg2: v2.palette.layer2, + bg3: v2.palette.action.hover, + dashboardBg: v2.palette.layer0, + bgBlue1: v2.palette.primary.main, + bgBlue2: v2.palette.primary.shade, }; const borders = { - border1: basicColors.gray15, - border2: basicColors.gray25, - border3: basicColors.gray33, + border1: v2.palette.border0, + border2: v2.palette.border1, + border3: v2.palette.border2, }; const textColors = { - textStrong: basicColors.gray98, - textHeading: basicColors.gray4, - text: basicColors.gray85, - textSemiWeak: basicColors.gray70, - textWeak: basicColors.gray60, - textFaint: basicColors.gray33, - textBlue: basicColors.blue85, + textStrong: v2.palette.text.maxContrast, + textHeading: v2.palette.text.primary, + text: v2.palette.text.primary, + textSemiWeak: v2.palette.text.secondary, + textWeak: v2.palette.text.disabled, + textFaint: v2.palette.text.disabled, + textBlue: v2.palette.primary.text, }; const form = { @@ -130,7 +132,7 @@ const darkTheme: GrafanaTheme = { shadows: { listItem: 'none', }, - v2: createTheme({ palette: { mode: 'dark' } }), + v2: v2, }; export default darkTheme; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 82fc0f1e60c..96d7763a260 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -1,6 +1,8 @@ import defaultTheme, { commonColorsPalette } from './default'; import { GrafanaThemeType, GrafanaTheme, createTheme } from '@grafana/data'; +const v2 = createTheme({ palette: { mode: 'light' } }); + const basicColors = { ...commonColorsPalette, black: '#000000', @@ -34,18 +36,18 @@ const basicColors = { }; const backgrounds = { - bg1: basicColors.white, - bg2: basicColors.gray97, - bg3: basicColors.gray90, - dashboardBg: basicColors.gray98, + bg1: v2.palette.layer1, + bg2: v2.palette.layer2, + bg3: v2.palette.action.hover, + dashboardBg: v2.palette.layer0, bgBlue1: basicColors.blue80, bgBlue2: basicColors.blue77, }; const borders = { - border1: basicColors.gray90, - border2: basicColors.gray85, - border3: basicColors.gray70, + border1: v2.palette.border0, + border2: v2.palette.border1, + border3: v2.palette.border2, }; const textColors = { @@ -131,7 +133,7 @@ const lightTheme: GrafanaTheme = { shadows: { listItem: 'none', }, - v2: createTheme({ palette: { mode: 'light' } }), + v2: v2, }; export default lightTheme; diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index bf91c5bb862..a734c797553 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) { const getStyles = (theme: GrafanaTheme) => ({ headerCanvas: css` - background: ${theme.colors.bg2}; - border-bottom: 1px solid ${theme.colors.border1}; + background: ${theme.v2.palette.layer0}; + border-bottom: 1px solid ${theme.v2.palette.border0}; `, }); diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap index 2b9eb71cda2..54964a37a18 100644 --- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap +++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap @@ -2,20 +2,20 @@ exports[`Render should render component 1`] = `
@@ -25,7 +25,7 @@ exports[`Render should render component 1`] = ` className="css-gxxmom" >
= React.memo( const getStyles = (theme: GrafanaTheme) => { return { box: css` - border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; + border-bottom: 1px solid ${theme.v2.palette.divider}; &:last-child { border-bottom: none; } diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx index 01aa375adb6..92ce306faa2 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx @@ -64,6 +64,9 @@ export const OptionsPaneOptions: React.FC = (props) => { for (const item of vizOptions) { mainBoxElements.push(item.render()); } + for (const item of justOverrides) { + mainBoxElements.push(item.render()); + } break; case OptionFilter.Overrides: for (const override of justOverrides) { @@ -95,9 +98,6 @@ export const OptionsPaneOptions: React.FC = (props) => {
{mainBoxElements}
- {!isSearching && listMode === OptionFilter.All && ( -
{justOverrides.map((override) => override.render())}
- )}
@@ -180,14 +180,8 @@ const getStyles = (theme: GrafanaTheme) => ({ `, mainBox: css` background: ${theme.colors.bg1}; - margin-bottom: ${theme.spacing.md}; border: 1px solid ${theme.colors.border1}; border-top: none; - `, - overridesBox: css` - background: ${theme.colors.bg1}; - border: 1px solid ${theme.colors.border1}; - margin-bottom: ${theme.spacing.md}; flex-grow: 1; `, }); diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index e17a712c588..3a63973830b 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -486,6 +486,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { min-height: 0; width: 100%; padding-left: ${paneSpacing}; + padding-right: 2px; `, tabsWrapper: css` height: 100%; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx index 3d2e07801ae..e9bcc353f10 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx @@ -381,7 +381,7 @@ const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => { } &:hover { - background: ${theme.colors.bg3}; + background: ${theme.v2.palette.action.hover}; box-shadow: none; border: none; } diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx index 227c830209c..4cc92d73f7f 100644 --- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx +++ b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx @@ -25,7 +25,7 @@ export const DiffValues: React.FC = ({ diff }) => { }; const getStyles = (theme: GrafanaTheme) => css` - background-color: ${theme.colors.bg3}; + background-color: ${theme.v2.palette.action.hover}; border-radius: ${theme.border.radius.md}; color: ${theme.colors.textHeading}; font-size: ${theme.typography.size.base}; diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx index fb99124228b..e600a1d5683 100644 --- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx +++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx @@ -69,18 +69,21 @@ const getStyles = (theme: GrafanaTheme) => { display: flex; flex-shrink: 0; cursor: pointer; - background: ${theme.colors.bg2}; - border: 1px solid ${theme.colors.border2}; - border-radius: ${theme.border.radius.sm}; + background: ${theme.v2.palette.layer2}; + border-radius: ${theme.v2.shape.borderRadius()}; + box-shadow: ${theme.v2.shadows.z0}; align-items: center; padding: 8px; width: 100%; position: relative; overflow: hidden; height: 55px; + transition: ${theme.v2.transitions.create(['background'], { + duration: theme.v2.transitions.duration.short, + })}; &:hover { - background: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; + background: ${styleMixins.hoverColor(theme.v2.palette.layer2, theme)}; } `, itemContent: css` diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap index 5e422cf5163..d0c505394dd 100644 --- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap @@ -2,7 +2,7 @@ exports[`MetaInfoText should render component 1`] = `
{ &:hover { .query-name-wrapper { - background: ${theme.colors.bg3}; - border: 1px dashed ${theme.colors.border3}; + background: ${theme.v2.palette.action.hover}; + border: 1px dashed ${theme.v2.palette.border1}; } .query-name-edit-icon { diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 63afd6fddf0..9855e9837c5 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -56,9 +56,17 @@ $gray-5: #ececec; $gray-6: #f4f5f8; $input-black: #0b0c0e; - $white: #ffffff; +$layer0: #0d0f16; +$layer1: #181b1f; +$layer2: #22252b; + +$divider: rgba(218,224,254,0.06); + +$border0: #181b1f; +$border1: rgba(218,224,254,0.15); + // Accent colors // ------------------------- $blue: #33a2e5; @@ -66,7 +74,7 @@ $red: $red-base; $yellow: #ecbb13; $orange: #eb7b18; $purple: #9933cc; -$variable: #33a2e5; +$variable: #5790FF; $brand-primary: #eb7b18; $brand-success: #299c46; @@ -86,17 +94,17 @@ $critical: #e02f44; // Scaffolding // ------------------------- -$body-bg: #141619; -$page-bg: #141619; -$dashboard-bg: #0b0c0e; +$body-bg: #181b1f; +$page-bg: #181b1f; +$dashboard-bg: #0d0f16; -$text-color-strong: #f7f8fa; -$text-color: #c7d0d9; -$text-color-semi-weak: #9fa7b3; -$text-color-weak: #7b8087; -$text-color-faint: #464c54; -$text-color-emphasis: #f7f8fa; -$text-blue: #33a2e5; +$text-color-strong: #fff; +$text-color: rgba(255, 255, 255, 0.75); +$text-color-semi-weak: rgba(255, 255, 255, 0.50); +$text-color-weak: rgba(255, 255, 255, 0.35); +$text-color-faint: rgba(255, 255, 255, 0.35); +$text-color-emphasis: #fff; +$text-blue: #5790FF; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; @@ -114,7 +122,7 @@ $external-link-color: #33a2e5; // Typography // ------------------------- -$headings-color: #d8d9da; +$headings-color: rgba(255, 255, 255, 0.75); $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -122,29 +130,30 @@ $hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #141619; -$panel-border: 1px solid #202226; -$panel-header-hover-bg: #202226; +$panel-bg: #181b1f; +$panel-border: #181b1f; +$panel-header-hover-bg: rgba(255, 255, 255, 0.08); +$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(0,0,0,0.4),0px 1px 3px 0px rgba(0,0,0,0.3); $panel-corner: $panel-bg; // page header -$page-header-bg: #202226; +$page-header-bg: #22252b; $page-header-shadow: inset 0px -4px 14px $dark-3; -$page-header-border-color: #202226; +$page-header-border-color: #181b1f; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-func-bg: #202226; -$tight-form-func-highlight-bg: #25272b; +$tight-form-func-bg: #22252b; +$tight-form-func-highlight-bg: #272a30; -$modal-backdrop-bg: #2c3235; +$modal-backdrop-bg: rgba(255, 255, 255, 0.08); $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: #202226; -$card-background-hover: #25272b; +$card-background: #22252b; +$card-background-hover: #22252b; $card-shadow: none; // Lists @@ -152,7 +161,7 @@ $list-item-bg: $card-background; $list-item-hover-bg: $card-background-hover; $list-item-shadow: $card-shadow; -$empty-list-cta-bg: #202226; +$empty-list-cta-bg: #22252b; // Scrollbars $scrollbarBackground: #404357; @@ -161,11 +170,10 @@ $scrollbarBorder: black; // Tables // ------------------------- -$table-bg-accent: #191b1e; // for striping -$table-border: $dark-6; // table and cell border - -$table-bg-odd: $dark-3; -$table-bg-hover: $dark-6; +$table-bg-accent: #22252b; +$table-border: rgba(218,224,254,0.15); +$table-bg-odd: rgb(28, 31, 35); +$table-bg-hover: rgb(35, 38, 42); // Buttons // ------------------------- @@ -205,12 +213,12 @@ $input-bg: $input-black; $input-bg-disabled: $dark-6; $input-color: #c7d0d9; -$input-border-color: #2c3235; +$input-border-color: rgba(218,224,254,0.15); $input-box-shadow: none; $input-border-focus: #5794f2; $input-box-shadow-focus: $blue-light !default; -$input-color-placeholder: #464c54; -$input-label-bg: #202226; +$input-color-placeholder: rgba(255, 255, 255, 0.35); +$input-label-bg: #22252b; $input-color-select-arrow: $white; // Search @@ -223,10 +231,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $panel-bg; -$dropdownBorder: #202226; -$dropdownDividerTop: transparent; -$dropdownDividerBottom: #2c3235; +$dropdownBackground: #22252b; +$dropdownBorder: #181b1f; +$dropdownDividerTop: rgba(218,224,254,0.06); +$dropdownDividerBottom: rgba(218,224,254,0.06); $dropdownLinkColor: $link-color; $dropdownLinkColorHover: $white; @@ -247,24 +255,21 @@ $navbarBorder: 1px solid $dark-6; $side-menu-bg: $panel-bg; $side-menu-bg-mobile: $panel-bg; $side-menu-border: none; -$side-menu-item-hover-bg: #202226; +$side-menu-item-hover-bg: #22252b; $side-menu-shadow: 0 0 20px black; $side-menu-icon-color: #9fa7b3; -$side-menu-header-color: #c7d0d9; +$side-menu-header-color: rgba(255, 255, 255, 0.75); // Menu dropdowns // ------------------------- -$menu-dropdown-bg: #141619; -$menu-dropdown-hover-bg: #202226; -$menu-dropdown-shadow: 5px 5px 20px -5px $black; +$menu-dropdown-bg: #22252b; +$menu-dropdown-hover-bg: rgba(255, 255, 255, 0.08); +$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.5),0px 4px 5px 0px rgba(0,0,0,0.4),0px 1px 10px 0px rgba(0,0,0,0.3); // Tabs // ------------------------- $tab-border-color: $dark-9; -// Toolbar -$toolbar-bg: $input-black; - // Form states and alerts // ------------------------- $warning-text-color: $warn; @@ -278,22 +283,21 @@ $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // Tooltips and popovers // ------------------------- -$tooltipColor: $text-color; $tooltipArrowWidth: 5px; $tooltipLinkColor: $link-color; -$tooltipShadow: 0 0 10px black; $graph-tooltip-bg: $dark-1; -$tooltipBackground: $gray15; -$tooltipColor: $text-color; -$tooltipArrowColor: $tooltipBackground; -$tooltipBackgroundError: $brand-danger; +$tooltipBackground: #22252b; +$tooltipColor: rgba(255, 255, 255, 0.75); +$tooltipArrowColor: #22252b; +$tooltipBackgroundError: #D10E5C; +$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3); -$popover-bg: $dark-2; -$popover-color: $text-color; -$popover-border-color: $dark-9; -$popover-header-bg: $dark-9; -$popover-shadow: 0 0 20px black; +$popover-bg: #22252b; +$popover-color: rgba(255, 255, 255, 0.75); +$popover-border-color: rgba(218,224,254,0.15); +$popover-header-bg: #22252b; +$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3); $popover-help-bg: $tooltipBackground; $popover-help-color: $text-color; @@ -328,14 +332,14 @@ $json-explorer-url-color: #027bff; // Changelog and diff // ------------------------- -$diff-label-bg: #2c3235; +$diff-label-bg: rgba(255, 255, 255, 0.08); $diff-label-fg: $white; -$diff-group-bg: #202226; +$diff-group-bg: #22252b; $diff-arrow-color: $white; -$diff-json-bg: #202226; -$diff-json-fg: #c7d0d9; +$diff-json-bg: #22252b; +$diff-json-fg: rgba(255, 255, 255, 0.75); $diff-json-added: $blue-shade; $diff-json-deleted: $red-shade; @@ -379,9 +383,6 @@ $panel-editor-tabs-line-color: #e3e3e3; $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); -$panel-options-group-border: none; -$panel-options-group-header-bg: #202226; - $panel-grid-placeholder-bg: darken(#1f60c4, 30%); $panel-grid-placeholder-shadow: 0 0 4px #3274d9; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 9eaf954beaa..2efb2074394 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -53,6 +53,15 @@ $gray-7: #f7f8fa; $white: #ffffff; +$layer0: #F4F5F5; +$layer1: #fff; +$layer2: #F7F7F8; + +$divider: rgba(0, 2, 78, 0.07); + +$border0: #fff; +$border1: rgba(0, 2, 78, 0.20); + // Accent colors // ------------------------- $blue: #33a2e5; @@ -80,9 +89,9 @@ $critical: #c4162a; // Scaffolding // ------------------------- -$body-bg: #ffffff; -$page-bg: #ffffff; -$dashboard-bg: #f7f8fa; +$body-bg: #fff; +$page-bg: #fff; +$dashboard-bg: #F4F5F5; $text-color: #464c54; $text-color-strong: #202226; @@ -115,29 +124,30 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- -$panel-bg: #ffffff; -$panel-border: 1px solid #dce1e6; -$panel-header-hover-bg: #f1f5f9; -$panel-corner: $gray-4; +$panel-bg: #fff; +$panel-border: #fff; +$panel-header-hover-bg: rgba(0, 0, 0, 0.04); +$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); +$panel-corner: $panel-bg; // Page header -$page-header-bg: #f1f5f9; +$page-header-bg: #F7F7F8; $page-header-shadow: inset 0px -3px 10px $gray-6; -$page-header-border-color: #dce1e6; +$page-header-border-color: #fff; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-func-bg: #f1f5f9; -$tight-form-func-highlight-bg: #eaf0f6; +$tight-form-func-bg: #F7F7F8; +$tight-form-func-highlight-bg: #f2f2f3; -$modal-backdrop-bg: #ffffff; +$modal-backdrop-bg: #fff; $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: #f1f5f9; -$card-background-hover: #eaf0f6; +$card-background: #F7F7F8; +$card-background-hover: #F7F7F8; $card-shadow: none; // Lists @@ -154,11 +164,10 @@ $scrollbarBorder: $gray-7; // Tables // ------------------------- -$table-bg-accent: #fafafa; -$table-border: $gray-3; // table and cell border - -$table-bg-odd: $gray-6; -$table-bg-hover: $gray-5; +$table-bg-accent: #F7F7F8; +$table-border: rgba(0, 2, 78, 0.20); +$table-bg-odd: rgb(249, 249, 249); +$table-bg-hover: rgb(242, 242, 242); // Buttons // ------------------------- @@ -203,7 +212,7 @@ $input-box-shadow: none; $input-border-focus: #5794f2; $input-box-shadow-focus: #5794f2; $input-color-placeholder: #9fa7b3; -$input-label-bg: #f1f5f9; +$input-label-bg: #F7F7F8; $input-color-select-arrow: #7b8087; // search @@ -216,10 +225,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $white; -$dropdownBorder: $gray-4; -$dropdownDividerTop: $gray-6; -$dropdownDividerBottom: $gray-4; +$dropdownBackground: #F7F7F8; +$dropdownBorder: #fff; +$dropdownDividerTop: rgba(0, 2, 78, 0.07); +$dropdownDividerBottom: rgba(0, 2, 78, 0.07); $dropdownLinkColor: $dark-2; $dropdownLinkColorHover: $link-color; @@ -249,17 +258,14 @@ $side-menu-header-color: #e9edf2; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $panel-bg; -$menu-dropdown-hover-bg: $gray-6; -$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; +$menu-dropdown-bg: #F7F7F8; +$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04); +$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); // Tabs // ------------------------- $tab-border-color: $gray-5; -// Toolbar -$toolbar-bg: white; - // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); @@ -272,27 +278,28 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); // Tooltips and popovers -$tooltipBackground: $gray-1; -$tooltipColor: $gray-7; -$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip -$tooltipBackgroundError: $brand-danger; -$tooltipShadow: 0 0 5px $gray60; +$tooltipBackground: #F7F7F8; +$tooltipColor: rgba(0, 0, 0, 0.87); +$tooltipArrowColor: #F7F7F8; +$tooltipBackgroundError: #E0226E; +$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + +$popover-bg: #F7F7F8; +$popover-color: rgba(0, 0, 0, 0.87); +$popover-border-color: rgba(0, 2, 78, 0.20); +$popover-header-bg: #F7F7F8; +$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); + $graph-tooltip-bg: $gray-5; $tooltipArrowWidth: 5px; $tooltipLinkColor: lighten($tooltipColor, 5%); -$popover-bg: $page-bg; -$popover-color: $text-color; -$popover-border-color: $gray-5; -$popover-header-bg: $gray-5; -$popover-shadow: 0 0 20px $white; - $popover-error-bg: $btn-danger-bg; $popover-help-bg: $tooltipBackground; $popover-help-color: $tooltipColor; -$popover-code-bg: #ffffff; +$popover-code-bg: #fff; $popover-code-boxshadow: 0 0 5px $gray60; // images @@ -321,13 +328,13 @@ $json-explorer-url-color: $blue-base; // Changelog and diff // ------------------------- -$diff-label-bg: #dce1e6; +$diff-label-bg: rgba(0, 0, 0, 0.04); $diff-label-fg: $gray-2; $diff-arrow-color: $dark-2; -$diff-group-bg: #f1f5f9; +$diff-group-bg: #F7F7F8; -$diff-json-bg: #f1f5f9; +$diff-json-bg: #F7F7F8; $diff-json-fg: #464c54; $diff-json-added: $blue-shade; @@ -372,9 +379,6 @@ $panel-editor-tabs-line-color: $dark-2; $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); -$panel-options-group-border: none; -$panel-options-group-header-bg: $gray-5; - $panel-grid-placeholder-bg: lighten(#5794f2, 30%); $panel-grid-placeholder-shadow: 0 0 4px #5794f2; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 1305d799b7a..663f9c1eb1f 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -30,7 +30,7 @@ .dashboard-settings__aside { padding: 32px 0 0 32px; - background: lightOrDark($gray95, $gray15); + background: $dashboard-bg; display: flex; flex-direction: column; } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 05b0cc6ed2b..4f4ced24bc6 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -117,7 +117,6 @@ border-left: 2px solid transparent; &:hover { - @include left-brand-border-gradient(); color: $link-hover-color; background: $menu-dropdown-hover-bg !important; } @@ -326,7 +325,6 @@ } &:hover { - @include left-brand-border-gradient(); color: $link-hover-color; background: $input-label-bg; } diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index a9816f2197e..fdcf35023d4 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -29,7 +29,7 @@ /* Used by old angular panels */ .panel-options-group { - border-bottom: $panel-border; + border-bottom: 1px solid $divider; } .panel-options-group__header { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 46751b2c735..8274caefc72 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -74,10 +74,12 @@ div.flot-text { display: flex; flex-direction: column; flex: 1 1 0; + box-shadow: $panel-box-shadow; &--transparent { background-color: transparent; border: 1px solid transparent; + box-shadow: none; } &:hover {