@aesthetic/system
Version:
Web based building blocks for the Aesthetic design system.
339 lines (295 loc) • 8.03 kB
JavaScript
// Bundled with Packemon: https://packemon.dev
// Platform: browser, Support: stable, Format: lib
'use strict';
const utils = require('@aesthetic/utils');
const BORDER_SIZES = ['sm', 'df', 'lg'];
const BREAKPOINT_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
const DEPTHS = {
content: 100,
// xs
navigation: 1000,
// sm
sheet: 1100,
// lg
overlay: 1200,
// lg
modal: 1300,
// xl
toast: 1400,
// md
dialog: 1500,
// md
menu: 1600,
// md
tooltip: 1700 // sm
};
const SIZES = ['sm', 'df', 'lg'];
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
const HEADING_SIZES = ['l1', 'l2', 'l3', 'l4', 'l5', 'l6'];
const PALETTE_TYPES = ['brand', 'primary', 'secondary', 'tertiary', 'neutral', 'muted', 'danger', 'warning', 'negative', 'positive'];
const SHADE_RANGES = ['00', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
const SHADOW_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
const SPACING_SIZES = ['xxs', 'xs', 'sm', 'df', 'md', 'lg', 'xl', 'xxl'];
const TEXT_SIZES = ['sm', 'df', 'lg'];
function hideOffscreen() {
return {
clipPath: 'rect(1px, 1px, 1px, 1px)',
height: 1,
left: '-5vw',
overflow: 'hidden',
position: 'fixed',
width: 1
};
}
function hideVisually() {
return {
'@selectors': {
':not(:focus):not(:active)': {
border: 0,
clip: 'rect(0, 0, 0, 0)',
clipPath: 'inset(50%)',
height: 1,
margin: 0,
overflow: 'hidden',
padding: 0,
position: 'absolute',
whiteSpace: 'nowrap',
width: 1
}
}
};
}
function resetButton() {
return {
appearance: 'none',
backgroundColor: 'transparent',
border: 0,
cursor: 'pointer',
display: 'inline-flex',
fontSize: 'inherit',
margin: 0,
padding: 0,
textDecoration: 'none',
userSelect: 'auto',
verticalAlign: 'middle'
};
}
function resetInput() {
return {
appearance: 'none',
backgroundColor: 'transparent',
margin: 0,
padding: 0,
width: '100%',
'@selectors': {
'::-moz-focus-outer': {
border: 0
}
}
};
}
function resetList() {
return {
listStyle: 'none',
margin: 0,
padding: 0
};
}
function resetMedia() {
return {
display: 'block',
verticalAlign: 'middle'
};
}
function resetTypography() {
return {
fontFamily: 'inherit',
fontSize: 'inherit',
fontWeight: 'normal',
wordWrap: 'break-word'
};
}
function root(css) {
const declaration = {
backgroundColor: css.var('palette-neutral-color-00'),
color: css.var('palette-neutral-text'),
fontFamily: css.var('typography-font-text'),
fontSize: css.var('typography-root-text-size'),
lineHeight: css.var('typography-root-line-height'),
textRendering: 'optimizeLegibility',
textSizeAdjust: '100%',
margin: 0,
padding: 0,
// @ts-expect-error Not typed
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
'@media': {}
}; // Fluid typography!
utils.objectLoop(css.tokens.breakpoint, (bp, size) => {
declaration['@media'][bp.query] = {
fontSize: css.var(`breakpoint-${size}-root-text-size`),
lineHeight: css.var(`breakpoint-${size}-root-line-height`)
};
});
return declaration;
}
function textBreak() {
return {
overflowWrap: 'break-word',
wordWrap: 'break-word',
wordBreak: 'break-word'
};
}
function textTruncate() {
return {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
};
}
function textWrap() {
return {
overflowWrap: 'normal',
wordWrap: 'normal',
wordBreak: 'normal'
};
} // eslint-disable-next-line @typescript-eslint/no-explicit-any
const MIXIN_MAP = {
'hide-offscreen': hideOffscreen,
'hide-visually': hideVisually,
'reset-button': resetButton,
'reset-input': resetInput,
'reset-list': resetList,
'reset-media': resetMedia,
'reset-typography': resetTypography,
root,
'text-break': textBreak,
'text-truncate': textTruncate,
'text-wrap': textWrap
};
const mixins = /*#__PURE__*/Object.freeze({
__proto__: null,
hideOffscreen: hideOffscreen,
hideVisually: hideVisually,
resetButton: resetButton,
resetInput: resetInput,
resetList: resetList,
resetMedia: resetMedia,
resetTypography: resetTypography,
root: root,
textBreak: textBreak,
textTruncate: textTruncate,
textWrap: textWrap,
MIXIN_MAP: MIXIN_MAP
});
/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
class Theme {
constructor(options, tokens, design) {
this.name = '';
this.contrast = void 0;
this.design = void 0;
this.scheme = void 0;
this.tokens = void 0;
this.cssVariables = void 0;
this.mixin = (name, rule) => {
const properties = {};
const mixin = MIXIN_MAP[name];
if (mixin) {
Object.assign(properties, mixin(this));
} else if (process.env.NODE_ENV !== "production") {
throw new Error(`Unknown mixin "${name}".`);
}
if (rule) {
return utils.deepMerge(properties, rule);
}
return properties;
};
this.unit = (...multipliers) => multipliers.map(m => `${(this.design.spacingUnit * m / this.design.rootTextSize).toFixed(2).replace('.00', '')}rem`).join(' ');
this.var = (name, ...fallbacks) => `var(${[`--${name}`, ...fallbacks].join(', ')})`;
this.contrast = options.contrast;
this.scheme = options.scheme;
this.design = design;
this.tokens = { ...design.tokens,
...tokens
};
}
/**
* Extend and instantiate a new theme instance with customized tokens.
*/
extend(tokens, options = {}) {
return new Theme({
contrast: this.contrast,
scheme: this.scheme,
...options
}, utils.deepMerge(this.tokens, tokens), this.design);
}
/**
* Return both design and theme tokens as a mapping of CSS variables.
*/
toVariables() {
if (this.cssVariables) {
return this.cssVariables;
}
const vars = {};
const collapseTree = (data, path) => {
utils.objectLoop(data, (value, key) => {
const nextPath = [...path, utils.hyphenate(key)];
if (utils.isObject(value)) {
collapseTree(value, nextPath);
} else {
vars[`--${nextPath.join('-')}`] = value;
}
});
};
collapseTree(this.tokens, []);
this.cssVariables = vars;
return this.cssVariables;
}
/**
* Return merged CSS properties from the defined mixin, all template overrides,
* and the provided additional CSS properties.
*/
}
class Design {
constructor(name, tokens) {
this.name = void 0;
this.rootLineHeight = void 0;
this.rootTextSize = void 0;
this.spacingUnit = void 0;
this.tokens = void 0;
this.name = name;
this.tokens = { ...tokens,
depth: DEPTHS
};
this.rootLineHeight = tokens.typography.rootLineHeight;
this.rootTextSize = Number.parseFloat(tokens.typography.rootTextSize); // Pre-compiled for the chosen type, no need to calculate manually
this.spacingUnit = tokens.spacing.unit;
}
/**
* Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
*/
createTheme(options, tokens) {
return new Theme(options, tokens, this);
}
/**
* Extend and instantiate a new design instance with customized design tokens.
*/
extend(name, tokens) {
return new Design(name, utils.deepMerge(this.tokens, tokens));
}
}
exports.BORDER_SIZES = BORDER_SIZES;
exports.BREAKPOINT_SIZES = BREAKPOINT_SIZES;
exports.DEPTHS = DEPTHS;
exports.Design = Design;
exports.HEADING_LEVELS = HEADING_LEVELS;
exports.HEADING_SIZES = HEADING_SIZES;
exports.PALETTE_TYPES = PALETTE_TYPES;
exports.SHADE_RANGES = SHADE_RANGES;
exports.SHADOW_SIZES = SHADOW_SIZES;
exports.SIZES = SIZES;
exports.SPACING_SIZES = SPACING_SIZES;
exports.TEXT_SIZES = TEXT_SIZES;
exports.Theme = Theme;
exports.mixins = mixins;
//# sourceMappingURL=bundle-f8d2e6ed.js.map