@dsn-starter-kit/design-tokens 1.0.2 → 2.0.0

package/dist/css/scoped/density-default.css

@@ -1,14 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jun 2026 13:16:20 GMT
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
  */
 
 :root {
-  --dsn-text-font-size-sm: undefined;
-  --dsn-text-font-size-md: undefined;
-  --dsn-text-font-size-lg: undefined;
-  --dsn-text-font-size-xl: undefined;
-  --dsn-text-font-size-2xl: undefined;
-  --dsn-text-font-size-3xl: undefined;
-  --dsn-text-font-size-4xl: undefined;
+  --dsn-text-font-size-sm: clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem);
+  --dsn-text-font-size-md: clamp(1rem, 0.875rem + 0.375vw, 1.28125rem);
+  --dsn-text-font-size-lg: clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem);
+  --dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem);
+  --dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem);
+  --dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem);
+  --dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem);
 }

package/dist/css/scoped/density-information-dense.css

@@ -1,16 +1,16 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jun 2026 13:16:20 GMT
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
  */
 
 .dsn-density-dense {
-  --dsn-grid-gutter: undefined;
-  --dsn-grid-row-gap: undefined;
-  --dsn-text-font-size-sm: undefined;
-  --dsn-text-font-size-md: undefined;
-  --dsn-text-font-size-lg: undefined;
-  --dsn-text-font-size-xl: undefined;
-  --dsn-text-font-size-2xl: undefined;
-  --dsn-text-font-size-3xl: undefined;
-  --dsn-text-font-size-4xl: undefined;
+  --dsn-grid-gutter: calc(0.5rem * 1);
+  --dsn-grid-row-gap: calc(0.5rem * 1);
+  --dsn-text-font-size-sm: 0.875rem;
+  --dsn-text-font-size-md: 1rem;
+  --dsn-text-font-size-lg: 1.25rem;
+  --dsn-text-font-size-xl: 1.5rem;
+  --dsn-text-font-size-2xl: 2rem;
+  --dsn-text-font-size-3xl: 2.5rem;
+  --dsn-text-font-size-4xl: 3rem;
 }

package/dist/css/scoped/start-light-hero-image.css

@@ -0,0 +1,317 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ */
+
+.dsn-theme-start .dsn-hero--image {
+  --dsn-color-neutral-bg-document: #fcfcfc;
+  --dsn-color-neutral-bg-elevated: #fcfcfc;
+  --dsn-color-neutral-bg-subtle: #f6f6f6;
+  --dsn-color-neutral-bg-default: #f1f1f1;
+  --dsn-color-neutral-bg-hover: #ebebeb;
+  --dsn-color-neutral-bg-active: #e5e5e5;
+  --dsn-color-neutral-border-subtle: #c4c4c4;
+  --dsn-color-neutral-border-default: #868686;
+  --dsn-color-neutral-border-hover: #7c7c7c;
+  --dsn-color-neutral-border-active: #727272;
+  --dsn-color-neutral-color-default: #595959;
+  --dsn-color-neutral-color-hover: #4b4b4b;
+  --dsn-color-neutral-color-active: #3e3e3e;
+  --dsn-color-neutral-color-subtle: #636363;
+  --dsn-color-neutral-color-document: #1b1b1b;
+  --dsn-color-accent-1-bg-document: #fbfcfd;
+  --dsn-color-accent-1-bg-elevated: #fbfcfd;
+  --dsn-color-accent-1-bg-subtle: #f4f7fa;
+  --dsn-color-accent-1-bg-default: #ecf1f7;
+  --dsn-color-accent-1-bg-hover: #e4ecf4;
+  --dsn-color-accent-1-bg-active: #dde6f1;
+  --dsn-color-accent-1-border-subtle: #b0c6df;
+  --dsn-color-accent-1-border-default: #5c89be;
+  --dsn-color-accent-1-border-hover: #4e7fb8;
+  --dsn-color-accent-1-border-active: #3f74b2;
+  --dsn-color-accent-1-color-default: #1b59a4;
+  --dsn-color-accent-1-color-hover: #04499a;
+  --dsn-color-accent-1-color-active: #003b81;
+  --dsn-color-accent-1-color-subtle: #2964aa;
+  --dsn-color-accent-1-color-document: #001b3c;
+  --dsn-color-accent-2-bg-document: #fbfcfd;
+  --dsn-color-accent-2-bg-elevated: #fbfcfd;
+  --dsn-color-accent-2-bg-subtle: #f4f7fa;
+  --dsn-color-accent-2-bg-default: #ecf1f7;
+  --dsn-color-accent-2-bg-hover: #e4ecf4;
+  --dsn-color-accent-2-bg-active: #dde6f1;
+  --dsn-color-accent-2-border-subtle: #b0c6df;
+  --dsn-color-accent-2-border-default: #5c89be;
+  --dsn-color-accent-2-border-hover: #4e7fb8;
+  --dsn-color-accent-2-border-active: #3f74b2;
+  --dsn-color-accent-2-color-default: #1b59a4;
+  --dsn-color-accent-2-color-hover: #04499a;
+  --dsn-color-accent-2-color-active: #003b81;
+  --dsn-color-accent-2-color-subtle: #2964aa;
+  --dsn-color-accent-2-color-document: #001b3c;
+  --dsn-color-accent-3-bg-document: #fbfcfd;
+  --dsn-color-accent-3-bg-elevated: #fbfcfd;
+  --dsn-color-accent-3-bg-subtle: #f4f7fa;
+  --dsn-color-accent-3-bg-default: #ecf1f7;
+  --dsn-color-accent-3-bg-hover: #e4ecf4;
+  --dsn-color-accent-3-bg-active: #dde6f1;
+  --dsn-color-accent-3-border-subtle: #b0c6df;
+  --dsn-color-accent-3-border-default: #5c89be;
+  --dsn-color-accent-3-border-hover: #4e7fb8;
+  --dsn-color-accent-3-border-active: #3f74b2;
+  --dsn-color-accent-3-color-default: #1b59a4;
+  --dsn-color-accent-3-color-hover: #04499a;
+  --dsn-color-accent-3-color-active: #003b81;
+  --dsn-color-accent-3-color-subtle: #2964aa;
+  --dsn-color-accent-3-color-document: #001b3c;
+  --dsn-color-action-1-bg-document: #fbfcfd;
+  --dsn-color-action-1-bg-elevated: #fbfcfd;
+  --dsn-color-action-1-bg-subtle: #f4f7fa;
+  --dsn-color-action-1-bg-default: #ecf1f7;
+  --dsn-color-action-1-bg-hover: #e4ecf4;
+  --dsn-color-action-1-bg-active: #dde6f1;
+  --dsn-color-action-1-border-subtle: #b0c6df;
+  --dsn-color-action-1-border-default: #5c89be;
+  --dsn-color-action-1-border-hover: #4e7fb8;
+  --dsn-color-action-1-border-active: #3f74b2;
+  --dsn-color-action-1-color-default: #1b59a4;
+  --dsn-color-action-1-color-hover: #04499a;
+  --dsn-color-action-1-color-active: #003b81;
+  --dsn-color-action-1-color-subtle: #2964aa;
+  --dsn-color-action-1-color-document: #001b3c;
+  --dsn-color-action-2-bg-document: #fbfcfd;
+  --dsn-color-action-2-bg-elevated: #fbfcfd;
+  --dsn-color-action-2-bg-subtle: #f4f7fa;
+  --dsn-color-action-2-bg-default: #ecf1f7;
+  --dsn-color-action-2-bg-hover: #e4ecf4;
+  --dsn-color-action-2-bg-active: #dde6f1;
+  --dsn-color-action-2-border-subtle: #b0c6df;
+  --dsn-color-action-2-border-default: #5c89be;
+  --dsn-color-action-2-border-hover: #4e7fb8;
+  --dsn-color-action-2-border-active: #3f74b2;
+  --dsn-color-action-2-color-default: #1b59a4;
+  --dsn-color-action-2-color-hover: #04499a;
+  --dsn-color-action-2-color-active: #003b81;
+  --dsn-color-action-2-color-subtle: #2964aa;
+  --dsn-color-action-2-color-document: #001b3c;
+  --dsn-color-info-bg-document: #fbfcfd;
+  --dsn-color-info-bg-elevated: #fbfcfd;
+  --dsn-color-info-bg-subtle: #f4f7fa;
+  --dsn-color-info-bg-default: #ecf1f7;
+  --dsn-color-info-bg-hover: #e4ecf4;
+  --dsn-color-info-bg-active: #dde6f1;
+  --dsn-color-info-border-subtle: #b0c6df;
+  --dsn-color-info-border-default: #5c89be;
+  --dsn-color-info-border-hover: #4e7fb8;
+  --dsn-color-info-border-active: #3f74b2;
+  --dsn-color-info-color-default: #1b59a4;
+  --dsn-color-info-color-hover: #04499a;
+  --dsn-color-info-color-active: #003b81;
+  --dsn-color-info-color-subtle: #2964aa;
+  --dsn-color-info-color-document: #001b3c;
+  --dsn-color-negative-bg-document: #fffbfb;
+  --dsn-color-negative-bg-elevated: #fffbfb;
+  --dsn-color-negative-bg-subtle: #fef4f4;
+  --dsn-color-negative-bg-default: #feeded;
+  --dsn-color-negative-bg-hover: #fde6e6;
+  --dsn-color-negative-bg-active: #fddede;
+  --dsn-color-negative-border-subtle: #f9b1b1;
+  --dsn-color-negative-border-default: #f14848;
+  --dsn-color-negative-border-hover: #ef2929;
+  --dsn-color-negative-border-active: #e60000;
+  --dsn-color-negative-color-default: #b70000;
+  --dsn-color-negative-color-hover: #9c0000;
+  --dsn-color-negative-color-active: #930000;
+  --dsn-color-negative-color-subtle: #ca0000;
+  --dsn-color-negative-color-document: #410000;
+  --dsn-color-positive-bg-document: #fafdfb;
+  --dsn-color-positive-bg-elevated: #fafdfb;
+  --dsn-color-positive-bg-subtle: #eff9f3;
+  --dsn-color-positive-bg-default: #e4f5ea;
+  --dsn-color-positive-bg-hover: #d9f1e2;
+  --dsn-color-positive-bg-active: #ceedd9;
+  --dsn-color-positive-border-subtle: #8ad3a6;
+  --dsn-color-positive-border-default: #009b3a;
+  --dsn-color-positive-border-hover: #009036;
+  --dsn-color-positive-border-active: #008432;
+  --dsn-color-positive-color-default: #006827;
+  --dsn-color-positive-color-hover: #005821;
+  --dsn-color-positive-color-active: #00481b;
+  --dsn-color-positive-color-subtle: #00732b;
+  --dsn-color-positive-color-document: #00210c;
+  --dsn-color-warning-bg-document: #fffcf8;
+  --dsn-color-warning-bg-elevated: #fffcf8;
+  --dsn-color-warning-bg-subtle: #fff5eb;
+  --dsn-color-warning-bg-default: #ffeedd;
+  --dsn-color-warning-bg-hover: #ffe7d0;
+  --dsn-color-warning-bg-active: #ffe0c2;
+  --dsn-color-warning-border-subtle: #ffb46b;
+  --dsn-color-warning-border-default: #c8700e;
+  --dsn-color-warning-border-hover: #b86810;
+  --dsn-color-warning-border-active: #a96011;
+  --dsn-color-warning-color-default: #844c12;
+  --dsn-color-warning-color-hover: #6f4012;
+  --dsn-color-warning-color-active: #5a3511;
+  --dsn-color-warning-color-subtle: #935412;
+  --dsn-color-warning-color-document: #27190a;
+  --dsn-color-neutral-inverse-bg-document: #242424;
+  --dsn-color-neutral-inverse-bg-elevated: #242424;
+  --dsn-color-neutral-inverse-bg-subtle: #1b1b1b;
+  --dsn-color-neutral-inverse-bg-default: #595959;
+  --dsn-color-neutral-inverse-bg-hover: #4b4b4b;
+  --dsn-color-neutral-inverse-bg-active: #3e3e3e;
+  --dsn-color-neutral-inverse-border-subtle: #474747;
+  --dsn-color-neutral-inverse-border-default: #c9c9c9;
+  --dsn-color-neutral-inverse-border-hover: #d4d4d4;
+  --dsn-color-neutral-inverse-border-active: #dfdfdf;
+  --dsn-color-neutral-inverse-color-default: #ffffff;
+  --dsn-color-neutral-inverse-color-hover: #ffffff;
+  --dsn-color-neutral-inverse-color-active: #ffffff;
+  --dsn-color-neutral-inverse-color-subtle: #c4c4c4;
+  --dsn-color-neutral-inverse-color-document: #ffffff;
+  --dsn-color-accent-1-inverse-bg-document: #00234d;
+  --dsn-color-accent-1-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-1-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-1-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-1-inverse-bg-hover: #04499a;
+  --dsn-color-accent-1-inverse-bg-active: #003b81;
+  --dsn-color-accent-1-inverse-border-subtle: #004494;
+  --dsn-color-accent-1-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-1-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-1-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-1-inverse-color-default: #ffffff;
+  --dsn-color-accent-1-inverse-color-hover: #ffffff;
+  --dsn-color-accent-1-inverse-color-active: #ffffff;
+  --dsn-color-accent-1-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-1-inverse-color-document: #ffffff;
+  --dsn-color-accent-2-inverse-bg-document: #00234d;
+  --dsn-color-accent-2-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-2-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-2-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-2-inverse-bg-hover: #04499a;
+  --dsn-color-accent-2-inverse-bg-active: #003b81;
+  --dsn-color-accent-2-inverse-border-subtle: #004494;
+  --dsn-color-accent-2-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-2-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-2-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-2-inverse-color-default: #ffffff;
+  --dsn-color-accent-2-inverse-color-hover: #ffffff;
+  --dsn-color-accent-2-inverse-color-active: #ffffff;
+  --dsn-color-accent-2-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-2-inverse-color-document: #ffffff;
+  --dsn-color-accent-3-inverse-bg-document: #00234d;
+  --dsn-color-accent-3-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-3-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-3-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-3-inverse-bg-hover: #04499a;
+  --dsn-color-accent-3-inverse-bg-active: #003b81;
+  --dsn-color-accent-3-inverse-border-subtle: #004494;
+  --dsn-color-accent-3-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-3-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-3-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-3-inverse-color-default: #ffffff;
+  --dsn-color-accent-3-inverse-color-hover: #ffffff;
+  --dsn-color-accent-3-inverse-color-active: #ffffff;
+  --dsn-color-accent-3-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-3-inverse-color-document: #ffffff;
+  --dsn-color-action-1-inverse-bg-document: #00234d;
+  --dsn-color-action-1-inverse-bg-elevated: #00234d;
+  --dsn-color-action-1-inverse-bg-subtle: #001b3c;
+  --dsn-color-action-1-inverse-bg-default: #1b59a4;
+  --dsn-color-action-1-inverse-bg-hover: #04499a;
+  --dsn-color-action-1-inverse-bg-active: #003b81;
+  --dsn-color-action-1-inverse-border-subtle: #004494;
+  --dsn-color-action-1-inverse-border-default: #b8cbe2;
+  --dsn-color-action-1-inverse-border-hover: #c6d6e8;
+  --dsn-color-action-1-inverse-border-active: #d5e1ee;
+  --dsn-color-action-1-inverse-color-default: #ffffff;
+  --dsn-color-action-1-inverse-color-hover: #ffffff;
+  --dsn-color-action-1-inverse-color-active: #ffffff;
+  --dsn-color-action-1-inverse-color-subtle: #b0c6df;
+  --dsn-color-action-1-inverse-color-document: #ffffff;
+  --dsn-color-action-2-inverse-bg-document: #00234d;
+  --dsn-color-action-2-inverse-bg-elevated: #00234d;
+  --dsn-color-action-2-inverse-bg-subtle: #001b3c;
+  --dsn-color-action-2-inverse-bg-default: #1b59a4;
+  --dsn-color-action-2-inverse-bg-hover: #04499a;
+  --dsn-color-action-2-inverse-bg-active: #003b81;
+  --dsn-color-action-2-inverse-border-subtle: #004494;
+  --dsn-color-action-2-inverse-border-default: #b8cbe2;
+  --dsn-color-action-2-inverse-border-hover: #c6d6e8;
+  --dsn-color-action-2-inverse-border-active: #d5e1ee;
+  --dsn-color-action-2-inverse-color-default: #ffffff;
+  --dsn-color-action-2-inverse-color-hover: #ffffff;
+  --dsn-color-action-2-inverse-color-active: #ffffff;
+  --dsn-color-action-2-inverse-color-subtle: #b0c6df;
+  --dsn-color-action-2-inverse-color-document: #ffffff;
+  --dsn-color-info-inverse-bg-document: #00234d;
+  --dsn-color-info-inverse-bg-elevated: #00234d;
+  --dsn-color-info-inverse-bg-subtle: #001b3c;
+  --dsn-color-info-inverse-bg-default: #1b59a4;
+  --dsn-color-info-inverse-bg-hover: #04499a;
+  --dsn-color-info-inverse-bg-active: #003b81;
+  --dsn-color-info-inverse-border-subtle: #004494;
+  --dsn-color-info-inverse-border-default: #b8cbe2;
+  --dsn-color-info-inverse-border-hover: #c6d6e8;
+  --dsn-color-info-inverse-border-active: #d5e1ee;
+  --dsn-color-info-inverse-color-default: #ffffff;
+  --dsn-color-info-inverse-color-hover: #ffffff;
+  --dsn-color-info-inverse-color-active: #ffffff;
+  --dsn-color-info-inverse-color-subtle: #b0c6df;
+  --dsn-color-info-inverse-color-document: #ffffff;
+  --dsn-color-negative-inverse-bg-document: #510000;
+  --dsn-color-negative-inverse-bg-elevated: #510000;
+  --dsn-color-negative-inverse-bg-subtle: #410000;
+  --dsn-color-negative-inverse-bg-default: #b70000;
+  --dsn-color-negative-inverse-bg-hover: #9c0000;
+  --dsn-color-negative-inverse-bg-active: #820000;
+  --dsn-color-negative-inverse-border-subtle: #930000;
+  --dsn-color-negative-inverse-border-default: #fab9b9;
+  --dsn-color-negative-inverse-border-hover: #fbc8c8;
+  --dsn-color-negative-inverse-border-active: #fcd7d7;
+  --dsn-color-negative-inverse-color-default: #ffffff;
+  --dsn-color-negative-inverse-color-hover: #ffffff;
+  --dsn-color-negative-inverse-color-active: #ffffff;
+  --dsn-color-negative-inverse-color-subtle: #f9b1b1;
+  --dsn-color-negative-inverse-color-document: #ffffff;
+  --dsn-color-positive-inverse-bg-document: #002b10;
+  --dsn-color-positive-inverse-bg-elevated: #002b10;
+  --dsn-color-positive-inverse-bg-subtle: #00210c;
+  --dsn-color-positive-inverse-bg-default: #006827;
+  --dsn-color-positive-inverse-bg-hover: #005821;
+  --dsn-color-positive-inverse-bg-active: #00481b;
+  --dsn-color-positive-inverse-border-subtle: #00531f;
+  --dsn-color-positive-inverse-border-default: #96d8ae;
+  --dsn-color-positive-inverse-border-hover: #ace0c0;
+  --dsn-color-positive-inverse-border-active: #c3e9d1;
+  --dsn-color-positive-inverse-color-default: #ffffff;
+  --dsn-color-positive-inverse-color-hover: #ffffff;
+  --dsn-color-positive-inverse-color-active: #ffffff;
+  --dsn-color-positive-inverse-color-subtle: #8ad3a6;
+  --dsn-color-positive-inverse-color-document: #ffffff;
+  --dsn-color-warning-inverse-bg-document: #331f0d;
+  --dsn-color-warning-inverse-bg-elevated: #331f0d;
+  --dsn-color-warning-inverse-bg-subtle: #27190a;
+  --dsn-color-warning-inverse-bg-default: #844c12;
+  --dsn-color-warning-inverse-bg-hover: #6f4012;
+  --dsn-color-warning-inverse-bg-active: #5a3511;
+  --dsn-color-warning-inverse-border-subtle: #683c12;
+  --dsn-color-warning-inverse-border-default: #ffbc7a;
+  --dsn-color-warning-inverse-border-hover: #ffcb98;
+  --dsn-color-warning-inverse-border-active: #ffd9b4;
+  --dsn-color-warning-inverse-color-default: #ffffff;
+  --dsn-color-warning-inverse-color-hover: #ffffff;
+  --dsn-color-warning-inverse-color-active: #ffffff;
+  --dsn-color-warning-inverse-color-subtle: #ffb46b;
+  --dsn-color-warning-inverse-color-document: #ffffff;
+  --dsn-color-transparent: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent);
+  --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent);
+  --dsn-color-shadow-highlight: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
+  --dsn-hero-background-color-default: #ecf1f7;
+  --dsn-hero-background-color-inverse: #1b59a4;
+  --dsn-hero-color-default: #1b59a4;
+  --dsn-hero-color-inverse: #ffffff;
+  --dsn-hero-image-blend-color: #1b59a4;
+}

package/dist/css/scoped/wireframe-dark.css

@@ -1,24 +1,24 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jun 2026 13:16:20 GMT
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
  */
 
 .dsn-theme-wireframe.dsn-mode-dark, .dsn-mode-dark .dsn-theme-wireframe {
-  --dsn-color-neutral-bg-document: undefined;
-  --dsn-color-neutral-bg-elevated: undefined;
-  --dsn-color-neutral-bg-subtle: undefined;
-  --dsn-color-neutral-bg-default: undefined;
-  --dsn-color-neutral-bg-hover: undefined;
-  --dsn-color-neutral-bg-active: undefined;
-  --dsn-color-neutral-border-subtle: undefined;
-  --dsn-color-neutral-border-default: undefined;
-  --dsn-color-neutral-border-hover: undefined;
-  --dsn-color-neutral-border-active: undefined;
-  --dsn-color-neutral-color-default: undefined;
-  --dsn-color-neutral-color-hover: undefined;
-  --dsn-color-neutral-color-active: undefined;
-  --dsn-color-neutral-color-subtle: undefined;
-  --dsn-color-neutral-color-document: undefined;
+  --dsn-color-neutral-bg-document: #000000;
+  --dsn-color-neutral-bg-elevated: #000000;
+  --dsn-color-neutral-bg-subtle: #000000;
+  --dsn-color-neutral-bg-default: #000000;
+  --dsn-color-neutral-bg-hover: #000000;
+  --dsn-color-neutral-bg-active: #000000;
+  --dsn-color-neutral-border-subtle: #ffffff;
+  --dsn-color-neutral-border-default: #ffffff;
+  --dsn-color-neutral-border-hover: #ffffff;
+  --dsn-color-neutral-border-active: #ffffff;
+  --dsn-color-neutral-color-default: #ffffff;
+  --dsn-color-neutral-color-hover: #ffffff;
+  --dsn-color-neutral-color-active: #ffffff;
+  --dsn-color-neutral-color-subtle: #ffffff;
+  --dsn-color-neutral-color-document: #ffffff;
   --dsn-color-accent-1-bg-document: var(--dsn-color-neutral-bg-document);
   --dsn-color-accent-1-bg-elevated: var(--dsn-color-neutral-bg-elevated);
   --dsn-color-accent-1-bg-subtle: var(--dsn-color-neutral-bg-subtle);
@@ -304,8 +304,8 @@
   --dsn-color-info-inverse-color-active: var(--dsn-color-neutral-inverse-color-active);
   --dsn-color-info-inverse-color-subtle: var(--dsn-color-neutral-inverse-color-subtle);
   --dsn-color-info-inverse-color-document: var(--dsn-color-neutral-inverse-color-document);
-  --dsn-color-transparent: undefined;
-  --dsn-color-shadow-scroll: undefined;
+  --dsn-color-transparent: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12);
   --dsn-heading-color: var(--dsn-color-neutral-color-document);
   --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default);
   --dsn-form-control-background-color: var(--dsn-color-neutral-bg-subtle);
@@ -333,8 +333,8 @@
   --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle);
   --dsn-form-control-read-only-border-color: var(--dsn-color-transparent);
   --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document);
-  --dsn-focus-background-color: undefined;
-  --dsn-focus-color: undefined;
-  --dsn-focus-outline-color: undefined;
-  --dsn-focus-inverse-outline-color: undefined;
+  --dsn-focus-background-color: #ffdd00;
+  --dsn-focus-color: #000000;
+  --dsn-focus-outline-color: #ffffff;
+  --dsn-focus-inverse-outline-color: #000000;
 }