@tokis/theme 1.2.2 → 1.3.0

package/README.md

@@ -44,7 +44,7 @@ import '@tokis/theme/components/dialog';
 
 ## Documentation
 
-Visit [tokis.dev](https://tokis.dev/docs/theming) for the theming guide.
+Visit [Tokis Documentation](https://prerakmathur20.github.io/TokisWebsite/) for the theming guide.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokis/theme",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Default visual theme for Tokis — CSS variables, component styles, reset, and typography. Zero-runtime, precompiled CSS.",
   "exports": {
     ".": "./src/index.css",
@@ -62,6 +62,9 @@
   "bugs": {
     "url": "https://github.com/PrerakMathur20/TokisLib/issues"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/base/variables.css

@@ -107,9 +107,16 @@
   --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);
+  /* Focus — solid opaque values ensure ≥3:1 contrast against any light surface (WCAG 2.2 §1.4.11) */
+  --tokis-color-focus-ring: #0066ff;
+  --tokis-color-focus-ring-error: #dc2626;
+
+  /* Badge accessible text colors — each meets 4.5:1 contrast on its paired subtle background */
+  --tokis-badge-primary-text: #0047b3;  /* 6.7:1 on #e6f0ff */
+  --tokis-badge-success-text: #166534;  /* 6.1:1 on #f0fdf4 */
+  --tokis-badge-warning-text: #92400e;  /* 6.2:1 on #fffbeb */
+  --tokis-badge-error-text:   #b91c1c;  /* 5.5:1 on #fef2f2 */
+  --tokis-badge-info-text:    #075985;  /* 6.4:1 on #f0f9ff */
 
   /* Surface interaction states */
   --tokis-color-surface-hover:  var(--tokis-color-neutral-100);
@@ -196,8 +203,15 @@
   --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);
+  --tokis-color-focus-ring: #60a5fa;
+  --tokis-color-focus-ring-error: #f87171;
+
+  /* Badge accessible text — light tones for dark subtle backgrounds, each meets 4.5:1 */
+  --tokis-badge-primary-text: #93c5fd;  /* 5.8:1 on #1e3a5f */
+  --tokis-badge-success-text: #86efac;  /* >10:1 on #052e16 */
+  --tokis-badge-warning-text: #fde68a;  /* >10:1 on #451a03 */
+  --tokis-badge-error-text:   #fca5a5;  /* >10:1 on #450a0a */
+  --tokis-badge-info-text:    #7dd3fc;  /* >10:1 on #082f49 */
 
   /* 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 */

package/src/components/avatar.css

@@ -96,12 +96,13 @@
   to   { transform: scale(1);   opacity: 1; }
 }
 
+/* Text colors use --tokis-badge-*-text vars which are calibrated per-theme for ≥4.5:1 contrast */
 .tokis-badge--default { background: var(--tokis-color-neutral-100); color: var(--tokis-text-secondary); }
-.tokis-badge--primary { background: var(--tokis-color-primary-subtle); color: var(--tokis-color-primary); }
-.tokis-badge--success { background: var(--tokis-color-success-subtle); color: var(--tokis-color-success); }
-.tokis-badge--warning { background: var(--tokis-color-warning-subtle); color: var(--tokis-color-warning); }
-.tokis-badge--error   { background: var(--tokis-color-error-subtle);   color: var(--tokis-color-error); }
-.tokis-badge--info    { background: var(--tokis-color-info-subtle);    color: var(--tokis-color-info); }
+.tokis-badge--primary { background: var(--tokis-color-primary-subtle); color: var(--tokis-badge-primary-text); }
+.tokis-badge--success { background: var(--tokis-color-success-subtle); color: var(--tokis-badge-success-text); }
+.tokis-badge--warning { background: var(--tokis-color-warning-subtle); color: var(--tokis-badge-warning-text); }
+.tokis-badge--error   { background: var(--tokis-color-error-subtle);   color: var(--tokis-badge-error-text); }
+.tokis-badge--info    { background: var(--tokis-color-info-subtle);    color: var(--tokis-badge-info-text); }
 
 .tokis-badge--solid-primary { background: var(--tokis-color-primary); color: var(--tokis-text-on-primary); }
 .tokis-badge--solid-success { background: var(--tokis-color-success); color: var(--tokis-text-inverse); }

package/src/components/navigation.css

@@ -40,7 +40,7 @@
 }
 .tokis-menu-item:focus-visible {
   background: var(--tokis-color-surface-hover);
-  outline: 2px solid var(--tokis-color-primary);
+  outline: 2px solid var(--tokis-color-focus-ring);
   outline-offset: -2px;
 }
 

package/src/components/pagination.css

@@ -49,8 +49,9 @@
   border-color: var(--tokis-color-primary);
 }
 
+/* Disabled prev/next navigation — exclude active page buttons which are styled separately */
 .tokis-pagination__item--disabled,
-.tokis-pagination__item:disabled {
+.tokis-pagination__item:disabled:not(.tokis-pagination__item--active) {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;

package/src/utilities/layout.css

@@ -26,3 +26,19 @@
 
 .tokis-box { display: block; }
 
+/* ── Screen-reader only utility ────────────────────────────── */
+
+/* Visually hides content while keeping it accessible to screen readers.
+   Use on elements that provide text alternatives for visual-only information
+   (e.g. dot badges, decorative icons, status indicators). */
+.tokis-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}