@amaui/style
Version:
CSS in JS styling solution
921 lines (818 loc) • 36.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import alpha from '@amaui/utils/alpha';
import castParam from '@amaui/utils/castParam';
import clamp from '@amaui/utils/clamp';
import colorToRgb from '@amaui/utils/colorToRgb';
import copy from '@amaui/utils/copy';
import darken from '@amaui/utils/darken';
import elementMethod from '@amaui/utils/element';
import emphasize from '@amaui/utils/emphasize';
import getContrastRatio from '@amaui/utils/getContrastRatio';
import getLuminance from '@amaui/utils/getLuminance';
import hexToRgb from '@amaui/utils/hexToRgb';
import hslToRgb from '@amaui/utils/hslToRgb';
import imageToPalette from '@amaui/utils/imageToPalette';
import lighten from '@amaui/utils/lighten';
import isEnvironment from '@amaui/utils/isEnvironment';
import rgbToHex from '@amaui/utils/rgbToHex';
import rgbToHsl from '@amaui/utils/rgbToHsl';
import rgbToRgba from '@amaui/utils/rgbToRgba';
import Try from '@amaui/utils/try';
import merge from '@amaui/utils/merge';
import AmauiSubscription from '@amaui/subscription';
import { getID, is, pxToRem } from './utils';
import colors from './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: ".concat(i, "px)");
media["".concat(i, "-up")] = "(min-width: ".concat(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.yellow[300],
main: colors.yellow[500],
dark: colors.yellow[700]
},
secondary: {
light: colors.lightgreen[300],
main: colors.lightgreen[500],
dark: colors.lightgreen[700]
},
tertiary: {
light: colors.amber[300],
main: colors.amber[500],
dark: colors.amber[700]
},
quaternary: {
light: colors.cyan[300],
main: colors.cyan[500],
dark: colors.cyan[700]
},
info: {
light: colors.lightblue[300],
main: colors.lightblue[500],
dark: colors.lightblue[700]
},
success: {
light: colors.green[300],
main: colors.green[500],
dark: colors.green[700]
},
warning: {
light: colors.orange[300],
main: colors.orange[500],
dark: colors.orange[700]
},
error: {
light: colors.deeporange[300],
main: colors.deeporange[500],
dark: colors.deeporange[700]
},
neutral: {
main: colors.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: "".concat(pxToRem(57, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 64 / 57,
letterSpacing: '0px'
},
d2: {
fontSize: "".concat(pxToRem(45, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 52 / 45,
letterSpacing: '0px'
},
d3: {
fontSize: "".concat(pxToRem(35, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 44 / 35,
letterSpacing: '0px'
},
h1: {
fontSize: "".concat(pxToRem(32, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 40 / 32,
letterSpacing: '0px'
},
h2: {
fontSize: "".concat(pxToRem(27, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 35 / 27,
letterSpacing: '0px'
},
h3: {
fontSize: "".concat(pxToRem(24, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 700,
lineHeight: 32 / 24,
letterSpacing: '0px'
},
t1: {
fontSize: "".concat(pxToRem(21, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 28 / 21,
letterSpacing: '0px'
},
t2: {
fontSize: "".concat(pxToRem(16, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 24 / 16,
letterSpacing: '.15px'
},
t3: {
fontSize: "".concat(pxToRem(14, 16), "rem"),
fontFamily: FONT_FAMILY.primary,
fontWeight: 600,
lineHeight: 20 / 14,
letterSpacing: '.1px'
},
l1: {
fontSize: "".concat(pxToRem(16, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
l2: {
fontSize: "".concat(pxToRem(14, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
l3: {
fontSize: "".concat(pxToRem(12, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 600,
lineHeight: 16 / 12,
letterSpacing: '.4px'
},
b1: {
fontSize: "".concat(pxToRem(16, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
b2: {
fontSize: "".concat(pxToRem(14, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
b3: {
fontSize: "".concat(pxToRem(12, 16), "rem"),
fontFamily: FONT_FAMILY.secondary,
fontWeight: 400,
lineHeight: 16 / 12,
letterSpacing: '.4px'
},
m1: {
fontSize: "".concat(pxToRem(16, 16), "rem"),
fontFamily: FONT_FAMILY.tertiary,
fontWeight: 400,
lineHeight: 24 / 16,
letterSpacing: '.5px'
},
m2: {
fontSize: "".concat(pxToRem(14, 16), "rem"),
fontFamily: FONT_FAMILY.tertiary,
fontWeight: 400,
lineHeight: 20 / 14,
letterSpacing: '.25px'
},
m3: {
fontSize: "".concat(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 {
// Preference
// Mode
// Colors
// Shape
// Breakpoints
// Space
// Shadows
// Typography
// Transitions
// zIndex
// Methods
// Any new property
constructor() {
var _this = this;
let _value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : amauiThemeValueDefault;
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : copy(optionsDefault);
_defineProperty(this, "subscriptions", {
update: new AmauiSubscription()
});
_defineProperty(this, "direction", 'ltr');
_defineProperty(this, "preference", copy(amauiThemeValueDefault.preference));
_defineProperty(this, "mode", 'regular');
_defineProperty(this, "palette", copy(amauiThemeValueDefault.palette));
_defineProperty(this, "shape", copy(amauiThemeValueDefault.shape));
_defineProperty(this, "breakpoints", copy(amauiThemeValueDefault.breakpoints));
_defineProperty(this, "space", copy(amauiThemeValueDefault.space));
_defineProperty(this, "shadows", copy(amauiThemeValueDefault.shadows));
_defineProperty(this, "typography", copy(amauiThemeValueDefault.typography));
_defineProperty(this, "transitions", copy(amauiThemeValueDefault.transitions));
_defineProperty(this, "z_index", copy(amauiThemeValueDefault.z_index));
_defineProperty(this, "methods", {
palette: {
image: async function (image) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
const values = await imageToPalette(image, {
amount: 4,
size: 140,
allowCrossOrigin: false,
...options
});
return values || [];
},
color: {
value: function (version, tone) {
let light = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
let palette = arguments.length > 3 ? arguments[3] : undefined;
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: function (background) {
let max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
let prefer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'light';
let maxOpacity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'primary';
const preferenceText = _this.preference.text.default || 'neutral';
const luminances = {
background: getLuminance(background),
text: getLuminance(_this.palette.text.default.primary)
};
let valueLighten = false;
let tone = preferenceText === 'neutral' ? _this.palette.light ? 0 : 100 : 50;
let contrastRatio = getContrastRatio(background, _this.palette.text.default.primary);
let color = _this.palette.text.default.primary;
if (prefer === 'light' && !valueLighten) valueLighten = getContrastRatio(background, '#fff') >= 1.74;else if (prefer === 'dark' && valueLighten) valueLighten = getContrastRatio(background, '#000') >= 1.74;
if (max) {
tone = valueLighten ? 100 : 0;
color = colorToRgb(_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 = clamp(tone, 0, 100);
color = colorToRgb(_this.palette.color[preferenceText][tone], _this.palette.visual_contrast.default.opacity.primary);
contrastRatio = getContrastRatio(background, color);
}
}
return color;
},
alpha,
emphasize,
lighten,
darken,
getLuminance,
getContrastRatio,
colorToRgb,
rgbToRgba,
rgbToHsl,
rgbToHex,
hslToRgb,
hexToRgb
}
},
color: value => AmauiTheme.make.color(value),
shadow: function () {
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.palette.color.primary.main;
let opacities = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.shadows.opacities;
return AmauiTheme.make.shadow(value, opacities);
},
space: {
value: function (value, unit) {
let add = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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: function (value, unit) {
let add = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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: function (properties) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
duration: 'rg',
timing_function: 'standard'
};
const props = is('array', properties) ? properties : [properties];
const duration = _this.transitions.duration[options === null || options === void 0 ? void 0 : options.duration] || (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] || 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] || (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 => "".concat(prop, " ").concat(motion ? duration : 0, "ms ").concat(timing_function, " ").concat(delay, "ms")).join(', ');
}
}
});
_defineProperty(this, "ui", {
className: {
static: true
},
features: 'regular'
});
_defineProperty(this, "elements", {});
this.options = options;
this.options = merge(options, optionsDefault, {
copy: true
});
this.init(_value);
}
init() {
var _this$preference$visu, _this$palette$visual_5, _this$palette$visual_6, _this$palette$visual_7, _this$palette$visual_8, _this$palette$visual_9, _this$palette$visual_10, _this$palette$visual_11, _this$palette$visual_12, _this$palette$visual_13, _this$palette$visual_14, _this$palette$visual_15, _this$palette$visual_16;
let value_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this;
const {
mode,
preference,
palette = {},
shape = {},
breakpoints = {},
space = {},
shadows = {},
typography = {},
transitions,
z_index = {},
id,
subscriptions,
methods,
element,
options = {},
direction,
...other
} = copy(value_ || {});
const {
light,
color = {},
background = {},
text = {},
visual_contrast = {},
accessibility
} = palette || {};
if (this.id === undefined) this.id = getID(); // Options
this.options = merge(options, this.options, {
copy: true
});
this.element = element || this.options.element || this.element; // Direction
if (isEnvironment('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 = Try(() => window.getComputedStyle(this.element));
this.direction = (style === null || style === void 0 ? void 0 : style.direction) || Try(() => 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 (is('object', preference)) this.preference = merge(preference, this.preference); // Visual contrast
if (is('object', visual_contrast)) this.palette.visual_contrast = merge(visual_contrast, this.palette.visual_contrast);
this.palette.visual_contrast.default = this.palette.visual_contrast[((_this$preference$visu = this.preference.visual_contrast) === null || _this$preference$visu === void 0 ? void 0 : _this$preference$visu.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 (is('string', item)) color[prop] = {
main: item
};
}); // Defaults if not provided add 'em
defaults.forEach(item => {
if (!is('object', color[item])) color[item] = this.palette.color[item];
if (!(is('string', color[item].light) || is('string', color[item].main) || 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.blue[500]);
color.primary.light = colors.blue[300];
color.primary.main = colors.blue[500];
color.primary.dark = colors.blue[700]; // Secondary
color.secondary = this.methods.color(colors.orange[500]);
color.secondary.light = colors.orange[300];
color.secondary.main = colors.orange[500];
color.secondary.dark = colors.orange[700]; // Tertiary
color.tertiary = this.methods.color(colors.yellow[500]);
color.tertiary.light = colors.yellow[300];
color.tertiary.main = colors.yellow[500];
color.tertiary.dark = colors.yellow[700]; // Quaternary
color.quaternary = this.methods.color(colors.gray[500]);
color.quaternary.light = colors.gray[300];
color.quaternary.main = colors.gray[500];
color.quaternary.dark = colors.gray[700];
break;
case 'tritanopia':
// Primary
color.primary = this.methods.color(colors.blue[500]);
color.primary.light = colors.blue[300];
color.primary.main = colors.blue[500];
color.primary.dark = colors.blue[700]; // Secondary
color.secondary = this.methods.color(colors.red[500]);
color.secondary.light = colors.red[300];
color.secondary.main = colors.red[500];
color.secondary.dark = colors.red[700]; // Tertiary
color.tertiary = this.methods.color(colors.cyan[500]);
color.tertiary.light = colors.cyan[300];
color.tertiary.main = colors.cyan[500];
color.tertiary.dark = colors.cyan[700]; // Quaternary
color.quaternary = this.methods.color(colors.gray[500]);
color.quaternary.light = colors.gray[300];
color.quaternary.main = colors.gray[500];
color.quaternary.dark = colors.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 (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 _text$item, _this$palette$visual_, _text$item2, _this$palette$visual_2, _text$item3, _this$palette$visual_3, _text$item4, _this$palette$visual_4;
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 = ((_text$item = text[item]) === null || _text$item === void 0 ? void 0 : _text$item.primary) || colorToRgb(colorValue, (_this$palette$visual_ = this.palette.visual_contrast.default) === null || _this$palette$visual_ === void 0 ? void 0 : _this$palette$visual_.opacity.primary);
this.palette.text[item].secondary = ((_text$item2 = text[item]) === null || _text$item2 === void 0 ? void 0 : _text$item2.secondary) || colorToRgb(colorValue, (_this$palette$visual_2 = this.palette.visual_contrast.default) === null || _this$palette$visual_2 === void 0 ? void 0 : _this$palette$visual_2.opacity.secondary);
this.palette.text[item].tertiary = ((_text$item3 = text[item]) === null || _text$item3 === void 0 ? void 0 : _text$item3.tertiary) || colorToRgb(colorValue, (_this$palette$visual_3 = this.palette.visual_contrast.default) === null || _this$palette$visual_3 === void 0 ? void 0 : _this$palette$visual_3.opacity.tertiary);
this.palette.text[item].quaternary = ((_text$item4 = text[item]) === null || _text$item4 === void 0 ? void 0 : _text$item4.quaternary) || colorToRgb(colorValue, (_this$palette$visual_4 = this.palette.visual_contrast.default) === null || _this$palette$visual_4 === void 0 ? void 0 : _this$palette$visual_4.opacity.quaternary);
}); // light
const colorLight = this.palette.color.neutral[100];
this.palette.text.light = {};
this.palette.text.light.primary = colorToRgb(colorLight, (_this$palette$visual_5 = this.palette.visual_contrast.default) === null || _this$palette$visual_5 === void 0 ? void 0 : _this$palette$visual_5.opacity.primary);
this.palette.text.light.secondary = colorToRgb(colorLight, (_this$palette$visual_6 = this.palette.visual_contrast.default) === null || _this$palette$visual_6 === void 0 ? void 0 : _this$palette$visual_6.opacity.secondary);
this.palette.text.light.tertiary = colorToRgb(colorLight, (_this$palette$visual_7 = this.palette.visual_contrast.default) === null || _this$palette$visual_7 === void 0 ? void 0 : _this$palette$visual_7.opacity.tertiary);
this.palette.text.light.quaternary = colorToRgb(colorLight, (_this$palette$visual_8 = this.palette.visual_contrast.default) === null || _this$palette$visual_8 === void 0 ? void 0 : _this$palette$visual_8.opacity.quaternary); // dark
const colorDark = this.palette.color.neutral[0];
this.palette.text.dark = {};
this.palette.text.dark.primary = colorToRgb(colorDark, (_this$palette$visual_9 = this.palette.visual_contrast.default) === null || _this$palette$visual_9 === void 0 ? void 0 : _this$palette$visual_9.opacity.primary);
this.palette.text.dark.secondary = colorToRgb(colorDark, (_this$palette$visual_10 = this.palette.visual_contrast.default) === null || _this$palette$visual_10 === void 0 ? void 0 : _this$palette$visual_10.opacity.secondary);
this.palette.text.dark.tertiary = colorToRgb(colorDark, (_this$palette$visual_11 = this.palette.visual_contrast.default) === null || _this$palette$visual_11 === void 0 ? void 0 : _this$palette$visual_11.opacity.tertiary);
this.palette.text.dark.quaternary = colorToRgb(colorDark, (_this$palette$visual_12 = this.palette.visual_contrast.default) === null || _this$palette$visual_12 === void 0 ? void 0 : _this$palette$visual_12.opacity.quaternary); // background
Object.keys(background).forEach(prop => {
this.palette.background[prop] = background[prop];
});
Object.keys(this.palette.color).forEach(item => {
var _background$item, _background$item2, _background$item3, _background$item4;
const version = this.palette.color[item];
if (!this.palette.background[item]) this.palette.background[item] = {};
this.palette.background[item].primary = ((_background$item = background[item]) === null || _background$item === void 0 ? void 0 : _background$item.primary) || version[!this.palette.light ? 0 : 100];
this.palette.background[item].secondary = ((_background$item2 = background[item]) === null || _background$item2 === void 0 ? void 0 : _background$item2.secondary) || version[!this.palette.light ? 1 : 99];
this.palette.background[item].tertiary = ((_background$item3 = background[item]) === null || _background$item3 === void 0 ? void 0 : _background$item3.tertiary) || version[!this.palette.light ? 5 : 95];
this.palette.background[item].quaternary = ((_background$item4 = background[item]) === null || _background$item4 === void 0 ? void 0 : _background$item4.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 = colorToRgb(this.palette.text.default.primary, (_this$palette$visual_13 = this.palette.visual_contrast.default) === null || _this$palette$visual_13 === void 0 ? void 0 : _this$palette$visual_13.opacity.divider);
this.palette.text.active = this.palette.text.default.secondary;
this.palette.text.hover = colorToRgb(this.palette.text.default.primary, (_this$palette$visual_14 = this.palette.visual_contrast.default) === null || _this$palette$visual_14 === void 0 ? void 0 : _this$palette$visual_14.opacity.hover);
this.palette.text.selected = colorToRgb(this.palette.text.default.primary, (_this$palette$visual_15 = this.palette.visual_contrast.default) === null || _this$palette$visual_15 === void 0 ? void 0 : _this$palette$visual_15.opacity.selected);
this.palette.text.focus = colorToRgb(this.palette.text.default.primary, (_this$palette$visual_16 = this.palette.visual_contrast.default) === null || _this$palette$visual_16 === void 0 ? void 0 : _this$palette$visual_16.opacity.focus);
this.palette.text.disabled = this.palette.text.default.tertiary; // Shape
if (is('object', shape)) this.shape = merge(shape, this.shape); // Radius
if (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 (is('object', breakpoints)) this.breakpoints = merge(breakpoints, this.breakpoints);
const instance = this; // Space
if (is('object', space)) {
this.space = merge(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 (is('object', shadows)) this.shadows = merge(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 (is('object', typography)) this.typography = merge(typography, this.typography); // Transitions
if (is('object', transitions)) this.transitions = merge(transitions, this.transitions); // zIndex
if (is('object', z_index)) this.z_index = merge(z_index, this.z_index); // Other
Object.keys(other).forEach(prop => this[prop] = other[prop]); // updates
if (isEnvironment('browser')) {
if (this.options.updateFontSize) {
const fontSizeHTML = is('number', this.typography.font_size.html) ? "".concat(this.typography.font_size.html, "px") : this.typography.font_size.html;
window.document.documentElement.style.fontSize = fontSizeHTML;
}
}
}
async image(value_) {
let other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
// 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 = merge({
palette
}, other, {
copy: true
});
this.init(value); // Add image to the palette
this.palette.image = value_;
}
}
}
update(value) {
if (value !== undefined) {
this.init(copy(value));
this.subscriptions.update.emit(value, this);
}
}
static get amaui_theme() {
return new AmauiTheme();
}
static get make() {
return {
color: value => {
const rgb = colorToRgb(value);
if (rgb) {
const values = {};
const [hue, saturation, light] = rgbToHsl(rgb, 1, true);
const tones = [];
for (let i = 0; i <= 100; i += 1) tones.push(i); // Tones
tones.forEach(tone => values[tone] = hslToRgb("hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(tone, "%)"))); // Main
values.main = rgb;
const mainTone = Math.round(castParam(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: function (value) {
let opacities = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
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(_ref => {
let [item, v] = _ref;
return shadow[item] = ["".concat(v[0], "px ").concat(v[1], "px ").concat(v[2], "px ").concat(v[3], "px ").concat(colorToRgb(value, opacities[0])), "".concat(v[4], "px ").concat(v[5], "px ").concat(v[6], "px ").concat(v[7], "px ").concat(colorToRgb(value, opacities[1])), "".concat(v[8], "px ").concat(v[9], "px ").concat(v[10], "px ").concat(v[11], "px ").concat(colorToRgb(value, opacities[2]))].join(', ');
});
return shadow;
}
};
}
static get(value) {
let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 _elementMethod$neares;
return (_elementMethod$neares = elementMethod(value).nearest(this.attributes.map(item => "[".concat(item, "]")))) === null || _elementMethod$neares === void 0 ? void 0 : _elementMethod$neares.amaui_theme;
}
static furthest(value) {
var _elementMethod$furthe;
return (_elementMethod$furthe = elementMethod(value).furthest(this.attributes.map(item => "[".concat(item, "]")))) === null || _elementMethod$furthe === void 0 ? void 0 : _elementMethod$furthe.amaui_theme;
}
static all(value) {
const elements = [value, ...elementMethod(value).parents(this.attributes.map(item => "[".concat(item, "]")))];
return elements.filter(Boolean).map(item => item.amaui_theme).filter(Boolean) || [];
}
}
_defineProperty(AmauiTheme, "attributes", ['data-amaui-theme', 'amaui-theme']);
export default AmauiTheme;