Skip to content

N
nexpie-grafana-theme
Commit ff834afd by Ivana Huckova Committed by GitHub
Options

UI: Add orangeDark color to theme (#19407)

parent 2aaaa98e
Showing with 17 additions and 11 deletions
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
...@@ -136,6 +136,7 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -136,6 +136,7 @@ exports[`Render should render with base threshold 1`] = `
"linkHover": "#ffffff", "linkHover": "#ffffff",
"online": "#299c46", "online": "#299c46",
"orange": "#eb7b18", "orange": "#eb7b18",
"orangeDark": "#ff780A",
"pageBg": "#161719", "pageBg": "#161719",
"purple": "#9933cc", "purple": "#9933cc",
"queryGreen": "#74e680", "queryGreen": "#74e680",
...@@ -297,6 +298,7 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -297,6 +298,7 @@ exports[`Render should render with base threshold 1`] = `
"linkHover": "#ffffff", "linkHover": "#ffffff",
"online": "#299c46", "online": "#299c46",
"orange": "#eb7b18", "orange": "#eb7b18",
"orangeDark": "#ff780A",
"pageBg": "#161719", "pageBg": "#161719",
"purple": "#9933cc", "purple": "#9933cc",
"queryGreen": "#74e680", "queryGreen": "#74e680",
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
...@@ -20,6 +20,7 @@ $red-base: ${theme.colors.redBase}; ...@@ -20,6 +20,7 @@ $red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade}; $red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase}; $green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade}; $green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
// Grays // Grays
// ------------------------- // -------------------------
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
...@@ -20,6 +20,7 @@ $red-base: ${theme.colors.redBase}; ...@@ -20,6 +20,7 @@ $red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade}; $red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase}; $green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade}; $green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
// Grays // Grays
// ------------------------- // -------------------------
......
packages/grafana-ui/src/themes/dark.ts
...@@ -36,6 +36,7 @@ const basicColors = { ...@@ -36,6 +36,7 @@ const basicColors = {
purple: '#9933cc', purple: '#9933cc',
variable: '#32d1df', variable: '#32d1df',
orange: '#eb7b18', orange: '#eb7b18',
orangeDark: '#ff780A',
}; };
const darkTheme: GrafanaTheme = { const darkTheme: GrafanaTheme = {
......
packages/grafana-ui/src/themes/light.ts
...@@ -36,6 +36,7 @@ const basicColors = { ...@@ -36,6 +36,7 @@ const basicColors = {
purple: '#9954bb', purple: '#9954bb',
variable: '#007580', variable: '#007580',
orange: '#ff7941', orange: '#ff7941',
orangeDark: '#ed5700',
}; };
const lightTheme: GrafanaTheme = { const lightTheme: GrafanaTheme = {
......
packages/grafana-ui/src/types/theme.ts
...@@ -135,6 +135,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { ...@@ -135,6 +135,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
purple: string; purple: string;
variable: string; variable: string;
orange: string; orange: string;
orangeDark: string;
queryRed: string; queryRed: string;
queryGreen: string; queryGreen: string;
queryPurple: string; queryPurple: string;
......
public/app/features/explore/LiveTailButton.tsx
...@@ -5,14 +5,13 @@ import memoizeOne from 'memoize-one'; ...@@ -5,14 +5,13 @@ import memoizeOne from 'memoize-one';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import { GrafanaTheme, GrafanaThemeType, useTheme } from '@grafana/ui'; import { GrafanaTheme, useTheme } from '@grafana/ui';
const getStyles = memoizeOne((theme: GrafanaTheme) => { const getStyles = memoizeOne((theme: GrafanaTheme) => {
const orange = theme.type === GrafanaThemeType.Dark ? '#FF780A' : '#ED5700'; const orangeLighter = tinycolor(theme.colors.orangeDark)
const orangeLighter = tinycolor(orange)
.lighten(10) .lighten(10)
.toString(); .toString();
const pulseTextColor = tinycolor(orange) const pulseTextColor = tinycolor(theme.colors.orangeDark)
.desaturate(90) .desaturate(90)
.toString(); .toString();
...@@ -28,12 +27,12 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => { ...@@ -28,12 +27,12 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
`, `,
isLive: css` isLive: css`
label: isLive; label: isLive;
border-color: ${orange}; border-color: ${theme.colors.orangeDark};
color: ${orange}; color: ${theme.colors.orangeDark};
background: transparent; background: transparent;
&:focus { &:focus {
border-color: ${orange}; border-color: ${theme.colors.orangeDark};
color: ${orange}; color: ${theme.colors.orangeDark};
} }
&:active, &:active,
&:hover { &:hover {
...@@ -43,11 +42,11 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => { ...@@ -43,11 +42,11 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
`, `,
isPaused: css` isPaused: css`
label: isPaused; label: isPaused;
border-color: ${orange}; border-color: ${theme.colors.orangeDark};
background: transparent; background: transparent;
animation: pulse 3s ease-out 0s infinite normal forwards; animation: pulse 3s ease-out 0s infinite normal forwards;
&:focus { &:focus {
border-color: ${orange}; border-color: ${theme.colors.orangeDark};
} }
&:active, &:active,
&:hover { &:hover {
...@@ -58,7 +57,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => { ...@@ -58,7 +57,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
color: ${pulseTextColor}; color: ${pulseTextColor};
} }
50% { 50% {
color: ${orange}; color: ${theme.colors.orangeDark};
} }
100% { 100% {
color: ${pulseTextColor}; color: ${pulseTextColor};
......
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