diff --git a/packages/app/package.json b/packages/app/package.json index a7d6158..4d958c4 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -44,6 +44,7 @@ "@backstage/plugin-user-settings": "^0.8.5", "@backstage/theme": "^0.5.3", "@bcgov/bc-sans": "^2.0.0", + "@bcgov/design-tokens": "^3.0.0", "@internal/plugin-analytics-module-snowplow": "^0.1.0", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index ced98ff..4ccc5fd 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -215,7 +215,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { */} - diff --git a/packages/app/src/components/home/HomeHeaderText.tsx b/packages/app/src/components/home/HomeHeaderText.tsx new file mode 100644 index 0000000..4457eb1 --- /dev/null +++ b/packages/app/src/components/home/HomeHeaderText.tsx @@ -0,0 +1,32 @@ +import {Typography, withStyles} from "@material-ui/core"; +import * as tokens from "@bcgov/design-tokens/js"; + +export const BCGovBannerText = withStyles({ + root: { + position: 'relative', + '&::before': { + content: `''`, + position: 'absolute', + top: '-6px', + left: '-25px', + width: '4px', + height: '64px', + background: tokens.themePrimaryGold + }, + } +})(Typography); + +export const BCGovHeaderText = withStyles({ + root: { + position: 'relative', + '&::before': { + content: `''`, + position: 'absolute', + top: '-10px', + left: '0', + width: '36px', + height: '4px', + background: tokens.themePrimaryGold + }, + } +})(Typography); \ No newline at end of file diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index e3aeba5..ebaa043 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -1,108 +1,50 @@ import React from 'react'; import {createGlobalStyle} from 'styled-components'; -import {useTheme} from '@material-ui/styles'; -import {Content, ItemCardGrid, ItemCardHeader, LinkButton, Page} from '@backstage/core-components'; -import {Theme} from '@material-ui/core/styles'; +import {Content, Page} from '@backstage/core-components'; import {HomePageSearchBar} from "@backstage/plugin-search"; -import {Card, CardActions, CardContent, CardMedia, makeStyles, Typography, Box, Grid} from "@material-ui/core"; -import {GitHubSvgIcon, RocketChatIcon, StackOverFlowIcon} from "../utils/icons"; -import LockIcon from '@material-ui/icons/Lock'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import {makeStyles, Typography} from "@material-ui/core"; import { Link } from 'react-router-dom'; +import { BCGovBannerText, BCGovHeaderText } from './HomeHeaderText'; +import { HomePageCards } from './HomePageCards'; +import * as tokens from "@bcgov/design-tokens/js"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ searchBar: { display: 'flex', width: '65%', - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], - padding: '8px 0', + boxShadow: tokens.surfaceShadowSmall, + padding: `${tokens.layoutPaddingSmall} 0`, borderRadius: '50px', - margin: 'auto', - border: '1px solid #606060', + margin: `${tokens.layoutMarginXlarge} auto`, + border: `${tokens.layoutBorderWidthSmall} solid ${tokens.themeGray80}`, + '@media (max-width: 700px)': { + width: '90%', + } }, searchBarOutline: { borderStyle: 'none', }, - cardGrid: { - gridTemplateColumns: 'repeat(auto-fill)', - gridGap: theme.spacing(3), - }, - card: { - color: theme.palette.primary.main, - display: 'flex', - flex: 1, - justiyContent:'space-between', - flexDirection:'column', - borderRadius: '1rem', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px', - }, - cardDocsHeader: { - color: theme.palette.primary.main, - backgroundColor: theme.palette.background.paper, - backgroundImage: 'none', - paddingBottom: theme.spacing(1), - }, - cardEventHeader: { - color: 'white', - backgroundColor: theme.palette.primary.main, - backgroundImage: `linear-gradient(to bottom right, ${theme.palette.primary.main} 30%, rgba(0, 0, 0, .3))` - - }, - cardToolHeader: { - color: theme.palette.primary.main, - backgroundColor: theme.palette.background.paper, - backgroundImage: `linear-gradient(to bottom right, ${theme.palette.background.paper} 30%, rgba(0, 0, 0, .11))` - }, - cardActions: { - justifyContent: 'flex-start', - paddingLeft: '1rem' - }, - defaultButton: { - marginTop: 'auto', - width: 'fit-content', - borderColor: 'currentcolor', - borderBottom: '2px solid rgba(0, 0, 0, .2)', - borderRadius: '0', - color: theme.palette.primary.main, - padding: 'calc(0.667em + 4px) 4px calc(0.33em + 4px)', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px', - }, root: { - padding: 'calc(2.1rem - 24px) 9%', + padding: `calc(2.1rem - ${tokens.layoutPaddingLarge}) 9% ${tokens.layoutPaddingNone}`, }, - cardRecon: { - color: 'white', - backgroundColor: theme.palette.primary.main, - display:'flex', - justiyContent:'space-between', - flexDirection:'column', - borderRadius: '0', - paddingRight: '9%', - paddingLeft: '9%', + feedback: { + padding: `${tokens.layoutMarginXxxlarge} 9%`, }, - ReconButton: { - marginTop: 'auto', - width: 'fit-content', - borderColor: 'currentcolor', - borderBottom: '2px solid rgba(0, 0, 0, .2)', - borderRadius: '0', - color: 'white', - padding: 'calc(0.667em + 4px) 4px calc(0.33em + 4px)', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .14) 0 10px 10px -5px', + cardRecon: { + color: tokens.typographyColorPrimaryInvert, + backgroundColor: tokens.themeGray100, + padding: `${tokens.layoutPaddingXlarge} 9%`, }, footer: { width: 'auto', - marginLeft: '-24px', - marginRight: '-24px', - borderTop: '4px solid #FCBA19', - borderBottom: '4px solid #FCBA19', + marginLeft: `-${tokens.layoutMarginLarge}`, + marginRight: `-${tokens.layoutMarginLarge}`, + marginBottom: tokens.layoutMarginXxxlarge, + borderTop: `${tokens.layoutBorderWidthLarge} solid ${tokens.themePrimaryGold}`, + borderBottom: `${tokens.layoutBorderWidthLarge} solid ${tokens.themePrimaryGold}`, } -})); -makeStyles(theme => ({ - container: { - margin: theme.spacing(5, 0), - }, +}); +makeStyles({ svg: { width: 'auto', height: 100, @@ -110,273 +52,61 @@ makeStyles(theme => ({ path: { fill: '#7df3e1', }, -})); +}); const GlobalStyle = createGlobalStyle` a { text-decoration: none; + color: ${tokens.typographyColorLink}; } a:hover { text-decoration: underline; }`; - const HomePage = () => { const classes = useStyles(); - const theme: Theme = useTheme(); - - const tools = [ - { - key: 't1', - url: 'https://stackoverflow.developer.gov.bc.ca', - label: 'Stack Overflow', - icon: , - buttonText: ['Ask a question', ], - desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' - }, - { - key: 't2', - url: 'https://chat.developer.gov.bc.ca', - label: 'RocketChat', - icon: , - buttonText: 'Message teams', - desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' - }, - { - key: 't3', - url: 'https://github.com/bcgov', - label: 'GitHub', - icon: , - buttonText: 'Find code', - desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' - } - ] return (
- - - - B.C. government DevHub - - - - - - - The B.C. government DevHub is a place to access common technical documentation, community knowledge bases, code samples and APIs. - - - - - - - - - - - Documentation library - - - View all docs - - - + B.C. government DevHub + + The B.C. government DevHub is a place to access common technical documentation, community knowledge bases, code samples and APIs. + - - - - - Application development guide} - /> - - - Everything you need to know to build a quality, consistent and compliant application. - - - Build a quality application - - - - - - - Mobile development guide} - /> - - - Detailed guidance on the steps and practices you must follow when developing a mobile application. - - - Review the mobile guide - - - - - - - Private cloud technical docs} - /> - - - Learn how to build, deploy, maintain, and retire applications on OpenShift. - - - Explore the Private cloud docs - - - - - - - Public cloud technical docs} - /> - - - Learn about building and deploying applications through B.C. government AWS landing zone. - - Explore the Public cloud docs - - - - - + +
- - - Events - - - - - - - - -

- This four-session technical training covers the DevOps platform and application operational tasks. -

-
What: The OpenShift 101 course -
Where: Online -
When: Recurring monthly - - - - Register for OpenShift 101 - - - - - - - - -

- This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. -

-
What: The OpenShift 201 course -
Where: Online -
When: Recurring every other month - - - - Register for OpenShift 201 - - - - + - - - Get support from the developer community - - - We're all here to help! Connect with other developers across the B.C. government, ask questions and improve your knowledge. - - - - {tools.map(t => ( - - - - {t.icon}  {t.label} - } - classes={{ root: classes.cardToolHeader }} - /> - - - {t.desc} - - - {t.buttonText} - - - ))} - +
+ + Provide feedback + + + The B.C. government DevHub is managed by the Developer Experience team. Join us as we work together to create impactful solutions by providing feedback or participating in user research. + +
- - - - Provide feedback - - - - The B.C. government DevHub is managed by the Developer Experience team. Join us as we work together to create impactful solutions by providing feedback or participating in user research. +
+
+ + The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. + We acknowledge the rights, interests, priorities and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws and governments. - +
- - - - - The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. - We acknowledge the rights, interests, priorities and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws and governments. - - - - Learn more about the Calls to Action - - - + - ) - ; + ); }; export default HomePage; diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx new file mode 100644 index 0000000..a153de4 --- /dev/null +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -0,0 +1,281 @@ +import React, { PropsWithChildren } from 'react'; +import {ItemCardGrid, ItemCardHeader, LinkProps} from '@backstage/core-components'; +import {Card, CardActions, CardContent, CardMedia, makeStyles, Typography, Box, Grid, withStyles, Button} from "@material-ui/core"; +import {GitHubSvgIcon, RocketChatIcon, StackOverFlowIcon} from "../utils/icons"; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { Link } from 'react-router-dom'; +import DocsIcon from '@material-ui/icons/Description'; +import EventIcon from '@material-ui/icons/Event'; +import { BCGovHeaderText } from './HomeHeaderText'; +import * as tokens from "@bcgov/design-tokens/js"; + +const CardTitleIcon = withStyles({ + root: { + display: 'flex', + alignItems: 'flex-start', + gap: tokens.layoutMarginSmall, + '& .icon': { + paddingTop: tokens.layoutPaddingXsmall, + } + }, +})(Box); + +interface CardTitleProps { + icon: React.ReactNode, + linkProps: LinkProps, +}; + +const CardTitle = ({children, icon, ...props}: PropsWithChildren) => { + return ( + +
{icon}
+ + {children} + + + ); +}; + +const CardLinkButton = withStyles({ + root: { + paddingLeft: tokens.layoutPaddingNone, + paddingRight: tokens.layoutPaddingNone, + '& .link-text': { + color: tokens.typographyColorLink, + transition: 'transform .25s ease', + }, + '& .icon': { + fill: tokens.typographyColorLink, + marginLeft: tokens.layoutMarginXsmall, + transition: 'transform .25s ease', + }, + '&:hover': { + background: 'none', + '& .link-text': { + textDecoration: 'none', + color: tokens.themeBlue80, + }, + '& .icon': { + transform: 'translateX(6px)', + fill: tokens.themeBlue80, + }, + }, + }, +})(Button); + +const CardButton = ({children, ...props}: PropsWithChildren) => { + return ( + + {children} + + + ); +}; + +const useStyles = makeStyles((theme) => ({ + cardGroup: { + paddingTop: tokens.layoutMarginXxxlarge, + }, + cardGrid: { + gridTemplateColumns: 'repeat(auto-fit)', + gridGap: tokens.layoutMarginXlarge, + }, + card: { + display: 'flex', + flex: 1, + justifyContent:'space-between', + flexDirection:'column', + '&:hover': { + background: (theme.palette.type === 'dark')? tokens.themeGray80 : tokens.surfaceColorMenusHover, + } + }, + cardHeader: { + backgroundImage: 'none', + paddingBottom: tokens.layoutPaddingNone, + }, + background: { + padding: `0px calc(9% + ${tokens.layoutPaddingLarge}) ${tokens.layoutMarginXxxlarge}`, + marginLeft: `-${tokens.layoutMarginLarge}`, + marginRight: `-${tokens.layoutMarginLarge}`, + background: (theme.palette.type === 'dark')? tokens.themeGray90: tokens.surfaceColorBackgroundLightGray, + } +})); + +export const HomePageCards = () => { + const classes = useStyles(); + + const docs = [ + { + key: 'd1', + url: 'docs/default/component/bcdg', + label: 'Application development guide', + icon: , + buttonText: 'Build a quality application', + desc: 'Everything you need to know to build a quality, consistent and compliant application.' + }, + { + key: 'd2', + url: 'docs/default/component/mobile-developer-guide', + label: 'Mobile development guide', + icon: , + buttonText: 'Review the mobile guide', + desc: 'Detailed guidance on the steps and practices you must follow when developing a mobile application.' + }, + { + key: 'd3', + url: 'docs/default/component/platform-developer-docs', + label: 'Private cloud technical docs', + icon: , + buttonText: 'Explore the Private cloud docs', + desc: 'Learn how to build, deploy, maintain, and retire applications on OpenShift.' + }, + { + key: 'd4', + url: 'docs/default/component/public-cloud-techdocs', + label: 'Public cloud technical docs', + icon: , + buttonText: 'Explore the Public cloud docs', + desc: 'Learn about building and deploying applications through B.C. government AWS landing zone.' + } + ] + + const events = [ + { + key: 'e1', + url: 'https://openshift101.eventbrite.com/', + label: 'OpenShift 101', + icon: , + buttonText: 'Register for OpenShift 101', + desc: <> + This four-session technical training covers the DevOps platform and application operational tasks. + What: The OpenShift 101 course + Where: Online + When: Recurring monthly + + }, + { + key: 'e2', + url: 'https://openshift201.eventbrite.com/', + label: 'OpenShift 201', + icon: , + buttonText: 'Register for OpenShift 201', + desc: <> + This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. + What: The OpenShift 201 course + Where: Online + When: Recurring every other month + + }, + ] + + const tools = [ + { + key: 't1', + url: 'https://stackoverflow.developer.gov.bc.ca', + label: 'Stack Overflow', + icon: , + buttonText: 'Ask a question', + desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' + }, + { + key: 't2', + url: 'https://chat.developer.gov.bc.ca', + label: 'RocketChat', + icon: , + buttonText: 'Message teams', + desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' + }, + { + key: 't3', + url: 'https://github.com/bcgov', + label: 'GitHub', + icon: , + buttonText: 'Find code', + desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' + } + ] + + return ( +
+
+ + + Documentation library + + View all docs + + + + {docs.map(d => ( + + + + {d.label}} + /> + + + {d.desc} + + + {d.buttonText} + + + + ))} + +
+ +
+ + Events + + + + {events.map(e => ( + + + {e.label}} + /> + + + {e.desc} + + + {e.buttonText} + + + ))} + +
+ +
+ + Get support from the developer community + + + We're all here to help! Connect with other developers across the B.C. government, ask questions and improve your knowledge. + + + + {tools.map(t => ( + + + {t.label}} + /> + + + {t.desc} + + + {t.buttonText} + + + ))} + +
+
+ ); +} \ No newline at end of file diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index f861ddc..b884cd6 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -6,6 +6,8 @@ import { lightTheme, pageTheme as defaultPageThemes, PageTheme, + genPageTheme, + shapes, } from '@backstage/theme'; import { alpha } from '@material-ui/core/styles'; @@ -13,6 +15,7 @@ import { AutocompleteClassKey } from '@material-ui/lab/Autocomplete'; import { AlertClassKey } from '@material-ui/lab/Alert'; import { OutlinedInputClassKey } from '@material-ui/core'; import '@bcgov/bc-sans/css/BCSans.css'; +import * as tokens from "@bcgov/design-tokens/js"; // Labs types not included in overrides; https://github.com/mui/material-ui/issues/19427 declare module '@material-ui/core/styles/overrides' { @@ -23,77 +26,82 @@ declare module '@material-ui/core/styles/overrides' { } } -const pageThemesFontColorOverride: Record = {}; -Object.keys(defaultPageThemes).map(key => { - pageThemesFontColorOverride[key] = { - ...defaultPageThemes[key], - fontColor: '#0E3468', - }; -}); - const baseTheme = createTheme({ palette: { ...lightTheme.palette, primary: { - main: '#0E3468', - light: '#4C9AFF', - dark: '#0E3468', + main: tokens.themePrimaryBlue, + light: tokens.themeBlue60, // this is a graph node color for catalog components + dark: tokens.themePrimaryBlue, }, secondary: { - main: '#FF5630', - light: '#FFAB00', - dark: '#6554C0', + main: tokens.themePrimaryGold, + light: tokens.themePrimaryGold, // this is a graph node color for catalog components + dark: tokens.surfaceColorBorderActive, }, grey: { - 50: '#C1C7D0', - 100: '#7A869A', - 200: '#6B778C', - 300: '#5E6C84', - 400: '#505F79', - 500: '#42526E', - 600: '#344563', - 700: '#253858', - 800: '#0E3468', - 900: '#091E42', + 50: tokens.themeGray10, + 100: tokens.themeGray20, + 200: tokens.themeGray30, + 300: tokens.themeGray40, + 400: tokens.themeGray50, + 500: tokens.themeGray60, + 600: tokens.themeGray70, + 700: tokens.themeGray80, + 800: tokens.themeGray90, + 900: tokens.themeGray100, }, error: { - main: '#FF5630', - light: '#FF8F73', + main: tokens.iconsColorDanger, + light: tokens.supportSurfaceColorDanger, dark: '#DE350B', }, warning: { - main: '#FFAB00', - light: '#FFE380', + main: tokens.iconsColorWarning, + light: tokens.supportSurfaceColorWarning, dark: '#FF8B00', }, success: { - main: '#36B37E', - light: '#79F2C0', + main: tokens.iconsColorSuccess, + light: tokens.supportSurfaceColorSuccess, dark: '#006644', }, info: { - main: '#0065FF', - light: '#4C9AFF', + main: tokens.iconsColorInfo, + light: tokens.supportSurfaceColorInfo, dark: '#0747A6', }, navigation: { ...lightTheme.palette.navigation, - background: '#0E3468', - color: '#FFFFFF', - indicator: '#2684FF', + background: tokens.themePrimaryBlue, + color: tokens.typographyColorPrimaryInvert, + indicator: tokens.themePrimaryGold, navItem: { - hoverBackground: 'rgba(116,118,121,0.6)', + hoverBackground: tokens.surfaceColorPrimaryButtonHover, }, }, text: { - primary: '#222222', + primary: tokens.themeGray110, }, background: { - default: '#FFFFFF', + default: tokens.surfaceColorBackgroundWhite, }, }, fontFamily: 'BCSans, Noto Sans, Roboto, sans-serif', - pageTheme: pageThemesFontColorOverride, + // Generate page header + font color & card header. Currently we have page header backgrounds turned off + // HomePage card header backgrounds are also turned off, so this mainly controls page header font color + // and the card headers on /create + pageTheme: { + // set all the builtin page themes to the same header background and font color + ...Object.keys(defaultPageThemes).reduce((acc: {[key: string]: PageTheme}, themeName) => { + acc[themeName] = genPageTheme({ + colors: [ tokens.themeGray30, tokens.surfaceColorBackgroundWhite ], + shape: shapes.round, + options: { fontColor: tokens.themePrimaryBlue }, + }); + return acc; + }, {}), + }, defaultPageTheme: 'home', }); @@ -104,9 +112,9 @@ const createCustomThemeOverrides = ( BackstageHeader: { header: { backgroundImage: 'unset', - borderBottom: '2px solid #c7c7c7', - boxShadow: '0 -3px 12px rgba(0,0,0,.5)', - paddingBottom: theme.spacing(2), + borderBottom: `${tokens.layoutBorderWidthMedium} solid ${tokens.surfaceColorBorderDefault}`, + boxShadow: tokens.surfaceShadowSmall, + paddingBottom: tokens.layoutPaddingMedium, '& h1': { fontSize: '1.5rem', }, @@ -116,10 +124,10 @@ const createCustomThemeOverrides = ( fontWeight: 900, }, subtitle: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, type: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, }, BackstageHeaderLabel: { @@ -127,7 +135,7 @@ const createCustomThemeOverrides = ( color: theme.page.fontColor, }, value: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, }, BackstageHeaderTabs: { @@ -139,14 +147,14 @@ const createCustomThemeOverrides = ( BackstageOpenedDropdown: { icon: { '& path': { - fill: '#FFFFFF', + fill: tokens.iconsColorPrimaryInvert, }, }, }, BackstageTable: { root: { '&> :first-child': { - borderBottom: '1px solid #D5D5D5', + borderBottom: `${tokens.layoutBorderWidthSmall} solid ${tokens.surfaceColorBorderDefault}`, boxShadow: 'none', }, '& th': { @@ -155,6 +163,11 @@ const createCustomThemeOverrides = ( }, }, }, + BackstageItemCardHeader: { + root: { + padding: `${tokens.layoutPaddingLarge} ${tokens.layoutPaddingLarge} calc(${tokens.layoutPaddingLarge} / 2)`, + } + }, CatalogReactUserListPicker: { title: { textTransform: 'none', @@ -162,41 +175,41 @@ const createCustomThemeOverrides = ( }, MuiAlert: { root: { - borderRadius: 0, + borderRadius: tokens.layoutBorderRadiusNone, }, standardError: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.error.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardInfo: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.primary.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardSuccess: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.success.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardWarning: { - color: theme.palette.grey[700], + color: theme.palette.grey[800], backgroundColor: theme.palette.secondary.light, '& $icon': { - color: theme.palette.grey[700], + color: theme.palette.grey[800], }, }, }, MuiAutocomplete: { root: { '&[aria-expanded=true]': { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, }, '&[aria-expanded=true] path': { fill: theme.palette.primary.main, @@ -206,16 +219,13 @@ const createCustomThemeOverrides = ( MuiOutlinedInput: { root: { "& $notchedOutline": { - borderColor: '#606060' - }, - "&:hover $notchedOutline": { - borderColor: theme.palette.grey[50] + borderColor: tokens.surfaceColorBackgroundDarkBlue, }, "&$focused $notchedOutline": { - borderColor: theme.palette.primary.main, + borderColor: tokens.surfaceColorBorderActive, }, - '& [class^="MuiSvgIcon-root"]': { - fill: '#606060' + '& svg': { + fill: tokens.themeGray80, } }, }, @@ -226,7 +236,7 @@ const createCustomThemeOverrides = ( }, MuiButton: { root: { - borderRadius: 3, + borderRadius: tokens.layoutBorderRadiusMedium, textTransform: 'none', }, contained: { @@ -236,31 +246,48 @@ const createCustomThemeOverrides = ( MuiCard: { root: { backgroundImage: 'unset', - paddingBottom: theme.spacing(1), + borderRadius: tokens.layoutBorderRadiusMedium, + boxShadow: tokens.surfaceShadowSmall, '& h3': { - color: '#FFFFFF', + color: tokens.typographyColorPrimary, }, '& h4': { - color: '#FFFFFF', + color: tokens.typographyColorPrimary, + }, + '&:hover': { + boxShadow: tokens.surfaceShadowMedium, }, '& svg': { - color: theme.palette.grey[50], + color: tokens.themeGray80, }, }, }, + MuiCardContent: { + root: { + padding: `${tokens.layoutPaddingMedium} ${tokens.layoutPaddingLarge} 0`, + } + }, + MuiCardActions: { + root: { + // /create cards have 16px padding on CardActions regardless of what's specified here + // so setting all to 16px (layoutPaddingMedium), and use margin to reach desired layoutPaddingLarge value + padding: tokens.layoutPaddingMedium, + margin: `${tokens.layoutMarginNone} ${tokens.layoutMarginSmall} ${tokens.layoutMarginSmall}` + } + }, MuiChip: { root: { - borderRadius: 3, + borderRadius: tokens.layoutBorderRadiusMedium, backgroundColor: 'rgba(0, 0, 0, .11)', color: theme.palette.primary.dark, - margin: 4, + margin: tokens.layoutMarginXsmall, }, }, MuiSelect: { root: { '&[aria-expanded]': { - backgroundColor: '#26385A', - color: '#FFFFFF', + backgroundColor: tokens.surfaceColorBackgroundDarkBlue, + color: tokens.typographyColorPrimaryInvert, }, }, }, @@ -272,7 +299,7 @@ const createCustomThemeOverrides = ( padding: 12, }, thumb: { - backgroundColor: '#FFFFFF', + backgroundColor: tokens.surfaceColorBackgroundWhite, height: 14, width: 14, }, diff --git a/yarn.lock b/yarn.lock index eda08a5..db1df73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4867,6 +4867,11 @@ resolved "https://registry.yarnpkg.com/@bcgov/bc-sans/-/bc-sans-2.1.0.tgz#881f626901c0bf3324c56563fa0c5045fded420a" integrity sha512-1MesF4NAVpM5dywoJ68wNcBylHbPqg1dDV/FNuQm0BbspETGlPmfX8LG8rtrCjCAPhWuL2qRT/lBYDUMvFTUnw== +"@bcgov/design-tokens@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@bcgov/design-tokens/-/design-tokens-3.0.0.tgz#c83ac4bee5e37b98cb50343d6a9b1d0e4ba1b873" + integrity sha512-RH7FyZNg2RovlmLBzQRtoFcSAaQt1SV+6/5MiovUv8+Vib6KpBj1RSWgYc9V0cXJwpR6Az5KniAcqhAhqiJcFg== + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -10414,9 +10419,9 @@ "@types/react" "*" "@types/react@*", "@types/react@^16.13.1 || ^17.0.0", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0", "@types/react@^18": - version "18.3.2" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.2.tgz#462ae4904973bc212fa910424d901e3d137dbfcd" - integrity sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w== + version "18.3.3" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f" + integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw== dependencies: "@types/prop-types" "*" csstype "^3.0.2" @@ -11289,6 +11294,7 @@ apg-lite@^1.0.3: "@backstage/plugin-user-settings" "^0.8.5" "@backstage/theme" "^0.5.3" "@bcgov/bc-sans" "^2.0.0" + "@bcgov/design-tokens" "^3.0.0" "@internal/plugin-analytics-module-snowplow" "^0.1.0" "@material-ui/core" "^4.12.4" "@material-ui/icons" "^4.11.3" @@ -25157,20 +25163,6 @@ types-ramda@^0.30.0: dependencies: ts-toolbelt "^9.6.0" -typescript-json-schema@^0.62.0: - version "0.62.0" - resolved "https://registry.yarnpkg.com/typescript-json-schema/-/typescript-json-schema-0.62.0.tgz#774b06b0c9d86d7f3580ea9136363a6eafae1470" - integrity sha512-qRO6pCgyjKJ230QYdOxDRpdQrBeeino4v5p2rYmSD72Jf4rD3O+cJcROv46sQukm46CLWoeusqvBgKpynEv25g== - dependencies: - "@types/json-schema" "^7.0.9" - "@types/node" "^16.9.2" - glob "^7.1.7" - path-equal "^1.2.5" - safe-stable-stringify "^2.2.0" - ts-node "^10.9.1" - typescript "~5.1.0" - yargs "^17.1.1" - typescript-json-schema@^0.63.0: version "0.63.0" resolved "https://registry.yarnpkg.com/typescript-json-schema/-/typescript-json-schema-0.63.0.tgz#55ef6c4dde71625425b169d37e0de3d2ea14e093"