@amaui/style
Version:
CSS in JS styling solution
865 lines (864 loc) • 41.5 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const alpha_1 = __importDefault(require("@amaui/utils/alpha"));
const castParam_1 = __importDefault(require("@amaui/utils/castParam"));
const clamp_1 = __importDefault(require("@amaui/utils/clamp"));
const colorToRgb_1 = __importDefault(require("@amaui/utils/colorToRgb"));
const copy_1 = __importDefault(require("@amaui/utils/copy"));
const darken_1 = __importDefault(require("@amaui/utils/darken"));
const element_1 = __importDefault(require("@amaui/utils/element"));
const emphasize_1 = __importDefault(require("@amaui/utils/emphasize"));
const getContrastRatio_1 = __importDefault(require("@amaui/utils/getContrastRatio"));
const getLuminance_1 = __importDefault(require("@amaui/utils/getLuminance"));
const hexToRgb_1 = __importDefault(require("@amaui/utils/hexToRgb"));
const hslToRgb_1 = __importDefault(require("@amaui/utils/hslToRgb"));
const imageToPalette_1 = __importDefault(require("@amaui/utils/imageToPalette"));
const lighten_1 = __importDefault(require("@amaui/utils/lighten"));
const isEnvironment_1 = __importDefault(require("@amaui/utils/isEnvironment"));
const rgbToHex_1 = __importDefault(require("@amaui/utils/rgbToHex"));
const rgbToHsl_1 = __importDefault(require("@amaui/utils/rgbToHsl"));
const rgbToRgba_1 = __importDefault(require("@amaui/utils/rgbToRgba"));
const try_1 = __importDefault(require("@amaui/utils/try"));
const merge_1 = __importDefault(require("@amaui/utils/merge"));
const subscription_1 = __importDefault(require("@amaui/subscription"));
const utils_1 = require("./utils");
const colors_1 = __importDefault(require("./colors"));
const FONT_FAMILY = {
primary: ['Montserrat', 'Helvetica', 'Helvetica Neue', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'sans-serif'].join(', '),
secondary: ['Outfit', 'Helvetica', 'Helvetica Neue', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'].join(', '),
tertiary: ['Roboto Mono', 'monospace'].join(', ')
};
const optionsDefault = {
rule: {
sort: true,
prefix: true,
rtl: false,
},
updateFontSize: true,
motion: true
};
const media = {};
for (let i = 100; i <= 4000; i += 100) {
media[i] = `(max-width: ${i}px)`;
media[`${i}-up`] = `(min-width: ${i}px)`;
}
const amauiThemeValueDefault = {
preference: {
background: {
default: 'neutral',
},
text: {
default: 'neutral',
},
shadow: {
default: 'neutral'
},
visual_contrast: {
default: 'regular'
}
},
palette: {
light: true,
accessibility: 'regular',
visual_contrast: {
low: {
opacity: {
primary: .77,
secondary: .44,
tertiary: .27,
quaternary: .14,
divider: .11,
active: .44,
disabled: .34,
drag: .27,
press: .21,
focus: .17,
selected: .14,
hover: .07,
},
contrast_threshold: 2.4
},
regular: {
opacity: {
primary: .87,
secondary: .54,
tertiary: .37,
quaternary: .24,
divider: .14,
active: .54,
disabled: .37,
drag: .31,
press: .27,
focus: .21,
selected: .17,
hover: .1,
},
contrast_threshold: 3
},
high: {
opacity: {
primary: 1,
secondary: .74,
tertiary: .57,
quaternary: .44,
divider: .24,
active: .74,
disabled: .57,
drag: .37,
press: .31,
focus: .24,
selected: .21,
hover: .14,
},
contrast_threshold: 4
},
},
color: {
primary: {
light: colors_1.default.yellow[300],
main: colors_1.default.yellow[500],
dark: colors_1.default.yellow[700],
},
secondary: {
light: colors_1.default.lightgreen[300],
main: colors_1.default.lightgreen[500],
dark: colors_1.default.lightgreen[700],
},
tertiary: {
light: colors_1.default.amber[300],
main: colors_1.default.amber[500],
dark: colors_1.default.amber[700],
},
quaternary: {
light: colors_1.default.cyan[300],
main: colors_1.default.cyan[500],
dark: colors_1.default.cyan[700],
},
info: {
light: colors_1.default.lightblue[300],
main: colors_1.default.lightblue[500],
dark: colors_1.default.lightblue[700],
},
success: {
light: colors_1.default.green[300],
main: colors_1.default.green[500],
dark: colors_1.default.green[700],
},
warning: {
light: colors_1.default.orange[300],
main: colors_1.default.orange[500],
dark: colors_1.default.orange[700],
},
error: {
light: colors_1.default.deeporange[300],
main: colors_1.default.deeporange[500],
dark: colors_1.default.deeporange[700],
},
neutral: {
main: colors_1.default.black,
}
},
text: {},
background: {},
},
shape: {
radius: {
values: {
xxs: 0.25,
xs: 0.5,
sm: 1,
rg: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 7,
},
unit: 8
}
},
breakpoints: {
keys: Object.keys(media),
media,
unit: 'px'
},
space: {
values: {
xxs: 0.25,
xs: 0.5,
sm: 1,
rg: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 6,
xxxl: 7,
},
unit: 8,
},
shadows: {
values: {},
opacities: [.05, .02, .08]
},
typography: {
unit: 'px',
font_size: {
html: 16
},
font_family: {
primary: FONT_FAMILY.primary,
secondary: FONT_FAMILY.secondary,
tertiary: FONT_FAMILY.tertiary
},
values: {
d1: {
fontSize: `${(0, utils_1.pxToRem)(57, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 64 / 57,
letterSpacing: '0px'
},
d2: {
fontSize: `${(0, utils_1.pxToRem)(45, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 52 / 45,
letterSpacing: '0px'
},
d3: {
fontSize: `${(0, utils_1.pxToRem)(35, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 44 / 35,
letterSpacing: '0px'
},
h1: {
fontSize: `${(0, utils_1.pxToRem)(32, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 40 / 32,
letterSpacing: '0px'
},
h2: {
fontSize: `${(0, utils_1.pxToRem)(27, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 35 / 27,
letterSpacing: '0px'
},
h3: {
fontSize: `${(0, utils_1.pxToRem)(24, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 32 / 24,
letterSpacing: '0px'
},
t1: {
fontSize: `${(0, utils_1.pxToRem)(21, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 28 / 21,
letterSpacing: '0px'
},
t2: {
fontSize: `${(0, utils_1.pxToRem)(16, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 24 / 16,
letterSpacing: '.15px'
},
t3: {
fontSize: `${(0, utils_1.pxToRem)(14, 16)}rem`,
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 20 / 14,
letterSpacing: '.1px'
},
l1: {
fontSize: `${(0, utils_1.pxToRem)(16, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
l2: {
fontSize: `${(0, utils_1.pxToRem)(14, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
l3: {
fontSize: `${(0, utils_1.pxToRem)(12, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 16 / 12,
letterSpacing: '.4px'
},
b1: {
fontSize: `${(0, utils_1.pxToRem)(16, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
b2: {
fontSize: `${(0, utils_1.pxToRem)(14, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
b3: {
fontSize: `${(0, utils_1.pxToRem)(12, 16)}rem`,
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 16 / 12,
letterSpacing: '.4px'
},
m1: {
fontSize: `${(0, utils_1.pxToRem)(16, 16)}rem`,
fontFamily: FONT_FAMILY.tertiary,
fontWeight: 400,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
m2: {
fontSize: `${(0, utils_1.pxToRem)(14, 16)}rem`,
fontFamily: FONT_FAMILY.tertiary,
fontWeight: 400,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
m3: {
fontSize: `${(0, utils_1.pxToRem)(12, 16)}rem`,
fontFamily: FONT_FAMILY.tertiary,
fontWeight: 400,
lineHeight: 16 / 12,
letterSpacing: '.4px'
}
}
},
transitions: {
timing_function: {
standard: 'cubic-bezier(.4, 0, .2, 1)',
emphasized: 'cubic-bezier(.4, 0, .6, 1)',
decelerated: 'cubic-bezier(0, 0, .2, 1)',
accelerated: 'cubic-bezier(.4, 0, 1, 1)',
},
duration: {
xxs: 100,
xs: 200,
sm: 250,
rg: 300,
enter: 250,
leave: 200,
complex: 500,
}
},
z_index: {
tooltip: 1700,
modal: 1500,
menu_modal: 1400,
menu: 1300,
button_float: 1200,
app_bar: 1100,
main: 1000,
text: 0,
},
};
class AmauiTheme {
constructor(value = amauiThemeValueDefault, options = (0, copy_1.default)(optionsDefault)) {
this.options = options;
this.subscriptions = {
update: new subscription_1.default(),
};
this.direction = 'ltr';
// Preference
this.preference = (0, copy_1.default)(amauiThemeValueDefault.preference);
// Mode
this.mode = 'regular';
// Colors
this.palette = (0, copy_1.default)(amauiThemeValueDefault.palette);
// Shape
this.shape = (0, copy_1.default)(amauiThemeValueDefault.shape);
// Breakpoints
this.breakpoints = (0, copy_1.default)(amauiThemeValueDefault.breakpoints);
// Space
this.space = (0, copy_1.default)(amauiThemeValueDefault.space);
// Shadows
this.shadows = (0, copy_1.default)(amauiThemeValueDefault.shadows);
// Typography
this.typography = (0, copy_1.default)(amauiThemeValueDefault.typography);
// Transitions
this.transitions = (0, copy_1.default)(amauiThemeValueDefault.transitions);
// zIndex
this.z_index = (0, copy_1.default)(amauiThemeValueDefault.z_index);
// Methods
this.methods = {
palette: {
image: async (image, options = {}) => {
const values = await (0, imageToPalette_1.default)(image, Object.assign({ amount: 4, size: 140, allowCrossOrigin: false }, options));
return (values || []);
},
color: {
value: (version, tone, light = true, palette) => {
const color = palette || (version === 'default' ? this.palette.color.neutral : this.palette.color[version]);
if (color)
return this.palette.light === light ? color[tone] : color[Math.abs(100 - tone)];
},
text: (background, max = true, prefer = 'light', maxOpacity = 'primary') => {
const preferenceText = this.preference.text.default || 'neutral';
const luminances = {
background: (0, getLuminance_1.default)(background),
text: (0, getLuminance_1.default)(this.palette.text.default.primary)
};
let valueLighten = false;
let tone = preferenceText === 'neutral' ? this.palette.light ? 0 : 100 : 50;
let contrastRatio = (0, getContrastRatio_1.default)(background, this.palette.text.default.primary);
let color = this.palette.text.default.primary;
if (prefer === 'light' && !valueLighten)
valueLighten = (0, getContrastRatio_1.default)(background, '#fff') >= 1.74;
else if (prefer === 'dark' && valueLighten)
valueLighten = (0, getContrastRatio_1.default)(background, '#000') >= 1.74;
if (max) {
tone = valueLighten ? 100 : 0;
color = (0, colorToRgb_1.default)(this.palette.color[preferenceText][tone], this.palette.visual_contrast.default.opacity[maxOpacity]);
}
else {
valueLighten = luminances.text >= luminances.background;
while (contrastRatio < this.palette.visual_contrast.default.contrast_threshold) {
// Update tone
valueLighten ? tone += 10 : tone -= 10;
tone = (0, clamp_1.default)(tone, 0, 100);
color = (0, colorToRgb_1.default)(this.palette.color[preferenceText][tone], this.palette.visual_contrast.default.opacity.primary);
contrastRatio = (0, getContrastRatio_1.default)(background, color);
}
}
return color;
},
alpha: alpha_1.default,
emphasize: emphasize_1.default,
lighten: lighten_1.default,
darken: darken_1.default,
getLuminance: getLuminance_1.default,
getContrastRatio: getContrastRatio_1.default,
colorToRgb: colorToRgb_1.default,
rgbToRgba: rgbToRgba_1.default,
rgbToHsl: rgbToHsl_1.default,
rgbToHex: rgbToHex_1.default,
hslToRgb: hslToRgb_1.default,
hexToRgb: hexToRgb_1.default,
}
},
color: (value) => AmauiTheme.make.color(value),
shadow: (value = this.palette.color.primary.main, opacities = this.shadows.opacities) => AmauiTheme.make.shadow(value, opacities),
space: {
value: (value, unit, add = 0) => {
let value_;
if (value === 'round')
value_ = this.space.values[value];
else
value_ = this.space.unit * (this.space.values[value] !== undefined ? this.space.values[value] : value);
return unit ? value_ + add + unit : value_ + add;
},
},
shape: {
radius: {
value: (value, unit, add = 0) => {
const value_ = this.shape.radius.unit * (this.shape.radius.values[value] !== undefined ? this.shape.radius.values[value] : value);
return unit ? value_ + add + unit : value_ + add;
},
},
},
transitions: {
make: (properties, options = { duration: 'rg', timing_function: 'standard' }) => {
const props = (0, utils_1.is)('array', properties) ? properties : [properties];
const duration = this.transitions.duration[options === null || options === void 0 ? void 0 : options.duration] || ((0, utils_1.is)('number', options === null || options === void 0 ? void 0 : options.duration) ? options === null || options === void 0 ? void 0 : options.duration : this.transitions.duration.rg);
const timing_function = this.transitions.timing_function[options === null || options === void 0 ? void 0 : options.timing_function] || ((0, utils_1.is)('string', options === null || options === void 0 ? void 0 : options.timing_function) && (options === null || options === void 0 ? void 0 : options.timing_function)) || this.transitions.timing_function.standard;
const delay = this.transitions.duration[options === null || options === void 0 ? void 0 : options.delay] || ((0, utils_1.is)('number', options === null || options === void 0 ? void 0 : options.delay) ? options === null || options === void 0 ? void 0 : options.delay : 0);
const motion = [true, undefined].includes(this.options.motion);
return props.map(prop => `${prop} ${motion ? duration : 0}ms ${timing_function} ${delay}ms`).join(', ');
},
}
};
this.ui = {
className: {
static: true
},
features: 'regular'
};
this.elements = {};
this.options = (0, merge_1.default)(options, optionsDefault, { copy: true });
this.init(value);
}
init(value_ = this) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
const _p = (0, copy_1.default)(value_ || {}), { mode, preference, palette = {}, shape = {}, breakpoints = {}, space = {}, shadows = {}, typography = {}, transitions, z_index = {}, id, subscriptions, methods, element, options = {}, direction } = _p, other = __rest(_p, ["mode", "preference", "palette", "shape", "breakpoints", "space", "shadows", "typography", "transitions", "z_index", "id", "subscriptions", "methods", "element", "options", "direction"]);
const { light, color = {}, background = {}, text = {}, visual_contrast = {}, accessibility } = palette || {};
if (this.id === undefined)
this.id = (0, utils_1.getID)();
// Options
this.options = (0, merge_1.default)(options, this.options, { copy: true });
this.element = element || this.options.element || this.element;
// Direction
if ((0, isEnvironment_1.default)('browser')) {
if (!this.element)
this.element = window.document.body;
// AmauiStyle in element
this.element.setAttribute('data-amaui-theme', 'true');
(this.element)['amaui-theme'] = true;
this.element.amaui_theme = this;
const style = (0, try_1.default)(() => window.getComputedStyle(this.element));
this.direction = (style === null || style === void 0 ? void 0 : style.direction) || (0, try_1.default)(() => window.getComputedStyle(document.documentElement).direction) || 'ltr';
this.options.rule.rtl = this.direction === 'rtl';
}
// Light
if (light !== undefined)
this.palette.light = light;
// Mode
if (mode !== undefined)
this.mode = mode;
// Preference
if ((0, utils_1.is)('object', preference))
this.preference = (0, merge_1.default)(preference, this.preference);
// Visual contrast
if ((0, utils_1.is)('object', visual_contrast))
this.palette.visual_contrast = (0, merge_1.default)(visual_contrast, this.palette.visual_contrast);
this.palette.visual_contrast.default = this.palette.visual_contrast[((_a = this.preference.visual_contrast) === null || _a === void 0 ? void 0 : _a.default) || 'regular'];
// Colors
const defaults = ['primary', 'secondary', 'tertiary', 'quaternary', 'info', 'success', 'warning', 'error', 'neutral'];
// Normalize
Object.keys(color).forEach(prop => {
const item = color[prop];
if ((0, utils_1.is)('string', item))
color[prop] = { main: item };
});
// Defaults if not provided add 'em
defaults.forEach(item => {
if (!(0, utils_1.is)('object', color[item]))
color[item] = this.palette.color[item];
if (!((0, utils_1.is)('string', color[item].light) || (0, utils_1.is)('string', color[item].main) || (0, utils_1.is)('string', color[item].dark))) {
color[item].main = this.palette.color[item].main;
}
});
// Accessibility
if (accessibility !== undefined)
this.palette.accessibility = accessibility;
if (this.palette.accessibility !== 'regular') {
switch (this.palette.accessibility) {
case 'colorblind':
// Primary
color.primary = this.methods.color(colors_1.default.blue[500]);
color.primary.light = colors_1.default.blue[300];
color.primary.main = colors_1.default.blue[500];
color.primary.dark = colors_1.default.blue[700];
// Secondary
color.secondary = this.methods.color(colors_1.default.orange[500]);
color.secondary.light = colors_1.default.orange[300];
color.secondary.main = colors_1.default.orange[500];
color.secondary.dark = colors_1.default.orange[700];
// Tertiary
color.tertiary = this.methods.color(colors_1.default.yellow[500]);
color.tertiary.light = colors_1.default.yellow[300];
color.tertiary.main = colors_1.default.yellow[500];
color.tertiary.dark = colors_1.default.yellow[700];
// Quaternary
color.quaternary = this.methods.color(colors_1.default.gray[500]);
color.quaternary.light = colors_1.default.gray[300];
color.quaternary.main = colors_1.default.gray[500];
color.quaternary.dark = colors_1.default.gray[700];
break;
case 'tritanopia':
// Primary
color.primary = this.methods.color(colors_1.default.blue[500]);
color.primary.light = colors_1.default.blue[300];
color.primary.main = colors_1.default.blue[500];
color.primary.dark = colors_1.default.blue[700];
// Secondary
color.secondary = this.methods.color(colors_1.default.red[500]);
color.secondary.light = colors_1.default.red[300];
color.secondary.main = colors_1.default.red[500];
color.secondary.dark = colors_1.default.red[700];
// Tertiary
color.tertiary = this.methods.color(colors_1.default.cyan[500]);
color.tertiary.light = colors_1.default.cyan[300];
color.tertiary.main = colors_1.default.cyan[500];
color.tertiary.dark = colors_1.default.cyan[700];
// Quaternary
color.quaternary = this.methods.color(colors_1.default.gray[500]);
color.quaternary.light = colors_1.default.gray[300];
color.quaternary.main = colors_1.default.gray[500];
color.quaternary.dark = colors_1.default.gray[700];
break;
default:
break;
}
}
Object.keys(color).forEach(prop => {
const item = color[prop];
const value = AmauiTheme.make.color(color[prop].main || color[prop].light || color[prop].dark);
if (value) {
this.palette.color[prop] = value;
// User overrides, add instead of the premade value
if ((0, utils_1.is)('object', item))
Object.keys(item).forEach(version => this.palette.color[prop][version] = item[version]);
}
});
// text
Object.keys(text).forEach(prop => {
this.palette.text[prop] = text[prop];
});
Object.keys(this.palette.color).forEach(item => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const version = this.palette.color[item];
if (!this.palette.text[item])
this.palette.text[item] = {};
const colorValue = this.palette.light ? version[item === 'neutral' ? 0 : 30] : version[item === 'neutral' ? 100 : 70];
this.palette.text[item].primary = ((_a = text[item]) === null || _a === void 0 ? void 0 : _a.primary) || (0, colorToRgb_1.default)(colorValue, (_b = this.palette.visual_contrast.default) === null || _b === void 0 ? void 0 : _b.opacity.primary);
this.palette.text[item].secondary = ((_c = text[item]) === null || _c === void 0 ? void 0 : _c.secondary) || (0, colorToRgb_1.default)(colorValue, (_d = this.palette.visual_contrast.default) === null || _d === void 0 ? void 0 : _d.opacity.secondary);
this.palette.text[item].tertiary = ((_e = text[item]) === null || _e === void 0 ? void 0 : _e.tertiary) || (0, colorToRgb_1.default)(colorValue, (_f = this.palette.visual_contrast.default) === null || _f === void 0 ? void 0 : _f.opacity.tertiary);
this.palette.text[item].quaternary = ((_g = text[item]) === null || _g === void 0 ? void 0 : _g.quaternary) || (0, colorToRgb_1.default)(colorValue, (_h = this.palette.visual_contrast.default) === null || _h === void 0 ? void 0 : _h.opacity.quaternary);
});
// light
const colorLight = this.palette.color.neutral[100];
this.palette.text.light = {};
this.palette.text.light.primary = (0, colorToRgb_1.default)(colorLight, (_b = this.palette.visual_contrast.default) === null || _b === void 0 ? void 0 : _b.opacity.primary);
this.palette.text.light.secondary = (0, colorToRgb_1.default)(colorLight, (_c = this.palette.visual_contrast.default) === null || _c === void 0 ? void 0 : _c.opacity.secondary);
this.palette.text.light.tertiary = (0, colorToRgb_1.default)(colorLight, (_d = this.palette.visual_contrast.default) === null || _d === void 0 ? void 0 : _d.opacity.tertiary);
this.palette.text.light.quaternary = (0, colorToRgb_1.default)(colorLight, (_e = this.palette.visual_contrast.default) === null || _e === void 0 ? void 0 : _e.opacity.quaternary);
// dark
const colorDark = this.palette.color.neutral[0];
this.palette.text.dark = {};
this.palette.text.dark.primary = (0, colorToRgb_1.default)(colorDark, (_f = this.palette.visual_contrast.default) === null || _f === void 0 ? void 0 : _f.opacity.primary);
this.palette.text.dark.secondary = (0, colorToRgb_1.default)(colorDark, (_g = this.palette.visual_contrast.default) === null || _g === void 0 ? void 0 : _g.opacity.secondary);
this.palette.text.dark.tertiary = (0, colorToRgb_1.default)(colorDark, (_h = this.palette.visual_contrast.default) === null || _h === void 0 ? void 0 : _h.opacity.tertiary);
this.palette.text.dark.quaternary = (0, colorToRgb_1.default)(colorDark, (_j = this.palette.visual_contrast.default) === null || _j === void 0 ? void 0 : _j.opacity.quaternary);
// background
Object.keys(background).forEach(prop => {
this.palette.background[prop] = background[prop];
});
Object.keys(this.palette.color).forEach(item => {
var _a, _b, _c, _d;
const version = this.palette.color[item];
if (!this.palette.background[item])
this.palette.background[item] = {};
this.palette.background[item].primary = ((_a = background[item]) === null || _a === void 0 ? void 0 : _a.primary) || version[!this.palette.light ? 0 : 100];
this.palette.background[item].secondary = ((_b = background[item]) === null || _b === void 0 ? void 0 : _b.secondary) || version[!this.palette.light ? 1 : 99];
this.palette.background[item].tertiary = ((_c = background[item]) === null || _c === void 0 ? void 0 : _c.tertiary) || version[!this.palette.light ? 5 : 95];
this.palette.background[item].quaternary = ((_d = background[item]) === null || _d === void 0 ? void 0 : _d.quaternary) || version[!this.palette.light ? 10 : 90];
});
// light
this.palette.background.light = {};
this.palette.background.light.primary = this.palette.color.neutral[100];
this.palette.background.light.secondary = this.palette.color.neutral[99];
this.palette.background.light.tertiary = this.palette.color.neutral[95];
this.palette.background.light.quaternary = this.palette.color.neutral[90];
// dark
this.palette.background.dark = {};
this.palette.background.dark.primary = this.palette.color.neutral[0];
this.palette.background.dark.secondary = this.palette.color.neutral[1];
this.palette.background.dark.tertiary = this.palette.color.neutral[5];
this.palette.background.dark.quaternary = this.palette.color.neutral[10];
// default
this.palette.background.default = this.palette.background[this.preference.background.default || 'white'];
this.palette.text.default = this.palette.text[this.preference.text.default || 'neutral'];
// other
this.palette.text.divider = (0, colorToRgb_1.default)(this.palette.text.default.primary, (_k = this.palette.visual_contrast.default) === null || _k === void 0 ? void 0 : _k.opacity.divider);
this.palette.text.active = this.palette.text.default.secondary;
this.palette.text.hover = (0, colorToRgb_1.default)(this.palette.text.default.primary, (_l = this.palette.visual_contrast.default) === null || _l === void 0 ? void 0 : _l.opacity.hover);
this.palette.text.selected = (0, colorToRgb_1.default)(this.palette.text.default.primary, (_m = this.palette.visual_contrast.default) === null || _m === void 0 ? void 0 : _m.opacity.selected);
this.palette.text.focus = (0, colorToRgb_1.default)(this.palette.text.default.primary, (_o = this.palette.visual_contrast.default) === null || _o === void 0 ? void 0 : _o.opacity.focus);
this.palette.text.disabled = this.palette.text.default.tertiary;
// Shape
if ((0, utils_1.is)('object', shape))
this.shape = (0, merge_1.default)(shape, this.shape);
// Radius
if ((0, utils_1.is)('object', shape.radius)) {
this.shape.radius.unit = shape.radius.unit !== undefined ? shape.radius.unit : this.shape.radius.unit;
}
if (!this.shape.radius.keys)
Object.defineProperty(this.shape.radius, 'keys', {
get() { return Object.keys(instance.shape.radius.values); }
});
// Breakpoints
if ((0, utils_1.is)('object', breakpoints))
this.breakpoints = (0, merge_1.default)(breakpoints, this.breakpoints);
const instance = this;
// Space
if ((0, utils_1.is)('object', space)) {
this.space = (0, merge_1.default)(space, this.space);
this.space.unit = space.unit !== undefined ? space.unit : this.space.unit;
}
if (!this.space.keys)
Object.defineProperty(this.space, 'keys', {
get() { return Object.keys(instance.space.values); }
});
// Shadows
if ((0, utils_1.is)('object', shadows))
this.shadows = (0, merge_1.default)(shadows, this.shadows);
Object.keys(this.palette.color).forEach(item => {
const version = this.palette.color[item];
this.shadows.values[item] = AmauiTheme.make.shadow(version.main, this.shadows.opacities);
});
// Default
this.shadows.values.default = AmauiTheme.make.shadow(this.palette.color[this.preference.shadow.default].main, this.shadows.opacities);
// Typography
if ((0, utils_1.is)('object', typography))
this.typography = (0, merge_1.default)(typography, this.typography);
// Transitions
if ((0, utils_1.is)('object', transitions))
this.transitions = (0, merge_1.default)(transitions, this.transitions);
// zIndex
if ((0, utils_1.is)('object', z_index))
this.z_index = (0, merge_1.default)(z_index, this.z_index);
// Other
Object.keys(other).forEach(prop => this[prop] = other[prop]);
// updates
if ((0, isEnvironment_1.default)('browser')) {
if (this.options.updateFontSize) {
const fontSizeHTML = (0, utils_1.is)('number', this.typography.font_size.html) ? `${this.typography.font_size.html}px` : this.typography.font_size.html;
window.document.documentElement.style.fontSize = fontSizeHTML;
}
}
}
async image(value_, other = {}, options = {}) {
// Image
if (value_) {
const values = await this.methods.palette.image(value_, options);
if (!!values.length) {
const palette = {
color: {
primary: {},
secondary: {},
tertiary: {},
quaternary: {}
},
};
palette.color.primary.main = values[0];
palette.color.secondary.main = values[1];
palette.color.tertiary.main = values[2];
palette.color.quaternary.main = values[3];
const value = (0, merge_1.default)({ palette }, other, { copy: true });
this.init(value);
// Add image to the palette
this.palette.image = value_;
}
}
}
update(value) {
if (value !== undefined) {
this.init((0, copy_1.default)(value));
this.subscriptions.update.emit(value, this);
}
}
static get amaui_theme() { return new AmauiTheme(); }
static get make() {
return {
color: (value) => {
const rgb = (0, colorToRgb_1.default)(value);
if (rgb) {
const values = {};
const [hue, saturation, light] = (0, rgbToHsl_1.default)(rgb, 1, true);
const tones = [];
for (let i = 0; i <= 100; i += 1)
tones.push(i);
// Tones
tones.forEach(tone => values[tone] = (0, hslToRgb_1.default)(`hsl(${hue}, ${saturation}%, ${tone}%)`));
// Main
values.main = rgb;
const mainTone = Math.round((0, castParam_1.default)(light) / 10) * 10;
const mainIndex = tones.findIndex(item => item === mainTone);
// Light
// max light 90 value
if (mainIndex >= 10)
values.light = values[90];
// min light 10 value
else if (mainIndex === 0)
values.light = values[10];
else
values.light = values[tones[mainIndex + 2]];
// Dark
// min dark 10 value
if (mainIndex < 5)
values.dark = values[10];
// max dark 90 value
else if (mainIndex === 14)
values.dark = values[90];
else
values.dark = values[tones[mainIndex - 2]];
return values;
}
},
shadow: (value, opacities = []) => {
const shadow = {
'0': 'none',
};
const values = [
['1', [0, 1, 1, 0, 0, 2, 1, -1, 0, 1, 3, 0]],
['2', [0, 2, 2, 0, 0, 3, 3, -2, 0, 1, 8, 0]],
['3', [0, 3, 4, 0, 0, 3, 3, -2, 0, 1, 8, 0]],
['4', [0, 4, 5, 0, 0, 1, 10, 0, 0, 2, 4, -1]],
['6', [0, 6, 10, 0, 0, 1, 18, 0, 0, 3, 5, -1]],
['8', [0, 8, 10, 1, 0, 3, 14, 2, 0, 5, 5, -3]],
['9', [0, 9, 12, 1, 0, 3, 16, 2, 0, 5, 6, -3]],
['12', [0, 12, 17, 2, 0, 5, 22, 4, 0, 7, 7, -4]],
['16', [0, 16, 24, 2, 0, 6, 30, 5, 0, 8, 10, -5]],
['24', [0, 24, 37, 3, 0, 9, 46, 8, 0, 11, 15, -7]],
];
values.forEach(([item, v]) => shadow[item] = [
`${v[0]}px ${v[1]}px ${v[2]}px ${v[3]}px ${(0, colorToRgb_1.default)(value, opacities[0])}`,
`${v[4]}px ${v[5]}px ${v[6]}px ${v[7]}px ${(0, colorToRgb_1.default)(value, opacities[1])}`,
`${v[8]}px ${v[9]}px ${v[10]}px ${v[11]}px ${(0, colorToRgb_1.default)(value, opacities[2])}`
].join(', '));
return shadow;
},
};
}
static get(value, index = 0) {
const themes = this.all(value);
return themes[index === -1 ? themes.length - 1 : index];
}
static first(value) {
return this.get(value);
}
static last(value) {
return this.get(value, -1);
}
static nearest(value) {
var _a;
return (_a = (0, element_1.default)(value).nearest(this.attributes.map(item => `[${item}]`))) === null || _a === void 0 ? void 0 : _a.amaui_theme;
}
static furthest(value) {
var _a;
return (_a = (0, element_1.default)(value).furthest(this.attributes.map(item => `[${item}]`))) === null || _a === void 0 ? void 0 : _a.amaui_theme;
}
static all(value) {
const elements = [
value,
...(0, element_1.default)(value).parents(this.attributes.map(item => `[${item}]`)),
];
return elements
.filter(Boolean)
.map((item) => item.amaui_theme)
.filter(Boolean) || [];
}
}
AmauiTheme.attributes = [
'data-amaui-theme',
'amaui-theme'
];
exports.default = AmauiTheme;