@alyle/ui
Version:
Minimal Design, a set of components for Angular
384 lines (375 loc) • 28.7 kB
JavaScript
import { LyStyleUtils, Dir, StyleCollection, shadowBuilder, LyTheme2, LY_THEME_NAME, mergeThemes } from '@alyle/ui';
import { Breakpoints } from '@alyle/ui/responsive';
import * as i0 from '@angular/core';
import { Injectable, Directive, NgModule } from '@angular/core';
import { Color, color } from '@alyle/ui/color';
const iconButton = {
size: '48px'
};
const icon = {
fontSize: '24px'
};
const zIndex = {
toolbar: 1000,
drawer: 1100,
overlay: 1200
};
const RippleVariables = {
transition: {
opacity: 'cubic-bezier(0.4,0.0,1,1)',
transform: 'cubic-bezier(0, 1, 0.6, 1)'
},
duration: 950
};
const animations = {
curves: {
standard: 'cubic-bezier(0.4,0.0,0.2,1)',
deceleration: 'cubic-bezier(0.0,0.0,0.2,1)',
acceleration: 'cubic-bezier(0.4,0.0,1,1)',
sharp: 'cubic-bezier(0.4,0.0,0.6,1)'
},
durations: {
complex: 375,
entering: 225,
exiting: 195
}
};
class MinimaBase extends LyStyleUtils {
constructor() {
super();
this.typography = {
fontFamily: `'Roboto', sans-serif`,
htmlFontSize: 16,
fontSize: 14,
gutterTop: 1,
gutterBottom: .35,
lyTyp: {}
};
this.iconButton = iconButton;
this.icon = icon;
this.breakpoints = Breakpoints;
this.zIndex = zIndex;
this.ripple = RippleVariables;
this.animations = animations;
this.direction = Dir.ltr;
this.button = {
root: new StyleCollection(),
size: {
small: () => (_className) => `${_className}{padding:0 8px;font-size:${this.pxToRem(13)};min-height:32px;min-width:48p;}`,
medium: () => (_className) => `${_className}{padding:0 14px;min-height:36px;min-width:64px;}`,
large: () => (_className) => `${_className}{padding:0 21px;font-size:${this.pxToRem(15)};min-height:40px;min-width:96px;}`
},
appearance: {
icon: () => (_className) => `${_className}{min-width:40px;width:40px;height:40px;padding:0;border-radius:50%;}`,
fab: () => (_className) => `${_className}{min-width:56px;width:56px;height:56px;padding:0;border-radius:50%;}`,
miniFab: () => (_className) => `${_className}{min-width:40px;width:40px;height:40px;padding:0;border-radius:50%;}`
}
};
this.badge = {
appearance: {
default: () => (_className) => `${_className}{padding:0 6px;min-width:22px;height:22px;border-radius:2em;}`,
dot: () => (_className) => `${_className}{width:6px;height:6px;border-radius:50%;}`
}
};
this.checkbox = {
color: (checkbox, color) => (_className) => `${_className}${checkbox.checked} ${checkbox.icon},${_className}${checkbox.indeterminate} ${checkbox.icon}{color:${color};}${_className}${checkbox.checked}:not({disabled}) ${checkbox.icon},${_className}${checkbox.indeterminate}:not({disabled}) ${checkbox.icon}{box-shadow:${shadowBuilder(1, color)};}`
};
this.expansion = {
root: classes => (_className) => `${_className} ${classes.panelHeader}{height:48px;}${_className} ${classes.expanded} ${classes.panelHeader}{height:64px;}`,
appearance: {
popOut: classes => (_className) => `${_className} ${classes.panel}{transition:margin ${this.animations.durations.entering}ms ${this.animations.curves.standard};}${_className} ${classes.expanded}${classes.panel}{margin:16px 0;}${_className} ${classes.expanded}${classes.panel}:first-child{margin-top:0;}${_className} ${classes.expanded}${classes.panel}:last-child{margin-bottom:0;}`
}
};
this.field = {
appearance: {
standard: new StyleCollection((classes) => (_className) => `${_className}:not(${classes.disabled}) ${classes.container}:hover:after{border-bottom-color:currentColor;}${_className} ${classes.infix}{border-top:${1.125 * 0.75}em solid transparent;}${_className}${classes.selectArrow} ${classes.infix}::after{top:0.4em;}${_className} ${classes.infix},${_className} ${classes.placeholder},${_className} ${classes.displayWith}{padding:.5em 0;}${_className}${classes.disabled} ${classes.container}:after{border-bottom-style:dotted;border-color:inherit;}${_className} ${classes.container}{padding-top:0.75em;}${_className} ${classes.container}:after{border-bottom-style:solid;border-bottom-width:1px;}${_className}${classes.focused} ${classes.container}:after{border-width:2px;border-color:currentColor;}${_className} ${classes.label}{padding-top:${1.125 * 0.75}em;margin-top:${-1.125 * 0.75 + 0.5}em;}${_className} ${classes.floatingLabel}{transform:translateY(${1.125 * -0.75 - 0.5}em);transform-origin:${this.before};}`),
outlined: new StyleCollection(classes => (_className) => `${_className}:not(${classes.focused}):not({disabled}):hover ${classes.fieldset}{border-color:currentColor;}${_className} ${classes.infix}{border-top:${1.125 * 0.75}em solid transparent;}${_className} ${classes.infix},${_className} ${classes.placeholder},${_className} ${classes.displayWith}{padding:1em 0;}${_className}${classes.selectArrow} ${classes.infix}::after{top:1em;}${_className}${classes.focused} ${classes.fieldset}{border-width:2px;border-color:inherit;}${_className} ${classes.container}{padding:0 0.75em;}${_className} ${classes.fieldset}{border-width:1px;border-radius:5px;padding:0 .5em;margin-top:.25em;}${_className} ${classes.prefix} [ly-button],${_className} ${classes.suffix} [ly-button]{top:0.25em;}${_className} ${classes.label}{padding-top:${1.125 * 0.75}em;margin-top:${1.125 * 0.75 - 1}em;}${_className} ${classes.floatingLabel}{transform:translateY(${-1.125 * 0.75 - 0.75}em);}${_className} ${classes.hintContainer}{padding:0 0.75em;}`),
filled: new StyleCollection(classes => (_className) => `${_className}:not(${classes.focused}):not(${classes.disabled}) ${classes.container}:hover:after{border-bottom-width:1px;}${_className} ${classes.infix}{border-top:${1.125 * 0.75}em solid transparent;}${_className} ${classes.infix},${_className} ${classes.placeholder},${_className} ${classes.displayWith}{padding:0.25em 0 0.75em;}${_className} ${classes.container}{padding:.75em .75em 0 .75em;border-radius:5px 5px 0 0;}${_className} ${classes.container}:after{border-bottom-style:solid;border-bottom-color:currentColor;border-bottom-width:0;}${_className}${classes.focused} ${classes.container}:after{border-bottom-width:2px;}${_className} ${classes.label}{padding-top:${1.125 * 0.75}em;margin-top:${-1.125 * 0.75 - .25}em;}${_className} ${classes.floatingLabel}{transform:translateY(${1.125 * -0.75 + 0.25}em);transform-origin:${this.before};}${_className} ${classes.hintContainer}{padding:0 0.75em;}`)
}
};
this.toolbar = {
appearance: {
dense: new StyleCollection(() => (_className) => `${_className}{height:56px;}`)
}
};
this.slider = {
appearance: {
standard: new StyleCollection(__ => (_className) => `${_className}${__.thumbVisible} ${__.thumb},${_className}:not(${__.thumbNotVisible}):not(${__.disabled}) ${__.thumbContent}:hover ${__.thumb},${_className}:not(${__.thumbNotVisible}) ${__.thumbContent}${__.thumbContentFocused} ${__.thumb}{border-radius:50% 50% 0%;}${_className}${__.horizontal} ${__.thumbLabel}{transform:rotateZ(45deg) scale(0);}${_className}${__.horizontal} ${__.thumbLabelValue}{transform:rotateZ(-45deg);}${_className}${__.horizontal} ${__.thumb}{transform:rotateZ(-135deg);}${_className}${__.horizontal}${__.thumbVisible} ${__.thumbLabel},${_className}${__.horizontal}:not(${__.disabled}) ${__.thumbContent}:hover ${__.thumbLabel},${_className}${__.horizontal} ${__.thumbContent}${__.thumbContentFocused} ${__.thumbLabel}{border-radius:50% 50% 0%;top:-50px;transform:rotateZ(45deg) scale(1);}${_className}${__.horizontal} ${__.thumbContent}::before{width:2px;height:24px;left:-1px;top:-24px;}${_className}${__.vertical} ${__.thumbLabel}{transform:rotateZ(-45deg) scale(0);}${_className}${__.vertical} ${__.thumbLabelValue}{transform:rotateZ(45deg);}${_className}${__.vertical} ${__.thumb}{transform:${this.direction === Dir.ltr ? 'rotateZ(135deg)' : 'rotateZ(-45deg)'};}${_className}${__.vertical}${__.thumbVisible} ${__.thumbLabel},${_className}${__.vertical}:not(${__.disabled}) ${__.thumbContent}:hover ${__.thumbLabel},${_className}${__.vertical} ${__.thumbContent}${__.thumbContentFocused} ${__.thumbLabel}{border-radius:${this.direction === Dir.ltr ? '50% 50% 0%' : '0 50% 50% 50%'};${this.before}:-50px;transform:rotateZ(-45deg) scale(1);}${_className}${__.vertical} ${__.thumbContent}::before{width:24px;height:2px;${this.before}:-24px;top:-1px;}${_className} ${__.thumbContent}::before{content:'';position:absolute;opacity:.6;transform:scale(0);transition:transform ${this.animations.durations.entering}ms ${this.animations.curves.sharp} 0ms,background ${this.animations.durations.complex}ms ${this.animations.curves.sharp} 0ms;}${_className}${__.thumbVisible} ${__.thumbContent}::before,${_className}:not(${__.thumbNotVisible}):not(${__.disabled}) ${__.thumbContent}:hover::before,${_className}:not(${__.thumbNotVisible}) ${__.thumbContent}${__.thumbContentFocused}::before{transform:scale(1);}`),
md: new StyleCollection((__) => (_className) => `${_className} ${__.thumbLabel}{width:unset;height:unset;right:unset;left:unset;padding:0.5em 0.833em;font-size:12px;border-radius:4px;transform:scale(0);}${_className} ${__.thumbLabel}::before{display:block;position:absolute;content:'';background-color:inherit;width:8px;height:8px;}${_className}${__.horizontal} ${__.thumbLabel}::before{bottom:0;left:50%;transform:translate(-50%,50%) rotate(45deg);}${_className}${__.horizontal}${__.thumbVisible} ${__.thumbLabel},${_className}${__.horizontal}:not(${__.disabled}) ${__.thumbContent}:hover ${__.thumbLabel},${_className}${__.horizontal} ${__.thumbContent}${__.thumbContentFocused} ${__.thumbLabel}{top:-45px;transform:scale(1);}${_className}${__.vertical}${__.thumbVisible} ${__.thumbLabel},${_className}${__.vertical}:not(${__.disabled}) ${__.thumbContent}:hover ${__.thumbLabel},${_className}${__.vertical} ${__.thumbContent}${__.thumbContentFocused} ${__.thumbLabel}{${this.after}:20px;transform:scale(1);}${_className}${__.vertical} ${__.thumbLabel}::before{top:50%;${this.after}:0%;transform:translate(${this.isRTL() ? -50 : 50}%,-50%) rotate(45deg);}`)
},
size: {
small: new StyleCollection((__) => (_className) => `${_className} ${__.thumb}{width:14px;height:14px;}${_className}${__.horizontal} ${__.wrapper}{height:2px;}${_className}${__.vertical} ${__.wrapper}{width:2px;}`),
medium: new StyleCollection((__) => (_className) => `${_className} ${__.thumb}{width:18px;height:18px;}${_className} ${__.track},${_className} ${__.bg}{border-radius:12px;}${_className}${__.horizontal} ${__.wrapper}{height:4px;}${_className}${__.horizontal} ${__.tick}{height:2px;}${_className}${__.vertical} ${__.wrapper}{width:4px;}${_className}${__.vertical} ${__.tick}{width:2px;}${_className} ${__.track}{border:1px solid currentcolor;}`)
},
color: ({ track, thumb, thumbLabel, tick, disabled, thumbContentFocused, tickActive, bg, thumbContent, horizontal, vertical, thumbVisible, thumbNotVisible, sliding, }, color, contrast) => (_className) => `${_className} ${track},${_className} ${bg}{color:${color};}${_className} ${track},${_className} ${thumb},${_className} ${thumbLabel},${_className} ${bg},${_className} ${tick}{background-color:${color};}${_className} ${thumbLabel}{color:${contrast};}${_className}:not(${disabled}) ${thumbContentFocused} ${thumb}::before,${_className}:not(${disabled}) ${thumb}:hover::before{box-shadow:0 0 0 8px ${color.alpha(.13)};}${_className}${sliding} ${thumbContentFocused} ${thumb}::before{box-shadow:0 0 0 16px ${color.alpha(.13)};}${_className} ${tickActive}{background-color:${contrast.alpha(0.5)};}${_className} ${bg}{opacity:.3;}${_className}:not(${disabled}) ${thumbContent}::before{background:${color};}${_className}:not(${disabled})${horizontal}${thumbVisible} ${thumbContent}::before,${_className}:not(${disabled})${horizontal}:not(${thumbNotVisible}) ${thumbContent}:hover::before,${_className}:not(${disabled})${horizontal}:not(${thumbNotVisible}) ${thumbContent}${thumbContentFocused}::before{background:linear-gradient(0deg,${color} 0%,rgba(0,0,0,0) 50%,${color} 100%);}${_className}:not(${disabled})${vertical}${thumbVisible} ${thumbContent}::before,${_className}:not(${disabled})${vertical}:not(${thumbNotVisible}) ${thumbContent}:hover::before,${_className}:not(${disabled})${vertical}:not(${thumbNotVisible}) ${thumbContent}${thumbContentFocused}::before{background:linear-gradient(90deg,${color} 0%,rgba(0,0,0,0) 50%,${color} 100%);}`,
disabled: ({ track, thumb, thumbContainer, thumbContent, thumbLabel, bg, tick, tickActive, horizontal, vertical }, _color) => {
const colorDisabled = this.disabled.contrast;
return (_className) => `${_className} ${track},${_className} ${thumb},${_className} ${thumbLabel},${_className} ${bg},${_className} ${tick}{background-color:${colorDisabled};}${_className} ${tickActive}{background-color:${colorDisabled};}${_className}${horizontal} ${thumbContent}::before{background:linear-gradient(0deg,${colorDisabled} 0%,rgba(0,0,0,0) 50%,${colorDisabled} 100%);}${_className}${vertical} ${thumbContent}::before{background:linear-gradient(90deg,${colorDisabled} 0%,rgba(0,0,0,0) 50%,${colorDisabled} 100%);}${_className} ${bg}{opacity:.3;}${_className}${horizontal} ${thumbContainer}::before{background:${this.disabled.default};}${_className}${vertical} ${thumbContainer}::before{background:${this.disabled.default};}${_className} ${track}{border:1px solid ${colorDisabled};}`;
}
};
this.typography.lyTyp = {
display4: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(96)};font-weight:300;letter-spacing:${-1.5 / 96}em;}`),
display3: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(60)};font-weight:300;letter-spacing:${-0.5 / 60}em;}`),
display2: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(48)};font-weight:400;letter-spacing:0;}`),
display1: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(34)};font-weight:400;letter-spacing:${0.25 / 34}em;}`),
headline: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(24)};font-weight:400;letter-spacing:0;}`),
title: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(20)};font-weight:500;letter-spacing:${0.15 / 20}em;}`),
subheading: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(16)};font-weight:400;letter-spacing:${0.15 / 16}em;line-height:${this.pxToRem(24)};}`),
subheading2: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(14)};font-weight:500;letter-spacing:${0.1 / 14}em;}`),
body1: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(16)};font-weight:400;letter-spacing:${0.5 / 16}em;}`),
body2: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(14)};font-weight:400;letter-spacing:${0.25 / 14}em;}`),
button: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(14)};font-weight:500;letter-spacing:${1.25 / 14}em;}`),
caption: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(12)};font-weight:400;letter-spacing:${0.4 / 12}em;}`),
overline: new StyleCollection(() => (_className) => `${_className}{font-size:${this.pxToRem(10)};font-weight:400;letter-spacing:${1.5 / 10}em;text-transform:uppercase;}`)
};
const { lyTyp } = this.typography;
lyTyp.h1 = lyTyp.display4;
lyTyp.h2 = lyTyp.display3;
lyTyp.h3 = lyTyp.display2;
lyTyp.h4 = lyTyp.display1;
lyTyp.h5 = lyTyp.headline;
lyTyp.h6 = lyTyp.title;
lyTyp.subtitle1 = lyTyp.subheading;
lyTyp.subtitle2 = lyTyp.subheading2;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaBase }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaBase, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class ThemeMinimaLight {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaLight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: ThemeMinimaLight, isStandalone: false, selector: "[ly-theme-minima-light]", providers: [LyTheme2, { provide: LY_THEME_NAME, useValue: 'minima-light' }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaLight, decorators: [{
type: Directive,
args: [{
selector: '[ly-theme-minima-light]',
providers: [LyTheme2, { provide: LY_THEME_NAME, useValue: 'minima-light' }],
standalone: false
}]
}] });
class ThemeMinimaDark {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaDark, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: ThemeMinimaDark, isStandalone: false, selector: "[ly-theme-minima-dark]", providers: [LyTheme2, { provide: LY_THEME_NAME, useValue: 'minima-dark' }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaDark, decorators: [{
type: Directive,
args: [{
selector: '[ly-theme-minima-dark]',
providers: [LyTheme2, { provide: LY_THEME_NAME, useValue: 'minima-dark' }],
standalone: false
}]
}] });
class ThemeMinimaModule {
constructor() {
console.warn(`ThemeMinimaModule is deprecated.`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaModule, declarations: [ThemeMinimaDark, ThemeMinimaLight], exports: [ThemeMinimaDark, ThemeMinimaLight] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ThemeMinimaModule, decorators: [{
type: NgModule,
args: [{
declarations: [ThemeMinimaDark, ThemeMinimaLight],
exports: [ThemeMinimaDark, ThemeMinimaLight]
}]
}], ctorParameters: () => [] });
const contrast$1 = new Color(0xffffff);
const shadow$2 = new Color(0x333333);
class MinimaLight extends MinimaBase {
constructor() {
super(...arguments);
this.name = 'minima-light';
this.primary = {
default: new Color(0x6200EE),
contrast: contrast$1
};
this.accent = {
default: new Color(0xFF2997),
contrast: contrast$1,
};
this.warn = {
default: new Color(0xf5414e),
contrast: contrast$1
};
this.action = {
default: new Color(0, 0, 0, .6),
contrast: new Color(0xffffff)
};
this.background = {
default: new Color(0xfafafa), // secondary
primary: {
default: new Color(0xffffff),
shadow: shadow$2
},
secondary: new Color(0xfafafa),
tertiary: new Color(0xefefef),
};
this.hover = new Color(0, 0, 0, 0.04);
this.paper = {
default: new Color(0xffffff),
shadow: shadow$2
};
this.disabled = {
default: new Color(0, 0, 0, 0.12),
contrast: new Color(0, 0, 0, 0.26)
};
this.text = {
default: new Color(0, 0, 0, 0.87),
primary: new Color(0, 0, 0, 0.87),
secondary: new Color(0, 0, 0, 0.54),
disabled: new Color(0, 0, 0, 0.26),
hint: new Color(0, 0, 0, 0.38),
dark: new Color(0, 0, 0, 0.87),
light: new Color(0xffffff)
};
this.divider = new Color(0, 0, 0, 0.12);
this.colorShadow = new Color(0x333333);
this.shadow = new Color(0x333333);
this.drawer = {
backdrop: new Color(0, 0, 0, .6)
};
this.bar = new Color(0xf5f5f5);
this.field = mergeThemes(this.field, {
root: new StyleCollection(({ container, fieldset, labelContainer, placeholder, label }) => (_className) => `${_className} ${container}:after,${_className} ${fieldset},${_className} ${labelContainer}{border-color:${new Color(0, 0, 0, 0.23)};}${_className} ${label},${_className} ${placeholder}{color:${new Color(0, 0, 0, 0.6)};}`),
appearance: {
filled: ({ container }) => (_className) => `${_className} ${container}{background-color:${new Color(0, 0, 0, 0.04)};}`
}
});
this.snackBar = {
root: new StyleCollection((_className) => `${_className}{background:${new Color(0x323232)};color:${new Color(0xffffff)};box-shadow:${shadowBuilder(4, new Color(0x323232))};}`)
};
this.tooltip = {
root: new StyleCollection(() => (_className) => `${_className}{background:${new Color(50, 50, 50, 0.85)};color:${new Color(0xffffff)};}`)
};
this.menu = {
root: new StyleCollection(__ => (_className) => `${_className} ${__.item} ly-icon,${_className} ${__.itemSubMenuTrigger}:after{color:${color(0, 0, 0, 0.54)};}`)
};
this.slider = mergeThemes(this.slider, {
appearance: {
md: __ => (_className) => `${_className} ${__.thumbLabel}{background-color:${new Color(0x515151)} !important;color:${new Color(0xffffff)} !important;}`
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaLight, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaLight }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaLight, decorators: [{
type: Injectable
}] });
const contrast = new Color(0xffffff);
const shadow$1 = new Color(0, 0, 0, 1);
class MinimaDark extends MinimaBase {
constructor() {
super(...arguments);
this.name = 'minima-dark';
this.primary = {
default: color(0x1DE9B6),
contrast: new Color(0, 0, 0, 0.87)
};
this.accent = {
default: new Color(0x9C27B0),
contrast
};
this.warn = {
default: new Color(0xEA404C),
contrast
};
this.disabled = {
default: new Color(255, 255, 255, 0.3),
contrast: new Color(255, 255, 255, 0.5)
};
this.action = {
default: new Color(255, 255, 255, 0.70),
contrast: new Color(0, 0, 0, 0.87)
};
this.background = {
default: new Color(0x212121), // secondary
primary: {
default: new Color(0x303030),
shadow: shadow$1
},
secondary: new Color(0x212121),
tertiary: new Color(65, 65, 65),
};
this.paper = {
default: new Color(0x303030),
shadow: shadow$1
};
this.hover = new Color(255, 255, 255, 0.04);
this.text = {
default: new Color(0xffffff),
primary: new Color(0xffffff),
secondary: new Color(255, 255, 255, 0.70),
disabled: new Color(255, 255, 255, 0.50),
hint: new Color(255, 255, 255, 0.50),
dark: new Color(0x2b2b2b),
light: new Color(0xffffff)
};
this.drawer = {
backdrop: new Color(49, 49, 49, .6)
};
this.bar = new Color(0x212121);
this.divider = new Color(255, 255, 255, 0.12);
this.colorShadow = shadow$1;
this.shadow = shadow$1;
this.field = mergeThemes(this.field, {
root: new StyleCollection(_ => (_className) => `${_className} ${_.container}:after,${_className} ${_.fieldset},${_className} ${_.labelContainer}{border-color:${new Color(255, 255, 255, 0.12)};}${_className} ${_.label},${_className} ${_.placeholder}{color:${new Color(255, 255, 255, 0.4)};}`),
appearance: {
filled: _ => (_className) => `${_className} ${_.container}{background-color:${new Color(255, 255, 255, 0.04)};}`
}
});
this.snackBar = {
root: new StyleCollection((_className) => `${_className}{background:${new Color(0xfafafa)};color:${new Color(0, 0, 0, .87)};box-shadow:${shadowBuilder(4, new Color(0xfafafa))};}`)
};
this.tooltip = {
root: new StyleCollection(() => (_className) => `${_className}{background:${new Color(250, 250, 250, 0.85)};color:${new Color(0, 0, 0, .87)};}`)
};
this.menu = {
root: new StyleCollection(__ => (_className) => `${_className} ${__.item} ly-icon,${_className} ${__.itemSubMenuTrigger}:after{color:${color(0xffffff)};}`)
};
this.slider = mergeThemes(this.slider, {
appearance: {
md: __ => (_className) => `${_className} ${__.thumbLabel}{background-color:${new Color(0xd5d5d5)} !important;color:${new Color(0, 0, 0, .87)} !important;}`
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDark, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDark }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDark, decorators: [{
type: Injectable
}] });
const shadow = new Color(0, 0, 0, 1);
class MinimaDeepDark extends MinimaDark {
constructor() {
super(...arguments);
this.name = 'minima-deep-dark';
this.background = {
default: new Color(0x121212), // secondary
primary: {
default: new Color(29, 29, 29),
shadow
},
secondary: new Color(24, 24, 24),
tertiary: new Color(32, 32, 32),
};
this.paper = {
default: new Color(29, 29, 29),
shadow
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDeepDark, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDeepDark }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MinimaDeepDark, decorators: [{
type: Injectable
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MinimaBase, MinimaDark, MinimaDeepDark, MinimaLight, ThemeMinimaDark, ThemeMinimaLight, ThemeMinimaModule };
//# sourceMappingURL=alyle-ui-themes-minima.mjs.map