@cuby-ui/core 0.0.259 → 0.0.261
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.
|
@@ -94,11 +94,11 @@ export class CuiButtonComponent {
|
|
|
94
94
|
return 'currentColor';
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius:8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px;border-radius:8px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px;border-radius:8px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px;border-radius:8px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
|
-
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-
|
|
101
|
+
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius:8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px;border-radius:8px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px;border-radius:8px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px;border-radius:8px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
102
102
|
}], propDecorators: { shape: [{
|
|
103
103
|
type: Input
|
|
104
104
|
}, {
|
|
@@ -234,11 +234,11 @@ class CuiButtonComponent {
|
|
|
234
234
|
return 'currentColor';
|
|
235
235
|
}
|
|
236
236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-
|
|
237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius:8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px;border-radius:8px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px;border-radius:8px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px;border-radius:8px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
238
238
|
}
|
|
239
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, decorators: [{
|
|
240
240
|
type: Component,
|
|
241
|
-
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-
|
|
241
|
+
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n class=\"c-content\"\n ><ng-content></ng-content></span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n [color]=\"iconColor\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-500);color:var(--cui-gray-0);border:1px solid var(--cui-violet-500)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-700);border-color:var(--cui-violet-700)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=vivid-success]{background:var(--cui-success);color:var(--cui-gray-0);border:1px solid var(--cui-success)}@media (hover: hover){:host[data-appearance=vivid-success]:hover{background:var(--cui-green-700);border-color:var(--cui-green-700)}}:host[data-appearance=vivid-success]:active{background:var(--cui-green-700);border-color:var(--cui-green-700)}:host[data-appearance=vivid-success]:disabled{background:var(--cui-success);border-color:var(--cui-success)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxxs]{font-size:12px;line-height:14px;height:24px;padding:0 4px;border-radius:6px}:host[data-size=xxxs][data-appearance=action],:host[data-size=xxxs][data-appearance=outlined],:host[data-size=xxxs][data-appearance=outlined-gray]{padding:0 3px}:host[data-size=xxxs]:has(.c-content:empty){width:24px}:host[data-size=xxxs] .c-wrapper{gap:6px}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px;border-radius:8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px;border-radius:8px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px;border-radius:8px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px;border-radius:8px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
242
242
|
}], propDecorators: { shape: [{
|
|
243
243
|
type: Input
|
|
244
244
|
}, {
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cuby-ui/core",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.261",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
7
|
"@angular/elements": ">=18.0.0",
|
|
8
8
|
"@angular/forms": ">=18.0.0",
|
|
9
|
-
"@cuby-ui/api": "^0.0.
|
|
10
|
-
"@cuby-ui/cdk": "^0.0.
|
|
11
|
-
"@cuby-ui/icons": "^0.0.
|
|
9
|
+
"@cuby-ui/api": "^0.0.261",
|
|
10
|
+
"@cuby-ui/cdk": "^0.0.261",
|
|
11
|
+
"@cuby-ui/icons": "^0.0.261",
|
|
12
12
|
"@editorjs/editorjs": "2.29.1",
|
|
13
13
|
"@editorjs/header": "^2.8.1",
|
|
14
14
|
"@editorjs/list": "^1.9.0",
|
package/styles/theme.scss
CHANGED
|
@@ -1,409 +1,409 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
2
|
+
--cui-main-font: Inter, sans-serif;
|
|
3
|
+
|
|
4
|
+
--cui-black: #000000;
|
|
5
|
+
|
|
6
|
+
--cui-gray-0: #FFFFFF;
|
|
7
|
+
--cui-gray-10: #F9FAFB;
|
|
8
|
+
--cui-gray-50: #EFF0F2;
|
|
9
|
+
--cui-gray-100: #E9EBEE;
|
|
10
|
+
--cui-gray-200: #DCDEE3;
|
|
11
|
+
--cui-gray-300: #AEB2BC;
|
|
12
|
+
--cui-gray-400: #7F8493;
|
|
13
|
+
--cui-gray-500: #595E6A;
|
|
14
|
+
--cui-gray-600: #474B55;
|
|
15
|
+
--cui-gray-700: #363840;
|
|
16
|
+
--cui-gray-800: #24262B;
|
|
17
|
+
--cui-gray-900: #121315;
|
|
18
|
+
|
|
19
|
+
--cui-slate-10: #F6FBFF;
|
|
20
|
+
--cui-slate-50: #E4ECF3;
|
|
21
|
+
--cui-slate-100: #D3DDE8;
|
|
22
|
+
--cui-slate-200: #C5D1DE;
|
|
23
|
+
--cui-slate-300: #ADBAC7;
|
|
24
|
+
--cui-slate-400: #717E8B;
|
|
25
|
+
--cui-slate-500: #444C56;
|
|
26
|
+
--cui-slate-600: #373E47;
|
|
27
|
+
--cui-slate-700: #2D333B;
|
|
28
|
+
--cui-slate-800: #22272E;
|
|
29
|
+
--cui-slate-900: #1C2128;
|
|
30
|
+
|
|
31
|
+
--cui-cyan-100: #F0F6F6;
|
|
32
|
+
--cui-cyan-200: #D6EAEA;
|
|
33
|
+
--cui-cyan-300: #BADCDC;
|
|
34
|
+
--cui-cyan-400: #98CBCA;
|
|
35
|
+
--cui-cyan-500: #53A8A7;
|
|
36
|
+
--cui-cyan-600: #319795;
|
|
37
|
+
--cui-cyan-700: #297F7E;
|
|
38
|
+
--cui-cyan-800: #1A6B6A;
|
|
39
|
+
--cui-cyan-900: #0D4949;
|
|
40
|
+
|
|
41
|
+
--cui-light-green-50: #F5FEF1;
|
|
42
|
+
--cui-light-green-100: #F0FEEA;
|
|
43
|
+
--cui-light-green-200: #E1FCD3;
|
|
44
|
+
--cui-light-green-300: #9EF572;
|
|
45
|
+
--cui-light-green-400: #8EDD67;
|
|
46
|
+
--cui-light-green-500: #7EC45B;
|
|
47
|
+
--cui-light-green-600: #77B856;
|
|
48
|
+
--cui-light-green-700: #5F9344;
|
|
49
|
+
--cui-light-green-800: #476E33;
|
|
50
|
+
--cui-light-green-900: #375628;
|
|
51
|
+
|
|
52
|
+
--cui-green-50: #ECFFF3;
|
|
53
|
+
--cui-green-100: #C1FFDA;
|
|
54
|
+
--cui-green-200: #97FFC0;
|
|
55
|
+
--cui-green-300: #6DFFA7;
|
|
56
|
+
--cui-green-400: #3EEE84;
|
|
57
|
+
--cui-green-500: #29CC6A;
|
|
58
|
+
--cui-green-600: #17C174;
|
|
59
|
+
--cui-green-700: #039855;
|
|
60
|
+
--cui-green-800: #006F3D;
|
|
61
|
+
--cui-green-900: #004627;
|
|
62
|
+
|
|
63
|
+
--cui-yellow-50: #FFFAEB;
|
|
64
|
+
--cui-yellow-100: #FFE6B7;
|
|
65
|
+
--cui-yellow-200: #FFD892;
|
|
66
|
+
--cui-yellow-300: #FFC354;
|
|
67
|
+
--cui-yellow-400: #FDB022;
|
|
68
|
+
--cui-yellow-500: #DB9411;
|
|
69
|
+
--cui-yellow-600: #B97904;
|
|
70
|
+
--cui-yellow-700: #976200;
|
|
71
|
+
--cui-yellow-800: #754C00;
|
|
72
|
+
--cui-yellow-900: #533600;
|
|
73
|
+
|
|
74
|
+
--cui-orange-50: #FFF4EE;
|
|
75
|
+
--cui-orange-100: #FFEBDD;
|
|
76
|
+
--cui-orange-200: #FFE0CF;
|
|
77
|
+
--cui-orange-300: #FFD7BA;
|
|
78
|
+
--cui-orange-400: #FFBC8B;
|
|
79
|
+
--cui-orange-500: #FFA05C;
|
|
80
|
+
--cui-orange-600: #FF852C;
|
|
81
|
+
--cui-orange-700: #B75119;
|
|
82
|
+
--cui-orange-800: #8E3605;
|
|
83
|
+
--cui-orange-900: #652400;
|
|
84
|
+
|
|
85
|
+
--cui-red-50: #FFEEEE;
|
|
86
|
+
--cui-red-100: #FFC8C8;
|
|
87
|
+
--cui-red-200: #FFA2A2;
|
|
88
|
+
--cui-red-300: #FF7C7C;
|
|
89
|
+
--cui-red-400: #FC5555;
|
|
90
|
+
--cui-red-500: #D92D20;
|
|
91
|
+
--cui-red-600: #B82E2E;
|
|
92
|
+
--cui-red-700: #961F1F;
|
|
93
|
+
--cui-red-800: #741313;
|
|
94
|
+
--cui-red-900: #520909;
|
|
95
|
+
|
|
96
|
+
--cui-light-blue-50: #F0F9FF;
|
|
97
|
+
--cui-light-blue-100: #E5F5FF;
|
|
98
|
+
--cui-light-blue-200: #C4E7FF;
|
|
99
|
+
--cui-light-blue-300: #98D6FF;
|
|
100
|
+
--cui-light-blue-400: #6DC4FF;
|
|
101
|
+
--cui-light-blue-500: #2EABFF;
|
|
102
|
+
--cui-light-blue-600: #0099FF;
|
|
103
|
+
--cui-light-blue-700: #0068AD;
|
|
104
|
+
--cui-light-blue-800: #005085;
|
|
105
|
+
--cui-light-blue-900: #00375C;
|
|
106
|
+
|
|
107
|
+
--cui-blue-50: #F0F7FF;
|
|
108
|
+
--cui-blue-100: #E8F1FF;
|
|
109
|
+
--cui-blue-200: #BED9FF;
|
|
110
|
+
--cui-blue-300: #94C0FF;
|
|
111
|
+
--cui-blue-400: #4190FF;
|
|
112
|
+
--cui-blue-500: #4190FF;
|
|
113
|
+
--cui-blue-600: #1570EF;
|
|
114
|
+
--cui-blue-700: #0354C6;
|
|
115
|
+
--cui-blue-800: #00429D;
|
|
116
|
+
--cui-blue-900: #002B67;
|
|
117
|
+
|
|
118
|
+
--cui-magenta-50: #FFE5FF;
|
|
119
|
+
--cui-magenta-100: #FFE5FF;
|
|
120
|
+
--cui-magenta-200: #F38DE2;
|
|
121
|
+
--cui-magenta-300: #EC5FD6;
|
|
122
|
+
--cui-magenta-400: #E633C9;
|
|
123
|
+
--cui-magenta-500: #CC19B0;
|
|
124
|
+
--cui-magenta-600: #A0128A;
|
|
125
|
+
--cui-magenta-700: #720A63;
|
|
126
|
+
--cui-magenta-800: #46033D;
|
|
127
|
+
--cui-magenta-900: #1C0018;
|
|
128
|
+
|
|
129
|
+
--cui-lavender-50: #F7F0FB;
|
|
130
|
+
--cui-lavender-100: #F3E8F9;
|
|
131
|
+
--cui-lavender-200: #E6CFF3;
|
|
132
|
+
--cui-lavender-300: #C47EEE;
|
|
133
|
+
--cui-lavender-400: #9E5BC3;
|
|
134
|
+
--cui-lavender-500: #8C51AE;
|
|
135
|
+
--cui-lavender-600: #834CA3;
|
|
136
|
+
--cui-lavender-700: #693D82;
|
|
137
|
+
--cui-lavender-800: #4F2D62;
|
|
138
|
+
--cui-lavender-900: #3D234C;
|
|
139
|
+
|
|
140
|
+
--cui-violet-50: #F2EFFF;
|
|
141
|
+
--cui-violet-100: #D4CBFF;
|
|
142
|
+
--cui-violet-200: #B6A8FF;
|
|
143
|
+
--cui-violet-300: #9984FF;
|
|
144
|
+
--cui-violet-400: #7B61FF;
|
|
145
|
+
--cui-violet-500: #634BDD;
|
|
146
|
+
--cui-violet-600: #4D38BB;
|
|
147
|
+
--cui-violet-700: #3A2799;
|
|
148
|
+
--cui-violet-800: #291A77;
|
|
149
|
+
--cui-violet-900: #1A0F55;
|
|
150
|
+
|
|
151
|
+
--cui-purple-50: #F4F2FF;
|
|
152
|
+
--cui-purple-100: #D4CDFF;
|
|
153
|
+
--cui-purple-200: #B4A7FF;
|
|
154
|
+
--cui-purple-300: #9382FF;
|
|
155
|
+
--cui-purple-400: #806FEA;
|
|
156
|
+
--cui-purple-500: #6A5ACD;
|
|
157
|
+
--cui-purple-600: #5647B0;
|
|
158
|
+
--cui-purple-700: #433693;
|
|
159
|
+
--cui-purple-800: #322776;
|
|
160
|
+
--cui-purple-900: #231A58;
|
|
161
|
+
|
|
162
|
+
--cui-base: var(--cui-black);
|
|
163
|
+
--cui-base-0: var(--cui-gray-0);
|
|
164
|
+
--cui-base-10: var(--cui-gray-10);
|
|
165
|
+
--cui-base-50: var(--cui-gray-50);
|
|
166
|
+
--cui-base-100: var(--cui-gray-100);
|
|
167
|
+
--cui-base-200: var(--cui-gray-200);
|
|
168
|
+
--cui-base-300: var(--cui-gray-300);
|
|
169
|
+
--cui-base-400: var(--cui-gray-400);
|
|
170
|
+
--cui-base-500: var(--cui-gray-500);
|
|
171
|
+
--cui-base-900: var(--cui-gray-900);
|
|
172
|
+
|
|
173
|
+
--cui-success: var(--cui-green-600);
|
|
174
|
+
|
|
175
|
+
--cui-warning: var(--cui-yellow-400);
|
|
176
|
+
|
|
177
|
+
--cui-danger: var(--cui-red-500);
|
|
178
|
+
|
|
179
|
+
--cui-info: var(--cui-blue-600);
|
|
180
|
+
|
|
181
|
+
--cui-accent-1: var(--cui-cyan-800);
|
|
182
|
+
|
|
183
|
+
--cui-accent-2: var(--cui-light-blue-600);
|
|
184
|
+
|
|
185
|
+
--cui-accent-3: var(--cui-purple-500);
|
|
186
|
+
|
|
187
|
+
--cui-accent-4: var(--cui-orange-600);
|
|
188
|
+
|
|
189
|
+
--cui-focus: var(--cui-blue-100);
|
|
190
|
+
|
|
191
|
+
--cui-input: var(--cui-gray-10);
|
|
192
|
+
|
|
193
|
+
--cui-bg-light: var(--cui-gray-0);
|
|
194
|
+
|
|
195
|
+
--cui-bg-light-blue: var(--cui-light-blue-500);
|
|
196
|
+
|
|
197
|
+
--cui-bg-light-blue-1: var(--cui-light-blue-50);
|
|
198
|
+
|
|
199
|
+
--cui-label-text: var(--cui-gray-500);
|
|
200
|
+
|
|
201
|
+
--cui-sidebar: var(--cui-gray-50);
|
|
202
202
|
|
|
203
|
-
|
|
203
|
+
--cui-scrollbar: var(--cui-gray-200);
|
|
204
204
|
|
|
205
|
-
|
|
205
|
+
--cui-track: var(--cui-gray-10);
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
--cui-btn-bg: var(--cui-light-blue-500);
|
|
208
208
|
|
|
209
|
-
|
|
210
|
-
|
|
209
|
+
--cui-badge-info-bg: var(--cui-blue-50);
|
|
210
|
+
--cui-badge-info-label: var(--cui-gray-900);
|
|
211
211
|
|
|
212
|
-
|
|
213
|
-
|
|
212
|
+
--cui-badge-danger-bg: var(--cui-red-50);
|
|
213
|
+
--cui-badge-danger-label: var(--cui-gray-900);
|
|
214
214
|
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
--cui-badge-success-bg: var(--cui-green-50);
|
|
216
|
+
--cui-badge-success-label: var(--cui-gray-900);
|
|
217
217
|
|
|
218
|
-
|
|
219
|
-
|
|
218
|
+
--cui-badge-warning-bg: var(--cui-yellow-50);
|
|
219
|
+
--cui-badge-warning-label: var(--cui-gray-900);
|
|
220
220
|
|
|
221
|
-
|
|
222
|
-
|
|
221
|
+
--cui-badge-gray-bg: var(--cui-gray-100);
|
|
222
|
+
--cui-badge-gray-label: var(--cui-gray-900);
|
|
223
223
|
|
|
224
|
-
|
|
225
|
-
|
|
224
|
+
--cui-badge-light-blue-bg: var(--cui-light-blue-50);
|
|
225
|
+
--cui-badge-light-blue-label: var(--cui-gray-900);
|
|
226
226
|
|
|
227
|
-
|
|
228
|
-
|
|
227
|
+
--cui-badge-magenta-bg: var(--cui-magenta-50);
|
|
228
|
+
--cui-badge-magenta-label: var(--cui-gray-900);
|
|
229
229
|
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
--cui-badge-violet-bg: var(--cui-violet-50);
|
|
231
|
+
--cui-badge-violet-label: var(--cui-gray-900);
|
|
232
232
|
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
--cui-badge-orange-bg: var(--cui-orange-50);
|
|
234
|
+
--cui-badge-orange-label: var(--cui-gray-900);
|
|
235
235
|
|
|
236
|
-
|
|
237
|
-
|
|
236
|
+
--cui-badge-blue-border: var(--cui-blue-200);
|
|
237
|
+
--cui-badge-blue-bg: var(--cui-blue-50);
|
|
238
238
|
|
|
239
|
-
|
|
240
|
-
|
|
239
|
+
--cui-badge-purple-border: var(--cui-purple-100);
|
|
240
|
+
--cui-badge-purple-bg: var(--cui-purple-50);
|
|
241
241
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
242
|
+
--cui-banner-alert-bg: var(--cui-yellow-100);
|
|
243
|
+
--cui-banner-alert-text: var(--cui-orange-800);
|
|
244
|
+
--cui-banner-alert-icon: var(--cui-orange-800);
|
|
245
|
+
--cui-banner-alert-link: var(--cui-blue-600);
|
|
246
246
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
247
|
+
--cui-banner-info-bg: var(--cui-blue-50);
|
|
248
|
+
--cui-banner-info-text: var(--cui-light-blue-800);
|
|
249
|
+
--cui-banner-info-icon: var(--cui-light-blue-800);
|
|
250
250
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
251
|
+
--cui-banner-danger-bg: var(--cui-red-50);
|
|
252
|
+
--cui-banner-danger-text: var(--cui-gray-900);
|
|
253
|
+
--cui-banner-danger-icon: var(--cui-red-500);
|
|
254
|
+
--cui-banner-danger-link: var(--cui-blue-600);
|
|
255
255
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
256
|
+
--cui-banner-success-bg: var(--cui-green-50);
|
|
257
|
+
--cui-banner-success-text: var(--cui-gray-900);
|
|
258
|
+
--cui-banner-success-icon: var(--cui-green-600);
|
|
259
|
+
--cui-banner-success-link: var(--cui-blue-600);
|
|
260
260
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
261
|
+
--cui-toast-alert-bg: var(--cui-gray-800);
|
|
262
|
+
--cui-toast-alert-text: var(--cui-gray-0);
|
|
263
|
+
--cui-toast-alert-icon: var(--cui-yellow-400);
|
|
264
264
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
265
|
+
--cui-toast-info-bg: var(--cui-gray-800);
|
|
266
|
+
--cui-toast-info-text: var(--cui-gray-0);
|
|
267
|
+
--cui-toast-info-icon: var(--cui-blue-600);
|
|
268
268
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
269
|
+
--cui-toast-danger-bg: var(--cui-gray-800);
|
|
270
|
+
--cui-toast-danger-text: var(--cui-gray-0);
|
|
271
|
+
--cui-toast-danger-icon: var(--cui-red-500);
|
|
272
272
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
273
|
+
--cui-toast-success-bg: var(--cui-gray-800);
|
|
274
|
+
--cui-toast-success-text: var(--cui-gray-0);
|
|
275
|
+
--cui-toast-success-icon: var(--cui-green-600);
|
|
276
276
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
277
|
+
--cui-cyan-bg: var(--cui-cyan-600);
|
|
278
|
+
--cui-yellow-bg: var(--cui-yellow-400);
|
|
279
|
+
--cui-lavender-bg: var(--cui-lavender-50);
|
|
280
|
+
--cui-violet-bg: var(--cui-violet-400);
|
|
281
281
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
282
|
+
// TODO: Добавить для всех кнопок и свойств их
|
|
283
|
+
--c-action-background: var(--cui-bg-light-blue);
|
|
284
|
+
--c-action-background-hover: var(--cui-light-blue-600);
|
|
285
|
+
--c-action-border-color: var(--cui-light-blue-500);
|
|
286
286
|
|
|
287
|
-
|
|
287
|
+
--c-outlined-gray-color: var(--cui-base-900);
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
[cuiTheme='dark'] {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
291
|
+
--cui-base-0: var(--cui-slate-900);
|
|
292
|
+
--cui-base-10: var(--cui-slate-800);
|
|
293
|
+
--cui-base-50: var(--cui-slate-700);
|
|
294
|
+
--cui-base-100: var(--cui-slate-600);
|
|
295
|
+
--cui-base-200: var(--cui-slate-500);
|
|
296
|
+
--cui-base-300: var(--cui-gray-400);
|
|
297
|
+
--cui-base-400: var(--cui-slate-400);
|
|
298
|
+
--cui-base-500: var(--cui-slate-300);
|
|
299
|
+
--cui-base-900: var(--cui-slate-200);
|
|
300
300
|
|
|
301
|
-
|
|
301
|
+
--cui-success: var(--cui-green-500);
|
|
302
302
|
|
|
303
|
-
|
|
303
|
+
--cui-warning: var(--cui-yellow-300);
|
|
304
304
|
|
|
305
|
-
|
|
305
|
+
--cui-danger: var(--cui-red-400);
|
|
306
306
|
|
|
307
|
-
|
|
307
|
+
--cui-info: var(--cui-blue-500);
|
|
308
308
|
|
|
309
|
-
|
|
309
|
+
--cui-accent-1: var(--cui-cyan-700);
|
|
310
310
|
|
|
311
|
-
|
|
311
|
+
--cui-accent-2: var(--cui-light-blue-600);
|
|
312
312
|
|
|
313
|
-
|
|
313
|
+
--cui-accent-3: var(--cui-purple-400);
|
|
314
314
|
|
|
315
|
-
|
|
315
|
+
--cui-accent-4: var(--cui-orange-500);
|
|
316
316
|
|
|
317
|
-
|
|
317
|
+
--cui-focus: var(--cui-light-blue-700);
|
|
318
318
|
|
|
319
|
-
|
|
319
|
+
--cui-input: var(--cui-slate-700);
|
|
320
320
|
|
|
321
|
-
|
|
321
|
+
--cui-bg-light: var(--cui-slate-700);
|
|
322
322
|
|
|
323
|
-
|
|
323
|
+
--cui-bg-light-blue: var(--cui-light-blue-700);
|
|
324
324
|
|
|
325
|
-
|
|
325
|
+
--cui-bg-light-blue-1: var(--cui-light-blue-800);
|
|
326
326
|
|
|
327
|
-
|
|
327
|
+
--cui-label-text: var(--cui-gray-0);
|
|
328
328
|
|
|
329
|
-
|
|
329
|
+
--cui-sidebar: var(--cui-slate-800);
|
|
330
330
|
|
|
331
|
-
|
|
331
|
+
--cui-scrollbar: var(--cui-gray-500);
|
|
332
332
|
|
|
333
|
-
|
|
333
|
+
--cui-track: var(--cui-slate-700);
|
|
334
334
|
|
|
335
|
-
|
|
335
|
+
--cui-btn-bg: var(--cui-light-blue-700);
|
|
336
336
|
|
|
337
|
-
|
|
338
|
-
|
|
337
|
+
--cui-badge-info-bg: var(--cui-blue-900);
|
|
338
|
+
--cui-badge-info-label: var(--cui-light-blue-600);
|
|
339
339
|
|
|
340
|
-
|
|
341
|
-
|
|
340
|
+
--cui-badge-danger-bg: var(--cui-red-900);
|
|
341
|
+
--cui-badge-danger-label: var(--cui-red-400);
|
|
342
342
|
|
|
343
|
-
|
|
344
|
-
|
|
343
|
+
--cui-badge-success-bg: var(--cui-green-900);
|
|
344
|
+
--cui-badge-success-label: var(--cui-green-600);
|
|
345
345
|
|
|
346
|
-
|
|
347
|
-
|
|
346
|
+
--cui-badge-warning-bg: var(--cui-yellow-900);
|
|
347
|
+
--cui-badge-warning-label: var(--cui-yellow-400);
|
|
348
348
|
|
|
349
|
-
|
|
350
|
-
|
|
349
|
+
--cui-badge-gray-bg: var(--cui-gray-600);
|
|
350
|
+
--cui-badge-gray-label: var(--cui-gray-0);
|
|
351
351
|
|
|
352
|
-
|
|
353
|
-
|
|
352
|
+
--cui-badge-light-blue-bg: var(--cui-light-blue-900);
|
|
353
|
+
--cui-badge-light-blue-label: var(--cui-light-blue-600);
|
|
354
354
|
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
--cui-badge-magenta-bg: var(--cui-magenta-900);
|
|
356
|
+
--cui-badge-magenta-label: var(--cui-magenta-500);
|
|
357
357
|
|
|
358
|
-
|
|
359
|
-
|
|
358
|
+
--cui-badge-violet-bg: var(--cui-violet-900);
|
|
359
|
+
--cui-badge-violet-label: var(--cui-violet-400);
|
|
360
360
|
|
|
361
|
-
|
|
362
|
-
|
|
361
|
+
--cui-badge-orange-bg: var(--cui-orange-900);
|
|
362
|
+
--cui-badge-orange-label: var(--cui-orange-600);
|
|
363
363
|
|
|
364
|
-
|
|
365
|
-
|
|
364
|
+
--cui-badge-blue-border: var(--cui-blue-800);
|
|
365
|
+
--cui-badge-blue-bg: var(--cui-blue-900);
|
|
366
366
|
|
|
367
|
-
|
|
368
|
-
|
|
367
|
+
--cui-badge-purple-border: var(--cui-purple-800);
|
|
368
|
+
--cui-badge-purple-bg: var(--cui-purple-900);
|
|
369
369
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
370
|
+
--cui-banner-alert-bg: var(--cui-yellow-900);
|
|
371
|
+
--cui-banner-alert-text: var(--cui-gray-0);
|
|
372
|
+
--cui-banner-alert-icon: var(--cui-yellow-300);
|
|
373
|
+
--cui-banner-alert-link: var(--cui-yellow-300);
|
|
374
374
|
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
375
|
+
--cui-banner-info-bg: var(--cui-blue-900);
|
|
376
|
+
--cui-banner-info-text: var(--cui-light-blue-400);
|
|
377
|
+
--cui-banner-info-icon: var(--cui-light-blue-400);
|
|
378
378
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
379
|
+
--cui-banner-danger-bg: var(--cui-red-900);
|
|
380
|
+
--cui-banner-danger-text: var(--cui-gray-0);
|
|
381
|
+
--cui-banner-danger-icon: var(--cui-red-400);
|
|
382
|
+
--cui-banner-danger-link: var(--cui-red-400);
|
|
383
383
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
384
|
+
--cui-banner-success-bg: var(--cui-green-900);
|
|
385
|
+
--cui-banner-success-text: var(--cui-gray-0);
|
|
386
|
+
--cui-banner-success-icon: var(--cui-green-500);
|
|
387
|
+
--cui-banner-success-link: var(--cui-green-500);
|
|
388
388
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
389
|
+
--cui-toast-alert-bg: var(--cui-yellow-900);
|
|
390
|
+
--cui-toast-alert-text: var(--cui-gray-0);
|
|
391
|
+
--cui-toast-alert-icon: var(--cui-yellow-300);
|
|
392
392
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
393
|
+
--cui-toast-info-bg: var(--cui-blue-900);
|
|
394
|
+
--cui-toast-info-text: var(--cui-gray-0);
|
|
395
|
+
--cui-toast-info-icon: var(--cui-light-blue-400);
|
|
396
396
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
397
|
+
--cui-toast-danger-bg: var(--cui-red-900);
|
|
398
|
+
--cui-toast-danger-text: var(--cui-gray-0);
|
|
399
|
+
--cui-toast-danger-icon: var(--cui-red-400);
|
|
400
400
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
401
|
+
--cui-toast-success-bg: var(--cui-green-900);
|
|
402
|
+
--cui-toast-success-text: var(--cui-gray-0);
|
|
403
|
+
--cui-toast-success-icon: var(--cui-green-500);
|
|
404
404
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
405
|
+
--cui-cyan-bg: var(--cui-cyan-800);
|
|
406
|
+
--cui-yellow-bg: var(--cui-yellow-600);
|
|
407
|
+
--cui-lavender-bg: var(--cui-lavender-900);
|
|
408
|
+
--cui-violet-bg: var(-cui-violet-600);
|
|
409
409
|
}
|