tuix-webcomponents 0.67.0 → 0.69.0

package/README.md

@@ -12,8 +12,8 @@ npm i tuix-webcomponents
 
 ### Webbundle version
 
-Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-98735ca@0.67.0.js  
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-98735ca@0.67.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-d19e71d@0.69.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-d19e71d@0.69.0.css
 
 ### React .tsx with SSR
 

package/dist/src/index.d.ts

@@ -0,0 +1,36 @@
+export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
+export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
+export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
+export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
+export { TuixText } from './tuix-text/TuixText.js';
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
+export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
+export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
+export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TuixTable } from './tuix-table/TuixTable.js';
+export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export { TuixToast } from './tuix-toast/TuixToast.js';
+export { TuixModal } from './tuix-modal/TuixModal.js';
+export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
+export { ScreenSizes } from './utils/screenSizes.enum.js';
+export declare function loadFonts(): void;

package/dist/src/index.js

@@ -0,0 +1,42 @@
+export { TuixText } from './tuix-text/TuixText.js';
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
+export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
+export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
+export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TuixTable } from './tuix-table/TuixTable.js';
+export { TuixToast } from './tuix-toast/TuixToast.js';
+export { TuixModal } from './tuix-modal/TuixModal.js';
+export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
+export { ScreenSizes } from './utils/screenSizes.enum.js';
+export function loadFonts() {
+    const link1 = document.createElement('link');
+    link1.rel = 'preconnect';
+    link1.href = 'https://fonts.googleapis.com';
+    const link2 = document.createElement('link');
+    link2.rel = 'preconnect';
+    link2.href = 'https://fonts.gstatic.com';
+    const link3 = document.createElement('link');
+    link3.rel = 'stylesheet';
+    link3.href =
+        'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
+    document.head.appendChild(link1);
+    document.head.appendChild(link2);
+    document.head.appendChild(link3);
+}

package/dist/src/tuix-button/TuixBaseButton.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import '../tuix-icon/TuixIcon.js';
+export declare abstract class TuixBaseButton extends LitElement {
+    variant: MainVariant;
+    disabled: boolean;
+    dark: boolean;
+    protected iconColor: string;
+    updated(): void;
+    protected _getTextColor(): string;
+    protected abstract _updateIconColor(): void;
+    protected _handleClick(): void;
+    protected _iconTemplate(iconName: IconName, iconSize: IconSizeVariant): TemplateResult;
+    protected abstract _buttonContent(): TemplateResult;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-button/TuixBaseButton.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { property, state } from 'lit/decorators.js';
+import { buttonTextColor } from './enums/tuix-button.enums';
+import '../tuix-icon/TuixIcon.js';
+export class TuixBaseButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = MainVariant.PRIMARY;
+        this.disabled = false;
+        this.dark = false;
+        this.iconColor = '';
+    }
+    updated() {
+        this._updateIconColor();
+    }
+    _getTextColor() {
+        const element = this.shadowRoot?.querySelector('.button');
+        if (!element)
+            return buttonTextColor[this.variant];
+        const computedStyle = getComputedStyle(element);
+        return computedStyle.color;
+    }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));
+    }
+    _iconTemplate(iconName, iconSize) {
+        this._updateIconColor();
+        return html `<tuix-icon
+      size="${iconSize}"
+      name="${iconName}"
+      color="${this.iconColor}"
+    ></tuix-icon>`;
+    }
+    render() {
+        return html `<button
+      @click=${this._handleClick}
+      @mouseenter=${this._updateIconColor}
+      @mouseleave=${this._updateIconColor}
+      @blur=${this._updateIconColor}
+      ?disabled="${this.disabled}"
+      class="button"
+    >
+      ${this._buttonContent()}
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: MainVariant, reflect: true })
+], TuixBaseButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "dark", void 0);
+__decorate([
+    state()
+], TuixBaseButton.prototype, "iconColor", void 0);

package/dist/src/tuix-button/TuixButton.d.ts

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { TuixBaseButton } from './TuixBaseButton';
+export declare class TuixButton extends TuixBaseButton {
+    static styles: import("lit").CSSResult[];
+    full: boolean;
+    iconRight?: IconName;
+    iconLeft?: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
+}

package/dist/src/tuix-button/TuixButton.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
+import { customElement, property } from 'lit/decorators.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { TuixBaseButton } from './TuixBaseButton';
+let TuixButton = class TuixButton extends TuixBaseButton {
+    constructor() {
+        super(...arguments);
+        this.full = false;
+    }
+    static { this.styles = [
+        css `
+      :host([full]) .button {
+        width: 100%;
+      }
+      .button {
+        padding: 16px 32px;
+        border-radius: 4px;
+        border: none;
+        font-family: 'Rubik', sans-serif;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+        .button {
+          padding: 14px 32px;
+        }
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .button {
+          padding: 12px 24px;
+        }
+      }
+
+      .container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .container {
+          gap: 6px;
+        }
+      }
+    `,
+        hostButtonStyles,
+        buttonColorStyles,
+        buttonSizeStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixButton.prototype, "full", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconLeft", void 0);
+TuixButton = __decorate([
+    customElement('tuix-button')
+], TuixButton);
+export { TuixButton };

package/dist/src/tuix-button/TuixButton.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const hostButtonStyles: import("lit").CSSResult;
+export declare const buttonSizeStyles: import("lit").CSSResult;
+export declare const buttonColorStyles: import("lit").CSSResult;

package/dist/src/tuix-button/TuixButton.styles.js

@@ -0,0 +1,107 @@
+import { css, unsafeCSS } from 'lit';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { DarkPalette } from '../utils/darkColors';
+import { MainVariant } from '../utils/mainVariant.enum';
+import slottedClassName from '../utils/slottedClassName';
+import { TextSize } from '../tuix-text/enums/tuix-text.enums';
+export const hostButtonStyles = css `
+  :host {
+    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};
+    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};
+    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};
+    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
+    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};
+    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};
+  }
+  :host([dark]) {
+    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};
+    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};
+    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};
+    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};
+    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
+    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};
+    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};
+    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};
+  }
+`;
+export const buttonSizeStyles = css `
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.Button)} {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2rem;
+  }
+  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+    ${slottedClassName(TextSize.Button)} {
+      font-size: 0.888rem;
+      font-weight: 400;
+      line-height: 1.065rem;
+    }
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    ${slottedClassName(TextSize.Button)} {
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+    }
+  }
+`)}
+`;
+export const buttonColorStyles = css `
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {
+    background-color: var(--t-button-primary-color);
+    outline: none;
+    color: var(--t-button-text-color);
+  }
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {
+    background-color: var(--t-button-hover-primary-color);
+    cursor: pointer;
+  }
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {
+    background-color: var(--t-button-hover-primary-color);
+    outline: 2px solid var(--t-button-accent-color);
+  }
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {
+    background-color: var(--t-button-active-primary-color);
+    outline: none;
+  }
+
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {
+    background-color: var(--t-button-secondary-color);
+    outline: 1px solid var(--t-button-hover-primary-color);
+    color: var(--t-button-text-secondary-color);
+  }
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {
+    background-color: var(--t-button-hover-secondary-color);
+    outline: 1px solid var(--t-button-primary-color);
+    color: var(--t-button-primary-color);
+    cursor: pointer;
+  }
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {
+    background-color: var(--t-button-hover-secondary-color);
+    outline: 2px solid var(--t-button-accent-color);
+    color: var(--t-button-primary-color);
+  }
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {
+    background-color: var(--t-button-active-secondary-color);
+    outline: 1px solid var(--t-button-primary-color);
+    color: var(--t-button-primary-color);
+  }
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {
+    outline: 1px solid var(--t-button-text-muted-color);
+  }
+
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {
+    background-color: var(--t-button-disabled-bg-color);
+    color: var(--t-button-text-muted-color);
+    cursor: not-allowed;
+  }
+`;

package/dist/src/tuix-button/enums/tuix-button.enums.d.ts

@@ -0,0 +1,2 @@
+import { MainVariant } from '../../utils/mainVariant.enum';
+export declare const buttonTextColor: Record<MainVariant, string>;

package/dist/src/tuix-button/enums/tuix-button.enums.js

@@ -0,0 +1,6 @@
+import { Palette } from '../../utils/colors';
+import { MainVariant } from '../../utils/mainVariant.enum';
+export const buttonTextColor = {
+    [MainVariant.PRIMARY]: Palette.WHITE,
+    [MainVariant.SECONDARY]: Palette.MAIN,
+};

package/dist/src/tuix-button/interfaces/tuix-button.interface.d.ts

@@ -0,0 +1 @@
+export type CustomEventTuixButton = CustomEvent<undefined>;

package/dist/src/tuix-button/interfaces/tuix-button.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/src/tuix-checkbox/TuixCheckbox.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
+export declare class TuixCheckbox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    dark: boolean;
+    error: boolean;
+    label: string;
+    labelSide: CheckboxLabelSide;
+    private _onCheckboxChange;
+    private _getIconMode;
+    private _getFullContainerClasses;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-checkbox/TuixCheckbox.js

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
+import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
+import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
+let TuixCheckbox = class TuixCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.dark = false;
+        this.error = false;
+        this.label = '';
+        this.labelSide = CheckboxLabelSide.RIGHT;
+    }
+    static { this.styles = [
+        hostStyles,
+        checkboxContainerStyles,
+        checkboxCheckmarkStyles,
+        checkboxLabelStyles,
+    ]; }
+    _onCheckboxChange(event) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: event.target.checked,
+                label: this.label,
+            },
+            bubbles: true,
+        }));
+    }
+    _getIconMode() {
+        if (this.disabled) {
+            return CheckboxIconMode.DISABLED;
+        }
+        if (this.error) {
+            return CheckboxIconMode.ERROR;
+        }
+        return CheckboxIconMode.DEFAULT;
+    }
+    _getFullContainerClasses() {
+        return {
+            't-checkbox-full-container': true,
+            't-with-error': this.error && !this.disabled,
+            't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
+        };
+    }
+    render() {
+        return html `<label class="${classMap(this._getFullContainerClasses())}">
+      <div class="t-checkbox-container">
+        <input
+          type="checkbox"
+          class="t-checkbox"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._onCheckboxChange}"
+        />
+        <div class="t-checkbox-checkmark">
+          <tuix-icon
+            size="${IconSizeVariant.FULL}"
+            name="${IconName.CHECK}"
+            color="${this.dark
+            ? CheckboxIconColorDark[this._getIconMode()]
+            : CheckboxIconColorLight[this._getIconMode()]}"
+          >
+          </tuix-icon>
+        </div>
+      </div>
+      <div class="t-checkbox-label">
+        <slot>
+          <tuix-text
+            size="${TextSize.Field1}"
+            color="${TextVariant.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${this.label}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TuixCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixCheckbox.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixCheckbox.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], TuixCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TuixCheckbox.prototype, "labelSide", void 0);
+TuixCheckbox = __decorate([
+    customElement('tuix-checkbox')
+], TuixCheckbox);
+export { TuixCheckbox };

package/dist/src/tuix-checkbox/TuixCheckbox.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const hostStyles: import("lit").CSSResult;
+export declare const checkboxContainerStyles: import("lit").CSSResult;
+export declare const checkboxCheckmarkStyles: import("lit").CSSResult;
+export declare const checkboxLabelStyles: import("lit").CSSResult;

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js

@@ -0,0 +1,132 @@
+import { css, unsafeCSS } from 'lit';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+export const hostStyles = css `
+  :host {
+    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
+    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};
+    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};
+    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};
+    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};
+    --t-label-right-default-justify: flex-start;
+    --t-label-left-default-justify: space-between;
+  }
+  :host([dark]) {
+    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};
+    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};
+    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};
+    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
+    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};
+    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};
+  }
+`;
+export const checkboxContainerStyles = css `
+  .t-checkbox-full-container {
+    display: flex;
+    justify-content: var(--t-label-right-default-justify, flex-start);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-checkbox-full-container {
+    cursor: not-allowed;
+  }
+  .t-checkbox-container {
+    --t-checkbox-size-box: 1.5rem;
+    --t-checkbox-shadow-width: 2px;
+    --t-checkbox-border-radius: 0.25rem;
+    display: block;
+    position: relative;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
+    min-width: var(--t-checkbox-size-box);
+  }
+  .t-checkbox-container .t-checkbox {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+    .t-checkbox-container {
+      --t-checkbox-size-box: 1rem;
+      --t-checkbox-shadow-width: 1px;
+      --t-checkbox-border-radius: 0.125rem;
+      margin-top: 1px;
+    }
+  }
+`;
+export const checkboxCheckmarkStyles = css `
+  .t-checkbox-container .t-checkbox-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
+    border-radius: var(--t-checkbox-border-radius);
+    background-color: var(--t-bg-color-primary);
+    border: 1px solid var(--t-stroke-color-grey);
+    box-sizing: border-box;
+  }
+  .t-checkbox-container .t-checkbox-checkmark tuix-icon {
+    margin: auto;
+    display: none;
+    width: calc(var(--t-checkbox-size-box) - 0.5rem);
+    height: calc(var(--t-checkbox-size-box) - 0.5rem);
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {
+    background-color: var(--t-main-color-tuix);
+    border: none;
+  }
+  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {
+    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)
+      var(--t-stroke-color-focus);
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {
+    display: block;
+  }
+  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox-checkmark {
+    border: 1px solid var(--t-text-color-error);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox:checked
+    ~ .t-checkbox-checkmark {
+    background-color: var(--t-text-color-error);
+    border: none;
+  }
+
+  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    border: none;
+    box-shadow: none;
+  }
+`;
+export const checkboxLabelStyles = css `
+  .t-checkbox-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-checkbox-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;