@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/content/terminology-overlay/TerminologyOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./TerminologyOverlay.css";
-var trigger = "_1dd8zuz0-3-10-4";
+var trigger = "_1dd8zuz0-3-11-0";
 export {
   trigger
 };

package/esm/content/terminology-overlay/TerminologyOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/TerminologyOverlay.css.ts"],
-  "sourcesContent": ["import './TerminologyOverlay.css';\nexport var trigger = '_1dd8zuz0-3-10-4';"],
+  "sourcesContent": ["import './TerminologyOverlay.css';\nexport var trigger = '_1dd8zuz0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -118,7 +118,7 @@
   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-10-4 {
+:root[data-theme="light"]._1jgl8s50-3-11-0 {
   --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);
@@ -131,33 +131,34 @@
   --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 #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;
-  --dt-box-shadows-field-primary-emphasized-hover: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #d1e1fd;
-  --dt-box-shadows-field-primary-emphasized-active: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #c3d8ff;
-  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #0017ae33, inset 0px -1px 0px #0017ae4d, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-success-emphasized-rest: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #e2f2e8;
-  --dt-box-shadows-field-success-emphasized-hover: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #d8efe2;
-  --dt-box-shadows-field-success-emphasized-active: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #cdecda;
-  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #00422226, inset 0px -1px 0px #0042224d, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-warning-emphasized-rest: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdf3dd;
-  --dt-box-shadows-field-warning-emphasized-hover: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdefd1;
-  --dt-box-shadows-field-warning-emphasized-active: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdebc2;
-  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #4c34001a, inset 0px -1px 0px #4c340033, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-critical-emphasized-rest: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbe1df;
-  --dt-box-shadows-field-critical-emphasized-hover: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbd6d4;
-  --dt-box-shadows-field-critical-emphasized-active: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbcbc7;
-  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #80000c33, inset 0px -1px 0px #80000c4d, 0px 1px 1px -1px #3838421f;
-  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f;
+  --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-primary-emphasized-rest: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #dde8fc;
+  --dt-box-shadows-field-primary-emphasized-hover: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #d1e1fd;
+  --dt-box-shadows-field-primary-emphasized-active: inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #c3d8ff;
+  --dt-box-shadows-field-primary-accent: inset 0px 0px 0px 1px #0017ae33, inset 0px -1px 0px #0017ae4d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-success-emphasized-rest: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #e2f2e8;
+  --dt-box-shadows-field-success-emphasized-hover: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #d8efe2;
+  --dt-box-shadows-field-success-emphasized-active: inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #cdecda;
+  --dt-box-shadows-field-success-accent: inset 0px 0px 0px 1px #00422226, inset 0px -1px 0px #0042224d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-warning-emphasized-rest: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdf3dd;
+  --dt-box-shadows-field-warning-emphasized-hover: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdefd1;
+  --dt-box-shadows-field-warning-emphasized-active: inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdebc2;
+  --dt-box-shadows-field-warning-accent: inset 0px 0px 0px 1px #4c34001a, inset 0px -1px 0px #4c340033, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-critical-emphasized-rest: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbe1df;
+  --dt-box-shadows-field-critical-emphasized-hover: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbd6d4;
+  --dt-box-shadows-field-critical-emphasized-active: inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbcbc7;
+  --dt-box-shadows-field-critical-accent: inset 0px 0px 0px 1px #80000c33, inset 0px -1px 0px #80000c4d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
   --dt-colors-theme-foreground-10: #383842;
   --dt-colors-theme-foreground-20: #fff;
+  --dt-colors-box-shadow-default: #383839;
   --dt-colors-theme-background-10: #fafafb;
   --dt-colors-theme-background-20: #fff;
   --dt-colors-theme-background-shell-default: #f4f4f6;
@@ -442,56 +443,57 @@
   --dt-colors-charts-status-warning-default: #fdc300;
   --dt-colors-charts-status-critical-default: #e01032;
   --_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);
-  --_vr-shadow-2-40: 0 6px 14px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 24%, transparent);
-  --_vr-shadow-2-50: 0 7px 17px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 32%, transparent);
+  --_vr-shadow-1: 0 1px 2px 0 color-mix(in srgb, var(--dt-colors-box-shadow-default) 5%, transparent);
+  --_vr-shadow-2-20: 0 4px 8px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 7%, transparent);
+  --_vr-shadow-2-30: 0 5px 11px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 16%, transparent);
+  --_vr-shadow-2-40: 0 6px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 24%, transparent);
+  --_vr-shadow-2-50: 0 7px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 32%, transparent);
   --_vr-10: var(--_vr-shadow-0);
   --_vr-20: var(--_vr-shadow-1), var(--_vr-shadow-2-20), var(--_vr-shadow-0);
   --_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);
 }
-:root[data-theme="dark"]._1jgl8s50-3-10-4 {
-  --dt-box-shadows-surface-flat-hover: var(--_vr-20);
+:root[data-theme="dark"]._1jgl8s50-3-11-0 {
+  --dt-box-shadows-surface-flat-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
   --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 #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-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-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-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-surface-flat-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-raised-rest: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-raised-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-raised-active: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-raised-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-floating-rest: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-floating-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 10px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-floating-active: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-surface-floating-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
+  --dt-box-shadows-field-neutral-emphasized-rest: inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-neutral-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-primary-emphasized-rest: inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-primary-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-success-emphasized-rest: inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-success-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-warning-emphasized-rest: inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-warning-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-critical-emphasized-rest: inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
+  --dt-box-shadows-field-critical-disabled: inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent);
   --dt-colors-theme-foreground-10: #f0f0f5;
   --dt-colors-theme-foreground-20: #16161d;
+  --dt-colors-box-shadow-default: #0b0b12;
   --dt-colors-theme-background-10: #1b1b22;
   --dt-colors-theme-background-20: #16161d;
   --dt-colors-theme-background-shell-default: #141419;
@@ -776,16 +778,8 @@
   --dt-colors-charts-status-warning-default: #dfac01;
   --dt-colors-charts-status-critical-default: #cd0c2c;
   --_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);
-  --_vr-shadow-2-30: 0 7px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
-  --_vr-shadow-2-40: 0 10px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
-  --_vr-shadow-2-50: 0 13px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
+  --_vr-shadow-1: 0 1px 2px 0 var(--dt-colors-box-shadow-default);
   --_vr-10: var(--_vr-shadow-0);
-  --_vr-20: var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-20);
-  --_vr-30: var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-30);
-  --_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);
 }
 :root {
@@ -965,6 +959,7 @@
   --dt-colors-background-field-critical-accent-hover: #b4002b;
   --dt-colors-background-field-critical-accent-active: #a2001d;
   --dt-colors-background-shell-default: #f2f2f5;
+  --dt-colors-box-shadow-default: #2d2e4e;
   --dt-colors-border-neutral-disabled: #dadbe480;
   --dt-colors-border-neutral-default: #dadbe4;
   --dt-colors-border-neutral-default-hover: #d0d1dc;
@@ -1831,6 +1826,7 @@
   --dt-colors-background-field-critical-accent-hover: #b61532;
   --dt-colors-background-field-critical-accent-active: #a50024;
   --dt-colors-background-shell-default: #141419;
+  --dt-colors-box-shadow-default: #112;
   --dt-colors-border-neutral-disabled: #3b3b5280;
   --dt-colors-border-neutral-default: #3b3b52;
   --dt-colors-border-neutral-default-hover: #44445c;
@@ -2732,6 +2728,7 @@ body {
     --dt-colors-background-field-critical-accent-hover: #b4002b;
     --dt-colors-background-field-critical-accent-active: #a2001d;
     --dt-colors-background-shell-default: #f2f2f5;
+    --dt-colors-box-shadow-default: #2d2e4e;
     --dt-colors-border-neutral-disabled: #dadbe480;
     --dt-colors-border-neutral-default: #dadbe4;
     --dt-colors-border-neutral-default-hover: #d0d1dc;

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

@@ -1,5 +1,5 @@
 import "./AppRoot.css";
-var dtVisualRefreshEnabled = "_1jgl8s50-3-10-4";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-11-0";
 export {
   dtVisualRefreshEnabled
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.css.ts"],
-  "sourcesContent": ["import './AppRoot.css';\nexport var dtVisualRefreshEnabled = '_1jgl8s50-3-10-4';"],
+  "sourcesContent": ["import './AppRoot.css';\nexport var dtVisualRefreshEnabled = '_1jgl8s50-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-const vrBoxShadowAssignments = {
+const vrLightBoxShadowAssignments = {
   "--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)",
@@ -25,33 +25,34 @@ const vrLightGeneratedOverrides = {
   "--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 #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",
-  "--dt-box-shadows-field-primary-emphasized-hover": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #d1e1fd",
-  "--dt-box-shadows-field-primary-emphasized-active": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #c3d8ff",
-  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #0017ae33, inset 0px -1px 0px #0017ae4d, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-success-emphasized-rest": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #e2f2e8",
-  "--dt-box-shadows-field-success-emphasized-hover": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #d8efe2",
-  "--dt-box-shadows-field-success-emphasized-active": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #cdecda",
-  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #00422226, inset 0px -1px 0px #0042224d, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-warning-emphasized-rest": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdf3dd",
-  "--dt-box-shadows-field-warning-emphasized-hover": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdefd1",
-  "--dt-box-shadows-field-warning-emphasized-active": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fdebc2",
-  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #4c34001a, inset 0px -1px 0px #4c340033, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-critical-emphasized-rest": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbe1df",
-  "--dt-box-shadows-field-critical-emphasized-hover": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbd6d4",
-  "--dt-box-shadows-field-critical-emphasized-active": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px #3838421f, inset 0px 0px 0px 1px #fbcbc7",
-  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #80000c33, inset 0px -1px 0px #80000c4d, 0px 1px 1px -1px #3838421f",
-  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px #3838421f",
+  "--dt-box-shadows-field-neutral-emphasized-rest": "inset 0px 0px 0px 1px #31323a1f, inset 0px -1px 0px #31323a14, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #dde8fc",
+  "--dt-box-shadows-field-primary-emphasized-hover": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #d1e1fd",
+  "--dt-box-shadows-field-primary-emphasized-active": "inset 0px 0px 0px 1px #0017ae0f, inset 0px -1px 0px #0017ae1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #c3d8ff",
+  "--dt-box-shadows-field-primary-accent": "inset 0px 0px 0px 1px #0017ae33, inset 0px -1px 0px #0017ae4d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-success-emphasized-rest": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #e2f2e8",
+  "--dt-box-shadows-field-success-emphasized-hover": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #d8efe2",
+  "--dt-box-shadows-field-success-emphasized-active": "inset 0px 0px 0px 1px #0042220f, inset 0px -1px 0px #0042221a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #cdecda",
+  "--dt-box-shadows-field-success-accent": "inset 0px 0px 0px 1px #00422226, inset 0px -1px 0px #0042224d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-warning-emphasized-rest": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdf3dd",
+  "--dt-box-shadows-field-warning-emphasized-hover": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdefd1",
+  "--dt-box-shadows-field-warning-emphasized-active": "inset 0px 0px 0px 1px #4c34000f, inset 0px -1px 0px #4c34001a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fdebc2",
+  "--dt-box-shadows-field-warning-accent": "inset 0px 0px 0px 1px #4c34001a, inset 0px -1px 0px #4c340033, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-critical-emphasized-rest": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbe1df",
+  "--dt-box-shadows-field-critical-emphasized-hover": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbd6d4",
+  "--dt-box-shadows-field-critical-emphasized-active": "inset 0px 0px 0px 1px #80000c0f, inset 0px -1px 0px #80000c1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent), inset 0px 0px 0px 1px #fbcbc7",
+  "--dt-box-shadows-field-critical-accent": "inset 0px 0px 0px 1px #80000c33, inset 0px -1px 0px #80000c4d, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #31323a0f, inset 0px -1px 0px #31323a0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
   "--dt-colors-theme-foreground-10": "#383842",
   "--dt-colors-theme-foreground-20": "#fff",
+  "--dt-colors-box-shadow-default": "#383839",
   "--dt-colors-theme-background-10": "#fafafb",
   "--dt-colors-theme-background-20": "#fff",
   "--dt-colors-theme-background-shell-default": "#f4f4f6",
@@ -345,11 +346,11 @@ const vrLightColors = {
 };
 const vrLightBoxShadowElements = {
   "--_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)",
-  "--_vr-shadow-2-40": "0 6px 14px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 24%, transparent)",
-  "--_vr-shadow-2-50": "0 7px 17px -2px color-mix(in srgb, var(--dt-colors-theme-foreground-10) 32%, transparent)"
+  "--_vr-shadow-1": "0 1px 2px 0 color-mix(in srgb, var(--dt-colors-box-shadow-default) 5%, transparent)",
+  "--_vr-shadow-2-20": "0 4px 8px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 7%, transparent)",
+  "--_vr-shadow-2-30": "0 5px 11px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 16%, transparent)",
+  "--_vr-shadow-2-40": "0 6px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 24%, transparent)",
+  "--_vr-shadow-2-50": "0 7px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 32%, transparent)"
 };
 const vrLightBoxShadowCompositions = {
   "--_vr-10": "var(--_vr-shadow-0)",
@@ -370,33 +371,34 @@ const vrDarkGeneratedOverrides = {
   "--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-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-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-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-neutral-emphasized-rest": "inset 0px 0px 0px 1px #ebebee1f, inset 0px 1px 0px #ebebee14, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-neutral-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-primary-emphasized-rest": "inset 0px 0px 0px 1px #dcedff0f, inset 0px 1px 0px #dcedff1a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-primary-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-success-emphasized-rest": "inset 0px 0px 0px 1px #b7f8d60f, inset 0px 1px 0px #b7f8d61a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-success-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-warning-emphasized-rest": "inset 0px 0px 0px 1px #ffedc00f, inset 0px 1px 0px #ffedc01a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-warning-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-critical-emphasized-rest": "inset 0px 0px 0px 1px #ffe4e10f, inset 0px 1px 0px #ffe4e11a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 50%, transparent), 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 color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
+  "--dt-box-shadows-field-critical-disabled": "inset 0px 0px 0px 1px #ebebee12, inset 0px 1px 0px #ebebee0a, 0px 1px 1px -1px color-mix(in srgb, var(--dt-colors-box-shadow-default) 12%, transparent)",
   "--dt-colors-theme-foreground-10": "#f0f0f5",
   "--dt-colors-theme-foreground-20": "#16161d",
+  "--dt-colors-box-shadow-default": "#0b0b12",
   "--dt-colors-theme-background-10": "#1b1b22",
   "--dt-colors-theme-background-20": "#16161d",
   "--dt-colors-theme-background-shell-default": "#141419",
@@ -690,25 +692,32 @@ const vrDarkColors = {
 };
 const vrDarkBoxShadowElements = {
   "--_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)",
-  "--_vr-shadow-2-30": "0 7px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent)",
-  "--_vr-shadow-2-40": "0 10px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent)",
-  "--_vr-shadow-2-50": "0 13px 8px color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent)"
+  "--_vr-shadow-1": "0 1px 2px 0 var(--dt-colors-box-shadow-default)"
 };
 const vrDarkBoxShadowCompositions = {
-  "--_vr-10": "var(--_vr-shadow-0)",
-  "--_vr-20": "var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-20)",
-  "--_vr-30": "var(--_vr-shadow-0), var(--_vr-shadow-1), var(--_vr-shadow-2-30)",
-  "--_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)"
+  "--_vr-10": "var(--_vr-shadow-0)"
+};
+const vrDarkBoxShadowAssignments = {
+  "--dt-box-shadows-surface-flat-rest": "var(--_vr-10)",
+  "--dt-box-shadows-surface-flat-hover": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-flat-active": "var(--_vr-10)",
+  "--dt-box-shadows-surface-flat-drag": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-raised-rest": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-raised-hover": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-raised-active": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-raised-drag": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-floating-rest": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-floating-hover": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 10px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-floating-active": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 7px 12px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)",
+  "--dt-box-shadows-surface-floating-drag": "var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent)"
 };
 export {
-  vrBoxShadowAssignments,
+  vrDarkBoxShadowAssignments,
   vrDarkBoxShadowCompositions,
   vrDarkBoxShadowElements,
   vrDarkColors,
   vrDarkGeneratedOverrides,
+  vrLightBoxShadowAssignments,
   vrLightBoxShadowCompositions,
   vrLightBoxShadowElements,
   vrLightColors,