Merge pull request #72 from commitd/sh-develop

Theme changes

Author: stuarthendren

.devcontainer/devcontainer.json

@@ -15,7 +15,8 @@
     "github.vscode-pull-request-github",
     "ms-vsliveshare.vsliveshare",
     "eamodio.gitlens",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ryanluker.vscode-coverage-gutters"
   ],
   "postCreateCommand": "yarn install",
   "remoteUser": "node"

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.1",
+  "version": "4.2.0",
   "name": "@committed/components",
   "description": "Committed Component Library",
   "author": "Committed",
@@ -75,7 +75,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@compositor/kit": "^1.0.47",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",

src/components/appbar/AppBar.tsx

@@ -8,10 +8,27 @@ import { Theme } from '../../theme'
 export type AppBarProps = MaterialAppBarProps
 
 export const AppBar: React.ComponentType<AppBarProps> = styled(MaterialAppBar)(
-  ({ theme }: { theme: Theme }) => ({
-    '& h1, h2, h3, h4, h5, h6': {
-      fontSize: theme.fontSizing(1),
-      fontWeight: theme.typography.fontWeightMedium,
-    },
-  })
+  ({ theme, color = 'primary' }: { theme: Theme } & AppBarProps) => {
+    let colorStyles = {}
+    if (theme.palette.type === 'dark' && color === 'primary') {
+      colorStyles = {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+      }
+    }
+    if (theme.palette.type === 'dark' && color === 'secondary') {
+      colorStyles = {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+      }
+    }
+
+    return {
+      ...colorStyles,
+      '& h1, h2, h3, h4, h5, h6': {
+        fontSize: theme.fontSizing(1),
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+    }
+  }
 )

src/components/checkbox/CheckMark.tsx

@@ -5,20 +5,24 @@ import { Theme } from '../../theme'
 
 export type CheckMarkProps = SvgIconProps
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(({ palette }: Theme) => ({
   tick: {
     fill: ({ color }: SvgIconProps) => {
       let bgcolor = 'transparent'
       if (color === 'primary') {
-        const primaryColor = theme.palette.primary.main
-        const brandColor = theme.palette.brand.main
-        bgcolor =
-          brandColor === primaryColor
-            ? theme.palette.primary.contrastText
-            : brandColor
+        if (palette.type === 'dark') {
+          bgcolor = palette.secondary.main
+        } else {
+          const primaryColor = palette.secondary.main
+          const brandColor = palette.brand.main
+          bgcolor =
+            brandColor === primaryColor
+              ? palette.primary.contrastText
+              : brandColor
+        }
       }
       if (color === 'secondary') {
-        bgcolor = theme.palette.getContrastText(theme.palette.secondary.main)
+        bgcolor = palette.getContrastText(palette.secondary.main)
       }
       return bgcolor
     },

src/components/textfield/TextField.tsx

@@ -5,7 +5,10 @@ import MaterialTextField, {
 } from '@material-ui/core/TextField'
 import { makeStyles } from '../../styles'
 
-export type CommittedTextFieldProps = Omit<MaterialTextFieldProps, 'variant'>
+export type CommittedTextFieldProps = Omit<
+  MaterialTextFieldProps,
+  'variant' | 'margin'
+>
 export type TextFieldProps = CommittedTextFieldProps & BoxProps
 
 const useStyles = makeStyles((theme) => {
@@ -93,4 +96,4 @@ const CommittedTextField: React.FC<CommittedTextFieldProps> = React.forwardRef(
 
 export const TextField = withBoxProps<CommittedTextFieldProps>(
   CommittedTextField
-) as React.ForwardRefExoticComponent<CommittedTextFieldProps>
+) as React.ForwardRefExoticComponent<TextFieldProps>

src/theme/commonTheme.ts

@@ -118,12 +118,6 @@ export const committedOverrides = (
       },
       textPrimary: {
         color: palette.primary.main,
-        '&:hover': {
-          backgroundColor: fade(
-            palette.brand.main,
-            palette.action.hoverOpacity
-          ),
-        },
         '&$disabled': {},
       },
       textSecondary: {},

src/theme/darkTheme.ts

@@ -1,20 +1,15 @@
-import { darken, fade, lighten } from '../styles'
 import { deepmerge } from '@material-ui/utils'
+import { fade, lighten } from '../styles'
 import * as allColors from './colors'
-import { addTransparency } from './commonTheme'
-import { OverrideOptionsFunction, PaletteColor, PaletteOptions } from './types'
+import { OverrideOptionsFunction, PaletteOptions } from './types'
 
 export type DarkPaletteColors = typeof committedDarkPaletteColors
 
 export const committedDarkPaletteColors = {
   ...allColors,
-  brand: allColors.committedGrey,
+  brand: allColors.committedYellow,
   primary: allColors.committedYellow,
-  secondary: {
-    '300': allColors.committedGrey[50],
-    '500': allColors.committedGrey[200],
-    '700': allColors.committedGrey[400],
-  },
+  secondary: allColors.committedGrey,
   success: allColors.teal,
   warning: allColors.orange,
   error: allColors.red,
@@ -59,10 +54,10 @@ export const committedDarkPalette: PaletteOptions = {
     contrastText: textColor,
   },
   primary: {
-    light: paletteColors.primary[300],
-    main: paletteColors.primary[500],
-    dark: paletteColors.primary[700],
-    contrastText: paletteColors.brand[500],
+    light: paletteColors.primary[500],
+    main: paletteColors.primary[700],
+    dark: paletteColors.primary[900],
+    contrastText: paletteColors.secondary[500],
   },
   secondary: {
     light: paletteColors.secondary[300],
@@ -91,29 +86,14 @@ export const committedDarkPalette: PaletteOptions = {
   },
   background: {
     default: 'black',
-    paper: paletteColors.grey[800],
+    paper: paletteColors.grey[900],
   },
   text,
   grey: paletteColors.grey,
   action,
   divider: 'rgba(255, 255, 255, 0.8)',
 }
 
-// eqiv to color[400]
-const mainLight = (color: PaletteColor): string => {
-  return lighten(color.main, 0.25)
-}
-
-// color[200]
-const lightLight = (color: PaletteColor): string => {
-  return lighten(color.light, 0.25)
-}
-
-// color[100]
-const lightLightVery = (color: PaletteColor): string => {
-  return lighten(color.light, 0.5)
-}
-
 export const committedDarkOverrides: OverrideOptionsFunction = (
   defaultOverrides,
   helpers
@@ -150,49 +130,18 @@ export const committedDarkOverrides: OverrideOptionsFunction = (
         },
       },
       textSecondary: {
-        color: palette.secondary.main,
-        '&:hover': {
-          backgroundColor: fade(palette.primary.main, action.hoverOpacity),
-        },
-      },
-      outlinedPrimary: {
-        color: palette.getContrastText(palette.primary.light),
-        borderColor: palette.getContrastText(palette.primary.light),
-        backgroundColor: palette.primary.light,
-        '&:hover': {
-          backgroundColor: lighten(
-            lightLight(palette.primary),
-            action.hoverOpacity
-          ),
-          borderColor: darken(
-            palette.getContrastText(palette.primary.light),
-            0.25
-          ),
-        },
-        '&$disabled': {
-          backgroundColor: addTransparency(mainLight(palette.primary)),
-          borderColor: addTransparency(palette.secondary.light),
-        },
+        color: palette.secondary.light,
       },
       outlinedSecondary: {
-        color: palette.primary.dark,
-        borderColor: palette.primary.dark,
-        backgroundColor: palette.brand.light,
-        '&:hover': {
-          backgroundColor: lightLight(palette.brand),
-          borderColor: darken(palette.primary.dark, 0.25),
-        },
-        '&$disabled': {
-          backgroundColor: addTransparency(lightLightVery(palette.brand)),
-          borderColor: addTransparency(palette.primary.main),
-        },
+        color: palette.secondary.light,
+        borderColor: palette.secondary.light,
       },
     },
     MuiCheckbox: {
       colorSecondary: {
-        color: palette.secondary.main,
+        color: palette.secondary.light,
         '&$checked': {
-          color: palette.secondary.main,
+          color: palette.secondary.light,
           '&:hover': {
             backgroundColor: fade(palette.primary.main, action.hoverOpacity),
           },

src/theme/lightTheme.ts

@@ -4,7 +4,6 @@ import * as allColors from './colors'
 import { addTransparency } from './commonTheme'
 import {
   OverrideOptionsFunction,
-  PaletteColor,
   PaletteOptions,
   TypeAction,
   TypeText,
@@ -14,11 +13,7 @@ export const committedLightPaletteColors = {
   ...allColors,
   brand: allColors.committedYellow,
   primary: allColors.committedGrey,
-  secondary: {
-    '300': allColors.committedYellow[50],
-    '500': allColors.committedYellow[200],
-    '700': allColors.committedYellow[400],
-  },
+  secondary: allColors.committedYellow,
   success: allColors.teal,
   warning: allColors.orange,
   error: allColors.red,
@@ -104,21 +99,6 @@ export const committedLightPalette: PaletteOptions = {
   divider: 'rgba(0, 0, 0, 0.12)',
 }
 
-// eqiv to color[400]
-const mainLight = (color: PaletteColor): string => {
-  return lighten(color.main, 0.25)
-}
-
-// color[200]
-const lightLight = (color: PaletteColor): string => {
-  return lighten(color.light, 0.25)
-}
-
-// color[100]
-const lightLightVery = (color: PaletteColor): string => {
-  return lighten(color.light, 0.5)
-}
-
 export const committedLightOverrides: OverrideOptionsFunction = (
   defaultOverrides,
   helpers
@@ -138,41 +118,16 @@ export const committedLightOverrides: OverrideOptionsFunction = (
       },
       containedSecondary: {
         '&$disabled': {
-          backgroundColor: addTransparency(lightLight(palette.secondary)),
+          backgroundColor: addTransparency(
+            lighten(palette.secondary.light, 0.25)
+          ),
         },
       },
       textSecondary: {
-        color: palette.brand.dark,
-        '&:hover': {
-          backgroundColor: fade(palette.primary.main, action.hoverOpacity),
-        },
-      },
-      outlinedPrimary: {
-        color: palette.secondary.dark,
-        backgroundColor: palette.primary.light,
-        borderColor: palette.primary.main,
-        '&:hover': {
-          backgroundColor: darken(palette.primary.main, action.hoverOpacity),
-          borderColor: palette.primary.main,
-        },
-        '&$disabled': {
-          backgroundColor: addTransparency(mainLight(palette.primary)),
-          borderColor: addTransparency(palette.secondary.main),
-        },
+        color: darken(palette.secondary.dark, 0.2),
       },
       outlinedSecondary: {
-        color: palette.primary.dark,
-        borderColor: palette.primary.main,
-        backgroundColor: lightLightVery(palette.brand),
-        '&:hover': {
-          backgroundColor: lightLight(palette.brand),
-          borderColor: palette.primary.main,
-        },
-        '&$disabled': {
-          color: addTransparency(palette.primary.dark),
-          backgroundColor: addTransparency(lightLightVery(palette.brand)),
-          borderColor: addTransparency(palette.primary.main),
-        },
+        color: darken(palette.secondary.dark, 0.2),
       },
     },
     MuiCheckbox: {

stories/colour.stories.mdx

@@ -12,16 +12,16 @@ The main light theme colours. They can be referred to in palette based props usi
 We use the brand colour for accents and highlights, not as the primary colour.
 
 <ThemeProvider choice="light">
-  <Flex flexWrap="wrap">
+  <Flex p={3} bgcolor="background.default" flexWrap="wrap">
     <Palette key="brand" name="brand" width={1} />
     <Palette key="primary" name="primary" />
     <Palette key="secondary" name="secondary" />
     <Palette key="error" name="error" />
     <Palette key="warning" name="warning" />
     <Palette key="success" name="success" />
     <Palette key="info" name="info" />
+    <Surfaces />
   </Flex>
-  <Surfaces />
 </ThemeProvider>
 
 ## Main Dark
@@ -30,16 +30,16 @@ The main dark theme colours. They can be referred to in palette based props usin
 We use the brand colour for accents and highlights, not as the primary colour.
 
 <ThemeProvider choice="dark">
-  <Flex flexWrap="wrap">
+  <Flex p={3} bgcolor="background.default" flexWrap="wrap">
     <Palette key="brand" name="brand" width={1} />
     <Palette key="primary" name="primary" />
     <Palette key="secondary" name="secondary" />
     <Palette key="error" name="error" />
     <Palette key="warning" name="warning" />
     <Palette key="success" name="success" />
     <Palette key="info" name="info" />
+    <Surfaces />
   </Flex>
-  <Surfaces />
 </ThemeProvider>
 
 ## Colours