UI: Add orangeDark color to theme (#19407)

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

@@ -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",

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

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

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

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

packages/grafana-ui/src/themes/dark.ts

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

packages/grafana-ui/src/themes/light.ts

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

packages/grafana-ui/src/types/theme.ts

@@ -135,6 +135,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     purple: string;
     variable: string;
     orange: string;
+    orangeDark: string;
     queryRed: string;
     queryGreen: string;
     queryPurple: string;

public/app/features/explore/LiveTailButton.tsx

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