@devalok/shilp-sutra 0.36.1 → 0.37.0-next.1

package/dist/tokens/animations.css

@@ -0,0 +1,139 @@
+/* ═══════════════════════════════════════════════════════════════════
+   ANIMATIONS
+
+   TW4 generates `animate-<name>` utilities from `--animate-<name>`
+   custom properties declared in @theme. Each refers to @keyframes
+   declared below.
+
+   Ported from the deleted TW3 JS preset in 0.37. All names match what
+   components were already using (accordion-down, skeleton-shimmer, etc.)
+   — dropping them would silently break animations in Accordion,
+   Collapsible, Skeleton, Progress, Spinner, Popover, and the
+   processing-ants status dot.
+
+   Note: `animate-in`, `animate-out`, `fade-in-*`, `zoom-in-*`,
+   `slide-in-from-*` come from the `tw-animate-css` plugin (wired in
+   shilp-sutra.css), NOT here. This file is for our custom animations.
+   ═══════════════════════════════════════════════════════════════════ */
+
+@theme {
+  /* ── Radix-coupled: height animations driven by Radix CSS vars ── */
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+  --animate-collapsible-down: collapsible-down 200ms ease-out;
+  --animate-collapsible-up: collapsible-up 200ms ease-out;
+
+  /* ── CSS-only looping animations ── */
+  --animate-progress-indeterminate: progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite;
+  --animate-skeleton-shimmer: skeleton-shimmer var(--duration-slow-02) linear infinite;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+  /* ── One-shot animations ── */
+  --animate-timer-bar: timer-bar linear forwards;
+  --animate-popover-in: popover-in 150ms var(--ease-productive-entrance);
+  --animate-popover-out: popover-out 100ms var(--ease-productive-exit);
+
+  /* ── Processing-ants (three speeds keyed to status-dot state) ── */
+  --animate-processing-ants-ambient: processing-ants-rotate 3s linear infinite;
+  --animate-processing-ants-working: processing-ants-rotate 2s linear infinite;
+  --animate-processing-ants-urgent: processing-ants-rotate 1s linear infinite;
+  --animate-processing-ants-march: processing-ants-march 1s linear infinite;
+  --animate-processing-ants-svg: processing-ants-svg 1s linear infinite;
+
+  /* ── Shake — used by AI command-bar on invalid input ── */
+  --animate-shake: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   @keyframes definitions
+   Referenced by --animate-* entries above and by inline
+   `animation:` in components (e.g. DevalokGrain's border-angle dance).
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Radix-coupled: the target height comes from Radix's runtime-injected
+   CSS var (--radix-accordion-content-height / --radix-collapsible-content-height). */
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
+}
+
+@keyframes collapsible-down {
+  from { height: 0; }
+  to   { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to   { height: 0; }
+}
+
+/* Progress bars — indeterminate slider */
+@keyframes progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+
+/* Skeleton — left-to-right shimmer pass */
+@keyframes skeleton-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+
+/* InputOTP caret blink */
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50%      { opacity: 0; }
+}
+
+/* Toast / countdown timer bar — shrinks left-to-right */
+@keyframes timer-bar {
+  0%   { transform: scaleX(1); }
+  100% { transform: scaleX(0); }
+}
+
+/* Popover micro-animations (scale + fade) */
+@keyframes popover-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes popover-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
+}
+
+/* Processing-ants status-dot effect: rotate the --border-angle
+   @property through a full turn. Used at three speeds (ambient,
+   working, urgent) via separate --animate-* entries above. */
+@keyframes processing-ants-rotate {
+  to { --border-angle: 360deg; }
+}
+
+/* Processing-ants border — marching-ants background-position shift */
+@keyframes processing-ants-march {
+  to {
+    background-position:
+      16px 0,
+      100% 16px,
+      calc(100% - 16px) 100%,
+      0 calc(100% - 16px);
+  }
+}
+
+/* Processing-ants SVG stroke — dashoffset animation */
+@keyframes processing-ants-svg {
+  to { stroke-dashoffset: -10; }
+}
+
+/* Shake — horizontal oscillation for invalid input feedback (AI command bar) */
+@keyframes shake {
+  10%, 90%  { transform: translate3d(-1px, 0, 0); }
+  20%, 80%  { transform: translate3d(2px,  0, 0); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+  40%, 60%  { transform: translate3d(4px,  0, 0); }
+}

package/dist/tokens/base.css

@@ -0,0 +1,26 @@
+/* ═══════════════════════════════════════════════════════════════════
+   BASE LAYER
+   Document-level rules + @property registrations. Wrapped in
+   @layer base so TW4's utility layers still take precedence over
+   these baseline styles.
+   ═══════════════════════════════════════════════════════════════════ */
+
+@layer base {
+  /* Prevent iOS Safari auto-zoom on inputs with font-size < 16px.
+     Applies only on narrow viewports where iOS is the common browser. */
+  @media screen and (max-width: 767px) {
+    input:not([type="checkbox"]):not([type="radio"]),
+    textarea,
+    select {
+      font-size: max(16px, 1em) !important;
+    }
+  }
+}
+
+/* `@property` registrations must live outside @layer so the browser's
+   custom property registry picks them up at page load. */
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}

package/dist/tokens/index.css

@@ -1,4 +1,26 @@
+/*
+ * Consumer entry point (via the `./tokens` subpath export).
+ *
+ * Order matters:
+ *   primitives             → defines --pink-*, --neutral-*, etc. (private palette)
+ *   semantic               → @theme public tokens referencing the primitives +
+ *                            :root meta-tokens + .dark overrides + forced-colors block
+ *   typography             → @font-face for Inter, Ranade (load early)
+ *   typography-semantic    → --typo-* composites referencing @theme --text-ds-* etc.
+ *   base                   → @property --border-angle + iOS font-size fix
+ *   animations             → @keyframes referenced by component animations
+ *   utilities              → @utility text-heading-*, touch-target, focus-ring*, *-safe
+ *   variants               → @custom-variant dark
+ *
+ * In 0.37.0 this file remains for back-compat. The TW4-native consumer
+ * entry is `shilp-sutra.css` in this same directory, which @imports all
+ * of the above AND `@import "tailwindcss"` + `@source`.
+ */
 @import './primitives.css';
 @import './semantic.css';
 @import './typography.css';
 @import './typography-semantic.css';
+@import './base.css';
+@import './animations.css';
+@import './utilities.css';
+@import './variants.css';

package/dist/tokens/primitives.css

@@ -154,6 +154,7 @@
   --amber-bright-3:  oklch(0.92 0.08 70);
   --amber-bright-4:  oklch(0.88 0.11 70);
   --amber-bright-5:  oklch(0.84 0.14 70);
+  --amber-bright-6:  oklch(0.80 0.155 68);   /* interpolated 5↔7 — added 0.37.0-next.1 */
   --amber-bright-7:  oklch(0.75 0.17 65);
   --amber-bright-9:  oklch(0.78 0.16 65);
   --amber-bright-10: oklch(0.74 0.16 65);
@@ -434,6 +435,7 @@
   --amber-bright-3:  oklch(0.25 0.045 65);
   --amber-bright-4:  oklch(0.32 0.065 65);
   --amber-bright-5:  oklch(0.38 0.085 65);
+  --amber-bright-6:  oklch(0.44 0.11 65);    /* interpolated 5↔7 — added 0.37.0-next.1 */
   --amber-bright-7:  oklch(0.50 0.13 65);
   --amber-bright-9:  oklch(0.57 0.17 65);
   --amber-bright-10: oklch(0.52 0.17 65);