@tokis/theme 1.0.0

package/src/components/index.css

@@ -0,0 +1,40 @@
+@import "./button.css";
+@import "./input.css";
+@import "./checkbox.css";
+@import "./switch.css";
+@import "./select.css";
+@import "./slider.css";
+@import "./dialog.css";
+@import "./drawer.css";
+@import "./tabs.css";
+@import "./accordion.css";
+@import "./tooltip.css";
+@import "./avatar.css";
+@import "./alert.css";
+@import "./progress.css";
+@import "./card.css";
+@import "./navigation.css";
+@import "./extended.css";
+@import "./codeblock.css";
+@import "./snackbar.css";
+@import "./pagination.css";
+@import "./timeline.css";
+@import "./treeview.css";
+@import "./statistic.css";
+@import "./emptystate.css";
+@import "./result.css";
+@import "./stepper.css";
+@import "./bottom-nav.css";
+@import "./nav-rail.css";
+@import "./app-bar.css";
+@import "./circular-progress.css";
+@import "./confirm-dialog.css";
+@import "./hover-card.css";
+@import "./context-menu.css";
+@import "./dropdown.css";
+@import "./command-palette.css";
+@import "./search-field.css";
+@import "./toggle.css";
+@import "./charts.css";
+@import "./virtual-list.css";
+@import "./infinite-scroll.css";

package/src/components/infinite-scroll.css

@@ -0,0 +1,45 @@
+/* ── InfiniteScroll ──────────────────────────────────────── */
+
+.tokis-infinite-scroll {
+  display: flex;
+  flex-direction: column;
+}
+
+.tokis-infinite-scroll__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tokis-spacing-6);
+}
+
+.tokis-infinite-scroll__spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--tokis-color-border);
+  border-top-color: var(--tokis-color-primary);
+  border-radius: 50%;
+  animation: tokis-inf-spin 0.6s linear infinite;
+}
+
+@keyframes tokis-inf-spin {
+  to { transform: rotate(360deg); }
+}
+
+.tokis-infinite-scroll__end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tokis-spacing-4);
+  color: var(--tokis-text-tertiary);
+  font-size: var(--tokis-font-size-sm);
+}
+
+.tokis-infinite-scroll__sentinel {
+  height: 1px;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-infinite-scroll__spinner { animation: none; }
+}

package/src/components/input.css

@@ -0,0 +1,201 @@
+/* ============================================================
+   Tokis — Input / TextField
+   ============================================================ */
+
+.tokis-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-1);
+  width: 100%;
+}
+
+.tokis-label {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  color: var(--tokis-text-primary);
+  line-height: 1.5;
+}
+.tokis-label--required::after {
+  content: ' *';
+  color: var(--tokis-color-error);
+}
+
+.tokis-helper-text {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-secondary);
+  line-height: 1.4;
+}
+.tokis-helper-text--error { color: var(--tokis-color-error); }
+
+/* ── Wrapper ────────────────────────────────────────────────── */
+
+.tokis-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Input ──────────────────────────────────────────────────── */
+
+.tokis-input {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--tokis-spacing-3);
+  font-size: var(--tokis-font-size-sm);
+  font-family: inherit;
+  color: var(--tokis-text-primary);
+  background: var(--tokis-color-surface-raised);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-md);
+  transition:
+    border-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    box-shadow var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  appearance: none;
+}
+.tokis-input::placeholder { color: var(--tokis-text-tertiary); }
+
+.tokis-input:hover:not(:disabled):not([aria-invalid="true"]):not(:focus) {
+  border-color: var(--tokis-color-border-strong);
+}
+
+.tokis-input:focus-visible:not(:disabled) {
+  border-color: var(--tokis-color-primary);
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+/* Legacy :focus for non-focus-visible browsers */
+.tokis-input:focus:not(:focus-visible):not(:disabled) {
+  border-color: var(--tokis-color-primary);
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+.tokis-input:disabled {
+  background: var(--tokis-color-neutral-100);
+  color: var(--tokis-text-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.tokis-input[aria-invalid="true"] {
+  border-color: var(--tokis-color-error);
+}
+.tokis-input[aria-invalid="true"]:focus,
+.tokis-input[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring-error);
+}
+
+/* ── Sizes ──────────────────────────────────────────────────── */
+
+.tokis-input--sm {
+  height: 32px;
+  font-size: var(--tokis-font-size-xs);
+  border-radius: var(--tokis-radius-sm);
+  padding: 0 var(--tokis-spacing-2);
+}
+.tokis-input--lg {
+  height: 48px;
+  font-size: var(--tokis-font-size-md);
+  border-radius: var(--tokis-radius-lg);
+  padding: 0 var(--tokis-spacing-4);
+}
+
+/* ── Adornments ─────────────────────────────────────────────── */
+
+.tokis-input--with-start { padding-left: 38px; }
+.tokis-input--with-end   { padding-right: 38px; }
+
+.tokis-input-adornment {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--tokis-text-tertiary);
+  width: 38px;
+  height: 100%;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.tokis-input-adornment--start { left: 0; }
+.tokis-input-adornment--end   { right: 0; pointer-events: auto; }
+
+/* ── Password Toggle ────────────────────────────────────────── */
+
+.tokis-input-password-toggle {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 100%;
+  background: none;
+  border: none;
+  color: var(--tokis-text-tertiary);
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--tokis-duration-fast) var(--tokis-ease-out);
+  flex-shrink: 0;
+  outline: none;
+  border-radius: 0 var(--tokis-radius-md) var(--tokis-radius-md) 0;
+}
+.tokis-input-password-toggle:hover { color: var(--tokis-text-secondary); }
+.tokis-input-password-toggle:focus-visible {
+  color: var(--tokis-color-primary);
+  box-shadow: inset 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+/* ── Textarea ───────────────────────────────────────────────── */
+
+.tokis-textarea {
+  width: 100%;
+  min-height: 88px;
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3);
+  font-size: var(--tokis-font-size-sm);
+  font-family: inherit;
+  color: var(--tokis-text-primary);
+  background: var(--tokis-color-surface-raised);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-md);
+  resize: vertical;
+  transition:
+    border-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    box-shadow var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  line-height: var(--tokis-line-height-normal);
+  appearance: none;
+}
+.tokis-textarea::placeholder { color: var(--tokis-text-tertiary); }
+
+.tokis-textarea:hover:not(:disabled):not([aria-invalid="true"]):not(:focus) {
+  border-color: var(--tokis-color-border-strong);
+}
+
+.tokis-textarea:focus,
+.tokis-textarea:focus-visible {
+  border-color: var(--tokis-color-primary);
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+.tokis-textarea[aria-invalid="true"] {
+  border-color: var(--tokis-color-error);
+}
+.tokis-textarea[aria-invalid="true"]:focus,
+.tokis-textarea[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring-error);
+}
+
+.tokis-textarea:disabled {
+  background: var(--tokis-color-neutral-100);
+  color: var(--tokis-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-input,
+  .tokis-textarea {
+    transition: none;
+  }
+}

package/src/components/nav-rail.css

@@ -0,0 +1,104 @@
+/* ── NavigationRail ──────────────────────────────────────── */
+
+.tokis-nav-rail {
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  background: var(--tokis-color-surface);
+  border-right: 1px solid var(--tokis-color-border);
+  height: 100%;
+  align-items: stretch;
+}
+
+.tokis-nav-rail__header {
+  padding: var(--tokis-spacing-4) var(--tokis-spacing-2) var(--tokis-spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--tokis-color-border);
+}
+
+.tokis-nav-rail__items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: var(--tokis-spacing-2) 0;
+  gap: var(--tokis-spacing-1);
+  overflow-y: auto;
+}
+
+.tokis-nav-rail__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-1);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--tokis-text-tertiary);
+  transition: color var(--tokis-duration-fast) var(--tokis-ease-out),
+              background var(--tokis-duration-fast) var(--tokis-ease-out);
+  font-family: var(--tokis-font-family);
+  border-radius: var(--tokis-radius-md);
+  margin: 0 var(--tokis-spacing-1);
+}
+
+.tokis-nav-rail__item:hover {
+  background: var(--tokis-color-surface-hover);
+  color: var(--tokis-text-secondary);
+}
+
+.tokis-nav-rail__item--active {
+  color: var(--tokis-color-primary);
+  background: var(--tokis-color-primary-subtle);
+}
+
+.tokis-nav-rail__item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+.tokis-nav-rail__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.tokis-nav-rail__badge {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--tokis-color-error);
+  color: #fff;
+  font-size: 10px;
+  font-weight: var(--tokis-font-weight-bold);
+  border-radius: var(--tokis-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tokis-nav-rail__label {
+  font-size: 10px;
+  font-weight: var(--tokis-font-weight-medium);
+  text-align: center;
+}
+
+.tokis-nav-rail__footer {
+  padding: var(--tokis-spacing-2);
+  border-top: 1px solid var(--tokis-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-nav-rail__item { transition: none; }
+}

package/src/components/navigation.css

@@ -0,0 +1,273 @@
+/* ============================================================
+   Tokis — Menu, Breadcrumbs, Pagination, Link, Typography
+   ============================================================ */
+
+/* ── Menu ───────────────────────────────────────────────────── */
+
+.tokis-menu-content {
+  background: var(--tokis-color-surface-overlay);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-xl);
+  box-shadow: var(--tokis-shadow-xl);
+  padding: var(--tokis-spacing-1) 0;
+  min-width: 180px;
+  z-index: var(--tokis-z-dropdown);
+  animation: tokis-dropdown-in var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  overflow: hidden;
+}
+
+.tokis-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3);
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-primary);
+  cursor: pointer;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  min-height: 36px;
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-menu-item:hover,
+.tokis-menu-item[data-focused="true"] {
+  background: var(--tokis-color-surface-hover);
+}
+.tokis-menu-item:focus-visible {
+  background: var(--tokis-color-surface-hover);
+  outline: 2px solid var(--tokis-color-primary);
+  outline-offset: -2px;
+}
+
+.tokis-menu-item--destructive { color: var(--tokis-color-error); }
+.tokis-menu-item--destructive:hover,
+.tokis-menu-item--destructive[data-focused="true"] {
+  background: var(--tokis-color-error-subtle);
+}
+
+.tokis-menu-item[data-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tokis-menu-item__icon {
+  flex-shrink: 0;
+  color: var(--tokis-text-tertiary);
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.tokis-menu-item__label { flex: 1; }
+.tokis-menu-item__shortcut {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+  margin-left: auto;
+  padding-left: var(--tokis-spacing-4);
+  font-variant-numeric: tabular-nums;
+}
+.tokis-menu-item__indicator {
+  flex-shrink: 0;
+  color: var(--tokis-color-primary);
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tokis-menu-separator {
+  height: 1px;
+  background: var(--tokis-color-border);
+  margin: var(--tokis-spacing-1) 0;
+}
+.tokis-menu-group-label {
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3) var(--tokis-spacing-1);
+  font-size: var(--tokis-font-size-xs);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--tokis-letter-spacing-wide);
+  user-select: none;
+}
+
+@keyframes tokis-dropdown-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── Breadcrumbs ────────────────────────────────────────────── */
+
+.tokis-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tokis-breadcrumbs-item {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-secondary);
+}
+.tokis-breadcrumbs-item--current {
+  color: var(--tokis-text-primary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+.tokis-breadcrumbs-separator {
+  color: var(--tokis-text-tertiary);
+  margin: 0 var(--tokis-spacing-1);
+  font-size: var(--tokis-font-size-xs);
+  user-select: none;
+}
+.tokis-breadcrumbs-link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--tokis-radius-xs);
+  outline: none;
+  transition: color var(--tokis-duration-fast) var(--tokis-ease-out);
+  padding: 0 1px;
+}
+.tokis-breadcrumbs-link:hover {
+  color: var(--tokis-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tokis-breadcrumbs-link:focus-visible {
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+  color: var(--tokis-text-primary);
+}
+
+/* ── Pagination ─────────────────────────────────────────────── */
+
+.tokis-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-1);
+}
+
+.tokis-pagination-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--tokis-radius-md);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: inherit;
+  color: var(--tokis-text-secondary);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--tokis-duration-fast) var(--tokis-ease-out),
+    color var(--tokis-duration-fast) var(--tokis-ease-out),
+    border-color var(--tokis-duration-fast) var(--tokis-ease-out);
+  background: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  font-variant-numeric: tabular-nums;
+}
+.tokis-pagination-item:hover {
+  background: var(--tokis-color-surface-hover);
+  color: var(--tokis-text-primary);
+  border-color: var(--tokis-color-border);
+}
+.tokis-pagination-item:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+.tokis-pagination-item--active {
+  background: var(--tokis-color-primary);
+  color: var(--tokis-text-on-primary);
+  border-color: var(--tokis-color-primary);
+}
+.tokis-pagination-item--active:hover {
+  background: var(--tokis-color-primary-hover);
+  border-color: var(--tokis-color-primary-hover);
+}
+.tokis-pagination-item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tokis-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--tokis-text-tertiary);
+  user-select: none;
+}
+
+/* ── Link ───────────────────────────────────────────────────── */
+
+.tokis-link {
+  color: var(--tokis-text-link);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  cursor: pointer;
+  border-radius: var(--tokis-radius-xs);
+  outline: none;
+  transition:
+    text-decoration-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    color var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+.tokis-link:hover {
+  text-decoration-color: currentColor;
+}
+.tokis-link:focus-visible {
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+  text-decoration-color: currentColor;
+}
+.tokis-link--external::after {
+  content: ' ↗';
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+/* ── Typography ─────────────────────────────────────────────── */
+
+.tokis-text {
+  color: var(--tokis-text-primary);
+  line-height: var(--tokis-line-height-normal);
+}
+.tokis-text--secondary { color: var(--tokis-text-secondary); }
+.tokis-text--tertiary  { color: var(--tokis-text-tertiary); }
+.tokis-text--error     { color: var(--tokis-text-error); }
+.tokis-text--success   { color: var(--tokis-text-success); }
+.tokis-text--warning   { color: var(--tokis-text-warning); }
+.tokis-text--truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+.tokis-text--balance   { text-wrap: balance; }
+
+.tokis-code {
+  font-family: var(--tokis-font-family-mono);
+  font-size: 0.875em;
+  background: var(--tokis-color-neutral-100);
+  color: var(--tokis-color-secondary);
+  padding: 1px 6px;
+  border-radius: var(--tokis-radius-sm);
+  border: 1px solid var(--tokis-color-border);
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-menu-content   { animation: none; }
+  .tokis-menu-item      { transition: none; }
+  .tokis-pagination-item { transition: none; }
+  .tokis-link { transition: none; }
+  .tokis-breadcrumbs-link { transition: none; }
+}