@amaui/style
Version:
CSS in JS styling solution
324 lines (323 loc) • 9.28 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.resetDefault = exports.normalize = exports.FONT_FAMILY = void 0;
const merge_1 = __importDefault(require("@amaui/utils/merge"));
const try_1 = __importDefault(require("@amaui/utils/try"));
const utils_1 = require("./utils");
const AmauiStyle_1 = __importDefault(require("./AmauiStyle"));
const AmauiStyleSheetManager_1 = __importDefault(require("./AmauiStyleSheetManager"));
const AmauiTheme_1 = __importDefault(require("./AmauiTheme"));
exports.FONT_FAMILY = {
primary: [
'DM Sans',
'Helvetica',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Arial',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'sans-serif',
].join(', '),
secondary: [
'DM Sans',
'Helvetica',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Arial',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'sans-serif',
].join(', '),
mono: [
'Roboto Mono',
'monospace',
].join(', '),
};
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
exports.normalize = {
html: {
lineHeight: '1.15',
'-webkit-text-size-adjust': '100%'
},
main: {
display: 'block'
},
h1: {
fontSize: '2em'
},
hr: {
boxSizing: 'content-box',
height: '0px',
overflow: 'visible'
},
pre: {
fontFamily: 'monospace, monospace',
fontSize: '1em'
},
a: {
backgroundColor: 'transparent'
},
'abbr[title]': {
borderBottom: 'none',
textDecoration: {
value: 'underline',
fallbacks: [
'underline dotted'
]
}
},
'b, strong': {
fontWeight: 'bolder'
},
'code, kbd, samp': {
fontFamily: 'monospace, monospace',
fontSize: '1em'
},
small: {
fontSize: '80%'
},
'sub, sup': {
fontSize: '75%',
lineHeight: '0',
position: 'relative',
verticalAlign: 'baseline',
},
sub: {
bottom: '-0.25em'
},
sup: {
top: '-0.5em'
},
img: {
borderStyle: 'none'
},
'button, input, optgroup, select, textarea': {
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: '1.15',
margin: '0px'
},
'button, input': {
overflow: 'visible'
},
'button, select': {
textTransform: 'none'
},
'button, [type="button"], [type="reset"], [type="submit"]': {
'-webkit-appearance': 'button'
},
'button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner': {
borderStyle: 'none',
padding: '0px'
},
'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': {
outline: '1px dotted ButtonText'
},
fieldset: {
padding: '0.35em 0.75em 0.625em'
},
legend: {
boxSizing: 'border-box',
color: 'inherit',
display: 'table',
maxWidth: '100%',
padding: '0px',
whiteSpace: 'normal'
},
progress: {
verticalAlign: 'baseline'
},
textarea: {
overflow: 'auto'
},
'[type="checkbox"], [type="radio"]': {
boxSizing: 'border-box',
padding: '0px'
},
'[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button': {
height: 'auto'
},
'[type="search"]': {
'-webkit-appearance': 'textfield',
outlineOffset: '-2px'
},
'[type="search"]::-webkit-search-decoration': {
'-webkit-appearance': 'none'
},
'::-webkit-file-upload-button': {
'-webkit-appearance': 'button',
font: 'inherit'
},
details: {
display: 'block'
},
summary: {
display: 'list-item'
},
template: {
display: 'none'
},
'[hidden]': {
display: 'none'
},
};
exports.resetDefault = {
'*': {
margin: '0px',
padding: '0px',
border: 'none',
outline: 'none',
fontSize: '100%',
background: 'transparent',
boxSizing: 'border-box',
touchAction: 'manipulation',
'-webkit-tap-highlight-color': 'transparent',
'-webkit-focus-ring-color': 'transparent',
'&[contenteditable]': {
userSelect: 'text'
},
'&[contenteditable]:empty:before': {
display: 'block',
content: `attr(data-placeholder)`,
color: 'inherit',
fontStyle: 'inherit',
fontFamily: 'inherit',
fontSize: 'inherit',
fontWeight: 'inherit',
opacity: '0.24'
}
},
body: {
fontSize: '0.875rem',
fontFamily: exports.FONT_FAMILY.secondary,
fontWeight: 'normal',
fontStyle: 'normal',
position: 'relative',
overflowX: 'hidden',
backgroundColor: '#fff',
wordBreak: 'break-word',
// visibility hidden ui elements
'& .amaui-hidden': {
width: '0px',
height: '0px',
opacity: '0',
overflow: 'hidden',
visibility: 'hidden',
userSelect: 'none',
pointerEvents: 'none'
}
},
'img, embed, object, video': {
maxWidth: '100%',
height: 'auto'
},
a: {
textDecoration: 'none',
cursor: 'pointer'
},
form: {
width: '100%'
},
span: {
wordWrap: 'break-word'
},
hr: {
height: '1px',
background: '#ddd',
width: '100%',
margin: '24px 0'
},
'pre, code, kbd, samp': {
fontFamily: exports.FONT_FAMILY.mono
},
code: {
'& span': {
whiteSpace: 'pre-wrap'
},
},
':focus': {
outline: 'none'
},
'::-webkit-scrollbar': {
width: '16px',
height: '16px'
},
'::-webkit-scrollbar-track, ::-webkit-scrollbar-corner': {
background: 'transparent'
},
'::-webkit-scrollbar-thumb': {
borderRadius: '8px',
border: '4px solid transparent',
backgroundClip: 'content-box',
backgroundColor: 'rgba(221, 221, 221, 0.4)',
'&:hover': {
backgroundColor: 'rgba(221, 221, 221, 0.7)'
}
}
};
const optionsDefault = {
mode: 'regular',
amaui_style: {
get: AmauiStyle_1.default.first.bind(AmauiStyle_1.default),
},
amaui_theme: {
get: AmauiTheme_1.default.first.bind(AmauiTheme_1.default),
}
};
function reset(value_, options_ = {}) {
const options = (0, merge_1.default)(options_, optionsDefault, { copy: true });
// Amaui style
let amauiStyle = options.amaui_style.value || ((0, utils_1.is)('function', options.amaui_style.get) && options.amaui_style.get(options.element));
if (amauiStyle === undefined)
amauiStyle = new AmauiStyle_1.default();
// Amaui theme
const amauiTheme = options.amaui_theme.value || ((0, utils_1.is)('function', options.amaui_theme.get) && options.amaui_theme.get(options.element));
// Make value if it's a function
let value = (0, utils_1.is)('function', value_) ? (0, try_1.default)(() => value_(amauiTheme)) : value_;
if (!(0, utils_1.is)('object', value))
value = {};
// Default
const valueDefault = (0, merge_1.default)(exports.resetDefault, exports.normalize, { copy: true });
// Add reset defaults
// user provided values override reset default values
if (options.override)
value = Object.assign(Object.assign({}, valueDefault), value);
else
value = (0, merge_1.default)(value, valueDefault, { copy: true });
// Make an instance of amauiStyleSheetManager
const amauiStyleSheetManager = new AmauiStyleSheetManager_1.default(value, {
mode: 'regular',
pure: true,
priority: 'lower',
amauiTheme,
amauiStyle,
name: options.name,
style: {
attributes: {
method: 'reset'
}
}
});
const response = {
ids: amauiStyleSheetManager.ids,
amaui_style_sheet_manager: amauiStyleSheetManager,
sheets: amauiStyleSheetManager.sheets,
add: amauiStyleSheetManager.add.bind(amauiStyleSheetManager),
set props(value__) { amauiStyleSheetManager.props = value__; },
update: amauiStyleSheetManager.update.bind(amauiStyleSheetManager),
remove: amauiStyleSheetManager.remove.bind(amauiStyleSheetManager),
addRule: amauiStyleSheetManager.sheets.static[0] && amauiStyleSheetManager.sheets.static[0].addRule.bind(amauiStyleSheetManager.sheets.static[0]),
};
// Response
return response;
}
exports.default = reset;