@weeehaoooz/talos-ui 0.1.0

package/styles/_buttons.scss

@@ -0,0 +1,442 @@
+/* Talos UI Button Design System Styles */
+
+@keyframes talos-ripple {
+  0% {
+    width: 0px;
+    height: 0px;
+    opacity: 0.6;
+  }
+
+  100% {
+    width: 300px;
+    height: 300px;
+    opacity: 0;
+  }
+}
+
+@keyframes talos-btn-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.talos-btn,
+.btn {
+  position: relative;
+  overflow: hidden;
+
+  &.talos-badge-host {
+    overflow: visible;
+  }
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: var(--talos-btn-font-family, inherit);
+  font-weight: var(--talos-btn-font-weight, 600);
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--talos-btn-border-radius, 0.375rem);
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  box-sizing: border-box;
+  transition: var(--talos-btn-transition, all 0.18s cubic-bezier(0.4, 0, 0.2, 1));
+  height: var(--talos-btn-height-md, 2.25rem);
+  padding: 0 var(--talos-btn-padding-x-md, 0.875rem);
+  font-size: var(--talos-btn-font-size-md, 0.8125rem);
+  color: var(--talos-text-color, #0f172a);
+  background-color: var(--talos-card-bg, #ffffff);
+
+  /* Touch / Click Ripple Effect pseudo-element */
+  &::after {
+    content: '';
+    position: absolute;
+    top: var(--ripple-y, 50%);
+    left: var(--ripple-x, 50%);
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: var(--talos-btn-ripple-color, rgba(255, 255, 255, 0.35));
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading)::after,
+  &.is-rippling::after {
+    animation: talos-ripple 0.5s ease-out;
+  }
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.2)));
+  }
+
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  &.is-loading {
+    cursor: wait;
+    pointer-events: none;
+    opacity: 0.85;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 0.875em;
+      height: 0.875em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: talos-btn-spin 0.75s linear infinite;
+      flex-shrink: 0;
+    }
+  }
+}
+
+/* Variants */
+.talos-btn-primary,
+.btn-primary {
+  background-color: var(--talos-btn-primary-bg, var(--talos-primary-color, var(--primary-color, #2563eb)));
+  color: var(--talos-btn-primary-text, #ffffff);
+  border-color: transparent;
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-primary-hover, var(--talos-primary-hover, var(--primary-hover, #1d4ed8)));
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-primary-active, var(--talos-primary-active, var(--primary-active, #1e40af)));
+  }
+}
+
+.talos-btn-secondary,
+.btn-secondary {
+  background-color: var(--talos-btn-secondary-bg, #475569);
+  color: var(--talos-btn-secondary-text, #ffffff);
+  border-color: transparent;
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-secondary-hover, #334155);
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-secondary-active, #1e293b);
+  }
+}
+
+.talos-btn-outline,
+.btn-outline {
+  background-color: var(--talos-btn-outline-bg, var(--talos-card-bg, #ffffff));
+  border-color: var(--talos-btn-outline-border, var(--talos-border-color, #cbd5e1));
+  color: var(--talos-btn-outline-text, var(--talos-text-color, #334155));
+
+  --talos-btn-ripple-color: var(--talos-primary-light-hover, rgba(37, 99, 235, 0.15));
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-outline-hover-bg, var(--talos-bg-color, #f8fafc));
+    border-color: var(--talos-btn-outline-hover-border, var(--talos-border-hover, #64748b));
+    color: var(--talos-btn-outline-hover-text, var(--talos-text-color, #0f172a));
+  }
+}
+
+.talos-btn-ghost,
+.btn-ghost,
+.talos-btn-subtle,
+.btn-subtle {
+  background-color: var(--talos-btn-ghost-bg, transparent);
+  border-color: transparent;
+  color: var(--talos-btn-ghost-text, var(--talos-text-muted, #64748b));
+
+  --talos-btn-ripple-color: rgba(15, 23, 42, 0.12);
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    transform: none;
+    box-shadow: none;
+    background-color: var(--talos-btn-ghost-hover-bg, var(--talos-primary-light, var(--primary-light, #f1f5f9)));
+    color: var(--talos-btn-ghost-hover-text, var(--talos-text-color, #0f172a));
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    transform: none;
+    box-shadow: none;
+    background-color: var(--talos-btn-ghost-active-bg, var(--talos-primary-light-hover, var(--primary-light-hover, #e2e8f0)));
+  }
+}
+
+.talos-btn-danger,
+.btn-danger {
+  background-color: var(--talos-btn-danger-bg, var(--talos-error-color, #ef4444));
+  color: var(--talos-btn-danger-text, #ffffff);
+  border-color: transparent;
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-danger-hover, #dc2626);
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-danger-active, #b91c1c);
+  }
+}
+
+.talos-btn-success,
+.btn-success {
+  background-color: var(--talos-btn-success-bg, #16a34a);
+  color: var(--talos-btn-success-text, #ffffff);
+  border-color: transparent;
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-success-hover, #15803d);
+  }
+
+  &:active:not(:disabled):not(.is-disabled):not(.is-loading) {
+    background-color: var(--talos-btn-success-active, #166534);
+  }
+}
+
+.talos-btn-link,
+.btn-link {
+  background: transparent;
+  border: none;
+  color: var(--talos-btn-link-text, var(--talos-primary-color, var(--primary-color, #2563eb)));
+  padding: 0;
+  height: auto;
+
+  &:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
+    text-decoration: underline;
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+/* Sizes */
+.talos-btn-sm,
+.btn-sm {
+  height: var(--talos-btn-height-sm, 2rem);
+  padding: 0 var(--talos-btn-padding-x-sm, 0.625rem);
+  font-size: var(--talos-btn-font-size-sm, 0.75rem);
+}
+
+.talos-btn-md,
+.btn-md {
+  height: var(--talos-btn-height-md, 2.25rem);
+  padding: 0 var(--talos-btn-padding-x-md, 0.875rem);
+  font-size: var(--talos-btn-font-size-md, 0.8125rem);
+}
+
+.talos-btn-lg,
+.btn-lg {
+  height: var(--talos-btn-height-lg, 2.625rem);
+  padding: 0 var(--talos-btn-padding-x-lg, 1.125rem);
+  font-size: var(--talos-btn-font-size-lg, 0.875rem);
+}
+
+.talos-btn-icon,
+.btn-icon {
+  padding: 0 !important;
+  width: var(--talos-btn-height-md, 2.25rem);
+  height: var(--talos-btn-height-md, 2.25rem);
+  min-width: var(--talos-btn-height-md, 2.25rem);
+  justify-content: center;
+  flex-shrink: 0;
+
+  &.talos-btn-sm,
+  &.btn-sm {
+    width: var(--talos-btn-height-sm, 2rem);
+    height: var(--talos-btn-height-sm, 2rem);
+    min-width: var(--talos-btn-height-sm, 2rem);
+  }
+
+  &.talos-btn-md,
+  &.btn-md {
+    width: var(--talos-btn-height-md, 2.25rem);
+    height: var(--talos-btn-height-md, 2.25rem);
+    min-width: var(--talos-btn-height-md, 2.25rem);
+  }
+
+  &.talos-btn-lg,
+  &.btn-lg {
+    width: var(--talos-btn-height-lg, 2.625rem);
+    height: var(--talos-btn-height-lg, 2.625rem);
+    min-width: var(--talos-btn-height-lg, 2.625rem);
+  }
+}
+
+/* Shapes & Display Modifiers */
+.talos-btn-pill,
+.btn-pill {
+  border-radius: 9999px;
+}
+
+.talos-btn-full,
+.btn-block {
+  display: flex;
+  width: 100%;
+}
+
+/* ─── Button & Affix Micro-Interactions & Animations ─── */
+@keyframes talos-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes talos-spin-once {
+  0% {
+    transform: rotate(0deg) scale(0.92);
+  }
+  60% {
+    transform: rotate(380deg) scale(1.08);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes talos-pop {
+  0% {
+    transform: scale(0.85);
+  }
+  50% {
+    transform: scale(1.18);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes talos-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20%, 60% {
+    transform: translateX(-3px);
+  }
+  40%, 80% {
+    transform: translateX(3px);
+  }
+}
+
+@keyframes talos-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.06);
+    opacity: 0.88;
+  }
+}
+
+@keyframes talos-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-4px);
+  }
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+.talos-btn,
+.btn,
+.talos-affix-btn,
+.talos-affix-element {
+  /* Continuous spin on icon inside button/affix */
+  &.talos-anim-spin svg,
+  &.talos-anim-spin [lucideIcon],
+  &.talos-anim-spin i,
+  &.talos-anim-spin .lucide,
+  &.affix-anim-spin svg,
+  &.affix-anim-spin [lucideIcon],
+  &.affix-anim-spin i,
+  &.affix-anim-spin .lucide {
+    animation: talos-spin 0.8s linear infinite;
+  }
+
+  /* Single 360° spin on icon inside button/affix */
+  &.talos-anim-spin-once svg,
+  &.talos-anim-spin-once [lucideIcon],
+  &.talos-anim-spin-once i,
+  &.talos-anim-spin-once .lucide,
+  &.affix-anim-spin-once svg,
+  &.affix-anim-spin-once [lucideIcon],
+  &.affix-anim-spin-once i,
+  &.affix-anim-spin-once .lucide {
+    animation: talos-spin-once 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  /* Scale Pop micro-interaction */
+  &.talos-anim-pop,
+  &.affix-anim-pop {
+    animation: talos-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  /* Shake micro-interaction */
+  &.talos-anim-shake,
+  &.affix-anim-shake {
+    animation: talos-shake 0.4s ease-in-out;
+  }
+
+  /* Pulse micro-interaction */
+  &.talos-anim-pulse,
+  &.affix-anim-pulse {
+    animation: talos-pulse 1.2s ease-in-out infinite;
+  }
+
+  /* Bounce micro-interaction */
+  &.talos-anim-bounce,
+  &.affix-anim-bounce {
+    animation: talos-bounce 0.5s ease-out;
+  }
+
+  /* Success Feedback State */
+  &.talos-feedback-success,
+  &.affix-feedback-success {
+    color: var(--talos-success-color, #10b981) !important;
+    animation: talos-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+    svg, [lucideIcon], i, .lucide {
+      color: var(--talos-success-color, #10b981) !important;
+    }
+  }
+
+  /* Error Feedback State */
+  &.talos-feedback-error,
+  &.affix-feedback-error {
+    color: var(--talos-error-color, #ef4444) !important;
+    animation: talos-shake 0.4s ease-in-out;
+
+    svg, [lucideIcon], i, .lucide {
+      color: var(--talos-error-color, #ef4444) !important;
+    }
+  }
+}

package/styles/_card.scss

@@ -0,0 +1,18 @@
+/* Talos UI Card Tokens and Utilities */
+
+:root {
+  --talos-card-radius: var(--border-radius-lg, 0.75rem);
+  --talos-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
+  --talos-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --talos-card-header-border: var(--talos-border-subtle, #f1f5f9);
+  --talos-card-footer-border: var(--talos-border-subtle, #f1f5f9);
+}
+
+[data-theme='dark'],
+.dark-theme,
+.dark {
+  --talos-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --talos-card-shadow-hover: 0 12px 28px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  --talos-card-header-border: var(--talos-border-subtle, rgba(255, 255, 255, 0.06));
+  --talos-card-footer-border: var(--talos-border-subtle, rgba(255, 255, 255, 0.06));
+}

package/styles/_dialog.scss

@@ -0,0 +1,116 @@
+/* Talos Dialog / Modal Styles */
+
+/* Base Overlay Panel */
+.cdk-overlay-pane:has(.talos-dialog-panel) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  box-sizing: border-box;
+}
+
+.talos-dialog-panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--talos-dialog-bg, var(--talos-card-bg, #ffffff));
+  border: 1px solid var(--talos-dialog-border, var(--talos-border-color, #e2e8f0));
+  border-radius: var(--talos-dialog-radius, 0.75rem);
+  box-shadow: var(--talos-dialog-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
+  overflow: hidden;
+  position: relative;
+  outline: none;
+  animation: talos-dialog-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+
+  /* Sizing Presets */
+  &.talos-dialog-size-auto {
+    width: auto;
+    min-width: 20rem;
+    max-width: min(90vw, 1200px);
+    max-height: calc(100vh - 3rem);
+  }
+
+  &.talos-dialog-size-sm {
+    width: 100%;
+    max-width: 26.25rem; /* ~420px */
+    max-height: calc(100vh - 3rem);
+  }
+
+  &.talos-dialog-size-md {
+    width: 100%;
+    max-width: 35rem; /* ~560px */
+    max-height: calc(100vh - 3rem);
+  }
+
+  &.talos-dialog-size-lg {
+    width: 100%;
+    max-width: 48rem; /* ~768px */
+    max-height: calc(100vh - 3rem);
+  }
+
+  &.talos-dialog-size-xl {
+    width: 100%;
+    max-width: 64rem; /* ~1024px */
+    max-height: calc(100vh - 3rem);
+  }
+
+  &.talos-dialog-size-fullscreen {
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    border-radius: 0 !important;
+    border: none !important;
+  }
+}
+
+.cdk-overlay-pane:has(.talos-dialog-size-fullscreen) {
+  padding: 0 !important;
+}
+
+/* Backdrop Styles */
+.talos-dialog-backdrop {
+  background-color: var(--talos-dialog-backdrop-bg, rgba(15, 23, 42, 0.45));
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.talos-dialog-backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    background-color: var(--talos-dialog-backdrop-blur-bg, rgba(15, 23, 42, 0.3));
+  }
+
+  &.talos-dialog-backdrop-blur-md {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    background-color: var(--talos-dialog-backdrop-blur-bg, rgba(15, 23, 42, 0.35));
+  }
+
+  &.talos-dialog-backdrop-blur-lg {
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    background-color: var(--talos-dialog-backdrop-blur-bg, rgba(15, 23, 42, 0.4));
+  }
+}
+
+/* Micro Animations */
+@keyframes talos-dialog-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateY(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes talos-dialog-exit {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.96) translateY(6px);
+  }
+}

package/styles/_drop-zone.scss

@@ -0,0 +1,19 @@
+/* Talos UI Drop Zone / File Upload Component Styles */
+
+.talos-drop-zone-host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.talos-file-drop-target {
+  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.is-drag-over {
+    border-color: var(--talos-dropzone-drag-border, var(--talos-primary-color)) !important;
+    background-color: var(--talos-dropzone-drag-bg, var(--talos-primary-light)) !important;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
+  }
+}