@taiga-ui/core 4.91.0 → 4.93.0
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/components/button/button.directive.d.ts +1 -1
- package/esm2022/components/button/button.directive.mjs +2 -2
- package/esm2022/components/data-list/data-list.component.mjs +3 -3
- package/esm2022/components/icon/icon.component.mjs +2 -2
- package/esm2022/components/label/label.directive.mjs +3 -3
- package/esm2022/components/link/link.directive.mjs +3 -3
- package/esm2022/components/notification/notification.directive.mjs +3 -3
- package/esm2022/components/root/root.component.mjs +2 -2
- package/esm2022/components/textfield/textfield-multi/textfield-multi.component.mjs +3 -3
- package/esm2022/components/textfield/textfield.component.mjs +3 -3
- package/esm2022/directives/appearance/appearance.directive.mjs +3 -3
- package/esm2022/directives/group/group.directive.mjs +3 -3
- package/esm2022/directives/icons/icons.directive.mjs +3 -3
- package/esm2022/directives/title/title.directive.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-button.mjs +2 -2
- package/fesm2022/taiga-ui-core-components-data-list.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-icon.mjs +2 -2
- package/fesm2022/taiga-ui-core-components-label.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-link.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-notification.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-root.mjs +2 -2
- package/fesm2022/taiga-ui-core-components-textfield.mjs +6 -6
- package/fesm2022/taiga-ui-core-directives-appearance.mjs +3 -3
- package/fesm2022/taiga-ui-core-directives-group.mjs +3 -3
- package/fesm2022/taiga-ui-core-directives-icons.mjs +3 -3
- package/fesm2022/taiga-ui-core-directives-title.mjs +3 -3
- package/package.json +15 -15
- package/styles/mixins/theme/palette.less +133 -0
- package/styles/mixins/theme/variables.less +44 -0
- package/styles/mixins/theme.less +86 -0
- package/styles/theme/palette.less +4 -136
- package/styles/theme/variables.less +2 -41
- package/styles/variables/version.less +1 -1
|
@@ -18,11 +18,11 @@ function tuiAppearanceOptionsProvider(token) {
|
|
|
18
18
|
|
|
19
19
|
class TuiAppearanceStyles {
|
|
20
20
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearanceStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-appearance-4.
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearanceStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-appearance-4.93.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearanceV=\"4.93.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.93.0\"]:before,[tuiAppearanceV=\"4.93.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.93.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
22
22
|
}
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-appearance-${TUI_VERSION}`, styles: ["[tuiAppearanceV=\"4.
|
|
25
|
+
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-appearance-${TUI_VERSION}`, styles: ["[tuiAppearanceV=\"4.93.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.93.0\"]:before,[tuiAppearanceV=\"4.93.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.93.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"] }]
|
|
26
26
|
}] });
|
|
27
27
|
class TuiAppearance {
|
|
28
28
|
constructor() {
|
|
@@ -58,7 +58,7 @@ class TuiAppearance {
|
|
|
58
58
|
this.mode.set(mode);
|
|
59
59
|
}
|
|
60
60
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
61
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearance, isStandalone: true, selector: "[tuiAppearance]", inputs: { tuiAppearance: "tuiAppearance", tuiAppearanceState: "tuiAppearanceState", tuiAppearanceFocus: "tuiAppearanceFocus", tuiAppearanceMode: "tuiAppearanceMode" }, host: { attributes: { "tuiAppearance": "", "tuiAppearanceV": "4.
|
|
61
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearance, isStandalone: true, selector: "[tuiAppearance]", inputs: { tuiAppearance: "tuiAppearance", tuiAppearanceState: "tuiAppearanceState", tuiAppearanceFocus: "tuiAppearanceFocus", tuiAppearanceMode: "tuiAppearanceMode" }, host: { attributes: { "tuiAppearance": "", "tuiAppearanceV": "4.93.0" }, properties: { "attr.data-appearance": "appearance()", "attr.data-state": "state()", "attr.data-focus": "focus()", "attr.data-mode": "modes()" } }, hostDirectives: [{ directive: i1.TuiTransitioned }], ngImport: i0 }); }
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, decorators: [{
|
|
64
64
|
type: Directive,
|
|
@@ -18,11 +18,11 @@ function tuiGroupOptionsProvider(options) {
|
|
|
18
18
|
|
|
19
19
|
class TuiGroupStyles {
|
|
20
20
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGroupStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiGroupStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-group-4.
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiGroupStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-group-4.93.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiGroupV=\"4.93.0\"]{position:relative;display:flex;transform:translateZ(0);--t-group-radius: var(--tui-radius-l);--t-group-margin: -1px;--t-group-mask: linear-gradient(to right, rgba(0, 0, 0, .5) 1px, #000 2px, #000 calc(100% - 2px) , rgba(0, 0, 0, .5));--t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, .5) 1px, #000 2px);--t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px) , rgba(0, 0, 0, .5) calc(100% - 1px) )}[tuiGroupV=\"4.93.0\"]>*{z-index:1;flex:1 1 0;min-inline-size:0;-webkit-mask:var(--t-group-mask);mask:var(--t-group-mask);-webkit-mask-clip:no-clip;mask-clip:no-clip}[tuiGroupV=\"4.93.0\"]>*:disabled,[tuiGroupV=\"4.93.0\"]>*._disabled{z-index:0}[tuiGroupV=\"4.93.0\"]>*:invalid:not([data-mode]),[tuiGroupV=\"4.93.0\"]>*[data-mode~=invalid]{z-index:2;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has(:invalid:not([data-mode])),[tuiGroupV=\"4.93.0\"]>*:has([data-mode~=invalid]){z-index:2;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has(:focus-visible){z-index:3;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has([data-focus=true]){z-index:3;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:checked:not([data-mode]),[tuiGroupV=\"4.93.0\"]>*[data-mode~=checked]{z-index:4;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has([tuiBlock]:checked){z-index:4;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:not(:last-child){margin-inline-end:var(--t-group-margin)}[tuiGroupV=\"4.93.0\"]>*:nth-child(n){border-radius:0}[tuiGroupV=\"4.93.0\"]>*:first-child{border-radius:var(--t-group-radius) 0 0 var(--t-group-radius);-webkit-mask-image:var(--t-group-mask-start);mask-image:var(--t-group-mask-start)}[tuiGroupV=\"4.93.0\"]>*:last-child{border-radius:0 var(--t-group-radius) var(--t-group-radius) 0;-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end)}[tuiGroupV=\"4.93.0\"]>*:only-child{border-radius:var(--t-group-radius);-webkit-mask:none;mask:none}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:first-child{border-radius:0 var(--t-group-radius) var(--t-group-radius) 0;-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end)}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:last-child{border-radius:var(--t-group-radius) 0 0 var(--t-group-radius);-webkit-mask-image:var(--t-group-mask-start);mask-image:var(--t-group-mask-start)}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:only-child{border-radius:var(--t-group-radius);-webkit-mask:none;mask:none}[tuiGroupV=\"4.93.0\"][data-size=s],[tuiGroupV=\"4.93.0\"][data-size=m]{--t-group-radius: var(--tui-radius-m)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]{display:inline-flex;flex-direction:column;--t-group-mask: linear-gradient(to bottom, rgba(0, 0, 0, .5) 1px, #000 2px, #000 calc(100% - 2px) , rgba(0, 0, 0, .5));--t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px) , rgba(0, 0, 0, .5) calc(100% - 1px) );--t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, .5) 1px, #000 2px)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*{min-block-size:auto;flex:0 0 auto}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:not(:last-child){margin-inline-end:0;margin-block-end:var(--t-group-margin)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:first-child{border-radius:var(--t-group-radius) var(--t-group-radius) 0 0}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:last-child{border-radius:0 0 var(--t-group-radius) var(--t-group-radius)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:only-child{border-radius:var(--t-group-radius)}.tui-group{position:relative;display:flex;isolation:isolate;--t-group-radius: var(--tui-radius-m)}.tui-group>*{flex:1 1 0;min-inline-size:0}.tui-group>*:not(:last-child){margin-inline-end:.125rem}.tui-group.tui-group>*:nth-child(n){border-radius:0}.tui-group_radius_large{--t-group-radius: var(--tui-radius-l)}.tui-group_collapsed>*{z-index:1}.tui-group_collapsed>*:not(:last-child){margin:0 -1px 0 0}.tui-group_collapsed>*._readonly,.tui-group_collapsed>*._disabled,.tui-group_collapsed>*._readonly:hover,.tui-group_collapsed>*._disabled:hover{z-index:0}.tui-group_collapsed>*._invalid{z-index:2}.tui-group_collapsed>*._invalid:hover,.tui-group_collapsed>*._invalid._hovered,.tui-group_collapsed>*._invalid._pressed{z-index:4}.tui-group_collapsed>*:hover,.tui-group_collapsed>*._hovered,.tui-group_collapsed>*._pressed{z-index:3}.tui-group_collapsed>*._hosted_dropdown_focused,.tui-group_collapsed>*._focus-visible,.tui-group_collapsed>*._focused.ng-touched,.tui-group_collapsed>*._focused.ng-untouched{z-index:5}.tui-group_collapsed>*._active,.tui-group_collapsed>*[data-appearance=whiteblock-active]{z-index:6}.tui-group_collapsed>*:has([tuiBlock]:checked){z-index:6}.tui-group_collapsed>*._focus-visible._focused,.tui-group_collapsed>*._focus-visible._active,.tui-group_collapsed>*._focus-visible[data-appearance=whiteblock-active]{z-index:7}.tui-group_orientation_vertical{display:inline-flex;flex-direction:column}.tui-group_orientation_vertical>*{min-block-size:auto;flex:0 0 auto}.tui-group_orientation_vertical>*:not(:last-child){margin-inline-end:0;margin-block-end:.125rem}.tui-group_orientation_vertical.tui-group_collapsed>*:not(:last-child){margin:0 0 -1px}.tui-group_rounded.tui-group_orientation_horizontal>*:first-child{border-top-left-radius:var(--t-group-radius);border-bottom-left-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_horizontal>*:last-child{border-top-right-radius:var(--t-group-radius);border-bottom-right-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_vertical>*:first-child{border-top-left-radius:var(--t-group-radius);border-top-right-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_vertical>*:last-child{border-bottom-left-radius:var(--t-group-radius);border-bottom-right-radius:var(--t-group-radius)}.tui-group__auto-width-item{min-inline-size:auto;flex:0 0 auto}.tui-group__inherit-item{border-radius:inherit!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
22
22
|
}
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGroupStyles, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-group-${TUI_VERSION}`, styles: ["[tuiGroupV=\"4.
|
|
25
|
+
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-group-${TUI_VERSION}`, styles: ["[tuiGroupV=\"4.93.0\"]{position:relative;display:flex;transform:translateZ(0);--t-group-radius: var(--tui-radius-l);--t-group-margin: -1px;--t-group-mask: linear-gradient(to right, rgba(0, 0, 0, .5) 1px, #000 2px, #000 calc(100% - 2px) , rgba(0, 0, 0, .5));--t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, .5) 1px, #000 2px);--t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px) , rgba(0, 0, 0, .5) calc(100% - 1px) )}[tuiGroupV=\"4.93.0\"]>*{z-index:1;flex:1 1 0;min-inline-size:0;-webkit-mask:var(--t-group-mask);mask:var(--t-group-mask);-webkit-mask-clip:no-clip;mask-clip:no-clip}[tuiGroupV=\"4.93.0\"]>*:disabled,[tuiGroupV=\"4.93.0\"]>*._disabled{z-index:0}[tuiGroupV=\"4.93.0\"]>*:invalid:not([data-mode]),[tuiGroupV=\"4.93.0\"]>*[data-mode~=invalid]{z-index:2;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has(:invalid:not([data-mode])),[tuiGroupV=\"4.93.0\"]>*:has([data-mode~=invalid]){z-index:2;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has(:focus-visible){z-index:3;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has([data-focus=true]){z-index:3;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:checked:not([data-mode]),[tuiGroupV=\"4.93.0\"]>*[data-mode~=checked]{z-index:4;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:has([tuiBlock]:checked){z-index:4;--t-group-mask: none}[tuiGroupV=\"4.93.0\"]>*:not(:last-child){margin-inline-end:var(--t-group-margin)}[tuiGroupV=\"4.93.0\"]>*:nth-child(n){border-radius:0}[tuiGroupV=\"4.93.0\"]>*:first-child{border-radius:var(--t-group-radius) 0 0 var(--t-group-radius);-webkit-mask-image:var(--t-group-mask-start);mask-image:var(--t-group-mask-start)}[tuiGroupV=\"4.93.0\"]>*:last-child{border-radius:0 var(--t-group-radius) var(--t-group-radius) 0;-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end)}[tuiGroupV=\"4.93.0\"]>*:only-child{border-radius:var(--t-group-radius);-webkit-mask:none;mask:none}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:first-child{border-radius:0 var(--t-group-radius) var(--t-group-radius) 0;-webkit-mask-image:var(--t-group-mask-end);mask-image:var(--t-group-mask-end)}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:last-child{border-radius:var(--t-group-radius) 0 0 var(--t-group-radius);-webkit-mask-image:var(--t-group-mask-start);mask-image:var(--t-group-mask-start)}[dir=rtl] [tuiGroupV=\"4.93.0\"]:not([data-orientation=vertical])>*:only-child{border-radius:var(--t-group-radius);-webkit-mask:none;mask:none}[tuiGroupV=\"4.93.0\"][data-size=s],[tuiGroupV=\"4.93.0\"][data-size=m]{--t-group-radius: var(--tui-radius-m)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]{display:inline-flex;flex-direction:column;--t-group-mask: linear-gradient(to bottom, rgba(0, 0, 0, .5) 1px, #000 2px, #000 calc(100% - 2px) , rgba(0, 0, 0, .5));--t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px) , rgba(0, 0, 0, .5) calc(100% - 1px) );--t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, .5) 1px, #000 2px)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*{min-block-size:auto;flex:0 0 auto}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:not(:last-child){margin-inline-end:0;margin-block-end:var(--t-group-margin)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:first-child{border-radius:var(--t-group-radius) var(--t-group-radius) 0 0}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:last-child{border-radius:0 0 var(--t-group-radius) var(--t-group-radius)}[tuiGroupV=\"4.93.0\"][data-orientation=vertical]>*:only-child{border-radius:var(--t-group-radius)}.tui-group{position:relative;display:flex;isolation:isolate;--t-group-radius: var(--tui-radius-m)}.tui-group>*{flex:1 1 0;min-inline-size:0}.tui-group>*:not(:last-child){margin-inline-end:.125rem}.tui-group.tui-group>*:nth-child(n){border-radius:0}.tui-group_radius_large{--t-group-radius: var(--tui-radius-l)}.tui-group_collapsed>*{z-index:1}.tui-group_collapsed>*:not(:last-child){margin:0 -1px 0 0}.tui-group_collapsed>*._readonly,.tui-group_collapsed>*._disabled,.tui-group_collapsed>*._readonly:hover,.tui-group_collapsed>*._disabled:hover{z-index:0}.tui-group_collapsed>*._invalid{z-index:2}.tui-group_collapsed>*._invalid:hover,.tui-group_collapsed>*._invalid._hovered,.tui-group_collapsed>*._invalid._pressed{z-index:4}.tui-group_collapsed>*:hover,.tui-group_collapsed>*._hovered,.tui-group_collapsed>*._pressed{z-index:3}.tui-group_collapsed>*._hosted_dropdown_focused,.tui-group_collapsed>*._focus-visible,.tui-group_collapsed>*._focused.ng-touched,.tui-group_collapsed>*._focused.ng-untouched{z-index:5}.tui-group_collapsed>*._active,.tui-group_collapsed>*[data-appearance=whiteblock-active]{z-index:6}.tui-group_collapsed>*:has([tuiBlock]:checked){z-index:6}.tui-group_collapsed>*._focus-visible._focused,.tui-group_collapsed>*._focus-visible._active,.tui-group_collapsed>*._focus-visible[data-appearance=whiteblock-active]{z-index:7}.tui-group_orientation_vertical{display:inline-flex;flex-direction:column}.tui-group_orientation_vertical>*{min-block-size:auto;flex:0 0 auto}.tui-group_orientation_vertical>*:not(:last-child){margin-inline-end:0;margin-block-end:.125rem}.tui-group_orientation_vertical.tui-group_collapsed>*:not(:last-child){margin:0 0 -1px}.tui-group_rounded.tui-group_orientation_horizontal>*:first-child{border-top-left-radius:var(--t-group-radius);border-bottom-left-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_horizontal>*:last-child{border-top-right-radius:var(--t-group-radius);border-bottom-right-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_vertical>*:first-child{border-top-left-radius:var(--t-group-radius);border-top-right-radius:var(--t-group-radius)}.tui-group_rounded.tui-group_orientation_vertical>*:last-child{border-bottom-left-radius:var(--t-group-radius);border-bottom-right-radius:var(--t-group-radius)}.tui-group__auto-width-item{min-inline-size:auto;flex:0 0 auto}.tui-group__inherit-item{border-radius:inherit!important}\n"] }]
|
|
26
26
|
}] });
|
|
27
27
|
class TuiGroup {
|
|
28
28
|
constructor() {
|
|
@@ -34,7 +34,7 @@ class TuiGroup {
|
|
|
34
34
|
this.size = this.options.size;
|
|
35
35
|
}
|
|
36
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
37
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiGroup, isStandalone: true, selector: "[tuiGroup]:not(ng-container)", inputs: { orientation: "orientation", collapsed: "collapsed", rounded: "rounded", size: "size" }, host: { attributes: { "tuiGroup": "", "tuiGroupV": "4.
|
|
37
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiGroup, isStandalone: true, selector: "[tuiGroup]:not(ng-container)", inputs: { orientation: "orientation", collapsed: "collapsed", rounded: "rounded", size: "size" }, host: { attributes: { "tuiGroup": "", "tuiGroupV": "4.93.0" }, properties: { "attr.data-orientation": "orientation", "attr.data-size": "size", "style.--t-group-radius": "rounded ? null : 0", "style.--t-group-margin.rem": "collapsed ? null : 0.125", "style.--t-group-mask": "collapsed ? null : \"none\"", "style.--t-group-mask-start": "collapsed ? null : \"none\"", "style.--t-group-mask-end": "collapsed ? null : \"none\"" } }, ngImport: i0 }); }
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGroup, decorators: [{
|
|
40
40
|
type: Directive,
|
|
@@ -6,11 +6,11 @@ import { tuiInjectIconResolver, tuiGetIconMode, TUI_ICON_START, TUI_ICON_END } f
|
|
|
6
6
|
|
|
7
7
|
class TuiIconsStyles {
|
|
8
8
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIconsStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiIconsStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-icons-4.
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiIconsStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-icons-4.93.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiIconsV=\"4.93.0\"]{--t-icon-start: none;--t-icon-end: none}[tuiIconsV=\"4.93.0\"]:before,[tuiIconsV=\"4.93.0\"]:after{content:\"\";inline-size:1em;block-size:1em;line-height:1em;font-size:1.5rem;flex-shrink:0;box-sizing:content-box;background:currentColor}[tuiIconsV=\"4.93.0\"]:before{display:var(--t-icon-start, none);-webkit-mask:var(--t-icon-start) no-repeat center / contain padding-box;mask:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"]:after{display:var(--t-icon-end, none);-webkit-mask:var(--t-icon-end) no-repeat center / contain padding-box;mask:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-start=image]:before{-webkit-mask:none;mask:none;background:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-end=image]:after{-webkit-mask:none;mask:none;background:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-start=font]:before,[tuiIconsV=\"4.93.0\"][data-icon-end=font]:after{display:grid;-webkit-mask:none;mask:none;background:none;font:1.3em/1 var(--tui-font-icon, inherit);text-align:center;place-content:center;text-transform:none}[tuiIconsV=\"4.93.0\"][data-icon-start=font]:before{content:var(--t-icon-start)}[tuiIconsV=\"4.93.0\"][data-icon-end=font]:after{content:var(--t-icon-end)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10
10
|
}
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIconsStyles, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-icons-${TUI_VERSION}`, styles: ["[tuiIconsV=\"4.
|
|
13
|
+
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-icons-${TUI_VERSION}`, styles: ["[tuiIconsV=\"4.93.0\"]{--t-icon-start: none;--t-icon-end: none}[tuiIconsV=\"4.93.0\"]:before,[tuiIconsV=\"4.93.0\"]:after{content:\"\";inline-size:1em;block-size:1em;line-height:1em;font-size:1.5rem;flex-shrink:0;box-sizing:content-box;background:currentColor}[tuiIconsV=\"4.93.0\"]:before{display:var(--t-icon-start, none);-webkit-mask:var(--t-icon-start) no-repeat center / contain padding-box;mask:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"]:after{display:var(--t-icon-end, none);-webkit-mask:var(--t-icon-end) no-repeat center / contain padding-box;mask:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-start=image]:before{-webkit-mask:none;mask:none;background:var(--t-icon-start) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-end=image]:after{-webkit-mask:none;mask:none;background:var(--t-icon-end) no-repeat center / contain padding-box}[tuiIconsV=\"4.93.0\"][data-icon-start=font]:before,[tuiIconsV=\"4.93.0\"][data-icon-end=font]:after{display:grid;-webkit-mask:none;mask:none;background:none;font:1.3em/1 var(--tui-font-icon, inherit);text-align:center;place-content:center;text-transform:none}[tuiIconsV=\"4.93.0\"][data-icon-start=font]:before{content:var(--t-icon-start)}[tuiIconsV=\"4.93.0\"][data-icon-end=font]:after{content:var(--t-icon-end)}\n"] }]
|
|
14
14
|
}] });
|
|
15
15
|
class TuiIcons {
|
|
16
16
|
constructor() {
|
|
@@ -41,7 +41,7 @@ class TuiIcons {
|
|
|
41
41
|
: `url(${this.resolver(iconStr)})`;
|
|
42
42
|
}
|
|
43
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIcons, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
44
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiIcons, isStandalone: true, inputs: { iconStartSetter: ["iconStart", "iconStartSetter"], iconEndSetter: ["iconEnd", "iconEndSetter"] }, host: { attributes: { "tuiIcons": "", "tuiIconsV": "4.
|
|
44
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiIcons, isStandalone: true, inputs: { iconStartSetter: ["iconStart", "iconStartSetter"], iconEndSetter: ["iconEnd", "iconEndSetter"] }, host: { attributes: { "tuiIcons": "", "tuiIconsV": "4.93.0" }, properties: { "style.--t-icon-start": "startResource()", "style.--t-icon-end": "endResource()", "attr.data-icon-start": "startMode()", "attr.data-icon-end": "endMode()" } }, ngImport: i0 }); }
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIcons, decorators: [{
|
|
47
47
|
type: Directive,
|
|
@@ -5,13 +5,13 @@ import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
|
5
5
|
|
|
6
6
|
class TuiTitleStyles {
|
|
7
7
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTitleStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTitleStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-title" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiTitleV=\"4.
|
|
8
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTitleStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-title" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiTitleV=\"4.93.0\"]{position:relative;display:flex;min-inline-size:0;flex-direction:column;text-align:start;gap:.25rem;margin:0;font:var(--tui-font-text-ui-m)}[tuiTitleV=\"4.93.0\"][data-size=s]{gap:.125rem;font:var(--tui-font-text-s)}[tuiTitleV=\"4.93.0\"][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-xs)}[tuiTitleV=\"4.93.0\"][data-size=m]{gap:.125rem;font:var(--tui-font-heading-5)}[tuiTitleV=\"4.93.0\"][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-m)}[tuiTitleV=\"4.93.0\"][data-size=l]{gap:.5rem;font:var(--tui-font-heading-3)}[tuiTitleV=\"4.93.0\"][data-size=l] [tuiSubtitle]{font:var(--tui-font-text-m)}[tuiTitleV=\"4.93.0\"] h1,[tuiTitleV=\"4.93.0\"] h2,[tuiTitleV=\"4.93.0\"] h3,[tuiTitleV=\"4.93.0\"] h4,[tuiTitleV=\"4.93.0\"] h5,[tuiTitleV=\"4.93.0\"] h6{margin:0;font:inherit}[tuiSubtitle]{font:var(--tui-font-text-ui-s);margin:0}[tuiButton] [tuiTitleV=\"4.93.0\"]{margin-inline-end:auto}[tuiButton] [tuiTitleV=\"4.93.0\"] [tuiSubtitle]{color:var(--tui-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9
9
|
}
|
|
10
10
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTitleStyles, decorators: [{
|
|
11
11
|
type: Component,
|
|
12
12
|
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13
13
|
class: 'tui-title',
|
|
14
|
-
}, styles: ["[tuiTitleV=\"4.
|
|
14
|
+
}, styles: ["[tuiTitleV=\"4.93.0\"]{position:relative;display:flex;min-inline-size:0;flex-direction:column;text-align:start;gap:.25rem;margin:0;font:var(--tui-font-text-ui-m)}[tuiTitleV=\"4.93.0\"][data-size=s]{gap:.125rem;font:var(--tui-font-text-s)}[tuiTitleV=\"4.93.0\"][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-xs)}[tuiTitleV=\"4.93.0\"][data-size=m]{gap:.125rem;font:var(--tui-font-heading-5)}[tuiTitleV=\"4.93.0\"][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-m)}[tuiTitleV=\"4.93.0\"][data-size=l]{gap:.5rem;font:var(--tui-font-heading-3)}[tuiTitleV=\"4.93.0\"][data-size=l] [tuiSubtitle]{font:var(--tui-font-text-m)}[tuiTitleV=\"4.93.0\"] h1,[tuiTitleV=\"4.93.0\"] h2,[tuiTitleV=\"4.93.0\"] h3,[tuiTitleV=\"4.93.0\"] h4,[tuiTitleV=\"4.93.0\"] h5,[tuiTitleV=\"4.93.0\"] h6{margin:0;font:inherit}[tuiSubtitle]{font:var(--tui-font-text-ui-s);margin:0}[tuiButton] [tuiTitleV=\"4.93.0\"]{margin-inline-end:auto}[tuiButton] [tuiTitleV=\"4.93.0\"] [tuiSubtitle]{color:var(--tui-text-secondary)}\n"] }]
|
|
15
15
|
}] });
|
|
16
16
|
class TuiTitle {
|
|
17
17
|
constructor() {
|
|
@@ -19,7 +19,7 @@ class TuiTitle {
|
|
|
19
19
|
this.size = '';
|
|
20
20
|
}
|
|
21
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
22
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiTitle, isStandalone: true, selector: "[tuiTitle]", inputs: { size: ["tuiTitle", "size"] }, host: { attributes: { "tuiTitle": "", "tuiTitleV": "4.
|
|
22
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiTitle, isStandalone: true, selector: "[tuiTitle]", inputs: { size: ["tuiTitle", "size"] }, host: { attributes: { "tuiTitle": "", "tuiTitleV": "4.93.0" }, properties: { "attr.data-size": "size || null" } }, ngImport: i0 }); }
|
|
23
23
|
}
|
|
24
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTitle, decorators: [{
|
|
25
25
|
type: Directive,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.93.0",
|
|
4
4
|
"description": "Core library for creating Angular components and applications using Taiga UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -175,18 +175,18 @@
|
|
|
175
175
|
"esm": "./esm2022/components/spin-button/taiga-ui-core-components-spin-button.mjs",
|
|
176
176
|
"default": "./fesm2022/taiga-ui-core-components-spin-button.mjs"
|
|
177
177
|
},
|
|
178
|
-
"./components/textfield": {
|
|
179
|
-
"types": "./components/textfield/index.d.ts",
|
|
180
|
-
"esm2022": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
|
|
181
|
-
"esm": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
|
|
182
|
-
"default": "./fesm2022/taiga-ui-core-components-textfield.mjs"
|
|
183
|
-
},
|
|
184
178
|
"./directives/appearance": {
|
|
185
179
|
"types": "./directives/appearance/index.d.ts",
|
|
186
180
|
"esm2022": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
|
|
187
181
|
"esm": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
|
|
188
182
|
"default": "./fesm2022/taiga-ui-core-directives-appearance.mjs"
|
|
189
183
|
},
|
|
184
|
+
"./components/textfield": {
|
|
185
|
+
"types": "./components/textfield/index.d.ts",
|
|
186
|
+
"esm2022": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
|
|
187
|
+
"esm": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
|
|
188
|
+
"default": "./fesm2022/taiga-ui-core-components-textfield.mjs"
|
|
189
|
+
},
|
|
190
190
|
"./directives/date-format": {
|
|
191
191
|
"types": "./directives/date-format/index.d.ts",
|
|
192
192
|
"esm2022": "./esm2022/directives/date-format/taiga-ui-core-directives-date-format.mjs",
|
|
@@ -229,12 +229,6 @@
|
|
|
229
229
|
"esm": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
|
|
230
230
|
"default": "./fesm2022/taiga-ui-core-directives-number-format.mjs"
|
|
231
231
|
},
|
|
232
|
-
"./directives/popup": {
|
|
233
|
-
"types": "./directives/popup/index.d.ts",
|
|
234
|
-
"esm2022": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
|
|
235
|
-
"esm": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
|
|
236
|
-
"default": "./fesm2022/taiga-ui-core-directives-popup.mjs"
|
|
237
|
-
},
|
|
238
232
|
"./directives/surface": {
|
|
239
233
|
"types": "./directives/surface/index.d.ts",
|
|
240
234
|
"esm2022": "./esm2022/directives/surface/taiga-ui-core-directives-surface.mjs",
|
|
@@ -301,6 +295,12 @@
|
|
|
301
295
|
"esm": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
|
|
302
296
|
"default": "./fesm2022/taiga-ui-core-pipes-order-week-days.mjs"
|
|
303
297
|
},
|
|
298
|
+
"./directives/popup": {
|
|
299
|
+
"types": "./directives/popup/index.d.ts",
|
|
300
|
+
"esm2022": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
|
|
301
|
+
"esm": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
|
|
302
|
+
"default": "./fesm2022/taiga-ui-core-directives-popup.mjs"
|
|
303
|
+
},
|
|
304
304
|
"./utils/dom": {
|
|
305
305
|
"types": "./utils/dom/index.d.ts",
|
|
306
306
|
"esm2022": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
|
|
@@ -329,9 +329,9 @@
|
|
|
329
329
|
"@angular/router": ">=16.0.0",
|
|
330
330
|
"@ng-web-apis/common": "^4.14.0",
|
|
331
331
|
"@ng-web-apis/mutation-observer": "^4.14.0",
|
|
332
|
-
"@taiga-ui/cdk": "4.
|
|
332
|
+
"@taiga-ui/cdk": "4.93.0",
|
|
333
333
|
"@taiga-ui/event-plugins": "^4.7.0",
|
|
334
|
-
"@taiga-ui/i18n": "4.
|
|
334
|
+
"@taiga-ui/i18n": "4.93.0",
|
|
335
335
|
"@taiga-ui/polymorpheus": "^4.10.0",
|
|
336
336
|
"rxjs": ">=7.0.0"
|
|
337
337
|
},
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
.tui-theme-dark() {
|
|
2
|
+
// Backgrounds
|
|
3
|
+
--tui-background-base: #222;
|
|
4
|
+
--tui-background-base-alt: #333;
|
|
5
|
+
--tui-background-neutral-1: rgba(255, 255, 255, 0.08);
|
|
6
|
+
--tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
|
|
7
|
+
--tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
|
|
8
|
+
--tui-background-neutral-2: rgba(255, 255, 255, 0.24);
|
|
9
|
+
--tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
|
|
10
|
+
--tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
|
|
11
|
+
--tui-background-accent-opposite: #fff;
|
|
12
|
+
--tui-background-accent-opposite-hover: #f6f6f6;
|
|
13
|
+
--tui-background-accent-opposite-pressed: #ededed;
|
|
14
|
+
--tui-background-elevation-1: #292929;
|
|
15
|
+
--tui-background-elevation-2: #2f2f2f;
|
|
16
|
+
--tui-background-elevation-3: #373737;
|
|
17
|
+
// Other
|
|
18
|
+
--tui-service-autofill-background: rgb(85, 74, 42);
|
|
19
|
+
--tui-border-normal: rgba(255, 255, 255, 0.14);
|
|
20
|
+
--tui-border-hover: rgba(255, 255, 255, 0.6);
|
|
21
|
+
--tui-border-focus: rgba(255, 255, 255, 0.64);
|
|
22
|
+
// Statuses
|
|
23
|
+
--tui-status-negative: #ff4d4d;
|
|
24
|
+
--tui-status-negative-pale: rgba(255, 77, 77, 0.24);
|
|
25
|
+
--tui-status-negative-pale-hover: rgba(255, 77, 77, 0.32);
|
|
26
|
+
--tui-status-positive: rgb(74, 201, 155);
|
|
27
|
+
--tui-status-positive-pale: rgba(74, 201, 155, 0.32);
|
|
28
|
+
--tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
|
|
29
|
+
--tui-status-warning: rgb(255, 199, 0);
|
|
30
|
+
--tui-status-warning-pale: rgba(255, 199, 0, 0.32);
|
|
31
|
+
--tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
|
|
32
|
+
--tui-status-info: rgb(112, 182, 246);
|
|
33
|
+
--tui-status-info-pale: rgba(112, 182, 246, 0.32);
|
|
34
|
+
--tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
|
|
35
|
+
--tui-status-neutral: rgb(149, 155, 164);
|
|
36
|
+
// Text
|
|
37
|
+
--tui-text-primary: rgba(255, 255, 255, 1);
|
|
38
|
+
--tui-text-secondary: rgba(255, 255, 255, 0.72);
|
|
39
|
+
--tui-text-tertiary: rgba(255, 255, 255, 0.6);
|
|
40
|
+
--tui-text-action: #6788ff;
|
|
41
|
+
--tui-text-action-hover: #526ed3;
|
|
42
|
+
--tui-text-positive: #44c596;
|
|
43
|
+
--tui-text-positive-hover: #3aa981;
|
|
44
|
+
--tui-text-negative: #ff4d4d;
|
|
45
|
+
--tui-text-negative-hover: #f66;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.tui-theme-light() {
|
|
49
|
+
// Backgrounds
|
|
50
|
+
--tui-background-base: #fff;
|
|
51
|
+
--tui-background-base-alt: #f6f6f6;
|
|
52
|
+
--tui-background-neutral-1: rgba(0, 0, 0, 0.04);
|
|
53
|
+
--tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
|
|
54
|
+
--tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
|
|
55
|
+
--tui-background-neutral-2: rgba(0, 0, 0, 0.08);
|
|
56
|
+
--tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
|
|
57
|
+
--tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
|
|
58
|
+
--tui-background-accent-1: #526ed3;
|
|
59
|
+
--tui-background-accent-1-hover: #6c86e2;
|
|
60
|
+
--tui-background-accent-1-pressed: #314692;
|
|
61
|
+
--tui-background-accent-2: #ff7043;
|
|
62
|
+
--tui-background-accent-2-hover: #ff9a94;
|
|
63
|
+
--tui-background-accent-2-pressed: #e7716a;
|
|
64
|
+
--tui-background-accent-opposite: #000;
|
|
65
|
+
--tui-background-accent-opposite-hover: #333;
|
|
66
|
+
--tui-background-accent-opposite-pressed: #808080;
|
|
67
|
+
--tui-background-elevation-1: #fff;
|
|
68
|
+
--tui-background-elevation-2: #fff;
|
|
69
|
+
--tui-background-elevation-3: #fff;
|
|
70
|
+
// Other
|
|
71
|
+
--tui-service-autofill-background: #fff5c0;
|
|
72
|
+
--tui-service-selection-background: rgba(112, 182, 246, 0.12);
|
|
73
|
+
--tui-service-backdrop: rgba(0, 0, 0, 0.75);
|
|
74
|
+
--tui-border-normal: rgba(0, 0, 0, 0.1);
|
|
75
|
+
--tui-border-hover: rgba(0, 0, 0, 0.16);
|
|
76
|
+
--tui-border-focus: rgba(51, 51, 51, 0.64);
|
|
77
|
+
// Statuses
|
|
78
|
+
--tui-status-negative: #ff291a;
|
|
79
|
+
--tui-status-negative-pale: rgba(245, 34, 34, 0.08);
|
|
80
|
+
--tui-status-negative-pale-hover: rgba(245, 34, 34, 0.16);
|
|
81
|
+
--tui-status-positive: rgba(74, 201, 155, 1);
|
|
82
|
+
--tui-status-positive-pale: rgba(74, 201, 155, 0.12);
|
|
83
|
+
--tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
|
|
84
|
+
--tui-status-warning: rgba(255, 199, 0, 1);
|
|
85
|
+
--tui-status-warning-pale: rgba(255, 199, 0, 0.12);
|
|
86
|
+
--tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
|
|
87
|
+
--tui-status-info: rgba(112, 182, 246, 1);
|
|
88
|
+
--tui-status-info-pale: rgba(112, 182, 246, 0.12);
|
|
89
|
+
--tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
|
|
90
|
+
--tui-status-neutral: rgb(121, 129, 140);
|
|
91
|
+
// Text
|
|
92
|
+
--tui-text-primary: rgba(27, 31, 59, 1);
|
|
93
|
+
--tui-text-secondary: rgba(27, 31, 59, 0.65);
|
|
94
|
+
--tui-text-tertiary: rgba(27, 31, 59, 0.4);
|
|
95
|
+
--tui-text-primary-on-accent-1: #fff;
|
|
96
|
+
--tui-text-primary-on-accent-2: #fff;
|
|
97
|
+
--tui-text-action: #4c66c3;
|
|
98
|
+
--tui-text-action-hover: #6c86e2;
|
|
99
|
+
--tui-text-positive: #3aa981;
|
|
100
|
+
--tui-text-positive-hover: #7ac5aa;
|
|
101
|
+
--tui-text-negative: #ff291a;
|
|
102
|
+
--tui-text-negative-hover: #ff4d4d;
|
|
103
|
+
// Charts
|
|
104
|
+
--tui-chart-categorical-00: var(--tui-background-accent-1);
|
|
105
|
+
--tui-chart-categorical-01: #ea97c4;
|
|
106
|
+
--tui-chart-categorical-02: #a0c5df;
|
|
107
|
+
--tui-chart-categorical-03: #fee797;
|
|
108
|
+
--tui-chart-categorical-04: #b0b0b0;
|
|
109
|
+
--tui-chart-categorical-05: #e29398;
|
|
110
|
+
--tui-chart-categorical-06: #b8474e;
|
|
111
|
+
--tui-chart-categorical-07: #fcc068;
|
|
112
|
+
--tui-chart-categorical-08: #ff8a00;
|
|
113
|
+
--tui-chart-categorical-09: #dab3f9;
|
|
114
|
+
--tui-chart-categorical-10: #7b439e;
|
|
115
|
+
--tui-chart-categorical-11: #8dda71;
|
|
116
|
+
--tui-chart-categorical-12: #fcbb14;
|
|
117
|
+
--tui-chart-categorical-13: #a8cef1;
|
|
118
|
+
--tui-chart-categorical-14: #bd65a4;
|
|
119
|
+
--tui-chart-categorical-15: #7fd7cc;
|
|
120
|
+
--tui-chart-categorical-16: #2fad96;
|
|
121
|
+
--tui-chart-categorical-17: #d4aca2;
|
|
122
|
+
--tui-chart-categorical-18: #9d6f64;
|
|
123
|
+
--tui-chart-categorical-19: #d2e9a2;
|
|
124
|
+
--tui-chart-categorical-20: #aadc42;
|
|
125
|
+
--tui-chart-categorical-21: #3682db;
|
|
126
|
+
--tui-chart-categorical-22: #34b41f;
|
|
127
|
+
// Shadows
|
|
128
|
+
--tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
|
|
129
|
+
--tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
|
|
130
|
+
--tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
|
|
131
|
+
--tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
|
|
132
|
+
--tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
|
|
133
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
2
|
+
|
|
3
|
+
.tui-theme-variables() {
|
|
4
|
+
// Fonts
|
|
5
|
+
--tui-font-heading: 'Manrope', @font-fallback;
|
|
6
|
+
--tui-font-text: 'Manrope', @font-fallback;
|
|
7
|
+
--tui-font-offset: ~'0rem';
|
|
8
|
+
// Heading
|
|
9
|
+
--tui-font-heading-1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-heading);
|
|
10
|
+
--tui-font-heading-2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-heading);
|
|
11
|
+
--tui-font-heading-3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-heading);
|
|
12
|
+
--tui-font-heading-4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-heading);
|
|
13
|
+
--tui-font-heading-5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-heading);
|
|
14
|
+
--tui-font-heading-6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-heading);
|
|
15
|
+
// Body
|
|
16
|
+
--tui-font-text-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / calc(28 / 19) var(--tui-font-text);
|
|
17
|
+
--tui-font-text-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-text);
|
|
18
|
+
--tui-font-text-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-text);
|
|
19
|
+
--tui-font-text-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-text);
|
|
20
|
+
--tui-font-text-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-text);
|
|
21
|
+
// Reduced
|
|
22
|
+
--tui-font-text-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-text);
|
|
23
|
+
--tui-font-text-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-text);
|
|
24
|
+
--tui-font-text-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-text);
|
|
25
|
+
--tui-font-text-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-text);
|
|
26
|
+
// Radii
|
|
27
|
+
--tui-radius-xs: 0.25rem;
|
|
28
|
+
--tui-radius-s: 0.5rem;
|
|
29
|
+
--tui-radius-m: 0.625rem;
|
|
30
|
+
--tui-radius-l: 0.75rem;
|
|
31
|
+
--tui-radius-xl: 1.5rem;
|
|
32
|
+
// Sizes
|
|
33
|
+
--tui-height-xs: 1.5rem;
|
|
34
|
+
--tui-height-s: 2rem;
|
|
35
|
+
--tui-height-m: 2.75rem;
|
|
36
|
+
--tui-height-l: 3.5rem;
|
|
37
|
+
// Input padding
|
|
38
|
+
--tui-padding-s: 0.625rem;
|
|
39
|
+
--tui-padding-m: 0.75rem;
|
|
40
|
+
--tui-padding-l: 1rem;
|
|
41
|
+
// Misc
|
|
42
|
+
--tui-duration: 0.3s;
|
|
43
|
+
--tui-disabled-opacity: 0.56;
|
|
44
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
@import 'theme/variables.less';
|
|
2
|
+
@import 'theme/palette.less';
|
|
3
|
+
|
|
4
|
+
// Scoped counterpart of `taiga-ui-theme.less`. Call it inside your own selector to keep
|
|
5
|
+
// the theme out of `:root` / `:host`, e.g. when several micro frontends share a page:
|
|
6
|
+
//
|
|
7
|
+
// [my-app] {
|
|
8
|
+
// .taiga-ui-theme();
|
|
9
|
+
// }
|
|
10
|
+
.taiga-ui-theme() {
|
|
11
|
+
.tui-theme-variables();
|
|
12
|
+
|
|
13
|
+
@media screen {
|
|
14
|
+
&[tuiTheme='dark'],
|
|
15
|
+
& [tuiTheme='dark'] {
|
|
16
|
+
color-scheme: dark;
|
|
17
|
+
|
|
18
|
+
.tui-theme-dark();
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[tuiTheme='light'],
|
|
22
|
+
& [tuiTheme='light'] {
|
|
23
|
+
color-scheme: light;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&,
|
|
27
|
+
&[tuiTheme='light'],
|
|
28
|
+
& [tuiTheme='light'] {
|
|
29
|
+
.tui-theme-light();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media print {
|
|
34
|
+
&,
|
|
35
|
+
&[tuiTheme],
|
|
36
|
+
& [tuiTheme] {
|
|
37
|
+
color-scheme: light;
|
|
38
|
+
|
|
39
|
+
.tui-theme-light();
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@import '../theme/appearance.less';
|
|
44
|
+
@import '../theme/wrapper.less';
|
|
45
|
+
@import '../theme/appearance/textfield.less';
|
|
46
|
+
|
|
47
|
+
&[tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'] {
|
|
48
|
+
background-color: var(--tui-background-neutral-1);
|
|
49
|
+
|
|
50
|
+
.appearance-hover({
|
|
51
|
+
background-color: var(--tui-background-neutral-1-hover);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
.appearance-focus({
|
|
55
|
+
background-color: transparent !important;
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&[tuiTheme='dark'] [tuiAppearance][data-appearance='glass'] {
|
|
60
|
+
background: rgba(255, 255, 255, 0.3);
|
|
61
|
+
|
|
62
|
+
.appearance-hover({
|
|
63
|
+
background: rgba(255, 255, 255, 0.4);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
.appearance-active({
|
|
67
|
+
background: rgba(255, 255, 255, 0.5);
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* TODO: Drop in v.5
|
|
73
|
+
* @deprecated use appearance instead
|
|
74
|
+
*/
|
|
75
|
+
&[tuiTheme='dark'] [tuiWrapper][data-appearance='textfield'] {
|
|
76
|
+
background: var(--tui-background-neutral-1);
|
|
77
|
+
|
|
78
|
+
.wrapper-hover({
|
|
79
|
+
background: var(--tui-background-neutral-1-hover);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
.wrapper-focus({
|
|
83
|
+
background: transparent;
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}
|