@dialpad/dialtone-css 8.80.0-next.6 → 8.80.0-next.8

package/lib/dist/tokens/tokens-base-light.css

@@ -5,20 +5,162 @@
   --dt-shadow-focus-inset-type: dropShadow;
   --dt-shadow-focus-2-type: dropShadow;
   --dt-shadow-focus-1-type: dropShadow;
+  --dt-shadow-extra-large-4-offset-y: 3.2rem;
+  --dt-shadow-extra-large-4-offset-x: 0rem;
+  --dt-shadow-extra-large-4-type: dropShadow;
+  --dt-shadow-extra-large-4-color: oklch(0 0 0 / 0.16);
+  --dt-shadow-extra-large-4-spread: 0rem;
+  --dt-shadow-extra-large-4-blur: 3.2rem;
+  --dt-shadow-extra-large-3-offset-y: 1.2rem;
+  --dt-shadow-extra-large-3-offset-x: 0rem;
+  --dt-shadow-extra-large-3-type: dropShadow;
+  --dt-shadow-extra-large-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-extra-large-3-spread: 0rem;
+  --dt-shadow-extra-large-3-blur: 1.6rem;
+  --dt-shadow-extra-large-2-offset-y: 0.4rem;
+  --dt-shadow-extra-large-2-offset-x: 0rem;
+  --dt-shadow-extra-large-2-type: dropShadow;
+  --dt-shadow-extra-large-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-extra-large-2-spread: 0rem;
+  --dt-shadow-extra-large-2-blur: 0.6rem;
+  --dt-shadow-extra-large-1-offset-y: 0.2rem;
+  --dt-shadow-extra-large-1-offset-x: 0rem;
+  --dt-shadow-extra-large-1-type: dropShadow;
+  --dt-shadow-extra-large-1-color: oklch(0 0 0 / 0.02);
+  --dt-shadow-extra-large-1-spread: 0rem;
+  --dt-shadow-extra-large-1-blur: 0.2rem;
+  --dt-shadow-large-3-offset-y: 0.8rem;
+  --dt-shadow-large-3-offset-x: 0rem;
+  --dt-shadow-large-3-type: dropShadow;
+  --dt-shadow-large-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-large-3-spread: 0rem;
+  --dt-shadow-large-3-blur: 1.2rem;
+  --dt-shadow-large-2-offset-y: 0.2rem;
+  --dt-shadow-large-2-offset-x: 0rem;
+  --dt-shadow-large-2-type: dropShadow;
+  --dt-shadow-large-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-large-2-spread: 0rem;
+  --dt-shadow-large-2-blur: 0.8rem;
+  --dt-shadow-large-1-offset-y: 0.1rem;
+  --dt-shadow-large-1-offset-x: 0rem;
+  --dt-shadow-large-1-type: dropShadow;
+  --dt-shadow-large-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-large-1-spread: 0rem;
+  --dt-shadow-large-1-blur: 0.2rem;
+  --dt-shadow-medium-3-offset-y: 0.8rem;
+  --dt-shadow-medium-3-offset-x: 0rem;
+  --dt-shadow-medium-3-type: dropShadow;
+  --dt-shadow-medium-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-medium-3-spread: 0rem;
+  --dt-shadow-medium-3-blur: 1.2rem;
+  --dt-shadow-medium-2-offset-y: 0.2rem;
+  --dt-shadow-medium-2-offset-x: 0rem;
+  --dt-shadow-medium-2-type: dropShadow;
+  --dt-shadow-medium-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-medium-2-spread: 0rem;
+  --dt-shadow-medium-2-blur: 0.8rem;
+  --dt-shadow-medium-1-offset-y: 0.1rem;
+  --dt-shadow-medium-1-offset-x: 0rem;
+  --dt-shadow-medium-1-type: dropShadow;
+  --dt-shadow-medium-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-medium-1-spread: 0rem;
+  --dt-shadow-medium-1-blur: 0.2rem;
+  --dt-shadow-small-3-offset-y: 0.2rem;
+  --dt-shadow-small-3-offset-x: 0rem;
+  --dt-shadow-small-3-type: dropShadow;
+  --dt-shadow-small-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-small-3-spread: 0rem;
+  --dt-shadow-small-3-blur: 0.4rem;
+  --dt-shadow-small-2-offset-y: 0.1rem;
+  --dt-shadow-small-2-offset-x: 0rem;
+  --dt-shadow-small-2-type: dropShadow;
+  --dt-shadow-small-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-small-2-spread: 0rem;
+  --dt-shadow-small-2-blur: 0.2rem;
+  --dt-shadow-small-1-offset-y: -0.1rem;
+  --dt-shadow-small-1-offset-x: 0rem;
+  --dt-shadow-small-1-type: dropShadow;
+  --dt-shadow-small-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-small-1-spread: 0rem;
+  --dt-shadow-small-1-blur: 0.1rem;
+  --dt-shadow-card-3-offset-y: 0.2rem;
+  --dt-shadow-card-3-offset-x: 0rem;
   --dt-shadow-card-3-type: dropShadow;
-  --dt-shadow-card-3-color: oklch(0 0 0 / 0.0784);
+  --dt-shadow-card-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-card-3-spread: 0rem;
+  --dt-shadow-card-3-blur: 0.4rem;
+  --dt-shadow-card-2-offset-y: 0.1rem;
+  --dt-shadow-card-2-offset-x: 0rem;
   --dt-shadow-card-2-type: dropShadow;
-  --dt-shadow-card-2-color: oklch(0 0 0 / 0.0392);
+  --dt-shadow-card-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-card-2-spread: 0rem;
+  --dt-shadow-card-2-blur: 0.2rem;
+  --dt-shadow-card-1-offset-y: -0.1rem;
+  --dt-shadow-card-1-offset-x: 0rem;
   --dt-shadow-card-1-type: dropShadow;
-  --dt-shadow-card-1-color: oklch(0 0 0 / 0.0314);
-  --dt-shadow-extra-large-type: dropShadow;
-  --dt-shadow-extra-large-color: oklch(0 0 0 / 0.302);
-  --dt-shadow-large-type: dropShadow;
-  --dt-shadow-large-color: oklch(0 0 0 / 0.302);
-  --dt-shadow-medium-type: dropShadow;
-  --dt-shadow-medium-color: oklch(0 0 0 / 0.251);
-  --dt-shadow-small-type: dropShadow;
-  --dt-shadow-small-color: oklch(0 0 0 / 0.149);
+  --dt-shadow-card-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-card-1-spread: 0rem;
+  --dt-shadow-card-1-blur: 0.1rem;
+  --dt-shadow-modal-4-offset-y: 3.2rem;
+  --dt-shadow-modal-4-offset-x: 0rem;
+  --dt-shadow-modal-4-type: dropShadow;
+  --dt-shadow-modal-4-color: oklch(0 0 0 / 0.16);
+  --dt-shadow-modal-4-spread: 0rem;
+  --dt-shadow-modal-4-blur: 3.2rem;
+  --dt-shadow-modal-3-offset-y: 1.2rem;
+  --dt-shadow-modal-3-offset-x: 0rem;
+  --dt-shadow-modal-3-type: dropShadow;
+  --dt-shadow-modal-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-modal-3-spread: 0rem;
+  --dt-shadow-modal-3-blur: 1.6rem;
+  --dt-shadow-modal-2-offset-y: 0.4rem;
+  --dt-shadow-modal-2-offset-x: 0rem;
+  --dt-shadow-modal-2-type: dropShadow;
+  --dt-shadow-modal-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-modal-2-spread: 0rem;
+  --dt-shadow-modal-2-blur: 0.6rem;
+  --dt-shadow-modal-1-offset-y: 0.2rem;
+  --dt-shadow-modal-1-offset-x: 0rem;
+  --dt-shadow-modal-1-type: dropShadow;
+  --dt-shadow-modal-1-color: oklch(0 0 0 / 0.02);
+  --dt-shadow-modal-1-spread: 0rem;
+  --dt-shadow-modal-1-blur: 0.2rem;
+  --dt-shadow-overlay-3-offset-y: 0.8rem;
+  --dt-shadow-overlay-3-offset-x: 0rem;
+  --dt-shadow-overlay-3-type: dropShadow;
+  --dt-shadow-overlay-3-color: oklch(0 0 0 / 0.08);
+  --dt-shadow-overlay-3-spread: 0rem;
+  --dt-shadow-overlay-3-blur: 1.2rem;
+  --dt-shadow-overlay-2-offset-y: 0.2rem;
+  --dt-shadow-overlay-2-offset-x: 0rem;
+  --dt-shadow-overlay-2-type: dropShadow;
+  --dt-shadow-overlay-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-overlay-2-spread: 0rem;
+  --dt-shadow-overlay-2-blur: 0.8rem;
+  --dt-shadow-overlay-1-offset-y: 0.1rem;
+  --dt-shadow-overlay-1-offset-x: 0rem;
+  --dt-shadow-overlay-1-type: dropShadow;
+  --dt-shadow-overlay-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-overlay-1-spread: 0rem;
+  --dt-shadow-overlay-1-blur: 0.2rem;
+  --dt-shadow-raised-3-offset-y: 0.2rem;
+  --dt-shadow-raised-3-offset-x: 0rem;
+  --dt-shadow-raised-3-type: dropShadow;
+  --dt-shadow-raised-3-color: oklch(0 0 0 / 0.12);
+  --dt-shadow-raised-3-spread: 0rem;
+  --dt-shadow-raised-3-blur: 0.4rem;
+  --dt-shadow-raised-2-offset-y: 0.1rem;
+  --dt-shadow-raised-2-offset-x: 0rem;
+  --dt-shadow-raised-2-type: dropShadow;
+  --dt-shadow-raised-2-color: oklch(0 0 0 / 0.06);
+  --dt-shadow-raised-2-spread: 0rem;
+  --dt-shadow-raised-2-blur: 0.2rem;
+  --dt-shadow-raised-1-offset-y: -0.1rem;
+  --dt-shadow-raised-1-offset-x: 0rem;
+  --dt-shadow-raised-1-type: dropShadow;
+  --dt-shadow-raised-1-color: oklch(0 0 0 / 0.04);
+  --dt-shadow-raised-1-spread: 0rem;
+  --dt-shadow-raised-1-blur: 0.1rem;
   --dt-opacity-1300: 1;
   --dt-opacity-1200: 0.9;
   --dt-opacity-1100: 0.8;
@@ -344,34 +486,6 @@
   --dt-shadow-focus-1-offset-x: var(--dt-size-0);
   --dt-shadow-focus-1-spread: var(--dt-size-100);
   --dt-shadow-focus-1-blur: var(--dt-size-0);
-  --dt-shadow-card-3-offset-y: var(--dt-size-200);
-  --dt-shadow-card-3-offset-x: var(--dt-size-0);
-  --dt-shadow-card-3-spread: var(--dt-size-0);
-  --dt-shadow-card-3-blur: var(--dt-size-500);
-  --dt-shadow-card-2-offset-y: var(--dt-size-200);
-  --dt-shadow-card-2-offset-x: var(--dt-size-0);
-  --dt-shadow-card-2-spread: var(--dt-size-0);
-  --dt-shadow-card-2-blur: var(--dt-size-300);
-  --dt-shadow-card-1-offset-y: var(--dt-size-100);
-  --dt-shadow-card-1-offset-x: var(--dt-size-0);
-  --dt-shadow-card-1-spread: var(--dt-size-0);
-  --dt-shadow-card-1-blur: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-y: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-x: var(--dt-size-0);
-  --dt-shadow-extra-large-spread: var(--dt-size-0);
-  --dt-shadow-extra-large-blur: var(--dt-size-600);
-  --dt-shadow-large-offset-y: var(--dt-size-200);
-  --dt-shadow-large-offset-x: var(--dt-size-0);
-  --dt-shadow-large-spread: var(--dt-size-0);
-  --dt-shadow-large-blur: var(--dt-size-500);
-  --dt-shadow-medium-offset-y: var(--dt-size-200);
-  --dt-shadow-medium-offset-x: var(--dt-size-0);
-  --dt-shadow-medium-spread: var(--dt-size-0);
-  --dt-shadow-medium-blur: var(--dt-size-400);
-  --dt-shadow-small-offset-y: var(--dt-size-200);
-  --dt-shadow-small-offset-x: var(--dt-size-0);
-  --dt-shadow-small-spread: var(--dt-size-0);
-  --dt-shadow-small-blur: var(--dt-size-300);
   --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
   --dt-color-black-1000: oklch(0.1595 0.0045 84.59);
   --dt-color-black-950: oklch(0.2083 0.006 91.63);
@@ -527,12 +641,15 @@
   --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
   --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
   --dt-shadow-focus-1-color: oklch(0.9748 0.0025 48.72);
-  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
+  --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-offset-x) var(--dt-shadow-extra-large-1-offset-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-offset-x) var(--dt-shadow-extra-large-2-offset-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-offset-x) var(--dt-shadow-extra-large-3-offset-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-offset-x) var(--dt-shadow-extra-large-4-offset-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color);
+  --dt-shadow-large: var(--dt-shadow-large-1-offset-x) var(--dt-shadow-large-1-offset-y) var(--dt-shadow-large-1-blur) var(--dt-shadow-large-1-spread) var(--dt-shadow-large-1-color), var(--dt-shadow-large-2-offset-x) var(--dt-shadow-large-2-offset-y) var(--dt-shadow-large-2-blur) var(--dt-shadow-large-2-spread) var(--dt-shadow-large-2-color), var(--dt-shadow-large-3-offset-x) var(--dt-shadow-large-3-offset-y) var(--dt-shadow-large-3-blur) var(--dt-shadow-large-3-spread) var(--dt-shadow-large-3-color);
+  --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color);
+  --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color);
   --dt-shadow-card: var(--dt-shadow-card-1-offset-x) var(--dt-shadow-card-1-offset-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-offset-x) var(--dt-shadow-card-2-offset-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-offset-x) var(--dt-shadow-card-3-offset-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
-  --dt-shadow-extra-large: var(--dt-shadow-extra-large-offset-x) var(--dt-shadow-extra-large-offset-y) var(--dt-shadow-extra-large-blur) var(--dt-shadow-extra-large-spread) var(--dt-shadow-extra-large-color);
-  --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
-  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
-  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
+  --dt-shadow-modal: var(--dt-shadow-modal-1-offset-x) var(--dt-shadow-modal-1-offset-y) var(--dt-shadow-modal-1-blur) var(--dt-shadow-modal-1-spread) var(--dt-shadow-modal-1-color), var(--dt-shadow-modal-2-offset-x) var(--dt-shadow-modal-2-offset-y) var(--dt-shadow-modal-2-blur) var(--dt-shadow-modal-2-spread) var(--dt-shadow-modal-2-color), var(--dt-shadow-modal-3-offset-x) var(--dt-shadow-modal-3-offset-y) var(--dt-shadow-modal-3-blur) var(--dt-shadow-modal-3-spread) var(--dt-shadow-modal-3-color), var(--dt-shadow-modal-4-offset-x) var(--dt-shadow-modal-4-offset-y) var(--dt-shadow-modal-4-blur) var(--dt-shadow-modal-4-spread) var(--dt-shadow-modal-4-color);
+  --dt-shadow-overlay: var(--dt-shadow-overlay-1-offset-x) var(--dt-shadow-overlay-1-offset-y) var(--dt-shadow-overlay-1-blur) var(--dt-shadow-overlay-1-spread) var(--dt-shadow-overlay-1-color), var(--dt-shadow-overlay-2-offset-x) var(--dt-shadow-overlay-2-offset-y) var(--dt-shadow-overlay-2-blur) var(--dt-shadow-overlay-2-spread) var(--dt-shadow-overlay-2-color), var(--dt-shadow-overlay-3-offset-x) var(--dt-shadow-overlay-3-offset-y) var(--dt-shadow-overlay-3-blur) var(--dt-shadow-overlay-3-spread) var(--dt-shadow-overlay-3-color);
+  --dt-shadow-raised: var(--dt-shadow-raised-1-offset-x) var(--dt-shadow-raised-1-offset-y) var(--dt-shadow-raised-1-blur) var(--dt-shadow-raised-1-spread) var(--dt-shadow-raised-1-color), var(--dt-shadow-raised-2-offset-x) var(--dt-shadow-raised-2-offset-y) var(--dt-shadow-raised-2-blur) var(--dt-shadow-raised-2-spread) var(--dt-shadow-raised-2-color), var(--dt-shadow-raised-3-offset-x) var(--dt-shadow-raised-3-offset-y) var(--dt-shadow-raised-3-blur) var(--dt-shadow-raised-3-spread) var(--dt-shadow-raised-3-color);
+  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
   --dt-shadow-focus: var(--dt-shadow-focus-1-offset-x) var(--dt-shadow-focus-1-offset-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-offset-x) var(--dt-shadow-focus-2-offset-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
   --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
   --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */

package/lib/dist/tokens/tokens-botany-dark.css

@@ -775,6 +775,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-botany-light.css

@@ -757,6 +757,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-buttercream-dark.css

@@ -780,6 +780,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-buttercream-light.css

@@ -763,6 +763,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-ceruleo-dark.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-ceruleo-light.css

@@ -754,6 +754,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-debug-base.css

@@ -5,20 +5,162 @@
   --dt-shadow-focus-inset-type: dropShadow;
   --dt-shadow-focus-2-type: dropShadow;
   --dt-shadow-focus-1-type: dropShadow;
+  --dt-shadow-extra-large-4-offset-y: 3.2rem;
+  --dt-shadow-extra-large-4-offset-x: 0rem;
+  --dt-shadow-extra-large-4-type: dropShadow;
+  --dt-shadow-extra-large-4-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-extra-large-4-spread: 0rem;
+  --dt-shadow-extra-large-4-blur: 3.2rem;
+  --dt-shadow-extra-large-3-offset-y: 1.2rem;
+  --dt-shadow-extra-large-3-offset-x: 0rem;
+  --dt-shadow-extra-large-3-type: dropShadow;
+  --dt-shadow-extra-large-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-extra-large-3-spread: 0rem;
+  --dt-shadow-extra-large-3-blur: 1.6rem;
+  --dt-shadow-extra-large-2-offset-y: 0.4rem;
+  --dt-shadow-extra-large-2-offset-x: 0rem;
+  --dt-shadow-extra-large-2-type: dropShadow;
+  --dt-shadow-extra-large-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-extra-large-2-spread: 0rem;
+  --dt-shadow-extra-large-2-blur: 0.6rem;
+  --dt-shadow-extra-large-1-offset-y: 0.2rem;
+  --dt-shadow-extra-large-1-offset-x: 0rem;
+  --dt-shadow-extra-large-1-type: dropShadow;
+  --dt-shadow-extra-large-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-extra-large-1-spread: 0rem;
+  --dt-shadow-extra-large-1-blur: 0.2rem;
+  --dt-shadow-large-3-offset-y: 0.8rem;
+  --dt-shadow-large-3-offset-x: 0rem;
+  --dt-shadow-large-3-type: dropShadow;
+  --dt-shadow-large-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-large-3-spread: 0rem;
+  --dt-shadow-large-3-blur: 1.2rem;
+  --dt-shadow-large-2-offset-y: 0.2rem;
+  --dt-shadow-large-2-offset-x: 0rem;
+  --dt-shadow-large-2-type: dropShadow;
+  --dt-shadow-large-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-large-2-spread: 0rem;
+  --dt-shadow-large-2-blur: 0.8rem;
+  --dt-shadow-large-1-offset-y: 0.1rem;
+  --dt-shadow-large-1-offset-x: 0rem;
+  --dt-shadow-large-1-type: dropShadow;
+  --dt-shadow-large-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-large-1-spread: 0rem;
+  --dt-shadow-large-1-blur: 0.2rem;
+  --dt-shadow-medium-3-offset-y: 0.8rem;
+  --dt-shadow-medium-3-offset-x: 0rem;
+  --dt-shadow-medium-3-type: dropShadow;
+  --dt-shadow-medium-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-medium-3-spread: 0rem;
+  --dt-shadow-medium-3-blur: 1.2rem;
+  --dt-shadow-medium-2-offset-y: 0.2rem;
+  --dt-shadow-medium-2-offset-x: 0rem;
+  --dt-shadow-medium-2-type: dropShadow;
+  --dt-shadow-medium-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-medium-2-spread: 0rem;
+  --dt-shadow-medium-2-blur: 0.8rem;
+  --dt-shadow-medium-1-offset-y: 0.1rem;
+  --dt-shadow-medium-1-offset-x: 0rem;
+  --dt-shadow-medium-1-type: dropShadow;
+  --dt-shadow-medium-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-medium-1-spread: 0rem;
+  --dt-shadow-medium-1-blur: 0.2rem;
+  --dt-shadow-small-3-offset-y: 0.2rem;
+  --dt-shadow-small-3-offset-x: 0rem;
+  --dt-shadow-small-3-type: dropShadow;
+  --dt-shadow-small-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-small-3-spread: 0rem;
+  --dt-shadow-small-3-blur: 0.4rem;
+  --dt-shadow-small-2-offset-y: 0.1rem;
+  --dt-shadow-small-2-offset-x: 0rem;
+  --dt-shadow-small-2-type: dropShadow;
+  --dt-shadow-small-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-small-2-spread: 0rem;
+  --dt-shadow-small-2-blur: 0.2rem;
+  --dt-shadow-small-1-offset-y: -0.1rem;
+  --dt-shadow-small-1-offset-x: 0rem;
+  --dt-shadow-small-1-type: dropShadow;
+  --dt-shadow-small-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-small-1-spread: 0rem;
+  --dt-shadow-small-1-blur: 0.1rem;
+  --dt-shadow-card-3-offset-y: 0.2rem;
+  --dt-shadow-card-3-offset-x: 0rem;
   --dt-shadow-card-3-type: dropShadow;
   --dt-shadow-card-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-card-3-spread: 0rem;
+  --dt-shadow-card-3-blur: 0.4rem;
+  --dt-shadow-card-2-offset-y: 0.1rem;
+  --dt-shadow-card-2-offset-x: 0rem;
   --dt-shadow-card-2-type: dropShadow;
   --dt-shadow-card-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-card-2-spread: 0rem;
+  --dt-shadow-card-2-blur: 0.2rem;
+  --dt-shadow-card-1-offset-y: -0.1rem;
+  --dt-shadow-card-1-offset-x: 0rem;
   --dt-shadow-card-1-type: dropShadow;
   --dt-shadow-card-1-color: oklch(0.7 0.25 54.01);
-  --dt-shadow-extra-large-type: dropShadow;
-  --dt-shadow-extra-large-color: oklch(0.7 0.25 54.01);
-  --dt-shadow-large-type: dropShadow;
-  --dt-shadow-large-color: oklch(0.7 0.25 54.01);
-  --dt-shadow-medium-type: dropShadow;
-  --dt-shadow-medium-color: oklch(0.7 0.25 54.01);
-  --dt-shadow-small-type: dropShadow;
-  --dt-shadow-small-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-card-1-spread: 0rem;
+  --dt-shadow-card-1-blur: 0.1rem;
+  --dt-shadow-modal-4-offset-y: 3.2rem;
+  --dt-shadow-modal-4-offset-x: 0rem;
+  --dt-shadow-modal-4-type: dropShadow;
+  --dt-shadow-modal-4-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-modal-4-spread: 0rem;
+  --dt-shadow-modal-4-blur: 3.2rem;
+  --dt-shadow-modal-3-offset-y: 1.2rem;
+  --dt-shadow-modal-3-offset-x: 0rem;
+  --dt-shadow-modal-3-type: dropShadow;
+  --dt-shadow-modal-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-modal-3-spread: 0rem;
+  --dt-shadow-modal-3-blur: 1.6rem;
+  --dt-shadow-modal-2-offset-y: 0.4rem;
+  --dt-shadow-modal-2-offset-x: 0rem;
+  --dt-shadow-modal-2-type: dropShadow;
+  --dt-shadow-modal-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-modal-2-spread: 0rem;
+  --dt-shadow-modal-2-blur: 0.6rem;
+  --dt-shadow-modal-1-offset-y: 0.2rem;
+  --dt-shadow-modal-1-offset-x: 0rem;
+  --dt-shadow-modal-1-type: dropShadow;
+  --dt-shadow-modal-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-modal-1-spread: 0rem;
+  --dt-shadow-modal-1-blur: 0.2rem;
+  --dt-shadow-overlay-3-offset-y: 0.8rem;
+  --dt-shadow-overlay-3-offset-x: 0rem;
+  --dt-shadow-overlay-3-type: dropShadow;
+  --dt-shadow-overlay-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-overlay-3-spread: 0rem;
+  --dt-shadow-overlay-3-blur: 1.2rem;
+  --dt-shadow-overlay-2-offset-y: 0.2rem;
+  --dt-shadow-overlay-2-offset-x: 0rem;
+  --dt-shadow-overlay-2-type: dropShadow;
+  --dt-shadow-overlay-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-overlay-2-spread: 0rem;
+  --dt-shadow-overlay-2-blur: 0.8rem;
+  --dt-shadow-overlay-1-offset-y: 0.1rem;
+  --dt-shadow-overlay-1-offset-x: 0rem;
+  --dt-shadow-overlay-1-type: dropShadow;
+  --dt-shadow-overlay-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-overlay-1-spread: 0rem;
+  --dt-shadow-overlay-1-blur: 0.2rem;
+  --dt-shadow-raised-3-offset-y: 0.2rem;
+  --dt-shadow-raised-3-offset-x: 0rem;
+  --dt-shadow-raised-3-type: dropShadow;
+  --dt-shadow-raised-3-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-raised-3-spread: 0rem;
+  --dt-shadow-raised-3-blur: 0.4rem;
+  --dt-shadow-raised-2-offset-y: 0.1rem;
+  --dt-shadow-raised-2-offset-x: 0rem;
+  --dt-shadow-raised-2-type: dropShadow;
+  --dt-shadow-raised-2-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-raised-2-spread: 0rem;
+  --dt-shadow-raised-2-blur: 0.2rem;
+  --dt-shadow-raised-1-offset-y: -0.1rem;
+  --dt-shadow-raised-1-offset-x: 0rem;
+  --dt-shadow-raised-1-type: dropShadow;
+  --dt-shadow-raised-1-color: oklch(0.7 0.25 54.01);
+  --dt-shadow-raised-1-spread: 0rem;
+  --dt-shadow-raised-1-blur: 0.1rem;
   --dt-opacity-1300: 1;
   --dt-opacity-1200: 0.9;
   --dt-opacity-1100: 0.8;
@@ -344,34 +486,6 @@
   --dt-shadow-focus-1-offset-x: var(--dt-size-0);
   --dt-shadow-focus-1-spread: var(--dt-size-100);
   --dt-shadow-focus-1-blur: var(--dt-size-0);
-  --dt-shadow-card-3-offset-y: var(--dt-size-200);
-  --dt-shadow-card-3-offset-x: var(--dt-size-0);
-  --dt-shadow-card-3-spread: var(--dt-size-0);
-  --dt-shadow-card-3-blur: var(--dt-size-500);
-  --dt-shadow-card-2-offset-y: var(--dt-size-200);
-  --dt-shadow-card-2-offset-x: var(--dt-size-0);
-  --dt-shadow-card-2-spread: var(--dt-size-0);
-  --dt-shadow-card-2-blur: var(--dt-size-300);
-  --dt-shadow-card-1-offset-y: var(--dt-size-100);
-  --dt-shadow-card-1-offset-x: var(--dt-size-0);
-  --dt-shadow-card-1-spread: var(--dt-size-0);
-  --dt-shadow-card-1-blur: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-y: var(--dt-size-200);
-  --dt-shadow-extra-large-offset-x: var(--dt-size-0);
-  --dt-shadow-extra-large-spread: var(--dt-size-0);
-  --dt-shadow-extra-large-blur: var(--dt-size-600);
-  --dt-shadow-large-offset-y: var(--dt-size-200);
-  --dt-shadow-large-offset-x: var(--dt-size-0);
-  --dt-shadow-large-spread: var(--dt-size-0);
-  --dt-shadow-large-blur: var(--dt-size-500);
-  --dt-shadow-medium-offset-y: var(--dt-size-200);
-  --dt-shadow-medium-offset-x: var(--dt-size-0);
-  --dt-shadow-medium-spread: var(--dt-size-0);
-  --dt-shadow-medium-blur: var(--dt-size-400);
-  --dt-shadow-small-offset-y: var(--dt-size-200);
-  --dt-shadow-small-offset-x: var(--dt-size-0);
-  --dt-shadow-small-spread: var(--dt-size-0);
-  --dt-shadow-small-blur: var(--dt-size-300);
   --dt-color-gradient-magenta-purple: oklch(0.7 0.25 54.01); /* Gradient for Ai-oriented treatments. */
   --dt-color-black-1000: oklch(0.7 0.25 54.01);
   --dt-color-black-950: oklch(0.7 0.25 54.01);
@@ -527,12 +641,15 @@
   --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
   --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
   --dt-shadow-focus-1-color: oklch(0.7 0.25 54.01);
-  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
+  --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-offset-x) var(--dt-shadow-extra-large-1-offset-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-offset-x) var(--dt-shadow-extra-large-2-offset-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-offset-x) var(--dt-shadow-extra-large-3-offset-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-offset-x) var(--dt-shadow-extra-large-4-offset-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color);
+  --dt-shadow-large: var(--dt-shadow-large-1-offset-x) var(--dt-shadow-large-1-offset-y) var(--dt-shadow-large-1-blur) var(--dt-shadow-large-1-spread) var(--dt-shadow-large-1-color), var(--dt-shadow-large-2-offset-x) var(--dt-shadow-large-2-offset-y) var(--dt-shadow-large-2-blur) var(--dt-shadow-large-2-spread) var(--dt-shadow-large-2-color), var(--dt-shadow-large-3-offset-x) var(--dt-shadow-large-3-offset-y) var(--dt-shadow-large-3-blur) var(--dt-shadow-large-3-spread) var(--dt-shadow-large-3-color);
+  --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color);
+  --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color);
   --dt-shadow-card: var(--dt-shadow-card-1-offset-x) var(--dt-shadow-card-1-offset-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-offset-x) var(--dt-shadow-card-2-offset-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-offset-x) var(--dt-shadow-card-3-offset-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
-  --dt-shadow-extra-large: var(--dt-shadow-extra-large-offset-x) var(--dt-shadow-extra-large-offset-y) var(--dt-shadow-extra-large-blur) var(--dt-shadow-extra-large-spread) var(--dt-shadow-extra-large-color);
-  --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
-  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
-  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
+  --dt-shadow-modal: var(--dt-shadow-modal-1-offset-x) var(--dt-shadow-modal-1-offset-y) var(--dt-shadow-modal-1-blur) var(--dt-shadow-modal-1-spread) var(--dt-shadow-modal-1-color), var(--dt-shadow-modal-2-offset-x) var(--dt-shadow-modal-2-offset-y) var(--dt-shadow-modal-2-blur) var(--dt-shadow-modal-2-spread) var(--dt-shadow-modal-2-color), var(--dt-shadow-modal-3-offset-x) var(--dt-shadow-modal-3-offset-y) var(--dt-shadow-modal-3-blur) var(--dt-shadow-modal-3-spread) var(--dt-shadow-modal-3-color), var(--dt-shadow-modal-4-offset-x) var(--dt-shadow-modal-4-offset-y) var(--dt-shadow-modal-4-blur) var(--dt-shadow-modal-4-spread) var(--dt-shadow-modal-4-color);
+  --dt-shadow-overlay: var(--dt-shadow-overlay-1-offset-x) var(--dt-shadow-overlay-1-offset-y) var(--dt-shadow-overlay-1-blur) var(--dt-shadow-overlay-1-spread) var(--dt-shadow-overlay-1-color), var(--dt-shadow-overlay-2-offset-x) var(--dt-shadow-overlay-2-offset-y) var(--dt-shadow-overlay-2-blur) var(--dt-shadow-overlay-2-spread) var(--dt-shadow-overlay-2-color), var(--dt-shadow-overlay-3-offset-x) var(--dt-shadow-overlay-3-offset-y) var(--dt-shadow-overlay-3-blur) var(--dt-shadow-overlay-3-spread) var(--dt-shadow-overlay-3-color);
+  --dt-shadow-raised: var(--dt-shadow-raised-1-offset-x) var(--dt-shadow-raised-1-offset-y) var(--dt-shadow-raised-1-blur) var(--dt-shadow-raised-1-spread) var(--dt-shadow-raised-1-color), var(--dt-shadow-raised-2-offset-x) var(--dt-shadow-raised-2-offset-y) var(--dt-shadow-raised-2-blur) var(--dt-shadow-raised-2-spread) var(--dt-shadow-raised-2-color), var(--dt-shadow-raised-3-offset-x) var(--dt-shadow-raised-3-offset-y) var(--dt-shadow-raised-3-blur) var(--dt-shadow-raised-3-spread) var(--dt-shadow-raised-3-color);
+  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
   --dt-shadow-focus: var(--dt-shadow-focus-1-offset-x) var(--dt-shadow-focus-1-offset-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-offset-x) var(--dt-shadow-focus-2-offset-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
   --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
   --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */

package/lib/dist/tokens/tokens-debug-dp.css

@@ -733,6 +733,7 @@
   --dt-color-surface-moderate: oklch(0.7 0.25 54.01); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: oklch(0.7 0.25 54.01); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: oklch(0.7 0.25 54.01); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: oklch(0.7 0.25 54.01); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.7 0.25 54.01);
   --dt-color-link-mention-inverted-background: oklch(0.7 0.25 54.01);
   --dt-color-link-mention-background-hover: oklch(0.7 0.25 54.01);

package/lib/dist/tokens/tokens-dp-dark.css

@@ -750,6 +750,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-dp-light.css

@@ -733,6 +733,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-expressive-dark.css

@@ -723,6 +723,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-expressive-light.css

@@ -705,6 +705,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-expressive-sm-dark.css

@@ -723,6 +723,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-expressive-sm-light.css

@@ -705,6 +705,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-high-desert-dark.css

@@ -768,6 +768,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-high-desert-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-melon-dark.css

@@ -767,6 +767,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-melon-light.css

@@ -751,6 +751,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-plum-dark.css

@@ -775,6 +775,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);