@storybook/design-system
Version:
Storybook design system
221 lines (215 loc) • 7.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.code = exports.text = exports.subheading = exports.headers = exports.zIndex = exports.hoverEffect = exports.pageMargins = exports.pageMargin = exports.breakpoint = exports.typography = exports.spacing = exports.color = exports.background = void 0;
var _theming = require("@storybook/theming");
var _polished = require("polished");
// Global style variables
var background = {
app: '#F6F9FC',
appInverse: '#7A8997',
positive: '#E1FFD4',
negative: '#FEDED2',
warning: '#FFF5CF',
calmBlue: '#E3F3FF'
};
exports.background = background;
var color = {
// Palette
primary: '#FF4785',
// Coral
secondary: '#029CFD',
// Ocean
tertiary: '#E3E6E8',
// Light grey
orange: '#FC521F',
gold: '#FFAE00',
green: '#66BF3C',
seafoam: '#37D5D3',
purple: '#6F2CAC',
ultraviolet: '#2A0481',
red: '#ff4400',
// Calm
bluelight: '#E3F3FF',
// rgba($color.blue, 12%)
bluelighter: '#F5FBFF',
// Monochrome
lightest: '#FFFFFF',
lighter: '#F7FAFC',
light: '#EEF3F6',
mediumlight: '#ECF4F9',
medium: '#D9E8F2',
mediumdark: '#73828C',
dark: '#5C6870',
darker: '#454E54',
darkest: '#2E3438',
tr10: 'rgba(0, 0, 0, 0.1)',
tr5: 'rgba(0, 0, 0, 0.05)',
border: 'hsla(203, 50%, 30%, 0.15)',
// Status
positive: '#448028',
// Evergreen
negative: '#D43900',
// Crimson
warning: '#A15C20',
// Burnt sienna
selected: '#0271B6' // Navy
};
exports.color = color;
var spacing = {
padding: {
small: 10,
medium: 20,
large: 30
},
borderRadius: {
small: 5,
"default": 10
}
};
exports.spacing = spacing;
var typography = {
type: {
primary: '"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
code: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'
},
weight: {
regular: '400',
bold: '700',
extrabold: '800'
},
size: {
s1: 12,
s2: 14,
s3: 16,
m1: 20,
m2: 24,
m3: 28,
l1: 32,
l2: 40,
l3: 48,
code: 90
}
};
exports.typography = typography;
var breakpoint = 600;
exports.breakpoint = breakpoint;
var pageMargin = 5.55555;
exports.pageMargin = pageMargin;
var pageMargins = /*#__PURE__*/(0, _theming.css)("padding:0 ", spacing.padding.medium, "px;@media (min-width: ", breakpoint * 1, "px){margin:0 ", pageMargin * 1, "%;}@media (min-width: ", breakpoint * 2, "px){margin:0 ", pageMargin * 2, "%;}@media (min-width: ", breakpoint * 3, "px){margin:0 ", pageMargin * 3, "%;}@media (min-width: ", breakpoint * 4, "px){margin:0 ", pageMargin * 4, "%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:pageMargins;"));
exports.pageMargins = pageMargins;
var hoverEffect = /*#__PURE__*/(0, _theming.css)("border:1px solid ", color.border, ";border-radius:", spacing.borderRadius.small, "px;transition:background 150ms ease-out,border 150ms ease-out,transform 150ms ease-out;&:hover,&.__hover{border-color:", (0, _polished.rgba)(color.secondary, 0.5), ";transform:translate3d(0, -3px, 0);box-shadow:rgba(0, 0, 0, 0.08) 0 3px 10px 0;}&:active,&.__active{border-color:", (0, _polished.rgba)(color.secondary, 1), ";transform:translate3d(0, 0, 0);}" + (process.env.NODE_ENV === "production" ? "" : ";label:hoverEffect;"));
exports.hoverEffect = hoverEffect;
var zIndex = {
tooltip: 2147483647
}; // Typography styles
exports.zIndex = zIndex;
var headers = {
hero1: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.l3,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:hero1;"),
hero2: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.l2,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:hero2;"),
h1: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.l1,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h1;"),
h2: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.m3,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h2;"),
h3: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.m2,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h3;"),
h4: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.m1,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h4;"),
h5: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s3,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h5;"),
h6: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s2,
fontWeight: typography.weight.bold
}, process.env.NODE_ENV === "production" ? "" : ";label:h6;")
};
exports.headers = headers;
var subheading = {
regular: /*#__PURE__*/(0, _theming.css)({
fontSize: 13,
fontWeight: typography.weight.extrabold,
lineHeight: '18px',
letterSpacing: '0.38em'
}, process.env.NODE_ENV === "production" ? "" : ";label:regular;"),
small: /*#__PURE__*/(0, _theming.css)({
fontSize: 11,
fontWeight: typography.weight.extrabold,
lineHeight: '16px',
letterSpacing: '0.38em'
}, process.env.NODE_ENV === "production" ? "" : ";label:small;")
};
exports.subheading = subheading;
var text = {
storybookMediumBold: /*#__PURE__*/(0, _theming.css)({
fontSize: 13,
fontWeight: typography.weight.bold,
lineHeight: '18px'
}, process.env.NODE_ENV === "production" ? "" : ";label:storybookMediumBold;"),
storybookMedium: /*#__PURE__*/(0, _theming.css)({
fontSize: 13,
fontWeight: typography.weight.regular,
lineHeight: '18px'
}, process.env.NODE_ENV === "production" ? "" : ";label:storybookMedium;"),
largeBold: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s3,
fontWeight: typography.weight.bold,
lineHeight: '24px'
}, process.env.NODE_ENV === "production" ? "" : ";label:largeBold;"),
small: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s1,
fontWeight: typography.weight.regular,
lineHeight: '18px'
}, process.env.NODE_ENV === "production" ? "" : ";label:small;"),
regularBold: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s2,
fontWeight: typography.weight.bold,
lineHeight: '20px'
}, process.env.NODE_ENV === "production" ? "" : ";label:regularBold;"),
smallBold: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s1,
fontWeight: typography.weight.bold,
lineHeight: '18px'
}, process.env.NODE_ENV === "production" ? "" : ";label:smallBold;"),
large: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s3,
fontWeight: typography.weight.regular,
lineHeight: '24px'
}, process.env.NODE_ENV === "production" ? "" : ";label:large;"),
regular: /*#__PURE__*/(0, _theming.css)({
fontSize: typography.size.s2,
fontWeight: typography.weight.regular,
lineHeight: '20px'
}, process.env.NODE_ENV === "production" ? "" : ";label:regular;")
};
exports.text = text;
var code = {
regular: /*#__PURE__*/(0, _theming.css)({
fontFamily: typography.type.code,
fontSize: typography.size.s2,
fontWeight: typography.weight.regular,
lineHeight: '17px'
}, process.env.NODE_ENV === "production" ? "" : ";label:regular;"),
small: /*#__PURE__*/(0, _theming.css)({
fontFamily: typography.type.code,
fontSize: typography.size.s1,
fontWeight: typography.weight.regular,
lineHeight: '14px'
}, process.env.NODE_ENV === "production" ? "" : ";label:small;")
};
exports.code = code;