@dynatrace/strato-components 3.4.1 → 3.5.2

package/core/components/app-root/AppRoot.css

@@ -118,10 +118,22 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
-:root[data-theme="light"]._1jgl8s50-3-4-1 {
+:root[data-theme="light"]._1jgl8s50-3-5-2 {
+  --dt-box-shadows-surface-flat-rest: var(--_vr-10);
+  --dt-box-shadows-surface-flat-hover: var(--_vr-20);
+  --dt-box-shadows-surface-flat-active: var(--_vr-10);
+  --dt-box-shadows-surface-flat-drag: var(--_vr-50);
+  --dt-box-shadows-surface-raised-rest: var(--_vr-20);
+  --dt-box-shadows-surface-raised-hover: var(--_vr-30);
+  --dt-box-shadows-surface-raised-active: var(--_vr-20);
+  --dt-box-shadows-surface-raised-drag: var(--_vr-50);
+  --dt-box-shadows-surface-floating-rest: var(--_vr-30);
+  --dt-box-shadows-surface-floating-hover: var(--_vr-40);
+  --dt-box-shadows-surface-floating-active: var(--_vr-30);
+  --dt-box-shadows-surface-floating-drag: var(--_vr-50);
   --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fff;
-  --dt-box-shadows-field-neutral-emphasized-hover: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #e4e4e7;
-  --dt-box-shadows-field-neutral-emphasized-active: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dddee1;
+  --dt-box-shadows-field-neutral-emphasized-hover: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eff0f2;
+  --dt-box-shadows-field-neutral-emphasized-active: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eaeaed;
   --dt-box-shadows-field-neutral-accent: inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #3838421f;
   --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f;
   --dt-box-shadows-field-primary-emphasized-rest: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dde8fc;
@@ -149,6 +161,10 @@
   --dt-colors-theme-background-10: #fafafb;
   --dt-colors-theme-background-20: #fff;
   --dt-colors-theme-background-shell-default: #f4f4f6;
+  --dt-colors-theme-background-base-default: #fafafb;
+  --dt-colors-theme-background-surface-backdrop: #38384266;
+  --dt-colors-theme-background-surface-default: #fff;
+  --dt-colors-theme-background-container-neutral-subdued: #fafafb;
   --dt-colors-theme-neutral-10: #f4f4f6;
   --dt-colors-theme-neutral-20: #eff0f2;
   --dt-colors-theme-neutral-30: #eaeaed;
@@ -195,6 +211,7 @@
   --dt-colors-theme-critical-80: #cd0022;
   --dt-colors-theme-critical-90: #b50019;
   --dt-colors-background-base-default: #fafafb;
+  --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-10) 40%, transparent);
   --dt-colors-background-surface-default: #fff;
   --dt-colors-background-container-neutral-subdued: #fafafb;
   --dt-colors-background-container-neutral-default: #f4f4f6;
@@ -213,6 +230,9 @@
   --dt-colors-background-container-critical-emphasized: #faeae9;
   --dt-colors-background-container-critical-accent: #e01032;
   --dt-colors-background-field-neutral-disabled: #eaeaed80;
+  --dt-colors-background-field-neutral-default: color-mix(in srgb, var(--dt-colors-theme-neutral-20) 0%, transparent);
+  --dt-colors-background-field-neutral-default-hover: var(--dt-colors-theme-neutral-20);
+  --dt-colors-background-field-neutral-default-active: var(--dt-colors-theme-neutral-30);
   --dt-colors-background-field-neutral-emphasized: #eaeaed;
   --dt-colors-background-field-neutral-emphasized-hover: #e4e4e7;
   --dt-colors-background-field-neutral-emphasized-active: #dddee1;
@@ -271,9 +291,9 @@
   --dt-colors-border-neutral-on-accent-default: #f6f6fa;
   --dt-colors-border-neutral-on-accent-default-hover: #f6f6facc;
   --dt-colors-border-neutral-on-accent-default-active: #f6f6fa99;
-  --dt-colors-border-neutral-subdued: #eff0f2;
-  --dt-colors-border-neutral-subdued-hover: #e4e4e7;
-  --dt-colors-border-neutral-subdued-active: #dddee1;
+  --dt-colors-border-neutral-subdued: #eaeaed;
+  --dt-colors-border-neutral-subdued-hover: #dddee1;
+  --dt-colors-border-neutral-subdued-active: #d6d7da;
   --dt-colors-border-primary-disabled: #e4e4e780;
   --dt-colors-border-primary-default: #d1e1fd;
   --dt-colors-border-primary-default-hover: #c3d8ff;
@@ -419,11 +439,7 @@
   --dt-colors-charts-status-neutral-default: #34353d;
   --dt-colors-charts-status-warning-default: #fdc300;
   --dt-colors-charts-status-critical-default: #e01032;
-  --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-10) 40%, transparent);
-  --dt-colors-background-field-neutral-default: color-mix(in srgb, var(--dt-colors-theme-neutral-20) 0%, transparent);
-  --dt-colors-background-field-neutral-default-hover: var(--dt-colors-theme-neutral-20);
-  --dt-colors-background-field-neutral-default-active: var(--dt-colors-theme-neutral-30);
-  --_vr-shadow-0: 0 0 0 1px #ffffff;
+  --_vr-shadow-0: 0 0 0 1px var(--dt-colors-border-neutral-subdued);
   --_vr-shadow-1: 0 1px 2px 0 color-mix(in srgb, var(--dt-colors-theme-foreground-10) 5%, transparent);
   --_vr-shadow-2-20: 0 4px 8px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 7%, transparent);
   --_vr-shadow-2-30: 0 5px 11px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 16%, transparent);
@@ -434,7 +450,8 @@
   --_vr-30: var(--_vr-shadow-1), var(--_vr-shadow-2-30), var(--_vr-shadow-0);
   --_vr-40: var(--_vr-shadow-1), var(--_vr-shadow-2-40), var(--_vr-shadow-0);
   --_vr-50: var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0);
-  --dt-box-shadows-surface-flat-rest: var(--_vr-10);
+}
+:root[data-theme="dark"]._1jgl8s50-3-5-2 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-50);
@@ -446,38 +463,40 @@
   --dt-box-shadows-surface-floating-hover: var(--_vr-40);
   --dt-box-shadows-surface-floating-active: var(--_vr-30);
   --dt-box-shadows-surface-floating-drag: var(--_vr-50);
-}
-:root[data-theme="dark"]._1jgl8s50-3-4-1 {
-  --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #16161d;
-  --dt-box-shadows-field-neutral-emphasized-hover: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #3f3f47;
-  --dt-box-shadows-field-neutral-emphasized-active: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #4b4a52;
-  --dt-box-shadows-field-neutral-accent: inset 0px 0px 0px 1px #ffffff4d, inset 0px -1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1b1b22;
+  --dt-box-shadows-field-neutral-emphasized-hover: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #292931;
+  --dt-box-shadows-field-neutral-emphasized-active: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #34343b;
+  --dt-box-shadows-field-neutral-accent: inset 0px 0px 0px 1px #ffffff4d, inset 0px 1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-primary-emphasized-rest: inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1c2d4d;
   --dt-box-shadows-field-primary-emphasized-hover: inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d315a;
   --dt-box-shadows-field-primary-emphasized-active: inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d3667;
-  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #dcedff26, inset 0px -1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #dcedff26, inset 0px 1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-success-emphasized-rest: inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1e3b2d;
   --dt-box-shadows-field-success-emphasized-hover: inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1f4332;
   --dt-box-shadows-field-success-emphasized-active: inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #204c38;
-  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #b7f8d633, inset 0px -1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #b7f8d633, inset 0px 1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-warning-emphasized-rest: inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #45391d;
   --dt-box-shadows-field-warning-emphasized-hover: inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #52431f;
   --dt-box-shadows-field-warning-emphasized-active: inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e4c20;
-  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #ffedc040, inset 0px -1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #ffedc040, inset 0px 1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-critical-emphasized-rest: inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #482220;
   --dt-box-shadows-field-critical-emphasized-hover: inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #532322;
   --dt-box-shadows-field-critical-emphasized-active: inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e2423;
-  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #ffe4e133, inset 0px -1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #ffe4e133, inset 0px 1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-colors-theme-foreground-10: #f0f0f5;
   --dt-colors-theme-foreground-20: #16161d;
   --dt-colors-theme-background-10: #1b1b22;
   --dt-colors-theme-background-20: #16161d;
   --dt-colors-theme-background-shell-default: #141419;
+  --dt-colors-theme-background-base-default: #16161d;
+  --dt-colors-theme-background-surface-backdrop: #16161dcc;
+  --dt-colors-theme-background-surface-default: #1b1b22;
+  --dt-colors-theme-background-container-neutral-subdued: #16161d;
   --dt-colors-theme-neutral-10: #1f1f26;
   --dt-colors-theme-neutral-20: #292931;
   --dt-colors-theme-neutral-30: #34343b;
@@ -523,6 +542,9 @@
   --dt-colors-theme-critical-70: #cd0c2c;
   --dt-colors-theme-critical-80: #bb001c;
   --dt-colors-theme-critical-90: #a30014;
+  --dt-colors-background-base-default: var(--dt-colors-theme-background-20);
+  --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
+  --dt-colors-background-surface-default: var(--dt-colors-theme-background-10);
   --dt-colors-background-container-neutral-subdued: var(--dt-colors-theme-background-20);
   --dt-colors-background-container-neutral-default: #1f1f26;
   --dt-colors-background-container-neutral-emphasized: #292931;
@@ -540,9 +562,9 @@
   --dt-colors-background-container-critical-emphasized: #3d201f;
   --dt-colors-background-container-critical-accent: #cd0c2c;
   --dt-colors-background-field-neutral-disabled: #34343b80;
-  --dt-colors-background-field-neutral-default: #34343b00;
-  --dt-colors-background-field-neutral-default-hover: #3f3f47;
-  --dt-colors-background-field-neutral-default-active: #4b4a52;
+  --dt-colors-background-field-neutral-default: #29293100;
+  --dt-colors-background-field-neutral-default-hover: #292931;
+  --dt-colors-background-field-neutral-default-active: #34343b;
   --dt-colors-background-field-neutral-emphasized: #34343b;
   --dt-colors-background-field-neutral-emphasized-hover: #3f3f47;
   --dt-colors-background-field-neutral-emphasized-active: #4b4a52;
@@ -601,9 +623,9 @@
   --dt-colors-border-neutral-on-accent-default: #0b0b0f;
   --dt-colors-border-neutral-on-accent-default-hover: #0b0b0fcc;
   --dt-colors-border-neutral-on-accent-default-active: #0b0b0f99;
-  --dt-colors-border-neutral-subdued: #292931;
-  --dt-colors-border-neutral-subdued-hover: #3f3f47;
-  --dt-colors-border-neutral-subdued-active: #4b4a52;
+  --dt-colors-border-neutral-subdued: #34343b;
+  --dt-colors-border-neutral-subdued-hover: #4b4a52;
+  --dt-colors-border-neutral-subdued-active: #56565e;
   --dt-colors-border-primary-disabled: #3f3f4780;
   --dt-colors-border-primary-default: #1d315a;
   --dt-colors-border-primary-default-hover: #1d3667;
@@ -749,9 +771,6 @@
   --dt-colors-charts-status-neutral-default: #dbdbe1;
   --dt-colors-charts-status-warning-default: #dfac01;
   --dt-colors-charts-status-critical-default: #cd0c2c;
-  --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
-  --dt-colors-background-surface-default: var(--dt-colors-theme-background-10);
-  --dt-colors-background-base-default: var(--dt-colors-theme-background-20);
   --_vr-shadow-0: 0 0 0 1px var(--dt-colors-border-neutral-subdued);
   --_vr-shadow-1: 0 1px 2px 0 var(--dt-colors-theme-foreground-20);
   --_vr-shadow-2-20: 0 4px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
@@ -764,17 +783,6 @@
   --_vr-40: var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-40);
   --_vr-50: var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-50);
   --dt-box-shadows-surface-flat-rest: var(--_vr-10);
-  --dt-box-shadows-surface-flat-hover: var(--_vr-20);
-  --dt-box-shadows-surface-flat-active: var(--_vr-10);
-  --dt-box-shadows-surface-flat-drag: var(--_vr-50);
-  --dt-box-shadows-surface-raised-rest: var(--_vr-20);
-  --dt-box-shadows-surface-raised-hover: var(--_vr-30);
-  --dt-box-shadows-surface-raised-active: var(--_vr-20);
-  --dt-box-shadows-surface-raised-drag: var(--_vr-50);
-  --dt-box-shadows-surface-floating-rest: var(--_vr-30);
-  --dt-box-shadows-surface-floating-hover: var(--_vr-40);
-  --dt-box-shadows-surface-floating-active: var(--_vr-30);
-  --dt-box-shadows-surface-floating-drag: var(--_vr-50);
 }
 :root {
   --dt-borders-style-default: solid;
@@ -962,9 +970,9 @@
   --dt-colors-border-neutral-on-accent-default: #f3f3f6;
   --dt-colors-border-neutral-on-accent-default-hover: #f3f3f6cc;
   --dt-colors-border-neutral-on-accent-default-active: #f3f3f699;
-  --dt-colors-border-neutral-subdued: #ebecf0;
-  --dt-colors-border-neutral-subdued-hover: #dadbe4;
-  --dt-colors-border-neutral-subdued-active: #d0d1dc;
+  --dt-colors-border-neutral-subdued: #e4e5eb;
+  --dt-colors-border-neutral-subdued-hover: #d0d1dc;
+  --dt-colors-border-neutral-subdued-active: #c6c7d5;
   --dt-colors-border-primary-disabled: #dadbe480;
   --dt-colors-border-primary-default: #d5dbf6;
   --dt-colors-border-primary-default-hover: #c9d1f4;
@@ -1667,28 +1675,28 @@
   --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #112;
   --dt-box-shadows-field-neutral-emphasized-hover: inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #3b3b52;
   --dt-box-shadows-field-neutral-emphasized-active: inset 0px 0px 0px 1px #ebecff1f, inset 0px 1px 0px #ebecff14, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #44445c;
-  --dt-box-shadows-field-neutral-accent: inset 0px 0px 0px 1px #ffffff4d, inset 0px -1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-neutral-accent: inset 0px 0px 0px 1px #ffffff4d, inset 0px 1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px 1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-primary-emphasized-rest: inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #313150;
   --dt-box-shadows-field-primary-emphasized-hover: inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #39395d;
   --dt-box-shadows-field-primary-emphasized-active: inset 0px 0px 0px 1px #eef1ff0f, inset 0px 1px 0px #eef1ff1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #42426a;
-  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #eef1ff26, inset 0px -1px 0px #eef1ff40, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #eef1ff26, inset 0px 1px 0px #eef1ff40, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px 1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-success-emphasized-rest: inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #273644;
   --dt-box-shadows-field-success-emphasized-hover: inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #2b404c;
   --dt-box-shadows-field-success-emphasized-active: inset 0px 0px 0px 1px #aafef50f, inset 0px 1px 0px #aafef51a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #304a54;
-  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #aafef533, inset 0px -1px 0px #aafef540, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #aafef533, inset 0px 1px 0px #aafef540, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px 1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-warning-emphasized-rest: inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #403537;
   --dt-box-shadows-field-warning-emphasized-hover: inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #4e3e39;
   --dt-box-shadows-field-warning-emphasized-active: inset 0px 0px 0px 1px #ffecc30f, inset 0px 1px 0px #ffecc31a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #5d483c;
-  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #ffecc340, inset 0px -1px 0px #ffecc373, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #ffecc340, inset 0px 1px 0px #ffecc373, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px 1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-box-shadows-field-critical-emphasized-rest: inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #3c2131;
   --dt-box-shadows-field-critical-emphasized-hover: inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #482332;
   --dt-box-shadows-field-critical-emphasized-active: inset 0px 0px 0px 1px #ffeceb0f, inset 0px 1px 0px #ffeceb1a, 0px 1px 1px -1px #11112280, inset 0px 0px 0px 1px #542433;
-  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #ffeceb33, inset 0px -1px 0px #ffeceb40, 0px 1px 1px -1px #f0f0f51f;
-  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px -1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #ffeceb33, inset 0px 1px 0px #ffeceb40, 0px 1px 1px -1px #f0f0f51f;
+  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #ebecff12, inset 0px 1px 0px #ebecff0a, 0px 1px 1px -1px #f0f0f51f;
   --dt-breakpoints-max-mobile: 640px;
   --dt-breakpoints-max-tablet: 960px;
   --dt-breakpoints-max-desktop: 1920px;
@@ -1826,9 +1834,9 @@
   --dt-colors-border-neutral-on-accent-default: #1f2033;
   --dt-colors-border-neutral-on-accent-default-hover: #1f2033cc;
   --dt-colors-border-neutral-on-accent-default-active: #1f203399;
-  --dt-colors-border-neutral-subdued: #292a3e;
-  --dt-colors-border-neutral-subdued-hover: #3b3b52;
-  --dt-colors-border-neutral-subdued-active: #44445c;
+  --dt-colors-border-neutral-subdued: #323248;
+  --dt-colors-border-neutral-subdued-hover: #44445c;
+  --dt-colors-border-neutral-subdued-active: #4d4e66;
   --dt-colors-border-primary-disabled: #3b3b5280;
   --dt-colors-border-primary-default: #39395d;
   --dt-colors-border-primary-default-hover: #42426a;
@@ -2725,9 +2733,9 @@ body {
     --dt-colors-border-neutral-on-accent-default: #f3f3f6;
     --dt-colors-border-neutral-on-accent-default-hover: #f3f3f6cc;
     --dt-colors-border-neutral-on-accent-default-active: #f3f3f699;
-    --dt-colors-border-neutral-subdued: #ebecf0;
-    --dt-colors-border-neutral-subdued-hover: #dadbe4;
-    --dt-colors-border-neutral-subdued-active: #d0d1dc;
+    --dt-colors-border-neutral-subdued: #e4e5eb;
+    --dt-colors-border-neutral-subdued-hover: #d0d1dc;
+    --dt-colors-border-neutral-subdued-active: #c6c7d5;
     --dt-colors-border-primary-disabled: #dadbe480;
     --dt-colors-border-primary-default: #d5dbf6;
     --dt-colors-border-primary-default-hover: #c9d1f4;

package/core/components/app-root/AppRoot.js

@@ -39,6 +39,9 @@ var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var styles = __toESM(require("./AppRoot.sty.js"));
 var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
 var import_FocusProvider = require("../../providers/FocusProvider.js");
+var import_is_visual_refresh_enabled = require("../../utils/is-visual-refresh-enabled.js");
+var import_modality = require("../../utils/modality.js");
+(0, import_modality.initModalityDetection)();
 const COMPONENT_NAME = "AppRoot";
 function getBaseHref() {
   const baseElement = document.querySelector("base");
@@ -72,8 +75,8 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
       }
     }, [theme]);
     (0, import_react.useLayoutEffect)(() => {
-      if (document !== void 0 && window?.visualRefreshEnabled) {
-        document.documentElement.classList.add(styles.visualRefreshEnabled);
+      if (document !== void 0 && (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)()) {
+        document.documentElement.classList.add(styles.dtVisualRefreshEnabled);
       }
     }, []);
     (0, import_react.useEffect)(() => {

package/core/components/app-root/AppRoot.sty.d.ts

@@ -3,4 +3,4 @@
  * the visual-refresh design token overrides.
  * @internal
  */
-export declare const visualRefreshEnabled: string;
+export declare const dtVisualRefreshEnabled: string;

package/core/components/app-root/AppRoot.sty.js

@@ -17,8 +17,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AppRoot_css_exports = {};
 __export(AppRoot_css_exports, {
-  visualRefreshEnabled: () => visualRefreshEnabled
+  dtVisualRefreshEnabled: () => dtVisualRefreshEnabled
 });
 module.exports = __toCommonJS(AppRoot_css_exports);
 var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
-var visualRefreshEnabled = "_1jgl8s50-3-4-1";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-5-2";

package/core/components/app-root/visual-refresh-overrides.d.ts

@@ -15,6 +15,18 @@ export declare const vrBoxShadowAssignments: {
 };
 /** Visual refresh generated overrides — light mode. */
 export declare const vrLightGeneratedOverrides: {
+    '--dt-box-shadows-surface-flat-rest': string;
+    '--dt-box-shadows-surface-flat-hover': string;
+    '--dt-box-shadows-surface-flat-active': string;
+    '--dt-box-shadows-surface-flat-drag': string;
+    '--dt-box-shadows-surface-raised-rest': string;
+    '--dt-box-shadows-surface-raised-hover': string;
+    '--dt-box-shadows-surface-raised-active': string;
+    '--dt-box-shadows-surface-raised-drag': string;
+    '--dt-box-shadows-surface-floating-rest': string;
+    '--dt-box-shadows-surface-floating-hover': string;
+    '--dt-box-shadows-surface-floating-active': string;
+    '--dt-box-shadows-surface-floating-drag': string;
     '--dt-box-shadows-field-neutral-emphasized-rest': string;
     '--dt-box-shadows-field-neutral-emphasized-hover': string;
     '--dt-box-shadows-field-neutral-emphasized-active': string;
@@ -45,6 +57,10 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-theme-background-10': string;
     '--dt-colors-theme-background-20': string;
     '--dt-colors-theme-background-shell-default': string;
+    '--dt-colors-theme-background-base-default': string;
+    '--dt-colors-theme-background-surface-backdrop': string;
+    '--dt-colors-theme-background-surface-default': string;
+    '--dt-colors-theme-background-container-neutral-subdued': string;
     '--dt-colors-theme-neutral-10': string;
     '--dt-colors-theme-neutral-20': string;
     '--dt-colors-theme-neutral-30': string;
@@ -91,6 +107,7 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-theme-critical-80': string;
     '--dt-colors-theme-critical-90': string;
     '--dt-colors-background-base-default': string;
+    '--dt-colors-background-surface-backdrop': string;
     '--dt-colors-background-surface-default': string;
     '--dt-colors-background-container-neutral-subdued': string;
     '--dt-colors-background-container-neutral-default': string;
@@ -109,6 +126,9 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-background-container-critical-emphasized': string;
     '--dt-colors-background-container-critical-accent': string;
     '--dt-colors-background-field-neutral-disabled': string;
+    '--dt-colors-background-field-neutral-default': string;
+    '--dt-colors-background-field-neutral-default-hover': string;
+    '--dt-colors-background-field-neutral-default-active': string;
     '--dt-colors-background-field-neutral-emphasized': string;
     '--dt-colors-background-field-neutral-emphasized-hover': string;
     '--dt-colors-background-field-neutral-emphasized-active': string;
@@ -342,6 +362,17 @@ export declare const vrLightBoxShadowCompositions: {
 };
 /** Visual refresh generated overrides — dark mode. */
 export declare const vrDarkGeneratedOverrides: {
+    '--dt-box-shadows-surface-flat-hover': string;
+    '--dt-box-shadows-surface-flat-active': string;
+    '--dt-box-shadows-surface-flat-drag': string;
+    '--dt-box-shadows-surface-raised-rest': string;
+    '--dt-box-shadows-surface-raised-hover': string;
+    '--dt-box-shadows-surface-raised-active': string;
+    '--dt-box-shadows-surface-raised-drag': string;
+    '--dt-box-shadows-surface-floating-rest': string;
+    '--dt-box-shadows-surface-floating-hover': string;
+    '--dt-box-shadows-surface-floating-active': string;
+    '--dt-box-shadows-surface-floating-drag': string;
     '--dt-box-shadows-field-neutral-emphasized-rest': string;
     '--dt-box-shadows-field-neutral-emphasized-hover': string;
     '--dt-box-shadows-field-neutral-emphasized-active': string;
@@ -372,6 +403,10 @@ export declare const vrDarkGeneratedOverrides: {
     '--dt-colors-theme-background-10': string;
     '--dt-colors-theme-background-20': string;
     '--dt-colors-theme-background-shell-default': string;
+    '--dt-colors-theme-background-base-default': string;
+    '--dt-colors-theme-background-surface-backdrop': string;
+    '--dt-colors-theme-background-surface-default': string;
+    '--dt-colors-theme-background-container-neutral-subdued': string;
     '--dt-colors-theme-neutral-10': string;
     '--dt-colors-theme-neutral-20': string;
     '--dt-colors-theme-neutral-30': string;
@@ -417,6 +452,9 @@ export declare const vrDarkGeneratedOverrides: {
     '--dt-colors-theme-critical-70': string;
     '--dt-colors-theme-critical-80': string;
     '--dt-colors-theme-critical-90': string;
+    '--dt-colors-background-base-default': string;
+    '--dt-colors-background-surface-backdrop': string;
+    '--dt-colors-background-surface-default': string;
     '--dt-colors-background-container-neutral-subdued': string;
     '--dt-colors-background-container-neutral-default': string;
     '--dt-colors-background-container-neutral-emphasized': string;

package/core/components/app-root/visual-refresh-overrides.js

@@ -43,9 +43,21 @@ const vrBoxShadowAssignments = {
   "--dt-box-shadows-surface-floating-drag": "var(--_vr-50)"
 };
 const vrLightGeneratedOverrides = {
+  "--dt-box-shadows-surface-flat-rest": "0px 0px 0px 1px #3838420d",
+  "--dt-box-shadows-surface-flat-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-flat-active": "0px 0px 0px 1px #3838420d",
+  "--dt-box-shadows-surface-flat-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
+  "--dt-box-shadows-surface-raised-rest": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-raised-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-raised-active": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 4px 8px -2px #38384212",
+  "--dt-box-shadows-surface-raised-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
+  "--dt-box-shadows-surface-floating-rest": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-floating-hover": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 6px 14px -2px #3838423d",
+  "--dt-box-shadows-surface-floating-active": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 5px 11px -2px #38384229",
+  "--dt-box-shadows-surface-floating-drag": "0px 0px 0px 1px #38384208, 0px 1px 2px #3838420d, 0px 7px 17px -2px #38384252",
   "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fff",
-  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #e4e4e7",
-  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dddee1",
+  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eff0f2",
+  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #eaeaed",
   "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #3838421f",
   "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
   "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #dde8fc",
@@ -73,6 +85,10 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-background-10": "#fafafb",
   "--dt-colors-theme-background-20": "#fff",
   "--dt-colors-theme-background-shell-default": "#f4f4f6",
+  "--dt-colors-theme-background-base-default": "#fafafb",
+  "--dt-colors-theme-background-surface-backdrop": "#38384266",
+  "--dt-colors-theme-background-surface-default": "#fff",
+  "--dt-colors-theme-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-theme-neutral-10": "#f4f4f6",
   "--dt-colors-theme-neutral-20": "#eff0f2",
   "--dt-colors-theme-neutral-30": "#eaeaed",
@@ -119,6 +135,7 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-critical-80": "#cd0022",
   "--dt-colors-theme-critical-90": "#b50019",
   "--dt-colors-background-base-default": "#fafafb",
+  "--dt-colors-background-surface-backdrop": "#38384266",
   "--dt-colors-background-surface-default": "#fff",
   "--dt-colors-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-background-container-neutral-default": "#f4f4f6",
@@ -137,6 +154,9 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-background-container-critical-emphasized": "#faeae9",
   "--dt-colors-background-container-critical-accent": "#e01032",
   "--dt-colors-background-field-neutral-disabled": "#eaeaed80",
+  "--dt-colors-background-field-neutral-default": "#eff0f200",
+  "--dt-colors-background-field-neutral-default-hover": "#eff0f2",
+  "--dt-colors-background-field-neutral-default-active": "#eaeaed",
   "--dt-colors-background-field-neutral-emphasized": "#eaeaed",
   "--dt-colors-background-field-neutral-emphasized-hover": "#e4e4e7",
   "--dt-colors-background-field-neutral-emphasized-active": "#dddee1",
@@ -195,9 +215,9 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-border-neutral-on-accent-default": "#f6f6fa",
   "--dt-colors-border-neutral-on-accent-default-hover": "#f6f6facc",
   "--dt-colors-border-neutral-on-accent-default-active": "#f6f6fa99",
-  "--dt-colors-border-neutral-subdued": "#eff0f2",
-  "--dt-colors-border-neutral-subdued-hover": "#e4e4e7",
-  "--dt-colors-border-neutral-subdued-active": "#dddee1",
+  "--dt-colors-border-neutral-subdued": "#eaeaed",
+  "--dt-colors-border-neutral-subdued-hover": "#dddee1",
+  "--dt-colors-border-neutral-subdued-active": "#d6d7da",
   "--dt-colors-border-primary-disabled": "#e4e4e780",
   "--dt-colors-border-primary-default": "#d1e1fd",
   "--dt-colors-border-primary-default-hover": "#c3d8ff",
@@ -351,7 +371,7 @@ const vrLightColors = {
   "--dt-colors-background-field-neutral-default-active": "var(--dt-colors-theme-neutral-30)"
 };
 const vrLightBoxShadowElements = {
-  "--_vr-shadow-0": "0 0 0 1px #ffffff",
+  "--_vr-shadow-0": "0 0 0 1px var(--dt-colors-border-neutral-subdued)",
   "--_vr-shadow-1": "0 1px 2px 0 color-mix(in srgb, var(--dt-colors-theme-foreground-10) 5%, transparent)",
   "--_vr-shadow-2-20": "0 4px 8px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 7%, transparent)",
   "--_vr-shadow-2-30": "0 5px 11px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 16%, transparent)",
@@ -366,36 +386,51 @@ const vrLightBoxShadowCompositions = {
   "--_vr-50": "var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0)"
 };
 const vrDarkGeneratedOverrides = {
-  "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #16161d",
-  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #3f3f47",
-  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #4b4a52",
-  "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #ffffff4d, inset 0px -1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-surface-flat-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-flat-active": "0px 0px 0px 1px #f0f0f514",
+  "--dt-box-shadows-surface-flat-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-rest": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-active": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 4px 8px #16161dcc",
+  "--dt-box-shadows-surface-raised-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-rest": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-hover": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 10px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-active": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 7px 8px #16161dcc",
+  "--dt-box-shadows-surface-floating-drag": "0px 0px 0px 1px #f0f0f514, 0px 1px 2px #16161d, 0px 13px 8px #16161dcc",
+  "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1b1b22",
+  "--dt-box-shadows-field-neutral-emphasized-hover": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #292931",
+  "--dt-box-shadows-field-neutral-emphasized-active": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #34343b",
+  "--dt-box-shadows-field-neutral-accent": "inset 0px 0px 0px 1px #ffffff4d, inset 0px 1px 0px #ffffff8c, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1c2d4d",
   "--dt-box-shadows-field-primary-emphasized-hover": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d315a",
   "--dt-box-shadows-field-primary-emphasized-active": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1d3667",
-  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #dcedff26, inset 0px -1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #dcedff26, inset 0px 1px 0px #dcedff40, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-success-emphasized-rest": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1e3b2d",
   "--dt-box-shadows-field-success-emphasized-hover": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #1f4332",
   "--dt-box-shadows-field-success-emphasized-active": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #204c38",
-  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #b7f8d633, inset 0px -1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #b7f8d633, inset 0px 1px 0px #b7f8d640, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-warning-emphasized-rest": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #45391d",
   "--dt-box-shadows-field-warning-emphasized-hover": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #52431f",
   "--dt-box-shadows-field-warning-emphasized-active": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e4c20",
-  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #ffedc040, inset 0px -1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #ffedc040, inset 0px 1px 0px #ffedc073, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-box-shadows-field-critical-emphasized-rest": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #482220",
   "--dt-box-shadows-field-critical-emphasized-hover": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #532322",
   "--dt-box-shadows-field-critical-emphasized-active": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px #16161d80, inset 0px 0px 0px 1px #5e2423",
-  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #ffe4e133, inset 0px -1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f",
-  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px -1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #ffe4e133, inset 0px 1px 0px #ffe4e140, 0px 1px 1px -1px #f0f0f51f",
+  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px #f0f0f51f",
   "--dt-colors-theme-foreground-10": "#f0f0f5",
   "--dt-colors-theme-foreground-20": "#16161d",
   "--dt-colors-theme-background-10": "#1b1b22",
   "--dt-colors-theme-background-20": "#16161d",
   "--dt-colors-theme-background-shell-default": "#141419",
+  "--dt-colors-theme-background-base-default": "#16161d",
+  "--dt-colors-theme-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-theme-background-surface-default": "#1b1b22",
+  "--dt-colors-theme-background-container-neutral-subdued": "#16161d",
   "--dt-colors-theme-neutral-10": "#1f1f26",
   "--dt-colors-theme-neutral-20": "#292931",
   "--dt-colors-theme-neutral-30": "#34343b",
@@ -441,7 +476,10 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-theme-critical-70": "#cd0c2c",
   "--dt-colors-theme-critical-80": "#bb001c",
   "--dt-colors-theme-critical-90": "#a30014",
-  "--dt-colors-background-container-neutral-subdued": "#1b1b22",
+  "--dt-colors-background-base-default": "#16161d",
+  "--dt-colors-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-background-surface-default": "#1b1b22",
+  "--dt-colors-background-container-neutral-subdued": "#16161d",
   "--dt-colors-background-container-neutral-default": "#1f1f26",
   "--dt-colors-background-container-neutral-emphasized": "#292931",
   "--dt-colors-background-container-neutral-accent": "#dbdbe1",
@@ -458,9 +496,9 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-background-container-critical-emphasized": "#3d201f",
   "--dt-colors-background-container-critical-accent": "#cd0c2c",
   "--dt-colors-background-field-neutral-disabled": "#34343b80",
-  "--dt-colors-background-field-neutral-default": "#34343b00",
-  "--dt-colors-background-field-neutral-default-hover": "#3f3f47",
-  "--dt-colors-background-field-neutral-default-active": "#4b4a52",
+  "--dt-colors-background-field-neutral-default": "#29293100",
+  "--dt-colors-background-field-neutral-default-hover": "#292931",
+  "--dt-colors-background-field-neutral-default-active": "#34343b",
   "--dt-colors-background-field-neutral-emphasized": "#34343b",
   "--dt-colors-background-field-neutral-emphasized-hover": "#3f3f47",
   "--dt-colors-background-field-neutral-emphasized-active": "#4b4a52",
@@ -519,9 +557,9 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-border-neutral-on-accent-default": "#0b0b0f",
   "--dt-colors-border-neutral-on-accent-default-hover": "#0b0b0fcc",
   "--dt-colors-border-neutral-on-accent-default-active": "#0b0b0f99",
-  "--dt-colors-border-neutral-subdued": "#292931",
-  "--dt-colors-border-neutral-subdued-hover": "#3f3f47",
-  "--dt-colors-border-neutral-subdued-active": "#4b4a52",
+  "--dt-colors-border-neutral-subdued": "#34343b",
+  "--dt-colors-border-neutral-subdued-hover": "#4b4a52",
+  "--dt-colors-border-neutral-subdued-active": "#56565e",
   "--dt-colors-border-primary-disabled": "#3f3f4780",
   "--dt-colors-border-primary-default": "#1d315a",
   "--dt-colors-border-primary-default-hover": "#1d3667",