We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

WTCProvider component

A WTCProvider component. This enables you to provide a custom theme for this component library. The theme must follow the same structure as the wtc theme file. An example of this can be found at the bottom of this page.

Install

npm i @wethecurious/wtc-ui-library

Usage

Import it into your project

import { WTCProvider } from '@wethecurious/wtc-ui-library'

Prop

<WTCProvider theme={props.theme}>
  <App />
</WTCProvider>

Props

PropDescriptionDefault
isVisibleModal Visibility
maxWidthModal max width

Example theme

const theme = {
  owner: "WeTheCurious",
  type: "theme",
  description: "Light",
  version: "2.0",
  icon: {
    defaults: {
      fill: 'none',
      stroke: '#000',
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeWidth: 4,
      xmlns: 'http://www.w3.org/2000/svg'
    },
    addOutline: {
      svg: {
        path: {
          d: 'M45.7 23.9a21.9 21.9 0 1 0-21.8 21.8 21.9 21.9 0 0 0 21.8-21.8zM23.8 13.5v21.2M34.4 24.1H13.2'
        },
        viewBox: '-0.2 -0.2 48 48'
      }
    },
    add: {
      svg: {
        path: {
          d: 'M2 24h43.9M24 2v43.9'
        },
        viewBox: '-0.05 0 48 48'
      }
    },
    collapse: {
      svg: {
        path: {
          d: 'M45.9 2l-22 22L2 2'
        },
        viewBox: '0 -13 48 48'
      }
    },
    delete: {
      svg: {
        path: {
          d: 'M2 2l43.8 43.8M2 45.8L45.8 2'
        },
        viewBox: '0 0 47.8 47.8'
      }
    },
    deleteOutline: {
      svg: {
        path: {
          d: 'M39.3 8.4a21.8 21.8 0 1 0 0 30.9 21.9 21.9 0 0 0 0-30.9zM16.5 16.5l15 15M31.5 16.5l-15 15'
        },
        viewBox: '-0.05 0 48 48'
      }
    },
    expand: {
      svg: {
        path: {
          d: 'M2 2l22 22L2 45.9'
        },
        viewBox: '-13 0 48 48'
      }
    },
    remove: {
      svg: {
        path: {
          d: 'M2 2h43.9'
        },
        viewBox: '0 -22 48 48'
      }
    },
    removeOutline: {
      svg: {
        path: {
          d: 'M45.7 23.9a21.9 21.9 0 1 0-21.8 21.8 21.9 21.9 0 0 0 21.8-21.8zM34.4 24.1H13.2'
        },
        viewBox: '-0.2 0 48 48'
      }
    },
    share: {
      svg: {
        path: {
          d: 'M41.1 2a4.7 4.7 0 0 1 4.6 4.6 4.6 4.6 0 0 1-9.2 0A4.7 4.7 0 0 1 41.1 2zM6.6 28.5a4.6 4.6 0 0 1 0-9.2 4.6 4.6 0 0 1 0 9.2zm34.5 17a4.6 4.6 0 1 1 4.6-4.5 4.6 4.6 0 0 1-4.6 4.5zM11 26.6l25 12.2M36.6 8.4L11.2 21.8'
        },
        viewBox: '-0.1 -0.3 48 48'
      }
    },
    close: {
      svg: {
        path: {
          d: 'M2 2l43.8 43.8M2 45.8L45.8 2'
        },
        viewBox: '-0.1 -0.1 48 48'
      }
    },
    down: {
      svg: {
        path: {
          d: 'M2 23.7l21.6 21.6 21.7-21.7M23.7 2v43.1'
        },
        viewBox: '-0.35 -0.35 48 48'
      }
    },
    groupOutline: {
      svg: {
        rect: {
          x: 1.9,
          y: 14.6,
          width: 31.2,
          height: 31.23,
          rx: 4.8,
          ry: 4.8,
          strokeWidth: 3.808
        },
        path: [
          {
            d: 'M7.5 8.6h25.4a6.5 6.5 0 0 1 6.5 6.4v25.5'
          },
          {
            d: 'M9.5 2h29.1A7.4 7.4 0 0 1 46 9.3v29.2'
          }
        ],
        viewBox: '0 -0.15 48 48'
      }
    },
    group: {
      svg: {
        rect: {
          x: 1.9,
          y: 14.6,
          width: 31.2,
          height: 31.23,
          rx: 4.8,
          ry: 4.8,
          fill: '#000',
          strokeWidth: 3.808
        },
        path: [
          {
            d: 'M7.5 8.6h25.4a6.5 6.5 0 0 1 6.5 6.4v25.5'
          },
          {
            d: 'M9.5 2h29.1A7.4 7.4 0 0 1 46 9.3v29.2'
          }
        ],
        viewBox: '0 -0.15 48 48'
      }
    },
    left: {
      svg: {
        path: {
          d: 'M23.6 2L2 23.6l21.7 21.7M45.3 23.7h-43'
        },
        viewBox: '-0.35 -0.35 48 48'
      }
    },
    levelBack: {
      svg: {
        circle: {
          cx: 24,
          cy: 24,
          r: 22,
        },
        path: {
          d: 'M24 15.8L15.8 24l8.2 8.2M32 24H16'
        },
        viewBox: '0 0 48 48'
      }
    },
    levelUp: {
      svg: {
        path: {
          d: 'M45.3 23.6L23.7 2 2 23.7M23.7 45.3v-43'
        },
        viewBox: '-0.35 -0.35 48 48'
      }
    },
    list: {
      svg: {
        circle: [
          {
            cx: 6,
            cy: 6,
            r: 6,
            fill: '#000',
          },
          {
            cx: 6,
            cy: 24,
            r: 6,
            fill: '#000'
          },
          {
            cx: 6,
            cy: 42,
            r: 6,
            fill: '#000'
          }
        ],
        viewBox: '-18 0 48 48'
      }
    },
    menu: {
      svg: {
        path: {
          d: 'M2 2h44M2 36h44M2 19h44'
        },
        viewBox: '0 -5 48 48'
      }
    },
    next: {
      svg: {
        path: {
          d: 'M23.8 2l21.7 21.8-21.7 21.7M2 2l21.8 21.8L2 45.5'
        },
        viewBox: '-0.25 -0.25 48 48'
      }
    },
    previous: {
      svg: {
        path: {
          d: 'M23.8 45.5L2 23.7 23.7 2M45.5 45.5L23.8 23.7 45.5 2'
        },
        viewBox: '-0.25 -0.25 48 48'
      }
    },
    right: {
      svg: {
        path: {
          d: 'M23.7 45.3l21.6-21.6L23.6 2M2 23.7h43.1'
        },
        viewBox: '-0.35 -0.35 48 48'
      }
    },
    search: {
      svg: {
        path: {
          d: 'M45.8 44.2L29.9 28.3'
        },
        circle: {
          cx: '17.7',
          cy: '17.7',
          r: '15.7'
        },
        viewBox: '-0.16 -0.41 48 48'
      }
    },
    critical: {
      svg: {
        circle: {
          cx: 23.9,
          cy: 23.9,
          r: 23.9,
          fill: '#F00',
        },
        path: {
          stroke: '#000',
          d: 'M16.5 16.6l15 14.9M31.5 16.6l-15 14.9'
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    criticalOutline: {
      svg: {
        path: {
          strokeWidth:0,
          fill: '#000',
          d: 'M47.8 23.9A23.9 23.9 0 1 1 23.9 0a23.9 23.9 0 0 1 23.9 23.9zm-26.5 9.3a2.6 2.6 0 0 0 2.7 2.7 2.7 2.7 0 0 0 0-5.4 2.6 2.6 0 0 0-2.7 2.7zm.8-5.5h3.8l.4-15.7h-4.5z',
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    errorOutline: {
      svg: {
        path: {
          strokeWidth:0,
          fill: '#000',
          d: 'M23.9 0a23.9 23.9 0 1 0 23.9 23.9A23.9 23.9 0 0 0 23.9 0zm9 30.1a2.1 2.1 0 0 1 0 2.9 2.2 2.2 0 0 1-2.8 0L24 26.9 18 33a2 2 0 0 1-1.5.5 1.9 1.9 0 0 1-1.4-.5 2.1 2.1 0 0 1 0-2.9l6.1-6-6.1-6.1a1.9 1.9 0 0 1 0-2.8 2.1 2.1 0 0 1 2.9 0l6 6 6.1-6a2 2 0 0 1 2.8 2.8l-6.1 6.1z'
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    disabled: {
      svg: {
        strokeWidth:0,
        fill: '#000',
        path: {
          d: 'M23.9 47.9a24 24 0 1 1 24-24 24 24 0 0 1-24 24zM8.5 11.3A20.2 20.2 0 0 0 4 23.9a19.9 19.9 0 0 0 32.5 15.5zm2.8-2.8l28 28h.1A19.9 19.9 0 0 0 23.9 4a20.2 20.2 0 0 0-12.6 4.5z'
        },
        viewBox: '-0.1 -0.1 48 48'
      }
    },
    ok: {
      svg: {
        circle: {
          cx: 23.9,
          cy: 23.9,
          r: 23.9,
          fill: 'green'
        },
        path: {
          fill: '#000',
          d: 'M20 33.5l-8.9-8.9 1.7-1.7 7.2 7.3 15-15 1.7 1.6L20 33.5z'
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    okOutline: {
      svg: {
        path: {
          strokeWidth:0,
          fill: '#000',
          d: 'M47.9 23.9A24 24 0 1 1 23.9 0a24.1 24.1 0 0 1 24 23.9zm-11.2-7.1L35 15.2l-15 15-7.2-7.3-1.7 1.7 8.9 8.9z'
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    unknown: {
      svg: {
        circle: {
          cx: 23.9,
          cy: 23.9,
          r: 23.9,
          fill: 'grey',
        },
        path: {
          d: 'M21.8 27.8v-.6c0-4.1 4.6-5.3 4.6-8.4a3.1 3.1 0 0 0-3.4-3.1 7.9 7.9 0 0 0-4.3 1.6L17 14.1a12 12 0 0 1 6.7-2.1c4.2 0 7.1 2.6 7.1 6.2s-4.9 6.5-5.3 9.3v.3zm1.8 2.8a2.5 2.5 0 0 1 2.7 2.5 2.7 2.7 0 1 1-5.3 0 2.4 2.4 0 0 1 2.6-2.5z',
          fill: '#000',
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    unknownOutline: {
      svg: {
        path: {
          strokeWidth:0,
          fill: '#000',
          d: 'M47.8 23.9A23.9 23.9 0 1 1 23.9 0a23.9 23.9 0 0 1 23.9 23.9zm-22.3 3.9v-.3c.4-2.8 5.3-4.3 5.3-9.3S27.9 12 23.7 12a12 12 0 0 0-6.7 2.1l1.7 3.2a7.9 7.9 0 0 1 4.3-1.6 3.1 3.1 0 0 1 3.4 3.1c0 3.1-4.6 4.3-4.6 8.4v.6zM21 33.1a2.7 2.7 0 1 0 5.3 0 2.5 2.5 0 0 0-2.7-2.5 2.4 2.4 0 0 0-2.6 2.5z',
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    warning: {
      svg: {
        circle: {
          cx: 23.9,
          cy: 23.9,
          r: 23.9,
          fill: '#F00',
        },
        path: {
          d: 'M24 30.5a2.7 2.7 0 0 1 0 5.4 2.6 2.6 0 0 1-2.7-2.7 2.6 2.6 0 0 1 2.7-2.7zM21.8 12h4.5l-.4 15.7h-3.8z',
          fill: '#000',
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
    warningOutline: {
      svg: {
        path: {
          strokeWidth:0,
          fill: '#000',
          d: 'M47.8 23.9A23.9 23.9 0 1 1 23.9 0a23.9 23.9 0 0 1 23.9 23.9zm-26.5 9.3a2.6 2.6 0 0 0 2.7 2.7 2.7 2.7 0 0 0 0-5.4 2.6 2.6 0 0 0-2.7 2.7zm.8-5.5h3.8l.4-15.7h-4.5z',
        },
        viewBox: '-0.105 -0.105 48 48'
      }
    },
  },
  font: {
    family: {
      light: "WeTheCurious-Light, Arial, sans-serif",
      regular: "WeTheCurious-Regular, Arial, sans-serif",
      bold: "WeTheCurious-Bold, Arial, sans-serif",
      heavy: "WeTheCurious-Heavy, Arial, sans-serif"
    },
    weight: {
      light: 100,
      regular: 400,
      bold: 700,
      heavy: 900
    }
  },
  radius: {
    topLeft: "0.0em 1.25em 1.25em 1.25em",
    topRight: "1.25em 0.0em 1.25em 1.25em",
    bottomRight: "1.25em 1.25em 0.0em 1.25em",
    bottomLeft: "1.25em 1.25em 1.25em 0.0em"
  },
  buttonRadius: {
    topLeft: "0.0em 1.6em 1.6em 1.6em",
    topRight: "1.6em 0.0em 1.6em 1.6em",
    bottomRight: "1.6em 1.6em 0.0em 1.6em",
    bottomLeft: "1.6em 1.6em 1.6em 0.0em"
  },
  color: {
    primary: "#209A8D",
    primaryInverse: "#28AEAF",
    secondary: "#28AEAF",
    secondaryInverse: "#51D5D6",
    appbarPrimary: "lightgrey",
    appbarPrimaryInverse: "grey",
    backgroundApp: "#F0F0FA",
    backgroundAppInverse: "#323237",
    backgroundComponent: "#FFFFFF",
    backgroundComponentInverse: "#505055",
    icon: "#209A8D",
    iconInverse: "#28AEAF",
    line: "#323237",
    lineInverse: "#F0F0FA",
    statusCritical: "#e0322a",
    statusCriticalInverse: "#e0322a",
    statusError: "#E0322A",
    statusErrorInverse: "#E0322A",
    statusWarning: "#EA7424",
    statusWarningInverse: "#EA7424",
    statusOk: "#209A8D",
    statusOkInverse: "#28AEAF",
    statusUnknown: "#AAAAAA",
    statusUnknownInverse: "#787878",
    statusDisabled: "#AAAAAA",
    statusDisabledInverse: "#787878",
    textPrimary: "#323232",
    textPrimaryInverse: "#FFFFFF",
    textSecondary: "#6E6E6E",
    textSecondaryInverse: "#A5A5A5",
    textAccent: "#209A8D",
    textAccentInverse: "#28AEAF",
    textH1: "#323232",
    textH1Inverse: "#58504a",
    textH2: "#323232",
    textH2Inverse: "#58504a",
    textH3: "#323232",
    textH3Inverse: "#58504a",
    textH4: "#323232",
    textH4Inverse: "#58504a",
    textH5: "#323232",
    textH5Inverse: "#58504a",
    textH6: "#323232",
    textH6Inverse: "#58504a",
    brandOneLow: "#E33A67",
    brandOneLowInverse: "#B5385D",
    brandOneMedium: "#C23582",
    brandOneMediumInverse: "#C23582",
    brandOneHigh: "#B5385D",
    brandOneHighInverse: "#E33A67",
    brandTwoLow: "#FFD840",
    brandTwoLowInverse: "#F9B002",
    brandTwoMedium: "#F9B002",
    brandTwoMediumInverse: "#F9B002",
    brandTwoHigh: "#F9B002",
    brandTwoHighInverse: "#FFD840",
    brandThreeLow: "#A1BF24",
    brandThreeLowInverse: "#3B9E3A",
    brandThreeMedium: "#7AB131",
    brandThreeMediumInverse: "#A1BF24",
    brandThreeHigh: "#3B9E3A",
    brandThreeHighInverse: "#A1BF24",
    brandFourLow: "#28B6DF",
    brandFourLowInverse: "#14549A",
    brandFourMedium: "#008ED0",
    brandFourMediumInverse: "#28B6DF",
    brandFourHigh: "#14549A",
    brandFourHighInverse: "#28B6DF",
    brandFiveLow: "#5D5395",
    brandFiveLowInverse: "#4F386E",
    brandFiveMedium: "#5D5395",
    brandFiveMediumInverse: "#5D5395",
    brandFiveHigh: "#4F386E",
    brandFiveHighInverse: "#5D5395",
    logoOne: "",
    logoOneInverse: "",
    logoTwo: "",
    logoTwoInverse: "",
    logoThree: "",
    logoThreeInverse: "",
    logoFour: "",
    logoFourInverse: "",
    logoFive: "",
    logoFiveInverse: "",
    logoSix: "",
    logoSixInverse: "",
    logoMono: "",
    logoMonoInverse: "",
    modifier: {
      hover: "hsl(+30%, +10%, -15%)",
      disable: "black",
      attention: "black",
      inactive: "black",
      imageOverlayGradient: "rgba(0,0,0,0.6)"
    }
  },
  sizes: {
    thickness: {
      xxs: "0.25rem",
      xs: "0.5rem",
      s: "1rem",
      ms: "1.5rem",
      m: "2rem",
      ml: "2.5rem",
      l: "3rem",
      xl: "4rem",
      xxl: "6rem"
    },
    spacing: {
      xxs: "0.25rem",
      xs: "0.5rem",
      s: "1rem",
      ms: "1.5rem",
      m: "2rem",
      ml: "2.5rem",
      l: "3rem",
      xl: "4rem",
      xxl: "6rem",
      zero: "0"
    }
  },

};

module.exports = theme;
Last updated on 5/7/2019
← ModalTable →
  • Install
  • Usage
  • Prop
    • Props
    • Example theme
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious