@thewhatmatters/wmds 0.2.0

package/dist/scrollFade.css

@@ -0,0 +1,380 @@
+/**
+ * Scroll fade — content masks for overflowing regions.
+ *
+ * Apply the utility to the element that owns overflow. The mask follows the
+ * scroll position in supporting browsers and falls back to a static edge hint.
+ * Keep borders and background fills on a wrapper so only content is masked.
+ */
+
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-fade-reveal-t {
+  from {
+    --scroll-fade-t: 0px;
+  }
+
+  to {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+@keyframes scroll-fade-reveal-b {
+  from {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+
+  to {
+    --scroll-fade-b: 0px;
+  }
+}
+
+@keyframes scroll-fade-reveal-s {
+  from {
+    --scroll-fade-s: 0px;
+  }
+
+  to {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@keyframes scroll-fade-reveal-e {
+  from {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+
+  to {
+    --scroll-fade-e: 0px;
+  }
+}
+
+@utility scroll-fade {
+  --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, 40px)));
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, 96px),
+      calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-y {
+  --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, 40px)));
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, 96px),
+      calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 40px)));
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-inline: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out,
+      scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range:
+      0 var(--scroll-fade-reveal, 96px),
+      calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-t {
+  --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-t 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal, 96px);
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-l {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: 0 var(--scroll-fade-reveal, 96px);
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-r {
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-s {
+  --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 100%
+    );
+  }
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal, 96px);
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-e {
+  --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, 40px)));
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      #000 0,
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(100% - var(--scroll-fade-reveal, 96px)) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-* {
+  --scroll-fade-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-t-* {
+  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-t-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-b-* {
+  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-b-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-s-* {
+  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-s-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-e-* {
+  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-e-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-none {
+  --scroll-fade-mask: none;
+}

package/dist/shape.css

@@ -0,0 +1,8 @@
+/**
+ * WMDS shape tokens — shared component geometry.
+ * Override on an experience wrapper only when that experience owns a documented shape mode.
+ */
+:root {
+  --radius-card-shell: 16px;
+  --radius-card-body: 14px;
+}

package/dist/sources.css

@@ -0,0 +1,70 @@
+/** Tailwind content manifest for apps — class names are read from the built modules. */
+
+@source "./**/*.js";
+
+@source inline(
+  "duration-fast-min",
+  "duration-fast",
+  "duration-fast-max",
+  "duration-medium-min",
+  "duration-medium",
+  "duration-medium-max",
+  "duration-slow-min",
+  "duration-slow",
+  "duration-slow-max",
+  "duration-instant",
+  "duration-base",
+  "duration-slower",
+  "ease-standard",
+  "ease-out-expo",
+  "enabled:active:scale-[var(--motion-press-scale)]",
+  "bg-primary-hover",
+  "bg-primary-active",
+  "bg-secondary-hover",
+  "bg-secondary-active",
+  "bg-ghost-hover",
+  "bg-ghost-active",
+  "bg-error-hover",
+  "bg-error-active",
+  "bg-destructive-hover",
+  "bg-destructive-active",
+  "bg-success-hover",
+  "bg-success-active",
+  "bg-warning-hover",
+  "bg-warning-active",
+  "bg-info-hover",
+  "bg-info-active",
+  "bg-error-muted",
+  "bg-success-muted",
+  "bg-warning-muted",
+  "bg-info-muted",
+  "ring-error-focus-ring",
+  "ring-warning-focus-ring",
+  "ring-success-focus-ring",
+  "hover:bg-primary-hover",
+  "hover:bg-secondary-hover",
+  "hover:bg-ghost-hover",
+  "type-display-1",
+  "type-heading-1",
+  "type-heading-2",
+  "type-heading-4",
+  "type-body",
+  "type-label",
+  "type-supporting",
+  "type-code",
+  "type-control",
+  "grid-page",
+  "band",
+  "leading-base",
+  "col-span-full",
+  "col-span-2",
+  "col-span-4",
+  "col-span-6",
+  "col-span-8",
+  "md:col-span-4",
+  "lg:col-span-6",
+  "lg:col-span-8",
+  "lg:col-span-3",
+  "md:col-span-2",
+  "max-w-none"
+);

package/dist/stateColors.css

@@ -0,0 +1,73 @@
+/**
+ * Interaction state colors — derived from base roles in colors.css.
+ * Overlay tints follow Astryx; primary/destructive use color-mix for hover/active.
+ */
+:root {
+  --color-ghost-foreground: var(--color-text-accent);
+
+  /*
+   * Primary hover / active derive from --color-primary so a consumer brand override
+   * (colors.css → "Consumer brand override") re-tints them automatically. Keep these
+   * as mixes — never hard-code a hex here.
+   */
+  --color-primary-hover: color-mix(in oklch, var(--color-primary) 82%, black);
+  --color-primary-active: color-mix(in oklch, var(--color-primary) 68%, black);
+
+  --color-secondary-hover: var(--color-overlay-hover);
+  --color-secondary-active: var(--color-overlay-pressed);
+
+  --color-ghost-hover: var(--color-overlay-hover);
+  --color-ghost-active: var(--color-overlay-pressed);
+
+  --color-error-hover: color-mix(in oklch, var(--color-error) 82%, black);
+  --color-error-active: color-mix(in oklch, var(--color-error) 68%, black);
+
+  --color-success-hover: color-mix(in oklch, var(--color-success) 88%, black);
+  --color-success-active: color-mix(in oklch, var(--color-success) 76%, black);
+
+  --color-warning-hover: color-mix(in oklch, var(--color-warning) 82%, black);
+  --color-warning-active: color-mix(in oklch, var(--color-warning) 68%, black);
+
+  --color-info-hover: color-mix(in oklch, var(--color-info) 82%, black);
+  --color-info-active: color-mix(in oklch, var(--color-info) 68%, black);
+
+  /* Light pill on the navy field. Brand text on this mix stays above 7:1. */
+  --color-on-brand-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-brand));
+
+  /* Validation focus rings — alphas clear WCAG 3:1 on white and #f8f8f8 (ADR-0029) */
+  --color-error-focus-ring: color-mix(in oklch, var(--color-error) 58%, transparent);
+  --color-warning-focus-ring: color-mix(in oklch, var(--color-warning) 72%, transparent);
+  --color-success-focus-ring: color-mix(in oklch, var(--color-success) 70%, transparent);
+}
+
+[data-theme="dark"] {
+  --color-ghost-foreground: var(--color-text-primary);
+
+  /* Dark lifts toward white on hover (12%) — percentages above 100% are invalid color-mix */
+  --color-primary-hover: color-mix(in oklch, var(--color-primary) 88%, white);
+  --color-primary-active: color-mix(in oklch, var(--color-primary) 92%, black);
+
+  --color-secondary-hover: var(--color-overlay-hover);
+  --color-secondary-active: var(--color-overlay-pressed);
+
+  --color-ghost-hover: var(--color-overlay-hover);
+  --color-ghost-active: var(--color-overlay-pressed);
+
+  --color-error-hover: color-mix(in oklch, var(--color-error) 108%, white);
+  --color-error-active: color-mix(in oklch, var(--color-error) 88%, black);
+
+  --color-success-hover: color-mix(in oklch, var(--color-success) 108%, white);
+  --color-success-active: color-mix(in oklch, var(--color-success) 88%, black);
+
+  --color-warning-hover: color-mix(in oklch, var(--color-warning) 108%, white);
+  --color-warning-active: color-mix(in oklch, var(--color-warning) 88%, black);
+
+  --color-info-hover: color-mix(in oklch, var(--color-info) 108%, white);
+  --color-info-active: color-mix(in oklch, var(--color-info) 88%, black);
+
+  --color-on-brand-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-brand));
+
+  --color-error-focus-ring: color-mix(in oklch, var(--color-error) 50%, transparent);
+  --color-warning-focus-ring: color-mix(in oklch, var(--color-warning) 50%, transparent);
+  --color-success-focus-ring: color-mix(in oklch, var(--color-success) 50%, transparent);
+}