@techsio/ui-kit 0.0.0

package/src/tokens/components/molecules/_pagination.css

@@ -0,0 +1,75 @@
+:root {
+  --opacity-pagination-hover: 30%;
+}
+
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-pagination: var(--color-surface);
+  --color-pagination-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-pagination-bg: var(--color-pagination);
+  --color-pagination-bg-active: var(--color-pagination-accent);
+  --color-pagination-bg-hover: oklch(
+    from var(--color-pagination-accent) calc(l + var(--state-hover)) c h
+  );
+  --color-pagination-neutral-bg: transparent;
+
+  /* Foreground colors */
+  --color-pagination-fg: var(--color-fg-primary);
+  --color-pagination-filled-fg-active: var(--color-fg-dark);
+  --color-pagination-outlined-fg-active: var(--color-pagination-accent);
+  --color-pagination-minimal-fg-active: var(--color-pagination-accent);
+
+  /* Border colors */
+  --color-pagination-border: var(--color-border-primary);
+  --color-pagination-border-active: var(--color-pagination-accent);
+  --color-pagination-border-hover: --alpha(
+    var(--color-pagination-border-active) /
+    var(--opacity-pagination-hover)
+  );
+
+  /* === DISABLED STATES === */
+  --color-pagination-bg-disabled: var(--color-disabled-bg);
+  --color-pagination-fg-disabled: --alpha(
+    var(--color-pagination-fg) /
+    var(--opacity-disabled)
+  );
+  --color-pagination-border-disabled: --alpha(
+    var(--color-pagination-border) /
+    var(--opacity-disabled)
+  );
+
+  /* === SPACING === */
+  --spacing-pagination: var(--spacing-200);
+  --spacing-pagination-list: var(--spacing-pagination);
+  --height-pagination-sm: 2em;
+  --height-pagination-md: 2.5em;
+  --height-pagination-lg: 3em;
+
+  /* === TYPOGRAPHY === */
+  --text-pagination-sm: var(--text-xs);
+  --text-pagination-md: var(--text-sm);
+  --text-pagination-lg: var(--text-md);
+
+  /* === BORDERS & RADIUS === */
+  --radius-pagination: var(--radius-sm);
+  --border-pagination-width: var(--border-width-sm);
+
+  /* === FOCUS RINGS === */
+  --color-pagination-ring: var(--color-ring);
+}
+
+@utility token-icon-pagination-prev {
+  @apply icon-[mdi--chevron-left];
+}
+
+@utility token-icon-pagination-next {
+  @apply icon-[mdi--chevron-right];
+}
+
+@utility token-icon-pagination-ellipsis {
+  @apply icon-[mdi--ellipsis-horizontal];
+}

package/src/tokens/components/molecules/_popover.css

@@ -0,0 +1,39 @@
+@theme static {
+  /* === ZAG.JS SPECIFIC TOKENS === */
+  /* These tokens are used directly by Zag.js library */
+  --arrow-size: var(--spacing-150);
+  --arrow-background: var(--color-popover-bg);
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-popover-bg: var(--color-overlay);
+
+  /* Foreground colors */
+  --color-popover-fg: var(--color-fg-primary);
+  --color-popover-description-fg: var(--color-fg-secondary);
+
+  /* Border colors */
+  --color-popover-border: var(--color-highlight);
+
+  /* === SPACING === */
+  --spacing-popover-sm: var(--spacing-200);
+  --spacing-popover-md: var(--spacing-250);
+  --spacing-popover-lg: var(--spacing-350);
+  --spacing-popover-title-mb: var(--spacing-150);
+
+  /* Composite spacing */
+  --padding-popover-trigger: var(--spacing-100) var(--spacing-150);
+
+  /* === TYPOGRAPHY === */
+  --text-popover-title-sm: var(--text-md);
+  --text-popover-title-md: var(--text-lg);
+  --text-popover-title-lg: var(--text-xl);
+  --text-popover-description-size: var(--text-sm);
+  --font-weight-popover-title: var(--font-weight-semibold);
+
+  /* === BORDERS & RADIUS === */
+  --radius-popover: var(--radius-sm);
+
+  /* === SHADOWS === */
+  --shadow-popover: var(--shadow-primary);
+}

package/src/tokens/components/molecules/_product-card.css

@@ -0,0 +1,85 @@
+@theme static {
+  --product-card-layout-row-grid: auto 1fr;
+  --product-card-layout-column-grid: 1fr;
+  /* === BASE COLORS === */
+  --color-product-card-bg: var(--color-surface);
+  --color-product-card-name-fg: var(--color-fg-primary);
+
+  --color-product-card-price-fg: var(--color-fg-primary);
+  --color-product-card-border: var(--color-border-primary);
+
+  --color-product-card-stock-fg-in-stock: var(--color-success);
+  --color-product-card-stock-fg-limited-stock: var(--color-warning);
+  --color-product-card-stock-fg-out-of-stock: var(--color-danger);
+
+  /* === STATE VARIATIONS === */
+  /* Add to cart button */
+  --color-product-card-button-cart-bg: var(--color-button-primary);
+  --color-product-card-button-cart-bg-hover: oklch(
+    from var(--color-product-card-button-cart-bg) calc(l + var(--state-hover)) c
+      h
+  );
+  --color-product-card-button-cart-fg: var(--color-button-fg);
+
+  /* Detail button */
+  --color-product-card-button-detail-bg: var(--color-button-secondary);
+  --color-product-card-button-detail-bg-hover: oklch(
+    from var(--color-product-card-button-detail-bg) calc(l + var(--state-hover))
+      c h
+  );
+  --color-product-card-button-detail-fg: var(--color-button-fg);
+
+  /* Wishlist button */
+  --color-product-card-button-wishlist-bg: var(--color-button-tertiary);
+  --color-product-card-button-wishlist-bg-hover: oklch(
+    from var(--color-product-card-button-wishlist-bg)
+      calc(l + var(--state-hover)) c h
+  );
+  --color-product-card-button-wishlist-fg: var(--color-button-fg);
+
+  /* === SPACING === */
+  --spacing-product-card-padding: var(--spacing-150);
+  --spacing-product-card-row-layout: var(--spacing-250);
+  --spacing-product-card-col-layout: var(--spacing-100);
+  --spacing-product-card-box: var(--spacing-150);
+  --spacing-product-card-max: 100%;
+  --spacing-product-card-buttons: var(--spacing-150);
+
+  /* === TYPOGRAPHY === */
+  --text-product-card-name-size: var(--text-md);
+  --text-product-card-stock-size: var(--text-sm);
+  --text-product-card-price-size: var(--text-lg);
+  --leading-product-card-name: var(--line-height-snug);
+
+  --font-weight-product-card-name: var(--font-weight-medium);
+  --font-weight-product-card-price: var(--font-weight-medium);
+  --font-weight-product-card-stock: var(--font-weight-medium);
+
+  /* === BORDERS & RADIUS === */
+  --border-product-card-width: var(--border-width-sm);
+  --radius-product-card: var(--radius-md);
+  --radius-product-card-image: var(--radius-product-card);
+
+  /* === ASPECT RATIOS === */
+  --aspect-product-card-image: var(--aspect-square);
+}
+
+/* === UTILITIES === */
+@utility line-clamp-product-card-name {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+@utility token-icon-cart-button {
+  @apply token-icon-cart;
+}
+
+@utility token-icon-detail-button {
+  @apply token-icon-eye;
+}
+
+@utility token-icon-wishlist-button {
+  @apply token-icon-heart;
+}

package/src/tokens/components/molecules/_search-form.css

@@ -0,0 +1,10 @@
+@theme static {
+  /* Spacing for stacked layout */
+  --spacing-search-form-sm: var(--spacing-150);
+  --spacing-search-form-md: var(--spacing-200);
+  --spacing-search-form-lg: var(--spacing-250);
+}
+
+@utility token-icon-search {
+  @apply icon-[mdi--magnify];
+}

package/src/tokens/components/molecules/_select.css

@@ -0,0 +1,88 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  --color-select: var(--color-surface);
+  --color-select-accent: var(--color-primary);
+  --color-select-danger: var(--color-danger);
+  --color-select-border: var(--color-border-primary);
+  --color-select-fg: var(--color-fg-primary);
+
+  /* === STATE VARIATIONS === */
+  --color-select-hover: oklch(
+    from var(--color-select) calc(l + var(--state-hover)) c h
+  );
+
+  /* === ROOT === */
+  --gap-select-root: var(--spacing-150);
+
+  /* === TRIGGER === */
+  --color-select-trigger-border: var(--color-select-border);
+  --color-select-trigger-bg-hover: var(--color-select-hover);
+  --color-select-trigger-border-focus: var(--color-select-accent);
+  --padding-select-trigger: var(--spacing-200);
+
+  /* === CLEAR TRIGGER === */
+  --color-select-clear-trigger-fg: var(--color-select-fg);
+  --color-select-clear-trigger-bg: transparent;
+  --padding-select-clear-trigger: var(--spacing-100);
+  --spacing-select-right: var(--spacing-450);
+
+  /* === DROPDOWN CONTENT === */
+  --color-select-content-bg: var(--color-select);
+  --color-select-content-border: var(--color-border-primary);
+  --shadow-select-content: var(--shadow-md);
+
+  /* === OPTION ITEM === */
+  --color-select-item-bg: transparent;
+  --color-select-item-fg: var(--color-select-fg);
+  --color-select-item-bg-hover: var(--color-select-hover);
+  --color-select-item-bg-selected: oklch(
+    from var(--color-select) calc(l - var(--surface-increment)) c h
+  );
+  --color-select-item-selected-fg: var(--color-select-accent);
+  --padding-select-item: var(--spacing-150) var(--spacing-250);
+
+  /* === INDICATOR === */
+  --color-select-indicator: var(--color-select-accent);
+
+  /* === PLACEHOLDER === */
+  --color-select-placeholder: --alpha(
+    var(--color-fg-secondary) /
+    var(--opacity-placeholder)
+  );
+
+  /* === DISABLED STATES === */
+  --opacity-select-disabled: var(--opacity-disabled);
+
+  /* === SPACING === */
+  --spacing-content: var(--spacing-450);
+
+  /* === TYPOGRAPHY === */
+  --text-select-trigger-size: var(--text-md);
+
+  --text-select-xs: var(--text-xs);
+  --text-select-sm: var(--text-sm);
+  --text-select-md: var(--text-md);
+  --text-select-lg: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  --radius-select: var(--radius-sm);
+
+  /* === Z-INDEX === */
+  --z-content: 50;
+}
+
+/* === ICONS === */
+@utility token-icon-select-indicator {
+  @apply icon-[mdi--chevron-down];
+}
+@utility token-icon-select-indicator-open {
+  @apply icon-[mdi--chevron-right];
+}
+
+@utility token-icon-select-check {
+  @apply icon-[mdi--check];
+}
+
+@utility token-icon-select-clear {
+  @apply icon-[mdi--close];
+}

package/src/tokens/components/molecules/_slider.css

@@ -0,0 +1,75 @@
+@theme static {
+  --spacing-slider-slim: 2px;
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-slider-primary: var(--color-primary);
+  --color-slider-base: var(--color-surface);
+  --color-slider-error: var(--color-danger);
+  --color-slider-accent: oklch(
+    from var(--color-slider-base) calc(l - var(--surface-increment) * 2) c h
+  );
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-slider-range-bg: var(--color-slider-primary);
+  --color-slider-track-bg: var(--color-slider-base);
+  --color-slider-marker-bg: var(--color-slider-accent);
+  --color-slider-thumb-bg: var(--color-base-light);
+  --color-slider-bg-disabled: var(--color-disabled-bg);
+
+  /* Border colors */
+  --color-slider-border: var(--color-border-primary);
+
+  /* === STATE VARIATIONS === */
+  /* Hover states */
+  --color-slider-track-bg-hover: oklch(
+    from var(--color-slider-track-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-slider-range-bg-hover: oklch(
+    from var(--color-slider-range-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-slider-thumb-bg-hover: oklch(
+    from var(--color-slider-thumb-bg) calc(l + var(--state-hover)) c h
+  );
+
+  /* === VALIDATION STATES === */
+  --color-slider-range-bg-error: var(--color-slider-error);
+  --color-slider-border-error: var(--color-slider-error);
+
+  /* === DISABLED STATES === */
+  /* we must avoid transparent paint, otherwise the range would be visible */
+  --color-slider-thumb-bg-disabled: var(--color-slider-accent);
+  --color-slider-border-disabled: var(--color-disabled-border);
+
+  /* === SPACING === */
+  --spacing-slider-root: var(--spacing-200);
+
+  --spacing-slider-thumb-sm: var(--spacing-200);
+  --spacing-slider-thumb-md: var(--spacing-250);
+  --spacing-slider-thumb-lg: var(--spacing-350);
+
+  --spacing-slider-track-sm: var(--spacing-100);
+  --spacing-slider-track-md: var(--spacing-150);
+  --spacing-slider-track-lg: var(--spacing-200);
+
+  --spacing-slider-marker: var(--spacing-slider-slim);
+  --padding-marker-text: 0 0 0 var(--spacing-150);
+
+  /* === TYPOGRAPHY === */
+  --text-slider-value-size: var(--text-sm);
+  --height-marker-vertical: var(--spacing-300);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-slider: var(--border-width-sm);
+  --radius-slider-track: var(--radius-full);
+  --radius-slider-thumb: var(--radius-full);
+
+  /* === SHADOWS === */
+  --shadow-slider-thumb: var(--shadow-sm);
+
+  /* === FOCUS RINGS === */
+  --color-slider-ring: var(--color-ring);
+
+  /* === OPACITY === */
+  --opacity-slider-disabled: var(--opacity-disabled);
+}

package/src/tokens/components/molecules/_steps.css

@@ -0,0 +1,54 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-steps: var(--color-base);
+  --color-steps-active: var(--color-primary);
+  --color-steps-accent: var(--color-surface);
+  --color-steps-fg: var(--color-fg-primary);
+  --color-steps-fg-active: var(--color-fg-reverse);
+  --color-steps-fg-current: var(--color-fg-reverse);
+
+  /* === ROOT === */
+  --color-steps-root-bg: var(--color-steps);
+
+  /* === LIST === */
+  --color-steps-list-bg: var(--color-steps);
+
+  /* === ITEM === */
+  --color-steps-item-bg: transparent;
+
+  /* === TRIGGER === */
+  --gap-trigger: var(--spacing-150);
+
+  /* === CONTENT === */
+  --color-steps-content-bg: var(--color-steps-accent);
+
+  /* === INDICATOR === */
+  --color-steps-indicator-bg: var(--color-steps-accent);
+  --color-steps-indicator-bg-hover: var(--color-steps-active);
+  --color-steps-indicator-bg-complete: var(--color-steps-active);
+  --color-steps-indicator-bg-current: var(--color-steps-active);
+
+  /* === SEPARATOR === */
+  --color-steps-separator-bg: var(--color-steps-accent);
+  --color-steps-separator-bg-complete: var(--color-steps-active);
+
+  /* === SPACING === */
+  --gap-root: var(--spacing-250);
+  --gap-list: var(--spacing-200);
+  --gap-item: var(--spacing-150);
+  --padding-content: var(--spacing-250);
+  --height-steps-indicator: var(--spacing-350);
+  --padding-steps-btn: var(--spacing-100) var(--spacing-200);
+
+  /* === SIZES === */
+  --height-steps-separator: 2px;
+  --width-steps-separator: 2px;
+
+  /* === FOCUS RINGS === */
+  --color-steps-ring: var(--color-ring);
+}
+
+/* Semantic tokens for steps icons */
+@utility token-icon-steps-check {
+  @apply icon-[mdi--check];
+}

package/src/tokens/components/molecules/_switch.css

@@ -0,0 +1,62 @@
+:root {
+  /* The red colour will be less noticeable. */
+  --opacity-switch-invalid: 80%;
+}
+
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-switch-bg: var(--color-overlay);
+  --color-switch-success: var(--color-success);
+  --color-switch-invalid: --alpha(
+    var(--color-danger) /
+    var(--opacity-switch-invalid)
+  );
+  --color-switch-border: var(--color-border-primary);
+  --color-switch-thumb-bg: var(--color-base-light);
+  --color-switch-label-fg: var(--color-fg-primary);
+  --color-switch-label-fg-disabled: var(--color-disabled-fg);
+
+  /* Backgrounds colors */
+  --color-switch-bg-checked: var(--color-switch-success);
+
+  /* === STATE VARIATIONS === */
+  --color-switch-bg-hover: oklch(
+    from var(--color-switch-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-switch-bg-checked-hover: oklch(
+    from var(--color-switch-success) calc(l + var(--state-hover)) c h
+  );
+
+  /* === DISABLED STATES === */
+  --color-switch-bg-disabled: var(--color-disabled-bg);
+  --color-switch-thumb-bg-disabled: --alpha(
+    var(--color-switch-thumb-bg) /
+    var(--opacity-disabled)
+  );
+  --color-switch-border-disabled: var(--color-disabled-border);
+
+  /* === INVALID STATES === */
+  --color-switch-bg-invalid: var(--color-switch-invalid);
+
+  /* === SPACING === */
+  --spacing-switch-root: var(--spacing-200);
+  --spacing-switch-control: var(--spacing-50);
+  --spacing-switch-track-width: var(--spacing-600);
+  --spacing-switch-track-height: var(--spacing-350);
+  --spacing-switch-thumb-height: calc(
+    var(--spacing-switch-track-height) -
+    (var(--spacing-switch-control) * 2)
+  );
+  --spacing-switch-translate-track: calc(
+    var(--spacing-switch-track-width) -
+    var(--spacing-switch-track-height) -
+    var(--spacing-switch-control)
+  );
+
+  /* === BORDERS & RADIUS === */
+  --border-width-switch: var(--border-width-sm);
+  --radius-switch: var(--radius-full);
+
+  /* === FOCUS RINGS === */
+  --color-switch-ring: var(--color-ring);
+}

package/src/tokens/components/molecules/_tabs.css

@@ -0,0 +1,69 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-tabs-bg: var(--color-surface);
+  --color-tabs-fg: var(--color-fg-secondary);
+  --color-tabs-active: var(--color-primary);
+  --color-tabs-fg-primary: var(--color-fg-primary);
+  --color-tabs-fg-secondary: var(--color-fg-reverse);
+
+  /* === LIST COMPONENT === */
+  --color-tabs-list-bg: oklch(
+    from var(--color-tabs-bg) calc(l - var(--surface-increment)) c h
+  );
+
+  /* === TRIGGER COMPONENT === */
+  --color-tabs-trigger-fg: var(--color-tabs-fg);
+  --color-tabs-trigger-solid-fg: var(--color-tabs-fg-secondary);
+  --color-tabs-trigger-fg-selected: var(--color-tabs-active);
+  --color-tabs-trigger-bg-selected: var(--color-tabs-active);
+  --color-tabs-trigger-bg-outline-selected: oklch(
+    from var(--color-tabs-active) l c h /
+    0.1
+  );
+
+  --color-tabs-trigger-bg-hover: oklch(
+    from var(--color-tabs-bg) calc(l - var(--surface-increment) * 2) c h
+  );
+
+  /* === INDICATOR === */
+  --color-tabs-indicator-bg: var(--color-tabs-active);
+  --width-tabs-indicator: 2px;
+  --height-tabs-indicator: 2px;
+
+  /* === CONTENT === */
+  --color-tabs-content-fg: var(--color-tabs-fg-primary);
+
+  /* === FOCUS RING === */
+  --color-tabs-ring: var(--color-ring);
+
+  /* === PADDING === */
+  /* Trigger padding */
+  --padding-tabs-trigger-sm: var(--spacing-100) var(--spacing-150);
+  --padding-tabs-trigger-md: var(--spacing-150) var(--spacing-200);
+  --padding-tabs-trigger-lg: var(--spacing-200) var(--spacing-250);
+
+  /* Content padding */
+  --spacing-tabs-content-sm: var(--spacing-200);
+  --spacing-tabs-content-md: var(--spacing-250);
+  --spacing-tabs-content-lg: var(--spacing-350);
+
+  /* === TYPOGRAPHY === */
+  --text-tabs-trigger-sm: var(--text-sm);
+  --text-tabs-trigger-md: var(--text-md);
+  --text-tabs-trigger-lg: var(--text-lg);
+
+  --text-tabs-content-sm: var(--text-sm);
+  --text-tabs-content-md: var(--text-md);
+  --text-tabs-content-lg: var(--text-lg);
+
+  /* === BORDER & RADIUS === */
+  --border-width-tabs: var(--border-width-md);
+  --color-tabs-border: var(--color-border-primary);
+  --color-tabs-border-selected: var(--color-tabs-active);
+  --radius-tabs: 0;
+  --radius-tabs-trigger: 0;
+  --radius-tabs-indicator: 0;
+
+  /* === DISABLED STATE === */
+  --opacity-tabs-disabled: var(--opacity-disabled);
+}

package/src/tokens/components/molecules/_toast.css

@@ -0,0 +1,77 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-toast-bg: var(--color-highlight);
+  --color-toast-fg: var(--color-fg-dark);
+  --color-toast-error: var(--color-danger);
+  --color-toast-success: var(--color-success);
+  --color-toast-info: var(--color-info);
+  --color-toast-warning: var(--color-warning);
+
+  /* === TYPE SPECIFIC COLORS === */
+  /* Error */
+  --color-toast-error-bg: var(--color-toast-error);
+  --color-toast-error-border: var(--color-toast-error);
+  --color-toast-error-title: var(--color-toast-fg);
+  --color-toast-error-icon: var(--color-toast-fg);
+
+  /* Success */
+  --color-toast-success-bg: var(--color-toast-success);
+  --color-toast-success-border: var(--color-toast-success);
+  --color-toast-success-title: var(--color-toast-fg);
+  --color-toast-success-icon: var(--color-toast-fg);
+
+  /* Info */
+  --color-toast-info-bg: var(--color-toast-info);
+  --color-toast-info-border: var(--color-toast-info);
+  --color-toast-info-title: var(--color-toast-fg);
+  --color-toast-info-icon: var(--color-toast-fg);
+
+  /* Warning */
+  --color-toast-warning-bg: var(--color-toast-warning);
+  --color-toast-warning-border: var(--color-toast-warning);
+  --color-toast-warning-title: var(--color-toast-fg);
+  --color-toast-warning-icon: var(--color-toast-fg);
+
+  /* === CLOSE BUTTON === */
+  --color-toast-close-fg: var(--color-toast-fg);
+  --color-toast-close-fg-hover: var(--color-fg-primary);
+
+  /* === ROOT === */
+  --spacing-toast-width: 360px;
+
+  /* === SPACING === */
+  --padding-toast-root: var(--spacing-250);
+  --gap-toast-content: var(--spacing-200);
+  --spacing-toast-description-gap: var(--spacing-100);
+
+  /* === TYPOGRAPHY === */
+  --font-weight-toast-title: var(--font-weight-medium);
+  --text-toast-title-size: var(--text-md);
+  --text-toast-description-size: var(--text-sm);
+  --text-toast-icon-size: var(--text-lg);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-toast: var(--border-width-sm);
+  --radius-toast-root: var(--radius-sm);
+}
+
+/* Icons */
+@utility token-icon-toast-success {
+  @apply icon-[mdi--check-circle];
+}
+
+@utility token-icon-toast-error {
+  @apply icon-[mdi--alert-circle];
+}
+
+@utility token-icon-toast-warning {
+  @apply icon-[mdi--alert];
+}
+
+@utility token-icon-toast-info {
+  @apply icon-[mdi--information];
+}
+
+@utility token-icon-toast-close {
+  @apply icon-[mdi--close];
+}