@greensight/gds
Version:
Greensight Design System
488 lines (481 loc) • 11.5 kB
JavaScript
import { d as deepmerge$1 } from './cjs-C-GfJT3o.js';
import { F as FONT_STACK, s as scale } from './scale-CeLrnuzO.js';
import * as React from 'react';
var palettes = {
grey: [
"#121314",
"#3c3f42",
"#666a6f",
"#8a8f95",
"#a8adb3",
"#c0c4cb",
"#d2d5dc",
"#e0e3e8",
"#eaecf0",
"#f1f2f5"
],
blue: [
"#021540",
"#042471",
"#0835a1",
"#1146cc",
"#215bf0",
"#6391ff",
"#90b2ff",
"#c2d6ff",
"#d9e4ff",
"#eff2fa"
],
red: [
"#470000",
"#6f0101",
"#960202",
"#b80303",
"#d40505",
"#ea1414",
"#f14646",
"#f57979",
"#f5aaaa",
"#f2dada"
]
};
var colors$1 = {
black: "#000000",
grey0: "#121314",
grey20: "#666a6f",
grey40: "#a8adb3",
grey60: "#d6d8db",
grey70: "#e0e3e8",
grey90: "#f1f2f5",
white: "#ffffff",
fade: "rgba(0, 0, 0, 0.5)",
brand: "#215bf0",
brandHover: "#1146cc",
brandSecond: "#ea1414",
brandSecondHover: "#d40505",
error: "#f14646",
warning: "#f0b621",
success: "#4aa253",
tagHit: "#68c1dd",
tagSale: "#f369a3",
tagNew: "#b6d674"
};
var typography = {
breakpoints: [
1440,
768
],
styles: {
buttonLg: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.5rem",
lineHeight: 1.2
}
},
buttonMd: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1rem",
lineHeight: 1.2,
fontVariantNumeric: "tabular-nums"
}
},
buttonSm: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.875rem",
lineHeight: 1
}
},
captionUppercase: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.75rem",
lineHeight: 1.4,
letterSpacing: "0.05em",
textTransform: "uppercase"
}
},
caption: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.75rem",
lineHeight: 1.4,
letterSpacing: "0.02em"
}
},
smallBold: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "0.875rem",
lineHeight: 1.4
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "0.75rem",
lineHeight: 1.4
}
},
small: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.875rem",
lineHeight: 1.4
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.75rem",
lineHeight: 1.4
}
},
bodyBold: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1rem",
lineHeight: 1.4,
fontVariantNumeric: "tabular-nums"
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "0.875rem",
lineHeight: 1.4
}
},
body: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "1rem",
lineHeight: 1.4
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 400,
fontSize: "0.875rem",
lineHeight: 1.4
}
},
subheading: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 500,
fontSize: "1.25rem",
lineHeight: 1.5
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 500,
fontSize: "1.125rem",
lineHeight: 1.5
}
},
title: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.25rem",
lineHeight: 1.2
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.125rem",
lineHeight: 1.2
}
},
headline: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.5rem",
lineHeight: 1.2
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.25rem",
lineHeight: 1.2
}
},
h4: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.75rem",
lineHeight: 1.2
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.375rem",
lineHeight: 1.2
}
},
h3: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "2rem",
lineHeight: 1.2
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "1.5rem",
lineHeight: 1.2
}
},
h2: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "3rem",
lineHeight: 1.2
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "2.125rem",
lineHeight: 1.2
}
},
h1: {
desktop: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "4.25rem",
lineHeight: 1.2,
letterSpacing: "-0.02em"
},
mobile: {
fontFamily: "PT Root UI",
fontWeight: 700,
fontSize: "3rem",
lineHeight: 1.2,
letterSpacing: "-0.02em"
}
}
}
};
var layout = {
cols: {
xxxl: 12,
md: 6,
xs: 4,
xxs: 2
},
container: {
xxxl: 1440,
xl: "none"
},
marginLeft: {
xxxl: "auto",
xl: 0
},
marginRight: {
xxxl: "auto",
xl: 0
},
breakpoints: {
xxxl: 1920,
xxl: 1600,
xl: 1440,
lg: 1280,
md: 960,
sm: 768,
xs: 568,
xxs: 360,
xxxs: 320
},
gap: {
xxxl: 24,
sm: 16
},
padding: {
xl: 60,
lg: 40,
md: 36,
sm: 32,
xs: 24,
xxs: 16
}
};
var shadows$1 = {
small: "1px 1px 3px rgba(18, 19, 20, 0.05), 1px 3px 10px rgba(18, 19, 20, 0.05)",
big: "4px 10px 35px rgba(18, 19, 20, 0.08)",
inner: "inset 3px 3px 10px rgba(18, 19, 20, 0.1), inset 2px 2px 5px rgba(18, 19, 20, 0.1), inset 2px 2px 3px rgba(18, 19, 20, 0.08)"
};
var tokens = {
palettes: palettes,
colors: colors$1,
typography: typography,
layout: layout,
shadows: shadows$1
};
var _path, _path2;
var _excluded = ["title", "titleId"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
var SvgPlaceholder = function SvgPlaceholder(_ref) {
var title = _ref.title,
titleId = _ref.titleId,
props = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement("svg", _extends({
width: 24,
height: 24,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"aria-labelledby": titleId
}, props), title ? /*#__PURE__*/React.createElement("title", {
id: titleId
}, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6 8.5C6 7.11929 7.11929 6 8.5 6C9.88071 6 11 7.11929 11 8.5C11 9.88071 9.88071 11 8.5 11C7.11929 11 6 9.88071 6 8.5ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8Z"
})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M22 5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.4288 4.2699 19.7946 4.64909 19.9367L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289L20 12.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 15.4142L16 11.4142L7.41421 20H19C19.5523 20 20 19.5523 20 19V15.4142Z"
})));
};
var colors = tokens.colors,
shadows = tokens.shadows;
/* Здесь умышленно не используется createTheme, т.к. она возвращает тип Theme, а базовую тему хочется использовать как константу, чтобы при вводе baseTheme.colors. выводились все цвета + не выдавалось излишних проверок на существование. Мы теряем здесь типизацию при наборе базовой темы (исключительно этот файл), но даём пользователям удобство работы с константой. Пользовательские тему будут создаваться через createTheme и строго следовать типам. */
/**
* Default GDS theme.
*/
var baseTheme = deepmerge$1(tokens, {
global: {
placeholder: SvgPlaceholder,
fonts: {
families: {
'PT Root UI': {
stack: FONT_STACK
}
},
fontFace: [{
'@font-face': {
fontFamily: 'PT Root UI',
src: 'url("../fonts/PTRootUI/PTRootUI-Regular.woff2") format("woff2"), url("../fonts/PTRootUI/PTRootUI-Regular.woff") format("woff")',
fontDisplay: 'swap'
}
}, {
'@font-face': {
fontFamily: 'PT Root UI',
src: 'url("../fonts/PTRootUI/PTRootUI-Medium.woff2") format("woff2"), url("../fonts/PTRootUI/PTRootUI-Medium.woff") format("woff")',
fontDisplay: 'swap',
fontWeight: 500
}
}, {
'@font-face': {
fontFamily: 'PT Root UI',
src: 'url("../fonts/PTRootUI/PTRootUI-Bold.woff2") format("woff2"), url("../fonts/PTRootUI/PTRootUI-Bold.woff") format("woff")',
fontDisplay: 'swap',
fontWeight: 700
}
}]
},
base: {
selection: {
color: colors.white,
bg: colors.brand
},
focus: {
width: 2,
color: colors.brand,
offset: 2
},
body: {
typography: 'body',
color: colors.black,
bg: colors.white
}
}
},
components: {
Button: {
base: {
"default": {
round: true,
half: true
}
},
themes: {
primary: {
"default": {
color: colors.white,
bg: colors.brand
},
hover: {
bg: colors.brandHover
},
active: {
border: 'transparent',
shadow: shadows.inner
},
disabled: {
bg: colors.grey70,
color: colors.grey40
}
},
secondary: {
"default": {
color: colors.brand,
border: colors.brand,
bg: colors.white
},
hover: {
color: colors.brandHover,
border: colors.brandHover
},
active: {
bg: colors.grey90,
border: 'transparent',
shadow: shadows.inner
},
disabled: {
border: colors.grey60,
color: colors.grey40
}
}
},
sizes: {
lg: {
height: scale(8),
padding: scale(3),
iconSize: scale(4),
iconOffset: scale(1),
typography: 'buttonLg'
},
md: {
height: scale(6),
padding: scale(3),
iconSize: scale(3),
iconOffset: scale(1),
typography: 'buttonMd'
},
sm: {
height: scale(5),
padding: scale(2),
iconSize: scale(2),
iconOffset: scale(1),
typography: 'buttonSm'
}
}
}
}
});
export { baseTheme };