Skip to content

N
nexpie-grafana-theme
Commit 1e3b19ac by Dominik Prokop Committed by GitHub
Options

Forms: Introduce new color variables to GrafanaTheme (#19874) 

* Introduce new color primitives for next-gen forms
* Introduce next-gen form functional colors palette
* Update snapshot
parent cf7bc399
Showing with 152 additions and 2 deletions
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
...@@ -98,6 +98,9 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -98,6 +98,9 @@ exports[`Render should render with base threshold 1`] = `
"colors": Object { "colors": Object {
"black": "#000000", "black": "#000000",
"blue": "#33b5e5", "blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9", "blueBase": "#3274d9",
"blueFaint": "#041126", "blueFaint": "#041126",
"blueLight": "#5794f2", "blueLight": "#5794f2",
...@@ -119,13 +122,37 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -119,13 +122,37 @@ exports[`Render should render with base threshold 1`] = `
"dark7": "#292a2d", "dark7": "#292a2d",
"dark8": "#2f2f32", "dark8": "#2f2f32",
"dark9": "#343436", "dark9": "#343436",
"formDescription": "#9fa7b3",
"formInputBg": "#202226",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputFocusOutline": "#1f60c4",
"formInputText": "#9fa7b3",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"gray05": "#0b0c0e",
"gray1": "#555555", "gray1": "#555555",
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e", "gray2": "#8e8e8e",
"gray25": "#343b40",
"gray3": "#b3b3b3", "gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da", "gray4": "#d8d9da",
"gray5": "#ececec", "gray5": "#ececec",
"gray6": "#f4f5f8", "gray6": "#f4f5f8",
"gray7": "#fbfbfb", "gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray95": "#e9edf2",
"gray98": "#f7f8fa",
"grayBlue": "#212327", "grayBlue": "#212327",
"greenBase": "#299c46", "greenBase": "#299c46",
"greenShade": "#23843b", "greenShade": "#23843b",
...@@ -147,6 +174,7 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -147,6 +174,7 @@ exports[`Render should render with base threshold 1`] = `
"queryPurple": "#fe85fc", "queryPurple": "#fe85fc",
"queryRed": "#e02f44", "queryRed": "#e02f44",
"red": "#d44a3a", "red": "#d44a3a",
"red88": "#e02f44",
"redBase": "#e02f44", "redBase": "#e02f44",
"redShade": "#c4162a", "redShade": "#c4162a",
"text": "#d8d9da", "text": "#d8d9da",
...@@ -267,6 +295,9 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -267,6 +295,9 @@ exports[`Render should render with base threshold 1`] = `
"colors": Object { "colors": Object {
"black": "#000000", "black": "#000000",
"blue": "#33b5e5", "blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue95": "#5794f2",
"blueBase": "#3274d9", "blueBase": "#3274d9",
"blueFaint": "#041126", "blueFaint": "#041126",
"blueLight": "#5794f2", "blueLight": "#5794f2",
...@@ -288,13 +319,37 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -288,13 +319,37 @@ exports[`Render should render with base threshold 1`] = `
"dark7": "#292a2d", "dark7": "#292a2d",
"dark8": "#2f2f32", "dark8": "#2f2f32",
"dark9": "#343436", "dark9": "#343436",
"formDescription": "#9fa7b3",
"formInputBg": "#202226",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputFocusOutline": "#1f60c4",
"formInputText": "#9fa7b3",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
"formLabel": "#9fa7b3",
"formLegend": "#c7d0d9",
"formValidationMessageBg": "#e02f44",
"formValidationMessageText": "#ffffff",
"gray05": "#0b0c0e",
"gray1": "#555555", "gray1": "#555555",
"gray10": "#141619",
"gray15": "#202226",
"gray2": "#8e8e8e", "gray2": "#8e8e8e",
"gray25": "#343b40",
"gray3": "#b3b3b3", "gray3": "#b3b3b3",
"gray33": "#464c54",
"gray4": "#d8d9da", "gray4": "#d8d9da",
"gray5": "#ececec", "gray5": "#ececec",
"gray6": "#f4f5f8", "gray6": "#f4f5f8",
"gray7": "#fbfbfb", "gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
"gray95": "#e9edf2",
"gray98": "#f7f8fa",
"grayBlue": "#212327", "grayBlue": "#212327",
"greenBase": "#299c46", "greenBase": "#299c46",
"greenShade": "#23843b", "greenShade": "#23843b",
...@@ -316,6 +371,7 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -316,6 +371,7 @@ exports[`Render should render with base threshold 1`] = `
"queryPurple": "#fe85fc", "queryPurple": "#fe85fc",
"queryRed": "#e02f44", "queryRed": "#e02f44",
"red": "#d44a3a", "red": "#d44a3a",
"red88": "#e02f44",
"redBase": "#e02f44", "redBase": "#e02f44",
"redShade": "#c4162a", "redShade": "#c4162a",
"text": "#d8d9da", "text": "#d8d9da",
......
packages/grafana-ui/src/themes/dark.ts
import defaultTheme from './default'; import defaultTheme, { commonColorsPalette } from './default';
import { GrafanaTheme, GrafanaThemeType } from '../types/theme'; import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
const basicColors = { const basicColors = {
...commonColorsPalette,
black: '#000000', black: '#000000',
white: '#ffffff', white: '#ffffff',
dark1: '#141414', dark1: '#141414',
...@@ -74,6 +75,23 @@ const darkTheme: GrafanaTheme = { ...@@ -74,6 +75,23 @@ const darkTheme: GrafanaTheme = {
linkExternal: basicColors.blue, linkExternal: basicColors.blue,
headingColor: basicColors.gray4, headingColor: basicColors.gray4,
pageHeaderBorder: basicColors.dark9, pageHeaderBorder: basicColors.dark9,
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formDescription: basicColors.gray70,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray15,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputFocusOutline: basicColors.blue77,
formInputText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
formInputTextWhite: basicColors.white,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
}, },
background: { background: {
dropdown: basicColors.dark3, dropdown: basicColors.dark3,
......
packages/grafana-ui/src/themes/default.ts
import { GrafanaThemeCommons } from '../types/theme'; import { GrafanaThemeCommons } from '../types/theme';
export const commonColorsPalette = {
// New greys palette used by next-gen form elements
gray98: '#f7f8fa',
gray95: '#e9edf2',
gray85: '#c7d0d9',
gray70: '#9fa7b3',
gray33: '#464c54',
gray25: '#343b40',
gray15: '#202226',
gray10: '#141619',
gray05: '#0b0c0e',
// New blues palette used by next-gen form elements
blue95: '#5794f2',
blue85: '#3274d9',
blue77: '#1f60c4',
// New reds palette used by next-gen form elements
red88: '#e02f44',
};
const theme: GrafanaThemeCommons = { const theme: GrafanaThemeCommons = {
name: 'Grafana Default', name: 'Grafana Default',
typography: { typography: {
......
packages/grafana-ui/src/themes/light.ts
import defaultTheme from './default'; import defaultTheme, { commonColorsPalette } from './default';
import { GrafanaTheme, GrafanaThemeType } from '../types/theme'; import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
const basicColors = { const basicColors = {
...commonColorsPalette,
black: '#000000', black: '#000000',
white: '#ffffff', white: '#ffffff',
dark1: '#1e2028', dark1: '#1e2028',
...@@ -75,6 +76,23 @@ const lightTheme: GrafanaTheme = { ...@@ -75,6 +76,23 @@ const lightTheme: GrafanaTheme = {
linkExternal: basicColors.blueLight, linkExternal: basicColors.blueLight,
headingColor: basicColors.gray1, headingColor: basicColors.gray1,
pageHeaderBorder: basicColors.gray4, pageHeaderBorder: basicColors.gray4,
// Next-gen forms functional colors
formLabel: basicColors.gray33,
formDescription: basicColors.gray33,
formLegend: basicColors.gray25,
formInputBg: basicColors.white,
formInputBgDisabled: basicColors.gray95,
formInputBorder: basicColors.gray85,
formInputBorderHover: basicColors.gray70,
formInputBorderActive: basicColors.blue77,
formInputBorderInvalid: basicColors.red88,
formInputFocusOutline: basicColors.blue95,
formInputText: basicColors.gray33,
formInputTextStrong: basicColors.gray25,
formInputTextWhite: basicColors.white,
formValidationMessageText: basicColors.white,
formValidationMessageBg: basicColors.red88,
}, },
background: { background: {
dropdown: basicColors.white, dropdown: basicColors.white,
......
packages/grafana-ui/src/types/theme.ts
...@@ -120,6 +120,26 @@ export interface GrafanaTheme extends GrafanaThemeCommons { ...@@ -120,6 +120,26 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
gray5: string; gray5: string;
gray6: string; gray6: string;
gray7: string; gray7: string;
// New greys palette used by next-gen form elements
gray98: string;
gray95: string;
gray85: string;
gray70: string;
gray33: string;
gray25: string;
gray15: string;
gray10: string;
gray05: string;
// New blues palette used by next-gen form elements
blue95: string;
blue85: string;
blue77: string;
// New reds palette used by next-gen form elements
red88: string;
grayBlue: string; grayBlue: string;
inputBlack: string; inputBlack: string;
...@@ -174,6 +194,23 @@ export interface GrafanaTheme extends GrafanaThemeCommons { ...@@ -174,6 +194,23 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
headingColor: string; headingColor: string;
pageHeaderBorder: string; pageHeaderBorder: string;
// Next-gen forms functional colors
formLabel: string;
formDescription: string;
formLegend: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
formInputBorderHover: string;
formInputBorderActive: string;
formInputBorderInvalid: string;
formInputFocusOutline: string;
formInputText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
formValidationMessageBg: string;
}; };
shadow: { shadow: {
pageHeader: string; pageHeader: string;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment