@tokis/theme 1.0.0

package/src/components/tabs.css

@@ -0,0 +1,152 @@
+/* ============================================================
+   Tokis — Tabs
+   ============================================================ */
+
+.tokis-tabs-root {
+  display: flex;
+  flex-direction: column;
+}
+.tokis-tabs-root--vertical {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+/* ── Tab List ───────────────────────────────────────────────── */
+
+.tokis-tabs-list {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tokis-color-border);
+  gap: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex-shrink: 0;
+  -webkit-overflow-scrolling: touch;
+}
+.tokis-tabs-list::-webkit-scrollbar { display: none; }
+
+.tokis-tabs-root--vertical .tokis-tabs-list {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--tokis-color-border);
+  align-items: flex-start;
+  min-width: 160px;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+/* Pills variant */
+.tokis-tabs-list--pills {
+  border-bottom: none;
+  background: var(--tokis-color-neutral-100);
+  border-radius: var(--tokis-radius-lg);
+  padding: var(--tokis-spacing-1);
+  gap: var(--tokis-spacing-1);
+}
+
+/* ── Trigger ────────────────────────────────────────────────── */
+
+.tokis-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-4);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: inherit;
+  color: var(--tokis-text-secondary);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--tokis-duration-fast) var(--tokis-ease-out),
+    border-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  margin-bottom: -1px;
+  border-radius: var(--tokis-radius-md) var(--tokis-radius-md) 0 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tokis-tabs-trigger:hover {
+  color: var(--tokis-text-primary);
+}
+
+.tokis-tabs-trigger[data-active="true"] {
+  color: var(--tokis-color-primary);
+  border-bottom-color: var(--tokis-color-primary);
+}
+
+.tokis-tabs-trigger:focus-visible {
+  outline: 2px solid var(--tokis-color-primary);
+  outline-offset: -2px;
+  border-radius: var(--tokis-radius-sm);
+}
+
+.tokis-tabs-trigger[data-disabled="true"],
+.tokis-tabs-trigger[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Pills trigger */
+.tokis-tabs-list--pills .tokis-tabs-trigger {
+  border-bottom: none;
+  border-radius: var(--tokis-radius-md);
+  margin-bottom: 0;
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3);
+}
+.tokis-tabs-list--pills .tokis-tabs-trigger:hover {
+  background: var(--tokis-color-neutral-200);
+  color: var(--tokis-text-primary);
+}
+.tokis-tabs-list--pills .tokis-tabs-trigger[data-active="true"] {
+  background: var(--tokis-color-surface-raised);
+  color: var(--tokis-text-primary);
+  box-shadow: var(--tokis-shadow-sm);
+}
+
+/* Vertical trigger */
+.tokis-tabs-root--vertical .tokis-tabs-trigger {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  border-radius: var(--tokis-radius-md) 0 0 var(--tokis-radius-md);
+  margin-bottom: 0;
+  margin-right: -1px;
+  width: 100%;
+  justify-content: flex-start;
+}
+.tokis-tabs-root--vertical .tokis-tabs-trigger[data-active="true"] {
+  border-right-color: var(--tokis-color-primary);
+  background: var(--tokis-color-primary-subtle);
+  color: var(--tokis-color-primary);
+}
+
+/* ── Panel ──────────────────────────────────────────────────── */
+
+.tokis-tabs-panel {
+  padding: var(--tokis-spacing-5) 0;
+  outline: none;
+  animation: tokis-tab-fade-in var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+.tokis-tabs-root--vertical .tokis-tabs-panel {
+  padding: 0 0 0 var(--tokis-spacing-6);
+  flex: 1;
+  animation: none;
+}
+.tokis-tabs-panel[hidden] { display: none; }
+
+@keyframes tokis-tab-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-tabs-trigger { transition: none; }
+  .tokis-tabs-panel   { animation: none; }
+}

package/src/components/timeline.css

@@ -0,0 +1,125 @@
+.tokis-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.tokis-timeline__item {
+  display: flex;
+  gap: var(--tokis-spacing-4);
+  position: relative;
+}
+
+.tokis-timeline__track {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.tokis-timeline__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--tokis-radius-full);
+  background: var(--tokis-color-surface-raised);
+  border: 2px solid var(--tokis-color-border);
+  color: var(--tokis-text-secondary);
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.tokis-timeline__dot--success {
+  background: color-mix(in srgb, var(--tokis-color-success) 15%, transparent);
+  border-color: var(--tokis-color-success);
+  color: var(--tokis-color-success);
+}
+
+.tokis-timeline__dot--error {
+  background: color-mix(in srgb, var(--tokis-color-error) 15%, transparent);
+  border-color: var(--tokis-color-error);
+  color: var(--tokis-color-error);
+}
+
+.tokis-timeline__dot--warning {
+  background: color-mix(in srgb, var(--tokis-color-warning) 15%, transparent);
+  border-color: var(--tokis-color-warning);
+  color: var(--tokis-color-warning);
+}
+
+.tokis-timeline__dot--info {
+  background: color-mix(in srgb, var(--tokis-color-info) 15%, transparent);
+  border-color: var(--tokis-color-info);
+  color: var(--tokis-color-info);
+}
+
+.tokis-timeline__connector {
+  width: 2px;
+  flex: 1;
+  min-height: var(--tokis-spacing-4);
+  background: var(--tokis-color-border);
+  margin-top: var(--tokis-spacing-1);
+  margin-bottom: var(--tokis-spacing-1);
+}
+
+.tokis-timeline__content {
+  flex: 1;
+  padding-bottom: var(--tokis-spacing-6);
+  padding-top: var(--tokis-spacing-1);
+}
+
+.tokis-timeline__header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--tokis-spacing-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--tokis-spacing-1);
+}
+
+.tokis-timeline__title {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-primary);
+  line-height: var(--tokis-line-height-normal);
+}
+
+.tokis-timeline__date {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+  white-space: nowrap;
+}
+
+.tokis-timeline__desc {
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-secondary);
+  line-height: var(--tokis-line-height-normal);
+}
+
+[data-theme='dark'] .tokis-timeline__dot:not(.tokis-timeline__dot--success):not(.tokis-timeline__dot--error):not(.tokis-timeline__dot--warning):not(.tokis-timeline__dot--info) {
+  background: var(--tokis-color-surface-raised);
+  border-color: var(--tokis-color-border);
+}
+
+[data-theme='dark'] .tokis-timeline__dot--success {
+  background: color-mix(in srgb, var(--tokis-color-success) 20%, transparent);
+}
+
+[data-theme='dark'] .tokis-timeline__dot--error {
+  background: color-mix(in srgb, var(--tokis-color-error) 20%, transparent);
+}
+
+[data-theme='dark'] .tokis-timeline__dot--warning {
+  background: color-mix(in srgb, var(--tokis-color-warning) 20%, transparent);
+}
+
+[data-theme='dark'] .tokis-timeline__dot--info {
+  background: color-mix(in srgb, var(--tokis-color-info) 20%, transparent);
+}
+
+[data-theme='dark'] .tokis-timeline__connector {
+  background: var(--tokis-color-border);
+}

package/src/components/toggle.css

@@ -0,0 +1,103 @@
+/* ── ToggleButton ────────────────────────────────────────── */
+
+.tokis-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tokis-spacing-2);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-md);
+  background: var(--tokis-color-surface);
+  color: var(--tokis-text-secondary);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: var(--tokis-font-family);
+  cursor: pointer;
+  transition: all var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+.tokis-toggle--sm { padding: 4px var(--tokis-spacing-2); font-size: var(--tokis-font-size-xs); }
+.tokis-toggle--md { padding: var(--tokis-spacing-2) var(--tokis-spacing-3); }
+.tokis-toggle--lg { padding: var(--tokis-spacing-3) var(--tokis-spacing-4); font-size: var(--tokis-font-size-base); }
+
+.tokis-toggle:hover {
+  background: var(--tokis-color-surface-hover);
+  border-color: var(--tokis-color-border-strong);
+  color: var(--tokis-text-primary);
+}
+
+.tokis-toggle--pressed {
+  background: var(--tokis-color-primary-subtle);
+  border-color: var(--tokis-color-primary);
+  color: var(--tokis-color-primary);
+}
+
+.tokis-toggle--pressed:hover {
+  background: var(--tokis-color-primary-subtle);
+}
+
+.tokis-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tokis-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+/* ── ToggleGroup ─────────────────────────────────────────── */
+
+.tokis-toggle-group {
+  display: inline-flex;
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-md);
+  overflow: hidden;
+}
+
+.tokis-toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tokis-spacing-2);
+  background: var(--tokis-color-surface);
+  border: none;
+  border-right: 1px solid var(--tokis-color-border);
+  color: var(--tokis-text-secondary);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: var(--tokis-font-family);
+  cursor: pointer;
+  transition: all var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+.tokis-toggle-group__item:last-child { border-right: none; }
+
+.tokis-toggle-group__item--sm { padding: 4px var(--tokis-spacing-2); font-size: var(--tokis-font-size-xs); }
+.tokis-toggle-group__item--md { padding: var(--tokis-spacing-2) var(--tokis-spacing-3); }
+.tokis-toggle-group__item--lg { padding: var(--tokis-spacing-3) var(--tokis-spacing-4); }
+
+.tokis-toggle-group__item:hover {
+  background: var(--tokis-color-surface-hover);
+  color: var(--tokis-text-primary);
+}
+
+.tokis-toggle-group__item--active {
+  background: var(--tokis-color-primary-subtle);
+  color: var(--tokis-color-primary);
+}
+
+.tokis-toggle-group__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tokis-toggle-group__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-toggle,
+  .tokis-toggle-group__item { transition: none; }
+}

package/src/components/tooltip.css

@@ -0,0 +1,113 @@
+/* ============================================================
+   Tokis — Tooltip & Popover
+   ============================================================ */
+
+/* ── Tooltip ────────────────────────────────────────────────── */
+
+.tokis-tooltip-content {
+  position: fixed;
+  z-index: var(--tokis-z-tooltip);
+  background: var(--tokis-color-neutral-900);
+  color: var(--tokis-text-inverse);
+  font-size: var(--tokis-font-size-xs);
+  font-weight: var(--tokis-font-weight-medium);
+  line-height: var(--tokis-line-height-normal);
+  padding: var(--tokis-spacing-1) var(--tokis-spacing-2);
+  border-radius: var(--tokis-radius-md);
+  white-space: normal;
+  max-width: 260px;
+  pointer-events: none;
+  box-shadow: var(--tokis-shadow-lg);
+  animation: tokis-tooltip-in var(--tokis-duration-fast) var(--tokis-ease-out);
+  word-break: break-word;
+}
+
+[data-theme="dark"] .tokis-tooltip-content {
+  background: var(--tokis-color-neutral-100);
+  color: var(--tokis-text-primary);
+  border: 1px solid var(--tokis-color-border);
+}
+
+/* Placement modifiers */
+.tokis-tooltip-content[data-placement="top"]    { transform: translateX(-50%); }
+.tokis-tooltip-content[data-placement="bottom"] { transform: translateX(-50%); }
+.tokis-tooltip-content[data-placement="left"]   { transform: translateY(-50%); }
+.tokis-tooltip-content[data-placement="right"]  { transform: translateY(-50%); }
+
+/* ── Popover ────────────────────────────────────────────────── */
+
+.tokis-popover-content {
+  position: absolute;
+  z-index: var(--tokis-z-popover);
+  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-4);
+  min-width: 200px;
+  max-width: 360px;
+  animation: tokis-popover-in var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+}
+
+.tokis-popover-title {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-primary);
+  margin-bottom: var(--tokis-spacing-1);
+  padding-right: var(--tokis-spacing-6);
+}
+
+.tokis-popover-description {
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-secondary);
+  line-height: var(--tokis-line-height-normal);
+}
+
+.tokis-popover-close {
+  position: absolute;
+  top: var(--tokis-spacing-3);
+  right: var(--tokis-spacing-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--tokis-radius-sm);
+  color: var(--tokis-text-tertiary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out), color var(--tokis-duration-fast) var(--tokis-ease-out);
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-popover-close:hover {
+  background: var(--tokis-color-surface-hover);
+  color: var(--tokis-text-primary);
+}
+.tokis-popover-close:focus-visible {
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+}
+
+/* ── Animations ─────────────────────────────────────────────── */
+
+@keyframes tokis-tooltip-in {
+  /* Use standalone 'scale' property so it doesn't conflict with the
+     positioning 'transform: translateX(-50%)' on the same element */
+  from { opacity: 0; scale: 0.92; }
+  to   { opacity: 1; scale: 1; }
+}
+
+@keyframes tokis-popover-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-tooltip-content { animation: none; }
+  .tokis-popover-content { animation: none; }
+  .tokis-popover-close   { transition: none; }
+}

package/src/components/treeview.css

@@ -0,0 +1,107 @@
+.tokis-treeview {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-primary);
+  user-select: none;
+}
+
+.tokis-treeview__group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tokis-treeview__item {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  padding-top: var(--tokis-spacing-1);
+  padding-bottom: var(--tokis-spacing-1);
+  padding-right: var(--tokis-spacing-2);
+  border-radius: var(--tokis-radius-md);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    color var(--tokis-duration-fast) var(--tokis-ease-out);
+  min-height: 32px;
+}
+
+.tokis-treeview__item:hover:not(.tokis-treeview__item--disabled) {
+  background: var(--tokis-color-surface-hover);
+}
+
+.tokis-treeview__item:focus-visible {
+  outline: 2px solid var(--tokis-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.tokis-treeview__item--selected {
+  background: color-mix(in srgb, var(--tokis-color-primary) 12%, transparent);
+  color: var(--tokis-color-primary);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-treeview__item--selected:hover {
+  background: color-mix(in srgb, var(--tokis-color-primary) 18%, transparent);
+}
+
+.tokis-treeview__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tokis-treeview__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--tokis-text-tertiary);
+  transition: transform var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+.tokis-treeview__chevron--open {
+  transform: rotate(90deg);
+}
+
+.tokis-treeview__leaf-spacer {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.tokis-treeview__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--tokis-text-secondary);
+}
+
+.tokis-treeview__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--tokis-line-height-normal);
+}
+
+[data-theme='dark'] .tokis-treeview__item--selected {
+  background: color-mix(in srgb, var(--tokis-color-primary) 20%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-treeview__chevron,
+  .tokis-treeview__item {
+    transition: none;
+  }
+}

package/src/components/virtual-list.css

@@ -0,0 +1,19 @@
+/* ── VirtualizedList ─────────────────────────────────────── */
+
+.tokis-virtual-list {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tokis-color-border) transparent;
+}
+
+.tokis-virtual-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.tokis-virtual-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tokis-virtual-list::-webkit-scrollbar-thumb {
+  background: var(--tokis-color-border);
+  border-radius: var(--tokis-radius-full);
+}

package/src/index.css

@@ -0,0 +1,6 @@
+/* TOKIS Theme — Full bundle */
+@import "./base/reset.css";
+@import "./base/variables.css";
+@import "./components/index.css";
+@import "./utilities/index.css";
+

package/src/utilities/index.css

@@ -0,0 +1,2 @@
+@import "./layout.css";
+

package/src/utilities/layout.css

@@ -0,0 +1,28 @@
+/* ============================================================
+   Tokis — Layout utilities: Box, Stack, Grid, Container
+   ============================================================ */
+
+.tokis-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--tokis-spacing-4);
+  padding-right: var(--tokis-spacing-4);
+}
+@media (min-width: 640px)  { .tokis-container { max-width: 640px;  padding-left: var(--tokis-spacing-6); padding-right: var(--tokis-spacing-6); } }
+@media (min-width: 768px)  { .tokis-container { max-width: 768px; } }
+@media (min-width: 1024px) { .tokis-container { max-width: 1024px; } }
+@media (min-width: 1280px) { .tokis-container { max-width: 1280px; } }
+@media (min-width: 1536px) { .tokis-container { max-width: 1536px; } }
+.tokis-container--fluid { max-width: none; }
+
+.tokis-stack { display: flex; }
+.tokis-stack--v { flex-direction: column; }
+.tokis-stack--h { flex-direction: row; }
+.tokis-stack--wrap { flex-wrap: wrap; }
+/* Gap scale via data-gap attribute handled in JS */
+
+.tokis-grid { display: grid; width: 100%; }
+
+.tokis-box { display: block; }
+