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