@weeehaoooz/talos-ui 0.1.0

package/styles/_slide-toggle.scss

@@ -0,0 +1,171 @@
+/* Talos UI Sliding Toggle (Switch) Styling */
+
+.talos-slide-toggle-host {
+  display: inline-block;
+}
+
+.talos-slide-toggle-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--talos-control-font-size, 0.875rem);
+  font-family: inherit;
+  color: var(--talos-text-color, #0f172a);
+  line-height: 1.25;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .talos-slide-toggle-label {
+      color: var(--talos-text-muted, #64748b);
+    }
+  }
+
+  &.label-before {
+    flex-direction: row-reverse;
+  }
+}
+
+.talos-slide-toggle-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  input.talos-slide-toggle {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.talos-slide-toggle-track {
+  --track-width: 2.5rem;
+  --track-height: 1.375rem;
+  --thumb-size: 1.125rem;
+  --thumb-offset: 0.125rem;
+  --thumb-translate-x: 1.125rem;
+  --track-bg: var(--talos-toggle-track-bg, #cbd5e1);
+  --track-bg-hover: var(--talos-toggle-track-bg-hover, #94a3b8);
+  --track-active-bg: var(--talos-primary-color, #2563eb);
+  --track-active-hover: var(--talos-primary-hover, #1d4ed8);
+  --toggle-focus-ring: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.25));
+
+  display: inline-block;
+  position: relative;
+  width: var(--track-width);
+  height: var(--track-height);
+  background-color: var(--track-bg);
+  border-radius: 9999px;
+  box-sizing: border-box;
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .talos-slide-toggle-thumb {
+    position: absolute;
+    top: var(--thumb-offset);
+    left: var(--thumb-offset);
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--talos-toggle-thumb-bg, #ffffff);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2), 0 1px 2px rgba(15, 23, 42, 0.12);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
+  }
+}
+
+/* Hover States */
+.talos-slide-toggle-switch:hover input.talos-slide-toggle:not(:disabled)~.talos-slide-toggle-track {
+  background-color: var(--track-bg-hover);
+}
+
+.talos-slide-toggle-switch:hover input.talos-slide-toggle:checked:not(:disabled)~.talos-slide-toggle-track {
+  background-color: var(--track-active-hover);
+}
+
+/* Checked State */
+input.talos-slide-toggle:checked~.talos-slide-toggle-track {
+  background-color: var(--track-active-bg);
+
+  .talos-slide-toggle-thumb {
+    transform: translateX(var(--thumb-translate-x));
+  }
+}
+
+/* Focus Visible Keyboard Navigation */
+input.talos-slide-toggle:focus-visible~.talos-slide-toggle-track {
+  box-shadow: var(--toggle-focus-ring);
+}
+
+/* Sizing Variations */
+input.talos-slide-toggle.slide-toggle-sm~.talos-slide-toggle-track {
+  --track-width: 2rem;
+  --track-height: 1.125rem;
+  --thumb-size: 0.875rem;
+  --thumb-offset: 0.125rem;
+  --thumb-translate-x: 0.875rem;
+}
+
+input.talos-slide-toggle.slide-toggle-md~.talos-slide-toggle-track {
+  --track-width: 2.5rem;
+  --track-height: 1.375rem;
+  --thumb-size: 1.125rem;
+  --thumb-offset: 0.125rem;
+  --thumb-translate-x: 1.125rem;
+}
+
+input.talos-slide-toggle.slide-toggle-lg~.talos-slide-toggle-track {
+  --track-width: 3rem;
+  --track-height: 1.625rem;
+  --thumb-size: 1.375rem;
+  --thumb-offset: 0.125rem;
+  --thumb-translate-x: 1.375rem;
+}
+
+/* Color Variants */
+input.talos-slide-toggle.talos-slide-toggle-primary~.talos-slide-toggle-track {
+  --track-active-bg: var(--talos-primary-color, #2563eb);
+  --track-active-hover: var(--talos-primary-hover, #1d4ed8);
+  --toggle-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
+}
+
+input.talos-slide-toggle.talos-slide-toggle-secondary~.talos-slide-toggle-track {
+  --track-active-bg: #475569;
+  --track-active-hover: #334155;
+  --toggle-focus-ring: 0 0 0 3px rgba(71, 85, 105, 0.25);
+}
+
+input.talos-slide-toggle.talos-slide-toggle-success~.talos-slide-toggle-track {
+  --track-active-bg: #16a34a;
+  --track-active-hover: #15803d;
+  --toggle-focus-ring: 0 0 0 3px rgba(22, 163, 74, 0.25);
+}
+
+input.talos-slide-toggle.talos-slide-toggle-danger~.talos-slide-toggle-track {
+  --track-active-bg: var(--talos-error-color, #ef4444);
+  --track-active-hover: #dc2626;
+  --toggle-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.25);
+}
+
+/* Invalid / Error State */
+input.talos-slide-toggle.is-invalid~.talos-slide-toggle-track {
+  --track-bg: #fca5a5;
+  --track-bg-hover: #f87171;
+  --toggle-focus-ring: 0 0 0 3px rgba(239, 68, 68, 0.25);
+
+  &:not(:checked) {
+    border: 1px solid var(--talos-error-color, #ef4444);
+  }
+}

package/styles/_status-tag.scss

@@ -0,0 +1,108 @@
+/* ==========================================================================
+   Talos UI Design System - Status Tag & Indicators Global Tokens & Styles
+   ========================================================================== */
+
+:root {
+  /* Status Base Metric Tokens */
+  --talos-status-font-family: inherit;
+  --talos-status-font-weight: 600;
+  --talos-status-radius-rounded: var(--talos-radius-md);
+  --talos-status-radius-pill: var(--talos-radius-full);
+  --talos-status-radius-square: var(--talos-radius-sm);
+
+  /* NEW - Info (Sky / Cyan) */
+  --talos-status-new-color: var(--talos-info-text);
+  --talos-status-new-bg: var(--talos-info-subtle-bg);
+  --talos-status-new-border: var(--talos-info-subtle-border);
+  --talos-status-new-solid-bg: var(--talos-info-solid-bg);
+  --talos-status-new-solid-text: var(--talos-info-solid-text);
+
+  /* PENDING - Warning (Amber) */
+  --talos-status-pending-color: var(--talos-warning-text);
+  --talos-status-pending-bg: var(--talos-warning-subtle-bg);
+  --talos-status-pending-border: var(--talos-warning-subtle-border);
+  --talos-status-pending-solid-bg: var(--talos-warning-solid-bg);
+  --talos-status-pending-solid-text: var(--talos-warning-solid-text);
+
+  /* IN-PROGRESS - Primary (Royal Blue / Indigo) */
+  --talos-status-inprogress-color: var(--talos-primary-text);
+  --talos-status-inprogress-bg: var(--talos-primary-subtle-bg);
+  --talos-status-inprogress-border: var(--talos-primary-subtle-border);
+  --talos-status-inprogress-solid-bg: var(--talos-primary-solid-bg);
+  --talos-status-inprogress-solid-text: var(--talos-primary-solid-text);
+
+  /* PAUSED & RETRYING - Warning Accent (Orange) */
+  --talos-status-paused-color: #c2410c;
+  --talos-status-paused-bg: #fff7ed;
+  --talos-status-paused-border: #fed7aa;
+  --talos-status-paused-solid-bg: #ea580c;
+  --talos-status-paused-solid-text: #ffffff;
+
+  --talos-status-retrying-color: #c2410c;
+  --talos-status-retrying-bg: #fff7ed;
+  --talos-status-retrying-border: #ffedd5;
+  --talos-status-retrying-solid-bg: #ea580c;
+  --talos-status-retrying-solid-text: #ffffff;
+
+  /* SKIPPED - Neutral (Slate) */
+  --talos-status-skipped-color: var(--talos-neutral-text);
+  --talos-status-skipped-bg: var(--talos-neutral-subtle-bg);
+  --talos-status-skipped-border: var(--talos-neutral-subtle-border);
+  --talos-status-skipped-solid-bg: var(--talos-neutral-solid-bg);
+  --talos-status-skipped-solid-text: var(--talos-neutral-solid-text);
+
+  /* SUCCESS - Success (Emerald) */
+  --talos-status-success-color: var(--talos-success-text);
+  --talos-status-success-bg: var(--talos-success-subtle-bg);
+  --talos-status-success-border: var(--talos-success-subtle-border);
+  --talos-status-success-solid-bg: var(--talos-success-solid-bg);
+  --talos-status-success-solid-text: var(--talos-success-solid-text);
+
+  /* COMPLETED - Teal */
+  --talos-status-completed-color: #0f766e;
+  --talos-status-completed-bg: #f0fdfa;
+  --talos-status-completed-border: #99f6e4;
+  --talos-status-completed-solid-bg: #0d9488;
+  --talos-status-completed-solid-text: #ffffff;
+
+  /* ERROR - Danger (Red) */
+  --talos-status-error-color: var(--talos-danger-text);
+  --talos-status-error-bg: var(--talos-danger-subtle-bg);
+  --talos-status-error-border: var(--talos-danger-subtle-border);
+  --talos-status-error-solid-bg: var(--talos-danger-solid-bg);
+  --talos-status-error-solid-text: var(--talos-danger-solid-text);
+
+  /* TERMINATED - Neutral Dark */
+  --talos-status-terminated-color: var(--talos-neutral-text);
+  --talos-status-terminated-bg: var(--talos-neutral-subtle-bg);
+  --talos-status-terminated-border: var(--talos-neutral-subtle-border);
+  --talos-status-terminated-solid-bg: var(--talos-neutral-solid-bg);
+  --talos-status-terminated-solid-text: var(--talos-neutral-solid-text);
+
+  /* EXPIRED - Purple (Violet) */
+  --talos-status-expired-color: var(--talos-purple-text);
+  --talos-status-expired-bg: var(--talos-purple-subtle-bg);
+  --talos-status-expired-border: var(--talos-purple-subtle-border);
+  --talos-status-expired-solid-bg: var(--talos-purple-solid-bg);
+  --talos-status-expired-solid-text: var(--talos-purple-solid-text);
+}
+
+/* Dark Mode Overrides for custom non-semantic statuses */
+:root[data-theme="dark"],
+:root.dark,
+[data-theme="dark"],
+[data-mode="dark"],
+.dark,
+.dark-theme {
+  --talos-status-paused-color: #fb923c;
+  --talos-status-paused-bg: rgba(249, 115, 22, 0.15);
+  --talos-status-paused-border: rgba(249, 115, 22, 0.35);
+
+  --talos-status-retrying-color: #fb923c;
+  --talos-status-retrying-bg: rgba(249, 115, 22, 0.15);
+  --talos-status-retrying-border: rgba(249, 115, 22, 0.35);
+
+  --talos-status-completed-color: #2dd4bf;
+  --talos-status-completed-bg: rgba(20, 184, 166, 0.15);
+  --talos-status-completed-border: rgba(20, 184, 166, 0.35);
+}

package/styles/_timeline.scss

@@ -0,0 +1,19 @@
+/* Talos UI Timeline Styles & Tokens */
+
+:root {
+  --talos-timeline-connector-color: var(--talos-border-color, #e2e8f0);
+  --talos-timeline-connector-width: 2px;
+  --talos-timeline-dot-size: 1.5rem;
+  --talos-timeline-dot-bg: var(--talos-card-bg, #ffffff);
+  --talos-timeline-dot-border: var(--talos-border-color, #cbd5e1);
+  --talos-timeline-dot-color: var(--talos-text-muted, #64748b);
+  --talos-timeline-title-color: var(--talos-text-color, #0f172a);
+  --talos-timeline-desc-color: var(--talos-text-muted, #475569);
+  --talos-timeline-time-color: var(--talos-text-muted, #64748b);
+}
+
+.talos-timeline {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+}

package/styles/_tooltip.scss

@@ -0,0 +1,32 @@
+/* Talos UI Tooltip Design System Styles */
+
+@keyframes talos-tooltip-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.talos-tooltip-panel {
+  pointer-events: none;
+  z-index: 1000;
+  animation: talos-tooltip-appear 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.talos-tooltip-inner {
+  background-color: var(--talos-tooltip-bg, #0f172a);
+  color: var(--talos-tooltip-text, #ffffff);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.3;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}

package/styles/_typography.scss

@@ -0,0 +1,279 @@
+/* ==========================================================================
+   Talos UI Design System - Typography Tokens & Utilities
+   ========================================================================== */
+
+:root {
+  /* ========================================================================
+     1. Primitive Scales (Font Families, Sizes, Weights, Line Heights, Tracking)
+     ======================================================================== */
+
+  /* Font Families */
+  --talos-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --talos-font-display: var(--talos-font-sans);
+
+  /* Global Fallback Aliases */
+  --font-sans: var(--talos-font-sans);
+  --font-mono: var(--talos-font-mono);
+
+  /* Font Weights */
+  --talos-font-weight-light: 300;
+  --talos-font-weight-regular: 400;
+  --talos-font-weight-medium: 500;
+  --talos-font-weight-semibold: 600;
+  --talos-font-weight-bold: 700;
+  --talos-font-weight-extrabold: 800;
+
+  --font-weight-light: var(--talos-font-weight-light);
+  --font-weight-regular: var(--talos-font-weight-regular);
+  --font-weight-medium: var(--talos-font-weight-medium);
+  --font-weight-semibold: var(--talos-font-weight-semibold);
+  --font-weight-bold: var(--talos-font-weight-bold);
+  --font-weight-extrabold: var(--talos-font-weight-extrabold);
+
+  /* Font Sizes (Scale) */
+  --talos-font-size-2xs: 0.6875rem; /* 11px */
+  --talos-font-size-xs: 0.75rem;     /* 12px */
+  --talos-font-size-sm: 0.8125rem;   /* 13px */
+  --talos-font-size-base: 0.875rem;  /* 14px */
+  --talos-font-size-md: 0.875rem;    /* 14px */
+  --talos-font-size-lg: 1rem;        /* 16px */
+  --talos-font-size-xl: 1.125rem;    /* 18px */
+  --talos-font-size-2xl: 1.25rem;    /* 20px */
+  --talos-font-size-3xl: 1.5rem;     /* 24px */
+  --talos-font-size-4xl: 1.875rem;   /* 30px */
+  --talos-font-size-5xl: 2.25rem;    /* 36px */
+
+  --font-size-2xs: var(--talos-font-size-2xs);
+  --font-size-xs: var(--talos-font-size-xs);
+  --font-size-sm: var(--talos-font-size-sm);
+  --font-size-base: var(--talos-font-size-base);
+  --font-size-md: var(--talos-font-size-md);
+  --font-size-lg: var(--talos-font-size-lg);
+  --font-size-xl: var(--talos-font-size-xl);
+  --font-size-2xl: var(--talos-font-size-2xl);
+  --font-size-3xl: var(--talos-font-size-3xl);
+  --font-size-4xl: var(--talos-font-size-4xl);
+  --font-size-5xl: var(--talos-font-size-5xl);
+
+  /* Line Heights */
+  --talos-line-height-none: 1;
+  --talos-line-height-tight: 1.25;
+  --talos-line-height-snug: 1.375;
+  --talos-line-height-normal: 1.5;
+  --talos-line-height-relaxed: 1.625;
+  --talos-line-height-loose: 2;
+
+  --line-height-none: var(--talos-line-height-none);
+  --line-height-tight: var(--talos-line-height-tight);
+  --line-height-snug: var(--talos-line-height-snug);
+  --line-height-normal: var(--talos-line-height-normal);
+  --line-height-relaxed: var(--talos-line-height-relaxed);
+  --line-height-loose: var(--talos-line-height-loose);
+
+  /* Letter Spacing (Tracking) */
+  --talos-letter-spacing-tighter: -0.04em;
+  --talos-letter-spacing-tight: -0.02em;
+  --talos-letter-spacing-normal: 0em;
+  --talos-letter-spacing-wide: 0.025em;
+  --talos-letter-spacing-wider: 0.05em;
+  --talos-letter-spacing-widest: 0.1em;
+
+  --letter-spacing-tight: var(--talos-letter-spacing-tight);
+  --letter-spacing-normal: var(--talos-letter-spacing-normal);
+  --letter-spacing-wide: var(--talos-letter-spacing-wide);
+
+  /* ========================================================================
+     2. Semantic / Role-Based Typography Tokens
+     ======================================================================== */
+
+  /* Display & Page Titles */
+  --talos-type-display-size: var(--talos-font-size-5xl);
+  --talos-type-display-weight: var(--talos-font-weight-extrabold);
+  --talos-type-display-line-height: var(--talos-line-height-tight);
+  --talos-type-display-letter-spacing: var(--talos-letter-spacing-tight);
+
+  /* Headings */
+  --talos-type-h1-size: var(--talos-font-size-4xl);
+  --talos-type-h1-weight: var(--talos-font-weight-bold);
+  --talos-type-h1-line-height: var(--talos-line-height-tight);
+  --talos-type-h1-letter-spacing: var(--talos-letter-spacing-tight);
+
+  --talos-type-h2-size: var(--talos-font-size-3xl);
+  --talos-type-h2-weight: var(--talos-font-weight-semibold);
+  --talos-type-h2-line-height: var(--talos-line-height-tight);
+  --talos-type-h2-letter-spacing: var(--talos-letter-spacing-tight);
+
+  --talos-type-h3-size: var(--talos-font-size-2xl);
+  --talos-type-h3-weight: var(--talos-font-weight-semibold);
+  --talos-type-h3-line-height: var(--talos-line-height-snug);
+  --talos-type-h3-letter-spacing: var(--talos-letter-spacing-normal);
+
+  --talos-type-h4-size: var(--talos-font-size-xl);
+  --talos-type-h4-weight: var(--talos-font-weight-semibold);
+  --talos-type-h4-line-height: var(--talos-line-height-snug);
+
+  --talos-type-h5-size: var(--talos-font-size-lg);
+  --talos-type-h5-weight: var(--talos-font-weight-semibold);
+  --talos-type-h5-line-height: var(--talos-line-height-snug);
+
+  --talos-type-card-title-size: var(--talos-font-size-lg);
+  --talos-type-card-title-weight: var(--talos-font-weight-semibold);
+  --talos-type-card-title-line-height: var(--talos-line-height-snug);
+
+  /* Body Text */
+  --talos-type-body-lg-size: var(--talos-font-size-lg);
+  --talos-type-body-lg-line-height: var(--talos-line-height-normal);
+
+  --talos-type-body-size: var(--talos-font-size-base);
+  --talos-type-body-weight: var(--talos-font-weight-regular);
+  --talos-type-body-line-height: var(--talos-line-height-normal);
+
+  --talos-type-body-sm-size: var(--talos-font-size-sm);
+  --talos-type-body-sm-weight: var(--talos-font-weight-regular);
+  --talos-type-body-sm-line-height: var(--talos-line-height-snug);
+
+  /* Captions, Helpers & Overlines */
+  --talos-type-caption-size: var(--talos-font-size-xs);
+  --talos-type-caption-weight: var(--talos-font-weight-regular);
+  --talos-type-caption-line-height: var(--talos-line-height-normal);
+  --talos-type-caption-color: var(--talos-text-muted);
+
+  --talos-type-overline-size: var(--talos-font-size-2xs);
+  --talos-type-overline-weight: var(--talos-font-weight-bold);
+  --talos-type-overline-letter-spacing: var(--talos-letter-spacing-wider);
+  --talos-type-overline-transform: uppercase;
+
+  /* Code / Monospace */
+  --talos-type-code-font: var(--talos-font-mono);
+  --talos-type-code-size: 0.875em;
+}
+
+/* ==========================================================================
+   Global Base Typography Application
+   ========================================================================== */
+html,
+body {
+  font-family: var(--talos-font-sans);
+  font-size: 16px;
+  line-height: var(--talos-line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Form Controls & Buttons Typography Inheritance */
+button,
+input,
+select,
+textarea,
+optgroup {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--talos-type-code-font);
+}
+
+/* ==========================================================================
+   Typography Utility Classes
+   ========================================================================== */
+.talos-display {
+  font-size: var(--talos-type-display-size);
+  font-weight: var(--talos-type-display-weight);
+  line-height: var(--talos-type-display-line-height);
+  letter-spacing: var(--talos-type-display-letter-spacing);
+}
+
+.talos-h1 {
+  font-size: var(--talos-type-h1-size);
+  font-weight: var(--talos-type-h1-weight);
+  line-height: var(--talos-type-h1-line-height);
+  letter-spacing: var(--talos-type-h1-letter-spacing);
+}
+
+.talos-h2 {
+  font-size: var(--talos-type-h2-size);
+  font-weight: var(--talos-type-h2-weight);
+  line-height: var(--talos-type-h2-line-height);
+  letter-spacing: var(--talos-type-h2-letter-spacing);
+}
+
+.talos-h3 {
+  font-size: var(--talos-type-h3-size);
+  font-weight: var(--talos-type-h3-weight);
+  line-height: var(--talos-type-h3-line-height);
+  letter-spacing: var(--talos-type-h3-letter-spacing);
+}
+
+.talos-h4 {
+  font-size: var(--talos-type-h4-size);
+  font-weight: var(--talos-type-h4-weight);
+  line-height: var(--talos-type-h4-line-height);
+}
+
+.talos-h5,
+.talos-card-title {
+  font-size: var(--talos-type-card-title-size);
+  font-weight: var(--talos-type-card-title-weight);
+  line-height: var(--talos-type-card-title-line-height);
+}
+
+.talos-body-lg {
+  font-size: var(--talos-type-body-lg-size);
+  line-height: var(--talos-type-body-lg-line-height);
+}
+
+.talos-body {
+  font-size: var(--talos-type-body-size);
+  font-weight: var(--talos-type-body-weight);
+  line-height: var(--talos-type-body-line-height);
+}
+
+.talos-body-sm {
+  font-size: var(--talos-type-body-sm-size);
+  font-weight: var(--talos-type-body-sm-weight);
+  line-height: var(--talos-type-body-sm-line-height);
+}
+
+.talos-caption {
+  font-size: var(--talos-type-caption-size);
+  font-weight: var(--talos-type-caption-weight);
+  line-height: var(--talos-type-caption-line-height);
+  color: var(--talos-type-caption-color);
+}
+
+.talos-overline {
+  font-size: var(--talos-type-overline-size);
+  font-weight: var(--talos-type-overline-weight);
+  letter-spacing: var(--talos-type-overline-letter-spacing);
+  text-transform: var(--talos-type-overline-transform);
+}
+
+.talos-mono {
+  font-family: var(--talos-font-mono);
+}
+
+.talos-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.talos-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.talos-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}