@tokis/theme 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tokis Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,51 @@
+# /theme
+
+Default visual theme for the Tokis design system — CSS variables, component styles, reset, and typography. Zero-runtime, precompiled CSS.
+
+## Installation
+
+```bash
+npm install /theme
+```
+
+> Or install everything at once: `npm install tokis`
+
+## Usage
+
+Import the full theme (recommended):
+
+```tsx
+import '/theme';
+```
+
+Or import individual layers:
+
+```tsx
+import '/theme/base';           // Variables + reset
+import '/theme/components';     // All component styles
+import '/theme/utilities';      // Utility classes
+```
+
+Or import specific component styles:
+
+```tsx
+import '/theme/base';
+import '/theme/components/button';
+import '/theme/components/dialog';
+```
+
+## What's Included
+
+- **CSS Variables** — Full token set: colors, spacing, radius, shadows, typography, motion, z-index
+- **Reset** — Minimal, opinionated CSS reset
+- **Component Styles** — Styles for every `/react` component
+- **Dark Mode** — Automatic via `[data-theme="dark"]` attribute
+- **Utilities** — Common helper classes
+
+## Documentation
+
+Visit [tokis.dev](https://tokis.dev/docs/theming) for the theming guide.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@tokis/theme",
+  "version": "1.0.0",
+  "description": "Default visual theme for Tokis — CSS variables, component styles, reset, and typography. Zero-runtime, precompiled CSS.",
+  "exports": {
+    ".": "./src/index.css",
+    "./base": "./src/base/index.css",
+    "./base/variables": "./src/base/variables.css",
+    "./base/reset": "./src/base/reset.css",
+    "./components": "./src/components/index.css",
+    "./components/button": "./src/components/button.css",
+    "./components/input": "./src/components/input.css",
+    "./components/checkbox": "./src/components/checkbox.css",
+    "./components/switch": "./src/components/switch.css",
+    "./components/select": "./src/components/select.css",
+    "./components/slider": "./src/components/slider.css",
+    "./components/dialog": "./src/components/dialog.css",
+    "./components/drawer": "./src/components/drawer.css",
+    "./components/tabs": "./src/components/tabs.css",
+    "./components/accordion": "./src/components/accordion.css",
+    "./components/tooltip": "./src/components/tooltip.css",
+    "./components/avatar": "./src/components/avatar.css",
+    "./components/alert": "./src/components/alert.css",
+    "./components/progress": "./src/components/progress.css",
+    "./components/card": "./src/components/card.css",
+    "./components/navigation": "./src/components/navigation.css",
+    "./utilities": "./src/utilities/index.css"
+  },
+  "main": "./src/index.css",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "tokis",
+    "design-system",
+    "css",
+    "theme",
+    "css-variables",
+    "custom-properties",
+    "dark-mode",
+    "light-mode",
+    "theming",
+    "design-tokens",
+    "reset",
+    "typography",
+    "component-styles",
+    "zero-runtime"
+  ],
+  "author": "Tokis Contributors",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tokis-design/tokis.git",
+    "directory": "packages/theme"
+  },
+  "homepage": "https://tokis.dev/docs/theming",
+  "bugs": {
+    "url": "https://github.com/tokis-design/tokis/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/base/index.css

@@ -0,0 +1,19 @@
+/* ============================================================
+   Tokis — Typography base styles
+   ============================================================ */
+
+.tokis-h1, h1 { font-size: var(--tokis-font-size-4xl); font-weight: var(--tokis-font-weight-bold); line-height: var(--tokis-line-height-tight); letter-spacing: var(--tokis-letter-spacing-tight); }
+.tokis-h2, h2 { font-size: var(--tokis-font-size-3xl); font-weight: var(--tokis-font-weight-bold); line-height: var(--tokis-line-height-tight); letter-spacing: var(--tokis-letter-spacing-tight); }
+.tokis-h3, h3 { font-size: var(--tokis-font-size-2xl); font-weight: var(--tokis-font-weight-semibold); line-height: var(--tokis-line-height-tight); }
+.tokis-h4, h4 { font-size: var(--tokis-font-size-xl); font-weight: var(--tokis-font-weight-semibold); line-height: var(--tokis-line-height-tight); }
+.tokis-h5, h5 { font-size: var(--tokis-font-size-lg); font-weight: var(--tokis-font-weight-medium); }
+.tokis-h6, h6 { font-size: var(--tokis-font-size-md); font-weight: var(--tokis-font-weight-medium); }
+
+code, kbd, samp, pre {
+  font-family: var(--tokis-font-family-mono);
+  font-size: 0.9em;
+}
+
+@import "./reset.css";
+@import "./variables.css";
+

package/src/base/reset.css

@@ -0,0 +1,76 @@
+/* ============================================================
+   Tokis — CSS Reset & Base
+   Inspired by modern-normalize, scoped for design system use
+   ============================================================ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--tokis-font-family);
+  font-size: var(--tokis-font-size-md);
+  line-height: 1.5;
+  color: var(--tokis-text-primary);
+  background-color: var(--tokis-color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+button {
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+/* Focus visible — only show ring on keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--tokis-color-primary);
+  outline-offset: 2px;
+  border-radius: var(--tokis-radius-sm);
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+

package/src/base/variables.css

@@ -0,0 +1,206 @@
+/* ============================================================
+   Tokis — Design Token CSS Variables
+   Light theme default + dark theme via [data-theme="dark"]
+   ============================================================ */
+
+:root {
+  /* Primitive Colors */
+  --tokis-color-primary: #0066ff;
+  --tokis-color-primary-hover: #0052cc;
+  --tokis-color-primary-active: #003d99;
+  --tokis-color-primary-subtle: #e6f0ff;
+  --tokis-color-secondary: #7c3aed;
+  --tokis-color-secondary-hover: #6d28d9;
+  --tokis-color-secondary-subtle: #ede9fe;
+  --tokis-color-background: #ffffff;
+  --tokis-color-surface: #f8f9fa;
+  --tokis-color-surface-raised: #ffffff;
+  --tokis-color-surface-overlay: #ffffff;
+  --tokis-color-border: #e2e8f0;
+  --tokis-color-border-strong: #cbd5e1;
+  --tokis-color-error: #dc2626;
+  --tokis-color-error-subtle: #fef2f2;
+  --tokis-color-warning: #d97706;
+  --tokis-color-warning-subtle: #fffbeb;
+  --tokis-color-success: #16a34a;
+  --tokis-color-success-subtle: #f0fdf4;
+  --tokis-color-info: #0284c7;
+  --tokis-color-info-subtle: #f0f9ff;
+
+  /* Neutral scale */
+  --tokis-color-neutral-50:  #f8fafc;
+  --tokis-color-neutral-100: #f1f5f9;
+  --tokis-color-neutral-200: #e2e8f0;
+  --tokis-color-neutral-300: #cbd5e1;
+  --tokis-color-neutral-400: #94a3b8;
+  --tokis-color-neutral-500: #64748b;
+  --tokis-color-neutral-600: #475569;
+  --tokis-color-neutral-700: #334155;
+  --tokis-color-neutral-800: #1e293b;
+  --tokis-color-neutral-900: #0f172a;
+
+  /* Text */
+  --tokis-text-primary:   #0f172a;
+  --tokis-text-secondary: #475569;
+  --tokis-text-tertiary:  #94a3b8;
+  --tokis-text-disabled:  #cbd5e1;
+  --tokis-text-inverse:   #ffffff;
+  --tokis-text-on-primary: #ffffff;
+  --tokis-text-link:      #0066ff;
+  --tokis-text-error:     #dc2626;
+  --tokis-text-success:   #16a34a;
+  --tokis-text-warning:   #d97706;
+
+  /* Spacing */
+  --tokis-spacing-0:   0px;
+  --tokis-spacing-1:   4px;
+  --tokis-spacing-2:   8px;
+  --tokis-spacing-3:   12px;
+  --tokis-spacing-4:   16px;
+  --tokis-spacing-5:   20px;
+  --tokis-spacing-6:   24px;
+  --tokis-spacing-8:   32px;
+  --tokis-spacing-10:  40px;
+  --tokis-spacing-12:  48px;
+  --tokis-spacing-16:  64px;
+  --tokis-spacing-20:  80px;
+  --tokis-spacing-24:  96px;
+
+  /* Typography */
+  --tokis-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Helvetica, Arial, sans-serif;
+  --tokis-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  --tokis-font-size-xs:   0.75rem;
+  --tokis-font-size-sm:   0.875rem;
+  --tokis-font-size-md:   1rem;
+  --tokis-font-size-lg:   1.125rem;
+  --tokis-font-size-xl:   1.25rem;
+  --tokis-font-size-2xl:  1.5rem;
+  --tokis-font-size-3xl:  1.875rem;
+  --tokis-font-size-4xl:  2.25rem;
+  --tokis-font-weight-regular: 400;
+  --tokis-font-weight-medium:  500;
+  --tokis-font-weight-semibold: 600;
+  --tokis-font-weight-bold: 700;
+  --tokis-line-height-tight:  1.25;
+  --tokis-line-height-normal: 1.5;
+  --tokis-line-height-relaxed: 1.75;
+  --tokis-letter-spacing-tight: -0.025em;
+  --tokis-letter-spacing-normal: 0em;
+  --tokis-letter-spacing-wide:  0.025em;
+
+  /* Border Radius */
+  --tokis-radius-none: 0px;
+  --tokis-radius-xs:   2px;
+  --tokis-radius-sm:   4px;
+  --tokis-radius-md:   6px;
+  --tokis-radius-lg:   8px;
+  --tokis-radius-xl:   12px;
+  --tokis-radius-2xl:  16px;
+  --tokis-radius-full: 9999px;
+
+  /* Shadows */
+  --tokis-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tokis-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
+  --tokis-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --tokis-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
+  --tokis-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
+  --tokis-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tokis-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* Focus */
+  --tokis-color-focus-ring: rgb(0 102 255 / 0.15);
+  --tokis-color-focus-ring-error: rgb(220 38 38 / 0.15);
+
+  /* Surface interaction states */
+  --tokis-color-surface-hover:  var(--tokis-color-neutral-100);
+  --tokis-color-surface-active: var(--tokis-color-neutral-200);
+
+  /* Motion */
+  --tokis-duration-fast:    100ms;
+  --tokis-duration-normal:  200ms;
+  --tokis-duration-slow:    300ms;
+  --tokis-duration-slower:  500ms;
+  --tokis-ease-in:          cubic-bezier(0.4, 0, 1, 1);
+  --tokis-ease-out:         cubic-bezier(0, 0, 0.2, 1);
+  --tokis-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
+  --tokis-ease-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* Z-index */
+  --tokis-z-base:     0;
+  --tokis-z-raised:   1;
+  --tokis-z-dropdown: 1000;
+  --tokis-z-sticky:   1100;
+  --tokis-z-overlay:  1200;
+  --tokis-z-modal:    1300;
+  --tokis-z-popover:  1400;
+  --tokis-z-tooltip:  1500;
+  --tokis-z-toast:    1600;
+
+  /* Breakpoints (for reference in JS, not used in CSS directly) */
+  --tokis-breakpoint-sm:  640px;
+  --tokis-breakpoint-md:  768px;
+  --tokis-breakpoint-lg:  1024px;
+  --tokis-breakpoint-xl:  1280px;
+  --tokis-breakpoint-2xl: 1536px;
+}
+
+/* ── Dark Theme ──────────────────────────────────────────── */
+[data-theme="dark"] {
+  --tokis-color-primary: #3b82f6;
+  --tokis-color-primary-hover: #60a5fa;
+  --tokis-color-primary-active: #93c5fd;
+  --tokis-color-primary-subtle: #1e3a5f;
+  --tokis-color-secondary: #a78bfa;
+  --tokis-color-secondary-hover: #c4b5fd;
+  --tokis-color-secondary-subtle: #2e1065;
+  --tokis-color-background: #0f172a;
+  --tokis-color-surface: #1e293b;
+  --tokis-color-surface-raised: #293548;
+  --tokis-color-surface-overlay: #1e293b;
+  --tokis-color-border: #334155;
+  --tokis-color-border-strong: #475569;
+  --tokis-color-error: #f87171;
+  --tokis-color-error-subtle: #450a0a;
+  --tokis-color-warning: #fbbf24;
+  --tokis-color-warning-subtle: #451a03;
+  --tokis-color-success: #4ade80;
+  --tokis-color-success-subtle: #052e16;
+  --tokis-color-info: #38bdf8;
+  --tokis-color-info-subtle: #082f49;
+
+  --tokis-color-neutral-50:  #0f172a;
+  --tokis-color-neutral-100: #1e293b;
+  --tokis-color-neutral-200: #334155;
+  --tokis-color-neutral-300: #475569;
+  --tokis-color-neutral-400: #64748b;
+  --tokis-color-neutral-500: #94a3b8;
+  --tokis-color-neutral-600: #cbd5e1;
+  --tokis-color-neutral-700: #e2e8f0;
+  --tokis-color-neutral-800: #f1f5f9;
+  --tokis-color-neutral-900: #f8fafc;
+
+  --tokis-text-primary:   #f1f5f9;
+  --tokis-text-secondary: #94a3b8;
+  --tokis-text-tertiary:  #64748b;
+  --tokis-text-disabled:  #475569;
+  --tokis-text-inverse:   #0f172a;
+  --tokis-text-on-primary: #ffffff;
+  --tokis-text-link:      #60a5fa;
+  --tokis-text-error:     #f87171;
+  --tokis-text-success:   #4ade80;
+  --tokis-text-warning:   #fbbf24;
+
+  --tokis-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --tokis-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --tokis-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --tokis-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --tokis-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+
+  --tokis-color-focus-ring: rgb(59 130 246 / 0.2);
+  --tokis-color-focus-ring-error: rgb(248 113 113 / 0.2);
+
+  /* Dark mode surface-hover needs to be noticeably different from surface-overlay */
+  --tokis-color-surface-hover:  var(--tokis-color-neutral-200);  /* #334155 vs overlay #1e293b */
+  --tokis-color-surface-active: var(--tokis-color-neutral-300);  /* #475569 */
+}
+

package/src/components/accordion.css

@@ -0,0 +1,124 @@
+/* ============================================================
+   Tokis — Accordion
+   ============================================================ */
+
+.tokis-accordion-root {
+  width: 100%;
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-lg);
+  overflow: hidden;
+}
+.tokis-accordion-root--flush {
+  border: none;
+  border-radius: 0;
+}
+
+/* ── Item ───────────────────────────────────────────────────── */
+
+.tokis-accordion-item {
+  border-bottom: 1px solid var(--tokis-color-border);
+}
+.tokis-accordion-item:last-child {
+  border-bottom: none;
+}
+
+/* ── Trigger ────────────────────────────────────────────────── */
+
+.tokis-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--tokis-spacing-4) var(--tokis-spacing-5);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: inherit;
+  color: var(--tokis-text-primary);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  gap: var(--tokis-spacing-3);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tokis-accordion-trigger:hover {
+  background: var(--tokis-color-surface-hover);
+}
+
+.tokis-accordion-trigger:focus-visible {
+  outline: 2px solid var(--tokis-color-primary);
+  outline-offset: -2px;
+}
+
+.tokis-accordion-trigger[aria-expanded="true"] {
+  color: var(--tokis-color-primary);
+}
+
+.tokis-accordion-trigger[aria-disabled="true"],
+.tokis-accordion-trigger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Trigger icon ───────────────────────────────────────────── */
+
+.tokis-accordion-trigger__icon {
+  flex-shrink: 0;
+  color: var(--tokis-text-tertiary);
+  transition: transform var(--tokis-duration-normal) var(--tokis-ease-in-out);
+  will-change: transform;
+}
+.tokis-accordion-trigger[aria-expanded="true"] .tokis-accordion-trigger__icon {
+  transform: rotate(180deg);
+  color: var(--tokis-color-primary);
+}
+
+/* ── Content — CSS grid height animation ────────────────────── */
+/* Uses grid-template-rows trick for smooth height animation    */
+/* without needing to know the height in JS                     */
+
+.tokis-accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition:
+    grid-template-rows var(--tokis-duration-normal) var(--tokis-ease-in-out),
+    opacity var(--tokis-duration-normal) var(--tokis-ease-out);
+  opacity: 0;
+  overflow: hidden;
+}
+
+.tokis-accordion-content[data-open="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.tokis-accordion-content-inner {
+  overflow: hidden;
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-secondary);
+  line-height: var(--tokis-line-height-relaxed);
+  padding: 0 var(--tokis-spacing-5) var(--tokis-spacing-3);
+}
+
+/* ── Flush variant ──────────────────────────────────────────── */
+
+.tokis-accordion-root--flush .tokis-accordion-trigger {
+  padding-left: 0;
+  padding-right: 0;
+}
+.tokis-accordion-root--flush .tokis-accordion-content-inner {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-accordion-trigger { transition: none; }
+  .tokis-accordion-trigger__icon { transition: none; }
+  .tokis-accordion-content { transition: none; }
+}