@boyernick/standard-ui-tokens 0.1.1-canary.8 → 0.2.0

package/css/tokens.css

@@ -73,6 +73,18 @@
     transparent
   );
 
+  /* Status colours for an inverted surface — a toast, or anything else that
+     flips against the page. The plain `--status-*` tokens are tuned for the
+     page's own background, so on a surface that is dark in light mode they
+     come out too dark to read. These carry the opposite pairing and flip with
+     the theme in the opposite direction, the same way `--text-primary-inverted`
+     does. The hue ramps themselves do not move between themes — only the greys
+     do — so both sides are spelled out. */
+  --status-info-inverted: var(--blue-200);
+  --status-success-inverted: var(--green-200);
+  --status-warning-inverted: var(--orange-200);
+  --status-critical-inverted: var(--red-200);
+
   --chart-1: 4 184 76;
   --chart-2: 2 133 255;
   --chart-3: 251 106 34;
@@ -190,6 +202,11 @@
   --status-warning: var(--orange-200);
   --status-critical: var(--red-200);
 
+  --status-info-inverted: var(--blue-600);
+  --status-success-inverted: var(--green-700);
+  --status-warning-inverted: var(--orange-700);
+  --status-critical-inverted: var(--red-600);
+
   --chart-neutral: 143 143 143;
 
   --destructive: var(--red-400);
@@ -284,6 +301,10 @@
   --color-status-warning-background: var(--status-warning-background);
   --color-status-critical: var(--status-critical);
   --color-status-critical-background: var(--status-critical-background);
+  --color-status-info-inverted: var(--status-info-inverted);
+  --color-status-success-inverted: var(--status-success-inverted);
+  --color-status-warning-inverted: var(--status-warning-inverted);
+  --color-status-critical-inverted: var(--status-critical-inverted);
 
   --color-destructive: var(--destructive);
   --color-destructive-active: var(--destructive-active);
@@ -609,6 +630,46 @@
   }
 }
 
+@keyframes text-shimmer {
+  from {
+    background-position: 200% center;
+  }
+  to {
+    background-position: -200% center;
+  }
+}
+
+@keyframes spinner-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes spinner-spoke {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+/* Indeterminate progress. A stripe crossing the track, because there is no
+   proportion to fill — the movement is the only thing carrying "still going". */
+@keyframes progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(400%);
+  }
+}
+
 @keyframes ticker-scroll {
   from {
     translate: 0 0;
@@ -617,3 +678,63 @@
     translate: -50% 0;
   }
 }
+
+@keyframes lifeline-rail-draw {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes lifeline-marker-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 6px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes lifeline-labels-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.lifeline-rail-intro {
+  transform: scaleX(var(--lifeline-intro-progress, 0));
+  transform-origin: left center;
+}
+
+.lifeline-rail-intro-vertical {
+  transform: scaleY(var(--lifeline-intro-progress, 0));
+  transform-origin: top center;
+}
+
+.lifeline-marker-intro {
+  opacity: 0;
+  animation: lifeline-marker-in var(--lifeline-marker-fade-ms, 420ms)
+    cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.lifeline-labels-intro {
+  opacity: 0;
+  animation: lifeline-labels-in var(--lifeline-labels-ms, 600ms)
+    cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.lifeline-labels.is-pinned {
+  z-index: 20;
+}
+
+.lifeline-typeset {
+  --lifeline-font: var(--font-sans);
+  font-family: var(--lifeline-font);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-tokens",
-  "version": "0.1.1-canary.8",
+  "version": "0.2.0",
   "description": "Design tokens for StandardUI",
   "license": "MIT",
   "files": [