-
-
-
- {title}
-
-
- {message && (
-
{message}
- )}
- {children}
+type Props = {
+ message?: React.ReactNode;
+ title?: string;
+};
+
+const WarningPanel: FC
= props => {
+ const classes = useStyles(props);
+ const { title, message, children } = props;
+ return (
+
+
+
+
+ {title}
+
- );
- }
-}
+ {message && (
+
{message}
+ )}
+ {children}
+
Some content
+
+
+ Some content 2
+
+
+ Some content 3
+
+
+ Some content 4
+
);
};
@@ -37,10 +55,18 @@ const linkInfo = { title: 'Go to XYZ Location', link: '#' };
export const WithFooterLink = () => {
return (
- some content 1
- some content 2
- some content 3
- some content 4
+
+ Some content
+
+
+ Some content 2
+
+
+ Some content 3
+
+
+ Some content 4
+
);
};
@@ -60,16 +86,16 @@ export const WithControlledTabValue = () => {
title="Controlled Value Example"
>
- some content 1
+ Some content
- some content 2
+ Some content 2
- some content 3
+ Some content 3
- some content 4
+ Some content 4
diff --git a/packages/storybook/.storybook/config.js b/packages/storybook/.storybook/config.js
index b083bc0e9e..b9962b5bd3 100644
--- a/packages/storybook/.storybook/config.js
+++ b/packages/storybook/.storybook/config.js
@@ -1,10 +1,10 @@
import React from 'react';
import { addDecorator } from '@storybook/react';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
import { CssBaseline, ThemeProvider } from '@material-ui/core';
addDecorator(story => (
-
+
{story()}
));
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index f086fa0d4a..530cd161ec 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -13,7 +13,7 @@ module.exports = {
webpackFinal: async config => {
config.resolve.alias = {
...config.resolve.alias,
- '@backstage/theme': path.resolve(__dirname, '../../theme/src'),
+ '@backstage/theme': path.resolve(__dirname, '../../theme'),
};
config.resolve.modules.push(path.resolve(__dirname, '../../core/src'));
config.module.rules.push(
diff --git a/packages/storybook/README.md b/packages/storybook/README.md
index 2e716a5466..66768c0fe5 100644
--- a/packages/storybook/README.md
+++ b/packages/storybook/README.md
@@ -1,3 +1,7 @@
# storybook
This package provides a storybook build for Backstage. See [storybook.backstage.io](http://storybook.backstage.io)
+
+## Why is this not part of `@backstage/core`?
+
+This separate storybook package exists because of dependency conflicts with `@backstage/cli`. It uses nohoist to avoid the conflicts, and since you can only use that in private packages it has to be separated out of `@backstage/core`.
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index f884da5f07..56ac5c6264 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,17 +1,21 @@
{
"name": "storybook",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"description": "Storybook build for core package",
"private": true,
"scripts": {
- "start": "start-storybook -p 6006",
- "build-storybook": "build-storybook --output-dir dist"
+ "start": "backstage-cli watch-deps --build -- start-storybook -p 6006",
+ "build-storybook": "backstage-cli watch-deps --build -- build-storybook --output-dir dist"
},
"workspaces": {
"nohoist": [
- "@storybook/**"
+ "@storybook/react/**",
+ "@storybook/addons/**"
]
},
+ "dependencies": {
+ "@backstage/theme": "0.1.1-alpha.4"
+ },
"devDependencies": {
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
diff --git a/packages/test-utils-core/package.json b/packages/test-utils-core/package.json
index 79d36a3525..569622ed1c 100644
--- a/packages/test-utils-core/package.json
+++ b/packages/test-utils-core/package.json
@@ -1,7 +1,7 @@
{
"name": "@backstage/test-utils-core",
"description": "Utilities to test Backstage core",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"private": false,
"publishConfig": {
"access": "public"
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index ab52ca94a1..9eca38eeb5 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -1,7 +1,7 @@
{
"name": "@backstage/test-utils",
"description": "Utilities to test Backstage plugins and apps.",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"private": false,
"publishConfig": {
"access": "public"
@@ -21,11 +21,12 @@
"scripts": {
"build": "backstage-cli plugin:build",
"lint": "backstage-cli lint",
- "test": "backstage-cli test"
+ "test": "backstage-cli test",
+ "clean": "backstage-cli clean"
},
"devDependencies": {
- "@backstage/cli": "^0.1.1-alpha.3",
- "@backstage/theme": "^0.1.1-alpha.3",
+ "@backstage/cli": "^0.1.1-alpha.4",
+ "@backstage/theme": "^0.1.1-alpha.4",
"@material-ui/core": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
@@ -38,8 +39,8 @@
"react-router-dom": "^5.1.2"
},
"peerDependencies": {
- "@backstage/theme": "^0.1.1-alpha.3",
"@backstage/test-utils-core": "^0.1.1-alpha.3",
+ "@backstage/theme": "^0.1.1-alpha.3",
"@material-ui/core": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx
index 93f92ec537..06d8781669 100644
--- a/packages/test-utils/src/testUtils/appWrappers.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.tsx
@@ -18,7 +18,7 @@ import React, { ComponentType, ReactNode, FunctionComponent } from 'react';
import { ThemeProvider } from '@material-ui/core';
import { MemoryRouter } from 'react-router';
import { Route } from 'react-router-dom';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
export function wrapInTestApp(
Component: ComponentType | ReactNode,
@@ -42,12 +42,10 @@ export function wrapInThemedTestApp(
component: ReactNode,
initialRouterEntries: string[] = ['/'],
) {
- const themed = (
- {component}
- );
+ const themed = {component};
return wrapInTestApp(themed, initialRouterEntries);
}
-export const wrapInTheme = (component: ReactNode, theme = BackstageTheme) => (
+export const wrapInTheme = (component: ReactNode, theme = lightTheme) => (
{component}
);
diff --git a/packages/theme/package.json b/packages/theme/package.json
index b08014e9d6..6504d7dea5 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
{
"name": "@backstage/theme",
"description": "material-ui theme for use with Backstage.",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"private": false,
"publishConfig": {
"access": "public"
@@ -20,10 +20,11 @@
"types": "dist/index.d.ts",
"scripts": {
"build": "backstage-cli plugin:build",
- "lint": "backstage-cli lint"
+ "lint": "backstage-cli lint",
+ "clean": "backstage-cli clean"
},
"devDependencies": {
- "@backstage/cli": "^0.1.1-alpha.3",
+ "@backstage/cli": "^0.1.1-alpha.4",
"@material-ui/core": "^4.9.1"
},
"peerDependencies": {
diff --git a/packages/theme/src/BackstageTheme.ts b/packages/theme/src/BackstageTheme.ts
deleted file mode 100644
index 4f61437400..0000000000
--- a/packages/theme/src/BackstageTheme.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createMuiTheme } from '@material-ui/core';
-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
-import { blue, yellow } from '@material-ui/core/colors';
-
-import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
-
-const COLORS = {
- PAGE_BACKGROUND: '#F8F8F8',
- DEFAULT_PAGE_THEME_COLOR: '#7C3699',
- DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
- SIDEBAR_BACKGROUND_COLOR: '#171717',
- ERROR_BACKGROUND_COLOR: '#FFEBEE',
- ERROR_TEXT_COLOR: '#CA001B',
- INFO_TEXT_COLOR: '#004e8a',
- LINK_TEXT: '#0A6EBE',
- LINK_TEXT_HOVER: '#2196F3',
- NAMED: {
- WHITE: '#FEFEFE',
- },
- STATUS: {
- OK: '#1db855',
- WARNING: '#f49b20',
- ERROR: '#CA001B',
- },
-};
-
-const extendedThemeConfig: BackstageMuiThemeOptions = {
- props: {
- MuiGrid: {
- spacing: 2,
- },
- MuiSwitch: {
- color: 'primary',
- },
- },
- palette: {
- background: {
- default: COLORS.PAGE_BACKGROUND,
- // @ts-ignore
- informational: '#60a3cb',
- },
- status: {
- ok: COLORS.STATUS.OK,
- warning: COLORS.STATUS.WARNING,
- error: COLORS.STATUS.ERROR,
- running: '#BEBEBE',
- pending: '#5BC0DE',
- background: COLORS.NAMED.WHITE,
- },
- bursts: {
- fontColor: COLORS.NAMED.WHITE,
- slackChannelText: '#ddd',
- backgroundColor: {
- default: COLORS.DEFAULT_PAGE_THEME_COLOR,
- },
- },
- // @ts-ignore
- primary: {
- main: blue[500],
- },
- border: '#E6E6E6',
- textVerySubtle: '#DDD',
- textSubtle: '#6E6E6E',
- highlight: '#FFFBCC',
- errorBackground: COLORS.ERROR_BACKGROUND_COLOR,
- warningBackground: '#F59B23',
- infoBackground: '#ebf5ff',
- errorText: COLORS.ERROR_TEXT_COLOR,
- infoText: COLORS.INFO_TEXT_COLOR,
- warningText: COLORS.NAMED.WHITE,
- linkHover: COLORS.LINK_TEXT_HOVER,
- link: COLORS.LINK_TEXT,
- gold: yellow.A700,
- sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
- },
- navigation: {
- width: 220,
- background: '#333333',
- },
- typography: {
- fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
- h5: {
- fontWeight: 700,
- },
- h4: {
- fontWeight: 700,
- fontSize: 28,
- marginBottom: 6,
- },
- h3: {
- fontSize: 32,
- fontWeight: 700,
- marginBottom: 6,
- },
- h2: {
- fontSize: 40,
- fontWeight: 700,
- marginBottom: 8,
- },
- h1: {
- fontSize: 54,
- fontWeight: 700,
- marginBottom: 10,
- },
- },
-};
-
-const createOverrides = (
- theme: BackstageMuiTheme,
-): Partial => {
- return {
- overrides: {
- MuiTableRow: {
- // Alternating row backgrounds
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
- },
- // Use pointer for hoverable rows
- hover: {
- '&:hover': {
- cursor: 'pointer',
- },
- },
- // Alternating head backgrounds
- head: {
- '&:nth-of-type(odd)': {
- backgroundColor: COLORS.NAMED.WHITE,
- },
- },
- },
- // Tables are more dense than default mui tables
- MuiTableCell: {
- root: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- verticalAlign: 'middle',
- lineHeight: '1',
- margin: 0,
- padding: '8px',
- borderBottom: 0,
- },
- head: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- color: 'rgb(179, 179, 179)',
- fontWeight: 'normal',
- lineHeight: '1',
- },
- },
- MuiTabs: {
- // Tabs are smaller than default mui tab rows
- root: {
- minHeight: 24,
- },
- },
- MuiTab: {
- // Tabs are smaller and have a hover background
- root: {
- color: theme.palette.link,
- minHeight: 24,
- textTransform: 'initial',
- '&:hover': {
- color: darken(theme.palette.link, 0.3),
- background: lighten(theme.palette.link, 0.95),
- },
- [theme.breakpoints.up('md')]: {
- minWidth: 120,
- fontSize: theme.typography.pxToRem(14),
- fontWeight: 500,
- },
- },
- textColorPrimary: {
- color: theme.palette.link,
- },
- },
- MuiTableSortLabel: {
- // No color change on hover, just rely on the arrow showing up instead.
- root: {
- color: 'inherit',
- '&:hover': {
- color: 'inherit',
- },
- '&:focus': {
- color: 'inherit',
- },
- },
- // Bold font for highlighting selected column
- active: {
- fontWeight: 'bold',
- color: 'inherit',
- },
- },
- MuiListItemText: {
- dense: {
- // Default dense list items to adding ellipsis for really long str...
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- },
- },
- MuiButton: {
- text: {
- // Text buttons have less padding by default, but we want to keep the original padding
- padding: undefined,
- },
- },
- MuiChip: {
- root: {
- // By default there's no margin, but it's usually wanted, so we add some trailing margin
- marginRight: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
- },
- MuiCardHeader: {
- root: {
- // Reduce padding between header and content
- paddingBottom: 0,
- },
- },
- MuiCardActions: {
- root: {
- // We default to putting the card actions at the end
- justifyContent: 'flex-end',
- },
- },
- },
- };
-};
-
-const extendedTheme = createMuiTheme(extendedThemeConfig) as BackstageMuiTheme;
-
-// V1 theming
-// https://material-ui-next.com/customization/themes/
-// For CSS it is advised to use JSS, see https://material-ui-next.com/customization/css-in-js/
-const BackstageTheme: BackstageMuiTheme = {
- ...extendedTheme,
- ...createOverrides(extendedTheme),
-};
-
-// Temporary workaround for files incorrectly importing the theme directly
-export const V1 = BackstageTheme;
-export default BackstageTheme;
diff --git a/packages/theme/src/BackstageThemeDark.ts b/packages/theme/src/BackstageThemeDark.ts
deleted file mode 100644
index 9952a5eeaa..0000000000
--- a/packages/theme/src/BackstageThemeDark.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createMuiTheme } from '@material-ui/core';
-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
-import { blue, yellow } from '@material-ui/core/colors';
-
-import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
-
-const COLORS = {
- PAGE_BACKGROUND: '#282828',
- DEFAULT_PAGE_THEME_COLOR: '#7C3699',
- DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
- SIDEBAR_BACKGROUND_COLOR: '#424242',
- ERROR_BACKGROUND_COLOR: '#FFEBEE',
- ERROR_TEXT_COLOR: '#CA001B',
- INFO_TEXT_COLOR: '#004e8a',
- LINK_TEXT: '#0A6EBE',
- LINK_TEXT_HOVER: '#2196F3',
- NAMED: {
- WHITE: '#FEFEFE',
- },
- STATUS: {
- OK: '#1db855',
- WARNING: '#f49b20',
- ERROR: '#CA001B',
- },
-};
-
-const extendedThemeConfig: BackstageMuiThemeOptions = {
- props: {
- MuiGrid: {
- spacing: 2,
- },
- MuiSwitch: {
- color: 'primary',
- },
- },
- palette: {
- background: {
- default: COLORS.PAGE_BACKGROUND,
- // @ts-ignore
- informational: '#60a3cb',
- },
- color: {
- default: '#fff',
- },
- type: 'dark',
- status: {
- ok: COLORS.STATUS.OK,
- warning: COLORS.STATUS.WARNING,
- error: COLORS.STATUS.ERROR,
- running: '#BEBEBE',
- pending: '#5BC0DE',
- background: COLORS.NAMED.WHITE,
- },
- bursts: {
- fontColor: COLORS.NAMED.WHITE,
- slackChannelText: '#ddd',
- backgroundColor: {
- default: COLORS.DEFAULT_PAGE_THEME_COLOR,
- },
- },
- // @ts-ignore
- primary: {
- main: blue[500],
- },
- border: '#E6E6E6',
- textVerySubtle: '#DDD',
- textSubtle: '#6E6E6E',
- highlight: '#FFFBCC',
- errorBackground: COLORS.ERROR_BACKGROUND_COLOR,
- warningBackground: '#F59B23',
- infoBackground: '#ebf5ff',
- errorText: COLORS.ERROR_TEXT_COLOR,
- infoText: COLORS.INFO_TEXT_COLOR,
- warningText: COLORS.NAMED.WHITE,
- linkHover: COLORS.LINK_TEXT_HOVER,
- link: COLORS.LINK_TEXT,
- gold: yellow.A700,
- sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
- },
- navigation: {
- width: 220,
- background: '#333333',
- },
- typography: {
- fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
- h5: {
- fontWeight: 700,
- },
- h4: {
- fontWeight: 700,
- fontSize: 28,
- marginBottom: 6,
- },
- h3: {
- fontSize: 32,
- fontWeight: 700,
- marginBottom: 6,
- },
- h2: {
- fontSize: 40,
- fontWeight: 700,
- marginBottom: 8,
- },
- h1: {
- fontSize: 54,
- fontWeight: 700,
- marginBottom: 10,
- },
- },
-};
-
-const createOverrides = (theme: BackstageMuiTheme): BackstageMuiTheme => {
- return {
- overrides: {
- // @ts-ignore
- MuiCSSBaseline: {
- '@global': {
- body: {
- backgroundColor: theme.palette.background.default,
- // @ts-ignore
- color: theme.palette.color.default,
- },
- },
- },
- MuiTableRow: {
- // Alternating row backgrounds
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
- },
- // Use pointer for hoverable rows
- hover: {
- '&:hover': {
- cursor: 'pointer',
- },
- },
- // Alternating head backgrounds
- head: {
- '&:nth-of-type(odd)': {
- backgroundColor: COLORS.NAMED.WHITE,
- },
- },
- },
- // Tables are more dense than default mui tables
- MuiTableCell: {
- root: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- verticalAlign: 'middle',
- lineHeight: '1',
- margin: 0,
- padding: '8px',
- borderBottom: 0,
- },
- head: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- color: 'rgb(179, 179, 179)',
- fontWeight: 'normal',
- lineHeight: '1',
- },
- },
- MuiTabs: {
- // Tabs are smaller than default mui tab rows
- root: {
- minHeight: 24,
- },
- },
- MuiTab: {
- // Tabs are smaller and have a hover background
- root: {
- color: theme.palette.link,
- minHeight: 24,
- textTransform: 'initial',
- '&:hover': {
- color: darken(theme.palette.link, 0.3),
- background: lighten(theme.palette.link, 0.95),
- },
- [theme.breakpoints.up('md')]: {
- minWidth: 120,
- fontSize: theme.typography.pxToRem(14),
- fontWeight: 500,
- },
- },
- textColorPrimary: {
- color: theme.palette.link,
- },
- },
- MuiTableSortLabel: {
- // No color change on hover, just rely on the arrow showing up instead.
- root: {
- color: 'inherit',
- '&:hover': {
- color: 'inherit',
- },
- '&:focus': {
- color: 'inherit',
- },
- },
- // Bold font for highlighting selected column
- active: {
- fontWeight: 'bold',
- color: 'inherit',
- },
- },
- MuiListItemText: {
- dense: {
- // Default dense list items to adding ellipsis for really long str...
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- },
- },
- MuiButton: {
- text: {
- // Text buttons have less padding by default, but we want to keep the original padding
- padding: undefined,
- },
- },
- MuiChip: {
- root: {
- // By default there's no margin, but it's usually wanted, so we add some trailing margin
- marginRight: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
- },
- MuiCardHeader: {
- root: {
- // Reduce padding between header and content
- paddingBottom: 0,
- },
- },
- MuiCardActions: {
- root: {
- // We default to putting the card actions at the end
- justifyContent: 'flex-end',
- },
- },
- },
- };
-};
-
-const extendedTheme = createMuiTheme(extendedThemeConfig) as BackstageMuiTheme;
-
-// V1 theming
-// https://material-ui-next.com/customization/themes/
-// For CSS it is advised to use JSS, see https://material-ui-next.com/customization/css-in-js/
-const BackstageThemeDark = {
- ...extendedTheme,
- ...createOverrides(extendedTheme),
-};
-
-// Temporary workaround for files incorrectly importing the theme directly
-export const V1 = BackstageThemeDark;
-
-export default BackstageThemeDark;
diff --git a/packages/theme/src/BackstageThemeLight.ts b/packages/theme/src/BackstageThemeLight.ts
deleted file mode 100644
index a0a063ad24..0000000000
--- a/packages/theme/src/BackstageThemeLight.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createMuiTheme } from '@material-ui/core';
-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
-import { blue, yellow } from '@material-ui/core/colors';
-
-import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
-
-const COLORS = {
- PAGE_BACKGROUND: '#F8F8F8',
- DEFAULT_PAGE_THEME_COLOR: '#7C3699',
- DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
- SIDEBAR_BACKGROUND_COLOR: '#171717',
- ERROR_BACKGROUND_COLOR: '#FFEBEE',
- ERROR_TEXT_COLOR: '#CA001B',
- INFO_TEXT_COLOR: '#004e8a',
- LINK_TEXT: '#0A6EBE',
- LINK_TEXT_HOVER: '#2196F3',
- NAMED: {
- WHITE: '#FEFEFE',
- },
- STATUS: {
- OK: '#1db855',
- WARNING: '#f49b20',
- ERROR: '#CA001B',
- },
-};
-
-const extendedThemeConfig: BackstageMuiThemeOptions = {
- props: {
- MuiGrid: {
- spacing: 2,
- },
- MuiSwitch: {
- color: 'primary',
- },
- },
- palette: {
- background: {
- default: COLORS.PAGE_BACKGROUND,
- // @ts-ignore
- informational: '#60a3cb',
- },
- color: {
- default: '#000',
- },
- status: {
- ok: COLORS.STATUS.OK,
- warning: COLORS.STATUS.WARNING,
- error: COLORS.STATUS.ERROR,
- running: '#BEBEBE',
- pending: '#5BC0DE',
- background: COLORS.NAMED.WHITE,
- },
- bursts: {
- fontColor: COLORS.NAMED.WHITE,
- slackChannelText: '#ddd',
- backgroundColor: {
- default: COLORS.DEFAULT_PAGE_THEME_COLOR,
- },
- },
- // @ts-ignore
- primary: {
- main: blue[500],
- },
- border: '#E6E6E6',
- textVerySubtle: '#DDD',
- textSubtle: '#6E6E6E',
- highlight: '#FFFBCC',
- errorBackground: COLORS.ERROR_BACKGROUND_COLOR,
- warningBackground: '#F59B23',
- infoBackground: '#ebf5ff',
- errorText: COLORS.ERROR_TEXT_COLOR,
- infoText: COLORS.INFO_TEXT_COLOR,
- warningText: COLORS.NAMED.WHITE,
- linkHover: COLORS.LINK_TEXT_HOVER,
- link: COLORS.LINK_TEXT,
- gold: yellow.A700,
- sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
- },
- navigation: {
- width: 220,
- background: '#333333',
- },
- typography: {
- fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
- h5: {
- fontWeight: 700,
- },
- h4: {
- fontWeight: 700,
- fontSize: 28,
- marginBottom: 6,
- },
- h3: {
- fontSize: 32,
- fontWeight: 700,
- marginBottom: 6,
- },
- h2: {
- fontSize: 40,
- fontWeight: 700,
- marginBottom: 8,
- },
- h1: {
- fontSize: 54,
- fontWeight: 700,
- marginBottom: 10,
- },
- },
-};
-
-const createOverrides = (
- theme: BackstageMuiTheme,
-): Partial => {
- return {
- overrides: {
- // @ts-ignore
- MuiCSSBaseline: {
- '@global': {
- body: {
- backgroundColor: theme.palette.background.default,
- // @ts-ignore
- color: theme.palette.color.default,
- },
- },
- },
- MuiTableRow: {
- // Alternating row backgrounds
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
- },
- // Use pointer for hoverable rows
- hover: {
- '&:hover': {
- cursor: 'pointer',
- },
- },
- // Alternating head backgrounds
- head: {
- '&:nth-of-type(odd)': {
- backgroundColor: COLORS.NAMED.WHITE,
- },
- },
- },
- // Tables are more dense than default mui tables
- MuiTableCell: {
- root: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- verticalAlign: 'middle',
- lineHeight: '1',
- margin: 0,
- padding: '8px',
- borderBottom: 0,
- },
- head: {
- wordBreak: 'break-word',
- overflow: 'hidden',
- color: 'rgb(179, 179, 179)',
- fontWeight: 'normal',
- lineHeight: '1',
- },
- },
- MuiTabs: {
- // Tabs are smaller than default mui tab rows
- root: {
- minHeight: 24,
- },
- },
- MuiTab: {
- // Tabs are smaller and have a hover background
- root: {
- color: theme.palette.link,
- minHeight: 24,
- textTransform: 'initial',
- '&:hover': {
- color: darken(theme.palette.link, 0.3),
- background: lighten(theme.palette.link, 0.95),
- },
- [theme.breakpoints.up('md')]: {
- minWidth: 120,
- fontSize: theme.typography.pxToRem(14),
- fontWeight: 500,
- },
- },
- textColorPrimary: {
- color: theme.palette.link,
- },
- },
- MuiTableSortLabel: {
- // No color change on hover, just rely on the arrow showing up instead.
- root: {
- color: 'inherit',
- '&:hover': {
- color: 'inherit',
- },
- '&:focus': {
- color: 'inherit',
- },
- },
- // Bold font for highlighting selected column
- active: {
- fontWeight: 'bold',
- color: 'inherit',
- },
- },
- MuiListItemText: {
- dense: {
- // Default dense list items to adding ellipsis for really long str...
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- },
- },
- MuiButton: {
- text: {
- // Text buttons have less padding by default, but we want to keep the original padding
- padding: undefined,
- },
- },
- MuiChip: {
- root: {
- // By default there's no margin, but it's usually wanted, so we add some trailing margin
- marginRight: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
- },
- MuiCardHeader: {
- root: {
- // Reduce padding between header and content
- paddingBottom: 0,
- },
- },
- MuiCardActions: {
- root: {
- // We default to putting the card actions at the end
- justifyContent: 'flex-end',
- },
- },
- },
- };
-};
-
-const extendedTheme = createMuiTheme(extendedThemeConfig) as BackstageMuiTheme;
-
-// V1 theming
-// https://material-ui-next.com/customization/themes/
-// For CSS it is advised to use JSS, see https://material-ui-next.com/customization/css-in-js/
-const BackstageThemeLight = {
- ...extendedTheme,
- ...createOverrides(extendedTheme),
-};
-
-// Temporary workaround for files incorrectly importing the theme directly
-export const V1 = BackstageThemeLight;
-
-export default BackstageThemeLight;
diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts
new file mode 100644
index 0000000000..da9b3299a3
--- /dev/null
+++ b/packages/theme/src/baseTheme.ts
@@ -0,0 +1,197 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createMuiTheme } from '@material-ui/core';
+import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
+import { Overrides } from '@material-ui/core/styles/overrides';
+
+import {
+ BackstageTheme,
+ BackstageThemeOptions,
+ BackstagePaletteOptions,
+} from './types';
+
+export function createThemeOptions(
+ palette: BackstagePaletteOptions,
+): BackstageThemeOptions {
+ return {
+ palette,
+ props: {
+ MuiGrid: {
+ spacing: 2,
+ },
+ MuiSwitch: {
+ color: 'primary',
+ },
+ },
+ typography: {
+ fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
+ h5: {
+ fontWeight: 700,
+ },
+ h4: {
+ fontWeight: 700,
+ fontSize: 28,
+ marginBottom: 6,
+ },
+ h3: {
+ fontSize: 32,
+ fontWeight: 700,
+ marginBottom: 6,
+ },
+ h2: {
+ fontSize: 40,
+ fontWeight: 700,
+ marginBottom: 8,
+ },
+ h1: {
+ fontSize: 54,
+ fontWeight: 700,
+ marginBottom: 10,
+ },
+ },
+ };
+}
+
+export function createThemeOverrides(theme: BackstageTheme): Overrides {
+ return {
+ MuiTableRow: {
+ // Alternating row backgrounds
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.background.default,
+ },
+ },
+ // Use pointer for hoverable rows
+ hover: {
+ '&:hover': {
+ cursor: 'pointer',
+ },
+ },
+ // Alternating head backgrounds
+ head: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.background.paper,
+ },
+ },
+ },
+ // Tables are more dense than default mui tables
+ MuiTableCell: {
+ root: {
+ wordBreak: 'break-word',
+ overflow: 'hidden',
+ verticalAlign: 'middle',
+ lineHeight: '1',
+ margin: 0,
+ padding: '8px',
+ borderBottom: 0,
+ },
+ head: {
+ wordBreak: 'break-word',
+ overflow: 'hidden',
+ color: 'rgb(179, 179, 179)',
+ fontWeight: 'normal',
+ lineHeight: '1',
+ },
+ },
+ MuiTabs: {
+ // Tabs are smaller than default mui tab rows
+ root: {
+ minHeight: 24,
+ },
+ },
+ MuiTab: {
+ // Tabs are smaller and have a hover background
+ root: {
+ color: theme.palette.link,
+ minHeight: 24,
+ textTransform: 'initial',
+ '&:hover': {
+ color: darken(theme.palette.link, 0.3),
+ background: lighten(theme.palette.link, 0.95),
+ },
+ [theme.breakpoints.up('md')]: {
+ minWidth: 120,
+ fontSize: theme.typography.pxToRem(14),
+ fontWeight: 500,
+ },
+ },
+ textColorPrimary: {
+ color: theme.palette.link,
+ },
+ },
+ MuiTableSortLabel: {
+ // No color change on hover, just rely on the arrow showing up instead.
+ root: {
+ color: 'inherit',
+ '&:hover': {
+ color: 'inherit',
+ },
+ '&:focus': {
+ color: 'inherit',
+ },
+ },
+ // Bold font for highlighting selected column
+ active: {
+ fontWeight: 'bold',
+ color: 'inherit',
+ },
+ },
+ MuiListItemText: {
+ dense: {
+ // Default dense list items to adding ellipsis for really long str...
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+ },
+ MuiButton: {
+ text: {
+ // Text buttons have less padding by default, but we want to keep the original padding
+ padding: undefined,
+ },
+ },
+ MuiChip: {
+ root: {
+ // By default there's no margin, but it's usually wanted, so we add some trailing margin
+ marginRight: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ },
+ MuiCardHeader: {
+ root: {
+ // Reduce padding between header and content
+ paddingBottom: 0,
+ },
+ },
+ MuiCardActions: {
+ root: {
+ // We default to putting the card actions at the end
+ justifyContent: 'flex-end',
+ },
+ },
+ };
+}
+
+// Creates a Backstage MUI theme using a palette.
+// The theme is created with the common Backstage options and component styles.
+export function createTheme(palette: BackstagePaletteOptions): BackstageTheme {
+ const themeOptions = createThemeOptions(palette);
+ const baseTheme = createMuiTheme(themeOptions) as BackstageTheme;
+ const overrides = createThemeOverrides(baseTheme);
+ const theme = { ...baseTheme, overrides };
+ return theme;
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 8aa7e30ef5..862f9b7755 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export { default as BackstageThemeLight } from './BackstageThemeLight';
-export { default as BackstageThemeDark } from './BackstageThemeDark';
-export { default as BackstageTheme } from './BackstageTheme';
+
+export * from './themes';
+export * from './baseTheme';
+export * from './types';
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
new file mode 100644
index 0000000000..eb36a37bf5
--- /dev/null
+++ b/packages/theme/src/themes.ts
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTheme } from 'baseTheme';
+import { blue, yellow } from '@material-ui/core/colors';
+
+export const lightTheme = createTheme({
+ type: 'light',
+ background: {
+ default: '#F8F8F8',
+ },
+ status: {
+ ok: '#1db855',
+ warning: '#f49b20',
+ error: '#CA001B',
+ running: '#BEBEBE',
+ pending: '#5BC0DE',
+ background: '#FEFEFE',
+ },
+ bursts: {
+ fontColor: '#FEFEFE',
+ slackChannelText: '#ddd',
+ backgroundColor: {
+ default: '#7C3699',
+ },
+ },
+ primary: {
+ main: blue[500],
+ },
+ border: '#E6E6E6',
+ textVerySubtle: '#DDD',
+ textSubtle: '#6E6E6E',
+ highlight: '#FFFBCC',
+ errorBackground: '#FFEBEE',
+ warningBackground: '#F59B23',
+ infoBackground: '#ebf5ff',
+ errorText: '#CA001B',
+ infoText: '#004e8a',
+ warningText: '#FEFEFE',
+ linkHover: '#2196F3',
+ link: '#0A6EBE',
+ gold: yellow.A700,
+ sidebar: '#171717',
+});
+
+export const darkTheme = createTheme({
+ type: 'dark',
+ background: {
+ default: '#282828',
+ },
+ status: {
+ ok: '#1db855',
+ warning: '#f49b20',
+ error: '#CA001B',
+ running: '#BEBEBE',
+ pending: '#5BC0DE',
+ background: '#FEFEFE',
+ },
+ bursts: {
+ fontColor: '#FEFEFE',
+ slackChannelText: '#ddd',
+ backgroundColor: {
+ default: '#7C3699',
+ },
+ },
+ primary: {
+ main: blue[500],
+ },
+ border: '#E6E6E6',
+ textVerySubtle: '#DDD',
+ textSubtle: '#6E6E6E',
+ highlight: '#FFFBCC',
+ errorBackground: '#FFEBEE',
+ warningBackground: '#F59B23',
+ infoBackground: '#ebf5ff',
+ errorText: '#CA001B',
+ infoText: '#004e8a',
+ warningText: '#FEFEFE',
+ linkHover: '#2196F3',
+ link: '#0A6EBE',
+ gold: yellow.A700,
+ sidebar: '#424242',
+});
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index cbd3de4efa..f0e43c54d1 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -15,8 +15,12 @@
*/
import { Theme, ThemeOptions } from '@material-ui/core';
+import {
+ PaletteOptions,
+ Palette,
+} from '@material-ui/core/styles/createPalette';
-export type BackstageMuiPalette = Theme['palette'] & {
+type PaletteAdditions = {
status: {
ok: string;
warning: string;
@@ -48,10 +52,13 @@ export type BackstageMuiPalette = Theme['palette'] & {
};
};
-export interface BackstageMuiTheme extends Theme {
- palette: BackstageMuiPalette;
+export type BackstagePalette = Palette & PaletteAdditions;
+export type BackstagePaletteOptions = PaletteOptions & PaletteAdditions;
+
+export interface BackstageTheme extends Theme {
+ palette: BackstagePalette;
}
-export interface BackstageMuiThemeOptions extends ThemeOptions {
- palette: Partial;
+export interface BackstageThemeOptions extends ThemeOptions {
+ palette: BackstagePaletteOptions;
}
diff --git a/plugins/home-page/package.json b/plugins/home-page/package.json
index 7f78f1bf63..65fb3cf9da 100644
--- a/plugins/home-page/package.json
+++ b/plugins/home-page/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-home-page",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"main": "dist/index.cjs.js",
"types": "dist/index.d.ts",
"license": "Apache-2.0",
@@ -8,12 +8,13 @@
"scripts": {
"build": "backstage-cli plugin:build",
"lint": "backstage-cli lint",
- "test": "backstage-cli test"
+ "test": "backstage-cli test",
+ "clean": "backstage-cli clean"
},
"devDependencies": {
- "@backstage/cli": "^0.1.1-alpha.3",
- "@backstage/core": "^0.1.1-alpha.3",
- "@backstage/theme": "^0.1.1-alpha.3",
+ "@backstage/cli": "^0.1.1-alpha.4",
+ "@backstage/core": "^0.1.1-alpha.4",
+ "@backstage/theme": "^0.1.1-alpha.4",
"@material-ui/core": "^4.9.1",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
diff --git a/plugins/home-page/src/components/HomePage/HomePage.test.tsx b/plugins/home-page/src/components/HomePage/HomePage.test.tsx
index 713f0afe1e..e7df794a00 100644
--- a/plugins/home-page/src/components/HomePage/HomePage.test.tsx
+++ b/plugins/home-page/src/components/HomePage/HomePage.test.tsx
@@ -18,12 +18,12 @@ import React from 'react';
import { render } from '@testing-library/react';
import HomePage from './HomePage';
import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
describe('HomePage', () => {
it('should render', () => {
const rendered = render(
-
+
,
);
diff --git a/plugins/lighthouse/package.json b/plugins/lighthouse/package.json
index 721f20f802..d082b0be0f 100644
--- a/plugins/lighthouse/package.json
+++ b/plugins/lighthouse/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-lighthouse",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"main": "dist/index.cjs.js",
"types": "dist/index.d.ts",
"license": "Apache-2.0",
@@ -9,17 +9,17 @@
"build:watch": "backstage-cli plugin:build --watch",
"build": "backstage-cli plugin:build",
"lint": "backstage-cli lint",
- "test": "backstage-cli test"
+ "test": "backstage-cli test",
+ "clean": "backstage-cli clean"
},
"dependencies": {
- "react-markdown": "^4.3.1",
- "react-sparklines": "^1.7.0"
+ "react-markdown": "^4.3.1"
},
"devDependencies": {
- "@backstage/cli": "^0.1.1-alpha.3",
- "@backstage/core": "^0.1.1-alpha.3",
- "@backstage/test-utils": "^0.1.1-alpha.3",
- "@backstage/theme": "^0.1.1-alpha.3",
+ "@backstage/cli": "^0.1.1-alpha.4",
+ "@backstage/core": "^0.1.1-alpha.4",
+ "@backstage/test-utils": "^0.1.1-alpha.4",
+ "@backstage/theme": "^0.1.1-alpha.4",
"@material-ui/core": "^4.9.1",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
@@ -28,7 +28,6 @@
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
- "@types/react-sparklines": "^1.7.0",
"@types/testing-library__jest-dom": "5.0.2",
"jest-fetch-mock": "^3.0.3",
"react": "^16.13.1",
diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
index 52f3eeb5e2..ba0e79f066 100644
--- a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
+++ b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx
@@ -24,6 +24,7 @@ import {
TableRow,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
+import { TrendLine } from '@backstage/core';
import {
Audit,
@@ -32,7 +33,6 @@ import {
Website,
} from '../../api';
import { formatTime } from '../../utils';
-import CategoryTrendline from '../CategoryTrendline';
import AuditStatusIcon from '../AuditStatusIcon';
export const CATEGORIES: LighthouseCategoryId[] = [
@@ -132,7 +132,7 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
key={`${website.url}|${category}`}
className={classes.sparklinesCell}
>
-
diff --git a/plugins/welcome/package.json b/plugins/welcome/package.json
index 3ee95e8898..86cb0e3f45 100644
--- a/plugins/welcome/package.json
+++ b/plugins/welcome/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-welcome",
- "version": "0.1.1-alpha.3",
+ "version": "0.1.1-alpha.4",
"main": "dist/index.cjs.js",
"types": "dist/index.d.ts",
"private": true,
@@ -8,12 +8,13 @@
"scripts": {
"build": "backstage-cli plugin:build",
"lint": "backstage-cli lint",
- "test": "backstage-cli test"
+ "test": "backstage-cli test",
+ "clean": "backstage-cli clean"
},
"devDependencies": {
- "@backstage/cli": "^0.1.1-alpha.3",
- "@backstage/core": "^0.1.1-alpha.3",
- "@backstage/theme": "^0.1.1-alpha.3",
+ "@backstage/cli": "^0.1.1-alpha.4",
+ "@backstage/core": "^0.1.1-alpha.4",
+ "@backstage/theme": "^0.1.1-alpha.4",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx
index 9b78726f0a..9cba76fddc 100644
--- a/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx
+++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx
@@ -18,7 +18,7 @@ import React from 'react';
import { render } from '@testing-library/react';
import WelcomePage from './WelcomePage';
import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
describe('WelcomePage', () => {
@@ -28,7 +28,7 @@ describe('WelcomePage', () => {
-
+
,
+ 