tinkiet 0.7.2 → 0.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/umd/tinkiet.min.d.ts.map +1 -1
- package/umd/tinkiet.min.js +1 -1
- package/tinkiet/accordion/accordion.d.ts +0 -18
- package/tinkiet/accordion/accordion.js +0 -94
- package/tinkiet/accordion/accordion.scss.js +0 -4
- package/tinkiet/accordion/index.d.ts +0 -1
- package/tinkiet/accordion/index.js +0 -1
- package/tinkiet/badge/badge.d.ts +0 -15
- package/tinkiet/badge/badge.js +0 -27
- package/tinkiet/badge/badge.scss.js +0 -4
- package/tinkiet/badge/index.d.ts +0 -1
- package/tinkiet/badge/index.js +0 -1
- package/tinkiet/box/box.d.ts +0 -56
- package/tinkiet/box/box.js +0 -182
- package/tinkiet/box/box.scss.js +0 -4
- package/tinkiet/box/focusable-box.d.ts +0 -13
- package/tinkiet/box/focusable-box.js +0 -30
- package/tinkiet/box/index.d.ts +0 -1
- package/tinkiet/box/index.js +0 -1
- package/tinkiet/button/button.d.ts +0 -39
- package/tinkiet/button/button.js +0 -125
- package/tinkiet/button/button.scss.js +0 -4
- package/tinkiet/button/index.d.ts +0 -1
- package/tinkiet/button/index.js +0 -1
- package/tinkiet/checkbox/checkbox.d.ts +0 -21
- package/tinkiet/checkbox/checkbox.js +0 -83
- package/tinkiet/checkbox/checkbox.scss.js +0 -4
- package/tinkiet/checkbox/index.d.ts +0 -1
- package/tinkiet/checkbox/index.js +0 -1
- package/tinkiet/dialog/dialog.d.ts +0 -18
- package/tinkiet/dialog/dialog.js +0 -58
- package/tinkiet/dialog/dialog.scss.js +0 -4
- package/tinkiet/dialog/index.d.ts +0 -1
- package/tinkiet/dialog/index.js +0 -1
- package/tinkiet/drawer/drawer.d.ts +0 -29
- package/tinkiet/drawer/drawer.js +0 -152
- package/tinkiet/drawer/drawer.scss.js +0 -4
- package/tinkiet/drawer/index.d.ts +0 -1
- package/tinkiet/drawer/index.js +0 -1
- package/tinkiet/form/form.d.ts +0 -15
- package/tinkiet/form/form.js +0 -57
- package/tinkiet/form/index.d.ts +0 -1
- package/tinkiet/form/index.js +0 -1
- package/tinkiet/icon/icon.d.ts +0 -17
- package/tinkiet/icon/icon.js +0 -75
- package/tinkiet/icon/icon.scss.js +0 -4
- package/tinkiet/icon/icons.d.ts +0 -7
- package/tinkiet/icon/icons.js +0 -24
- package/tinkiet/icon/index.d.ts +0 -2
- package/tinkiet/icon/index.js +0 -2
- package/tinkiet/index.d.ts +0 -24
- package/tinkiet/index.d.ts.map +0 -1
- package/tinkiet/index.js +0 -47
- package/tinkiet/list-item/index.d.ts +0 -1
- package/tinkiet/list-item/index.js +0 -1
- package/tinkiet/list-item/list-item.d.ts +0 -20
- package/tinkiet/list-item/list-item.js +0 -72
- package/tinkiet/list-item/list-item.scss.js +0 -4
- package/tinkiet/loading/index.d.ts +0 -1
- package/tinkiet/loading/index.js +0 -1
- package/tinkiet/loading/loading.d.ts +0 -14
- package/tinkiet/loading/loading.js +0 -64
- package/tinkiet/loading/loading.scss.js +0 -4
- package/tinkiet/navbar/index.d.ts +0 -1
- package/tinkiet/navbar/index.js +0 -1
- package/tinkiet/navbar/navbar.d.ts +0 -11
- package/tinkiet/navbar/navbar.js +0 -33
- package/tinkiet/navbar/navbar.scss.js +0 -4
- package/tinkiet/notie/index.d.ts +0 -1
- package/tinkiet/notie/index.js +0 -1
- package/tinkiet/notie/notie.d.ts +0 -69
- package/tinkiet/notie/notie.js +0 -193
- package/tinkiet/notie/notie.scss.js +0 -4
- package/tinkiet/pages/index.d.ts +0 -1
- package/tinkiet/pages/index.js +0 -1
- package/tinkiet/pages/pages.d.ts +0 -18
- package/tinkiet/pages/pages.js +0 -75
- package/tinkiet/pages/pages.scss.js +0 -4
- package/tinkiet/radio/index.d.ts +0 -1
- package/tinkiet/radio/index.js +0 -1
- package/tinkiet/radio/radio.d.ts +0 -24
- package/tinkiet/radio/radio.js +0 -98
- package/tinkiet/radio/radio.scss.js +0 -4
- package/tinkiet/select/index.d.ts +0 -1
- package/tinkiet/select/index.js +0 -1
- package/tinkiet/select/select.d.ts +0 -32
- package/tinkiet/select/select.js +0 -132
- package/tinkiet/select/select.scss.js +0 -4
- package/tinkiet/slider/index.d.ts +0 -1
- package/tinkiet/slider/index.js +0 -1
- package/tinkiet/slider/slider.d.ts +0 -30
- package/tinkiet/slider/slider.js +0 -135
- package/tinkiet/slider/slider.scss.js +0 -4
- package/tinkiet/switch/index.d.ts +0 -1
- package/tinkiet/switch/index.js +0 -1
- package/tinkiet/switch/switch.d.ts +0 -24
- package/tinkiet/switch/switch.js +0 -99
- package/tinkiet/switch/switch.scss.js +0 -4
- package/tinkiet/tab-group/index.d.ts +0 -1
- package/tinkiet/tab-group/index.js +0 -1
- package/tinkiet/tab-group/tab-group.d.ts +0 -21
- package/tinkiet/tab-group/tab-group.js +0 -97
- package/tinkiet/tab-group/tab-group.scss.js +0 -4
- package/tinkiet/tag/index.d.ts +0 -1
- package/tinkiet/tag/index.js +0 -1
- package/tinkiet/tag/tag.d.ts +0 -11
- package/tinkiet/tag/tag.js +0 -20
- package/tinkiet/tag/tag.scss.js +0 -4
- package/tinkiet/textarea/index.d.ts +0 -1
- package/tinkiet/textarea/index.js +0 -1
- package/tinkiet/textarea/textarea.d.ts +0 -33
- package/tinkiet/textarea/textarea.js +0 -133
- package/tinkiet/textarea/textarea.scss.js +0 -4
- package/tinkiet/textfield/index.d.ts +0 -1
- package/tinkiet/textfield/index.js +0 -1
- package/tinkiet/textfield/textfield.d.ts +0 -34
- package/tinkiet/textfield/textfield.js +0 -136
- package/tinkiet/textfield/textfield.scss.js +0 -4
- package/tinkiet/theme/index.d.ts +0 -1
- package/tinkiet/theme/index.js +0 -1
- package/tinkiet/theme/theme.d.ts +0 -33
- package/tinkiet/theme/theme.js +0 -187
- package/tinkiet/theme/theme.scss.js +0 -4
- package/tinkiet/utils/unique.d.ts +0 -7
- package/tinkiet/utils/unique.js +0 -12
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, state, eventOptions, customElement } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { uniqueID } from '../utils/unique.js';
|
|
6
|
-
import css_248z from './textarea.scss.js';
|
|
7
|
-
|
|
8
|
-
let TkTextarea = class TkTextarea extends LitElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this._id = uniqueID();
|
|
12
|
-
this.type = "text";
|
|
13
|
-
this.required = false;
|
|
14
|
-
this.disabled = false;
|
|
15
|
-
this.readonly = false;
|
|
16
|
-
this.rows = 1;
|
|
17
|
-
}
|
|
18
|
-
set value(value) {
|
|
19
|
-
if (!this.$input) {
|
|
20
|
-
this.initialValue = value;
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
this.$input.value = value;
|
|
24
|
-
this.refreshAttributes();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
get value() {
|
|
28
|
-
return this.$input != null ? this.$input.value : this.initialValue || "";
|
|
29
|
-
}
|
|
30
|
-
render() {
|
|
31
|
-
return html `
|
|
32
|
-
<div id="container">
|
|
33
|
-
<slot id="before" name="before"></slot>
|
|
34
|
-
<div id="wrapper">
|
|
35
|
-
<div id="label">${this.label}</div>
|
|
36
|
-
<slot id="slot"></slot>
|
|
37
|
-
<textarea
|
|
38
|
-
id=${this._id}
|
|
39
|
-
@keydown=${this.handleChange.bind(this)}
|
|
40
|
-
@input=${this.handleChange.bind(this)}
|
|
41
|
-
@focusout=${this.handleChange.bind(this)}
|
|
42
|
-
?required="${this.required}"
|
|
43
|
-
?disabled="${this.disabled}"
|
|
44
|
-
?readonly="${this.readonly}"
|
|
45
|
-
aria-label="${ifDefined(this.label)}"
|
|
46
|
-
name="${ifDefined(this.name)}"
|
|
47
|
-
pattern="${ifDefined(this.pattern)}"
|
|
48
|
-
autocomplete="${ifDefined(this.autocomplete)}"
|
|
49
|
-
autocapitalize="${ifDefined(this.autocapitalize)}"
|
|
50
|
-
minlength="${ifDefined(this.minLength)}"
|
|
51
|
-
maxlength="${ifDefined(this.maxLength)}"
|
|
52
|
-
rows="${this.rows}"
|
|
53
|
-
tabindex="${this.disabled ? -1 : 0}"
|
|
54
|
-
></textarea>
|
|
55
|
-
</div>
|
|
56
|
-
<slot id="after" name="after"></slot>
|
|
57
|
-
</div>
|
|
58
|
-
`;
|
|
59
|
-
}
|
|
60
|
-
handleChange() {
|
|
61
|
-
this.refreshAttributes();
|
|
62
|
-
}
|
|
63
|
-
firstUpdated() {
|
|
64
|
-
var _a;
|
|
65
|
-
this.$input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
|
|
66
|
-
this.appendChild(this.$input);
|
|
67
|
-
if (this.initialValue)
|
|
68
|
-
this.value = this.initialValue;
|
|
69
|
-
}
|
|
70
|
-
refreshAttributes() {
|
|
71
|
-
this.$input.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
|
|
72
|
-
this.$input.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
|
|
73
|
-
}
|
|
74
|
-
focus() {
|
|
75
|
-
this.$input.focus();
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
TkTextarea.styles = css `
|
|
79
|
-
${unsafeCSS(css_248z)}
|
|
80
|
-
`;
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ type: String })
|
|
83
|
-
], TkTextarea.prototype, "value", null);
|
|
84
|
-
__decorate([
|
|
85
|
-
property({ attribute: true, type: String })
|
|
86
|
-
], TkTextarea.prototype, "name", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
property({ type: String })
|
|
89
|
-
], TkTextarea.prototype, "list", void 0);
|
|
90
|
-
__decorate([
|
|
91
|
-
property({ type: String })
|
|
92
|
-
], TkTextarea.prototype, "type", void 0);
|
|
93
|
-
__decorate([
|
|
94
|
-
property({ type: Boolean })
|
|
95
|
-
], TkTextarea.prototype, "required", void 0);
|
|
96
|
-
__decorate([
|
|
97
|
-
property({ type: Boolean })
|
|
98
|
-
], TkTextarea.prototype, "disabled", void 0);
|
|
99
|
-
__decorate([
|
|
100
|
-
property({ type: Boolean })
|
|
101
|
-
], TkTextarea.prototype, "readonly", void 0);
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ type: String })
|
|
104
|
-
], TkTextarea.prototype, "autocomplete", void 0);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ type: String })
|
|
107
|
-
], TkTextarea.prototype, "autocapitalize", void 0);
|
|
108
|
-
__decorate([
|
|
109
|
-
property({ type: String })
|
|
110
|
-
], TkTextarea.prototype, "pattern", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
state()
|
|
113
|
-
], TkTextarea.prototype, "initialValue", void 0);
|
|
114
|
-
__decorate([
|
|
115
|
-
property({ type: String })
|
|
116
|
-
], TkTextarea.prototype, "label", void 0);
|
|
117
|
-
__decorate([
|
|
118
|
-
property({ type: Number })
|
|
119
|
-
], TkTextarea.prototype, "minLength", void 0);
|
|
120
|
-
__decorate([
|
|
121
|
-
property({ type: Number })
|
|
122
|
-
], TkTextarea.prototype, "maxLength", void 0);
|
|
123
|
-
__decorate([
|
|
124
|
-
property({ type: Number })
|
|
125
|
-
], TkTextarea.prototype, "rows", void 0);
|
|
126
|
-
__decorate([
|
|
127
|
-
eventOptions({ passive: true })
|
|
128
|
-
], TkTextarea.prototype, "handleChange", null);
|
|
129
|
-
TkTextarea = __decorate([
|
|
130
|
-
customElement("tk-textarea")
|
|
131
|
-
], TkTextarea);
|
|
132
|
-
|
|
133
|
-
export { TkTextarea };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./textfield";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkTextfield } from './textfield.js';
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkTextfield extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
private _id;
|
|
5
|
-
set value(value: string);
|
|
6
|
-
get value(): string;
|
|
7
|
-
name: string;
|
|
8
|
-
list: string;
|
|
9
|
-
type: "email" | "number" | "password" | "text" | "search";
|
|
10
|
-
required: boolean;
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
readonly: boolean;
|
|
13
|
-
autocomplete: "on" | "off";
|
|
14
|
-
autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
|
|
15
|
-
pattern: string;
|
|
16
|
-
initialValue: string;
|
|
17
|
-
label: string;
|
|
18
|
-
min: number;
|
|
19
|
-
max: number;
|
|
20
|
-
minLength: number;
|
|
21
|
-
maxLength: number;
|
|
22
|
-
private $input;
|
|
23
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
24
|
-
private handleChange;
|
|
25
|
-
firstUpdated(): void;
|
|
26
|
-
private refreshAttributes;
|
|
27
|
-
focus(): void;
|
|
28
|
-
}
|
|
29
|
-
declare global {
|
|
30
|
-
interface HTMLElementTagNameMap {
|
|
31
|
-
"tk-textfield": TkTextfield;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
export { TkTextfield };
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { property, state, eventOptions, customElement } from 'lit/decorators.js';
|
|
3
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { uniqueID } from '../utils/unique.js';
|
|
6
|
-
import css_248z from './textfield.scss.js';
|
|
7
|
-
|
|
8
|
-
let TkTextfield = class TkTextfield extends LitElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this._id = uniqueID();
|
|
12
|
-
this.type = "text";
|
|
13
|
-
this.required = false;
|
|
14
|
-
this.disabled = false;
|
|
15
|
-
this.readonly = false;
|
|
16
|
-
}
|
|
17
|
-
set value(value) {
|
|
18
|
-
if (!this.$input) {
|
|
19
|
-
this.initialValue = value;
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
this.$input.value = value;
|
|
23
|
-
this.refreshAttributes();
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
get value() {
|
|
27
|
-
return this.$input != null ? this.$input.value : this.initialValue || "";
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
return html `<div id="container">
|
|
31
|
-
<slot id="before" name="before"></slot>
|
|
32
|
-
<div id="wrapper">
|
|
33
|
-
<div id="label">${this.label}</div>
|
|
34
|
-
<slot id="slot"></slot>
|
|
35
|
-
<input
|
|
36
|
-
id=${this._id}
|
|
37
|
-
@keydown=${this.handleChange.bind(this)}
|
|
38
|
-
@input=${this.handleChange.bind(this)}
|
|
39
|
-
@focusout=${this.handleChange.bind(this)}
|
|
40
|
-
?required="${this.required}"
|
|
41
|
-
?disabled="${this.disabled}"
|
|
42
|
-
?readonly="${this.readonly}"
|
|
43
|
-
autocomplete="${ifDefined(this.autocomplete)}"
|
|
44
|
-
autocapitalize="${ifDefined(this.autocapitalize)}"
|
|
45
|
-
aria-label="${ifDefined(this.label)}"
|
|
46
|
-
type="${ifDefined(this.type)}"
|
|
47
|
-
name="${ifDefined(this.name)}"
|
|
48
|
-
list="${ifDefined(this.list)}"
|
|
49
|
-
pattern="${ifDefined(this.pattern)}"
|
|
50
|
-
minlength="${ifDefined(this.minLength)}"
|
|
51
|
-
maxlength="${ifDefined(this.maxLength)}"
|
|
52
|
-
min="${ifDefined(this.min)}"
|
|
53
|
-
max="${ifDefined(this.max)}"
|
|
54
|
-
tabindex="${this.disabled ? -1 : 0}"
|
|
55
|
-
/>
|
|
56
|
-
</div>
|
|
57
|
-
<slot id="after" name="after"></slot>
|
|
58
|
-
</div> `;
|
|
59
|
-
}
|
|
60
|
-
handleChange() {
|
|
61
|
-
this.refreshAttributes();
|
|
62
|
-
}
|
|
63
|
-
firstUpdated() {
|
|
64
|
-
var _a;
|
|
65
|
-
this.$input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
|
|
66
|
-
this.appendChild(this.$input);
|
|
67
|
-
if (this.initialValue)
|
|
68
|
-
this.value = this.initialValue;
|
|
69
|
-
}
|
|
70
|
-
refreshAttributes() {
|
|
71
|
-
this.$input.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
|
|
72
|
-
this.$input.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
|
|
73
|
-
}
|
|
74
|
-
focus() {
|
|
75
|
-
this.$input.focus();
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
TkTextfield.styles = css `
|
|
79
|
-
${unsafeCSS(css_248z)}
|
|
80
|
-
`;
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ type: String })
|
|
83
|
-
], TkTextfield.prototype, "value", null);
|
|
84
|
-
__decorate([
|
|
85
|
-
property({ attribute: true, type: String })
|
|
86
|
-
], TkTextfield.prototype, "name", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
property({ type: String })
|
|
89
|
-
], TkTextfield.prototype, "list", void 0);
|
|
90
|
-
__decorate([
|
|
91
|
-
property({ type: String })
|
|
92
|
-
], TkTextfield.prototype, "type", void 0);
|
|
93
|
-
__decorate([
|
|
94
|
-
property({ type: Boolean })
|
|
95
|
-
], TkTextfield.prototype, "required", void 0);
|
|
96
|
-
__decorate([
|
|
97
|
-
property({ type: Boolean })
|
|
98
|
-
], TkTextfield.prototype, "disabled", void 0);
|
|
99
|
-
__decorate([
|
|
100
|
-
property({ type: Boolean })
|
|
101
|
-
], TkTextfield.prototype, "readonly", void 0);
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ type: String })
|
|
104
|
-
], TkTextfield.prototype, "autocomplete", void 0);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ type: String })
|
|
107
|
-
], TkTextfield.prototype, "autocapitalize", void 0);
|
|
108
|
-
__decorate([
|
|
109
|
-
property({ type: String })
|
|
110
|
-
], TkTextfield.prototype, "pattern", void 0);
|
|
111
|
-
__decorate([
|
|
112
|
-
state()
|
|
113
|
-
], TkTextfield.prototype, "initialValue", void 0);
|
|
114
|
-
__decorate([
|
|
115
|
-
property({ type: String })
|
|
116
|
-
], TkTextfield.prototype, "label", void 0);
|
|
117
|
-
__decorate([
|
|
118
|
-
property({ type: Number })
|
|
119
|
-
], TkTextfield.prototype, "min", void 0);
|
|
120
|
-
__decorate([
|
|
121
|
-
property({ type: Number })
|
|
122
|
-
], TkTextfield.prototype, "max", void 0);
|
|
123
|
-
__decorate([
|
|
124
|
-
property({ type: Number })
|
|
125
|
-
], TkTextfield.prototype, "minLength", void 0);
|
|
126
|
-
__decorate([
|
|
127
|
-
property({ type: Number })
|
|
128
|
-
], TkTextfield.prototype, "maxLength", void 0);
|
|
129
|
-
__decorate([
|
|
130
|
-
eventOptions({ passive: true })
|
|
131
|
-
], TkTextfield.prototype, "handleChange", null);
|
|
132
|
-
TkTextfield = __decorate([
|
|
133
|
-
customElement("tk-textfield")
|
|
134
|
-
], TkTextfield);
|
|
135
|
-
|
|
136
|
-
export { TkTextfield };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
package/tinkiet/theme/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./theme";
|
package/tinkiet/theme/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkTheme } from './theme.js';
|
package/tinkiet/theme/theme.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkTheme extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
primary: string;
|
|
5
|
-
onPrimary: string;
|
|
6
|
-
accent: string;
|
|
7
|
-
onAccent: string;
|
|
8
|
-
shade: string;
|
|
9
|
-
onShade: string;
|
|
10
|
-
error: string;
|
|
11
|
-
onError: string;
|
|
12
|
-
foreground: string;
|
|
13
|
-
background: string;
|
|
14
|
-
forceBody: boolean;
|
|
15
|
-
inverted: boolean;
|
|
16
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
17
|
-
updated(): void;
|
|
18
|
-
connectedCallback(): void;
|
|
19
|
-
disconnectedCallback(): void;
|
|
20
|
-
private setTheme;
|
|
21
|
-
private setThemeFontSize;
|
|
22
|
-
turnThemeToInverted(): void;
|
|
23
|
-
turnThemeToNonInverted(): void;
|
|
24
|
-
private hexToHSL;
|
|
25
|
-
private setThemeColor;
|
|
26
|
-
private setBodyStyle;
|
|
27
|
-
}
|
|
28
|
-
declare global {
|
|
29
|
-
interface HTMLElementTagNameMap {
|
|
30
|
-
"tk-theme": TkTheme;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
export { TkTheme };
|
package/tinkiet/theme/theme.js
DELETED
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, customElement } from 'lit/decorators.js';
|
|
4
|
-
import css_248z from './theme.scss.js';
|
|
5
|
-
|
|
6
|
-
let TkTheme = class TkTheme extends LitElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super(...arguments);
|
|
9
|
-
this.primary = "#8970bf";
|
|
10
|
-
this.onPrimary = "#FFFFFF";
|
|
11
|
-
this.accent = "#E69A8D";
|
|
12
|
-
this.onAccent = "#FFFFFF";
|
|
13
|
-
this.shade = "#AAAAAA";
|
|
14
|
-
this.onShade = "#FFFFFF";
|
|
15
|
-
this.error = "#F44336";
|
|
16
|
-
this.onError = "#FFFFFF";
|
|
17
|
-
this.foreground = "#FFFFFF";
|
|
18
|
-
this.background = "#000";
|
|
19
|
-
this.forceBody = false;
|
|
20
|
-
this.inverted = false;
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
return html `
|
|
24
|
-
<slot></slot>
|
|
25
|
-
`;
|
|
26
|
-
}
|
|
27
|
-
updated() {
|
|
28
|
-
this.setThemeColor();
|
|
29
|
-
}
|
|
30
|
-
connectedCallback() {
|
|
31
|
-
super.connectedCallback();
|
|
32
|
-
this.addEventListener("turn-theme-to-inverted", () => this.turnThemeToInverted(), { passive: true });
|
|
33
|
-
this.addEventListener("turn-theme-to-non-inverted", () => this.turnThemeToNonInverted(), { passive: true });
|
|
34
|
-
this.addEventListener("set-theme", this.setTheme);
|
|
35
|
-
this.addEventListener("set-theme-font-size", this.setThemeFontSize);
|
|
36
|
-
}
|
|
37
|
-
disconnectedCallback() {
|
|
38
|
-
this.removeEventListener("turn-theme-to-inverted", this.turnThemeToInverted);
|
|
39
|
-
this.removeEventListener("turn-theme-to-non-inverted", this.turnThemeToNonInverted);
|
|
40
|
-
this.removeEventListener("set-theme", this.setTheme);
|
|
41
|
-
this.removeEventListener("set-theme-font-size", this.setThemeFontSize);
|
|
42
|
-
super.disconnectedCallback();
|
|
43
|
-
}
|
|
44
|
-
setTheme(e) {
|
|
45
|
-
const ev = e;
|
|
46
|
-
this.background = ev.detail.background ? ev.detail.background : this.background;
|
|
47
|
-
this.foreground = ev.detail.foreground ? ev.detail.foreground : this.foreground;
|
|
48
|
-
this.primary = ev.detail.primary ? ev.detail.primary : this.primary;
|
|
49
|
-
this.onPrimary = ev.detail.onPrimary ? ev.detail.onPrimary : this.onPrimary;
|
|
50
|
-
this.accent = ev.detail.accent ? ev.detail.accent : this.accent;
|
|
51
|
-
this.onAccent = ev.detail.onAccent ? ev.detail.onAccent : this.onAccent;
|
|
52
|
-
}
|
|
53
|
-
setThemeFontSize(e) {
|
|
54
|
-
const ev = e;
|
|
55
|
-
this.style.setProperty("--font-size", ev.detail);
|
|
56
|
-
}
|
|
57
|
-
turnThemeToInverted() {
|
|
58
|
-
this.inverted = true;
|
|
59
|
-
this.forceBody && this.setBodyStyle();
|
|
60
|
-
}
|
|
61
|
-
turnThemeToNonInverted() {
|
|
62
|
-
this.inverted = false;
|
|
63
|
-
this.forceBody && this.setBodyStyle();
|
|
64
|
-
}
|
|
65
|
-
hexToHSL(hex) {
|
|
66
|
-
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
|
|
67
|
-
if (result == null)
|
|
68
|
-
return ["0", "0%", "0%"];
|
|
69
|
-
const [, rHex, gHex, bHex] = result;
|
|
70
|
-
const radix = 16;
|
|
71
|
-
const r = parseInt(rHex, radix) / 255;
|
|
72
|
-
const g = parseInt(gHex, radix) / 255;
|
|
73
|
-
const b = parseInt(bHex, radix) / 255;
|
|
74
|
-
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
75
|
-
let h = 0, s = 0, l = (max + min) / 2;
|
|
76
|
-
if (max != min) {
|
|
77
|
-
const d = max - min;
|
|
78
|
-
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
79
|
-
switch (max) {
|
|
80
|
-
case r:
|
|
81
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
82
|
-
break;
|
|
83
|
-
case g:
|
|
84
|
-
h = (b - r) / d + 2;
|
|
85
|
-
break;
|
|
86
|
-
case b:
|
|
87
|
-
h = (r - g) / d + 4;
|
|
88
|
-
break;
|
|
89
|
-
}
|
|
90
|
-
h /= 6;
|
|
91
|
-
}
|
|
92
|
-
return [(h * 360).toString(), (s * 100).toString() + "%", (l * 100).toString() + "%"];
|
|
93
|
-
}
|
|
94
|
-
setThemeColor() {
|
|
95
|
-
const primary_hsl = this.hexToHSL(this.primary);
|
|
96
|
-
this.style.setProperty("--primary-h", primary_hsl[0]);
|
|
97
|
-
this.style.setProperty("--primary-s", primary_hsl[1]);
|
|
98
|
-
this.style.setProperty("--primary-l", primary_hsl[2]);
|
|
99
|
-
const on_primary_hsl = this.hexToHSL(this.onPrimary);
|
|
100
|
-
this.style.setProperty("--on-primary-h", on_primary_hsl[0]);
|
|
101
|
-
this.style.setProperty("--on-primary-s", on_primary_hsl[1]);
|
|
102
|
-
this.style.setProperty("--on-primary-l", on_primary_hsl[2]);
|
|
103
|
-
const accent_hsl = this.hexToHSL(this.accent);
|
|
104
|
-
this.style.setProperty("--accent-h", accent_hsl[0]);
|
|
105
|
-
this.style.setProperty("--accent-s", accent_hsl[1]);
|
|
106
|
-
this.style.setProperty("--accent-l", accent_hsl[2]);
|
|
107
|
-
const on_accent_hsl = this.hexToHSL(this.onAccent);
|
|
108
|
-
this.style.setProperty("--on-accent-h", on_accent_hsl[0]);
|
|
109
|
-
this.style.setProperty("--on-accent-s", on_accent_hsl[1]);
|
|
110
|
-
this.style.setProperty("--on-accent-l", on_accent_hsl[2]);
|
|
111
|
-
const shade_hsl = this.hexToHSL(this.shade);
|
|
112
|
-
this.style.setProperty("--shade-h", shade_hsl[0]);
|
|
113
|
-
this.style.setProperty("--shade-s", shade_hsl[1]);
|
|
114
|
-
this.style.setProperty("--shade-l", shade_hsl[2]);
|
|
115
|
-
const on_shade_hsl = this.hexToHSL(this.onShade);
|
|
116
|
-
this.style.setProperty("--on-shade-h", on_shade_hsl[0]);
|
|
117
|
-
this.style.setProperty("--on-shade-s", on_shade_hsl[1]);
|
|
118
|
-
this.style.setProperty("--on-shade-l", on_shade_hsl[2]);
|
|
119
|
-
const error_hsl = this.hexToHSL(this.error);
|
|
120
|
-
this.style.setProperty("--error-h", error_hsl[0]);
|
|
121
|
-
this.style.setProperty("--error-s", error_hsl[1]);
|
|
122
|
-
this.style.setProperty("--error-l", error_hsl[2]);
|
|
123
|
-
const on_error_hsl = this.hexToHSL(this.onError);
|
|
124
|
-
this.style.setProperty("--on-error-h", on_error_hsl[0]);
|
|
125
|
-
this.style.setProperty("--on-error-s", on_error_hsl[1]);
|
|
126
|
-
this.style.setProperty("--on-error-l", on_error_hsl[2]);
|
|
127
|
-
const foreground = this.hexToHSL(this.foreground);
|
|
128
|
-
this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
|
|
129
|
-
const background = this.hexToHSL(this.background);
|
|
130
|
-
this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
|
|
131
|
-
this.forceBody && this.setBodyStyle();
|
|
132
|
-
}
|
|
133
|
-
setBodyStyle() {
|
|
134
|
-
let foreground = this.hexToHSL(this.foreground);
|
|
135
|
-
let background = this.hexToHSL(this.background);
|
|
136
|
-
if (this.inverted) {
|
|
137
|
-
foreground = this.hexToHSL(this.background);
|
|
138
|
-
background = this.hexToHSL(this.foreground);
|
|
139
|
-
}
|
|
140
|
-
document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
|
|
141
|
-
document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
TkTheme.styles = css `
|
|
145
|
-
${unsafeCSS(css_248z)}
|
|
146
|
-
`;
|
|
147
|
-
__decorate([
|
|
148
|
-
property()
|
|
149
|
-
], TkTheme.prototype, "primary", void 0);
|
|
150
|
-
__decorate([
|
|
151
|
-
property({ attribute: "on-primary" })
|
|
152
|
-
], TkTheme.prototype, "onPrimary", void 0);
|
|
153
|
-
__decorate([
|
|
154
|
-
property()
|
|
155
|
-
], TkTheme.prototype, "accent", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
property({ attribute: "on-accent" })
|
|
158
|
-
], TkTheme.prototype, "onAccent", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
property()
|
|
161
|
-
], TkTheme.prototype, "shade", void 0);
|
|
162
|
-
__decorate([
|
|
163
|
-
property()
|
|
164
|
-
], TkTheme.prototype, "onShade", void 0);
|
|
165
|
-
__decorate([
|
|
166
|
-
property()
|
|
167
|
-
], TkTheme.prototype, "error", void 0);
|
|
168
|
-
__decorate([
|
|
169
|
-
property()
|
|
170
|
-
], TkTheme.prototype, "onError", void 0);
|
|
171
|
-
__decorate([
|
|
172
|
-
property()
|
|
173
|
-
], TkTheme.prototype, "foreground", void 0);
|
|
174
|
-
__decorate([
|
|
175
|
-
property()
|
|
176
|
-
], TkTheme.prototype, "background", void 0);
|
|
177
|
-
__decorate([
|
|
178
|
-
property({ type: Boolean, attribute: "force-body", reflect: true })
|
|
179
|
-
], TkTheme.prototype, "forceBody", void 0);
|
|
180
|
-
__decorate([
|
|
181
|
-
property({ type: Boolean, attribute: true, reflect: true })
|
|
182
|
-
], TkTheme.prototype, "inverted", void 0);
|
|
183
|
-
TkTheme = __decorate([
|
|
184
|
-
customElement("tk-theme")
|
|
185
|
-
], TkTheme);
|
|
186
|
-
|
|
187
|
-
export { TkTheme };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|