prime-ui-kit 0.9.2 → 0.10.0

package/src/layout/sidebar/examples/examples.module.css

@@ -1,4 +1,4 @@
-/* Layout for the Sidebar examples: small "app windows" (canvas rail + surface content). Semantic tokens only. */
+/* Layout for the Sidebar examples: small "app windows" (the page with a rail one layer above it). Semantic tokens only. */
 
 .stage {
   box-sizing: border-box;
@@ -7,8 +7,8 @@
   height: calc(var(--prime-space-24) * 4);
   overflow: hidden;
   border-radius: var(--prime-card-radius);
-  background: var(--prime-color-bg-canvas);
-  /* The rail shares the preview's canvas fill: a hairline keeps the window edge visible. */
+  background: var(--prime-color-layer-current);
+  /* The window is a page on the preview's page: a hairline keeps its edge visible. */
   box-shadow:
     0 0 0 var(--prime-border-width) var(--prime-color-border-subtle),
     var(--prime-shadow-raised);
@@ -24,13 +24,13 @@
   height: calc(var(--prime-space-24) * 2);
 }
 
-/* Content plane next to the rail, like AppShell: surface fill, edge to edge. */
+/* Content plane next to the rail, like AppShell: the page itself, edge to edge. */
 .content {
   box-sizing: border-box;
   flex: 1 1 auto;
   min-width: 0;
   padding: var(--prime-space-4);
-  background: var(--prime-color-bg-surface);
+  background: var(--prime-color-layer-current);
 }
 
 /* The product mark inside `Sidebar.BrandLogo`: an accent tile with a glyph. */

package/src/styles/globals.css

@@ -8,7 +8,7 @@
 :root {
   font-family: var(--prime-font-family-sans);
   color: var(--prime-color-text-primary);
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-0-bg);
   text-rendering: optimizeLegibility;
   font-kerning: normal;
   font-feature-settings: "cv11", "ss01";
@@ -23,7 +23,7 @@
 }
 
 body {
-  background: var(--prime-color-bg-canvas);
+  background: var(--prime-color-layer-0-bg);
   color: var(--prime-color-text-primary);
   font-size: var(--prime-text-body-m-size);
   line-height: var(--prime-text-body-m-line-height);
@@ -88,6 +88,129 @@ input::-moz-focus-inner {
   }
 }
 
+/*
+ * Surface depth (foundation §4). The page (and the AppShell panel) is layer 0; every surface (Card,
+ * Sidebar, Accordion, DataTable…) sets `data-depth` one above the surface around it, floating layers set
+ * `floating`. Each depth points the context variables at its row of `--prime-color-layer-*`:
+ *   layer-current   the surface's own fill        layer-nested    a surface placed on it
+ *   field-bg(-hover/-focus), fill-muted(-hover)   controls on it: one step from the surface
+ *   control-selected                              the selected thumb on a track of it
+ *   layer-shadow                                  a whisper only on a card that sits on the page
+ * A theme island (`data-theme`) starts again at layer 0.
+ */
+:root,
+[data-theme],
+[data-depth="0"] {
+  --prime-color-layer-current: var(--prime-color-layer-0-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-1-bg);
+  --prime-color-field-bg: var(--prime-color-layer-0-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-0-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-0-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-0-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-0-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-0-selected);
+  --prime-layer-shadow: none;
+}
+
+[data-depth="1"] {
+  --prime-color-layer-current: var(--prime-color-layer-1-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-1-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-1-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-1-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-1-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-1-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-1-selected);
+  --prime-layer-shadow: var(--prime-shadow-raised);
+}
+
+[data-depth="2"] {
+  --prime-color-layer-current: var(--prime-color-layer-2-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-3-bg);
+  --prime-color-field-bg: var(--prime-color-layer-2-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-2-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-2-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-2-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-2-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-2-selected);
+  --prime-layer-shadow: none;
+}
+
+[data-depth="3"] {
+  --prime-color-layer-current: var(--prime-color-layer-3-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-4-bg);
+  --prime-color-field-bg: var(--prime-color-layer-3-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-3-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-3-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-3-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-3-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-3-selected);
+  --prime-layer-shadow: none;
+}
+
+/* The deepest layer: a surface nested in it keeps its color (deeper nesting is not supported). */
+[data-depth="4"] {
+  --prime-color-layer-current: var(--prime-color-layer-4-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-4-bg);
+  --prime-color-field-bg: var(--prime-color-layer-4-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-4-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-4-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-4-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-4-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-4-selected);
+  --prime-layer-shadow: none;
+}
+
+/* Floating layers (menus, popovers, modals, drawers): one step above a card, depth comes from the
+   shadow; two layers can nest inside. */
+[data-depth="floating"] {
+  --prime-color-layer-current: var(--prime-color-layer-floating-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating1-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating-selected);
+  --prime-layer-shadow: none;
+}
+
+[data-depth="floating-1"] {
+  --prime-color-layer-current: var(--prime-color-layer-floating1-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating1-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating1-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating1-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating1-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating1-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating1-selected);
+  --prime-layer-shadow: none;
+}
+
+[data-depth="floating-2"] {
+  --prime-color-layer-current: var(--prime-color-layer-floating2-bg);
+  --prime-color-layer-nested: var(--prime-color-layer-floating2-bg);
+  --prime-color-field-bg: var(--prime-color-layer-floating2-fill);
+  --prime-color-field-bg-hover: var(--prime-color-layer-floating2-fill-hover);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating2-bg);
+  --prime-color-fill-muted: var(--prime-color-layer-floating2-fill);
+  --prime-color-fill-muted-hover: var(--prime-color-layer-floating2-fill-hover);
+  --prime-color-control-selected: var(--prime-color-layer-floating2-selected);
+  --prime-layer-shadow: none;
+}
+
+/* A host off the ladder (a tinted banner, an accent wash, an image): its own fill stays, controls
+   on it take translucent washes, which read on any color. */
+[data-depth="tinted"] {
+  --prime-color-field-bg: var(--prime-color-fill-subtle-active);
+  --prime-color-field-bg-hover: var(--prime-color-fill-strong);
+  --prime-color-field-bg-focus: var(--prime-color-layer-floating-bg);
+  --prime-color-fill-muted: var(--prime-color-fill-subtle-active);
+  --prime-color-fill-muted-hover: var(--prime-color-fill-strong);
+  --prime-color-control-selected: var(--prime-color-layer-floating-bg);
+  --prime-layer-shadow: none;
+}
+
 /* Theme switches are instant: a running color transition would start from the old theme and blink. */
 [data-theme-switching],
 [data-theme-switching] *,

package/src/styles/theme-dark.css

@@ -6,32 +6,21 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
   --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-canvas: var(--prime-ref-color-gray-950);
   --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-inverse: var(--prime-ref-color-gray-100);
-  --prime-color-bg-raised: var(--prime-ref-color-gray-875);
   --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
-  --prime-color-bg-sunken: var(--prime-ref-color-gray-950);
-  --prime-color-bg-surface: var(--prime-ref-color-gray-900);
   --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-control-selected: var(--prime-ref-color-gray-750);
   --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);
   --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
   --prime-color-danger-text: var(--prime-ref-color-red-300);
-  --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent);
-  --prime-color-field-bg-focus: var(--prime-ref-color-gray-925);
-  --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 12%, transparent);
-  --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-100) 6%, transparent);
   --prime-color-fill-faint: rgba(233, 235, 240, 0.02);
-  --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-100) 7%, transparent);
-  --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent);
   --prime-color-fill-subtle: rgba(233, 235, 240, 0.05);
@@ -41,6 +30,38 @@
   --prime-color-info-fg: var(--prime-ref-color-gray-950);
   --prime-color-info-soft: color-mix(in srgb, var(--prime-ref-color-sky-500) 16%, transparent);
   --prime-color-info-text: var(--prime-ref-color-sky-300);
+  --prime-color-layer-0-bg: #0d0f13;
+  --prime-color-layer-0-fill: #14161a;
+  --prime-color-layer-0-fill-hover: #1a1c21;
+  --prime-color-layer-0-selected: #212428;
+  --prime-color-layer-1-bg: #14161a;
+  --prime-color-layer-1-fill: #1a1c21;
+  --prime-color-layer-1-fill-hover: #212428;
+  --prime-color-layer-1-selected: #292b2f;
+  --prime-color-layer-2-bg: #1a1c21;
+  --prime-color-layer-2-fill: #212428;
+  --prime-color-layer-2-fill-hover: #292b2f;
+  --prime-color-layer-2-selected: #303237;
+  --prime-color-layer-3-bg: #212428;
+  --prime-color-layer-3-fill: #292b2f;
+  --prime-color-layer-3-fill-hover: #303237;
+  --prime-color-layer-3-selected: #383a3f;
+  --prime-color-layer-4-bg: #292b2f;
+  --prime-color-layer-4-fill: #303237;
+  --prime-color-layer-4-fill-hover: #383a3f;
+  --prime-color-layer-4-selected: #3f4247;
+  --prime-color-layer-floating-bg: #1a1c21;
+  --prime-color-layer-floating-fill: #212428;
+  --prime-color-layer-floating-fill-hover: #292b2f;
+  --prime-color-layer-floating-selected: #303237;
+  --prime-color-layer-floating1-bg: #212328;
+  --prime-color-layer-floating1-fill: #282a2f;
+  --prime-color-layer-floating1-fill-hover: #303237;
+  --prime-color-layer-floating1-selected: #373a3e;
+  --prime-color-layer-floating2-bg: #282a2f;
+  --prime-color-layer-floating2-fill: #303237;
+  --prime-color-layer-floating2-fill-hover: #373a3e;
+  --prime-color-layer-floating2-selected: #3f4146;
   --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);
@@ -82,6 +103,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
+  --prime-color-success-hover: var(--prime-ref-color-green-300);
   --prime-color-success-soft: color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent);
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);
@@ -90,8 +112,10 @@
   --prime-color-text-placeholder: var(--prime-ref-color-gray-400);
   --prime-color-text-primary: var(--prime-ref-color-gray-100);
   --prime-color-text-secondary: var(--prime-ref-color-gray-300);
-  --prime-color-tooltip-bg: var(--prime-ref-color-gray-750);
-  --prime-color-tooltip-text: var(--prime-ref-color-gray-100);
+  --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);
+  --prime-color-tooltip-fill: rgba(17, 19, 24, 0.08);
+  --prime-color-tooltip-muted: var(--prime-ref-color-gray-600);
+  --prime-color-tooltip-text: var(--prime-ref-color-gray-925);
   --prime-color-warning-default: var(--prime-ref-color-orange-400);
   --prime-color-warning-fg: var(--prime-ref-color-gray-950);
   --prime-color-warning-soft: color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent);

package/src/styles/theme-light.css

@@ -57,28 +57,21 @@
   --prime-card-padding-m: var(--prime-ref-space-5);
   --prime-card-padding-s: var(--prime-ref-space-4);
   --prime-card-radius: var(--prime-ref-radius-12);
-  --prime-card-shadow: var(--prime-shadow-raised);
   --prime-color-accent-default: var(--prime-ref-color-cobalt-700);
   --prime-color-accent-fg: var(--prime-ref-color-white);
   --prime-color-accent-hover: var(--prime-ref-color-cobalt-800);
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-bg-canvas: var(--prime-ref-color-gray-50);
   --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-edge: rgba(255, 255, 255, 0.85);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
-  --prime-color-bg-raised: var(--prime-ref-color-gray-0);
   --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
-  --prime-color-bg-sunken: var(--prime-ref-color-gray-75);
-  --prime-color-bg-surface: var(--prime-ref-color-gray-0);
   --prime-color-border-control: transparent;
   --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-card-bg: var(--prime-color-bg-surface);
-  --prime-color-control-selected: var(--prime-ref-color-gray-0);
   --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);
@@ -86,14 +79,8 @@
   --prime-color-danger-hover: var(--prime-ref-color-red-700);
   --prime-color-danger-soft: var(--prime-ref-color-red-100);
   --prime-color-danger-text: var(--prime-ref-color-red-700);
-  --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
-  --prime-color-field-bg-focus: var(--prime-ref-color-gray-0);
-  --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, transparent);
-  --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
   --prime-color-fill-faint: rgba(17, 19, 24, 0.04);
-  --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent);
-  --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent);
   --prime-color-fill-subtle: rgba(17, 19, 24, 0.04);
@@ -103,6 +90,38 @@
   --prime-color-info-fg: var(--prime-ref-color-white);
   --prime-color-info-soft: var(--prime-ref-color-sky-100);
   --prime-color-info-text: var(--prime-ref-color-sky-800);
+  --prime-color-layer-0-bg: #f3f4f6;
+  --prime-color-layer-0-fill: #e9eaec;
+  --prime-color-layer-0-fill-hover: #dfe0e2;
+  --prime-color-layer-0-selected: #ffffff;
+  --prime-color-layer-1-bg: #ffffff;
+  --prime-color-layer-1-fill: #f4f5f7;
+  --prime-color-layer-1-fill-hover: #eaebed;
+  --prime-color-layer-1-selected: #ffffff;
+  --prime-color-layer-2-bg: #f4f5f7;
+  --prime-color-layer-2-fill: #eaebed;
+  --prime-color-layer-2-fill-hover: #e0e1e3;
+  --prime-color-layer-2-selected: #ffffff;
+  --prime-color-layer-3-bg: #ffffff;
+  --prime-color-layer-3-fill: #f4f5f7;
+  --prime-color-layer-3-fill-hover: #eaebed;
+  --prime-color-layer-3-selected: #ffffff;
+  --prime-color-layer-4-bg: #f4f5f7;
+  --prime-color-layer-4-fill: #eaebed;
+  --prime-color-layer-4-fill-hover: #e0e1e3;
+  --prime-color-layer-4-selected: #ffffff;
+  --prime-color-layer-floating-bg: #ffffff;
+  --prime-color-layer-floating-fill: #f4f5f7;
+  --prime-color-layer-floating-fill-hover: #eaebed;
+  --prime-color-layer-floating-selected: #ffffff;
+  --prime-color-layer-floating1-bg: #f4f5f7;
+  --prime-color-layer-floating1-fill: #eaebed;
+  --prime-color-layer-floating1-fill-hover: #e0e1e3;
+  --prime-color-layer-floating1-selected: #ffffff;
+  --prime-color-layer-floating2-bg: #ffffff;
+  --prime-color-layer-floating2-fill: #f4f5f7;
+  --prime-color-layer-floating2-fill-hover: #eaebed;
+  --prime-color-layer-floating2-selected: #ffffff;
   --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);
@@ -145,6 +164,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
+  --prime-color-success-hover: var(--prime-ref-color-green-800);
   --prime-color-success-soft: var(--prime-ref-color-green-100);
   --prime-color-success-text: var(--prime-ref-color-green-700);
   --prime-color-text-disabled: var(--prime-ref-color-gray-400);
@@ -154,6 +174,8 @@
   --prime-color-text-primary: var(--prime-ref-color-gray-925);
   --prime-color-text-secondary: var(--prime-ref-color-gray-700);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-925);
+  --prime-color-tooltip-fill: rgba(255, 255, 255, 0.14);
+  --prime-color-tooltip-muted: var(--prime-ref-color-gray-300);
   --prime-color-tooltip-text: var(--prime-ref-color-gray-0);
   --prime-color-warning-default: var(--prime-ref-color-orange-700);
   --prime-color-warning-fg: var(--prime-ref-color-white);
@@ -283,6 +305,7 @@
   --prime-modal-width-m: 35rem;
   --prime-modal-width-s: 27.5rem;
   --prime-modal-width-xl: 60rem;
+  --prime-motion-blur: 2px;
   --prime-motion-duration-base: var(--prime-ref-duration-380);
   --prime-motion-duration-fast: var(--prime-ref-duration-230);
   --prime-motion-duration-slow: var(--prime-ref-duration-570);
@@ -421,11 +444,33 @@
   --prime-thumbnail-xs-radius: var(--prime-ref-radius-4);
   --prime-tooltip-arrow-height: 0.3125rem;
   --prime-tooltip-arrow-width: 0.625rem;
+  --prime-tooltip-l-line-height: var(--prime-ref-font-line-height-20);
+  --prime-tooltip-l-padding-x: var(--prime-ref-space-3);
+  --prime-tooltip-l-padding-y: var(--prime-ref-space-2);
+  --prime-tooltip-l-radius: var(--prime-ref-radius-8);
+  --prime-tooltip-l-text-size: var(--prime-ref-font-size-14);
+  --prime-tooltip-m-line-height: var(--prime-ref-font-line-height-20);
+  --prime-tooltip-m-padding-x: 0.625rem;
+  --prime-tooltip-m-padding-y: 0.375rem;
+  --prime-tooltip-m-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-m-text-size: var(--prime-ref-font-size-13);
   --prime-tooltip-max-width: 17.5rem;
   --prime-tooltip-offset: var(--prime-ref-space-2);
-  --prime-tooltip-padding-x: var(--prime-ref-space-2);
-  --prime-tooltip-padding-y: var(--prime-ref-space-1);
-  --prime-tooltip-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-s-line-height: var(--prime-ref-font-line-height-16);
+  --prime-tooltip-s-padding-x: var(--prime-ref-space-2);
+  --prime-tooltip-s-padding-y: 0.375rem;
+  --prime-tooltip-s-radius: var(--prime-ref-radius-6);
+  --prime-tooltip-s-text-size: var(--prime-ref-font-size-12);
+  --prime-tooltip-xl-line-height: var(--prime-ref-font-line-height-24);
+  --prime-tooltip-xl-padding-x: var(--prime-ref-space-4);
+  --prime-tooltip-xl-padding-y: var(--prime-ref-space-2);
+  --prime-tooltip-xl-radius: var(--prime-ref-radius-8);
+  --prime-tooltip-xl-text-size: var(--prime-ref-font-size-16);
+  --prime-tooltip-xs-line-height: var(--prime-ref-font-line-height-16);
+  --prime-tooltip-xs-padding-x: 0.375rem;
+  --prime-tooltip-xs-padding-y: var(--prime-ref-space-1);
+  --prime-tooltip-xs-radius: var(--prime-ref-radius-4);
+  --prime-tooltip-xs-text-size: var(--prime-ref-font-size-12);
   --prime-z-overlay: var(--prime-ref-z-index-overlay);
   --prime-z-sticky: var(--prime-ref-z-index-sticky);
   --prime-z-toast: var(--prime-ref-z-index-toast);

package/src/styles/tokens.css

@@ -31,6 +31,7 @@
   --prime-ref-color-green-400: #4ade80;
   --prime-ref-color-green-500: #22c55e;
   --prime-ref-color-green-700: #15803d;
+  --prime-ref-color-green-800: #166534;
   --prime-ref-color-orange-100: #ffedd5;
   --prime-ref-color-orange-300: #fdba74;
   --prime-ref-color-orange-400: #fb923c;