backstage/theme: make colors private, access through theme instead

packages/core/src/components/CircleProgress.test.js

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { COLORS } from '@backstage/theme';
 import { wrapInThemedTestApp } from '@backstage/test-utils';
 import CircleProgress, { getProgressColor } from './CircleProgress';
 
@@ -52,17 +51,22 @@ describe('<CircleProgress />', () => {
     getByText('10m');
   });
 
+  const ok = '#111';
+  const warning = '#222';
+  const error = '#333';
+  const palette = { status: { ok, warning, error } };
+
   it('colors the progress correctly', () => {
-    expect(getProgressColor()).toBe('#ddd');
-    expect(getProgressColor(10)).toBe(COLORS.STATUS.ERROR);
-    expect(getProgressColor(50)).toBe(COLORS.STATUS.WARNING);
-    expect(getProgressColor(90)).toBe(COLORS.STATUS.OK);
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10)).toBe(error);
+    expect(getProgressColor(palette, 50)).toBe(warning);
+    expect(getProgressColor(palette, 90)).toBe(ok);
   });
 
   it('colors the inverse progress correctly', () => {
-    expect(getProgressColor()).toBe('#ddd');
-    expect(getProgressColor(10, true)).toBe(COLORS.STATUS.OK);
-    expect(getProgressColor(50, true)).toBe(COLORS.STATUS.WARNING);
-    expect(getProgressColor(90, true)).toBe(COLORS.STATUS.ERROR);
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10, true)).toBe(ok);
+    expect(getProgressColor(palette, 50, true)).toBe(warning);
+    expect(getProgressColor(palette, 90, true)).toBe(error);
   });
 });

packages/core/src/components/CircleProgress.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
-import { BackstageTheme, COLORS } from '@backstage/theme';
+import { makeStyles, useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import { Circle } from 'rc-progress';
 import React, { FC } from 'react';
 
@@ -55,7 +55,7 @@ const defaultProps = {
   max: 100,
 };
 
-export function getProgressColor(value, inverse, max) {
+export function getProgressColor(palette, value, inverse, max) {
   if (isNaN(value)) {
     return '#ddd';
   }
@@ -64,16 +64,17 @@ export function getProgressColor(value, inverse, max) {
   const actualValue = inverse ? actualMax - value : value;
 
   if (actualValue < actualMax / 3) {
-    return COLORS.STATUS.ERROR;
+    return palette.status.error;
   } else if (actualValue < actualMax * (2 / 3)) {
-    return COLORS.STATUS.WARNING;
+    return palette.status.warning;
   }
 
-  return COLORS.STATUS.OK;
+  return palette.status.ok;
 }
 
 const CircleProgress: FC<Props> = props => {
   const classes = useStyles(props);
+  const theme = useTheme();
   const { value, fractional, inverse, unit, max } = {
     ...defaultProps,
     ...props,
@@ -89,7 +90,7 @@ const CircleProgress: FC<Props> = props => {
         percent={asPercentage}
         strokeWidth={12}
         trailWidth={12}
-        strokeColor={getProgressColor(asActual, inverse, max)}
+        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
         className={classes.circle}
       />
       <div className={classes.overlay}>

packages/theme/src/BackstageTheme.ts

@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',

packages/theme/src/BackstageThemeDark.ts

@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#282828',
   EFAULT_PAGE_THEME_COLOR: '#232323',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',

packages/theme/src/BackstageThemeLight.ts

@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',

packages/theme/src/index.ts

@@ -15,4 +15,4 @@
  */
 export { default as BackstageThemeLight } from './BackstageThemeLight';
 export { default as BackstageThemeDark } from './BackstageThemeDark';
-export { default as BackstageTheme, COLORS } from './BackstageTheme';
+export { default as BackstageTheme } from './BackstageTheme';

plugins/lighthouse/src/components/CategoryTrendline/index.tsx

@@ -15,22 +15,28 @@
  */
 import React, { FC } from 'react';
 import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
-import { COLORS } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 
-function color(data: number[]): string | undefined {
+function color(
+  data: number[],
+  theme: typeof BackstageTheme,
+): string | undefined {
   const lastNum = data[data.length - 1];
   if (!lastNum) return undefined;
-  if (lastNum >= 0.9) return COLORS.STATUS.OK;
-  if (lastNum >= 0.5) return COLORS.STATUS.WARNING;
-  return COLORS.STATUS.ERROR;
+  if (lastNum >= 0.9) return theme.palette.status.ok;
+  if (lastNum >= 0.5) return theme.palette.status.warning;
+  return theme.palette.status.error;
 }
 
 const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
+  const theme = useTheme<typeof BackstageTheme>();
+
   if (!props.data) return null;
   return (
     <Sparklines width={120} height={30} min={0} max={1} {...props}>
       {props.title && <title>{props.title}</title>}
-      <SparklinesLine color={color(props.data)} />
+      <SparklinesLine color={color(props.data, theme)} />
     </Sparklines>
   );
 };