@jacshuo/onyx 0.1.8 → 0.2.1

package/dist/styles/tailwind.css

@@ -0,0 +1,21 @@
+/* ═══════════════════════════════════════════════════════════
+   Tailwind v4 integration — for consumers with their own
+   Tailwind CSS setup.
+   
+   Import this file in your CSS AFTER @import "tailwindcss":
+   
+     @import "tailwindcss";
+     @import "@jacshuo/onyx/styles/tailwind.css";
+   
+   This tells Tailwind to scan the library's JS for class
+   names and includes all theme tokens + custom variants.
+   ═══════════════════════════════════════════════════════════ */
+
+/* Tell Tailwind to scan the library's compiled JS for class names */
+@source "..";
+
+/* Core design tokens (semantic colors, animations) */
+@import "./tokens.css";
+
+/* Class-based dark mode */
+@custom-variant dark (&:where(.dark, .dark *));

package/dist/styles/tokens.css

@@ -66,6 +66,42 @@
   --animate-slide-in-left: slide-in-left 300ms ease-out;
   --animate-slide-in-top: slide-in-top 300ms ease-out;
   --animate-slide-in-bottom: slide-in-bottom 300ms ease-out;
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+  --animate-progress-shine: progress-shine 2s ease-in-out infinite;
+  --animate-spin-rotate: spin-rotate 1.4s linear infinite;
+  --animate-spin-dash: spin-dash 1.4s ease-in-out infinite;
+
+  /* ── Syntax highlighting (semantic) ─────────────────── */
+  --color-syntax-keyword: var(--color-primary-600);
+  --color-syntax-string: var(--color-success-600);
+  --color-syntax-comment: var(--color-secondary-400);
+  --color-syntax-function: var(--color-warning-600);
+  --color-syntax-variable: var(--color-danger-600);
+  --color-syntax-number: var(--color-warning-500);
+  --color-syntax-operator: var(--color-secondary-600);
+  --color-syntax-tag: var(--color-danger-500);
+  --color-syntax-attr: var(--color-warning-600);
+  --color-syntax-punctuation: var(--color-secondary-500);
+  --color-syntax-type: var(--color-success-700);
+  --color-syntax-plain: var(--color-primary-800);
+  --color-syntax-bg: var(--color-primary-50);
+}
+
+/* ── Syntax tokens: dark overrides ─────────────────── */
+.dark {
+  --color-syntax-keyword: var(--color-primary-400);
+  --color-syntax-string: var(--color-success-400);
+  --color-syntax-comment: var(--color-secondary-500);
+  --color-syntax-function: var(--color-warning-400);
+  --color-syntax-variable: var(--color-danger-400);
+  --color-syntax-number: var(--color-warning-300);
+  --color-syntax-operator: var(--color-secondary-400);
+  --color-syntax-tag: var(--color-danger-400);
+  --color-syntax-attr: var(--color-warning-300);
+  --color-syntax-punctuation: var(--color-secondary-400);
+  --color-syntax-type: var(--color-success-300);
+  --color-syntax-plain: var(--color-primary-200);
+  --color-syntax-bg: var(--color-primary-900);
 }
 
 @keyframes fade-in {
@@ -114,3 +150,38 @@
   );
   animation: light-sweep 0.8s ease-in-out;
 }
+
+/* ── Spin animations ─────────────────────────────────── */
+
+@keyframes spin-rotate {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-dash {
+  0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+}
+
+/* ── ProgressBar animations ──────────────────────────── */
+
+@keyframes progress-indeterminate {
+  0%   { left: -40%; width: 40%; }
+  50%  { left: 30%;  width: 50%; }
+  100% { left: 100%; width: 10%; }
+}
+
+@keyframes progress-shine {
+  0% { background-image: none; }
+  50% {
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.35) 50%,
+      transparent 100%
+    );
+    background-size: 50% 100%;
+    background-position: -100% 0;
+  }
+  100% { background-image: none; }
+}