IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI: Add orangeDark color to theme (#19407)

Browse Source
This commit is contained in:
Ivana Huckova 2019-09-25 18:09:08 +02:00 committed by GitHub
parent 2aaaa98eee
commit ff834afdc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

@ -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`] = `
"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",

1
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -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
// ------------------------- // -------------------------

1
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -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
// ------------------------- // -------------------------

1
packages/grafana-ui/src/themes/dark.ts
View File

@ -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 = {

1
packages/grafana-ui/src/themes/light.ts
View File

@ -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 = {

1
packages/grafana-ui/src/types/theme.ts
View File

@ -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;

21
public/app/features/explore/LiveTailButton.tsx
View File

@ -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) => {
`, `,
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) => {
`, `,
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) => {
color: ${pulseTextColor}; color: ${pulseTextColor};
} }
50% { 50% {
color: ${orange}; color: ${theme.colors.orangeDark};
} }
100% { 100% {
color: ${pulseTextColor}; color: ${pulseTextColor};