@infonomic/uikit 2.15.0 → 3.1.0

package/dist/components/button/copy-button_module.css

@@ -5,26 +5,45 @@
     display: inline-block;
   }
 
-  .copy-button-oa4bdj {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
+  .copy-button-oa4bdj svg {
+    width: 90%;
+    height: 90%;
+    display: block;
+  }
+
+  .xs-lZmf78 {
+    width: 26px;
+    height: 26px;
+    min-height: 26px;
+    padding: .25rem;
   }
 
-  .copy-button-foreground-peibK_ {
-    fill: var(--gray-700);
+  .sm-KNN1e5 {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+    padding: .35rem;
   }
 
-  .copy-button-foreground-reversed-oeTW7Z {
-    fill: var(--gray-200);
+  .md-OoH0l4 {
+    width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: .45rem;
   }
 
-  .dark-M9uAd8 .copy-button-foreground-peibK_ {
-    fill: var(--gray-200);
+  .lg-uu5ujz {
+    width: 46px;
+    height: 46px;
+    min-height: 46px;
+    padding: .55rem;
   }
 
-  .dark-M9uAd8 .copy-button-foreground-reversed-oeTW7Z {
-    fill: var(--gray-700);
+  .xl-pFYyrS {
+    width: 54px;
+    height: 54px;
+    min-height: 54px;
+    padding: .65rem;
   }
 }
 

package/dist/components/dropdown/dropdown_module.css

@@ -3,10 +3,10 @@
 @layer infonomic-components {
   .dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB {
     z-index: 20;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel-elevated);
     will-change: transform, opacity;
     border-width: var(--border-width-thin);
-    border-color: var(--border-color);
+    border-color: var(--surface-panel-border);
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-sm);
@@ -36,6 +36,8 @@
     gap: var(--gap-1);
     width: 100%;
     font-size: var(--font-size-sm);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
     cursor: default;
     border-radius: var(--border-radius-sm);
     outline: none;
@@ -45,27 +47,20 @@
   }
 
   .dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus, .dropdown-item-FFroRa[data-highlighted] {
-    background-color: var(--canvas-50);
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
   }
 
   .dropdown-separator-scM_7b {
-    background-color: var(--border-color);
+    background-color: var(--surface-panel-border);
     width: 90%;
     margin: 0 auto;
     margin: var(--spacing-1) 0;
     border-top-width: var(--border-width-thin);
-    border-top-color: var(--border-color);
+    border-top-color: var(--surface-panel-border);
     border-top-style: var(--border-style-solid);
   }
 
-  .dark .dropdown-content-oNxY22:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-subcontent-JZGnvB:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    background-color: var(--canvas-800);
-  }
-
-  .dark .dropdown-item-FFroRa:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-item-FFroRa:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-item-FFroRa[data-highlighted]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    background-color: var(--canvas-700);
-  }
-
   @keyframes slideUpAndFade-bRhQGn {
     from {
       opacity: 0;

package/dist/components/input/checkbox_module.css

@@ -102,115 +102,66 @@
   }
 
   .primary-mNSmqc {
-    --checkbox-variant-outlined-border: var(--primary-400);
-    --checkbox-variant-outlined: var(--primary-400);
-    --checkbox-variant-outlined-hover-border: var(--primary-500);
-    --checkbox-variant-outline-ring-color: var(--primary-400);
-    --checkbox-variant-filled: var(--primary-400);
+    --checkbox-variant-outlined-border: var(--fill-primary-strong);
+    --checkbox-variant-outlined: var(--fill-primary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-primary);
+    --checkbox-variant-filled: var(--fill-primary-strong);
+    --checkbox-icon-color: var(--text-on-primary);
   }
 
   .secondary-B96Jra {
-    --checkbox-variant-outlined-border: var(--secondary-500);
-    --checkbox-variant-outlined: var(--secondary-500);
-    --checkbox-variant-outlined-hover-border: var(--secondary-500);
-    --checkbox-variant-outline-ring-color: var(--secondary-500);
-    --checkbox-variant-filled: var(--secondary-500);
+    --checkbox-variant-outlined-border: var(--fill-secondary-strong);
+    --checkbox-variant-outlined: var(--fill-secondary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-secondary);
+    --checkbox-variant-filled: var(--fill-secondary-strong);
+    --checkbox-icon-color: var(--text-on-secondary);
   }
 
   .noeffect-J5I4Dv {
-    --checkbox-variant-outlined-border: var(--gray-400);
-    --checkbox-variant-outlined: var(--gray-400);
-    --checkbox-variant-outlined-hover-border: var(--gray-400);
-    --checkbox-variant-outline-ring-color: var(--gray-400);
-    --checkbox-variant-filled: var(--gray-400);
+    --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-noeffect);
+    --checkbox-variant-filled: var(--fill-noeffect-strong);
+    --checkbox-icon-color: var(--text-on-noeffect);
   }
 
   .success-LoZ4k7 {
-    --checkbox-variant-outlined-border: var(--green-400);
-    --checkbox-variant-outlined: var(--green-400);
-    --checkbox-variant-outlined-hover-border: var(--green-400);
-    --checkbox-variant-outline-ring-color: var(--green-400);
-    --checkbox-variant-filled: var(--green-400);
+    --checkbox-variant-outlined-border: var(--fill-success-strong);
+    --checkbox-variant-outlined: var(--fill-success-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-success);
+    --checkbox-variant-filled: var(--fill-success-strong);
+    --checkbox-icon-color: var(--text-on-success);
   }
 
   .info-NNf4yN {
-    --checkbox-variant-outlined-border: var(--blue-400);
-    --checkbox-variant-outlined: var(--blue-400);
-    --checkbox-variant-outlined-hover-border: var(--blue-400);
-    --checkbox-variant-outline-ring-color: var(--blue-400);
-    --checkbox-variant-filled: var(--blue-400);
+    --checkbox-variant-outlined-border: var(--fill-info-strong);
+    --checkbox-variant-outlined: var(--fill-info-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-info);
+    --checkbox-variant-filled: var(--fill-info-strong);
+    --checkbox-icon-color: var(--text-on-info);
   }
 
   .warning-eEgBnF {
-    --checkbox-variant-outlined-border: var(--yellow-400);
-    --checkbox-variant-outlined: var(--yellow-400);
-    --checkbox-variant-outlined-hover-border: var(--yellow-400);
-    --checkbox-variant-outline-ring-color: var(--yellow-400);
-    --checkbox-variant-filled: var(--yellow-400);
+    --checkbox-variant-outlined-border: var(--fill-warning-strong);
+    --checkbox-variant-outlined: var(--fill-warning-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-warning);
+    --checkbox-variant-filled: var(--fill-warning-strong);
+    --checkbox-icon-color: var(--text-on-warning);
   }
 
   .danger-FZ5wZH {
-    --checkbox-variant-outlined-border: var(--red-400);
-    --checkbox-variant-outlined: var(--red-400);
-    --checkbox-variant-outlined-hover-border: var(--red-400);
-    --checkbox-variant-outline-ring-color: var(--red-400);
-    --checkbox-variant-filled: var(--red-400);
-  }
-
-  .dark .primary-mNSmqc:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--primary-300);
-    --checkbox-variant-outlined: var(--primary-300);
-    --checkbox-variant-outlined-hover-border: var(--primary-500);
-    --checkbox-variant-outline-ring-color: var(--primary-300);
-    --checkbox-variant-filled: var(--primary-500);
-  }
-
-  .dark .secondary-B96Jra:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--secondary-500);
-    --checkbox-variant-outlined: var(--secondary-500);
-    --checkbox-variant-outlined-hover-border: var(--secondary-500);
-    --checkbox-variant-outline-ring-color: var(--secondary-500);
-    --checkbox-variant-filled: var(--secondary-500);
-  }
-
-  .dark .noeffect-J5I4Dv:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--gray-400);
-    --checkbox-variant-outlined: var(--gray-400);
-    --checkbox-variant-outlined-hover-border: var(--gray-400);
-    --checkbox-variant-outline-ring-color: var(--gray-400);
-    --checkbox-variant-filled: var(--gray-400);
-  }
-
-  .dark .success-LoZ4k7:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--green-400);
-    --checkbox-variant-outlined: var(--green-400);
-    --checkbox-variant-outlined-hover-border: var(--green-400);
-    --checkbox-variant-outline-ring-color: var(--green-400);
-    --checkbox-variant-filled: var(--green-400);
-  }
-
-  .dark .info-NNf4yN:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--blue-400);
-    --checkbox-variant-outlined: var(--blue-400);
-    --checkbox-variant-outlined-hover-border: var(--blue-400);
-    --checkbox-variant-outline-ring-color: var(--blue-400);
-    --checkbox-variant-filled: var(--blue-400);
-  }
-
-  .dark .warning-eEgBnF:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--yellow-400);
-    --checkbox-variant-outlined: var(--yellow-400);
-    --checkbox-variant-outlined-hover-border: var(--yellow-400);
-    --checkbox-variant-outline-ring-color: var(--yellow-400);
-    --checkbox-variant-filled: var(--yellow-400);
-  }
-
-  .dark .danger-FZ5wZH:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --checkbox-variant-outlined-border: var(--red-400);
-    --checkbox-variant-outlined: var(--red-400);
-    --checkbox-variant-outlined-hover-border: var(--red-400);
-    --checkbox-variant-outline-ring-color: var(--red-400);
-    --checkbox-variant-filled: var(--red-400);
+    --checkbox-variant-outlined-border: var(--fill-danger-strong);
+    --checkbox-variant-outlined: var(--fill-danger-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-danger);
+    --checkbox-variant-filled: var(--fill-danger-strong);
+    --checkbox-icon-color: var(--text-on-danger);
   }
 
   @keyframes checkBoxIn-yYID5l {

package/dist/components/input/help-text_module.css

@@ -2,12 +2,8 @@
 
 @layer infonomic-components {
   .text-cLsIw6 {
-    color: var(--gray-800);
+    color: var(--muted);
     font-size: .875rem;
   }
-
-  .dark .text-cLsIw6:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: var(--gray-300);
-  }
 }
 

package/dist/components/input/input_module.css

@@ -151,133 +151,66 @@
   }
 
   .primary-FIrC7m {
-    --input-variant-outlined-border: var(--primary-300);
-    --input-variant-outlined-hover-border: var(--primary-500);
-    --input-variant-outline-ring-color: var(--primary-300);
-    --input-variant-underlined-border: var(--primary-300);
-    --input-variant-underlined-hover-border: var(--primary-500);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
   }
 
   .secondary-LmtH1h {
-    --input-variant-outlined-border: var(--secondary-600);
-    --input-variant-outlined-hover-border: var(--secondary-800);
-    --input-variant-outline-ring-color: var(--secondary-600);
-    --input-variant-underlined-border: var(--secondary-600);
-    --input-variant-underlined-hover-border: var(--secondary-800);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
   }
 
   .noeffect-Kb93bb {
-    --input-variant-outlined-border: var(--gray-500);
-    --input-variant-outlined-hover-border: var(--gray-700);
-    --input-variant-outline-ring-color: var(--gray-700);
-    --input-variant-underlined-border: var(--gray-500);
-    --input-variant-underlined-hover-border: var(--gray-700);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
   }
 
   .success-fNk168 {
-    --input-variant-outlined-border: var(--green-300);
-    --input-variant-outlined-hover-border: var(--green-600);
-    --input-variant-outline-ring-color: var(--green-600);
-    --input-variant-underlined-border: var(--green-300);
-    --input-variant-underlined-hover-border: var(--green-600);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
   }
 
   .info-_CXlQd {
-    --input-variant-outlined-border: var(--blue-300);
-    --input-variant-outlined-hover-border: var(--blue-600);
-    --input-variant-outline-ring-color: var(--blue-300);
-    --input-variant-underlined-border: var(--blue-100);
-    --input-variant-underlined-hover-border: var(--blue-400);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
   }
 
   .warning-abMXZC {
-    --input-variant-outlined-border: var(--yellow-600);
-    --input-variant-outlined-hover-border: var(--yellow-800);
-    --input-variant-outline-ring-color: var(--yellow-600);
-    --input-variant-underlined-border: var(--yellow-600);
-    --input-variant-underlined-hover-border: var(--yellow-800);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
   }
 
   .danger-Q_LJPS {
-    --input-variant-outlined-border: var(--red-300);
-    --input-variant-outlined-hover-border: var(--red-600);
-    --input-variant-outline-ring-color: var(--red-600);
-    --input-variant-underlined-border: var(--red-300);
-    --input-variant-underlined-hover-border: var(--red-600);
-    --input-variant-filled: var(--gray-50);
-  }
-
-  .dark .input-ZoQqR8:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .input-ZoQqR8:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --ring-offset-color: var(--background);
-  }
-
-  .dark .primary-FIrC7m:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--primary-200);
-    --input-variant-outlined-hover-border: var(--primary-100);
-    --input-variant-outline-ring-color: var(--primary-200);
-    --input-variant-underlined-border: var(--primary-200);
-    --input-variant-underlined-hover-border: var(--primary-100);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .secondary-LmtH1h:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--secondary-600);
-    --input-variant-outlined-hover-border: var(--secondary-400);
-    --input-variant-outline-ring-color: var(--secondary-600);
-    --input-variant-underlined-border: var(--secondary-600);
-    --input-variant-underlined-hover-border: var(--secondary-400);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .noeffect-Kb93bb:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--gray-500);
-    --input-variant-outlined-hover-border: var(--gray-300);
-    --input-variant-outline-ring-color: var(--gray-400);
-    --input-variant-underlined-border: var(--gray-500);
-    --input-variant-underlined-hover-border: var(--gray-300);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .success-fNk168:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--green-500);
-    --input-variant-outlined-hover-border: var(--green-300);
-    --input-variant-outline-ring-color: var(--green-400);
-    --input-variant-underlined-border: var(--green-500);
-    --input-variant-underlined-hover-border: var(--green-300);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .info-_CXlQd:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--blue-500);
-    --input-variant-outlined-hover-border: var(--blue-300);
-    --input-variant-outline-ring-color: var(--blue-400);
-    --input-variant-underlined-border: var(--blue-500);
-    --input-variant-underlined-hover-border: var(--blue-300);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .warning-abMXZC:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--yellow-500);
-    --input-variant-outlined-hover-border: var(--yellow-300);
-    --input-variant-outline-ring-color: var(--yellow-400);
-    --input-variant-underlined-border: var(--yellow-500);
-    --input-variant-underlined-hover-border: var(--yellow-300);
-    --input-variant-filled: var(--canvas-800);
-  }
-
-  .dark .danger-Q_LJPS:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --input-variant-outlined-border: var(--red-500);
-    --input-variant-outlined-hover-border: var(--red-300);
-    --input-variant-outline-ring-color: var(--red-400);
-    --input-variant-underlined-border: var(--red-500);
-    --input-variant-underlined-hover-border: var(--red-500);
-    --input-variant-filled: var(--canvas-800);
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
   }
 }
 

package/dist/components/input/radio-group_module.css

@@ -82,73 +82,38 @@
   }
 
   .primary-W2P_QT {
-    --radio-border: var(--primary-400);
-    --radio-indicator-color: var(--primary-400);
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
   }
 
   .secondary-PWYoVU {
-    --radio-border: var(--secondary-400);
-    --radio-indicator-color: var(--secondary-400);
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
   }
 
   .noeffect-In5gxi {
-    --radio-border: var(--gray-400);
-    --radio-indicator-color: var(--gray-400);
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
   .success-R2Jb22 {
-    --radio-border: var(--green-400);
-    --radio-indicator-color: var(--green-400);
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
   }
 
   .info-A_p4DP {
-    --radio-border: var(--blue-400);
-    --radio-indicator-color: var(--blue-400);
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
   }
 
   .warning-MWFrsJ {
-    --radio-border: var(--yellow-400);
-    --radio-indicator-color: var(--yellow-400);
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
   }
 
   .danger-Lk8pek {
-    --radio-border: var(--red-400);
-    --radio-indicator-color: var(--red-400);
-  }
-
-  .dark .primary-W2P_QT:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--primary-300);
-    --radio-indicator-color: var(--primary-300);
-  }
-
-  .dark .secondary-PWYoVU:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--secondary-500);
-    --radio-indicator-color: var(--secondary-500);
-  }
-
-  .dark .noeffect-In5gxi:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    ---radio-border: var(--gray-400);
-    --radio-indicator-color: var(--gray-400);
-  }
-
-  .dark .success-R2Jb22:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--green-400);
-    --radio-indicator-color: var(--green-400);
-  }
-
-  .dark .info-A_p4DP:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--blue-400);
-    --radio-indicator-color: var(--blue-400);
-  }
-
-  .dark .warning-MWFrsJ:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--yellow-400);
-    --radio-indicator-color: var(--yellow-400);
-  }
-
-  .dark .danger-Lk8pek:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    --radio-border: var(--red-400);
-    --radio-indicator-color: var(--red-400);
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
   }
 
   @keyframes radioIn-L_nBcr {

package/dist/components/input/select_module.css

@@ -7,42 +7,35 @@
 
   .viewport-EJrpcl {
     z-index: 50;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    background-color: var(--background);
+    background-color: var(--surface-panel-elevated);
     margin-top: 2px;
     padding: 6px;
   }
 
-  .viewport-EJrpcl:is(.dark *) {
-    background: var(--canvas-800);
-  }
-
   .group-gZB9XW {
     z-index: 50;
   }
 
   .scroll-button-ugUv7N {
-    color: var(--text);
-    border: 1px solid var(--border-color);
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    background-color: var(--background);
+    background-color: var(--surface-panel-elevated);
     justify-content: center;
     align-items: center;
     padding: 2px;
     display: flex;
   }
 
-  .scroll-button-ugUv7N:is(.dark *) {
-    background: var(--canvas-800);
-  }
-
   .select-item-PN2sc4 {
     -webkit-user-select: none;
     user-select: none;
-    color: var(--text);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
     border-radius: 6px;
     align-items: center;
     height: 32px;
@@ -55,13 +48,13 @@
   }
 
   .select-item-PN2sc4[data-disabled] {
-    color: var(--disabled-text-color, #e0e0e0);
+    color: var(--surface-item-text-disabled);
     pointer-events: none;
   }
 
   .select-item-PN2sc4[data-highlighted] {
-    background-color: var(--highlight-bg-color, #e0e0e0);
-    color: var(--highlight-text-color, #000);
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
     outline: none;
   }
 

package/dist/components/notifications/alert_module.css

@@ -42,10 +42,6 @@
     display: flex;
   }
 
-  .close-BUVZO7 svg {
-    fill: #fff;
-  }
-
   .fade-VGuhOJ {
     opacity: 0;
     transition: opacity .4s ease-in-out;