Improvements to AppBar, Link and Slider

Changes the grey stack so affects other components.

See #81

.github/workflows/build.yml

@@ -18,7 +18,10 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: '14'
+
+      - name: npm 7
+        run: npm i -g npm@7 --registry=https://registry.npmjs.org
 
       - name: Install deps and build (with cache)
         if: ${{ !env.ACT }}

package.json

@@ -139,6 +139,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-router-dom": "^5.2.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollpkg": "^0.5.6",
     "size-limit": "^4.10.2",
     "story-description-loader": "^1.0.0",
@@ -147,6 +148,8 @@
     "typescript": "^4.2.4"
   },
   "dependencies": {
+    "@committed/hooks": "^0.4.0",
+    "@radix-ui/colors": "^0.1.4",
     "@radix-ui/react-accordion": "^0.0.14",
     "@radix-ui/react-avatar": "^0.0.13",
     "@radix-ui/react-checkbox": "^0.0.15",

src/components/Accordion/Accordion.tsx

@@ -1,12 +1,11 @@
+import { Button, Header, Item, Panel, Root } from '@radix-ui/react-accordion'
 import React, {
-  forwardRef,
-  PropsWithChildren,
   ComponentProps,
+  forwardRef,
   ForwardRefExoticComponent,
 } from 'react'
-import { styled, keyframes } from 'stitches.config'
+import { keyframes, styled } from 'stitches.config'
 import { ChevronDown } from '../Icons'
-import { Root, Item, Header, Button, Panel } from '@radix-ui/react-accordion'
 
 const slideDown = keyframes({
   from: { height: 0 },

src/components/Alert/Alert.tsx

@@ -27,9 +27,9 @@ const StyledAlert = styled(DEFAULT_TAG, {
   variants: {
     severity: {
       ghost: {
-        backgroundColor: '$paper',
-        borderColor: '$grey500',
-        color: '$text',
+        backgroundColor: '$greyBgLight',
+        borderColor: '$greyBorder',
+        color: '$greyText',
       },
       warning: {
         backgroundColor: '$warningBackground',

src/components/AppBar/AppBar.stories.tsx

@@ -33,7 +33,10 @@ export const WithReactRouter: React.FC = () => {
         <RouterLink
           component={AppBarHeading}
           to="./"
+          // props for component={Link} are passed on despite the error
+          // @ts-ignore
           as="a"
+          // @ts-ignore
           css={{
             cursor: 'pointer',
             textDecoration: 'none',

src/components/AppBar/AppBar.tsx

@@ -9,8 +9,8 @@ import { Heading } from '../Heading'
  */
 export const AppBar = styled('header', {
   display: 'flex',
-  background: '$primary',
-  color: '$primaryContrast',
+  background: '$brand',
+  color: '$brandContrast',
   minHeight: '$8',
   paddingLeft: '$4',
   paddingRight: '$4',
@@ -36,7 +36,7 @@ export const AppBarHeading = forwardRef(
     <AppBarHeadingContainer>
       <Heading
         variant={HEADING_TAG}
-        css={{ color: '$primaryContrast', ...css } as CSS}
+        css={{ color: '$brandContrast', ...css } as CSS}
         size={1}
         weight="regular"
         {...props}
@@ -50,7 +50,7 @@ export const AppBarHeading = forwardRef(
 
 export const AppBarActions = styled('div', {
   '> *': {
-    color: '$primaryContrast',
+    color: '$brandContrast',
   },
 })
 
@@ -67,7 +67,7 @@ export const AppBarButton = forwardRef<
   HTMLButtonElement,
   PropsWithChildren<typeof Button>
 >(({ children, ...props }, forwardedRef) => (
-  <Button variant="primary" {...props} ref={forwardedRef}>
+  <Button variant="brand" {...props} ref={forwardedRef}>
     {children}
   </Button>
 )) as AppBarButtonComponent

src/components/Avatar/Avatar.tsx

@@ -42,7 +42,7 @@ const StyledFallback = styled(Fallback, {
  */
 export const Avatar: React.FC<AvatarProps> = ({
   src,
-  backgroundColor = '$grey500',
+  backgroundColor = '$greyLine',
   color = '$text',
   alt = 'Avatar',
   children,

src/components/Button/Button.stories.tsx

@@ -78,6 +78,11 @@ export const Disabled = () => (
   </Row>
 )
 
+/**
+ * A `brand` variant is also supplied for particular uses cases, like in the AppBar, where changing to the dark theme does not affect the coloring.
+ */
+export const Brand = () => <Button variant="brand">Brand</Button>
+
 /**
  * This uses the force prop to simulate hover, focus and active states so they can be compared at the same time.
  * This prop is not intended for normal use and the buttons here will not interact normally.

src/components/Button/Button.tsx

@@ -69,6 +69,13 @@ const StyledButton = styled(DEFAULT_TAG, {
 
   variants: {
     variant: {
+      brand: {
+        $$active: '$colors$brandActive',
+        $$lowlight: '$colors$brandLowlight',
+        $$hover: '$colors$brandHighlight',
+        backgroundColor: '$colors$brand',
+        color: '$colors$brandContrast',
+      },
       primary: {
         $$active: '$colors$primaryActive',
         $$lowlight: '$colors$primaryLowlight',

src/components/Card/Card.stories.tsx

@@ -18,7 +18,7 @@ export const Default: React.FC = () => {
   return (
     <Card>
       <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Default Card</Text>
-      <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+      <Text css={{ color: '$greyText', lineHeight: '23px' }}>
         Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s,
@@ -35,15 +35,15 @@ export const Classic = () => {
     <Row css={{ gap: '$3' }}>
       <Card>
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Default Card</Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
       <Card interactive tabIndex={0}>
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>
           Default Interactive
         </Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
@@ -61,15 +61,15 @@ export const Outline = () => {
     <Row css={{ gap: '$3' }}>
       <Card variant="outline">
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Outline</Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
       <Card variant="outline" interactive tabIndex={0}>
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>
           Outline Interactive
         </Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
@@ -87,13 +87,13 @@ export const Ghost = () => {
     <Row css={{ gap: '$3' }}>
       <Card variant="ghost">
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Ghost</Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>
       <Card as="button" interactive variant="ghost" onClick={action('Action')}>
         <Text css={{ lineHeight: '23px', fontWeight: 500 }}>Ghost</Text>
-        <Text css={{ color: '$grey900', lineHeight: '23px' }}>
+        <Text css={{ color: '$greyText', lineHeight: '23px' }}>
           Lorem Ipsum is simply dummy text...
         </Text>
       </Card>

src/components/Checkbox/Checkbox.tsx

@@ -1,10 +1,7 @@
 import { Indicator, Root } from '@radix-ui/react-checkbox'
-import React, {
-  ComponentProps,
-  forwardRef,
-  ForwardRefExoticComponent,
-} from 'react'
-import { styled } from 'stitches.config'
+import type * as Polymorphic from '@radix-ui/react-polymorphic'
+import React, { forwardRef, ForwardRefExoticComponent } from 'react'
+import { CSS, StitchesVariants, styled } from 'stitches.config'
 import { Check, CheckIndeterminate } from '../Icons'
 
 const StyledRoot = styled(Root, {
@@ -129,7 +126,11 @@ const StyledIndicator = styled(Indicator, {
   width: '100%',
 })
 
-type CheckboxProps = ComponentProps<typeof StyledRoot>
+type CheckboxCSSProp = { css?: CSS }
+type CheckboxVariants = StitchesVariants<typeof StyledRoot>
+type CheckboxProps = Polymorphic.OwnProps<typeof Root> &
+  CheckboxVariants &
+  CheckboxCSSProp
 
 /**
  * Checkboxes can be used as toggle actions or as part of input forms.

src/components/Container/Container.stories.tsx

@@ -55,7 +55,7 @@ export const Responsive: React.FC = () => (
   <Container
     maxWidth={{ '@initial': 'sm', '@md': 'md', '@lg': 'lg', '@xl': 'xl' }}
     css={{
-      backgroundColor: '$grey500',
+      backgroundColor: '$greyBg',
       py: '$3',
       textAlign: 'center',
     }}