@ddsys/material
Version:
<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>
78 lines (74 loc) • 1.61 kB
JavaScript
// BHP Variables
export default function() {
const fontSizeBase = 1; // Assumes the browser default, typically `16px`
const switchSize = 24;
const switchBorderWidth = 1;
return {
common: {
spacing: 1, //rem,
darken: 0.3,
lighten: 0.3
},
fonts: {
family: [
"Arial",
"Helvetica Neue",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol"
].join(","),
size: {
large: fontSizeBase * 1.25, // rem
small: fontSizeBase * 0.875, // rem
normal: fontSizeBase // rem
},
weight: {
light: 300,
normal: 400,
bold: 700
},
spacing: fontSizeBase,
lineHeight: 1.5, // rem
h1: fontSizeBase * 2.5, // rem
h2: fontSizeBase * 2, // rem
h3: fontSizeBase * 1.75, // rem
h4: fontSizeBase * 1.5, // rem
h5: fontSizeBase * 1.25, // rem
h6: fontSizeBase // rem
},
accordion: {
borderRadius: 0.25
},
alert: {
leftBorderWidth: 5 //px
},
logo: {
width: 74,
height: 28
},
popover: {
maxWidth: 600
},
tab: {
indicatorHeight: 4
},
tooltip: {
maxWidth: 200
},
toggleSwitch: {
barWidth: switchSize * 2,
barHeight: switchSize + switchBorderWidth * 2,
iconWidth: switchSize,
iconHeight: switchSize,
borderWidth: switchBorderWidth
},
card: {
borderRadius: 0.25
}
};
}