@accelint/design-toolkit 2.2.0 → 2.3.0

package/dist/styles.css

@@ -104,76 +104,109 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --animate-spin: spin 1s linear infinite;
-    --font-primary: "Roboto Flex", sans-serif;
-    --font-display: "Roboto Mono", monospace;
-    --color-surface-default: var(--neutral-10, #0b0b0b);
-    --color-surface-raised: var(--neutral-09, #222222);
-    --color-surface-overlay: var(--neutral-08, #2f2f31);
-    --color-transparent-dark: var(--alpha-black-02, rgba(0, 0, 0, 0.4));
-    --color-transparent-light: var(--alpha-white-01, rgba(255, 255, 255, 0.08));
-    --color-interactive-default: var(--neutral-02, #e6e6e6);
-    --color-interactive-hover-light: var(--neutral-03, #898989);
-    --color-interactive-hover-dark: var(--neutral-08, #2f2f31);
-    --color-interactive-disabled: var(--neutral-07, #383838);
-    --color-static-light: var(--neutral-07, #383838);
-    --color-static-dark: var(--neutral-09, #222222);
-    --color-interactive: var(--neutral-05, #565656);
-    --color-interactive-hover: var(--neutral-01, #ffffff);
-    --color-highlight-bold: var(--highlight-primary-03, #28f5be);
-    --color-highlight-hover: var(--highlight-primary-04, #189372);
-    --color-highlight-subtle: var(--highlight-primary-05, #0a3d30);
-    --color-info-bold: var(--utility-info-03, #686868);
-    --color-info-hover: var(--utility-info-04, #424244);
-    --color-info-subtle: var(--utility-info-05, #222222);
-    --color-advisory-bold: var(--utility-advisory-03, #62a6ff);
-    --color-advisory-hover: var(--utility-advisory-04, #3a6499);
-    --color-advisory-subtle: var(--utility-advisory-05, #142133);
-    --color-normal-bold: var(--utility-normal-03, #30d27e);
-    --color-normal-hover: var(--utility-normal-04, #1c7e4c);
-    --color-normal-subtle: var(--utility-normal-05, #0a2a19);
-    --color-serious-bold: var(--utility-serious-03, #fca400);
-    --color-serious-hover: var(--utility-serious-04, #976201);
-    --color-serious-subtle: var(--utility-serious-05, #322100);
-    --color-critical-bold: var(--utility-critical-03, #d4231d);
-    --color-critical-hover: var(--utility-critical-04, #7f1511);
-    --color-critical-subtle: var(--utility-critical-05, #2a0706);
-    --color-default-light: var(--neutral-01, #ffffff);
-    --color-default-dark: var(--neutral-03, #898989);
-    --color-inverse-dark: var(--neutral-07,#383838);
-    --color-inverse-light: var(--neutral-09, #222222);
-    --color-disabled: var(--neutral-05, #565656);
-    --color-highlight: var(--highlight-primary-03, #28f5be);
-    --color-info: var(--neutral-04, #686868);
-    --color-advisory: var(--utility-advisory-03, #62a6ff);
-    --color-normal: var(--utility-normal-03, #30d27e);
-    --color-serious: var(--utility-serious-03, #fca400);
-    --color-critical: var(--utility-critical-03, #d4231d);
-    --color-classification-missing: var(--neutral-10, #0b0b0b);
-    --color-classification-unclass: var(--classification-unclass, #007A33);
-    --color-classification-cui: var(--classification-cui, #502b85);
-    --color-classification-confidential: var(--classification-confidential, #0033a0);
-    --color-classification-secret: var(--classification-secret, #c8102e);
-    --color-classification-top-secret: var(--classification-top-secret, #ff8c00);
-    --color-classification-ts-sci: var(--classification-ts-sci, #fce83a);
-    --radius-none: 0px;
-    --radius-small: 2px;
-    --radius-medium: 4px;
-    --radius-large: 8px;
-    --radius-round: 80px;
-    --spacing-none: unset;
-    --spacing-0: 0;
-    --spacing-xxs: 2px;
-    --spacing-xs: 4px;
-    --spacing-s: 8px;
-    --spacing-m: 12px;
-    --spacing-l: 16px;
-    --spacing-xl: 24px;
-    --spacing-xxl: 40px;
-    --spacing-oversized: 80px;
-    --icon-size-l: var(--spacing-xl);
-    --icon-size-m: 20px;
-    --icon-size-s: var(--spacing-l);
-    --icon-size-xs: var(--spacing-m);
+    --color-surface-default: var(--colors-neutral-10, #0b0b0b);
+    --color-surface-raised: var(--colors-neutral-09, #222222);
+    --color-surface-overlay: var(--colors-neutral-08, #2f2f31);
+    --color-transparent-dark: var(--colors-alpha-black-02, rgba(0, 0, 0, 0.4));
+    --color-transparent-light: var(--colors-alpha-white-01, rgba(255, 255, 255, 0.08));
+    --color-interactive: var(--colors-neutral-05, #565656);
+    --color-interactive-default: var(--colors-neutral-02, #e6e6e6);
+    --color-interactive-hover: var(--colors-neutral-01, #ffffff);
+    --color-interactive-hover-light: var(--colors-neutral-03, #898989);
+    --color-interactive-hover-dark: var(--colors-neutral-08, #2f2f31);
+    --color-interactive-disabled: var(--colors-neutral-07, #383838);
+    --color-static-light: var(--colors-neutral-07, #383838);
+    --color-static-dark: var(--colors-neutral-09, #222222);
+    --color-highlight: var(--colors-highlight-primary-03, #28f5be);
+    --color-highlight-bold: var(--colors-highlight-primary-03, #28f5be);
+    --color-highlight-hover: var(--colors-highlight-primary-04, #189372);
+    --color-highlight-subtle: var(--colors-highlight-primary-05, #0a3d30);
+    --color-info: var(--colors-neutral-04, #686868);
+    --color-info-bold: var(--colors-utility-info-03, #686868);
+    --color-info-hover: var(--colors-utility-info-04, #424244);
+    --color-info-subtle: var(--colors-utility-info-05, #222222);
+    --color-advisory: var(--colors-utility-advisory-03, #62a6ff);
+    --color-advisory-bold: var(--colors-utility-advisory-03, #62a6ff);
+    --color-advisory-hover: var(--colors-utility-advisory-04, #3a6499);
+    --color-advisory-subtle: var(--colors-utility-advisory-05, #142133);
+    --color-normal: var(--colors-utility-normal-03, #30d27e);
+    --color-normal-bold: var(--colors-utility-normal-03, #30d27e);
+    --color-normal-hover: var(--colors-utility-normal-04, #1c7e4c);
+    --color-normal-subtle: var(--colors-utility-normal-05, #0a2a19);
+    --color-serious: var(--colors-utility-serious-03, #fca400);
+    --color-serious-bold: var(--colors-utility-serious-03, #fca400);
+    --color-serious-hover: var(--colors-utility-serious-04, #976201);
+    --color-serious-subtle: var(--colors-utility-serious-05, #322100);
+    --color-critical: var(--colors-utility-critical-03, #d4231d);
+    --color-critical-bold: var(--colors-utility-critical-03, #d4231d);
+    --color-critical-hover: var(--colors-utility-critical-04, #7f1511);
+    --color-critical-subtle: var(--colors-utility-critical-05, #2a0706);
+    --color-default-light: var(--colors-neutral-01, #ffffff);
+    --color-default-dark: var(--colors-neutral-03, #898989);
+    --color-inverse-dark: var(--colors-neutral-07, #383838);
+    --color-inverse-light: var(--colors-neutral-09, #222222);
+    --color-disabled: var(--colors-neutral-05, #565656);
+    --color-classification-missing: var(--colors-neutral-10, #0b0b0b);
+    --color-classification-unclass: var(--colors-classification-unclass, #007A33);
+    --color-classification-cui: var(--colors-classification-cui, #502b85);
+    --color-classification-confidential: var(--colors-classification-confidential, #0033a0);
+    --color-classification-secret: var(--colors-classification-secret, #c8102e);
+    --color-classification-top-secret: var(--colors-classification-top-secret, #ff8c00);
+    --color-classification-ts-sci: var(--colors-classification-ts-sci, #fce83a);
+    --typography-header-xxl-size: var(--typography-header-xxl-size);
+    --typography-header-xxl-height: var(--typography-header-xxl-height);
+    --typography-header-xl-size: var(--typography-header-xl-size);
+    --typography-header-xl-height: var(--typography-header-xl-height);
+    --typography-header-l-size: var(--typography-header-l-size);
+    --typography-header-l-height: var(--typography-header-l-height);
+    --typography-header-m-size: var(--typography-header-m-size);
+    --typography-header-m-height: var(--typography-header-m-height);
+    --typography-header-s-size: var(--typography-header-s-size);
+    --typography-header-s-height: var(--typography-header-s-height);
+    --typography-header-xs-size: var(--typography-header-xs-size);
+    --typography-header-xs-height: var(--typography-header-xs-height);
+    --typography-body-l-size: var(--typography-body-l-size);
+    --typography-body-l-height: var(--typography-body-l-height);
+    --typography-body-m-size: var(--typography-body-m-size);
+    --typography-body-m-height: var(--typography-body-m-height);
+    --typography-body-s-size: var(--typography-body-s-size);
+    --typography-body-s-height: var(--typography-body-s-height);
+    --typography-body-xs-size: var(--typography-body-xs-size);
+    --typography-body-xs-height: var(--typography-body-xs-height);
+    --typography-body-xxs-size: var(--typography-body-xxs-size);
+    --typography-body-xxs-height: var(--typography-body-xxs-height);
+    --typography-button-l-size: var(--typography-button-l-size);
+    --typography-button-l-height: var(--typography-button-l-height);
+    --typography-button-m-size: var(--typography-button-m-size);
+    --typography-button-m-height: var(--typography-button-m-height);
+    --typography-button-s-size: var(--typography-button-s-size);
+    --typography-button-s-height: var(--typography-button-s-height);
+    --typography-button-xs-size: var(--typography-button-xs-size);
+    --typography-button-xs-height: var(--typography-button-xs-height);
+    --spacing-0: var(--spacing-0);
+    --spacing-none: var(--spacing-none);
+    --spacing-xxs: var(--spacing-xxs);
+    --spacing-xs: var(--spacing-xs);
+    --spacing-s: var(--spacing-s);
+    --spacing-m: var(--spacing-m);
+    --spacing-l: var(--spacing-l);
+    --spacing-xl: var(--spacing-xl);
+    --spacing-xxl: var(--spacing-xxl);
+    --spacing-oversized: var(--spacing-oversized);
+    --radius-none: var(--radius-none);
+    --radius-small: var(--radius-small);
+    --radius-medium: var(--radius-medium);
+    --radius-large: var(--radius-large);
+    --radius-round: var(--radius-round);
+    --shadows-elevation-default: var(--shadows-elevation-default);
+    --shadows-elevation-overlay: var(--shadows-elevation-overlay);
+    --shadows-elevation-raised: var(--shadows-elevation-raised);
+    --font-primary: var(--font-primary);
+    --font-display: var(--font-display);
+    --icons-size-l: var(--icons-size-l);
+    --icons-size-m: var(--icons-size-m);
+    --icons-size-s: var(--icons-size-s);
+    --icons-size-xs: var(--icons-size-xs);
   }
 }
 @layer base {
@@ -325,6 +358,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .\[position\:var\(--badge-position\,initial\)\] {
     position: var(--badge-position,initial);
   }
@@ -337,6 +373,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .\[inset\:var\(--badge-inset\,initial\)\] {
     inset: var(--badge-inset,initial);
   }
@@ -361,15 +400,9 @@
   .right-\[8px\] {
     right: 8px;
   }
-  .right-\[20px\] {
-    right: 20px;
-  }
   .right-xs {
     right: var(--spacing-xs);
   }
-  .bottom-\[20px\] {
-    bottom: 20px;
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -454,6 +487,9 @@
   .my-s {
     margin-block: var(--spacing-s);
   }
+  .my-xxs {
+    margin-block: var(--spacing-xxs);
+  }
   .mt-l {
     margin-top: var(--spacing-l);
   }
@@ -496,14 +532,6 @@
   .table {
     display: table;
   }
-  .size-\[20px\] {
-    width: 20px;
-    height: 20px;
-  }
-  .size-\[28px\] {
-    width: 28px;
-    height: 28px;
-  }
   .size-\[32px\] {
     width: 32px;
     height: 32px;
@@ -587,18 +615,6 @@
   .max-h-\[200px\] {
     max-height: 200px;
   }
-  .min-h-\[20px\] {
-    min-height: 20px;
-  }
-  .min-h-\[32px\] {
-    min-height: 32px;
-  }
-  .min-h-xl {
-    min-height: var(--spacing-xl);
-  }
-  .min-h-xxl {
-    min-height: var(--spacing-xxl);
-  }
   .w-\(--trigger-width\) {
     width: var(--trigger-width);
   }
@@ -611,12 +627,6 @@
   .w-\[16px\] {
     width: 16px;
   }
-  .w-\[32px\] {
-    width: 32px;
-  }
-  .w-\[32px\] {
-    width: 32px;
-  }
   .w-\[50px\] {
     width: 50px;
   }
@@ -1195,9 +1205,6 @@
   .p-m {
     padding: var(--spacing-m);
   }
-  .p-oversized {
-    padding: var(--spacing-oversized);
-  }
   .p-s {
     padding: var(--spacing-s);
   }
@@ -1207,8 +1214,11 @@
   .p-xs {
     padding: var(--spacing-xs);
   }
-  .px-l {
-    padding-inline: var(--spacing-l);
+  .p-xxs {
+    padding: var(--spacing-xxs);
+  }
+  .px-m {
+    padding-inline: var(--spacing-m);
   }
   .px-s {
     padding-inline: var(--spacing-s);
@@ -1249,9 +1259,6 @@
   .pl-\[35px\] {
     padding-left: 35px;
   }
-  .pl-m {
-    padding-left: var(--spacing-m);
-  }
   .pl-s {
     padding-left: var(--spacing-s);
   }
@@ -1268,94 +1275,94 @@
     font-family: var(--font-primary);
   }
   .text-body-l {
-    font-size: var(--body-l-size);
+    font-size: var(--typography-body-l-size);
     font-weight: 400;
     letter-spacing: 0.5px;
-    line-height: var(--body-l-height);
+    line-height: var(--typography-body-l-height);
   }
   .text-body-m {
-    font-size: var(--body-m-size);
+    font-size: var(--typography-body-m-size);
     font-weight: 400;
     letter-spacing: 0.25px;
-    line-height: var(--body-m-height);
+    line-height: var(--typography-body-m-height);
   }
   .text-body-s {
-    font-size: var(--body-s-size);
+    font-size: var(--typography-body-s-size);
     font-weight: 400;
     letter-spacing: 0.4px;
-    line-height: var(--body-s-height);
+    line-height: var(--typography-body-s-height);
   }
   .text-body-xs {
-    font-size: var(--body-xs-size);
+    font-size: var(--typography-body-xs-size);
     font-weight: 400;
     letter-spacing: 0.5px;
-    line-height: var(--body-xs-height);
+    line-height: var(--typography-body-xs-height);
   }
   .text-body-xxs {
-    font-size: var(--body-xxs-size);
+    font-size: var(--typography-body-xxs-size);
     font-weight: 400;
     letter-spacing: 0.25px;
-    line-height: var(--body-xxs-height);
+    line-height: var(--typography-body-xxs-height);
   }
   .text-button-l {
-    font-size: var(--button-l-size);
+    font-size: var(--typography-button-l-size);
     font-weight: bold;
     letter-spacing: 0.5px;
-    line-height: var(--button-l-height);
+    line-height: var(--typography-button-l-height);
   }
   .text-button-m {
-    font-size: var(--button-m-size);
+    font-size: var(--typography-button-m-size);
     font-weight: bold;
     letter-spacing: 0.25px;
-    line-height: var(--button-m-height);
+    line-height: var(--typography-button-m-height);
   }
   .text-button-s {
-    font-size: var(--button-s-size);
+    font-size: var(--typography-button-s-size);
     font-weight: bold;
     letter-spacing: 0.4px;
-    line-height: var(--button-s-height);
+    line-height: var(--typography-button-s-height);
   }
   .text-button-xs {
-    font-size: var(--button-xs-size);
+    font-size: var(--typography-button-xs-size);
     font-weight: bold;
     letter-spacing: 0.5px;
-    line-height: var(--button-xs-height);
+    line-height: var(--typography-button-xs-height);
   }
   .text-header-l {
-    font-size: var(--header-l-size);
+    font-size: var(--typography-header-l-size);
     font-weight: 500;
     letter-spacing: 0.18px;
-    line-height: var(--header-l-height);
+    line-height: var(--typography-header-l-height);
   }
   .text-header-m {
-    font-size: var(--header-m-size);
+    font-size: var(--typography-header-m-size);
     font-weight: 500;
     letter-spacing: 0.25px;
-    line-height: var(--header-m-height);
+    line-height: var(--typography-header-m-height);
   }
   .text-header-s {
-    font-size: var(--header-s-size);
+    font-size: var(--typography-header-s-size);
     font-weight: 500;
     letter-spacing: 0.4px;
-    line-height: var(--header-s-height);
+    line-height: var(--typography-header-s-height);
   }
   .text-header-xl {
-    font-size: var(--header-xl-size);
+    font-size: var(--typography-header-xl-size);
     font-weight: 500;
     letter-spacing: 0.18px;
-    line-height: var(--header-xl-height);
+    line-height: var(--typography-header-xl-height);
   }
   .text-header-xs {
-    font-size: var(--header-xs-size);
+    font-size: var(--typography-header-xs-size);
     font-weight: 500;
     letter-spacing: 0.25px;
-    line-height: var(--header-xs-height);
+    line-height: var(--typography-header-xs-height);
   }
   .text-header-xxl {
-    font-size: var(--header-xxl-size);
+    font-size: var(--typography-header-xxl-size);
     font-weight: 500;
     letter-spacing: 0px;
-    line-height: var(--header-xxl-height);
+    line-height: var(--typography-header-xxl-height);
   }
   .text-\[24px\] {
     font-size: 24px;
@@ -1386,9 +1393,6 @@
   .break-words {
     overflow-wrap: break-word;
   }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
   .fg-advisory {
     color: var(--color-advisory);
     --icon-color: var(--color-advisory);
@@ -1476,14 +1480,6 @@
   .uppercase {
     text-transform: uppercase;
   }
-  .shadow-elevation-overlay {
-    --tw-shadow: 0 8px 10px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.2)), 0 6px 30px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.12)), 0 16px 24px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.14));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-elevation-raised {
-    --tw-shadow: 0 5px 5px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.2)), 0 3px 14px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.12)), 0 8px 10px 0 var(--tw-shadow-color, rgba(0 0 0 / 0.14));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-surface-default {
     --tw-shadow-color: var(--color-surface-default);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1530,9 +1526,6 @@
   .outline-interactive {
     outline-color: var(--color-interactive);
   }
-  .outline-interactive-default {
-    outline-color: var(--color-interactive-default);
-  }
   .outline-interactive-disabled {
     outline-color: var(--color-interactive-disabled);
   }
@@ -1551,6 +1544,9 @@
   .outline-static-light {
     outline-color: var(--color-static-light);
   }
+  .outline-transparent {
+    outline-color: transparent;
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1571,18 +1567,6 @@
   .\[--badge-position\:absolute\] {
     --badge-position: absolute;
   }
-  .\[--icon-size\:12px\] {
-    --icon-size: 12px;
-  }
-  .\[--icon-size\:16px\] {
-    --icon-size: 16px;
-  }
-  .\[--icon-size\:20px\] {
-    --icon-size: 20px;
-  }
-  .\[--icon-size\:24px\] {
-    --icon-size: 24px;
-  }
   .\[--icon-size\:var\(--icon-size-l\)\] {
     --icon-size: var(--icon-size-l);
   }
@@ -1595,12 +1579,6 @@
   .\[--icon-size\:var\(--icon-size-xs\)\] {
     --icon-size: var(--icon-size-xs);
   }
-  .\[--icon-size\:var\(--spacing-l\)\] {
-    --icon-size: var(--spacing-l);
-  }
-  .\[--icon-size\:var\(--spacing-xl\)\] {
-    --icon-size: var(--spacing-xl);
-  }
   .\[--my-font-size\:12px\] {
     --my-font-size: 12px;
   }
@@ -1610,192 +1588,247 @@
   .\[background\:--color-default-light\] {
     background: --color-default-light;
   }
-  .icon-default-dark {
-    --icon-color: var(--color-default-dark);
-  }
-  .icon-default-light {
-    --icon-color: var(--color-default-light);
-  }
-  .icon-disabled {
-    --icon-color: var(--color-disabled);
-  }
   .icon-inverse-light {
     --icon-color: var(--color-inverse-light);
   }
-  .not-dtk-selected\:cursor-not-allowed {
-    &:not(*[data-selected]) {
-      cursor: not-allowed;
+  .group-empty\:hidden {
+    &:is(:is(:where(.group)[data-empty], :where(.group):empty) *) {
+      display: none;
     }
   }
-  .not-dtk-selected\:bg-interactive-disabled {
-    &:not(*[data-selected]) {
-      background-color: var(--color-interactive-disabled);
+  .group-enabled\:group-hover\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
     }
   }
-  .not-dtk-selected\:icon-disabled {
-    &:not(*[data-selected]) {
-      --icon-color: var(--color-disabled);
+  .group-enabled\:group-hover\:outline-interactive-hover {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .group-focus-within\:bg-highlight-subtle {
-    &:is(:where(.group):focus-within *) {
-      background-color: var(--color-highlight-subtle);
+  .group-enabled\:group-focus\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
     }
   }
-  .group-focus-within\:bg-interactive-hover-dark {
-    &:is(:where(.group):focus-within *) {
-      background-color: var(--color-interactive-hover-dark);
+  .group-enabled\:group-focus\:outline-interactive-hover {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .group-focus-within\:outline-interactive-hover {
-    &:is(:where(.group):focus-within *) {
-      outline-color: var(--color-interactive-hover);
+  .group-enabled\/radio\:group-hover\/radio\:outline-interactive-hover {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .group-hover\:bg-highlight-subtle {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-highlight-subtle);
+  .group-enabled\/radio\:group-focus\/radio\:outline-interactive-hover {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
+        outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .group-hover\:bg-interactive-hover-dark {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-interactive-hover-dark);
-      }
+  .group-disabled\:hidden {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      display: none;
     }
   }
-  .group-hover\:outline-highlight {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        outline-color: var(--color-highlight);
-      }
+  .group-disabled\:bg-interactive-disabled {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      background-color: var(--color-interactive-disabled);
     }
   }
-  .group-hover\:outline-interactive-hover {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        outline-color: var(--color-interactive-hover);
-      }
+  .group-disabled\:fg-disabled {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
     }
   }
-  .group-hover\:icon-default-light {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --icon-color: var(--color-default-light);
-      }
+  .group-disabled\:text-interactive-disabled {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      color: var(--color-interactive-disabled);
     }
   }
-  .group-hover\:icon-disabled {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --icon-color: var(--color-disabled);
-      }
+  .group-disabled\:outline-interactive-disabled {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      outline-color: var(--color-interactive-disabled);
     }
   }
-  .group-focus\:icon-default-light {
-    &:is(:where(.group):focus *) {
-      --icon-color: var(--color-default-light);
+  .group-disabled\/radio\:text-interactive-disabled {
+    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
+      color: var(--color-interactive-disabled);
     }
   }
-  .group-dtk-orientation-horizontal\:rounded-small {
+  .group-disabled\/radio\:outline-interactive-disabled {
+    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-orientation-horizontal\:rounded-small {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-radius: var(--radius-small);
     }
   }
-  .group-dtk-orientation-horizontal\:rounded-b-none {
+  .group-orientation-horizontal\:rounded-b-none {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
-  .group-dtk-orientation-horizontal\:rounded-b-none {
+  .group-orientation-horizontal\:rounded-b-none {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-right-radius: var(--radius-none);
       border-bottom-left-radius: var(--radius-none);
     }
   }
-  .group-dtk-orientation-horizontal\:border-b {
+  .group-orientation-horizontal\:border-b {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
     }
   }
-  .group-dtk-orientation-horizontal\:border-highlight {
+  .group-orientation-horizontal\:border-highlight {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-highlight);
     }
   }
-  .group-dtk-orientation-horizontal\:border-interactive-disabled {
+  .group-orientation-horizontal\:border-interactive-disabled {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-interactive-disabled);
     }
   }
-  .group-dtk-orientation-horizontal\:border-interactive-hover {
+  .group-orientation-horizontal\:border-interactive-hover {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-interactive-hover);
     }
   }
-  .group-dtk-orientation-horizontal\:border-static-light {
+  .group-orientation-horizontal\:border-static-light {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-static-light);
     }
   }
-  .group-dtk-orientation-horizontal\:pl-0 {
+  .group-orientation-horizontal\:pl-0 {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       padding-left: var(--spacing-0);
     }
   }
-  .group-dtk-orientation-vertical\:border {
+  .group-orientation-horizontal\/radio-group\:grow {
+    &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
+      flex-grow: 1;
+    }
+  }
+  .group-orientation-horizontal\/radio-group\:basis-1\/3 {
+    &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
+      flex-basis: calc(1/3 * 100%);
+    }
+  }
+  .group-orientation-vertical\:border {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
   }
-  .group-dtk-orientation-vertical\:border-interactive-hover {
+  .group-orientation-vertical\:border-interactive-hover {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-color: var(--color-interactive-hover);
     }
   }
-  .group-dtk-orientation-vertical\:border-transparent {
+  .group-orientation-vertical\:border-transparent {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-color: transparent;
     }
   }
-  .group-dtk-orientation-vertical\:pt-0 {
+  .group-orientation-vertical\:pt-0 {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       padding-top: var(--spacing-0);
     }
   }
-  .group-dtk-expanded\:rotate-180 {
-    &:is(:where(.group)[data-expanded] *) {
+  .group-expanded\:rotate-180 {
+    &:is(:where(.group):is([expanded], [data-expanded]) *) {
       rotate: 180deg;
     }
   }
-  .group-dtk-empty\:hidden {
-    &:is(:where(.group)[data-empty] *) {
-      display: none;
-    }
-  }
-  .group-dtk-selected\:rotate-180 {
+  .group-selected\:rotate-180 {
     &:is(:where(.group)[data-selected] *) {
       rotate: 180deg;
     }
   }
-  .group-dtk-disabled\:hidden {
-    &:is(:where(.group)[data-disabled] *) {
-      display: none;
+  .group-enabled\:group-selected\:outline-highlight {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        outline-color: var(--color-highlight);
+      }
     }
   }
-  .group-dtk-disabled\:bg-interactive-disabled {
-    &:is(:where(.group)[data-disabled] *) {
-      background-color: var(--color-interactive-disabled);
+  .group-enabled\:group-selected\:group-hover\:bg-highlight-subtle {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+          background-color: var(--color-highlight-subtle);
+        }
+      }
     }
   }
-  .group-dtk-disabled\:outline-interactive-disabled {
-    &:is(:where(.group)[data-disabled] *) {
-      outline-color: var(--color-interactive-disabled);
+  .group-enabled\:group-selected\:group-hover\:outline-highlight {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+          outline-color: var(--color-highlight);
+        }
+      }
+    }
+  }
+  .group-enabled\:group-selected\:group-focus\:bg-highlight-subtle {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+          background-color: var(--color-highlight-subtle);
+        }
+      }
+    }
+  }
+  .group-enabled\:group-selected\:group-focus\:outline-interactive-hover {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:outline-highlight {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:where(.group\/radio)[data-selected] *) {
+        outline-color: var(--color-highlight);
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:group-hover\/radio\:outline-interactive-hover {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:where(.group\/radio)[data-selected] *) {
+        &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:group-focus\/radio\:outline-interactive-hover {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:where(.group\/radio)[data-selected] *) {
+        &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
   .placeholder\:text-default-dark {
@@ -1808,22 +1841,10 @@
       color: var(--color-disabled);
     }
   }
-  .before\:absolute {
+  .before\:mr-l {
     &::before {
       content: var(--tw-content);
-      position: absolute;
-    }
-  }
-  .before\:right-\[3px\] {
-    &::before {
-      content: var(--tw-content);
-      right: 3px;
-    }
-  }
-  .before\:left-\[3px\] {
-    &::before {
-      content: var(--tw-content);
-      left: 3px;
+      margin-right: var(--spacing-l);
     }
   }
   .before\:block {
@@ -1852,55 +1873,59 @@
       border-radius: calc(infinity * 1px);
     }
   }
-  .before\:rounded-round {
-    &::before {
-      content: var(--tw-content);
-      border-radius: var(--radius-round);
-    }
-  }
   .before\:bg-default-dark {
     &::before {
       content: var(--tw-content);
       background-color: var(--color-default-dark);
     }
   }
-  .before\:bg-highlight {
-    &::before {
-      content: var(--tw-content);
-      background-color: var(--color-highlight);
+  .group-enabled\:group-hover\:before\:bg-interactive-hover {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .before\:bg-interactive-disabled {
-    &::before {
-      content: var(--tw-content);
-      background-color: var(--color-interactive-disabled);
+  .group-enabled\:group-focus\:before\:bg-interactive-hover {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .before\:bg-transparent {
-    &::before {
-      content: var(--tw-content);
-      background-color: transparent;
+  .group-disabled\:before\:bg-disabled {
+    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-disabled);
+      }
     }
   }
-  .group-focus-within\:before\:bg-highlight {
-    &:is(:where(.group):focus-within *) {
+  .group-selected\:before\:mr-0 {
+    &:is(:where(.group)[data-selected] *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-highlight);
+        margin-right: var(--spacing-0);
       }
     }
   }
-  .group-focus-within\:before\:bg-interactive-hover {
-    &:is(:where(.group):focus-within *) {
+  .group-selected\:before\:ml-l {
+    &:is(:where(.group)[data-selected] *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--color-interactive-hover);
+        margin-left: var(--spacing-l);
       }
     }
   }
-  .group-hover\:before\:bg-highlight {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
+  .group-enabled\:group-selected\:before\:bg-highlight {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-highlight);
@@ -1908,21 +1933,47 @@
       }
     }
   }
-  .group-hover\:before\:bg-interactive-hover {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
+  .group-enabled\:group-selected\:group-hover\:before\:bg-highlight {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--color-highlight);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\:group-selected\:group-focus\:before\:bg-highlight {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &:is(:where(.group)[data-selected] *) {
+        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--color-highlight);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:before\:bg-highlight {
+    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:where(.group\/radio)[data-selected] *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--color-interactive-hover);
+          background-color: var(--color-highlight);
         }
       }
     }
   }
-  .group-dtk-disabled\:before\:bg-disabled {
-    &:is(:where(.group)[data-disabled] *) {
-      &::before {
-        content: var(--tw-content);
-        background-color: var(--color-disabled);
+  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
+    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
+      &:is(:where(.group\/radio)[data-selected] *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-disabled);
+        }
       }
     }
   }
@@ -1933,338 +1984,385 @@
     }
   }
   .not-disabled\:read-only\:rounded-none {
-    &:not(*:disabled) {
-      &:read-only {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
         border-radius: 0;
       }
     }
   }
   .not-disabled\:read-only\:rounded-none {
-    &:not(*:disabled) {
-      &:read-only {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
         border-radius: var(--radius-none);
       }
     }
   }
   .not-disabled\:read-only\:p-0 {
-    &:not(*:disabled) {
-      &:read-only {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
         padding: var(--spacing-0);
       }
     }
   }
   .not-disabled\:read-only\:outline-transparent {
-    &:not(*:disabled) {
-      &:read-only {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
         outline-color: transparent;
       }
     }
   }
   .empty\:\[inset\:var\(--badge-empty-inset\,initial\)\] {
-    &:empty {
+    &[data-empty], &:empty {
       inset: var(--badge-empty-inset,initial);
     }
   }
   .empty\:hidden {
-    &:empty {
+    &[data-empty], &:empty {
       display: none;
     }
   }
   .empty\:size-s {
-    &:empty {
+    &[data-empty], &:empty {
       width: var(--spacing-s);
       height: var(--spacing-s);
     }
   }
   .empty\:min-w-none {
-    &:empty {
+    &[data-empty], &:empty {
       min-width: var(--spacing-none);
     }
   }
   .empty\:px-none {
-    &:empty {
+    &[data-empty], &:empty {
       padding-inline: var(--spacing-none);
     }
   }
-  .focus-within\:bg-interactive-hover-dark {
-    &:focus-within {
-      background-color: var(--color-interactive-hover-dark);
-    }
-  }
-  .focus-within\:bg-transparent {
-    &:focus-within {
-      background-color: transparent;
-    }
-  }
   .focus-within\:outline-highlight {
-    &:focus-within {
+    &[data-focus-within], &:focus-within {
       outline-color: var(--color-highlight);
     }
   }
-  .hover\:bg-critical-hover {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-critical-hover);
+  .group-enabled\:focus-within\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &[data-focus-within], &:focus-within {
+        background-color: var(--color-interactive-hover-dark);
       }
     }
   }
   .hover\:bg-highlight-bold {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-highlight-bold);
-      }
+    &[data-hovered], &:hover {
+      background-color: var(--color-highlight-bold);
     }
   }
-  .hover\:bg-interactive-disabled {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-interactive-disabled);
-      }
+  .hover\:bg-serious-bold {
+    &[data-hovered], &:hover {
+      background-color: var(--color-serious-bold);
     }
   }
-  .hover\:bg-interactive-hover-dark {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-interactive-hover-dark);
-      }
+  .hover\:fg-interactive-hover {
+    &[data-hovered], &:hover {
+      color: var(--color-interactive-hover);
+      --icon-color: var(--color-interactive-hover);
     }
   }
-  .hover\:bg-interactive-hover-light {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-interactive-hover-light);
-      }
+  .hover\:fg-inverse-light {
+    &[data-hovered], &:hover {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
     }
   }
-  .hover\:bg-normal {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-normal);
-      }
+  .hover\:outline-4 {
+    &[data-hovered], &:hover {
+      outline-style: var(--tw-outline-style);
+      outline-width: 4px;
     }
   }
-  .hover\:bg-serious-bold {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-serious-bold);
-      }
+  .hover\:outline-interactive-disabled {
+    &[data-hovered], &:hover {
+      outline-color: var(--color-interactive-disabled);
     }
   }
-  .hover\:bg-serious-hover {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-serious-hover);
-      }
+  .hover\:outline-interactive-hover {
+    &[data-hovered], &:hover {
+      outline-color: var(--color-interactive-hover);
     }
   }
-  .hover\:bg-transparent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: transparent;
-      }
+  .hover\:outline-solid {
+    &[data-hovered], &:hover {
+      --tw-outline-style: solid;
+      outline-style: solid;
     }
   }
-  .hover\:fg-disabled {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-disabled);
-        --icon-color: var(--color-disabled);
+  .group-enabled\:hover\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+      &[data-hovered], &:hover {
+        background-color: var(--color-interactive-hover-dark);
       }
     }
   }
-  .hover\:fg-interactive-hover {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
+  .not-disabled\:read-only\:hover\:outline-transparent {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
+        &[data-hovered], &:hover {
+          outline-color: transparent;
+        }
       }
     }
   }
-  .hover\:fg-inverse-light {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
-      }
+  .focus\:bg-highlight {
+    &[data-focused], &:focus {
+      background-color: var(--color-highlight);
     }
   }
-  .hover\:outline-4 {
-    &:hover {
-      @media (hover: hover) {
-        outline-style: var(--tw-outline-style);
-        outline-width: 4px;
-      }
+  .focus\:bg-highlight-bold {
+    &[data-focused], &:focus {
+      background-color: var(--color-highlight-bold);
     }
   }
-  .hover\:outline-interactive-disabled {
-    &:hover {
-      @media (hover: hover) {
-        outline-color: var(--color-interactive-disabled);
-      }
+  .focus\:bg-serious-bold {
+    &[data-focused], &:focus {
+      background-color: var(--color-serious-bold);
     }
   }
-  .hover\:outline-interactive-hover {
-    &:hover {
-      @media (hover: hover) {
-        outline-color: var(--color-interactive-hover);
-      }
+  .focus\:fg-inverse-light {
+    &[data-focused], &:focus {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
     }
   }
-  .hover\:outline-solid {
-    &:hover {
-      @media (hover: hover) {
-        --tw-outline-style: solid;
-        outline-style: solid;
-      }
+  .focus\:text-inverse-light {
+    &[data-focused], &:focus {
+      color: var(--color-inverse-light);
     }
   }
-  .hover\:icon-default-light {
-    &:hover {
-      @media (hover: hover) {
-        --icon-color: var(--color-default-light);
-      }
+  .focus\:outline-4 {
+    &[data-focused], &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 4px;
     }
   }
-  .hover\:icon-disabled {
-    &:hover {
-      @media (hover: hover) {
-        --icon-color: var(--color-disabled);
-      }
+  .focus\:outline-highlight {
+    &[data-focused], &:focus {
+      outline-color: var(--color-highlight);
     }
   }
-  .not-dtk-selected\:hover\:bg-interactive-disabled {
-    &:not(*[data-selected]) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-interactive-disabled);
-        }
-      }
+  .focus\:outline-interactive-hover {
+    &[data-focused], &:focus {
+      outline-color: var(--color-interactive-hover);
     }
   }
-  .not-disabled\:read-only\:hover\:outline-transparent {
-    &:not(*:disabled) {
-      &:read-only {
-        &:hover {
-          @media (hover: hover) {
-            outline-color: transparent;
-          }
-        }
-      }
+  .focus\:outline-serious {
+    &[data-focused], &:focus {
+      outline-color: var(--color-serious);
     }
   }
-  .focus\:bg-critical-hover {
-    &:focus {
-      background-color: var(--color-critical-hover);
+  .focus\:outline-none {
+    &[data-focused], &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
     }
   }
-  .focus\:bg-default-light\/5 {
-    &:focus {
-      background-color: var(--color-default-light);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-default-light) 5%, transparent);
+  .focus\:outline-solid {
+    &[data-focused], &:focus {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
+  .not-disabled\:read-only\:focus\:outline-transparent {
+    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
+      &:is([readonly], [data-readonly]), &:read-only {
+        &[data-focused], &:focus {
+          outline-color: transparent;
+        }
       }
     }
   }
-  .focus\:bg-highlight {
-    &:focus {
-      background-color: var(--color-highlight);
+  .enabled\:bg-critical {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-critical);
     }
   }
-  .focus\:bg-interactive-disabled {
-    &:focus {
-      background-color: var(--color-interactive-disabled);
+  .enabled\:bg-critical-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-critical-subtle);
     }
   }
-  .focus\:bg-interactive-hover-dark {
-    &:focus {
-      background-color: var(--color-interactive-hover-dark);
+  .enabled\:bg-interactive-default {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-interactive-default);
     }
   }
-  .focus\:bg-interactive-hover-light {
-    &:focus {
-      background-color: var(--color-interactive-hover-light);
+  .enabled\:bg-serious {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-serious);
     }
   }
-  .focus\:bg-serious-hover {
-    &:focus {
-      background-color: var(--color-serious-hover);
+  .enabled\:bg-serious-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-serious-subtle);
     }
   }
-  .focus\:bg-transparent {
-    &:focus {
-      background-color: transparent;
+  .enabled\:bg-surface-default {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: var(--color-surface-default);
     }
   }
-  .focus\:fg-disabled {
-    &:focus {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+  .enabled\:fg-critical {
+    &:not([disabled], [data-disabled]), &:enabled {
+      color: var(--color-critical);
+      --icon-color: var(--color-critical);
     }
   }
-  .focus\:text-inverse-light {
-    &:focus {
-      color: var(--color-inverse-light);
+  .enabled\:fg-default-light {
+    &:not([disabled], [data-disabled]), &:enabled {
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
     }
   }
-  .focus\:outline-4 {
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 4px;
+  .enabled\:fg-interactive {
+    &:not([disabled], [data-disabled]), &:enabled {
+      color: var(--color-interactive);
+      --icon-color: var(--color-interactive);
     }
   }
-  .focus\:outline-highlight {
-    &:focus {
-      outline-color: var(--color-highlight);
+  .enabled\:fg-serious {
+    &:not([disabled], [data-disabled]), &:enabled {
+      color: var(--color-serious);
+      --icon-color: var(--color-serious);
     }
   }
-  .focus\:outline-interactive-disabled {
-    &:focus {
-      outline-color: var(--color-interactive-disabled);
+  .enabled\:outline-critical {
+    &:not([disabled], [data-disabled]), &:enabled {
+      outline-color: var(--color-critical);
     }
   }
-  .focus\:outline-interactive-hover {
-    &:focus {
-      outline-color: var(--color-interactive-hover);
+  .enabled\:outline-interactive {
+    &:not([disabled], [data-disabled]), &:enabled {
+      outline-color: var(--color-interactive);
     }
   }
-  .focus\:outline-serious {
-    &:focus {
+  .enabled\:outline-serious {
+    &:not([disabled], [data-disabled]), &:enabled {
       outline-color: var(--color-serious);
     }
   }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+  .enabled\:hover\:bg-critical-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        background-color: var(--color-critical-hover);
+      }
     }
   }
-  .focus\:outline-solid {
-    &:focus {
-      --tw-outline-style: solid;
-      outline-style: solid;
+  .enabled\:hover\:bg-interactive-hover-dark {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        background-color: var(--color-interactive-hover-dark);
+      }
     }
   }
-  .focus\:icon-default-light {
-    &:focus {
-      --icon-color: var(--color-default-light);
+  .enabled\:hover\:bg-interactive-hover-light {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        background-color: var(--color-interactive-hover-light);
+      }
     }
   }
-  .not-dtk-selected\:focus\:bg-interactive-disabled {
-    &:not(*[data-selected]) {
-      &:focus {
-        background-color: var(--color-interactive-disabled);
+  .enabled\:hover\:bg-serious-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        background-color: var(--color-serious-hover);
       }
     }
   }
-  .not-disabled\:read-only\:focus\:outline-transparent {
-    &:not(*:disabled) {
-      &:read-only {
-        &:focus {
-          outline-color: transparent;
-        }
+  .enabled\:hover\:fg-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .enabled\:hover\:outline-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .enabled\:focus\:bg-critical-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        background-color: var(--color-critical-hover);
+      }
+    }
+  }
+  .enabled\:focus\:bg-interactive-hover-dark {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        background-color: var(--color-interactive-hover-dark);
+      }
+    }
+  }
+  .enabled\:focus\:bg-interactive-hover-light {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        background-color: var(--color-interactive-hover-light);
       }
     }
   }
+  .enabled\:focus\:bg-serious-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        background-color: var(--color-serious-hover);
+      }
+    }
+  }
+  .enabled\:focus\:fg-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .enabled\:focus\:outline-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:is([disabled], [data-disabled]), &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:bg-interactive-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .disabled\:bg-transparent {
+    &:is([disabled], [data-disabled]), &:disabled {
+      background-color: transparent;
+    }
+  }
+  .disabled\:fg-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .disabled\:text-interactive-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      color: var(--color-interactive-disabled);
+    }
+  }
+  .disabled\:outline-interactive-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
   .data-selected\:outline-highlight {
     &[data-selected] {
       outline-color: var(--color-highlight);
@@ -2279,10 +2377,10 @@
   .\*\*\:data-\[slot\=description\]\:text-body-xs {
     :is(& *) {
       &[data-slot="description"] {
-        font-size: var(--body-xs-size);
+        font-size: var(--typography-body-xs-size);
         font-weight: 400;
         letter-spacing: 0.5px;
-        line-height: var(--body-xs-height);
+        line-height: var(--typography-body-xs-height);
       }
     }
   }
@@ -2295,13 +2393,31 @@
     }
   }
   .hover\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &:hover {
-      @media (hover: hover) {
-        :is(& *) {
-          &[data-slot="description"] {
-            color: var(--color-inverse-light);
-            --icon-color: var(--color-inverse-light);
-          }
+    &[data-hovered], &:hover {
+      :is(& *) {
+        &[data-slot="description"] {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
+    &[data-focused], &:focus {
+      :is(& *) {
+        &[data-slot="description"] {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      :is(& *) {
+        &[data-slot="description"] {
+          color: var(--color-disabled);
+          --icon-color: var(--color-disabled);
         }
       }
     }
@@ -2316,182 +2432,170 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .dtk-orientation-horizontal\:flex-col {
+  .orientation-horizontal\:flex-col {
     &[data-orientation="horizontal"] {
       flex-direction: column;
     }
   }
-  .dtk-orientation-horizontal\:flex-row {
+  .orientation-horizontal\:flex-row {
     &[data-orientation="horizontal"] {
       flex-direction: row;
     }
   }
-  .dtk-orientation-vertical\:gap-xs {
-    &[data-orientation="vertical"] {
-      gap: var(--spacing-xs);
-    }
-  }
-  .dtk-hover\:bg-normal {
-    &[data-hovered] {
-      background-color: var(--color-normal);
-    }
-  }
-  .dtk-focus\:bg-highlight-bold {
-    &[data-focused] {
-      background-color: var(--color-highlight-bold);
+  .orientation-horizontal\:flex-wrap {
+    &[data-orientation="horizontal"] {
+      flex-wrap: wrap;
     }
   }
-  .dtk-focus\:bg-serious-bold {
-    &[data-focused] {
-      background-color: var(--color-serious-bold);
+  .orientation-vertical\:flex-col {
+    &[data-orientation="vertical"] {
+      flex-direction: column;
     }
   }
-  .dtk-focus\:fg-inverse-light {
-    &[data-focused] {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+  .orientation-vertical\:gap-xs {
+    &[data-orientation="vertical"] {
+      gap: var(--spacing-xs);
     }
   }
-  .dtk-focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &[data-focused] {
-      :is(& *) {
-        &[data-slot="description"] {
-          color: var(--color-inverse-light);
-          --icon-color: var(--color-inverse-light);
-        }
+  .enabled\:selected\:bg-critical-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        background-color: var(--color-critical-subtle);
       }
     }
   }
-  .dtk-pressed\:bg-critical-hover {
-    &[data-pressed] {
-      background-color: var(--color-critical-hover);
-    }
-  }
-  .dtk-pressed\:bg-interactive-hover-dark {
-    &[data-pressed] {
-      background-color: var(--color-interactive-hover-dark);
-    }
-  }
-  .dtk-pressed\:bg-interactive-hover-light {
-    &[data-pressed] {
-      background-color: var(--color-interactive-hover-light);
-    }
-  }
-  .dtk-pressed\:bg-serious-hover {
-    &[data-pressed] {
-      background-color: var(--color-serious-hover);
-    }
-  }
-  .dtk-pressed\:bg-transparent {
-    &[data-pressed] {
-      background-color: transparent;
-    }
-  }
-  .dtk-pressed\:outline-interactive-hover {
-    &[data-pressed] {
-      outline-color: var(--color-interactive-hover);
-    }
-  }
-  .dtk-pressed\:icon-default-light {
-    &[data-pressed] {
-      --icon-color: var(--color-default-light);
-    }
-  }
-  .dtk-selected\:cursor-default {
-    &[data-selected] {
-      cursor: default;
+  .enabled\:selected\:bg-highlight-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        background-color: var(--color-highlight-subtle);
+      }
     }
   }
-  .dtk-selected\:bg-highlight-subtle {
-    &[data-selected] {
-      background-color: var(--color-highlight-subtle);
+  .enabled\:selected\:bg-info-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        background-color: var(--color-info-subtle);
+      }
     }
   }
-  .dtk-selected\:bg-transparent {
-    &[data-selected] {
-      background-color: transparent;
+  .enabled\:selected\:bg-serious-subtle {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        background-color: var(--color-serious-subtle);
+      }
     }
   }
-  .dtk-selected\:outline-highlight {
-    &[data-selected] {
-      outline-color: var(--color-highlight);
+  .enabled\:selected\:fg-highlight {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        color: var(--color-highlight);
+        --icon-color: var(--color-highlight);
+      }
     }
   }
-  .dtk-selected\:outline-interactive-disabled {
-    &[data-selected] {
-      outline-color: var(--color-interactive-disabled);
+  .enabled\:selected\:outline-highlight {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        outline-color: var(--color-highlight);
+      }
     }
   }
-  .dtk-selected\:icon-highlight {
-    &[data-selected] {
-      --icon-color: var(--color-highlight);
+  .enabled\:selected\:hover\:bg-critical-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-hovered], &:hover {
+          background-color: var(--color-critical-hover);
+        }
+      }
     }
   }
-  .dtk-selected\:hover\:bg-highlight-subtle {
-    &[data-selected] {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-highlight-subtle);
+  .enabled\:selected\:hover\:bg-interactive-hover-light {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-hovered], &:hover {
+          background-color: var(--color-interactive-hover-light);
         }
       }
     }
   }
-  .dtk-selected\:hover\:bg-transparent {
-    &[data-selected] {
-      &:hover {
-        @media (hover: hover) {
-          background-color: transparent;
+  .enabled\:selected\:hover\:bg-serious-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-hovered], &:hover {
+          background-color: var(--color-serious-hover);
         }
       }
     }
   }
-  .dtk-selected\:focus\:bg-highlight-subtle {
-    &[data-selected] {
-      &:focus {
-        background-color: var(--color-highlight-subtle);
+  .enabled\:selected\:hover\:fg-highlight {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-hovered], &:hover {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
       }
     }
   }
-  .dtk-selected\:focus\:bg-transparent {
-    &[data-selected] {
-      &:focus {
-        background-color: transparent;
+  .enabled\:selected\:hover\:outline-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-hovered], &:hover {
+          outline-color: var(--color-interactive-hover);
+        }
       }
     }
   }
-  .dtk-disabled\:cursor-default {
-    &[data-disabled] {
-      cursor: default;
+  .enabled\:selected\:focus\:bg-critical-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-focused], &:focus {
+          background-color: var(--color-critical-hover);
+        }
+      }
     }
   }
-  .dtk-disabled\:cursor-not-allowed {
-    &[data-disabled] {
-      cursor: not-allowed;
+  .enabled\:selected\:focus\:bg-interactive-hover-light {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-focused], &:focus {
+          background-color: var(--color-interactive-hover-light);
+        }
+      }
     }
   }
-  .dtk-disabled\:bg-transparent {
-    &[data-disabled] {
-      background-color: transparent;
+  .enabled\:selected\:focus\:bg-serious-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-focused], &:focus {
+          background-color: var(--color-serious-hover);
+        }
+      }
     }
   }
-  .dtk-disabled\:fg-disabled {
-    &[data-disabled] {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+  .enabled\:selected\:focus\:fg-highlight {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-focused], &:focus {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
+      }
     }
   }
-  .dtk-disabled\:text-interactive-disabled {
-    &[data-disabled] {
-      color: var(--color-interactive-disabled);
+  .enabled\:selected\:focus\:outline-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-selected] {
+        &[data-focused], &:focus {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .dtk-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
-    &[data-disabled] {
-      :is(& *) {
-        &[data-slot="description"] {
-          color: var(--color-disabled);
-          --icon-color: var(--color-disabled);
-        }
+  .disabled\:selected\:bg-interactive-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      &[data-selected] {
+        background-color: var(--color-interactive-disabled);
       }
     }
   }
@@ -2527,15 +2631,6 @@
       }
     }
   }
-  .\[\&\:empty\]\:before\:content-\[\'Missing_Classification\'\] {
-    &:empty {
-      &::before {
-        content: var(--tw-content);
-        --tw-content: 'Missing Classification';
-        content: var(--tw-content);
-      }
-    }
-  }
   .\[\&\:empty\]\:before\:content-\[\'Secret\'\] {
     &:empty {
       &::before {
@@ -2563,11 +2658,11 @@
       }
     }
   }
-  .\[\&\:empty\]\:before\:content-\[\'Top_Secret\/\/SCI\'\] {
+  .\[\&\:empty\]\:before\:content-\[\'Top_Secret\/SCI\'\] {
     &:empty {
       &::before {
         content: var(--tw-content);
-        --tw-content: 'Top Secret//SCI';
+        --tw-content: 'Top Secret/SCI';
         content: var(--tw-content);
       }
     }
@@ -2614,10 +2709,10 @@
   }
   .\[\&\>\*\]\:text-header-m {
     &>* {
-      font-size: var(--header-m-size);
+      font-size: var(--typography-header-m-size);
       font-weight: 500;
       letter-spacing: 0.25px;
-      line-height: var(--header-m-height);
+      line-height: var(--typography-header-m-height);
     }
   }
   .\[\&\>\*\]\:leading-\[0\] {
@@ -2626,14 +2721,14 @@
       line-height: 0;
     }
   }
-  .dtk-orientation-horizontal\:\[\&\>\*\]\:pr-s {
+  .orientation-horizontal\:\[\&\>\*\]\:pr-s {
     &[data-orientation="horizontal"] {
       &>* {
         padding-right: var(--spacing-s);
       }
     }
   }
-  .dtk-orientation-horizontal\:\[\&\>\*\]\:pl-s {
+  .orientation-horizontal\:\[\&\>\*\]\:pl-s {
     &[data-orientation="horizontal"] {
       &>* {
         padding-left: var(--spacing-s);
@@ -2642,99 +2737,123 @@
   }
 }
 :root {
-  --neutral-01: #ffffff;
-  --neutral-02: #e6e6e6;
-  --neutral-03: #898989;
-  --neutral-04: #686868;
-  --neutral-05: #565656;
-  --neutral-06: #424242;
-  --neutral-07: #383838;
-  --neutral-08: #2f2f31;
-  --neutral-09: #222222;
-  --neutral-10: #0b0b0b;
-  --neutral-11: #FF0000;
-  --alpha-black-01: rgba(0, 0, 0, 0.08);
-  --alpha-black-02: rgba(0, 0, 0, 0.4);
-  --alpha-black-03: rgba(0, 0, 0, 0.8);
-  --alpha-white-01: rgba(255, 255, 255, 0.08);
-  --alpha-white-02: rgba(255, 255, 255, 0.4);
-  --alpha-white-03: rgba(255, 255, 255, 0.8);
-  --highlight-primary-01: #c9fdef;
-  --highlight-primary-02: #7df9d8;
-  --highlight-primary-03: #28f5be;
-  --highlight-primary-04: #189372;
-  --highlight-primary-05: #0a3d30;
-  --highlight-secondary-01: #c9f6fd;
-  --highlight-secondary-02: #7ee9f9;
-  --highlight-secondary-03: #28dcf5;
-  --highlight-secondary-04: #188493;
-  --highlight-secondary-05: #0a373d;
-  --highlight-tertiary-01: #f9c5e2;
-  --highlight-tertiary-02: #f174b9;
-  --highlight-tertiary-03: #e8178a;
-  --highlight-tertiary-04: #8a0e53;
-  --highlight-tertiary-05: #3a0623;
-  --utility-info-01: #e6e6e6;
-  --utility-info-02: #898989;
-  --utility-info-03: #686868;
-  --utility-info-04: #424244;
-  --utility-info-05: #222222;
-  --utility-advisory-01: #e0edff;
-  --utility-advisory-02: #a1caff;
-  --utility-advisory-03: #62a6ff;
-  --utility-advisory-04: #3a6499;
-  --utility-advisory-05: #142133;
-  --utility-normal-01: #d6f6e5;
-  --utility-normal-02: #82e4b2;
-  --utility-normal-03: #30d27e;
-  --utility-normal-04: #1c7e4c;
-  --utility-normal-05: #0a2a19;
-  --utility-serious-01: #feedcc;
-  --utility-serious-02: #fdc865;
-  --utility-serious-03: #fca400;
-  --utility-serious-04: #976201;
-  --utility-serious-05: #322100;
-  --utility-critical-01: #f6d3d2;
-  --utility-critical-02: #e57b77;
-  --utility-critical-03: #d4231d;
-  --utility-critical-04: #7f1511;
-  --utility-critical-05: #2a0706;
-  --classification-unclass: #007A33;
-  --classification-cui: #502b85;
-  --classification-confidential: #0033a0;
-  --classification-secret: #c8102e;
-  --classification-top-secret: #ff8c00;
-  --classification-ts-sci: #fce83a;
-  --header-xxl-size: 32px;
-  --header-xxl-height: 40px;
-  --header-xl-size: 24px;
-  --header-xl-height: 28px;
-  --header-l-size: 20px;
-  --header-l-height: 24px;
-  --header-m-size: 14px;
-  --header-m-height: 20px;
-  --header-s-size: 12px;
-  --header-s-height: 16px;
-  --header-xs-size: 10px;
-  --header-xs-height: 12px;
-  --body-l-size: 16px;
-  --body-l-height: 24px;
-  --body-m-size: 14px;
-  --body-m-height: 20px;
-  --body-s-size: 12px;
-  --body-s-height: 16px;
-  --body-xs-size: 10px;
-  --body-xs-height: 12px;
-  --body-xxs-size: 9px;
-  --body-xxs-height: 12px;
-  --button-l-size: 16px;
-  --button-l-height: 24px;
-  --button-m-size: 14px;
-  --button-m-height: 20px;
-  --button-s-size: 12px;
-  --button-s-height: 16px;
-  --button-xs-size: 10px;
-  --button-xs-height: 12px;
+  --colors-neutral-10: #0b0b0b;
+  --colors-neutral-11: #FF0000;
+  --colors-neutral-01: #ffffff;
+  --colors-neutral-02: #e6e6e6;
+  --colors-neutral-03: #898989;
+  --colors-neutral-04: #686868;
+  --colors-neutral-05: #565656;
+  --colors-neutral-06: #424242;
+  --colors-neutral-07: #383838;
+  --colors-neutral-08: #2f2f31;
+  --colors-neutral-09: #222222;
+  --colors-alpha-black-01: rgba(0, 0, 0, 0.08);
+  --colors-alpha-black-02: rgba(0, 0, 0, 0.4);
+  --colors-alpha-black-03: rgba(0, 0, 0, 0.8);
+  --colors-alpha-white-01: rgba(255, 255, 255, 0.08);
+  --colors-alpha-white-02: rgba(255, 255, 255, 0.4);
+  --colors-alpha-white-03: rgba(255, 255, 255, 0.8);
+  --colors-highlight-primary-01: #c9fdef;
+  --colors-highlight-primary-02: #7df9d8;
+  --colors-highlight-primary-03: #28f5be;
+  --colors-highlight-primary-04: #189372;
+  --colors-highlight-primary-05: #0a3d30;
+  --colors-highlight-secondary-01: #c9f6fd;
+  --colors-highlight-secondary-02: #7ee9f9;
+  --colors-highlight-secondary-03: #28dcf5;
+  --colors-highlight-secondary-04: #188493;
+  --colors-highlight-secondary-05: #0a373d;
+  --colors-highlight-tertiary-01: #f9c5e2;
+  --colors-highlight-tertiary-02: #f174b9;
+  --colors-highlight-tertiary-03: #e8178a;
+  --colors-highlight-tertiary-04: #8a0e53;
+  --colors-highlight-tertiary-05: #3a0623;
+  --colors-utility-info-01: #e6e6e6;
+  --colors-utility-info-02: #898989;
+  --colors-utility-info-03: #686868;
+  --colors-utility-info-04: #424244;
+  --colors-utility-info-05: #222222;
+  --colors-utility-advisory-01: #e0edff;
+  --colors-utility-advisory-02: #a1caff;
+  --colors-utility-advisory-03: #62a6ff;
+  --colors-utility-advisory-04: #3a6499;
+  --colors-utility-advisory-05: #142133;
+  --colors-utility-normal-01: #d6f6e5;
+  --colors-utility-normal-02: #82e4b2;
+  --colors-utility-normal-03: #30d27e;
+  --colors-utility-normal-04: #1c7e4c;
+  --colors-utility-normal-05: #0a2a19;
+  --colors-utility-serious-01: #feedcc;
+  --colors-utility-serious-02: #fdc865;
+  --colors-utility-serious-03: #fca400;
+  --colors-utility-serious-04: #976201;
+  --colors-utility-serious-05: #322100;
+  --colors-utility-critical-01: #f6d3d2;
+  --colors-utility-critical-02: #e57b77;
+  --colors-utility-critical-03: #d4231d;
+  --colors-utility-critical-04: #7f1511;
+  --colors-utility-critical-05: #2a0706;
+  --colors-classification-unclass: #007A33;
+  --colors-classification-cui: #502b85;
+  --colors-classification-confidential: #0033a0;
+  --colors-classification-secret: #c8102e;
+  --colors-classification-top-secret: #ff8c00;
+  --colors-classification-ts-sci: #fce83a;
+  --typography-header-xxl-size: 32px;
+  --typography-header-xxl-height: 40px;
+  --typography-header-xl-size: 24px;
+  --typography-header-xl-height: 28px;
+  --typography-header-l-size: 20px;
+  --typography-header-l-height: 24px;
+  --typography-header-m-size: 14px;
+  --typography-header-m-height: 20px;
+  --typography-header-s-size: 12px;
+  --typography-header-s-height: 16px;
+  --typography-header-xs-size: 10px;
+  --typography-header-xs-height: 12px;
+  --typography-body-l-size: 16px;
+  --typography-body-l-height: 24px;
+  --typography-body-m-size: 14px;
+  --typography-body-m-height: 20px;
+  --typography-body-s-size: 12px;
+  --typography-body-s-height: 16px;
+  --typography-body-xs-size: 10px;
+  --typography-body-xs-height: 12px;
+  --typography-body-xxs-size: 9px;
+  --typography-body-xxs-height: 12px;
+  --typography-button-l-size: 16px;
+  --typography-button-l-height: 24px;
+  --typography-button-m-size: 14px;
+  --typography-button-m-height: 20px;
+  --typography-button-s-size: 12px;
+  --typography-button-s-height: 16px;
+  --typography-button-xs-size: 10px;
+  --typography-button-xs-height: 12px;
+  --spacing-0: 0px;
+  --spacing-none: unset;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 12px;
+  --spacing-l: 16px;
+  --spacing-xl: 24px;
+  --spacing-xxl: 40px;
+  --spacing-oversized: 80px;
+  --radius-none: 0px;
+  --radius-small: 2px;
+  --radius-medium: 4px;
+  --radius-large: 8px;
+  --radius-round: 80px;
+  --shadows-elevation-default: initial;
+  --shadows-elevation-overlay: 0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14);
+  --shadows-elevation-raised: 0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14);
+  --font-primary: "Roboto Flex", sans-serif;
+  --font-display: "Roboto Mono", monospace;
+  --icons-size-l: var(--spacing-xl);
+  --icons-size-m: 20px;
+  --icons-size-s: var(--spacing-l);
+  --icons-size-xs: var(--spacing-m);
 }
 body {
   font-family: var(--font-primary);
@@ -2750,7 +2869,7 @@ body {
     top: 0;
     bottom: 0;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-image: repeating-linear-gradient(to bottom, var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
     background-position: left -1px, center;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;
@@ -2762,7 +2881,7 @@ body {
     top: 0;
     bottom: 50%;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom,var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-image: repeating-linear-gradient(to bottom,var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
     background-position: left -1px, bottom;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;
@@ -2774,7 +2893,7 @@ body {
     top: 0;
     bottom: 0;
     left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-image: repeating-linear-gradient(to bottom, var(--colors-neutral-04), var(--colors-neutral-04)), repeating-linear-gradient(to right, var(--colors-neutral-04), var(--colors-neutral-04));
     background-position: left -1px, center;
     background-repeat: repeat-y, repeat-x;
     background-size: 1px 4px, 4px 1px;