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
| Prop | Description | Default |
|---|---|---|
isVisible | Modal Visibility | |
maxWidth | Modal 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;