Refactor sizing (#7)

* Substitute SizesObj With Sizes Fn

* Remove spacing and use sizes instead

* Remove Checkbox test

* Update src/shared/components/ChannelPreview/ChannelPreviewBase.style.tsx

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

src/components/ChannelGallery.tsx

@@ -18,7 +18,7 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loadin
   const displayPlaceholders = loading || !channels
 
   return (
-    <Gallery title={title} itemWidth={220} exactWidth={true} paddingLeft={sizes.b2} paddingTop={sizes.b2}>
+    <Gallery title={title} itemWidth={220} exactWidth={true} paddingLeft={sizes(2, true)} paddingTop={sizes(2, true)}>
       {displayPlaceholders
         ? Array.from({ length: PLACEHOLDERS_COUNT }).map((_, idx) => (
             <ChannelPreviewBase key={`channel-placeholder-${idx}`} />

src/components/ErrorFallback.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/shared/components'
 import { sizes, colors } from '@/shared/theme'
 
 const Container = styled.div`
-  padding: ${sizes.b4}px;
+  padding: ${sizes(4)};
   color: ${colors.gray[400]};
   display: grid;
   place-items: center;

src/components/FeaturedVideoHeader/FeaturedVideoHeader.style.ts

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import { fluidRange } from 'polished'
 
 import { Avatar, Button } from '@/shared/components'
-import { breakpoints, colors, sizes, spacing, typography } from '@/shared/theme'
+import { breakpoints, colors, sizes, typography } from '@/shared/theme'
 import { Link } from '@reach/router'
 import { css } from '@emotion/core'
 
@@ -123,8 +123,8 @@ export const VerticalGradientOverlay = styled.div`
 
 export const InfoContainer = styled.div`
   position: relative;
-  margin-top: -${spacing.xxl};
-  padding-bottom: ${spacing.xxxxl};
+  margin-top: -${sizes(8)};
+  padding-bottom: ${sizes(12)};
 
   @media screen and (min-width: ${breakpoints.small}) {
     position: absolute;
@@ -153,7 +153,7 @@ export const InfoContainer = styled.div`
 `
 
 export const ChannelLink = styled(Link)`
-  margin-bottom: ${spacing.m};
+  margin-bottom: ${sizes(4)};
   display: inline-block;
 `
 
@@ -170,9 +170,9 @@ export const TitleContainer = styled.div`
   a {
     text-decoration: none;
   }
-  margin-bottom: ${spacing.xxl};
+  margin-bottom: ${sizes(8)};
   @media screen and (min-width: ${breakpoints.medium}) {
-    margin-bottom: ${spacing.xxxl};
+    margin-bottom: ${sizes(10)};
   }
 
   h2 {
@@ -182,9 +182,9 @@ export const TitleContainer = styled.div`
     font-weight: 700;
 
     display: inline-block;
-    margin: 0 0 ${spacing.m} 0;
+    margin: 0 0 ${sizes(4)} 0;
     @media screen and (min-width: ${breakpoints.medium}) {
-      margin-bottom: ${spacing.l};
+      margin-bottom: ${sizes(5)};
     }
   }
 
@@ -210,5 +210,5 @@ export const PlayButton = styled(Button)`
 `
 
 export const SoundButton = styled(Button)`
-  margin-left: ${sizes.b4}px;
+  margin-left: ${sizes(4)};
 `

src/components/Navbar/Navbar.style.tsx

@@ -21,9 +21,9 @@ export const Header = styled.header<NavbarStyleProps>`
 
   grid-template-columns: 1fr 2fr;
 
-  padding: ${sizes.b2}px ${sizes.b3}px;
+  padding: ${sizes(2)} ${sizes(3)};
   @media screen and (min-width: ${breakpoints.small}) {
-    padding: ${sizes.b3}px ${sizes.b3}px;
+    padding: ${sizes(3)} ${sizes(3)};
   }
   background-color: ${(props) => (props.hasFocus ? colors.gray[900] : colors.black)};
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -35,16 +35,16 @@ export const Header = styled.header<NavbarStyleProps>`
 `
 
 export const LogoLink = styled(Link)`
-  padding: 0 ${sizes.b5}px;
-  margin-right: ${sizes.b2}px;
+  padding: 0 ${sizes(5)};
+  margin-right: ${sizes(2)};
   @media screen and (min-width: ${breakpoints.medium}) {
-    margin-right: ${sizes.b5}px;
+    margin-right: ${sizes(5)};
   }
 `
 
 export const ShortLogo = styled(UnstyledShortLogo)`
   display: block;
-  height: ${sizes.b1 * 9}px;
+  height: ${sizes(9)};
   @media screen and (min-width: ${breakpoints.medium}) {
     display: none;
   }
@@ -52,7 +52,7 @@ export const ShortLogo = styled(UnstyledShortLogo)`
 
 export const FullLogo = styled(UnstyledFullLogo)`
   display: none;
-  height: ${sizes.b1 * 9}px;
+  height: ${sizes(9)};
   @media screen and (min-width: ${breakpoints.medium}) {
     display: block;
   }
@@ -61,7 +61,7 @@ export const FullLogo = styled(UnstyledFullLogo)`
 export const NavigationContainer = styled.div`
   display: flex;
   align-items: center;
-  margin-right: ${sizes.b3}px;
+  margin-right: ${sizes(3)};
 `
 
 export const SearchbarContainer = styled.div`
@@ -93,7 +93,7 @@ export const StyledLink = styled(Link)`
 
   span {
     display: none;
-    margin-left: ${sizes.b3}px;
+    margin-left: ${sizes(3)};
   }
   @media screen and (min-width: ${breakpoints.small}) {
     span {
@@ -124,9 +124,9 @@ export const StyledLink = styled(Link)`
   }
 
   & + & {
-    margin-left: ${sizes.b3}px;
+    margin-left: ${sizes(3)};
     @media screen and (min-width: ${breakpoints.small}) {
-      margin-left: ${sizes.b6}px;
+      margin-left: ${sizes(6)};
     }
   }
 `

src/components/VideoGallery.tsx

@@ -55,8 +55,8 @@ const VideoGallery: React.FC<VideoGalleryProps> = ({ title, videos, loading }) =
   return (
     <Gallery
       title={title}
-      paddingLeft={sizes.b2}
-      paddingTop={sizes.b2}
+      paddingLeft={sizes(2, true)}
+      paddingTop={sizes(2, true)}
       responsive={breakpoints}
       itemWidth={MIN_VIDEO_PREVIEW_WIDTH}
       arrowCss={arrowPosition}
@@ -86,7 +86,7 @@ const VideoGallery: React.FC<VideoGalleryProps> = ({ title, videos, loading }) =
 
 const videoPreviewCss = css`
   & + & {
-    margin-left: ${sizes.b6}px;
+    margin-left: ${sizes(6)};
   }
 
   min-width: ${MIN_VIDEO_PREVIEW_WIDTH};

src/components/ViewErrorFallback.tsx

@@ -7,7 +7,7 @@ import { Button, Typography } from '@/shared/components'
 import { sizes, colors } from '@/shared/theme'
 
 const Container = styled.div`
-  margin: ${sizes.b10 * 2}px auto 0;
+  margin: ${sizes(20)} auto 0;
   display: grid;
   place-items: center;
 
@@ -21,7 +21,7 @@ const Message = styled.div`
   flex-direction: column;
   text-align: center;
   margin-top: 90px;
-  margin-bottom: ${sizes.b10}px;
+  margin-bottom: ${sizes(10)};
 
   > p {
     margin: 0;

src/shared/__tests__/Checkbox.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import Checkbox from '@/shared/components/Checkbox'
-
-describe('Checkbox component', () => {
-  it('Should render checkbox correctly', () => {
-    expect(mount(<Checkbox label="Test checkbox" icon="check" error />)).toBeDefined()
-  })
-})

src/shared/components/Avatar/Avatar.style.tsx

@@ -1,12 +1,12 @@
 import { makeStyles, StyleFn } from '../../utils'
-import { colors, spacing } from '../../theme'
+import { colors, sizes } from '../../theme'
 
 export type AvatarStyleProps = {
   size?: 'small' | 'default' | 'large'
 }
 
 const container: StyleFn = (_, { size = 'default' }) => {
-  const width = size === 'small' ? spacing.xs : size === 'default' ? spacing.m : spacing.xl
+  const width = size === 'small' ? sizes(2) : size === 'default' ? sizes(4) : sizes(6)
   return {
     borderRadius: 999,
     minWidth: width,

src/shared/components/CategoryPicker/CategoryPicker.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { Placeholder, ToggleButton } from '..'
-import sizes from '@/shared/theme/sizes'
+import { sizes } from '@/shared/theme'
 import { CategoryFields } from '@/api/queries/__generated__/CategoryFields'
 
 type CategoryPickerProps = {
@@ -47,11 +47,11 @@ const Container = styled.div`
 `
 
 const StyledPlaceholder = styled(Placeholder)`
-  margin: 0 ${sizes.b3}px ${sizes.b3}px 0;
+  margin: 0 ${sizes(3)} ${sizes(3)} 0;
 `
 
 const StyledToggleButton = styled(ToggleButton)`
-  margin: 0 ${sizes.b3}px ${sizes.b3}px 0;
+  margin: 0 ${sizes(3)} ${sizes(3)} 0;
 `
 
 export default CategoryPicker

src/shared/components/ChannelAvatar/ChannelAvatar.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { colors, spacing, typography } from '@/shared/theme'
+import { colors, sizes, typography } from '@/shared/theme'
 import { Avatar } from '@/shared/components'
 
 export const Container = styled.div`
@@ -10,7 +10,7 @@ export const Container = styled.div`
 export const StyledAvatar = styled(Avatar)`
   width: 32px;
   height: 32px;
-  margin-right: ${spacing.xs};
+  margin-right: ${sizes(2)};
 `
 
 export const Name = styled.span`

src/shared/components/ChannelPreview/ChannelPreviewBase.style.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core'
 import styled from '@emotion/styled'
-import { colors, sizes, spacing } from '../../theme'
+import { colors, sizes } from '../../theme'
 
 const imageTopOverflow = '2rem'
 const containerPadding = '22px'
@@ -22,9 +22,9 @@ const hoverTransition = ({ animated }: InnerContainerProps) =>
     ? css`
         transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
         &:hover {
-          transform: translate3d(-${spacing.xs}, -${spacing.xs}, 0);
+          transform: translate3d(-${sizes(2)}, -${sizes(2)}, 0);
           border: 1px solid ${colors.white};
-          box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue[500]};
+          box-shadow: ${sizes(2)} ${sizes(2)} 0 ${colors.blue[500]};
         }
       `
     : null
@@ -48,8 +48,8 @@ export const Info = styled.div`
   align-items: center;
   text-align: center;
 
-  margin-top: ${sizes.b3}px;
-  padding: 0 ${sizes.b1}px;
+  margin-top: ${sizes(3)};
+  padding: 0 ${sizes(1)};
   max-width: 100%;
 `
 

src/shared/components/Checkbox/Checkbox.style.ts

@@ -1,129 +0,0 @@
-import { StyleFn, makeStyles } from './../../utils/style-reducer'
-import { colors, typography, spacing } from '../../theme'
-
-export type CheckboxStyleProps = {
-  labelPosition?: 'end' | 'start' | 'top' | 'bottom'
-  caption?: string
-  error?: boolean
-  selected?: boolean
-  disabled?: boolean
-}
-
-const checkbox: StyleFn = (_, { labelPosition }) => ({
-  color: colors.white,
-  display: 'inline-flex',
-  flexDirection: labelPosition === 'top' || labelPosition === 'bottom' ? 'column' : 'row',
-  alignItems: 'center',
-})
-
-const fillFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-  const fill = error
-    ? colors.error
-    : selected && disabled
-    ? colors.gray[700]
-    : selected
-    ? colors.blue[500]
-    : 'transparent'
-
-  return {
-    ...styles,
-    backgroundColor: fill,
-  }
-}
-
-const borderColorFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-  const borderColor = error
-    ? colors.error
-    : selected && disabled
-    ? colors.gray[700]
-    : disabled
-    ? colors.gray[400]
-    : selected
-    ? colors.blue[500]
-    : colors.gray[300]
-
-  return {
-    ...styles,
-    borderColor,
-  }
-}
-
-const shadowFromProps: StyleFn = (styles, { disabled, error, selected }) => {
-  const shadow = error || disabled ? 'transparent' : selected ? colors.blue[900] : colors.gray[800]
-  return {
-    ...styles,
-    backgroundColor: shadow,
-  }
-}
-
-const outerContainer: StyleFn = (_, { disabled, error, selected }) => ({
-  borderRadius: '999px',
-  color: disabled ? colors.gray[400] : colors.white,
-  maxWidth: '2rem',
-  maxHeight: '2rem',
-  minWidth: '2rem',
-  minHeight: '2rem',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '&:focus-within': shadowFromProps({}, { disabled, error, selected }),
-  '&:hover': disabled ? {} : shadowFromProps({}, { disabled, error, selected }),
-})
-
-const innerContainer: StyleFn = (_, { disabled, error, selected }) => ({
-  position: 'relative',
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  backgroundColor: selected ? fillFromProps({}, { disabled, error, selected }).backgroundColor : 'transparent',
-  width: '1.065rem',
-  height: '1.065rem',
-  maxWidth: '1.065rem',
-  maxHeight: '1.065rem',
-  minWidth: '1.065rem',
-  minHeight: '1.065rem',
-  textAlign: 'center',
-  [`& > input[type="checkbox"]:checked`]: {
-    borderColor: !selected ? colors.white : borderColorFromProps({}, { disabled, error, selected }).borderColor,
-    ...fillFromProps({}, { disabled, error, selected }),
-  },
-  '&:active': fillFromProps({}, { disabled, error, selected }),
-})
-
-const input: StyleFn = () => ({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  opacity: 0,
-  width: '100%',
-  height: '100%',
-  padding: 'unset',
-  margin: 'unset',
-  border: 'unset',
-})
-
-const icon: StyleFn = () => ({
-  verticalAlign: 'middle',
-})
-
-const label: StyleFn = (_, { labelPosition }) => {
-  const value = labelPosition === 'top' || labelPosition === 'bottom' ? `${spacing.xs} auto` : `auto ${spacing.xs}`
-  return {
-    fontFamily: typography.fonts.base,
-    color: colors.white,
-    margin: value,
-  }
-}
-
-export const useCSS = ({ selected, error, disabled, labelPosition }: CheckboxStyleProps) => {
-  const props = { selected, error, disabled, labelPosition }
-  return {
-    checkbox: makeStyles([checkbox])(props),
-    outerContainer: makeStyles([outerContainer])(props),
-    innerContainer: makeStyles([innerContainer, borderColorFromProps])(props),
-    input: makeStyles([input])(props),
-    label: makeStyles([label])(props),
-    icon: makeStyles([icon])(props),
-  }
-}

src/shared/components/Checkbox/Checkbox.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { CheckboxStyleProps, useCSS } from './Checkbox.style'
-import Icon from '../Icon'
-
-type CheckboxProps = {
-  label?: string
-  icon?: 'check' | 'dash'
-  onChange?: (e: React.ChangeEvent) => void
-} & CheckboxStyleProps
-
-export default function Checkbox({
-  label = '',
-  disabled = false,
-  error = false,
-  selected = false,
-  icon = 'check',
-  labelPosition = 'end',
-  onChange = () => {},
-  ...styleProps
-}: CheckboxProps) {
-  const styles = useCSS({ ...styleProps, selected, error, disabled })
-  return (
-    <div css={styles.checkbox}>
-      {(labelPosition === 'start' || labelPosition === 'top') && <label css={styles.label}>{label}</label>}
-      <div css={styles.outerContainer}>
-        <div css={styles.innerContainer}>
-          <input css={styles.input} type="checkbox" checked={selected} disabled={disabled} onChange={onChange} />
-          {selected && <Icon name={icon === 'check' ? 'check' : 'dash'} css={styles.icon} />}
-        </div>
-      </div>
-      {(labelPosition === 'end' || labelPosition === 'bottom') && <label css={styles.label}>{label}</label>}
-    </div>
-  )
-}

src/shared/components/Checkbox/index.ts

@@ -1,2 +0,0 @@
-import Checkbox from './Checkbox'
-export default Checkbox

src/shared/components/Dropdown/Dropdown.style.ts

@@ -1,130 +0,0 @@
-import { StyleFn, makeStyles } from './../../utils'
-import { typography, colors, spacing } from './../../theme'
-
-export type DropdownStyleProps = {
-  disabled?: boolean
-  focus?: boolean
-  error?: boolean
-  isActive?: boolean
-}
-
-const wrapper: StyleFn = () => ({
-  display: 'block',
-  maxWidth: '250px',
-  fontFamily: typography.fonts.base,
-})
-
-const container: StyleFn = (_, { disabled }) => ({
-  position: 'relative',
-  width: '100%',
-  height: '48px',
-  display: 'inline-flex',
-  cursor: disabled ? 'not-allowed' : 'default',
-})
-
-const borderBase: StyleFn = () => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'left',
-})
-
-const label: StyleFn = (_, { error }) => ({
-  color: error ? colors.error : colors.gray[400],
-  padding: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
-  backgroundColor: colors.black,
-  fontSize: typography.sizes.body2,
-  '&::selection': {
-    backgroundColor: 'transparent',
-  },
-})
-
-const input: StyleFn = () => ({
-  display: 'none',
-  widht: '100%',
-  margin: `0 ${spacing.xxxxl} 0 ${spacing.s}`,
-  background: 'none',
-  border: 'none',
-  color: colors.white,
-  outline: 'none',
-  fontSize: typography.sizes.body2,
-  padding: '5px 0',
-})
-
-const iconOpen: StyleFn = () => ({
-  color: colors.gray[300],
-  fontSize: typography.sizes.icon.medium,
-  position: 'absolute',
-  top: spacing.m,
-  right: spacing.s,
-})
-
-const iconClose: StyleFn = (_, { error }) => ({
-  color: error ? colors.error : colors.blue[500],
-  fontSize: typography.sizes.icon.medium,
-  position: 'absolute',
-  top: spacing.m,
-  right: spacing.s,
-})
-
-const helper: StyleFn = (_, { error }) => ({
-  color: error ? colors.error : colors.gray[400],
-  fontSize: typography.sizes.caption,
-  margin: `${spacing.xxs} ${spacing.xs}`,
-})
-
-const options: StyleFn = () => ({
-  backgroundColor: colors.gray[700],
-  color: colors.white,
-  display: 'block',
-  width: '100%',
-  position: 'absolute',
-  top: '50px',
-  maxHeight: '145px',
-  overflowX: 'none',
-  overflowY: 'auto',
-})
-
-const option: StyleFn = () => ({
-  padding: spacing.s,
-  fontSize: typography.sizes.body2,
-  '&:hover': {
-    backgroundColor: colors.gray[600],
-  },
-})
-
-const borderColorFromProps: StyleFn = (styles, { error, disabled, isActive, focus }) => {
-  const borderColor = disabled
-    ? colors.gray[200]
-    : error
-    ? colors.error
-    : focus
-    ? colors.blue[500]
-    : isActive
-    ? colors.gray[200]
-    : colors.gray[400]
-
-  return {
-    ...styles,
-    borderColor,
-  }
-}
-
-export const useCSS = (props: DropdownStyleProps) => ({
-  wrapper: makeStyles([wrapper])(props),
-  container: makeStyles([container])(props),
-  border: makeStyles([borderBase, borderColorFromProps])(props),
-  label: makeStyles([label])(props),
-  input: makeStyles([input])(props),
-  iconOpen: makeStyles([iconOpen])(props),
-  iconClose: makeStyles([iconClose])(props),
-  helper: makeStyles([helper])(props),
-  options: makeStyles([options])(props),
-  option: makeStyles([option])(props),
-})

src/shared/components/Dropdown/Dropdown.tsx

@@ -1,99 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { DropdownStyleProps, useCSS } from './Dropdown.style'
-import Icon from '../Icon'
-import { spacing } from '../../theme'
-
-type DropdownOption = {
-  text: string
-  value: string
-}
-
-type DropdownProps = {
-  label: string
-  helper?: string
-  value?: string
-  options: DropdownOption[]
-  onChange?: (option: DropdownOption) => void
-} & DropdownStyleProps
-
-export default function Dropdown({
-  label,
-  helper = '',
-  value = '',
-  options = [],
-  disabled = false,
-  onChange = () => {},
-  ...styleProps
-}: DropdownProps) {
-  const inputRef = useRef(null)
-  const [isActive, setIsActive] = useState(!!value)
-  const [inputTextValue, setInputTextValue] = useState(
-    value ? options.find(({ value: optionValue = '' }) => optionValue === value)?.text : ''
-  )
-  const [showOptions, setShowOptions] = useState(false)
-  const styles = useCSS({ isActive, disabled, ...styleProps })
-
-  function onToggleDropdown(): void {
-    if (!disabled) {
-      setShowOptions(!showOptions)
-    }
-  }
-
-  function onOptionSelected(option: DropdownOption): void {
-    setIsActive(false)
-    setInputTextValue(option.text)
-    onChange(option)
-  }
-
-  return (
-    <div css={styles.wrapper}>
-      <div css={styles.container} onClick={onToggleDropdown}>
-        <div css={styles.border}>
-          <div
-            css={styles.label}
-            style={
-              !inputTextValue && !isActive
-                ? {}
-                : {
-                    position: 'absolute',
-                    top: '-8px',
-                    left: '5px',
-                    fontSize: '0.7rem',
-                    padding: `0 ${spacing.xs}`,
-                  }
-            }
-          >
-            {label}
-          </div>
-          <input
-            css={styles.input}
-            style={{ display: !!inputTextValue || isActive ? 'block' : 'none' }}
-            ref={inputRef}
-            type="text"
-            disabled={true}
-            value={inputTextValue}
-          />
-          <Icon
-            name={showOptions ? 'chevron-up' : 'chevron-down'}
-            css={showOptions ? styles.iconClose : styles.iconOpen}
-          />
-        </div>
-        {showOptions && (
-          <div css={styles.options}>
-            {options.map((option, index) => (
-              <div
-                key={`${label}-${index}`}
-                css={styles.option}
-                defaultValue={option.value}
-                onClick={() => onOptionSelected(option)}
-              >
-                {option.text}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-      {!!helper && <p css={styles.helper}>{helper}</p>}
-    </div>
-  )
-}

src/shared/components/Dropdown/index.ts

@@ -1,2 +0,0 @@
-import Dropdown from './Dropdown'
-export default Dropdown

src/shared/components/Gallery/Gallery.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { spacing, typography } from '../../theme'
+import { sizes, typography } from '../../theme'
 
 import { makeStyles, StyleFn } from '../../utils'
 
@@ -16,7 +16,7 @@ export const HeadingContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: ${spacing.m};
+  margin-bottom: ${sizes(4)};
 
   > h4 {
     font-size: ${typography.sizes.h5};
@@ -31,7 +31,7 @@ const headingContainer: StyleFn = () => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'baseline',
-  marginBottom: spacing.m,
+  marginBottom: sizes(4),
   '& > h4': {
     fontSize: '1.25rem',
     margin: 0,

src/shared/components/GlobalStyle/GlobalStyle.tsx

@@ -33,11 +33,11 @@ const globalStyles = css`
   }
 
   :root {
-    --global-horizontal-padding: ${sizes.b4}px;
+    --global-horizontal-padding: ${sizes(4)};
   }
   @media screen and (min-width: ${breakpoints.medium}) {
     :root {
-      --global-horizontal-padding: ${sizes.b8}px;
+      --global-horizontal-padding: ${sizes(8)};
     }
   }
 `

src/shared/components/Grid/Grid.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import useResizeObserver from 'use-resize-observer'
-import { spacing, breakpoints } from '../../theme'
+import { sizes, breakpoints } from '../../theme'
 import { MIN_VIDEO_PREVIEW_WIDTH } from '../VideoPreview'
 
 const toPx = (n: number | string) => (typeof n === 'number' ? `${n}px` : n)
@@ -31,7 +31,7 @@ type GridProps = {
 
 const Grid: React.FC<GridProps> = ({
   className,
-  gap = spacing.xl,
+  gap = sizes(6),
   onResize,
   repeat = 'fill',
   maxColumns = 6,

src/shared/components/InfiniteVideoGrid/InfiniteVideoGrid.tsx

@@ -154,7 +154,7 @@ const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
 }
 
 const Title = styled.h4`
-  margin: 0 0 ${sizes.b4};
+  margin: 0 0 ${sizes(4)};
   font-size: ${typography.sizes.h5};
 `
 

src/shared/components/Searchbar/Searchbar.style.tsx

@@ -4,7 +4,7 @@ import Button from '../Button'
 import { Icon } from '@/shared/components'
 
 export const StyledIcon = styled(Icon)`
-  height: 24px;
+  height: ${sizes(6)};
   color: ${colors.white};
 `
 
@@ -12,7 +12,7 @@ export const Input = styled.input`
   width: 100%;
   height: 100%;
   border: unset;
-  padding: 14px ${sizes.b3}px;
+  padding: 14px ${sizes(3)};
   background: none;
   color: ${colors.white};
 
@@ -32,7 +32,7 @@ export const CancelButton = styled(Button)`
   position: absolute;
   right: 0;
   border: none;
-  padding: 14px ${sizes.b3}px;
+  padding: 14px ${sizes(3)};
   color: ${colors.white};
   :focus,
   :hover {
@@ -49,9 +49,9 @@ export const Container = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  height: ${sizes.b1 * 14}px;
+  height: ${sizes(14)};
   background-color: ${colors.gray[800]};
-  padding-left: ${sizes.b4}px;
+  padding-left: ${sizes(4)};
   :focus-within {
     outline: 1px solid ${colors.gray[500]};
   }

src/shared/components/SeriesPreview/SeriesPreview.style.tsx

@@ -1,53 +0,0 @@
-import { typography, colors, spacing } from '../../theme'
-import { StyleFn, makeStyles } from '../../utils'
-
-export type SeriesPreviewStyleProps = {
-  width?: number
-  height?: number
-  poster?: string
-}
-const container: StyleFn = (_, { poster, width = 200, height = 396 }) => ({
-  minHeight: height,
-  minWidth: width,
-  backgroundImage: poster
-    ? ` linear-gradient(to bottom, transparent, ${colors.black}), url(${poster})`
-    : `linear-gradient(${colors.gray[400]}, ${colors.gray[700]})`,
-  backgroundSize: 'cover',
-  display: 'flex',
-  alignItems: 'flex-end',
-  justifyContent: 'center',
-  color: colors.gray[300],
-})
-
-const info: StyleFn = () => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginBottom: spacing.l,
-})
-
-const text: StyleFn = () => ({
-  display: 'flex',
-  flexDirection: 'column',
-  marginTop: spacing.xs,
-  '& > h4': {
-    margin: 0,
-  },
-  '& > span': {
-    marginTop: spacing.xxs,
-    fontSize: typography.sizes.subtitle2,
-  },
-})
-
-const avatar: StyleFn = () => ({
-  width: 46,
-  height: 46,
-})
-
-export const useCSS = (props: SeriesPreviewStyleProps) => ({
-  container: makeStyles([container])(props),
-  info: makeStyles([info])(props),
-  text: makeStyles([text])(props),
-  avatar: makeStyles([avatar])(props),
-})

src/shared/components/SeriesPreview/SeriesPreview.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { SerializedStyles } from '@emotion/core'
-import { useCSS, SeriesPreviewStyleProps } from './SeriesPreview.style'
-import Avatar from '../Avatar/Avatar'
-
-type SeriesPreviewProps = {
-  series: string
-  channel: string
-  channelAvatar: string
-  poster: string
-  outerCss: SerializedStyles
-} & SeriesPreviewStyleProps
-
-export default function SeriesPreview({
-  series,
-  channel,
-  channelAvatar,
-  poster,
-  outerCss,
-  ...styleProps
-}: Partial<SeriesPreviewProps>) {
-  const styles = useCSS({ poster, ...styleProps })
-  return (
-    <article css={[styles.container, outerCss]}>
-      <div css={styles.info}>
-        <Avatar img={channelAvatar} outerStyles={styles.avatar} />
-        <div css={styles.text}>
-          <h4>{series}</h4>
-          <span>{channel}</span>
-        </div>
-      </div>
-    </article>
-  )
-}

src/shared/components/SeriesPreview/index.ts

@@ -1,2 +0,0 @@
-import SeriesPreview from './SeriesPreview'
-export default SeriesPreview

src/shared/components/Sidenav/Sidenav.style.ts

@@ -1,4 +1,4 @@
-import theme from '../../theme'
+import { sizes, colors, typography } from '../../theme'
 import { makeStyles, StyleFn } from '../../utils'
 
 export const SIDENAV_WIDTH = 56
@@ -17,14 +17,14 @@ const nav: StyleFn = () => ({
 
   overflow: 'hidden',
 
-  padding: `${theme.spacing.xxl} ${theme.spacing.m}`,
+  padding: `${sizes(8)} ${sizes(4)}`,
 
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
 
-  backgroundColor: theme.colors.blue[700],
-  color: theme.colors.white,
+  backgroundColor: colors.blue[700],
+  color: colors.white,
 })
 
 const expandButton: StyleFn = () => ({
@@ -51,7 +51,7 @@ const navItemsWrapper: StyleFn = () => ({
 
 const navItemContainer: StyleFn = () => ({
   ':not(:first-child)': {
-    marginTop: theme.spacing.xxxl,
+    marginTop: sizes(10),
   },
   display: 'flex',
   flexDirection: 'column',
@@ -61,16 +61,16 @@ const navItem: StyleFn = () => ({
   display: 'flex',
   alignItems: 'center',
   '> span': {
-    marginLeft: theme.spacing.xxl,
+    marginLeft: sizes(8),
     fontWeight: 'bold',
-    fontFamily: theme.typography.fonts.headers,
-    fontSize: theme.typography.sizes.h5,
+    fontFamily: typography.fonts.headers,
+    fontSize: typography.sizes.h5,
     lineHeight: 1,
   },
 })
 
 const navSubitemsWrapper: StyleFn = () => ({
-  paddingLeft: `calc(${theme.typography.sizes.icon.xlarge} + ${theme.spacing.xxl})`,
+  paddingLeft: `calc(${typography.sizes.icon.xlarge} + ${sizes(8)})`,
   overflow: 'hidden',
   '> div': {
     display: 'flex',
@@ -79,11 +79,11 @@ const navSubitemsWrapper: StyleFn = () => ({
 })
 
 const navSubitem: StyleFn = () => ({
-  fontSize: theme.typography.sizes.body2,
-  fontFamily: theme.typography.fonts.base,
-  marginTop: theme.spacing.xxl,
+  fontSize: typography.sizes.body2,
+  fontFamily: typography.fonts.base,
+  marginTop: sizes(8),
   ':first-child': {
-    marginTop: theme.spacing.xl,
+    marginTop: sizes(6),
   },
 })
 

src/shared/components/Tabs/Tabs.style.ts

@@ -1,4 +1,4 @@
-import { colors, spacing, typography } from '../../theme'
+import { colors, sizes, typography } from '../../theme'
 import { makeStyles, StyleFn } from '../../utils'
 
 export type TabsStyleProps = Record<string, unknown>
@@ -13,7 +13,7 @@ const tabs: StyleFn = () => ({
 })
 const tab: StyleFn = () => ({
   flexBasis: 'content',
-  padding: `${spacing.m} ${spacing.l}`,
+  padding: `${sizes(4)} ${sizes(5)}`,
   cursor: 'pointer',
   borderBottom: `3px solid ${colors.gray[900]}`,
   minWidth: '100px',

src/shared/components/ToggleButton/ToggleButton.styles.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/core'
 
 import Button from '../Button'
 import type { ButtonStyleProps } from '../Button/Button.style'
-import { spacing, colors } from '../../theme'
+import { sizes, colors } from '../../theme'
 
 export type ToggleButtonStyleProps = {
   toggled: boolean
@@ -13,8 +13,8 @@ const hoverTransition = ({ toggled, disabled = false, variant }: ToggleButtonSty
   !toggled && !disabled
     ? css`
         &:hover {
-          transform: translate3d(-${spacing.xxs}, -${spacing.xxs}, 0);
-          box-shadow: ${spacing.xxs} ${spacing.xxs} 0 ${variant === 'primary' ? colors.blue[300] : colors.blue[500]};
+          transform: translate3d(-${sizes(1)}, -${sizes(1)}, 0);
+          box-shadow: ${sizes(1)} ${sizes(1)} 0 ${variant === 'primary' ? colors.blue[300] : colors.blue[500]};
           border-color: ${variant === 'primary' ? '' : colors.white};
           color: ${colors.white};
         }

src/shared/components/VideoPlayer/VideoPlayer.style.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { colors, spacing, typography } from '../../theme'
+import { colors, sizes, typography } from '../../theme'
 import Icon from '../Icon'
 import { css } from '@emotion/core'
 
@@ -32,11 +32,11 @@ export const Container = styled.div<ContainerProps>`
   .vjs-control-bar {
     font-family: ${typography.fonts.base};
     background-color: rgba(0, 0, 0, 0.3);
-    height: ${spacing.xxxxxl} !important;
+    height: ${sizes(16)} !important;
     align-items: center;
 
     /* account for progress bar on top */
-    padding: 5px ${spacing.xxl} 0;
+    padding: 5px ${sizes(8)} 0;
 
     .vjs-control {
       height: 30px;
@@ -92,8 +92,8 @@ export const Container = styled.div<ContainerProps>`
     .vjs-progress-control {
       position: absolute;
       top: 0;
-      left: ${spacing.xxl};
-      width: calc(100% - 2 * ${spacing.xxl});
+      left: ${sizes(8)};
+      width: calc(100% - 2 * ${sizes(8)});
       height: 5px;
 
       .vjs-progress-holder {

src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { fluidRange } from 'polished'
-import { colors, spacing, typography } from '../../theme'
+import { colors, sizes, typography } from '../../theme'
 import Avatar from '../Avatar'
 import Icon from '../Icon'
 import { HOVER_BORDER_SIZE, fadeInAnimation } from './VideoPreviewBase.styles'
@@ -62,7 +62,7 @@ export const ProgressOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  height: ${spacing.xxs};
+  height: ${sizes(1)};
   background-color: ${colors.white};
 `
 
@@ -77,9 +77,9 @@ export const ProgressBar = styled.div`
 
 export const CoverDurationOverlay = styled.div`
   position: absolute;
-  bottom: ${spacing.xs};
-  right: ${spacing.xs};
-  padding: ${spacing.xxs} ${spacing.xs};
+  bottom: ${sizes(2)};
+  right: ${sizes(2)};
+  padding: ${sizes(1)} ${sizes(2)};
   background-color: ${colors.black};
   color: ${colors.white};
   font-size: ${typography.sizes.body2};

src/shared/components/VideoPreview/VideoPreviewBase.styles.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { css, keyframes } from '@emotion/core'
-import { breakpoints, colors, spacing } from '@/shared/theme'
+import { breakpoints, colors, sizes } from '@/shared/theme'
 import { CoverHoverOverlay, CoverIcon, ProgressOverlay } from './VideoPreview.styles'
 
 export const HOVER_BORDER_SIZE = '2px'
@@ -37,8 +37,8 @@ export const CoverWrapper = styled.div<MainProps>`
 const clickableAnimation = (clickable: boolean) =>
   clickable
     ? css`
-        transform: translate(-${spacing.xs}, -${spacing.xs});
-        box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue['500']};
+        transform: translate(-${sizes(2)}, -${sizes(2)});
+        box-shadow: ${sizes(2)} ${sizes(2)} 0 ${colors.blue['500']};
 
         ${CoverHoverOverlay} {
           opacity: 1;
@@ -83,7 +83,7 @@ export const Container = styled.article<MainProps>`
 
 const mainInfoContainerCss = css`
   @media screen and (min-width: ${breakpoints.medium}) {
-    margin: ${spacing.xxl} 0 0 ${spacing.xl};
+    margin: ${sizes(8)} 0 0 ${sizes(6)};
   }
 `
 
@@ -91,7 +91,7 @@ export const InfoContainer = styled.div<MainProps>`
   min-height: 86px;
   width: 100%;
   display: flex;
-  margin-top: ${({ main }) => (main ? spacing.m : spacing.s)};
+  margin-top: ${({ main }) => (main ? sizes(4) : sizes(3))};
   ${({ main }) => main && mainInfoContainerCss};
 `
 
@@ -99,7 +99,7 @@ export const AvatarContainer = styled.div<ScalesWithCoverProps>`
   width: calc(40px * ${(props) => props.scalingFactor});
   min-width: calc(40px * ${(props) => props.scalingFactor});
   height: calc(40px * ${(props) => props.scalingFactor});
-  margin-right: ${spacing.xs};
+  margin-right: ${sizes(2)};
 `
 
 export const TextContainer = styled.div`
@@ -110,6 +110,6 @@ export const TextContainer = styled.div`
 `
 
 export const MetaContainer = styled.div<MainProps>`
-  margin-top: ${({ main }) => (main ? spacing.s : spacing.xs)};
+  margin-top: ${({ main }) => (main ? sizes(3) : sizes(2))};
   width: 100%;
 `

src/shared/components/index.ts

@@ -1,18 +1,15 @@
 export { default as Avatar } from './Avatar'
 export { default as Button } from './Button'
 export { default as Carousel, CAROUSEL_ARROW_HEIGHT } from './Carousel'
-export { default as Dropdown } from './Dropdown'
 export { default as Link } from './Link'
 export { default as NavButton } from './NavButton'
 export { default as RadioButton } from './RadioButton'
-export { default as Checkbox } from './Checkbox'
 export { default as Tabs } from './Tabs'
 export { default as Tab } from './Tabs/Tab'
 export { default as Tag } from './Tag'
 export { default as Typography } from './Typography'
 export { VideoPreview, VideoPreviewBase, MIN_VIDEO_PREVIEW_WIDTH } from './VideoPreview'
 export { default as VideoPlayer } from './VideoPlayer'
-export { default as SeriesPreview } from './SeriesPreview'
 export { ChannelPreview, ChannelPreviewBase } from './ChannelPreview'
 export { default as HamburgerButton } from './HamburgerButton'
 export { default as Gallery } from './Gallery'

src/shared/stories/04-Tag.stories.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { Tag } from '../components'
-
-export default {
-  title: 'Tag',
-  component: Tag,
-}
-
-export const Default = () => <Tag text="Finance" />
-
-export const Multiple = () => (
-  <div>
-    <Tag text="Finance" />
-    <Tag text="Sports" />
-    <Tag text="Comedy" />
-  </div>
-)

src/shared/stories/07-Dropdown.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../components'
-
-export default {
-  title: 'Dropdown',
-  component: Dropdown,
-}
-
-const options = [
-  {
-    text: 'Option 1',
-    value: '1',
-  },
-  {
-    text: 'Option 2',
-    value: '2',
-  },
-  {
-    text: 'Option 3',
-    value: '3',
-  },
-]
-
-const manyOptions = [
-  {
-    text: 'Option 1',
-    value: '1',
-  },
-  {
-    text: 'Option 2',
-    value: '2',
-  },
-  {
-    text: 'Option 3',
-    value: '3',
-  },
-  {
-    text: 'Option 4',
-    value: '4',
-  },
-  {
-    text: 'Option 5',
-    value: '5',
-  },
-  {
-    text: 'Option 6',
-    value: '6',
-  },
-  {
-    text: 'Option 7',
-    value: '7',
-  },
-  {
-    text: 'Option 8',
-    value: '8',
-  },
-  {
-    text: 'Option 9',
-    value: '9',
-  },
-  {
-    text: 'Option 10',
-    value: '10',
-  },
-]
-
-export const Default = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <Dropdown label="Label" options={options} />
-  </div>
-)
-
-export const DefaultWithValue = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <Dropdown label="Label" options={options} value={options[1].value} />
-  </div>
-)
-
-export const DefaultFocus = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <Dropdown label="Label" options={options} focus={true} />
-  </div>
-)
-
-export const DefaultError = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <Dropdown label="Label" options={options} error={true} />
-  </div>
-)
-
-export const DefaultWithManyOptions = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <Dropdown label="Label" options={manyOptions} />
-  </div>
-)

src/shared/stories/08-Checkbox.stories.tsx

@@ -1,147 +0,0 @@
-import React, { useState } from 'react'
-import { Checkbox } from '../components'
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-}
-
-export const Primary = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        selected={selected}
-        onChange={() => {
-          setSelected(!selected)
-        }}
-      />
-    </div>
-  )
-}
-
-export const PrimaryWithDash = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        icon="dash"
-        selected={selected}
-        onChange={() => {
-          setSelected(!selected)
-        }}
-      />
-    </div>
-  )
-}
-
-export const Error = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        selected={selected}
-        error
-        onChange={() => {
-          setSelected(!selected)
-        }}
-      />
-    </div>
-  )
-}
-
-export const ErrorWithDash = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        selected={selected}
-        error
-        icon="dash"
-        onChange={() => {
-          setSelected(!selected)
-        }}
-      />
-    </div>
-  )
-}
-
-export const Disabled = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ display: 'flex', padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        disabled
-        onChange={() => {
-          setSelected(!selected)
-        }}
-        selected={selected}
-      />
-      <Checkbox disabled icon="check" selected />
-      <Checkbox disabled icon="dash" selected />
-    </div>
-  )
-}
-
-export const WithLabel = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ display: 'flex', padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        onChange={() => {
-          setSelected(!selected)
-        }}
-        selected={selected}
-        label="quite a long label"
-      />
-    </div>
-  )
-}
-
-export const WithLabelStart = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ display: 'flex', padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        onChange={() => {
-          setSelected(!selected)
-        }}
-        selected={selected}
-        label="quite a long label"
-        labelPosition="start"
-      />
-    </div>
-  )
-}
-
-export const WithLabelTop = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ display: 'flex', padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        onChange={() => {
-          setSelected(!selected)
-        }}
-        selected={selected}
-        label="quite a long label"
-        labelPosition="top"
-      />
-    </div>
-  )
-}
-
-export const WithLabelBottom = () => {
-  const [selected, setSelected] = useState(false)
-  return (
-    <div style={{ display: 'flex', padding: '50px 20px', background: 'black' }}>
-      <Checkbox
-        onChange={() => {
-          setSelected(!selected)
-        }}
-        selected={selected}
-        label="quite a long label"
-        labelPosition="bottom"
-      />
-    </div>
-  )
-}

src/shared/stories/09-RadioButton.stories.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react'
-import { RadioButton } from '../components'
-
-export default {
-  title: 'RadioButton',
-  component: RadioButton,
-}
-
-export const Primary = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton checked={checked} onClick={() => setChecked(!checked)} />
-}
-
-export const SelectedDisabled = () => <RadioButton checked disabled />
-
-export const UnselectedDisabled = () => <RadioButton disabled />
-export const Error = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton error checked={checked} onClick={() => setChecked(!checked)} />
-}
-
-export const WithLabel = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton label="Label" checked={checked} onClick={() => setChecked(!checked)} />
-}
-
-export const WithLabelStart = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton label="Label" position="start" checked={checked} onClick={() => setChecked(!checked)} />
-}
-
-export const WithLabelBottom = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton label="A longer label" position="bottom" checked={checked} onClick={() => setChecked(!checked)} />
-}
-export const WithLabelTop = () => {
-  const [checked, setChecked] = useState(false)
-  return <RadioButton label="A longer label" position="top" checked={checked} onClick={() => setChecked(!checked)} />
-}

src/shared/stories/10-Header.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { Header, Button } from '../components'
-
-export default {
-  title: 'Header',
-  component: Header,
-}
-
-export const Default = () => (
-  <Header
-    text="A user governed video platform"
-    subtext="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore."
-    background="https://raw.githubusercontent.com/Joystream/design/master/illustrations/SVG/mask.svg"
-  >
-    <Button text="Play" />
-    <Button text="Share" type="secondary" />
-  </Header>
-)

src/shared/theme/index.ts

@@ -1,9 +1,8 @@
 import typography from './typography'
 import colors from './colors'
-import spacing from './spacing'
-import sizes from './sizes'
+import { sizes } from './sizes'
 import breakpoints from './breakpoints'
 import * as fragments from './fragments'
 
-export { typography, breakpoints, spacing, sizes, colors, fragments }
-export default { typography, breakpoints, spacing, sizes, colors, fragments }
+export { typography, breakpoints, sizes, colors, fragments }
+export default { typography, breakpoints, sizes, colors, fragments }

src/shared/theme/sizes.ts

@@ -1,16 +1,6 @@
 const base = 4
 
-const sizes = {
-  b1: base,
-  b2: base * 2, // 8px
-  b3: base * 3, // 12px
-  b4: base * 4, // 16px
-  b5: base * 5, // 20px
-  b6: base * 6, // 24px
-  b8: base * 8, // 32px
-  b10: base * 10, // 40px
-  b12: base * 12, // 48px
-  b16: base * 16, // 64px
+export function sizes<B extends boolean>(n: number, raw?: B): B extends false ? string : number
+export function sizes(n: number, raw?: boolean) {
+  return raw ? base * n : `${base * n}px`
 }
-
-export default sizes

src/shared/theme/spacing.ts

@@ -1,23 +0,0 @@
-import sizes from './sizes'
-
-const rawSpacing = {
-  xxs: sizes.b1,
-  xs: sizes.b2,
-  s: sizes.b3,
-  m: sizes.b4,
-  l: sizes.b5,
-  xl: sizes.b6,
-  xxl: sizes.b8,
-  xxxl: sizes.b10,
-  xxxxl: sizes.b12,
-  xxxxxl: sizes.b16,
-}
-
-type Size = keyof typeof rawSpacing
-
-const spacing = Object.keys(rawSpacing).reduce((acc, key) => {
-  acc[key as Size] = `${rawSpacing[key as Size]}px`
-  return acc
-}, {} as Record<Size, string>)
-
-export default spacing

src/views/BrowseView.tsx

@@ -46,18 +46,18 @@ const BrowseView: React.FC<RouteComponentProps> = () => {
 }
 
 const Header = styled(Typography)`
-  margin: ${sizes.b1 * 14}px 0 ${sizes.b10}px 0; // 56px 40px
+  margin: ${sizes(14)} 0 ${sizes(10)} 0; // 56px 40px
 `
 
 const StyledCategoryPicker = styled(CategoryPicker)`
   z-index: 10;
   position: sticky;
   top: 0;
-  padding: ${sizes.b5}px ${sizes.b8}px ${sizes.b2}px;
+  padding: ${sizes(5)} ${sizes(8)} ${sizes(2)};
   margin: 0 calc(-1 * var(--global-horizontal-padding));
   background-color: ${colors.black};
 `
 const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
-  padding-top: ${sizes.b2}px;
+  padding-top: ${sizes(2)};
 `
 export default BrowseView

src/views/ChannelView/ChannelView.style.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import { fluidRange } from 'polished'
 import { Avatar, Placeholder } from '@/shared/components'
-import theme, { breakpoints } from '@/shared/theme'
+import { breakpoints, colors, sizes } from '@/shared/theme'
 import { css } from '@emotion/core'
 
 const SM_TITLE_HEIGHT = '48px'
@@ -74,7 +74,7 @@ export const TitleSection = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;
-  @media (min-width: ${theme.breakpoints.small}) {
+  @media (min-width: ${breakpoints.small}) {
     flex-direction: row;
     align-items: center;
   }
@@ -90,11 +90,11 @@ export const TitleSection = styled.div`
 `
 export const TitleContainer = styled.div`
   max-width: 100%;
-  @media screen and (min-width: ${theme.breakpoints.medium}) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     max-width: 60%;
   }
-  background-color: ${theme.colors.gray[800]};
-  padding: 0 ${theme.sizes.b2}px;
+  background-color: ${colors.gray[800]};
+  padding: 0 ${sizes(2)};
 `
 
 export const Title = styled.h1`
@@ -102,7 +102,7 @@ export const Title = styled.h1`
   font-weight: bold;
   margin: -4px 0 0;
   line-height: ${SM_TITLE_HEIGHT};
-  @media screen and (min-width: ${theme.breakpoints.medium}) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     line-height: ${TITLE_HEIGHT};
   }
 
@@ -119,12 +119,12 @@ export const VideoSection = styled.section`
 const avatarCss = css`
   width: 128px;
   height: 128px;
-  margin-bottom: ${theme.sizes.b3}px;
+  margin-bottom: ${sizes(3)};
 
-  @media (min-width: ${theme.breakpoints.small}) {
+  @media (min-width: ${breakpoints.small}) {
     width: 136px;
     height: 136px;
-    margin: 0 ${theme.sizes.b6}px 0 0;
+    margin: 0 ${sizes(6)} 0 0;
   }
 `
 
@@ -140,7 +140,7 @@ export const AvatarPlaceholder = styled(Placeholder)`
 export const TitlePlaceholder = styled(Placeholder)`
   width: 300px;
   height: ${SM_TITLE_HEIGHT};
-  @media screen and (min-width: ${theme.breakpoints.medium}) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     height: ${TITLE_HEIGHT};
   }
 `

src/views/SearchView/AllResultsTab.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Search_search_item_Channel, Search_search_item_Video } from '@/api/queries/__generated__/Search'
 import { Placeholder, VideoPreviewBase } from '@/shared/components'
 import styled from '@emotion/styled'
-import { spacing, typography } from '@/shared/theme'
+import { sizes, typography } from '@/shared/theme'
 import { ChannelGallery, VideoGallery, VideoPreview } from '@/components'
 
 type AllResultsTabProps = {
@@ -57,7 +57,7 @@ const AllResultsTab: React.FC<AllResultsTabProps> = ({ videos: allVideos, channe
 }
 
 const SectionHeader = styled.h5`
-  margin: 0 0 ${spacing.m};
+  margin: 0 0 ${sizes(4)};
   font-size: ${typography.sizes.h5};
 `
 

src/views/SearchView/EmptyFallback.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@/shared/components'
 import { sizes, colors } from '@/shared/theme'
 
 const Container = styled.div`
-  margin: ${sizes.b10 * 2}px auto 0;
+  margin: ${sizes(20)} auto 0;
   display: grid;
   place-items: center;
   > svg {
@@ -19,7 +19,7 @@ const Message = styled.div`
   flex-direction: column;
   text-align: center;
   margin-top: 90px;
-  margin-bottom: ${sizes.b10}px;
+  margin-bottom: ${sizes(10)};
   > p {
     margin: 0;
     line-height: 1.75;

src/views/SearchView/SearchView.tsx

@@ -54,9 +54,9 @@ const SearchView: React.FC<SearchViewProps> = ({ search = '' }) => {
 }
 
 const Container = styled.div`
-  margin: ${sizes.b4} 0;
-  & > * {
-    margin-bottom: ${sizes.b12}px;
+  margin: ${sizes(4)} 0;
+  > * {
+    margin-bottom: ${sizes(12)};
   }
 `
 

src/views/VideoView/VideoView.style.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { ChannelAvatar, Placeholder } from '@/shared/components'
-import theme from '@/shared/theme'
+import { sizes, colors, typography } from '@/shared/theme'
 
 export const Container = styled.div`
   display: flex;
@@ -23,26 +23,26 @@ export const PlayerPlaceholder = styled(Placeholder)`
 
 export const DescriptionPlaceholder = styled(Placeholder)`
   height: 28px;
-  margin: ${theme.spacing.m} 0 0;
+  margin: ${sizes(4)} 0 0;
 `
 
 export const InfoContainer = styled.div`
-  padding: ${theme.spacing.xxl} 0;
+  padding: ${sizes(8)} 0;
 `
 
 export const Title = styled.h2`
-  font-size: ${theme.typography.sizes.h2};
+  font-size: ${typography.sizes.h2};
   margin: 0;
 `
 
 export const Meta = styled.span`
   display: block;
-  margin-top: ${theme.spacing.xxs};
-  color: ${theme.colors.gray[300]};
+  margin-top: ${sizes(1)};
+  color: ${colors.gray[300]};
 `
 
 export const ChannelContainer = styled.div`
-  margin-top: ${theme.spacing.m};
+  margin-top: ${sizes(4)};
 `
 
 export const StyledChannelAvatar = styled(ChannelAvatar)`
@@ -52,13 +52,13 @@ export const StyledChannelAvatar = styled(ChannelAvatar)`
 `
 
 export const DescriptionContainer = styled.div`
-  margin-top: ${theme.spacing.xl};
-  border-top: 1px solid ${theme.colors.gray[800]};
+  margin-top: ${sizes(6)};
+  border-top: 1px solid ${colors.gray[800]};
 
   p {
-    color: ${theme.colors.gray[300]};
+    color: ${colors.gray[300]};
     line-height: 175%;
-    margin: ${theme.spacing.m} 0 0;
+    margin: ${sizes(4)} 0 0;
   }
 `
 
@@ -67,6 +67,6 @@ export const MoreVideosContainer = styled.div`
 `
 
 export const MoreVideosHeader = styled.h5`
-  margin: 0 0 ${theme.spacing.m};
-  font-size: ${theme.typography.sizes.h5};
+  margin: 0 0 ${sizes(4)};
+  font-size: ${typography.sizes.h5};
 `