prime-ui-kit 0.10.0 → 0.11.0

package/src/styles/globals.css

@@ -4,6 +4,7 @@
 @import "./tokens.css";
 @import "./theme-light.css";
 @import "./theme-dark.css";
+@import "./controls.css";
 
 :root {
   font-family: var(--prime-font-family-sans);
@@ -50,6 +51,12 @@ body {
   outline: none;
 }
 
+/* Focus that came back to a control a pointer used (a layer opened with a click, closed with
+   Escape) shows no ring until the next key: every kit ring is drawn with this token. */
+[data-focus-quiet] {
+  --prime-color-focus-ring: transparent;
+}
+
 :where(a, button, input, textarea, select, [role="button"], [tabindex]) {
   -webkit-tap-highlight-color: transparent;
 }
@@ -228,6 +235,7 @@ input::-moz-focus-inner {
     --prime-motion-duration-base: 0ms;
     --prime-motion-duration-slow: 0ms;
     --prime-motion-stagger: 0ms;
+    --prime-message-morph-duration: 0ms;
     --prime-motion-press-scale: 1;
     --prime-motion-press-scale-compact: 1;
   }

package/src/styles/reset.css

@@ -1,37 +1,41 @@
 /* Opt-in (`prime-ui-kit/reset.css`): a minimal document reset for a new app. Components do not need
-   it — they set their own box sizing — so an app with its own reset can skip this file. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+   it — they set their own box sizing — so an app with its own reset can skip this file. In the
+   `prime-reset` cascade layer, like `controls.css`: a component rule always wins over it. */
 
-* {
-  margin: 0;
-}
+@layer prime-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-html,
-body {
-  height: 100%;
-}
+  * {
+    margin: 0;
+  }
 
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
+  html,
+  body {
+    height: 100%;
+  }
 
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
 }

package/src/styles/theme-dark.css

@@ -7,13 +7,30 @@
   --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
   --prime-color-bg-edge-shadow: rgba(0, 0, 0, 0.5);
-  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent);
-  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.16);
+  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent);
+  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.28);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);
   --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
   --prime-color-border-default: var(--prime-ref-color-gray-750);
   --prime-color-border-faint: var(--prime-ref-color-gray-850);
   --prime-color-border-subtle: var(--prime-ref-color-gray-800);
+  --prime-color-chart-1: var(--prime-ref-color-cobalt-500);
+  --prime-color-chart-2: var(--prime-ref-color-chart-dark-orange);
+  --prime-color-chart-3: var(--prime-ref-color-chart-dark-teal);
+  --prime-color-chart-4: var(--prime-ref-color-chart-dark-yellow);
+  --prime-color-chart-5: var(--prime-ref-color-chart-dark-pink);
+  --prime-color-chart-6: var(--prime-ref-color-chart-dark-green);
+  --prime-color-chart-7: var(--prime-ref-color-chart-dark-purple);
+  --prime-color-chart-8: var(--prime-ref-color-chart-dark-red);
+  --prime-color-chart-axis: var(--prime-ref-color-gray-700);
+  --prime-color-chart-grid: var(--prime-ref-color-gray-800);
+  --prime-color-chart-other: var(--prime-ref-color-gray-500);
+  --prime-color-chart-scale-1: var(--prime-ref-color-cobalt-950);
+  --prime-color-chart-scale-2: var(--prime-ref-color-cobalt-900);
+  --prime-color-chart-scale-3: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-scale-4: var(--prime-ref-color-cobalt-400);
+  --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-200);
+  --prime-color-chart-scale-fg: var(--prime-ref-color-gray-950);
   --prime-color-control-thumb: var(--prime-ref-color-gray-100);
   --prime-color-danger-border: var(--prime-ref-color-red-400);
   --prime-color-danger-hover: var(--prime-ref-color-red-500);
@@ -62,6 +79,17 @@
   --prime-color-layer-floating2-fill: #303237;
   --prime-color-layer-floating2-fill-hover: #373a3e;
   --prime-color-layer-floating2-selected: #3f4146;
+  --prime-color-message-outgoing-accent: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-chip: color-mix(in srgb, var(--prime-ref-color-white) 14%, var(--prime-ref-color-cobalt-700));
+  --prime-color-message-outgoing-chip-hover: color-mix(in srgb, var(--prime-ref-color-white) 20%, var(--prime-ref-color-cobalt-700));
+  --prime-color-message-outgoing-danger: var(--prime-ref-color-red-100);
+  --prime-color-message-outgoing-fill: rgba(255, 255, 255, 0.14);
+  --prime-color-message-outgoing-fill-hover: rgba(255, 255, 255, 0.2);
+  --prime-color-message-outgoing-muted: var(--prime-ref-color-cobalt-200);
+  --prime-color-message-outgoing-text: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-track: rgba(255, 255, 255, 0.36);
   --prime-color-palette-blue-soft: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 16%, transparent);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-400);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-gray-950);

package/src/styles/theme-light.css

@@ -39,15 +39,21 @@
   --prime-badge-xs-radius: var(--prime-ref-radius-4);
   --prime-badge-xs-text-size: var(--prime-ref-font-size-12);
   --prime-border-width: 1px;
-  --prime-bottom-nav-blur: 0.5rem;
+  --prime-bottom-nav-blur: 0.875rem;
+  --prime-bottom-nav-floating-gap: var(--prime-ref-space-2);
+  --prime-bottom-nav-floating-height: 2.875rem;
+  --prime-bottom-nav-floating-icon-only-height: 2.5rem;
+  --prime-bottom-nav-floating-icon-size: 1.125rem;
   --prime-bottom-nav-floating-inset: var(--prime-ref-space-3);
-  --prime-bottom-nav-floating-item-size: 2.75rem;
+  --prime-bottom-nav-floating-item-gap: 0.125rem;
+  --prime-bottom-nav-floating-label-line-height: 0.6875rem;
+  --prime-bottom-nav-floating-label-size: 0.5625rem;
   --prime-bottom-nav-floating-padding: var(--prime-ref-space-1);
+  --prime-bottom-nav-glyph-height: var(--prime-ref-space-5);
+  --prime-bottom-nav-glyph-width: var(--prime-ref-space-7);
   --prime-bottom-nav-height: 3.25rem;
   --prime-bottom-nav-icon-only-height: var(--prime-ref-space-12);
   --prime-bottom-nav-icon-size: var(--prime-ref-icon-20);
-  --prime-bottom-nav-indicator-height: var(--prime-ref-space-5);
-  --prime-bottom-nav-indicator-width: var(--prime-ref-space-7);
   --prime-bottom-nav-item-gap: var(--prime-ref-space-1);
   --prime-bottom-nav-label-line-height: var(--prime-ref-font-line-height-12);
   --prime-bottom-nav-label-size: var(--prime-ref-font-size-10);
@@ -64,7 +70,7 @@
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
   --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
-  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
+  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 72%, transparent);
   --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
   --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
@@ -72,6 +78,23 @@
   --prime-color-border-default: var(--prime-ref-color-gray-150);
   --prime-color-border-faint: var(--prime-ref-color-gray-75);
   --prime-color-border-subtle: var(--prime-ref-color-gray-100);
+  --prime-color-chart-1: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-2: var(--prime-ref-color-chart-light-orange);
+  --prime-color-chart-3: var(--prime-ref-color-chart-light-teal);
+  --prime-color-chart-4: var(--prime-ref-color-chart-light-yellow);
+  --prime-color-chart-5: var(--prime-ref-color-chart-light-pink);
+  --prime-color-chart-6: var(--prime-ref-color-chart-light-green);
+  --prime-color-chart-7: var(--prime-ref-color-chart-light-purple);
+  --prime-color-chart-8: var(--prime-ref-color-chart-light-red);
+  --prime-color-chart-axis: var(--prime-ref-color-gray-300);
+  --prime-color-chart-grid: var(--prime-ref-color-gray-100);
+  --prime-color-chart-other: var(--prime-ref-color-gray-400);
+  --prime-color-chart-scale-1: var(--prime-ref-color-cobalt-100);
+  --prime-color-chart-scale-2: var(--prime-ref-color-cobalt-200);
+  --prime-color-chart-scale-3: var(--prime-ref-color-cobalt-300);
+  --prime-color-chart-scale-4: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-800);
+  --prime-color-chart-scale-fg: var(--prime-ref-color-white);
   --prime-color-control-thumb: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
@@ -122,6 +145,23 @@
   --prime-color-layer-floating2-fill: #f4f5f7;
   --prime-color-layer-floating2-fill-hover: #eaebed;
   --prime-color-layer-floating2-selected: #ffffff;
+  --prime-color-media-disk: rgba(17, 19, 24, 0.48);
+  --prime-color-media-pill: rgba(17, 19, 24, 0.72);
+  --prime-color-media-pill-fg: rgba(255, 255, 255, 0.8);
+  --prime-color-media-shade: rgba(17, 19, 24, 0.56);
+  --prime-color-media-shade-fg: var(--prime-ref-color-gray-0);
+  --prime-color-media-stage: var(--prime-ref-color-gray-950);
+  --prime-color-message-outgoing-accent: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-100);
+  --prime-color-message-outgoing-chip: color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, var(--prime-ref-color-cobalt-100));
+  --prime-color-message-outgoing-chip-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, var(--prime-ref-color-cobalt-100));
+  --prime-color-message-outgoing-danger: var(--prime-ref-color-red-700);
+  --prime-color-message-outgoing-fill: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 10%, transparent);
+  --prime-color-message-outgoing-fill-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 16%, transparent);
+  --prime-color-message-outgoing-muted: var(--prime-ref-color-gray-600);
+  --prime-color-message-outgoing-text: var(--prime-ref-color-gray-925);
+  --prime-color-message-outgoing-track: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 28%, transparent);
   --prime-color-palette-blue-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
@@ -286,6 +326,9 @@
   --prime-font-weight-medium: var(--prime-ref-font-weight-medium);
   --prime-font-weight-regular: var(--prime-ref-font-weight-regular);
   --prime-font-weight-semibold: var(--prime-ref-font-weight-semibold);
+  --prime-gallery-gap: 2px;
+  --prime-gallery-max-size: 22.5rem;
+  --prime-gallery-min-size: 16rem;
   --prime-icon-l: var(--prime-ref-icon-24);
   --prime-icon-m: var(--prime-ref-icon-20);
   --prime-icon-s: var(--prime-ref-icon-16);
@@ -298,6 +341,24 @@
   --prime-layout-reading-max-width: 42rem;
   --prime-layout-sidebar-collapsed-width: var(--prime-ref-space-14);
   --prime-layout-sidebar-width: 15.5rem;
+  --prime-media-disk-blur: var(--prime-ref-space-1);
+  --prime-media-viewer-inset: var(--prime-ref-space-4);
+  --prime-media-viewer-page-gap: var(--prime-ref-space-6);
+  --prime-message-card-width: 16rem;
+  --prime-message-dim-opacity: 0.42;
+  --prime-message-dim-saturation: 0.6;
+  --prime-message-gap: var(--prime-ref-space-4);
+  --prime-message-group-gap: var(--prime-ref-space-2);
+  --prime-message-max-width: 30rem;
+  --prime-message-media-max-height: 22.5rem;
+  --prime-message-morph-duration: var(--prime-ref-duration-300);
+  --prime-message-padding-x: var(--prime-ref-space-3);
+  --prime-message-padding-y: var(--prime-ref-space-2);
+  --prime-message-radius: var(--prime-ref-radius-14);
+  --prime-message-tail-height: var(--prime-ref-space-4);
+  --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
+  --prime-message-tail-width: var(--prime-ref-space-2);
+  --prime-message-video-note: 14.5rem;
   --prime-modal-padding: var(--prime-ref-space-6);
   --prime-modal-radius: var(--prime-ref-radius-16);
   --prime-modal-viewport-padding: var(--prime-ref-space-4);
@@ -305,6 +366,7 @@
   --prime-modal-width-m: 35rem;
   --prime-modal-width-s: 27.5rem;
   --prime-modal-width-xl: 60rem;
+  --prime-modal-width-xs: 22.5rem;
   --prime-motion-blur: 2px;
   --prime-motion-duration-base: var(--prime-ref-duration-380);
   --prime-motion-duration-fast: var(--prime-ref-duration-230);
@@ -314,6 +376,7 @@
   --prime-motion-easing-enter: var(--prime-ref-easing-enter);
   --prime-motion-easing-exit: var(--prime-ref-easing-exit);
   --prime-motion-easing-standard: var(--prime-ref-easing-standard);
+  --prime-motion-loop: var(--prime-ref-duration-570);
   --prime-motion-press-scale: 0.98;
   --prime-motion-press-scale-compact: 0.96;
   --prime-motion-stagger: var(--prime-ref-duration-80);
@@ -339,9 +402,10 @@
   --prime-sheet-handle-area: var(--prime-ref-space-5);
   --prime-sheet-handle-height: var(--prime-ref-space-1);
   --prime-sheet-handle-width: 2.25rem;
-  --prime-sheet-min-width: 35rem;
+  --prime-sheet-padding: var(--prime-ref-space-6);
   --prime-sheet-radius: var(--prime-ref-radius-16);
   --prime-sheet-top-gap: var(--prime-ref-space-10);
+  --prime-sheet-width: 35rem;
   --prime-space-0: var(--prime-ref-space-0);
   --prime-space-1: var(--prime-ref-space-1);
   --prime-space-10: var(--prime-ref-space-10);
@@ -376,6 +440,8 @@
   --prime-table-row-height-l: 3.25rem;
   --prime-table-row-height-m: 2.75rem;
   --prime-table-row-height-s: var(--prime-ref-space-9);
+  --prime-table-row-height-xl: 3.25rem;
+  --prime-table-row-height-xs: var(--prime-ref-space-9);
   --prime-text-body-l-line-height: var(--prime-ref-font-line-height-24);
   --prime-text-body-l-size: var(--prime-ref-font-size-16);
   --prime-text-body-l-tracking: var(--prime-ref-font-tracking-normal);

package/src/styles/tokens.css

@@ -1,5 +1,19 @@
 /* AUTO-GENERATED by scripts/build-tokens.ts */
 :root {
+  --prime-ref-color-chart-dark-green: #008300;
+  --prime-ref-color-chart-dark-orange: #d95926;
+  --prime-ref-color-chart-dark-pink: #d55181;
+  --prime-ref-color-chart-dark-purple: #9085e9;
+  --prime-ref-color-chart-dark-red: #e66767;
+  --prime-ref-color-chart-dark-teal: #199e70;
+  --prime-ref-color-chart-dark-yellow: #c98500;
+  --prime-ref-color-chart-light-green: #008300;
+  --prime-ref-color-chart-light-orange: #d95926;
+  --prime-ref-color-chart-light-pink: #d1487c;
+  --prime-ref-color-chart-light-purple: #4a3aa7;
+  --prime-ref-color-chart-light-red: #e34948;
+  --prime-ref-color-chart-light-teal: #13946a;
+  --prime-ref-color-chart-light-yellow: #b07800;
   --prime-ref-color-cobalt-100: #e6eafd;
   --prime-ref-color-cobalt-200: #cdd5fb;
   --prime-ref-color-cobalt-300: #aab6ff;
@@ -8,6 +22,7 @@
   --prime-ref-color-cobalt-600: #3f59f0;
   --prime-ref-color-cobalt-700: #2f4ae0;
   --prime-ref-color-cobalt-800: #2540c8;
+  --prime-ref-color-cobalt-900: #283a9a;
   --prime-ref-color-cobalt-950: #1b2249;
   --prime-ref-color-gray-0: #ffffff;
   --prime-ref-color-gray-100: #e8eaee;
@@ -74,6 +89,7 @@
   --prime-ref-color-yellow-800: #854d0e;
   --prime-ref-duration-150: 150ms;
   --prime-ref-duration-230: 230ms;
+  --prime-ref-duration-300: 300ms;
   --prime-ref-duration-380: 380ms;
   --prime-ref-duration-570: 570ms;
   --prime-ref-duration-80: 80ms;
@@ -120,6 +136,7 @@
   --prime-ref-icon-32: 2rem;
   --prime-ref-radius-10: 10px;
   --prime-ref-radius-12: 12px;
+  --prime-ref-radius-14: 14px;
   --prime-ref-radius-16: 16px;
   --prime-ref-radius-4: 4px;
   --prime-ref-radius-6: 6px;