Beta v0.6.2

Documentation

Theming

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints and more.

Customize Theme

Here's what the theme object looks like with the default values:


const theme = {
fontFamily: {
sansSerif: "Helvetica Neue, sans-serif",
mono: "Menlo, Monaco, monospace",
},
fontSizes: {
base: "16px",
xs: "8px",
sm: "13px",
md: "16px",
lg: "22px",
xl: "28px",
h1: "32px",
h2: "28px",
h3: "22px",
h4: "22px",
},
lineHeights: {
xs: 1,
sm: 1.25,
md: 1.5,
lg: 1.625,
xl: 1.75,
},
borderRadius: {
base: "10px",
xs: "6px",
sm: "9px",
md: "12px",
lg: "14px",
xl: "18px",
},
colors: {
text: "#333",
textLight: "#8e8e8e",
background: "#fff",
link: "#1eaaf1",
linkHover: "#0d8ecf",
border: "#e3e3e3",
warning: "#fff3cd",
success: "#d4edda",
primary: "#377BFC",
primaryHover: "#316ee2",
secondary: "#F87656",
secondaryHover: "#e87255",
third: "#35e97f",
thirdHover: "#29d872",
grey: "#bdc3ca",
greyLight: "#edf2f7",
},
transitions: {
base: "0.2s ease",
},
breakpoints: {
xs: "480px",
sm: "780px",
md: "992px",
lg: "1200px",
xl: "1400px",
},
maxWidth: {
xs: "480px",
sm: "780px",
md: "992px",
lg: "1240px",
xl: "1400px",
},
};
export default theme;



Customize Theme

To override the default theme, copy the default theme and use it in the theme provider.


// 1. import `Pier UI` component
import { PierUIProvider } from "pier-ui";
import customTheme from "../styles/customTheme";
function App() {
// 2. Wrap Pier UI Provider at the root of your app and add zhe theme prop
return (
<PierUIProvider theme={customTheme}>
<>Your Application </>
</PierUIProvider>
);
}

customTheme.js


const theme = {
fontFamily: {
sansSerif: "Helvetica Neue, sans-serif",
mono: "Menlo, Monaco, monospace",
},
fontSizes: {
base: "16px",
xs: "8px",
sm: "13px",
md: "16px",
lg: "22px",
xl: "28px",
h1: "32px",
h2: "28px",
h3: "22px",
h4: "22px",
},
lineHeights: {
xs: 1,
sm: 1.25,
md: 1.5,
lg: 1.625,
xl: 1.75,
},
borderRadius: {
base: "10px",
xs: "6px",
sm: "9px",
md: "12px",
lg: "14px",
xl: "18px",
},
colors: {
text: "#333",
textLight: "#8e8e8e",
background: "#fff",
link: "#1eaaf1",
linkHover: "#0d8ecf",
border: "#e3e3e3",
warning: "#fff3cd",
success: "#d4edda",
primary: "#3b49df", /// changed primary color
primaryHover: "#316ee2",
secondary: "#F87656",
secondaryHover: "#e87255",
third: "#35e97f",
thirdHover: "#29d872",
grey: "#bdc3ca",
greyLight: "#EEEEEE",
},
transitions: {
base: "0.2s ease",
},
breakpoints: {
xs: "480px",
sm: "780px",
md: "992px",
lg: "1200px",
xl: "1400px",
},
maxWidth: {
xs: "480px",
sm: "780px",
md: "992px",
lg: "1240px",
xl: "1400px",
},
};
export default theme;

Theme Hook

useGetTheme is a custom hook used to get the theme object from context.


import { useGetTheme } from "pier-ui";
const CustomComponent = (props) => {
const { children, ...restProps } = props;
/// get theme
const theme = useGetTheme();
return (
<>
<div className="custom-component">
<h2>Custom Component</h2>
{children}
</div>
<style jsx>{`
.custom-component {
min-height: 300px;
padding: 30px;
background-color: ${theme.colors
.greyLight}; /// use your theme in styled-jsx
}
`}</style>
</>
);
};
export default CustomComponent;