@tokis/theme 1.0.0

package/src/components/slider.css

@@ -0,0 +1,115 @@
+/* ============================================================
+   Tokis — Slider / Range Input
+   ============================================================ */
+
+.tokis-slider-root {
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+/* ── Track wrapper (positions both track and thumb) ──────────── */
+
+.tokis-slider-track-wrapper {
+  position: relative;
+  width: 100%;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.tokis-slider-root[data-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Track ──────────────────────────────────────────────────── */
+
+.tokis-slider-track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: var(--tokis-color-neutral-200);
+  border-radius: var(--tokis-radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.tokis-slider-range {
+  position: absolute;
+  height: 100%;
+  background: var(--tokis-color-primary);
+  border-radius: var(--tokis-radius-full);
+}
+
+/* ── Thumb ──────────────────────────────────────────────────── */
+
+.tokis-slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--tokis-radius-full);
+  background: var(--tokis-color-surface-raised);
+  border: 2px solid var(--tokis-color-primary);
+  box-shadow: var(--tokis-shadow-sm);
+  transform: translateX(-50%) translateY(-50%);
+  transition:
+    box-shadow var(--tokis-duration-fast) var(--tokis-ease-out),
+    transform var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  cursor: grab;
+  will-change: transform;
+}
+
+.tokis-slider-thumb:hover {
+  transform: translateX(-50%) translateY(-50%) scale(1.2);
+  box-shadow:
+    var(--tokis-shadow-sm),
+    0 0 0 6px var(--tokis-color-focus-ring);
+}
+
+.tokis-slider-thumb:active {
+  cursor: grabbing;
+  transform: translateX(-50%) translateY(-50%) scale(1.1);
+}
+
+.tokis-slider-thumb:focus-visible {
+  box-shadow:
+    var(--tokis-shadow-sm),
+    0 0 0 4px var(--tokis-color-focus-ring);
+}
+
+/* ── Marks ──────────────────────────────────────────────────── */
+
+.tokis-slider-marks {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--tokis-spacing-2);
+}
+
+.tokis-slider-mark-label {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+}
+
+/* ── Sizes ──────────────────────────────────────────────────── */
+
+.tokis-slider-root--sm .tokis-slider-track-wrapper { height: 16px; }
+.tokis-slider-root--sm .tokis-slider-track { height: 2px; }
+.tokis-slider-root--sm .tokis-slider-thumb { width: 14px; height: 14px; }
+
+.tokis-slider-root--lg .tokis-slider-track-wrapper { height: 32px; }
+.tokis-slider-root--lg .tokis-slider-track { height: 6px; }
+.tokis-slider-root--lg .tokis-slider-thumb { width: 22px; height: 22px; }
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-slider-thumb {
+    transition: none;
+  }
+}

package/src/components/snackbar.css

@@ -0,0 +1,234 @@
+/* ============================================================
+   Tokis — Snackbar / Toast
+   Positioned notification toasts rendered via Portal
+   ============================================================ */
+
+/* ── Container ───────────────────────────────────────────── */
+
+.tokis-snackbar-container {
+  position: fixed;
+  bottom: var(--tokis-spacing-6);
+  right: var(--tokis-spacing-6);
+  z-index: var(--tokis-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-2);
+  pointer-events: none;
+  max-width: 400px;
+  width: calc(100vw - var(--tokis-spacing-6) * 2);
+}
+
+/* Placement variants */
+.tokis-snackbar-container--bottom-left {
+  right: auto;
+  left: var(--tokis-spacing-6);
+}
+
+.tokis-snackbar-container--bottom-center {
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tokis-snackbar-container--top-right {
+  bottom: auto;
+  top: var(--tokis-spacing-6);
+}
+
+.tokis-snackbar-container--top-center {
+  bottom: auto;
+  top: var(--tokis-spacing-6);
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* ── Snackbar Toast ──────────────────────────────────────── */
+
+.tokis-snackbar {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--tokis-spacing-3);
+  padding: var(--tokis-spacing-3) var(--tokis-spacing-4);
+  border-radius: var(--tokis-radius-lg);
+  pointer-events: auto;
+  min-width: 280px;
+  box-shadow: var(--tokis-shadow-xl);
+  border: 1px solid;
+  border-left: 3px solid transparent;
+  animation: tokis-snackbar-in var(--tokis-duration-normal) var(--tokis-ease-spring) both;
+
+  /* Glass-effect dark surface for light theme */
+  background: rgba(17, 24, 39, 0.95);
+  border-color: rgba(255, 255, 255, 0.08);
+  color: var(--tokis-color-neutral-100);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+[data-theme='dark'] .tokis-snackbar {
+  /* Glass-effect light surface for dark theme */
+  background: rgba(249, 250, 251, 0.95);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: var(--tokis-color-neutral-900);
+}
+
+/* ── Variants ────────────────────────────────────────────── */
+
+.tokis-snackbar--success {
+  background: rgba(17, 24, 39, 0.97);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-left-color: var(--tokis-color-success);
+  color: var(--tokis-color-neutral-100);
+}
+
+[data-theme='dark'] .tokis-snackbar--success {
+  background: rgba(249, 250, 251, 0.97);
+  border-color: rgba(0, 0, 0, 0.08);
+  border-left-color: var(--tokis-color-success);
+  color: var(--tokis-color-neutral-900);
+}
+
+.tokis-snackbar--error {
+  background: rgba(17, 24, 39, 0.97);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-left-color: var(--tokis-color-error);
+  color: var(--tokis-color-neutral-100);
+}
+
+[data-theme='dark'] .tokis-snackbar--error {
+  background: rgba(249, 250, 251, 0.97);
+  border-color: rgba(0, 0, 0, 0.08);
+  border-left-color: var(--tokis-color-error);
+  color: var(--tokis-color-neutral-900);
+}
+
+.tokis-snackbar--warning {
+  background: rgba(17, 24, 39, 0.97);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-left-color: var(--tokis-color-warning);
+  color: var(--tokis-color-neutral-100);
+}
+
+[data-theme='dark'] .tokis-snackbar--warning {
+  background: rgba(249, 250, 251, 0.97);
+  border-color: rgba(0, 0, 0, 0.08);
+  border-left-color: var(--tokis-color-warning);
+  color: var(--tokis-color-neutral-900);
+}
+
+/* ── Body ────────────────────────────────────────────────── */
+
+.tokis-snackbar__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-1);
+}
+
+.tokis-snackbar__title {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  line-height: 1.4;
+}
+
+.tokis-snackbar__body > div {
+  font-size: var(--tokis-font-size-sm);
+  line-height: 1.5;
+  opacity: 0.85;
+}
+
+/* ── Action Button ───────────────────────────────────────── */
+
+.tokis-snackbar__action {
+  display: inline-flex;
+  align-items: center;
+  background: rgb(255 255 255 / 0.1);
+  border: 1px solid rgb(255 255 255 / 0.2);
+  border-radius: var(--tokis-radius-md);
+  padding: var(--tokis-spacing-1) var(--tokis-spacing-3);
+  margin-top: var(--tokis-spacing-2);
+  font-size: var(--tokis-font-size-xs);
+  font-weight: var(--tokis-font-weight-semibold);
+  font-family: var(--tokis-font-family);
+  cursor: pointer;
+  color: currentColor;
+  white-space: nowrap;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out),
+              border-color var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+[data-theme='dark'] .tokis-snackbar__action {
+  background: rgb(0 0 0 / 0.1);
+  border-color: rgb(0 0 0 / 0.15);
+}
+
+.tokis-snackbar__action:hover {
+  background: rgb(255 255 255 / 0.18);
+  border-color: rgb(255 255 255 / 0.35);
+}
+
+[data-theme='dark'] .tokis-snackbar__action:hover {
+  background: rgb(0 0 0 / 0.15);
+  border-color: rgb(0 0 0 / 0.25);
+}
+
+.tokis-snackbar__action:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+/* ── Close Button ────────────────────────────────────────── */
+
+.tokis-snackbar__close {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: currentColor;
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tokis-radius-sm);
+  transition: opacity var(--tokis-duration-fast) var(--tokis-ease-out),
+              background var(--tokis-duration-fast) var(--tokis-ease-out);
+  margin-top: 1px;
+}
+
+.tokis-snackbar__close:hover {
+  opacity: 1;
+  background: rgb(255 255 255 / 0.1);
+}
+
+[data-theme='dark'] .tokis-snackbar__close:hover {
+  background: rgb(0 0 0 / 0.1);
+}
+
+.tokis-snackbar__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+/* ── Animation ───────────────────────────────────────────── */
+
+@keyframes tokis-snackbar-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-snackbar {
+    animation: none;
+  }
+}

package/src/components/statistic.css

@@ -0,0 +1,70 @@
+/* ── Statistic ───────────────────────────────────────────── */
+
+.tokis-statistic {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-1);
+}
+
+.tokis-statistic__label {
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-secondary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-statistic__value-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--tokis-spacing-1);
+  flex-wrap: wrap;
+}
+
+.tokis-statistic__prefix {
+  font-size: var(--tokis-font-size-lg);
+  color: var(--tokis-text-secondary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-statistic__value {
+  font-size: var(--tokis-font-size-3xl);
+  font-weight: var(--tokis-font-weight-bold);
+  color: var(--tokis-text-primary);
+  line-height: 1;
+}
+
+.tokis-statistic__suffix {
+  font-size: var(--tokis-font-size-lg);
+  color: var(--tokis-text-secondary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-statistic__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  padding: 2px var(--tokis-spacing-2);
+  border-radius: var(--tokis-radius-full);
+}
+
+.tokis-statistic__trend--up {
+  color: var(--tokis-color-success);
+  background: var(--tokis-color-success-subtle, rgba(5, 150, 105, 0.1));
+}
+
+.tokis-statistic__trend--down {
+  color: var(--tokis-color-error);
+  background: var(--tokis-color-error-subtle, rgba(220, 38, 38, 0.1));
+}
+
+.tokis-statistic__trend--neutral {
+  color: var(--tokis-text-tertiary);
+  background: var(--tokis-color-surface);
+}
+
+.tokis-statistic__desc {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+  margin-top: var(--tokis-spacing-1);
+}

package/src/components/stepper.css

@@ -0,0 +1,131 @@
+/* ── Stepper ─────────────────────────────────────────────── */
+
+.tokis-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tokis-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+}
+
+.tokis-stepper--vertical {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Step */
+.tokis-stepper__step {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+
+.tokis-stepper--vertical .tokis-stepper__step {
+  flex: none;
+  flex-direction: column;
+}
+
+.tokis-stepper__step-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-3);
+}
+
+.tokis-stepper--vertical .tokis-stepper__step-inner {
+  align-items: flex-start;
+}
+
+/* Circle */
+.tokis-stepper__circle {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  border: 2px solid;
+  transition: all var(--tokis-duration-normal) var(--tokis-ease-out);
+}
+
+.tokis-stepper__circle--completed {
+  background: var(--tokis-color-success);
+  border-color: var(--tokis-color-success);
+  color: #fff;
+}
+
+.tokis-stepper__circle--active {
+  background: var(--tokis-color-primary);
+  border-color: var(--tokis-color-primary);
+  color: var(--tokis-text-on-primary);
+}
+
+.tokis-stepper__circle--pending {
+  background: var(--tokis-color-surface);
+  border-color: var(--tokis-color-border);
+  color: var(--tokis-text-tertiary);
+}
+
+.tokis-stepper__circle--error {
+  background: var(--tokis-color-error);
+  border-color: var(--tokis-color-error);
+  color: #fff;
+}
+
+/* Connector */
+.tokis-stepper__connector {
+  flex: 1;
+  height: 2px;
+  background: var(--tokis-color-border);
+  margin: 0 var(--tokis-spacing-2);
+  margin-top: 15px;
+  align-self: flex-start;
+  transition: background var(--tokis-duration-normal) var(--tokis-ease-out);
+}
+
+.tokis-stepper__connector--completed {
+  background: var(--tokis-color-success);
+}
+
+.tokis-stepper--vertical .tokis-stepper__connector {
+  width: 2px;
+  height: auto;
+  min-height: 24px;
+  margin: var(--tokis-spacing-1) 0 var(--tokis-spacing-1) 15px;
+  align-self: auto;
+}
+
+/* Text */
+.tokis-stepper__text {
+  min-width: 0;
+}
+
+.tokis-stepper__label {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-primary);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.tokis-stepper__step--pending .tokis-stepper__label {
+  color: var(--tokis-text-tertiary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-stepper__desc {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-secondary);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-stepper__circle,
+  .tokis-stepper__connector { transition: none; }
+}

package/src/components/switch.css

@@ -0,0 +1,107 @@
+/* ============================================================
+   Tokis — Switch (Toggle)
+   ============================================================ */
+
+.tokis-switch-root {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--tokis-spacing-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.tokis-switch-root[data-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Track ──────────────────────────────────────────────────── */
+
+.tokis-switch-track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  margin-top: 2px;
+  background: var(--tokis-color-neutral-300);
+  border-radius: var(--tokis-radius-full);
+  transition:
+    background var(--tokis-duration-normal) var(--tokis-ease-in-out),
+    box-shadow var(--tokis-duration-fast) var(--tokis-ease-out);
+  flex-shrink: 0;
+  outline: none;
+}
+
+.tokis-switch-track:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+.tokis-switch-track[data-checked="true"] {
+  background: var(--tokis-color-primary);
+}
+
+/* ── Thumb ──────────────────────────────────────────────────── */
+
+.tokis-switch-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--tokis-radius-full);
+  background: var(--tokis-text-inverse);
+  box-shadow: var(--tokis-shadow-sm);
+  transition: transform var(--tokis-duration-normal) var(--tokis-ease-spring);
+  pointer-events: none;
+}
+
+.tokis-switch-track[data-checked="true"] .tokis-switch-thumb {
+  transform: translateX(20px);
+}
+
+/* ── Sizes ──────────────────────────────────────────────────── */
+
+.tokis-switch-root--sm .tokis-switch-track {
+  width: 32px;
+  height: 18px;
+}
+.tokis-switch-root--sm .tokis-switch-thumb {
+  width: 12px;
+  height: 12px;
+  top: 3px;
+  left: 3px;
+}
+.tokis-switch-root--sm .tokis-switch-track[data-checked="true"] .tokis-switch-thumb {
+  transform: translateX(14px);
+}
+
+/* ── Label ──────────────────────────────────────────────────── */
+
+.tokis-switch-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tokis-switch-label {
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-primary);
+  line-height: 1.5;
+  display: block;
+}
+
+.tokis-switch-description {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-switch-track,
+  .tokis-switch-thumb {
+    transition: none;
+  }
+}