@recursyve/nice-ui-kit.v2 13.1.0-beta.91 → 13.2.0-beta.101

package/lib/api/nice.api.d.ts

@@ -9,6 +9,7 @@ export interface HttpOptions {
     headers?: HttpHeaders | {
         [header: string]: string | string[];
     };
+    responseType?: "text" | "json" | "arraybuffer" | "blob";
     params?: HttpParams | {
         [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
     };

package/lib/components/alert/alert.component.d.ts

@@ -2,7 +2,7 @@ import { BooleanInput } from "@angular/cdk/coercion";
 import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
 import { NiceUtilsService } from "../../providers/utils";
 import { NiceAlertService } from "./alert.service";
-import { NiceAlertType, NiceAlertAppearance } from "./alert.types";
+import { NiceAlertType, NiceAlertAppearance, NiceAlertColor } from "./alert.types";
 import * as i0 from "@angular/core";
 export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy {
     private _changeDetectorRef;
@@ -19,6 +19,7 @@ export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy
     name: string;
     showIcon: boolean;
     type: NiceAlertType;
+    color?: NiceAlertColor;
     readonly dismissedChanged: EventEmitter<boolean>;
     private _unsubscribeAll;
     /**
@@ -59,5 +60,5 @@ export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy
      */
     private _toggleDismiss;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAlertComponent, "nice-alert", ["niceAlert"], { "appearance": "appearance"; "dismissed": "dismissed"; "dismissible": "dismissible"; "disableAnimation": "disableAnimation"; "name": "name"; "showIcon": "showIcon"; "type": "type"; }, { "dismissedChanged": "dismissedChanged"; }, never, ["[niceAlertIcon]", "[niceAlertTitle]", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAlertComponent, "nice-alert", ["niceAlert"], { "appearance": "appearance"; "dismissed": "dismissed"; "dismissible": "dismissible"; "disableAnimation": "disableAnimation"; "name": "name"; "showIcon": "showIcon"; "type": "type"; "color": "color"; }, { "dismissedChanged": "dismissedChanged"; }, never, ["[niceAlertIcon]", "[niceAlertTitle]", "*"]>;
 }

package/lib/components/alert/alert.types.d.ts

@@ -1,2 +1,3 @@
 export declare type NiceAlertAppearance = "border" | "fill" | "outline" | "soft";
 export declare type NiceAlertType = "primary" | "accent" | "warn" | "basic" | "info" | "success" | "warning" | "error";
+export declare type NiceAlertColor = "primary" | "accent" | "warn";

package/lib/components/async-typeahead/async-typeahead.component.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput } from "@angular/cdk/coercion";
-import { ChangeDetectorRef, DoCheck, ElementRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from "@angular/core";
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from "@angular/core";
 import { ControlValueAccessor, FormControl, FormGroupDirective, NgControl, NgForm } from "@angular/forms";
 import { MatAutocompleteActivatedEvent, MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
 import { ErrorStateMatcher, MatOption } from "@angular/material/core";
@@ -53,6 +53,7 @@ export declare class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComp
     emptyPlaceholder: string;
     optionTemplate: TemplateRef<HTMLElement>;
     filterFn: (value: any) => boolean | Promise<boolean> | Observable<boolean>;
+    selected: EventEmitter<any>;
     set labelFormatFn(labelFormatFn: (item: any) => string);
     private _labelFormatFn;
     /**
@@ -106,6 +107,6 @@ export declare class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComp
     private updateSearchInput;
     private checkIfValueStillExist;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAsyncTypeaheadComponent, [{ optional: true; self: true; }, { optional: true; }, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAsyncTypeaheadComponent, "nice-async-typeahead", never, { "resource": "resource"; "searchOptions": "searchOptions"; "preloadResource": "preloadResource"; "allowNotFoundItems": "allowNotFoundItems"; "panelClass": "panelClass"; "bindValue": "bindValue"; "bindLabel": "bindLabel"; "placeholder": "placeholder"; "emptyPlaceholder": "emptyPlaceholder"; "optionTemplate": "optionTemplate"; "filterFn": "filterFn"; "labelFormatFn": "labelFormatFn"; "disabled": "disabled"; "value": "value"; "required": "required"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAsyncTypeaheadComponent, "nice-async-typeahead", never, { "resource": "resource"; "searchOptions": "searchOptions"; "preloadResource": "preloadResource"; "allowNotFoundItems": "allowNotFoundItems"; "panelClass": "panelClass"; "bindValue": "bindValue"; "bindLabel": "bindLabel"; "placeholder": "placeholder"; "emptyPlaceholder": "emptyPlaceholder"; "optionTemplate": "optionTemplate"; "filterFn": "filterFn"; "labelFormatFn": "labelFormatFn"; "disabled": "disabled"; "value": "value"; "required": "required"; }, { "selected": "selected"; }, never, never>;
 }
 export {};

package/lib/components/base-form/base-form.component.d.ts

@@ -1,16 +1,17 @@
 import { EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { ControlValueAccessor, FormGroup } from "@angular/forms";
 import { GeneratedFormGroup } from "@recursyve/ngx-form-generator";
-import { Subscription } from "rxjs";
+import { Subject } from "rxjs";
 import * as i0 from "@angular/core";
 export declare abstract class NiceBaseFormComponent<Form> implements OnInit, OnDestroy, ControlValueAccessor {
     formGroup: GeneratedFormGroup<Form>;
     private stepper;
     loading: boolean;
     submit: EventEmitter<Form>;
-    protected valueChangeSub$: Subscription;
+    protected unsubscribeAll$: Subject<void>;
     private propagate;
-    protected constructor(formGroup: GeneratedFormGroup<Form>);
+    constructor(formGroup: GeneratedFormGroup<Form>);
+    onChange(event: KeyboardEvent): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: (form: Form) => void): void;

package/lib/components/form-error/control-status.directive.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ComponentFactoryResolver, ComponentRef, ElementRef, ViewContainerRef } from "@angular/core";
+import { AfterViewInit, ComponentRef, ElementRef, ViewContainerRef } from "@angular/core";
 import { NgControl } from "@angular/forms";
 import { MatFormField } from "@angular/material/form-field";
 import { TranslateService } from "@ngx-translate/core";
@@ -7,12 +7,11 @@ import * as i0 from "@angular/core";
 export declare class NiceControlStatusDirective implements AfterViewInit {
     private el;
     private vcr;
-    private resolver;
     private formField;
     private translateService;
     ref: ComponentRef<NiceFormErrorComponent>;
     control: NgControl;
-    constructor(el: ElementRef<HTMLElement>, vcr: ViewContainerRef, resolver: ComponentFactoryResolver, formField: MatFormField, translateService: TranslateService);
+    constructor(el: ElementRef<HTMLElement>, vcr: ViewContainerRef, formField: MatFormField, translateService: TranslateService);
     ngAfterViewInit(): void;
     onChange(): void;
     setError(text: string): void;

package/lib/components/navigation/vertical/vertical.component.d.ts

@@ -23,7 +23,6 @@ export declare class NiceVerticalNavigationComponent extends NiceNavigationCompo
     private _asideOverlay;
     private readonly _handleAsideOverlayClick;
     private readonly _handleOverlayClick;
-    private _hovered;
     private _overlay;
     private _player;
     private _scrollStrategy;
@@ -35,6 +34,7 @@ export declare class NiceVerticalNavigationComponent extends NiceNavigationCompo
     inner: boolean;
     mode: NiceVerticalNavigationMode;
     opened: boolean;
+    hovered: boolean;
     position: NiceVerticalNavigationPosition;
     transparentOverlay: boolean;
     readonly appearanceChanged: EventEmitter<NiceVerticalNavigationAppearance>;
@@ -153,5 +153,5 @@ export declare class NiceVerticalNavigationComponent extends NiceNavigationCompo
      */
     private _toggleOpened;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceVerticalNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceVerticalNavigationComponent, "nice-vertical-navigation", ["niceVerticalNavigation"], { "name": "name"; "appearance": "appearance"; "autoCollapse": "autoCollapse"; "inner": "inner"; "mode": "mode"; "opened": "opened"; "position": "position"; "transparentOverlay": "transparentOverlay"; "navigation": "navigation"; }, { "appearanceChanged": "appearanceChanged"; "modeChanged": "modeChanged"; "openedChanged": "openedChanged"; "positionChanged": "positionChanged"; }, never, ["[niceVerticalNavigationHeader]", "[niceVerticalNavigationContentHeader]", "[niceVerticalNavigationContentFooter]", "[niceVerticalNavigationFooter]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceVerticalNavigationComponent, "nice-vertical-navigation", ["niceVerticalNavigation"], { "name": "name"; "appearance": "appearance"; "autoCollapse": "autoCollapse"; "inner": "inner"; "mode": "mode"; "opened": "opened"; "hovered": "hovered"; "position": "position"; "transparentOverlay": "transparentOverlay"; "navigation": "navigation"; }, { "appearanceChanged": "appearanceChanged"; "modeChanged": "modeChanged"; "openedChanged": "openedChanged"; "positionChanged": "positionChanged"; }, never, ["[niceVerticalNavigationHeader]", "[niceVerticalNavigationContentHeader]", "[niceVerticalNavigationContentFooter]", "[niceVerticalNavigationFooter]"]>;
 }

package/lib/directives/chip-async-typeahead/chip-async-typeahead.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { NiceAsyncTypeaheadComponent } from "../../components";
+import * as i0 from "@angular/core";
+export declare class NiceChipAsyncTypeaheadDirective implements OnInit, OnDestroy {
+    private typeahead;
+    private elementRef;
+    niceChipAsyncTypeaheadTokenEnd: EventEmitter<any>;
+    private unsubscribeAll$;
+    constructor(typeahead: NiceAsyncTypeaheadComponent, elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipAsyncTypeaheadDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipAsyncTypeaheadDirective, "[niceChipAsyncTypeahead]", ["niceChipAsyncTypeahead"], {}, { "niceChipAsyncTypeaheadTokenEnd": "niceChipAsyncTypeaheadTokenEnd"; }, never>;
+}

package/lib/directives/chip-async-typeahead/index.d.ts

@@ -0,0 +1 @@
+export * from "./public-api";

package/lib/directives/chip-async-typeahead/public-api.d.ts

@@ -0,0 +1 @@
+export * from "./chip-async-typeahead.directive";

package/lib/directives/chip-list/chip-list-items/chip-list-item-label.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class ChipListItemLabelDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipListItemLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChipListItemLabelDirective, "[niceChipListItemLabel]", never, {}, {}, never>;
+}

package/lib/directives/chip-list/chip-list-items/chip-list-items.component.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter, TemplateRef } from "@angular/core";
+import { CanColor, ThemePalette } from "@angular/material/core";
+import { Observable } from "rxjs";
+import * as i0 from "@angular/core";
+export declare class NiceChipListItemsComponent implements CanColor {
+    itemLabel: TemplateRef<any>;
+    color: ThemePalette;
+    removeChip: EventEmitter<number>;
+    items$: Observable<any[]>;
+    defaultColor: ThemePalette;
+    remove(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListItemsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceChipListItemsComponent, "nice-chip-list-items", never, { "color": "color"; "items$": "items$"; }, { "removeChip": "removeChip"; }, ["itemLabel"], never>;
+}

package/lib/directives/chip-list/chip-list.directive.d.ts

@@ -0,0 +1,27 @@
+import { ElementRef, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { NiceAsyncTypeaheadComponent } from "../../components";
+import { NiceChipListItemsComponent } from "./chip-list-items/chip-list-items.component";
+import * as i0 from "@angular/core";
+export declare class NiceChipListDirective implements ControlValueAccessor, OnInit, OnChanges {
+    private asyncTypeahead;
+    private ngControl;
+    private elementRef;
+    withItemList: NiceChipListItemsComponent;
+    private unsubscribeAll$;
+    private values$;
+    private _values;
+    private propagateChanges;
+    get values(): any[];
+    constructor(asyncTypeahead: NiceAsyncTypeaheadComponent, ngControl: NgControl, elementRef: ElementRef<HTMLInputElement>);
+    onKeyDown(event: KeyboardEvent): void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    writeValue(obj: any[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    private setupAsyncTypeahead;
+    private addValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirective, [{ optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipListDirective, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": "withItemList"; }, {}, never>;
+}

package/lib/directives/chip-list/chip-list.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./chip-list.directive";
+import * as i2 from "./chip-list-items/chip-list-items.component";
+import * as i3 from "./chip-list-items/chip-list-item-label.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/icon";
+export declare class NiceChipListDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceChipListDirectiveModule, [typeof i1.NiceChipListDirective, typeof i2.NiceChipListItemsComponent, typeof i3.ChipListItemLabelDirective], [typeof i4.CommonModule, typeof i5.MatIconModule], [typeof i1.NiceChipListDirective, typeof i2.NiceChipListItemsComponent, typeof i3.ChipListItemLabelDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NiceChipListDirectiveModule>;
+}

package/lib/directives/chip-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./public-api";

package/lib/directives/chip-list/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from "./chip-list-items/chip-list-item-label.directive";
+export * from "./chip-list-items/chip-list-items.component";
+export * from "./chip-list.directive";
+export * from "./chip-list.module";

package/lib/directives/public-api.d.ts

@@ -1,5 +1,7 @@
 export * from "./autofocus";
 export * from "./autogrow";
+export * from "./chip-async-typeahead";
+export * from "./chip-list";
 export * from "./dropzone";
 export * from "./image-error-placeholder";
 export * from "./material";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.1.0-beta.91",
+  "version": "13.2.0-beta.101",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/chip-list/chip-list.theme.scss

@@ -0,0 +1,14 @@
+@use "../../nice.utils" as nice;
+@import "components/item-list/item-list.theme";
+
+@mixin nice-chip-list-theme($theme) {
+    @include nice-item-list-theme($theme);
+
+    nice-chip-list {
+        @apply w-full;
+
+        .nice-chip-row {
+            @apply gap-2;
+        }
+    }
+}

package/src/lib/components/chip-list/components/item-list/item-list.theme.scss

@@ -0,0 +1,37 @@
+@use "../../../../nice.utils" as nice;
+
+@mixin nice-item-list-theme($theme) {
+    mat-form-field {
+        nice-item-list {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-item-list {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/directives/chip-list/chip-list-items/chip-list-items.theme.scss

@@ -0,0 +1,35 @@
+@mixin nice-chip-list-items-theme($theme) {
+    mat-form-field {
+        nice-chip-list-items {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-chip-list-items {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/nice.theme.scss

@@ -13,6 +13,9 @@
 @import "./components/navigation/horizontal/horizontal.theme";
 @import "./components/navigation/vertical/vertical.theme";
 @import "./components/toggle-button-group/toggle-button-group.theme";
+@import "./components/chip-list/chip-list.theme";
+@import "./directives/chip-list/chip-list-items/chip-list-items.theme";
+
 @mixin nice-components-theme($theme) {
     @include nice-alert-theme($theme);
     @include nice-assets-carousel-theme($theme);
@@ -21,6 +24,8 @@
     @include nice-drawer-theme($theme);
     @include nice-horizontal-stepper-theme($theme);
     @include nice-toggle-button-group-theme($theme);
+    @include nice-chip-list-theme($theme);
+    @include nice-chip-list-items-theme($theme);
 }
 
 @mixin nice-custom-theme($theme) {

package/styles/tailwind.scss

@@ -1,94 +1,97 @@
+/* This injects Tailwind's base styles and any base styles registered by plugins. */
+@tailwind base;
+
 /* This injects additional styles into Tailwind's base styles layer. */
-@mixin tailwind() {
-    @layer base {
-
-        * {
-            /* Text rendering */
-            text-rendering: optimizeLegibility;
-            -o-text-rendering: optimizeLegibility;
-            -ms-text-rendering: optimizeLegibility;
-            -moz-text-rendering: optimizeLegibility;
-            -webkit-text-rendering: optimizeLegibility;
-            -webkit-tap-highlight-color: transparent;
-
-            /* Remove the focus ring */
-            &:focus {
-                outline: none !important;
-            }
+@layer base {
+
+    * {
+        /* Text rendering */
+        text-rendering: optimizeLegibility;
+        -o-text-rendering: optimizeLegibility;
+        -ms-text-rendering: optimizeLegibility;
+        -moz-text-rendering: optimizeLegibility;
+        -webkit-text-rendering: optimizeLegibility;
+        -webkit-tap-highlight-color: transparent;
+
+        /* Remove the focus ring */
+        &:focus {
+            outline: none !important;
         }
+    }
 
-        /* HTML and Body default styles */
-        html,
-        body {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            width: 100%;
-            min-height: 100%;
-            -webkit-font-smoothing: auto;
-            -moz-osx-font-smoothing: auto;
-        }
+    /* HTML and Body default styles */
+    html,
+    body {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        min-height: 100%;
+        -webkit-font-smoothing: auto;
+        -moz-osx-font-smoothing: auto;
+    }
 
-        /* Font size */
-        html {
-            font-size: 16px;
-        }
+    /* Font size */
+    html {
+        font-size: 16px;
+    }
 
-        body {
-            font-size: 0.875rem;
-        }
+    body {
+        font-size: 0.875rem;
+    }
 
-        /* Stylistic alternates for Inter */
-        body {
-            font-feature-settings: 'salt';
-        }
+    /* Stylistic alternates for Inter */
+    body {
+        font-feature-settings: 'salt';
+    }
 
-        /* Better spacing and border for horizontal rule */
-        hr {
-            margin: 32px 0;
-            border-bottom-width: 1px;
-        }
+    /* Better spacing and border for horizontal rule */
+    hr {
+        margin: 32px 0;
+        border-bottom-width: 1px;
+    }
 
-        /* Make images and videos to take up all the available space */
-        img {
-            width: 100%;
-            vertical-align: top;
-        }
+    /* Make images and videos to take up all the available space */
+    img {
+        width: 100%;
+        vertical-align: top;
+    }
 
-        /* Fix: Disabled placeholder color is too faded on Safari */
-        input[disabled] {
-            opacity: 1;
-            -webkit-text-fill-color: currentColor;
-        }
+    /* Fix: Disabled placeholder color is too faded on Safari */
+    input[disabled] {
+        opacity: 1;
+        -webkit-text-fill-color: currentColor;
+    }
 
-        body, .dark, .light {
-            @apply text-default bg-default #{'!important'};
-        }
+    body, .dark, .light {
+        @apply text-default bg-default #{'!important'};
+    }
 
-        *, *::before, *::after {
-            --tw-border-opacity: 1 !important;
-            border-color: rgba(var(--nice-border-rgb), var(--tw-border-opacity));
+    *, *::before, *::after {
+        --tw-border-opacity: 1 !important;
+        border-color: rgba(var(--nice-border-rgb), var(--tw-border-opacity));
 
-            .dark & {
-                --tw-border-opacity: 0.12 !important;
-            }
+        .dark & {
+            --tw-border-opacity: 0.12 !important;
         }
+    }
 
-        [disabled] * {
-            @apply text-disabled #{'!important'};
-        }
+    [disabled] * {
+        @apply text-disabled #{'!important'};
+    }
 
-        /* Print styles */
-        @media print {
+    /* Print styles */
+    @media print {
 
-            /* Make the base font size smaller for print so everything is scaled nicely */
-            html {
-                font-size: 12px !important;
-            }
+        /* Make the base font size smaller for print so everything is scaled nicely */
+        html {
+            font-size: 12px !important;
+        }
 
-            body, .dark, .light {
-                background: none !important;
-            }
+        body, .dark, .light {
+            background: none !important;
         }
     }
 }
+
+@tailwind components;

package/tailwind/plugins/theming.js

@@ -98,7 +98,7 @@ const theming = plugin.withOptions((options) => ({
         // @ Map variable colors
         // -----------------------------------------------------------------------------------------------------
         const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`,
+            themeName === 'default' ? 'body, .theme-default' : `body, .theme-${e(themeName)}`,
             _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
                     [
                         e(paletteName),

package/src/lib/nice.tailwind.scss

@@ -1,94 +0,0 @@
-/* This injects additional styles into Tailwind's base styles layer. */
-@mixin tailwind() {
-    @layer base {
-
-        * {
-            /* Text rendering */
-            text-rendering: optimizeLegibility;
-            -o-text-rendering: optimizeLegibility;
-            -ms-text-rendering: optimizeLegibility;
-            -moz-text-rendering: optimizeLegibility;
-            -webkit-text-rendering: optimizeLegibility;
-            -webkit-tap-highlight-color: transparent;
-
-            /* Remove the focus ring */
-            &:focus {
-                outline: none !important;
-            }
-        }
-
-        /* HTML and Body default styles */
-        html,
-        body {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            width: 100%;
-            min-height: 100%;
-            -webkit-font-smoothing: auto;
-            -moz-osx-font-smoothing: auto;
-        }
-
-        /* Font size */
-        html {
-            font-size: 16px;
-        }
-
-        body {
-            font-size: 0.875rem;
-        }
-
-        /* Stylistic alternates for Inter */
-        body {
-            font-feature-settings: 'salt';
-        }
-
-        /* Better spacing and border for horizontal rule */
-        hr {
-            margin: 32px 0;
-            border-bottom-width: 1px;
-        }
-
-        /* Make images and videos to take up all the available space */
-        img {
-            width: 100%;
-            vertical-align: top;
-        }
-
-        /* Fix: Disabled placeholder color is too faded on Safari */
-        input[disabled] {
-            opacity: 1;
-            -webkit-text-fill-color: currentColor;
-        }
-
-        body, .dark, .light {
-            @apply text-default bg-default #{'!important'};
-        }
-
-        *, *::before, *::after {
-            --tw-border-opacity: 1 !important;
-            border-color: rgba(var(--nice-border-rgb), var(--tw-border-opacity));
-
-            .dark & {
-                --tw-border-opacity: 0.12 !important;
-            }
-        }
-
-        [disabled] * {
-            @apply text-disabled #{'!important'};
-        }
-
-        /* Print styles */
-        @media print {
-
-            /* Make the base font size smaller for print so everything is scaled nicely */
-            html {
-                font-size: 12px !important;
-            }
-
-            body, .dark, .light {
-                background: none !important;
-            }
-        }
-    }
-}