@tokis/theme 1.0.1 → 1.1.0

package/README.md

@@ -1,44 +1,44 @@
-# /theme
+# @tokis/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
+npm install @tokis/theme
 ```
 
-> Or install everything at once: `npm install tokis`
+> Or install everything at once: `npm install @tokis/tokis`
 
 ## Usage
 
 Import the full theme (recommended):
 
 ```tsx
-import '/theme';
+import '@tokis/theme';
 ```
 
 Or import individual layers:
 
 ```tsx
-import '/theme/base';           // Variables + reset
-import '/theme/components';     // All component styles
-import '/theme/utilities';      // Utility classes
+import '@tokis/theme/base';           // Variables + reset
+import '@tokis/theme/components';     // All component styles
+import '@tokis/theme/utilities';      // Utility classes
 ```
 
 Or import specific component styles:
 
 ```tsx
-import '/theme/base';
-import '/theme/components/button';
-import '/theme/components/dialog';
+import '@tokis/theme/base';
+import '@tokis/theme/components/button';
+import '@tokis/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
+- **Component Styles** — Styles for every `@tokis/react` component
 - **Dark Mode** — Automatic via `[data-theme="dark"]` attribute
 - **Utilities** — Common helper classes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokis/theme",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Default visual theme for Tokis — CSS variables, component styles, reset, and typography. Zero-runtime, precompiled CSS.",
   "exports": {
     ".": "./src/index.css",

package/src/components/accordion.css

@@ -36,7 +36,7 @@
   color: var(--tokis-text-primary);
   background: none;
   border: none;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
   outline: none;
@@ -107,12 +107,12 @@
 /* ── Flush variant ──────────────────────────────────────────── */
 
 .tokis-accordion-root--flush .tokis-accordion-trigger {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 .tokis-accordion-root--flush .tokis-accordion-content-inner {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 
 /* ── Reduced motion ─────────────────────────────────────────── */

package/src/components/alert.css

@@ -9,7 +9,7 @@
   gap: var(--tokis-spacing-3);
   padding: var(--tokis-spacing-4);
   border-radius: var(--tokis-radius-lg);
-  border-left: 3px solid transparent;
+  border-inline-start: 3px solid transparent;
   font-size: var(--tokis-font-size-sm);
   line-height: var(--tokis-line-height-normal);
   animation: tokis-alert-in 250ms var(--tokis-ease-spring) both;
@@ -23,22 +23,22 @@
 .tokis-alert--info {
   background: var(--tokis-color-info-subtle);
   color: var(--tokis-color-info);
-  border-left-color: var(--tokis-color-info);
+  border-inline-start-color: var(--tokis-color-info);
 }
 .tokis-alert--success {
   background: var(--tokis-color-success-subtle);
   color: var(--tokis-color-success);
-  border-left-color: var(--tokis-color-success);
+  border-inline-start-color: var(--tokis-color-success);
 }
 .tokis-alert--warning {
   background: var(--tokis-color-warning-subtle);
   color: var(--tokis-color-warning);
-  border-left-color: var(--tokis-color-warning);
+  border-inline-start-color: var(--tokis-color-warning);
 }
 .tokis-alert--error {
   background: var(--tokis-color-error-subtle);
   color: var(--tokis-color-error);
-  border-left-color: var(--tokis-color-error);
+  border-inline-start-color: var(--tokis-color-error);
 }
 
 /* Dark mode: softer, more readable versions */
@@ -83,7 +83,7 @@
 .tokis-snackbar-container {
   position: fixed;
   bottom: var(--tokis-spacing-6);
-  right: var(--tokis-spacing-6);
+  inset-inline-end: var(--tokis-spacing-6);
   z-index: var(--tokis-z-toast);
   display: flex;
   flex-direction: column;
@@ -92,7 +92,7 @@
   width: calc(100% - var(--tokis-spacing-8));
   pointer-events: none;
 }
-.tokis-snackbar-container--top-right    { top: var(--tokis-spacing-6); bottom: auto; right: var(--tokis-spacing-6); }
+.tokis-snackbar-container--top-right    { top: var(--tokis-spacing-6); bottom: auto; inset-inline-end: var(--tokis-spacing-6); }
 .tokis-snackbar-container--top-center   { top: var(--tokis-spacing-6); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
 .tokis-snackbar-container--bottom-center { bottom: var(--tokis-spacing-6); left: 50%; right: auto; transform: translateX(-50%); }
 
@@ -112,29 +112,29 @@
   min-width: 280px;
   pointer-events: all;
   border: 1px solid rgb(255 255 255 / 0.08);
-  border-left-width: 3px;
-  border-left-color: rgb(255 255 255 / 0.15);
+  border-inline-start-width: 3px;
+  border-inline-start-color: rgb(255 255 255 / 0.15);
 }
 
 [data-theme="dark"] .tokis-snackbar {
   background: var(--tokis-color-neutral-800);
   color: var(--tokis-text-primary);
   border-color: var(--tokis-color-border);
-  border-left-color: var(--tokis-color-border-strong);
+  border-inline-start-color: var(--tokis-color-border-strong);
 }
 
 /* Variant color accents — minimal, left-border only */
 .tokis-snackbar--success {
-  border-left-color: var(--tokis-color-success);
+  border-inline-start-color: var(--tokis-color-success);
 }
 .tokis-snackbar--error {
-  border-left-color: var(--tokis-color-error);
+  border-inline-start-color: var(--tokis-color-error);
 }
 .tokis-snackbar--warning {
-  border-left-color: var(--tokis-color-warning);
+  border-inline-start-color: var(--tokis-color-warning);
 }
 .tokis-snackbar--info {
-  border-left-color: var(--tokis-color-info);
+  border-inline-start-color: var(--tokis-color-info);
 }
 
 .tokis-snackbar__icon   { flex-shrink: 0; margin-top: 1px; }

package/src/components/app-bar.css

@@ -65,5 +65,5 @@
   display: flex;
   align-items: center;
   gap: var(--tokis-spacing-2);
-  margin-left: auto;
+  margin-inline-start: auto;
 }

package/src/components/avatar.css

@@ -43,7 +43,7 @@
 .tokis-avatar-status {
   position: absolute;
   bottom: 1px;
-  right: 1px;
+  inset-inline-end: 1px;
   width: 10px;
   height: 10px;
   border-radius: var(--tokis-radius-full);
@@ -61,10 +61,10 @@
 }
 .tokis-avatar-group .tokis-avatar {
   border: 2px solid var(--tokis-color-background);
-  margin-left: -8px;
+  margin-inline-start: -8px;
 }
 .tokis-avatar-group .tokis-avatar:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .tokis-avatar-group .tokis-avatar-overflow {
   background: var(--tokis-color-neutral-200);
@@ -72,7 +72,7 @@
   font-size: var(--tokis-font-size-xs);
   font-weight: var(--tokis-font-weight-semibold);
   border: 2px solid var(--tokis-color-background);
-  margin-left: -8px;
+  margin-inline-start: -8px;
 }
 
 /* ── Badge ──────────────────────────────────────────────────── */
@@ -179,7 +179,7 @@
   cursor: pointer;
   opacity: 0.55;
   transition: opacity var(--tokis-duration-fast) var(--tokis-ease-out), background var(--tokis-duration-fast) var(--tokis-ease-out);
-  margin-right: -4px;
+  margin-inline-end: -4px;
   flex-shrink: 0;
   border: none;
   background: none;

package/src/components/bottom-nav.css

@@ -53,7 +53,7 @@
 .tokis-bottom-nav__badge {
   position: absolute;
   top: -4px;
-  right: -8px;
+  inset-inline-end: -8px;
   min-width: 16px;
   height: 16px;
   padding: 0 4px;

package/src/components/button.css

@@ -191,13 +191,19 @@
   border-radius: 0;
 }
 .tokis-btn-group .tokis-btn:first-child {
-  border-radius: var(--tokis-radius-md) 0 0 var(--tokis-radius-md);
+  border-start-start-radius: var(--tokis-radius-md);
+  border-end-start-radius: var(--tokis-radius-md);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 .tokis-btn-group .tokis-btn:last-child {
-  border-radius: 0 var(--tokis-radius-md) var(--tokis-radius-md) 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--tokis-radius-md);
+  border-end-end-radius: var(--tokis-radius-md);
 }
 .tokis-btn-group .tokis-btn--secondary + .tokis-btn--secondary {
-  border-left-color: transparent;
+  border-inline-start-color: transparent;
 }
 
 /* ── Reduced motion ─────────────────────────────────────────── */

package/src/components/card.css

@@ -98,7 +98,7 @@
 }
 .tokis-divider--vertical {
   border-top: none;
-  border-left: 1px solid var(--tokis-color-border);
+  border-inline-start: 1px solid var(--tokis-color-border);
   height: auto;
   align-self: stretch;
 }
@@ -212,7 +212,7 @@
   padding: var(--tokis-spacing-3) var(--tokis-spacing-4);
   font-weight: var(--tokis-font-weight-semibold);
   color: var(--tokis-text-secondary);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   font-size: var(--tokis-font-size-xs);
   text-transform: uppercase;

package/src/components/codeblock.css

@@ -108,9 +108,9 @@
   color: var(--tokis-text-tertiary);
   font-size: var(--tokis-font-size-sm);
   line-height: 1.6;
-  border-right: 1px solid var(--tokis-color-border);
+  border-inline-end: 1px solid var(--tokis-color-border);
   min-width: 2.5rem;
-  text-align: right;
+  text-align: end;
   user-select: none;
   flex-shrink: 0;
 }
@@ -121,7 +121,7 @@
 }
 
 [data-theme='dark'] .tokis-codeblock__lines {
-  border-right-color: #30363d;
+  border-inline-end-color: #30363d;
   color: #6e7681;
 }
 

package/src/components/command-palette.css

@@ -101,7 +101,7 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   font-family: var(--tokis-font-family);
   transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
 }

package/src/components/context-menu.css

@@ -31,7 +31,7 @@
   font-family: var(--tokis-font-family);
   color: var(--tokis-text-primary);
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
 }
 

package/src/components/datagrid.css

@@ -0,0 +1,268 @@
+/* ── DataGrid ──────────────────────────────────────────────────────────────── */
+
+.tokis-datagrid {
+  --dg-border: var(--tokis-color-border, #e2e8f0);
+  --dg-header-bg: var(--tokis-color-surface, #f8f9fa);
+  --dg-row-hover: var(--tokis-color-surface-hover, #f1f5f9);
+  --dg-row-selected: var(--tokis-color-primary-subtle, #e6f0ff);
+  --dg-row-selected-border: var(--tokis-color-primary, #0066ff);
+  --dg-text: var(--tokis-color-text-primary, #0f172a);
+  --dg-text-secondary: var(--tokis-color-text-secondary, #475569);
+  --dg-font-size: var(--tokis-typography-fontSize-sm, 0.875rem);
+  --dg-cell-pad: 0 var(--tokis-spacing-4, 16px);
+  --dg-radius: var(--tokis-radius-md, 8px);
+
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dg-border);
+  border-radius: var(--dg-radius);
+  font-size: var(--dg-font-size);
+  color: var(--dg-text);
+  overflow: hidden;
+  background: var(--tokis-color-background, #fff);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────────────────── */
+
+.tokis-dg-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-3, 12px);
+  padding: var(--tokis-spacing-3, 12px) var(--tokis-spacing-4, 16px);
+  border-bottom: 1px solid var(--dg-border);
+  background: var(--dg-header-bg);
+}
+
+.tokis-dg-search {
+  flex: 1;
+  max-width: 280px;
+  padding: var(--tokis-spacing-2, 8px) var(--tokis-spacing-3, 12px);
+  border: 1px solid var(--dg-border);
+  border-radius: var(--tokis-radius-md, 8px);
+  font-size: var(--dg-font-size);
+  color: var(--dg-text);
+  background: var(--tokis-color-background, #fff);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tokis-dg-search:focus {
+  border-color: var(--tokis-color-primary, #0066ff);
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring, rgb(0 102 255 / 0.15));
+}
+
+/* ── Row layout ─────────────────────────────────────────────────────────────── */
+
+.tokis-dg-header {
+  border-bottom: 1px solid var(--dg-border);
+}
+
+.tokis-dg-row {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  border-bottom: 1px solid var(--dg-border);
+  transition: background 0.1s ease;
+}
+
+.tokis-dg-row:last-child {
+  border-bottom: none;
+}
+
+.tokis-dg-row--header {
+  background: var(--dg-header-bg);
+  font-weight: 600;
+  color: var(--dg-text);
+}
+
+.tokis-dg-row--filter-row {
+  background: var(--dg-header-bg);
+  border-top: 1px solid var(--dg-border);
+}
+
+.tokis-dg-row:not(.tokis-dg-row--header):not(.tokis-dg-row--filter-row):not(.tokis-dg-row--skeleton):hover {
+  background: var(--dg-row-hover);
+  cursor: pointer;
+}
+
+.tokis-dg-row--selected {
+  background: var(--dg-row-selected) !important;
+  border-inline-start: 2px solid var(--dg-row-selected-border);
+}
+
+/* ── Cell ───────────────────────────────────────────────────────────────────── */
+
+.tokis-dg-cell {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: var(--dg-align, start);
+  padding: var(--dg-cell-pad);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.tokis-dg-cell--header {
+  user-select: none;
+  gap: var(--tokis-spacing-1, 4px);
+}
+
+.tokis-dg-cell--sortable {
+  cursor: pointer;
+}
+
+.tokis-dg-cell--sortable:hover {
+  color: var(--tokis-color-primary, #0066ff);
+}
+
+.tokis-dg-cell--checkbox {
+  flex: 0 0 48px;
+  max-width: 48px;
+  justify-content: center;
+}
+
+.tokis-dg-cell--filter {
+  padding-block: var(--tokis-spacing-1, 4px);
+}
+
+/* ── Sort icon ──────────────────────────────────────────────────────────────── */
+
+.tokis-dg-sort-icon {
+  font-size: 0.75rem;
+  line-height: 1;
+  color: var(--tokis-color-primary, #0066ff);
+}
+
+.tokis-dg-sort-icon--none {
+  color: var(--dg-text-secondary);
+  opacity: 0.4;
+}
+
+.tokis-dg-cell--header:hover .tokis-dg-sort-icon--none {
+  opacity: 1;
+}
+
+/* ── Column filter input ────────────────────────────────────────────────────── */
+
+.tokis-dg-col-filter {
+  width: 100%;
+  padding: var(--tokis-spacing-1, 4px) var(--tokis-spacing-2, 8px);
+  border: 1px solid var(--dg-border);
+  border-radius: var(--tokis-radius-sm, 4px);
+  font-size: calc(var(--dg-font-size) - 0.0625rem);
+  color: var(--dg-text);
+  background: var(--tokis-color-background, #fff);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.tokis-dg-col-filter:focus {
+  border-color: var(--tokis-color-primary, #0066ff);
+}
+
+/* ── Body ───────────────────────────────────────────────────────────────────── */
+
+.tokis-dg-body {
+  flex: 1;
+  overflow-x: auto;
+}
+
+/* ── Empty state ────────────────────────────────────────────────────────────── */
+
+.tokis-dg-empty {
+  display: flex;
+  justify-content: center;
+  padding: var(--tokis-spacing-12, 48px) var(--tokis-spacing-4, 16px);
+  color: var(--dg-text-secondary);
+}
+
+/* ── Skeleton ───────────────────────────────────────────────────────────────── */
+
+.tokis-dg-skeleton-bar {
+  display: block;
+  height: 12px;
+  width: 60%;
+  border-radius: var(--tokis-radius-xs, 2px);
+  background: linear-gradient(
+    90deg,
+    var(--tokis-color-neutral-100, #f1f5f9) 0%,
+    var(--tokis-color-neutral-200, #e2e8f0) 50%,
+    var(--tokis-color-neutral-100, #f1f5f9) 100%
+  );
+  background-size: 200% 100%;
+  animation: tokis-dg-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes tokis-dg-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Pagination ─────────────────────────────────────────────────────────────── */
+
+.tokis-dg-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2, 8px);
+  padding: var(--tokis-spacing-3, 12px) var(--tokis-spacing-4, 16px);
+  border-top: 1px solid var(--dg-border);
+  background: var(--dg-header-bg);
+  font-size: calc(var(--dg-font-size) - 0.0625rem);
+  color: var(--dg-text-secondary);
+}
+
+.tokis-dg-pagination-info {
+  flex: 1;
+}
+
+.tokis-dg-page-size {
+  padding: var(--tokis-spacing-1, 4px) var(--tokis-spacing-2, 8px);
+  border: 1px solid var(--dg-border);
+  border-radius: var(--tokis-radius-sm, 4px);
+  font-size: inherit;
+  color: var(--dg-text);
+  background: var(--tokis-color-background, #fff);
+  cursor: pointer;
+  outline: none;
+}
+
+.tokis-dg-page-size:focus {
+  border-color: var(--tokis-color-primary, #0066ff);
+}
+
+.tokis-dg-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--dg-border);
+  border-radius: var(--tokis-radius-sm, 4px);
+  background: var(--tokis-color-background, #fff);
+  color: var(--dg-text);
+  cursor: pointer;
+  font-size: 0.9375rem;
+  line-height: 1;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.tokis-dg-page-btn:hover:not(:disabled) {
+  background: var(--dg-row-hover);
+  color: var(--tokis-color-primary, #0066ff);
+}
+
+.tokis-dg-page-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ── Dark mode ──────────────────────────────────────────────────────────────── */
+
+[data-theme="dark"] .tokis-datagrid {
+  --dg-border: var(--tokis-color-border, #2d3748);
+  --dg-header-bg: var(--tokis-color-surface, #1a202c);
+  --dg-row-hover: var(--tokis-color-surface-hover, #2d3748);
+}