@greensight/gds
Version:
Greensight Design System
127 lines (118 loc) • 11.1 kB
JavaScript
import { a as _objectSpread2 } from './_rollupPluginBabelHelpers-D0Wa2C7U.js';
import { j as jsx, G as Global } from './emotion-react.esm-CuKt2qQ4.js';
import { useMemo } from 'react';
import { baseTheme } from './baseTheme.js';
import { typography } from './typography.js';
import { T as ThemeProvider$1 } from './emotion-element-c16c303e.esm-CnTrGsmj.js';
import './cjs-C-GfJT3o.js';
import './scale-CeLrnuzO.js';
import './fastEquals.js';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n";
styleInject(css_248z);
/**
* Component for providing theme context for app.
*/
var ThemeProvider = function ThemeProvider(_ref) {
var _global$fonts2;
var theme = _ref.theme,
children = _ref.children;
var global = theme.global || baseTheme.global;
var _ref2 = global.base || baseTheme.global.base,
selection = _ref2.selection,
focus = _ref2.focus,
body = _ref2.body,
css = _ref2.css;
var fontFaceStyles = useMemo(function () {
var _global$fonts;
return ((_global$fonts = global.fonts) === null || _global$fonts === void 0 ? void 0 : _global$fonts.fontFace) || [];
}, [(_global$fonts2 = global.fonts) === null || _global$fonts2 === void 0 ? void 0 : _global$fonts2.fontFace]);
var baseStyles = useMemo(function () {
return [{
'*, ::before, ::after': {
boxSizing: 'border-box',
padding: 0,
margin: 0
},
'::selection': _objectSpread2({
color: selection === null || selection === void 0 ? void 0 : selection.color,
backgroundColor: selection === null || selection === void 0 ? void 0 : selection.bg
}, selection === null || selection === void 0 ? void 0 : selection.css),
':focus': _objectSpread2({
outline: "".concat((focus === null || focus === void 0 ? void 0 : focus.width) || 2, "px solid ").concat((focus === null || focus === void 0 ? void 0 : focus.color) || baseTheme.colors.black),
outlineOffset: focus === null || focus === void 0 ? void 0 : focus.offset
}, focus === null || focus === void 0 ? void 0 : focus.css),
'.js-focus-visible :focus-visible': {
outline: 'none'
},
'html, body': {
minHeight: '100%'
},
body: _objectSpread2(_objectSpread2({}, body && typography(body.typography, theme.typography ? theme : baseTheme)), {}, {
color: body === null || body === void 0 ? void 0 : body.color,
backgroundColor: body === null || body === void 0 ? void 0 : body.bg
}, body === null || body === void 0 ? void 0 : body.css),
img: {
maxWidth: '100%',
height: 'auto'
},
a: {
display: 'inline-block',
textDecoration: 'none',
color: 'inherit'
},
'h1, h2, h3, h4, h5, h6': {
margin: 0
},
'ul li, ol li': {
listStyle: 'none'
},
button: {
border: 'none',
background: 'none',
cursor: 'pointer'
},
'input[type="number"]': {
appearance: 'textfield'
},
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button': {
margin: 0,
appearance: 'none'
},
fieldset: {
padding: 0,
border: 'none'
}
}];
}, [body, focus === null || focus === void 0 ? void 0 : focus.color, focus === null || focus === void 0 ? void 0 : focus.css, focus === null || focus === void 0 ? void 0 : focus.offset, focus === null || focus === void 0 ? void 0 : focus.width, selection === null || selection === void 0 ? void 0 : selection.bg, selection === null || selection === void 0 ? void 0 : selection.color, selection === null || selection === void 0 ? void 0 : selection.css, theme]);
var globalStyles = useMemo(function () {
return [fontFaceStyles, baseStyles, css];
}, [baseStyles, css, fontFaceStyles]);
return jsx(ThemeProvider$1, {
theme: theme
}, jsx(Global, {
styles: globalStyles
}), children);
};
export { ThemeProvider };