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",
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780A",
"pageBg": "#161719",
"purple": "#9933cc",
"queryGreen": "#74e680",
@ -297,6 +298,7 @@ exports[`Render should render with base threshold 1`] = `
"linkHover": "#ffffff",
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780A",
"pageBg": "#161719",
"purple": "#9933cc",
"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};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
// 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};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
// Grays
// -------------------------

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

@ -36,6 +36,7 @@ const basicColors = {
purple: '#9933cc',
variable: '#32d1df',
orange: '#eb7b18',
orangeDark: '#ff780A',
};
const darkTheme: GrafanaTheme = {

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

@ -36,6 +36,7 @@ const basicColors = {
purple: '#9954bb',
variable: '#007580',
orange: '#ff7941',
orangeDark: '#ed5700',
};
const lightTheme: GrafanaTheme = {

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

@ -135,6 +135,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
purple: string;
variable: string;
orange: string;
orangeDark: string;
queryRed: string;
queryGreen: 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 { CSSTransition } from 'react-transition-group';
import { GrafanaTheme, GrafanaThemeType, useTheme } from '@grafana/ui';
import { GrafanaTheme, useTheme } from '@grafana/ui';
const getStyles = memoizeOne((theme: GrafanaTheme) => {
const orange = theme.type === GrafanaThemeType.Dark ? '#FF780A' : '#ED5700';
const orangeLighter = tinycolor(orange)
const orangeLighter = tinycolor(theme.colors.orangeDark)
.lighten(10)
.toString();
const pulseTextColor = tinycolor(orange)
const pulseTextColor = tinycolor(theme.colors.orangeDark)
.desaturate(90)
.toString();
@ -28,12 +27,12 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
`,
isLive: css`
label: isLive;
border-color: ${orange};
color: ${orange};
border-color: ${theme.colors.orangeDark};
color: ${theme.colors.orangeDark};
background: transparent;
&:focus {
border-color: ${orange};
color: ${orange};
border-color: ${theme.colors.orangeDark};
color: ${theme.colors.orangeDark};
}
&:active,
&:hover {
@ -43,11 +42,11 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
`,
isPaused: css`
label: isPaused;
border-color: ${orange};
border-color: ${theme.colors.orangeDark};
background: transparent;
animation: pulse 3s ease-out 0s infinite normal forwards;
&:focus {
border-color: ${orange};
border-color: ${theme.colors.orangeDark};
}
&:active,
&:hover {
@ -58,7 +57,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
color: ${pulseTextColor};
}
50% {
color: ${orange};
color: ${theme.colors.orangeDark};
}
100% {
color: ${pulseTextColor};