tuix-webcomponents 0.0.22 → 0.0.24

package/dist/src/tuix-input/TuixInput.styles.js

@@ -1,39 +1,48 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { palette } from '../utils/colors';
-import { darkPalette } from '../utils/darkColors';
-import { hexToRgb } from '../utils/hex-rgb';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { hexToRgb } from '../utils/hex-rgb.js';
 const inputVars = {
     gapX: '10px',
     iconDesktopSize: '1.5rem',
-    iconTabletSize: '1rem',
+    iconMobileSize: '1rem',
     paddingX: '1.25rem',
 };
-const rgbDarkValidation = hexToRgb(darkPalette.validation);
-const rgbDarkError = hexToRgb(darkPalette.error);
+const rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);
+const rgbDarkError = hexToRgb(DarkPalette.ERROR);
 export const hostStyles = css `
   :host {
-    --t-field-color-form: ${unsafeCSS(palette.primary_50)};
-    --t-field-color-title: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-text: ${unsafeCSS(palette.dark)};
-    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};
-    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};
-    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};
-    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};
-    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};
-    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};
-    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};
+    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};
+    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_600)};
+    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};
+    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};
+    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};
+    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};
+    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};
+    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};
+    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};
     --t-field-input-cursor: auto;
+    --t-field-font-size: 1rem;
+    --t-field-font-weight: 300;
+    --t-field-line-height: 1.25rem;
+    --t-field-padding-x: 1.25rem;
+    --t-field-padding-y: 1.125rem;
+    --t-field-padding-top: 1.625rem;
+    --t-field-padding-bottom: 0.625rem;
+    --t-field-title-left-position: 1.25rem;
   }
   :host([dark]) {
-    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};
-    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};
-    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};
-    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};
-    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};
-    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};
+    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};
+    --t-field-color-title: ${unsafeCSS(DarkPalette.PRIMARY_400)};
+    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};
+    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};
+    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
+    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};
     --t-field-color-bg-validation: rgba(
       ${rgbDarkValidation.r},
       ${rgbDarkValidation.g},
@@ -46,58 +55,54 @@ export const hostStyles = css `
       ${rgbDarkError.b},
       0.2
     );
-    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};
+    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};
   }
 `;
 export const inputComponentStyles = css `
+  .t-textarea-main-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
   .t-input-container {
     position: relative;
     --t-padding-x-desktop-with-icon: calc(
-      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +
+      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconDesktopSize)} +
         ${unsafeCSS(inputVars.gapX)}
     );
-    --t-padding-x-tablet-with-icon: calc(
-      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +
+    --t-padding-x-mobile-with-icon: calc(
+      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconMobileSize)} +
         ${unsafeCSS(inputVars.gapX)}
     );
+    --t-border-size: 1px;
+  }
+  .t-input-container.t-textarea-container {
+    height: 100%;
   }
   .t-input {
-    padding: 1rem ${unsafeCSS(inputVars.paddingX)};
+    padding: calc(var(--t-field-padding-y) - var(--t-border-size))
+      var(--t-field-padding-x);
     border-radius: 4px;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     cursor: var(--t-field-input-cursor);
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .t-input.t-textarea {
+    height: 100%;
+    display: block;
   }
   .t-input.with-title {
-    padding-top: 1.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: calc(var(--t-field-padding-top) - var(--t-border-size));
+    padding-bottom: calc(var(--t-field-padding-bottom) - var(--t-border-size));
   }
   .t-input.with-icon-right {
     padding-right: var(--t-padding-x-desktop-with-icon);
   }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .t-input {
-      padding-top: 0.875rem;
-      padding-bottom: 0.875rem;
-    }
-    .t-input.with-title {
-      padding-top: 1.375rem;
-      padding-bottom: 0.375rem;
-    }
-    .t-input.with-icon-right {
-      padding-right: var(--t-padding-x-tablet-with-icon);
-    }
-  }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input {
-      padding-top: 0.75rem;
-      padding-bottom: 0.75rem;
-    }
-    .t-input.with-title {
-      padding-top: 1.25rem;
-      padding-bottom: 0.25rem;
-    }
     .t-input.with-icon-right {
-      padding-right: var(--t-padding-x-tablet-with-icon);
+      padding-right: var(--t-padding-x-mobile-with-icon);
     }
   }
 `;
@@ -105,27 +110,24 @@ export const inputFontStyles = css `
   .t-input::placeholder,
   .t-input,
   .t-title {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5rem;
+    font-size: var(--t-field-font-size);
+    font-weight: var(--t-field-font-weight);
+    line-height: var(--t-field-line-height);
   }
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .t-input::placeholder {
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-    }
-    .t-input {
-      font-size: 1rem;
-      line-height: 1.25rem;
+    :host {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1.125rem;
+      --t-field-padding-y: 1.063rem;
+      --t-field-padding-top: 1.5rem;
     }
   }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input {
-      font-size: 0.875rem;
-      line-height: 1rem;
-    }
-    .t-input::placeholder {
-      line-height: 1rem;
+    :host {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1rem;
+      --t-field-padding-y: 1rem;
+      --t-field-padding-top: 1.375rem;
     }
   }
 `;
@@ -143,8 +145,9 @@ export const inputColorStyles = css `
     border: 1px solid var(--t-field-color-stroke-focus);
     outline: 1px solid var(--t-field-color-stroke-focus);
   }
-  .t-input[disabled] {
-    pointer-events: none;
+  .t-input[disabled]:disabled {
+    cursor: not-allowed;
+    border: 1px solid var(--t-field-color-form);
     color: var(--t-field-color-text-disabled);
   }
   .t-input.with-title::placeholder {
@@ -170,12 +173,16 @@ export const inputTitleStyles = css `
   .t-title {
     position: absolute;
     top: 50%;
-    left: 1.25rem;
-    font-family: 'rubik', sans-serif;
+    left: var(--t-field-title-left-position);
+    font-family: 'Rubik', sans-serif;
     color: var(--t-field-color-title);
     transform: translateY(-50%);
     transition-duration: 0.3s;
     pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
   .t-textarea-container .t-title {
     top: 1rem;
@@ -184,52 +191,31 @@ export const inputTitleStyles = css `
   .t-input.with-title:focus + .t-title,
   .t-input.with-title:not(:placeholder-shown) + .t-title {
     font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1rem;
+    font-weight: 300;
+    line-height: 0.875rem;
     transform: translateY(0);
     top: 0.5rem;
   }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .t-title {
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-    }
-    .t-input.with-title:focus + .t-title,
-    .t-input.with-title:not(:placeholder-shown) + .t-title {
-      top: 0.375rem;
-    }
-    .t-textarea-container .t-title {
-      top: 0.875rem;
-    }
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input.with-title:focus + .t-title,
-    .t-input.with-title:not(:placeholder-shown) + .t-title {
-      top: 0.25rem;
-    }
-    .t-textarea-container .t-title {
-      top: 0.75rem;
-    }
-  }
 `;
 export const inputIconStyles = css `
-  .t-icon-set-container.t-icon-click {
-    cursor: pointer;
-  }
   .t-input-container .t-icon-set-container {
     height: ${unsafeCSS(inputVars.iconDesktopSize)};
     width: ${unsafeCSS(inputVars.iconDesktopSize)};
+    cursor: var(--t-field-input-cursor);
+  }
+  .t-icon-set-container.t-icon-click {
+    cursor: pointer;
   }
   .t-input-container .t-icon-set-container.t-icon-right {
     position: absolute;
     top: 50%;
-    right: ${unsafeCSS(inputVars.paddingX)};
+    right: var(--t-field-padding-x);
     transform: translateY(-50%);
   }
   .t-input-container .t-icon-set-container.t-icon-left {
     position: absolute;
     top: 50%;
-    left: ${unsafeCSS(inputVars.paddingX)};
+    left: var(--t-field-padding-x);
     transform: translateY(-50%);
   }
   .t-icon-inactive {
@@ -251,16 +237,20 @@ export const inputIconStyles = css `
   .t-input:focus ~ .t-icon-set-container .t-icon-active {
     display: inline;
   }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {
+    display: none;
+  }
   .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {
     display: none;
   }
   .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {
     display: inline;
+    cursor: not-allowed;
   }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     .t-input-container .t-icon-set-container {
-      height: ${unsafeCSS(inputVars.iconTabletSize)};
-      width: ${unsafeCSS(inputVars.iconTabletSize)};
+      height: ${unsafeCSS(inputVars.iconMobileSize)};
+      width: ${unsafeCSS(inputVars.iconMobileSize)};
     }
   }
 `;
@@ -271,12 +261,12 @@ export const inputSearchStyles = css `
   .t-input[type='search'] + .t-title {
     left: var(--t-padding-x-desktop-with-icon);
   }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     .t-input[type='search'] {
-      padding-left: var(--t-padding-x-tablet-with-icon);
+      padding-left: var(--t-padding-x-mobile-with-icon);
     }
     .t-input[type='search'] + .t-title {
-      left: var(--t-padding-x-tablet-with-icon);
+      left: var(--t-padding-x-mobile-with-icon);
     }
   }
   input[type='search']::-webkit-search-decoration,
@@ -289,7 +279,7 @@ export const inputSearchStyles = css `
 export const inputDescriptionStyles = css `
   .t-input-description-container {
     margin-top: 0.5rem;
-    font-family: 'rubik', sans-serif;
+    font-family: 'Rubik', sans-serif;
     font-size: 0.75rem;
     line-height: 1rem;
     color: var(--t-field-color-description);
@@ -304,4 +294,3 @@ export const inputDescriptionStyles = css `
     gap: 0.5rem;
   }
 `;
-//# sourceMappingURL=TuixInput.styles.js.map

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

@@ -1,4 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum InputType {
     TEXT = "text",
     SEARCH = "search",
@@ -23,14 +25,14 @@ export declare const IconByDescriptionType: {
     loading: IconName;
 };
 export declare const IconDescriptionColorLight: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: Palette;
+    error: Palette;
+    success: Palette;
+    loading: Palette;
 };
 export declare const IconDescriptionColorDark: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: DarkPalette;
+    error: DarkPalette;
+    success: DarkPalette;
+    loading: DarkPalette;
 };

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { palette } from '../../utils/colors';
-import { darkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";
@@ -28,15 +28,14 @@ export const IconByDescriptionType = {
     [DescriptionType.LOADING]: IconName.LOADER,
 };
 export const IconDescriptionColorLight = {
-    [DescriptionType.WARNING]: palette.validation,
-    [DescriptionType.ERROR]: palette.error,
-    [DescriptionType.SUCCESS]: palette.success,
-    [DescriptionType.LOADING]: palette.primary_300,
+    [DescriptionType.WARNING]: Palette.VALIDATION,
+    [DescriptionType.ERROR]: Palette.ERROR,
+    [DescriptionType.SUCCESS]: Palette.SUCCESS,
+    [DescriptionType.LOADING]: Palette.PRIMARY_300,
 };
 export const IconDescriptionColorDark = {
-    [DescriptionType.WARNING]: darkPalette.validation,
-    [DescriptionType.ERROR]: darkPalette.error,
-    [DescriptionType.SUCCESS]: darkPalette.success,
-    [DescriptionType.LOADING]: darkPalette.primary_300,
+    [DescriptionType.WARNING]: DarkPalette.VALIDATION,
+    [DescriptionType.ERROR]: DarkPalette.ERROR,
+    [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,
+    [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,
 };
-//# sourceMappingURL=tuix-input.enums.js.map

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

@@ -1,13 +1,18 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { InputIconLocation } from '../enums/tuix-input.enums';
-export interface InputIconColors {
-    inactive: string;
-    active: string;
-    disabled: string;
-}
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { InputIconLocation } from '../enums/tuix-input.enums.js';
+import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors.js';
+export declare const InputState: {
+    INACTIVE: string;
+    ACTIVE: string;
+    DISABLED: string;
+};
+export type InputState = (typeof InputState)[keyof typeof InputState];
 export interface FormatIconSetParams {
     iconName: IconName;
-    colorByState: InputIconColors;
+    colorByState: Record<InputState, DarkPalette | Palette>;
     location?: InputIconLocation;
     clickHandler?: (e: MouseEvent) => void;
 }
+export type CustomEventTuixInput = CustomEvent<DetailValue<string>>;

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

@@ -1,2 +1,5 @@
-export {};
-//# sourceMappingURL=tuix-input.interface.js.map
+export const InputState = {
+    INACTIVE: 'inactive',
+    ACTIVE: 'active',
+    DISABLED: 'disabled',
+};

package/dist/src/tuix-link/TuixLink.d.ts

@@ -1,11 +1,15 @@
-import { LitElement } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { LitElement, type TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
 export declare class TuixLink extends LitElement {
-    static styles: import("lit").CSSResult;
-    href: string;
+    static styles: import("lit").CSSResult[];
+    href?: string;
     target: LinkTarget;
     variant: MainVariant;
     disabled: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    dark: boolean;
+    private _getClassMap;
+    private _anchorTemplate;
+    private _divTemplate;
+    render(): TemplateResult;
 }

package/dist/src/tuix-link/TuixLink.js

@@ -1,58 +1,55 @@
 import { __decorate } from "tslib";
-import { html, css, LitElement, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { linkStyles } from './TuixLink.styles.js';
+import { linkFontStyles } from '../tuix-text/TuixText.styles.js';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
-        this.href = '';
-        this.target = LinkTarget.Blank;
+        this.target = LinkTarget.BLANK;
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
+        this.dark = false;
     }
-    render() {
+    static { this.styles = [linkStyles, linkFontStyles]; }
+    _getClassMap() {
+        return {
+            link: true,
+            disabled: this.disabled,
+            [MainVariant.SECONDARY]: this.variant === MainVariant.SECONDARY,
+        };
+    }
+    _anchorTemplate() {
         return html `
       <a
-        target="${this.disabled ? LinkTarget.Self : this.target}"
-        class="link ${this.variant} ${this.disabled ? 'disabled' : ''}"
+        target="${this.disabled ? LinkTarget.SELF : this.target}"
+        class="${classMap(this._getClassMap())}"
         href="${this.disabled ? 'javascript:void(0)' : this.href}"
       >
         <slot></slot>
       </a>
     `;
     }
-};
-TuixLink.styles = css `
-    a.link {
-      font-family: 'rubik', sans-serif;
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.25rem;
-      text-decoration: none;
-      color: ${unsafeCSS(palette.main)};
-    }
-    a.link:hover {
-      text-decoration: underline;
-    }
-    a.link.secondary {
-      color: ${unsafeCSS(palette.white)};
-    }
-    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-      a.link {
-        font-size: 0.875rem;
-        font-weight: 400;
-        line-height: 1rem;
-      }
+    _divTemplate() {
+        return html `
+      <div class="${classMap(this._getClassMap())}">
+        <slot></slot>
+      </div>
+    `;
     }
-    a.link.disabled {
-      text-decoration: underline;
-      color: ${unsafeCSS(palette.primary_300)};
-      cursor: not-allowed;
+    render() {
+        const isValidAnchor = this.href && !this.disabled;
+        if (isValidAnchor) {
+            return this._anchorTemplate();
+        }
+        else {
+            return this._divTemplate();
+        }
     }
-  `;
+};
 __decorate([
     property({ type: String })
 ], TuixLink.prototype, "href", void 0);
@@ -60,13 +57,15 @@ __decorate([
     property({ type: LinkTarget })
 ], TuixLink.prototype, "target", void 0);
 __decorate([
-    property({ type: MainVariant })
+    property({ type: MainVariant, reflect: true })
 ], TuixLink.prototype, "variant", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixLink.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixLink.prototype, "dark", void 0);
 TuixLink = __decorate([
     customElement('tuix-link')
 ], TuixLink);
 export { TuixLink };
-//# sourceMappingURL=TuixLink.js.map

package/dist/src/tuix-link/TuixLink.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const LINK_TEXT_COLOR_VAR_NAME = "--t-link-text-color";
+export declare const linkStyles: import("lit").CSSResult;

package/dist/src/tuix-link/TuixLink.styles.js

@@ -0,0 +1,55 @@
+import { css, unsafeCSS } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+export const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';
+export const linkStyles = css `
+  ${unsafeCSS(`
+  :host {
+    --t-link-border-color: ${Palette.MAIN};
+    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.MAIN}
+  }
+
+  :host([dark]) {
+    --t-link-border-color: ${DarkPalette.MAIN};
+    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.MAIN}
+  }
+
+  :host([variant=${MainVariant.SECONDARY}]) {
+    --t-link-border-color: ${Palette.WHITE};
+    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.WHITE}
+  }
+
+  :host([variant=${MainVariant.SECONDARY}][dark]) {
+    --t-link-border-color: ${DarkPalette.PRIMARY_50};
+    ${LINK_TEXT_COLOR_VAR_NAME}: ${DarkPalette.PRIMARY_50}
+  }
+
+  :host([disabled]) .link.disabled {
+    --t-link-border-color: ${Palette.PRIMARY_300};
+    ${LINK_TEXT_COLOR_VAR_NAME}: ${Palette.PRIMARY_300}
+  }
+
+  .link {
+    text-decoration: none;
+    display: inline;
+    color: var(${LINK_TEXT_COLOR_VAR_NAME});
+    border-bottom: solid 1px var(--t-link-border-active-color, transparent);
+  }
+  .link:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+    cursor: pointer;
+  }
+  .link.secondary {
+    color: var(${LINK_TEXT_COLOR_VAR_NAME});
+  }
+  .link.secondary:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+  }
+  .link.disabled {
+    border-bottom: solid 1px var(--t-link-border-color);
+    color: var(${LINK_TEXT_COLOR_VAR_NAME});
+    cursor: not-allowed;
+  }
+`)}
+`;

package/dist/src/tuix-link/enums/linkTarget.enum.d.ts

@@ -1,6 +1,6 @@
 export declare enum LinkTarget {
-    Blank = "_blank",
-    Self = "_self",
-    Parent = "_parent",
-    Top = "_top"
+    BLANK = "_blank",
+    SELF = "_self",
+    PARENT = "_parent",
+    TOP = "_top"
 }

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -1,8 +1,7 @@
 export var LinkTarget;
 (function (LinkTarget) {
-    LinkTarget["Blank"] = "_blank";
-    LinkTarget["Self"] = "_self";
-    LinkTarget["Parent"] = "_parent";
-    LinkTarget["Top"] = "_top";
+    LinkTarget["BLANK"] = "_blank";
+    LinkTarget["SELF"] = "_self";
+    LinkTarget["PARENT"] = "_parent";
+    LinkTarget["TOP"] = "_top";
 })(LinkTarget || (LinkTarget = {}));
-//# sourceMappingURL=linkTarget.enum.js.map