@devseed-ui/theme-provider

Import

  import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider';

How theming works with Devseed-ui

Each of the components in the devseed-ui library requires a theme wrapper. Users may choose to provide a theme one of two ways:

Styled Components Theme Provider

By wrapping the component(s) with the Styled Components theme provider, users can have granular control over where the theme is applied.

  import styled, { ThemeProvider } from 'styled-components'
  import theme from '../some-dir'

  render(
    <ThemeProvider theme={theme.main}>
      {... components consuming the theme}
    </ThemeProvider>
  )

Devseed-ui Theme Provider

Users looking to apply their theme globally to their application should consider adopting our theme provider. This package applies global styling using styled-component's createGlobalStyles. These styles apply the theme to root elements and supply some niceities that has become a default for our team. Further reading on what is included can be done here.

What is important to note is that all of these global styles can be overridden by creating a global-styles file that is applied as a child of the theme provider.

global-styles.js

  import { createGlobalStyle, css } from 'styled-components'

  const baseStyles = css`
    /* insert overrides for global styles from DevseedUiThemeProvider here */

    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

  `
  export default createGlobalStyle`
    ${baseStyles}

app.js -- or wherever you add the theme

  ...
  render (
  <DevseedUiThemeProvider theme={theme.main}>
    <GlobalStyles />
    {components...}
  <DevseedUiThemeProvider
  )

Theme

In order for the devseed-ui components to display correctly, the theme should follow this template:

  import { rgba, tint } from 'polished'

  let color = {
    base: '#2B3940',
    primary: '#00B074',
    secondary: '#F8CE32',
    tertiary: '#F46036',
    quaternary: '#33658A'
  }
  color = {
    ...color,
    background: '#FFFFFF',
    surface: '#FFFFFF',
    mist: rgba(color.base, 0.04),
    shadow: rgba(color.base, 0.08),
    smoke: rgba(color.base, 0.16),
    lightgray: '#EEEEEE',
    secondarylight: '#C3E2E7',
    gray: '#DBDBDB',
    darkgray: '#666666',
    link: color.primary,
    danger: color.tertiary,
    success: color.primary,
    warning: color.secondary,
    info: color.quaternary
  }
  color = {
    ...color,
    silk: `radial-gradient(farthest-side, ${color.surface}, ${rgba(color.surface, 0.64)})`
  }
  const type = {
    base: {
      root: '16px',
      size: '1rem',
      line: '1.5',
      color: tint(0.08, color.base),
      family: '"Inter", sans-serif',
      style: 'normal',
      weight: 300,
      light: 300,
      regular: 400,
      medium: 400,
      bold: 700
    },
    heading: {
      family: '"Inter", sans-serif',
      style: 'normal',
      weight: 700,
      light: 300,
      regular: 400,
      medium: 400,
      bold: 700
    }
  }
  const shape = {
    rounded: '0.25rem',
    ellipsoid: '320rem'
  }
  const layout = {
    space: '1rem',
    border: '1px',
    min: '960px',
    max: '1280px'
  }
  const boxShadow = {
    inset: 'inset 0px 0px 3px 0px rgba(0,0,0,0.2);',
    input: '0 -1px 1px 0 rgba(0,0,0,0.08), 0 2px 6px 0 rgba(0,0,0,0.16);'
  }
  export default {
    main: {
      layout,
      color,
      type,
      shape,
      boxShadow
    }
  }

API Documentation

rows:
  - Prop name: "theme"
    Type: "object"
    Description: "Object defining theme values expected by devseed-ui components"
    Default value: "devseed-ui theme"