@orcestr/ui 0.1.0 → 0.2.0

package/dist/styles/orcestr-ui.css

@@ -60,8 +60,9 @@
   --oui-pad-hover-bg: #0000000f;
   --oui-pad-opacity: 100%;
   --oui-pad-hover-opacity: 100%;
-  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 78%, var(--oui-text) 22%);
-  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 68%, var(--oui-text) 32%);
+  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 95%, var(--oui-text) 5%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 92%, var(--oui-text) 8%);
+  --oui-scrollbar-track: transparent;
   --oui-skeleton-shimmer: rgb(255 255 255 / 18%);
   --oui-shadow-sm: inset 0 0 0 1px #0000001f, inset 0 1.5px 2px 0 #00000006, inset 0 1.5px 2px 0 rgb(0 0 0 / 10%);
   --oui-shadow-md: 0 0 0 1px #0000000f, 0 2px 3px -2px #0000000f, 0 3px 12px -4px rgb(0 0 0 / 10%), 0 4px 16px -8px rgb(0 0 0 / 10%);
@@ -88,12 +89,6 @@
   --oui-state-loading-opacity: .78;
   --oui-state-selected-opacity: .15;
   --oui-state-focus-ring-width: 3px;
-  --oui-panel-solid: #ffffff;
-  --oui-gray-3: #f0f0f0;
-  --oui-gray-a3: #0000000f;
-  --oui-gray-a4: #00000017;
-  --oui-gray-a5: #0000001f;
-  --oui-gray-a8: #00000044;
   --oui-shadow-soft: rgb(0 0 0 / 12%);
   color: var(--oui-text);
   color-scheme: light;
@@ -164,18 +159,13 @@
   --oui-pad-hover-bg: #ffffff12;
   --oui-pad-opacity: 100%;
   --oui-pad-hover-opacity: 100%;
-  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 82%, var(--oui-text) 18%);
-  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 74%, var(--oui-text) 26%);
+  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 96%, var(--oui-text) 4%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 93%, var(--oui-text) 7%);
+  --oui-scrollbar-track: transparent;
   --oui-skeleton-shimmer: #ffffff12;
   --oui-shadow-sm: inset 0 -1px 1px 0 #ffffff12, inset 0 0 0 1px #ffffff12, inset 0 3px 4px 0 rgb(0 0 0 / 30%), inset 0 0 0 1px #ffffff1b;
   --oui-shadow-md: 0 0 0 1px #ffffff2c, 0 2px 3px -2px rgb(0 0 0 / 15%), 0 3px 8px -2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%);
   --oui-ring: 0 0 0 3px #0075ff57;
-  --oui-panel-solid: var(--oui-panel);
-  --oui-gray-3: #222222;
-  --oui-gray-a3: #ffffff12;
-  --oui-gray-a4: #ffffff1b;
-  --oui-gray-a5: #ffffff22;
-  --oui-gray-a8: #ffffff55;
   --oui-shadow-soft: rgb(0 0 0 / 48%);
   color-scheme: dark;
 }
@@ -255,95 +245,41 @@
   color: var(--oui-muted);
 }
 
-.oui-text-blue {
-  color: var(--blue-11, var(--oui-text));
-}
-
-.oui-text-sky {
-  color: var(--sky-11, var(--oui-text));
-}
-
-.oui-text-cyan {
-  color: var(--cyan-11, var(--oui-text));
-}
-
-.oui-text-teal {
-  color: var(--teal-11, var(--oui-text));
-}
-
-.oui-text-indigo {
-  color: var(--indigo-11, var(--oui-text));
-}
-
-.oui-text-violet {
-  color: var(--violet-11, var(--oui-text));
-}
-
-.oui-text-purple {
-  color: var(--purple-11, var(--oui-text));
-}
-
-.oui-text-iris {
-  color: var(--iris-11, var(--oui-text));
+.oui-text-gray {
+  color: var(--oui-neutral-text);
 }
 
 .oui-text-green {
-  color: var(--green-11, var(--oui-text));
-}
-
-.oui-text-jade {
-  color: var(--jade-11, var(--oui-text));
-}
-
-.oui-text-mint {
-  color: var(--mint-11, var(--oui-text));
-}
-
-.oui-text-grass {
-  color: var(--grass-11, var(--oui-text));
-}
-
-.oui-text-lime {
-  color: var(--lime-11, var(--oui-text));
+  color: var(--oui-success-text);
 }
 
 .oui-text-yellow {
-  color: var(--yellow-11, var(--oui-text));
-}
-
-.oui-text-amber {
-  color: var(--amber-11, var(--oui-text));
+  color: var(--oui-warning-text);
 }
 
 .oui-text-orange {
-  color: var(--orange-11, var(--oui-text));
-}
-
-.oui-text-brown {
-  color: var(--brown-11, var(--oui-text));
+  color: var(--oui-warning-text);
 }
 
 .oui-text-red {
-  color: var(--red-11, var(--oui-text));
-}
-
-.oui-text-ruby {
-  color: var(--ruby-11, var(--oui-text));
+  color: var(--oui-danger-text);
 }
 
-.oui-text-crimson {
-  color: var(--crimson-11, var(--oui-text));
+.oui-text-blue {
+  color: var(--oui-info-text);
 }
 
-.oui-text-pink {
-  color: var(--pink-11, var(--oui-text));
+.oui-text-cyan {
+  color: var(--oui-info-text);
 }
 
-.oui-text-tomato {
-  color: var(--tomato-11, var(--oui-text));
+.oui-text-purple {
+  color: var(--oui-primary-text);
 }
 
 .oui-app-shell {
+  position: relative;
+  isolation: isolate;
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
@@ -354,16 +290,20 @@
 
 .oui-app-shell-frame {
   display: grid;
+  width: 100%;
   grid-template-columns: minmax(220px, var(--oui-app-shell-sidebar-width, 260px)) minmax(0, 1fr);
   gap: 0;
   height: calc(100vh - var(--oui-app-shell-inset, 28px) * 2);
   min-height: 0;
   max-width: var(--oui-app-shell-max-width, 1440px);
   margin: 0 auto;
+  transition: grid-template-columns 340ms ease;
 }
 
 .oui-app-shell-main {
   display: flex;
+  grid-column: 2;
+  grid-row: 1;
   min-width: 0;
   height: 100%;
   min-height: 0;
@@ -372,15 +312,64 @@
 }
 
 .oui-app-shell-sidebar-desktop {
+  grid-column: 1;
+  grid-row: 1;
+  width: 100%;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
+  transform: translateX(0);
+  transition: transform 340ms ease, opacity 220ms ease;
+}
+
+.oui-app-shell-drawer-root {
+  position: absolute;
+  inset: 0;
+  z-index: 80;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.oui-app-shell-drawer-root .oui-drawer-layer {
+  position: absolute;
+  inset: 0;
+}
+
+.oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-sidebar-desktop {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--oui-app-shell-sidebar-width, 260px) * -1));
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-frame {
+  grid-template-columns: minmax(0, 1fr) minmax(220px, var(--oui-app-shell-sidebar-width, 260px));
+}
+
+.oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: minmax(0, 1fr) 0;
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-sidebar-desktop {
+  grid-column: 2;
+}
+
+.oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-sidebar-desktop {
+  transform: translateX(var(--oui-app-shell-sidebar-width, 260px));
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-main {
+  grid-column: 1;
 }
 
 .oui-app-shell-header {
   position: relative;
   z-index: 65;
   display: flex;
-  min-height: 56px;
+  min-height: var(--oui-app-shell-header-h, 56px);
   align-items: center;
   justify-content: space-between;
   gap: 10px;
@@ -393,6 +382,10 @@
   display: none;
 }
 
+.oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+  display: none;
+}
+
 .oui-app-shell-header-title {
   min-width: 0;
   flex: 1 1 auto;
@@ -409,6 +402,7 @@
   flex: 0 0 auto;
   align-items: center;
   gap: 8px;
+  margin-left: auto;
 }
 
 .oui-app-shell-sidebar {
@@ -666,6 +660,179 @@
   gap: 8px;
 }
 
+.oui-app-shell[data-sidebar-mode=mobile] {
+  padding: 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header {
+  min-height: var(--oui-app-shell-header-h, 48px);
+  gap: 8px;
+  padding: 6px 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header > .oui-icon-button {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  align-self: center;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-frame {
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  max-width: none;
+  margin: 0;
+  transition: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile][data-sidebar-side=right] .oui-app-shell-frame,
+.oui-app-shell[data-sidebar-mode=mobile][data-desktop-sidebar-open=false] .oui-app-shell-frame,
+.oui-app-shell[data-sidebar-mode=mobile][data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: 1fr;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header[data-visibility=mobile] {
+  display: flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+  display: inline-flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-desktop {
+  display: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-main {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-backdrop.oui-app-shell-sidebar-drawer-overlay {
+  background: transparent;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left],
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+  width: min(88vw, max(var(--oui-drawer-size, 300px), 300px));
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
+  border-radius: 0 14px 14px 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body {
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+  padding: 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+  width: 100%;
+  height: 100%;
+  border-radius: 0 14px 14px 0;
+  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+  border-radius: 14px 0 0 14px;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-head {
+  flex: 0 0 48px;
+  min-height: 48px;
+  border-bottom: 0;
+  padding: 0 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-content {
+  padding: 6px 8px 12px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-indicator {
+  right: 8px;
+  left: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-groups,
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-group {
+  gap: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-item {
+  padding: 0 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-footer {
+  padding: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+  width: 100%;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  --oui-app-shell-sidebar-head-pad: 8px;
+  --oui-app-shell-sidebar-body-pad: 6px 8px 12px;
+  --oui-app-shell-sidebar-footer-pad: 8px;
+  border-radius: 0 14px 14px 0;
+  background: var(--oui-bg);
+  box-shadow: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-separator {
+  margin: 0 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar::before {
+  display: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar .oui-app-shell-sidebar-close {
+  display: inline-flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
+  scroll-padding: 12px 10px 18px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-content {
+  padding: 12px 10px 18px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-page-title-block {
+  flex-direction: column;
+  gap: 10px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-page-title-actions {
+  justify-content: flex-start;
+}
+
 @media (max-width: 860px) {
   .oui-app-shell {
     padding: 0;
@@ -689,10 +856,19 @@
     grid-template-rows: minmax(0, 1fr);
     max-width: none;
     margin: 0;
+    transition: none;
+  }
+  .oui-app-shell[data-sidebar-side=right] .oui-app-shell-frame,
+  .oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-frame,
+  .oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+    grid-template-columns: 1fr;
   }
   .oui-app-shell-header[data-visibility=mobile] {
     display: flex;
   }
+  .oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+    display: inline-flex;
+  }
   .oui-app-shell-sidebar-desktop {
     display: none;
   }
@@ -703,22 +879,35 @@
   .oui-drawer-backdrop.oui-app-shell-sidebar-drawer-overlay {
     background: transparent;
   }
-  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left],
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
     width: min(88vw, max(var(--oui-drawer-size, 300px), 300px));
-    background: var(--color-background, var(--oui-bg));
+    background: transparent;
     border: 0;
+    box-shadow: none;
+  }
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
     border-radius: 0 14px 14px 0;
-    box-shadow: 14px 0 38px rgba(0, 0, 0, 0.24);
+  }
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+    border-radius: 14px 0 0 14px;
   }
   .oui-app-shell-sidebar-drawer-body {
     display: flex;
     min-height: 0;
+    overflow: hidden;
+    background: transparent;
     padding: 0;
   }
   .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
     width: 100%;
     height: 100%;
     border-radius: 0 14px 14px 0;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
+  }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+    border-radius: 14px 0 0 14px;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
   }
   .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-head {
     flex: 0 0 48px;
@@ -746,17 +935,23 @@
   .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
     width: 100%;
   }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+    border-radius: 14px 0 0 14px;
+  }
   .oui-app-shell-sidebar {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     max-height: none;
     --oui-app-shell-sidebar-head-pad: 8px;
     --oui-app-shell-sidebar-body-pad: 6px 8px 12px;
     --oui-app-shell-sidebar-footer-pad: 8px;
     border-radius: 0 14px 14px 0;
-    background: var(--color-background, var(--oui-bg));
+    background: var(--oui-bg);
     box-shadow: none;
   }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar {
+    border-radius: 14px 0 0 14px;
+  }
   .oui-app-shell-sidebar-separator {
     margin: 0 8px;
   }
@@ -787,19 +982,19 @@
   flex-direction: column;
   overflow: hidden;
   color: var(--oui-text);
-  background: var(--color-background, var(--oui-bg));
+  background: var(--oui-bg);
 }
 
 .oui-app-sidebar-head {
   display: flex;
-  flex: 0 0 61px;
-  min-height: 61px;
+  flex: 0 0 var(--oui-app-shell-header-h, 61px);
+  min-height: var(--oui-app-shell-header-h, 61px);
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  border-bottom: 1px solid var(--gray-a4, var(--oui-border));
+  border-bottom: 1px solid var(--oui-border);
   padding: 0 16px;
-  background: var(--color-background, var(--oui-bg));
+  background: var(--oui-bg);
 }
 
 .oui-app-sidebar[data-side=right] .oui-app-sidebar-head {
@@ -874,11 +1069,19 @@
   z-index: 0;
   height: var(--oui-app-sidebar-item-h, 40px);
   border-radius: var(--radius-3, var(--oui-radius-sm));
-  background: var(--gray-a4, var(--oui-soft));
+  background: var(--oui-soft);
   opacity: 0;
   pointer-events: none;
   transform: translateY(0);
-  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
+  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), height 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
+}
+
+.oui-app-sidebar-indicator:not([data-ready=true]) {
+  transition: none;
+}
+
+.oui-app-sidebar-indicator[data-ready=true] {
+  opacity: 1;
 }
 
 .oui-app-sidebar-groups {
@@ -919,7 +1122,7 @@
   border: 0;
   border-radius: var(--radius-3, var(--oui-radius-sm));
   padding: 0 12px;
-  color: var(--gray-11, var(--oui-muted));
+  color: var(--oui-muted);
   background: transparent;
   font: inherit;
   text-align: left;
@@ -935,7 +1138,7 @@
 
 .oui-app-sidebar-item:hover,
 .oui-app-sidebar-item:focus-visible {
-  color: var(--gray-12, var(--oui-text));
+  color: var(--oui-text);
   outline: none;
 }
 
@@ -944,7 +1147,7 @@
 }
 
 .oui-app-sidebar-item[data-sidebar-active=true] {
-  color: var(--gray-12, var(--oui-text));
+  color: var(--oui-text);
 }
 
 .oui-app-sidebar-item:disabled {
@@ -1084,14 +1287,14 @@
   border-radius: 999px;
   padding: 0 4px;
   font-size: 11px;
-  font-weight: 650;
+  font-weight: 500;
   line-height: 1;
   pointer-events: none;
 }
 
 .oui-icon-button-badge[data-tone=neutral] {
   color: var(--oui-text);
-  background: var(--oui-gray-a3, var(--oui-soft));
+  background: var(--oui-pad-bg);
 }
 
 .oui-icon-button-badge[data-tone=primary] {
@@ -1124,114 +1327,44 @@
   background: var(--oui-info-surface);
 }
 
-.oui-icon-button-badge[data-tone=blue] {
-  color: var(--blue-11, var(--oui-text));
-  background: var(--blue-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=sky] {
-  color: var(--sky-11, var(--oui-text));
-  background: var(--sky-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=cyan] {
-  color: var(--cyan-11, var(--oui-text));
-  background: var(--cyan-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=teal] {
-  color: var(--teal-11, var(--oui-text));
-  background: var(--teal-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=indigo] {
-  color: var(--indigo-11, var(--oui-text));
-  background: var(--indigo-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=violet] {
-  color: var(--violet-11, var(--oui-text));
-  background: var(--violet-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=purple] {
-  color: var(--purple-11, var(--oui-text));
-  background: var(--purple-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=iris] {
-  color: var(--iris-11, var(--oui-text));
-  background: var(--iris-a3, var(--oui-soft));
+.oui-icon-button-badge[data-tone=gray] {
+  color: var(--oui-neutral-text);
+  background: var(--oui-neutral-surface);
 }
 
 .oui-icon-button-badge[data-tone=green] {
-  color: var(--green-11, var(--oui-text));
-  background: var(--green-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=jade] {
-  color: var(--jade-11, var(--oui-text));
-  background: var(--jade-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=mint] {
-  color: var(--mint-11, var(--oui-text));
-  background: var(--mint-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=grass] {
-  color: var(--grass-11, var(--oui-text));
-  background: var(--grass-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=lime] {
-  color: var(--lime-11, var(--oui-text));
-  background: var(--lime-a3, var(--oui-soft));
+  color: var(--oui-success-text);
+  background: var(--oui-success-surface);
 }
 
 .oui-icon-button-badge[data-tone=yellow] {
-  color: var(--yellow-11, var(--oui-text));
-  background: var(--yellow-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=amber] {
-  color: var(--amber-11, var(--oui-text));
-  background: var(--amber-a3, var(--oui-soft));
+  color: var(--oui-warning-text);
+  background: var(--oui-warning-surface);
 }
 
 .oui-icon-button-badge[data-tone=orange] {
-  color: var(--orange-11, var(--oui-text));
-  background: var(--orange-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=brown] {
-  color: var(--brown-11, var(--oui-text));
-  background: var(--brown-a3, var(--oui-soft));
+  color: var(--oui-warning-text);
+  background: var(--oui-warning-surface);
 }
 
 .oui-icon-button-badge[data-tone=red] {
-  color: var(--red-11, var(--oui-text));
-  background: var(--red-a3, var(--oui-soft));
-}
-
-.oui-icon-button-badge[data-tone=ruby] {
-  color: var(--ruby-11, var(--oui-text));
-  background: var(--ruby-a3, var(--oui-soft));
+  color: var(--oui-danger-text);
+  background: var(--oui-danger-surface);
 }
 
-.oui-icon-button-badge[data-tone=crimson] {
-  color: var(--crimson-11, var(--oui-text));
-  background: var(--crimson-a3, var(--oui-soft));
+.oui-icon-button-badge[data-tone=blue] {
+  color: var(--oui-info-text);
+  background: var(--oui-info-surface);
 }
 
-.oui-icon-button-badge[data-tone=pink] {
-  color: var(--pink-11, var(--oui-text));
-  background: var(--pink-a3, var(--oui-soft));
+.oui-icon-button-badge[data-tone=cyan] {
+  color: var(--oui-info-text);
+  background: var(--oui-info-surface);
 }
 
-.oui-icon-button-badge[data-tone=tomato] {
-  color: var(--tomato-11, var(--oui-text));
-  background: var(--tomato-a3, var(--oui-soft));
+.oui-icon-button-badge[data-tone=purple] {
+  color: var(--oui-primary-text);
+  background: var(--oui-primary-surface);
 }
 
 .oui-button-full {
@@ -1321,7 +1454,7 @@
 .oui-button[data-tone=neutral][data-variant=soft],
 .oui-icon-button[data-tone=neutral][data-variant=soft] {
   color: var(--oui-text);
-  background: var(--oui-gray-a3, var(--oui-control-hover-bg));
+  background: var(--oui-pad-bg);
   border-color: transparent;
 }
 
@@ -1336,7 +1469,7 @@
 .oui-button[data-tone=neutral][data-variant=outline],
 .oui-icon-button[data-tone=neutral][data-variant=outline] {
   color: var(--oui-text);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
 }
 
 .oui-button[data-tone=neutral][data-variant=ghost],
@@ -1354,7 +1487,7 @@
 .oui-icon-button[data-variant=pad]:not(:disabled):hover,
 .oui-icon-button[data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-variant=ghost]:not(:disabled):hover {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft-hover)));
+  background: var(--oui-control-hover-bg, var(--oui-soft-hover));
 }
 
 .oui-button[data-tone=neutral][data-variant=soft]:not(:disabled):hover,
@@ -1366,7 +1499,7 @@
 .oui-icon-button[data-tone=neutral][data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-tone=neutral][data-variant=ghost]:not(:disabled):hover {
   color: var(--oui-text);
-  background: var(--oui-gray-a4, var(--oui-control-hover-bg));
+  background: var(--oui-control-hover-bg);
 }
 
 .oui-button[data-variant=pad]:not(:disabled):hover,
@@ -1419,180 +1552,68 @@
   --oui-primary-contrast: var(--oui-secondary-contrast);
 }
 
-.oui-button[data-tone=blue],
-.oui-icon-button[data-tone=blue] {
-  --oui-primary-base: var(--blue-9, var(--oui-primary-base));
-  --oui-primary-text: var(--blue-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--blue-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=sky],
-.oui-icon-button[data-tone=sky] {
-  --oui-primary-base: var(--sky-9, var(--oui-primary-base));
-  --oui-primary-text: var(--sky-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--sky-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=cyan],
-.oui-icon-button[data-tone=cyan] {
-  --oui-primary-base: var(--cyan-9, var(--oui-primary-base));
-  --oui-primary-text: var(--cyan-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--cyan-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=teal],
-.oui-icon-button[data-tone=teal] {
-  --oui-primary-base: var(--teal-9, var(--oui-primary-base));
-  --oui-primary-text: var(--teal-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--teal-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=indigo],
-.oui-icon-button[data-tone=indigo] {
-  --oui-primary-base: var(--indigo-9, var(--oui-primary-base));
-  --oui-primary-text: var(--indigo-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--indigo-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=violet],
-.oui-icon-button[data-tone=violet] {
-  --oui-primary-base: var(--violet-9, var(--oui-primary-base));
-  --oui-primary-text: var(--violet-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--violet-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=purple],
-.oui-icon-button[data-tone=purple] {
-  --oui-primary-base: var(--purple-9, var(--oui-primary-base));
-  --oui-primary-text: var(--purple-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--purple-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=iris],
-.oui-icon-button[data-tone=iris] {
-  --oui-primary-base: var(--iris-9, var(--oui-primary-base));
-  --oui-primary-text: var(--iris-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--iris-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+.oui-button[data-tone=gray],
+.oui-icon-button[data-tone=gray] {
+  --oui-primary-base: var(--oui-neutral-base);
+  --oui-primary-text: var(--oui-neutral-text);
+  --oui-primary-surface: var(--oui-neutral-surface);
+  --oui-primary-contrast: var(--oui-neutral-contrast);
 }
 
 .oui-button[data-tone=green],
 .oui-icon-button[data-tone=green] {
-  --oui-primary-base: var(--green-9, var(--oui-primary-base));
-  --oui-primary-text: var(--green-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--green-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=jade],
-.oui-icon-button[data-tone=jade] {
-  --oui-primary-base: var(--jade-9, var(--oui-primary-base));
-  --oui-primary-text: var(--jade-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--jade-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=mint],
-.oui-icon-button[data-tone=mint] {
-  --oui-primary-base: var(--mint-9, var(--oui-primary-base));
-  --oui-primary-text: var(--mint-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--mint-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=grass],
-.oui-icon-button[data-tone=grass] {
-  --oui-primary-base: var(--grass-9, var(--oui-primary-base));
-  --oui-primary-text: var(--grass-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--grass-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=lime],
-.oui-icon-button[data-tone=lime] {
-  --oui-primary-base: var(--lime-9, var(--oui-primary-base));
-  --oui-primary-text: var(--lime-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--lime-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+  --oui-primary-base: var(--oui-success-base);
+  --oui-primary-text: var(--oui-success-text);
+  --oui-primary-surface: var(--oui-success-surface);
+  --oui-primary-contrast: var(--oui-success-contrast);
 }
 
 .oui-button[data-tone=yellow],
 .oui-icon-button[data-tone=yellow] {
-  --oui-primary-base: var(--yellow-9, var(--oui-primary-base));
-  --oui-primary-text: var(--yellow-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--yellow-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=amber],
-.oui-icon-button[data-tone=amber] {
-  --oui-primary-base: var(--amber-9, var(--oui-primary-base));
-  --oui-primary-text: var(--amber-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--amber-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+  --oui-primary-base: var(--oui-warning-base);
+  --oui-primary-text: var(--oui-warning-text);
+  --oui-primary-surface: var(--oui-warning-surface);
+  --oui-primary-contrast: var(--oui-warning-contrast);
 }
 
 .oui-button[data-tone=orange],
 .oui-icon-button[data-tone=orange] {
-  --oui-primary-base: var(--orange-9, var(--oui-primary-base));
-  --oui-primary-text: var(--orange-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--orange-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=brown],
-.oui-icon-button[data-tone=brown] {
-  --oui-primary-base: var(--brown-9, var(--oui-primary-base));
-  --oui-primary-text: var(--brown-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--brown-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+  --oui-primary-base: var(--oui-warning-base);
+  --oui-primary-text: var(--oui-warning-text);
+  --oui-primary-surface: var(--oui-warning-surface);
+  --oui-primary-contrast: var(--oui-warning-contrast);
 }
 
 .oui-button[data-tone=red],
 .oui-icon-button[data-tone=red] {
-  --oui-primary-base: var(--red-9, var(--oui-primary-base));
-  --oui-primary-text: var(--red-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--red-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
-}
-
-.oui-button[data-tone=ruby],
-.oui-icon-button[data-tone=ruby] {
-  --oui-primary-base: var(--ruby-9, var(--oui-primary-base));
-  --oui-primary-text: var(--ruby-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--ruby-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+  --oui-primary-base: var(--oui-danger-base);
+  --oui-primary-text: var(--oui-danger-text);
+  --oui-primary-surface: var(--oui-danger-surface);
+  --oui-primary-contrast: var(--oui-danger-contrast);
 }
 
-.oui-button[data-tone=crimson],
-.oui-icon-button[data-tone=crimson] {
-  --oui-primary-base: var(--crimson-9, var(--oui-primary-base));
-  --oui-primary-text: var(--crimson-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--crimson-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+.oui-button[data-tone=blue],
+.oui-icon-button[data-tone=blue] {
+  --oui-primary-base: var(--oui-info-base);
+  --oui-primary-text: var(--oui-info-text);
+  --oui-primary-surface: var(--oui-info-surface);
+  --oui-primary-contrast: var(--oui-info-contrast);
 }
 
-.oui-button[data-tone=pink],
-.oui-icon-button[data-tone=pink] {
-  --oui-primary-base: var(--pink-9, var(--oui-primary-base));
-  --oui-primary-text: var(--pink-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--pink-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+.oui-button[data-tone=cyan],
+.oui-icon-button[data-tone=cyan] {
+  --oui-primary-base: var(--oui-info-base);
+  --oui-primary-text: var(--oui-info-text);
+  --oui-primary-surface: var(--oui-info-surface);
+  --oui-primary-contrast: var(--oui-info-contrast);
 }
 
-.oui-button[data-tone=tomato],
-.oui-icon-button[data-tone=tomato] {
-  --oui-primary-base: var(--tomato-9, var(--oui-primary-base));
-  --oui-primary-text: var(--tomato-11, var(--oui-primary-text));
-  --oui-primary-surface: var(--tomato-a3, var(--oui-primary-surface));
-  --oui-primary-contrast: #ffffff;
+.oui-button[data-tone=purple],
+.oui-icon-button[data-tone=purple] {
+  --oui-primary-base: var(--oui-primary-base);
+  --oui-primary-text: var(--oui-primary-text);
+  --oui-primary-surface: var(--oui-primary-surface);
+  --oui-primary-contrast: var(--oui-primary-contrast);
 }
 
 .oui-button[data-tone=success][data-variant=solid],
@@ -1768,7 +1789,7 @@
 }
 
 .oui-card[data-interactive=true]:hover {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  background: var(--oui-control-hover-bg);
   border-color: color-mix(in srgb, var(--oui-border-strong) 54%, transparent);
 }
 
@@ -1846,7 +1867,7 @@ a.oui-card {
 
 .oui-badge[data-tone=neutral] {
   color: var(--oui-text);
-  background: var(--oui-gray-a3, var(--oui-soft));
+  background: var(--oui-pad-bg);
 }
 
 .oui-badge[data-tone=neutral][data-variant=solid] {
@@ -1858,549 +1879,227 @@ a.oui-card {
 .oui-badge[data-tone=neutral][data-variant=outline] {
   color: var(--oui-text);
   background: transparent;
-  border-color: var(--oui-gray-a8, var(--oui-border-strong));
+  border-color: var(--oui-border-strong);
 }
 
 .oui-badge[data-tone=neutral][data-variant=surface] {
   color: var(--oui-text);
-  background: var(--oui-gray-a3, var(--oui-soft));
-  border-color: var(--oui-gray-a8, var(--oui-border));
-}
-
-.oui-badge[data-tone=primary] {
-  color: var(--oui-status-primary-text, var(--oui-primary-text));
-  background: var(--oui-primary-surface);
-}
-
-.oui-badge[data-tone=secondary] {
-  color: var(--oui-status-secondary-text, var(--oui-secondary-text));
-  background: var(--oui-secondary-surface);
-}
-
-.oui-badge[data-tone=success] {
-  color: var(--oui-status-success-text, var(--oui-success-base));
-  background: var(--oui-success-surface);
-}
-
-.oui-badge[data-tone=warning] {
-  color: var(--oui-status-warning-text, var(--oui-warning-base));
-  background: var(--oui-warning-surface);
-}
-
-.oui-badge[data-tone=danger] {
-  color: var(--oui-status-danger-text, var(--oui-danger-base));
-  background: var(--oui-danger-surface);
-}
-
-.oui-badge[data-tone=info] {
-  color: var(--oui-status-info-text, var(--oui-info-base));
-  background: var(--oui-info-surface);
-}
-
-.oui-badge[data-tone=blue] {
-  color: var(--blue-11, var(--oui-text));
-  background: var(--blue-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=blue][data-variant=solid] {
-  color: #ffffff;
-  background: var(--blue-9, var(--oui-primary-base));
-  border-color: var(--blue-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=blue][data-variant=outline] {
-  color: var(--blue-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--blue-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=blue][data-variant=surface] {
-  color: var(--blue-11, var(--oui-text));
-  background: var(--blue-a3, var(--oui-soft));
-  border-color: var(--blue-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=sky] {
-  color: var(--sky-11, var(--oui-text));
-  background: var(--sky-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=sky][data-variant=solid] {
-  color: #ffffff;
-  background: var(--sky-9, var(--oui-primary-base));
-  border-color: var(--sky-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=sky][data-variant=outline] {
-  color: var(--sky-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--sky-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=sky][data-variant=surface] {
-  color: var(--sky-11, var(--oui-text));
-  background: var(--sky-a3, var(--oui-soft));
-  border-color: var(--sky-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=cyan] {
-  color: var(--cyan-11, var(--oui-text));
-  background: var(--cyan-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=cyan][data-variant=solid] {
-  color: #ffffff;
-  background: var(--cyan-9, var(--oui-primary-base));
-  border-color: var(--cyan-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=cyan][data-variant=outline] {
-  color: var(--cyan-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--cyan-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=cyan][data-variant=surface] {
-  color: var(--cyan-11, var(--oui-text));
-  background: var(--cyan-a3, var(--oui-soft));
-  border-color: var(--cyan-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=teal] {
-  color: var(--teal-11, var(--oui-text));
-  background: var(--teal-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=teal][data-variant=solid] {
-  color: #ffffff;
-  background: var(--teal-9, var(--oui-primary-base));
-  border-color: var(--teal-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=teal][data-variant=outline] {
-  color: var(--teal-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--teal-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=teal][data-variant=surface] {
-  color: var(--teal-11, var(--oui-text));
-  background: var(--teal-a3, var(--oui-soft));
-  border-color: var(--teal-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=indigo] {
-  color: var(--indigo-11, var(--oui-text));
-  background: var(--indigo-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=indigo][data-variant=solid] {
-  color: #ffffff;
-  background: var(--indigo-9, var(--oui-primary-base));
-  border-color: var(--indigo-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=indigo][data-variant=outline] {
-  color: var(--indigo-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--indigo-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=indigo][data-variant=surface] {
-  color: var(--indigo-11, var(--oui-text));
-  background: var(--indigo-a3, var(--oui-soft));
-  border-color: var(--indigo-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=violet] {
-  color: var(--violet-11, var(--oui-text));
-  background: var(--violet-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=violet][data-variant=solid] {
-  color: #ffffff;
-  background: var(--violet-9, var(--oui-primary-base));
-  border-color: var(--violet-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=violet][data-variant=outline] {
-  color: var(--violet-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--violet-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=violet][data-variant=surface] {
-  color: var(--violet-11, var(--oui-text));
-  background: var(--violet-a3, var(--oui-soft));
-  border-color: var(--violet-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=purple] {
-  color: var(--purple-11, var(--oui-text));
-  background: var(--purple-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=purple][data-variant=solid] {
-  color: #ffffff;
-  background: var(--purple-9, var(--oui-primary-base));
-  border-color: var(--purple-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=purple][data-variant=outline] {
-  color: var(--purple-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--purple-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=purple][data-variant=surface] {
-  color: var(--purple-11, var(--oui-text));
-  background: var(--purple-a3, var(--oui-soft));
-  border-color: var(--purple-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=iris] {
-  color: var(--iris-11, var(--oui-text));
-  background: var(--iris-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=iris][data-variant=solid] {
-  color: #ffffff;
-  background: var(--iris-9, var(--oui-primary-base));
-  border-color: var(--iris-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=iris][data-variant=outline] {
-  color: var(--iris-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--iris-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=iris][data-variant=surface] {
-  color: var(--iris-11, var(--oui-text));
-  background: var(--iris-a3, var(--oui-soft));
-  border-color: var(--iris-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=green] {
-  color: var(--green-11, var(--oui-text));
-  background: var(--green-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=green][data-variant=solid] {
-  color: #ffffff;
-  background: var(--green-9, var(--oui-primary-base));
-  border-color: var(--green-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=green][data-variant=outline] {
-  color: var(--green-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--green-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=green][data-variant=surface] {
-  color: var(--green-11, var(--oui-text));
-  background: var(--green-a3, var(--oui-soft));
-  border-color: var(--green-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=jade] {
-  color: var(--jade-11, var(--oui-text));
-  background: var(--jade-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=jade][data-variant=solid] {
-  color: #ffffff;
-  background: var(--jade-9, var(--oui-primary-base));
-  border-color: var(--jade-9, var(--oui-primary-base));
+  background: var(--oui-pad-bg);
+  border-color: var(--oui-border);
 }
 
-.oui-badge[data-tone=jade][data-variant=outline] {
-  color: var(--jade-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--jade-a7, var(--oui-border-strong));
+.oui-badge[data-tone=primary] {
+  color: var(--oui-status-primary-text, var(--oui-primary-text));
+  background: var(--oui-primary-surface);
 }
 
-.oui-badge[data-tone=jade][data-variant=surface] {
-  color: var(--jade-11, var(--oui-text));
-  background: var(--jade-a3, var(--oui-soft));
-  border-color: var(--jade-a7, var(--oui-border));
+.oui-badge[data-tone=secondary] {
+  color: var(--oui-status-secondary-text, var(--oui-secondary-text));
+  background: var(--oui-secondary-surface);
 }
 
-.oui-badge[data-tone=mint] {
-  color: var(--mint-11, var(--oui-text));
-  background: var(--mint-a3, var(--oui-soft));
+.oui-badge[data-tone=success] {
+  color: var(--oui-status-success-text, var(--oui-success-base));
+  background: var(--oui-success-surface);
 }
 
-.oui-badge[data-tone=mint][data-variant=solid] {
-  color: #ffffff;
-  background: var(--mint-9, var(--oui-primary-base));
-  border-color: var(--mint-9, var(--oui-primary-base));
+.oui-badge[data-tone=warning] {
+  color: var(--oui-status-warning-text, var(--oui-warning-base));
+  background: var(--oui-warning-surface);
 }
 
-.oui-badge[data-tone=mint][data-variant=outline] {
-  color: var(--mint-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--mint-a7, var(--oui-border-strong));
+.oui-badge[data-tone=danger] {
+  color: var(--oui-status-danger-text, var(--oui-danger-base));
+  background: var(--oui-danger-surface);
 }
 
-.oui-badge[data-tone=mint][data-variant=surface] {
-  color: var(--mint-11, var(--oui-text));
-  background: var(--mint-a3, var(--oui-soft));
-  border-color: var(--mint-a7, var(--oui-border));
+.oui-badge[data-tone=info] {
+  color: var(--oui-status-info-text, var(--oui-info-base));
+  background: var(--oui-info-surface);
 }
 
-.oui-badge[data-tone=grass] {
-  color: var(--grass-11, var(--oui-text));
-  background: var(--grass-a3, var(--oui-soft));
+.oui-badge[data-tone=gray] {
+  color: var(--oui-status-neutral-text, var(--oui-neutral-text));
+  background: var(--oui-neutral-surface);
 }
 
-.oui-badge[data-tone=grass][data-variant=solid] {
-  color: #ffffff;
-  background: var(--grass-9, var(--oui-primary-base));
-  border-color: var(--grass-9, var(--oui-primary-base));
+.oui-badge[data-tone=gray][data-variant=solid] {
+  color: var(--oui-neutral-contrast);
+  background: var(--oui-neutral-base);
+  border-color: var(--oui-neutral-base);
 }
 
-.oui-badge[data-tone=grass][data-variant=outline] {
-  color: var(--grass-11, var(--oui-text));
+.oui-badge[data-tone=gray][data-variant=outline] {
+  color: var(--oui-status-neutral-text, var(--oui-neutral-text));
   background: transparent;
-  border-color: var(--grass-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-neutral-border, var(--oui-neutral-border));
 }
 
-.oui-badge[data-tone=grass][data-variant=surface] {
-  color: var(--grass-11, var(--oui-text));
-  background: var(--grass-a3, var(--oui-soft));
-  border-color: var(--grass-a7, var(--oui-border));
+.oui-badge[data-tone=gray][data-variant=surface] {
+  color: var(--oui-status-neutral-text, var(--oui-neutral-text));
+  background: var(--oui-neutral-surface);
+  border-color: var(--oui-status-neutral-border, var(--oui-neutral-border));
 }
 
-.oui-badge[data-tone=lime] {
-  color: var(--lime-11, var(--oui-text));
-  background: var(--lime-a3, var(--oui-soft));
+.oui-badge[data-tone=green] {
+  color: var(--oui-status-success-text, var(--oui-success-text));
+  background: var(--oui-success-surface);
 }
 
-.oui-badge[data-tone=lime][data-variant=solid] {
-  color: #ffffff;
-  background: var(--lime-9, var(--oui-primary-base));
-  border-color: var(--lime-9, var(--oui-primary-base));
+.oui-badge[data-tone=green][data-variant=solid] {
+  color: var(--oui-success-contrast);
+  background: var(--oui-success-base);
+  border-color: var(--oui-success-base);
 }
 
-.oui-badge[data-tone=lime][data-variant=outline] {
-  color: var(--lime-11, var(--oui-text));
+.oui-badge[data-tone=green][data-variant=outline] {
+  color: var(--oui-status-success-text, var(--oui-success-text));
   background: transparent;
-  border-color: var(--lime-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-success-border, var(--oui-success-border));
 }
 
-.oui-badge[data-tone=lime][data-variant=surface] {
-  color: var(--lime-11, var(--oui-text));
-  background: var(--lime-a3, var(--oui-soft));
-  border-color: var(--lime-a7, var(--oui-border));
+.oui-badge[data-tone=green][data-variant=surface] {
+  color: var(--oui-status-success-text, var(--oui-success-text));
+  background: var(--oui-success-surface);
+  border-color: var(--oui-status-success-border, var(--oui-success-border));
 }
 
 .oui-badge[data-tone=yellow] {
-  color: var(--yellow-11, var(--oui-text));
-  background: var(--yellow-a3, var(--oui-soft));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
+  background: var(--oui-warning-surface);
 }
 
 .oui-badge[data-tone=yellow][data-variant=solid] {
-  color: #ffffff;
-  background: var(--yellow-9, var(--oui-primary-base));
-  border-color: var(--yellow-9, var(--oui-primary-base));
+  color: var(--oui-warning-contrast);
+  background: var(--oui-warning-base);
+  border-color: var(--oui-warning-base);
 }
 
 .oui-badge[data-tone=yellow][data-variant=outline] {
-  color: var(--yellow-11, var(--oui-text));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
   background: transparent;
-  border-color: var(--yellow-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-warning-border, var(--oui-warning-border));
 }
 
 .oui-badge[data-tone=yellow][data-variant=surface] {
-  color: var(--yellow-11, var(--oui-text));
-  background: var(--yellow-a3, var(--oui-soft));
-  border-color: var(--yellow-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=amber] {
-  color: var(--amber-11, var(--oui-text));
-  background: var(--amber-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=amber][data-variant=solid] {
-  color: #ffffff;
-  background: var(--amber-9, var(--oui-primary-base));
-  border-color: var(--amber-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=amber][data-variant=outline] {
-  color: var(--amber-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--amber-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=amber][data-variant=surface] {
-  color: var(--amber-11, var(--oui-text));
-  background: var(--amber-a3, var(--oui-soft));
-  border-color: var(--amber-a7, var(--oui-border));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
+  background: var(--oui-warning-surface);
+  border-color: var(--oui-status-warning-border, var(--oui-warning-border));
 }
 
 .oui-badge[data-tone=orange] {
-  color: var(--orange-11, var(--oui-text));
-  background: var(--orange-a3, var(--oui-soft));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
+  background: var(--oui-warning-surface);
 }
 
 .oui-badge[data-tone=orange][data-variant=solid] {
-  color: #ffffff;
-  background: var(--orange-9, var(--oui-primary-base));
-  border-color: var(--orange-9, var(--oui-primary-base));
+  color: var(--oui-warning-contrast);
+  background: var(--oui-warning-base);
+  border-color: var(--oui-warning-base);
 }
 
 .oui-badge[data-tone=orange][data-variant=outline] {
-  color: var(--orange-11, var(--oui-text));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
   background: transparent;
-  border-color: var(--orange-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-warning-border, var(--oui-warning-border));
 }
 
 .oui-badge[data-tone=orange][data-variant=surface] {
-  color: var(--orange-11, var(--oui-text));
-  background: var(--orange-a3, var(--oui-soft));
-  border-color: var(--orange-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=brown] {
-  color: var(--brown-11, var(--oui-text));
-  background: var(--brown-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=brown][data-variant=solid] {
-  color: #ffffff;
-  background: var(--brown-9, var(--oui-primary-base));
-  border-color: var(--brown-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=brown][data-variant=outline] {
-  color: var(--brown-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--brown-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=brown][data-variant=surface] {
-  color: var(--brown-11, var(--oui-text));
-  background: var(--brown-a3, var(--oui-soft));
-  border-color: var(--brown-a7, var(--oui-border));
+  color: var(--oui-status-warning-text, var(--oui-warning-text));
+  background: var(--oui-warning-surface);
+  border-color: var(--oui-status-warning-border, var(--oui-warning-border));
 }
 
 .oui-badge[data-tone=red] {
-  color: var(--red-11, var(--oui-text));
-  background: var(--red-a3, var(--oui-soft));
+  color: var(--oui-status-danger-text, var(--oui-danger-text));
+  background: var(--oui-danger-surface);
 }
 
 .oui-badge[data-tone=red][data-variant=solid] {
-  color: #ffffff;
-  background: var(--red-9, var(--oui-primary-base));
-  border-color: var(--red-9, var(--oui-primary-base));
+  color: var(--oui-danger-contrast);
+  background: var(--oui-danger-base);
+  border-color: var(--oui-danger-base);
 }
 
 .oui-badge[data-tone=red][data-variant=outline] {
-  color: var(--red-11, var(--oui-text));
+  color: var(--oui-status-danger-text, var(--oui-danger-text));
   background: transparent;
-  border-color: var(--red-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-danger-border, var(--oui-danger-border));
 }
 
 .oui-badge[data-tone=red][data-variant=surface] {
-  color: var(--red-11, var(--oui-text));
-  background: var(--red-a3, var(--oui-soft));
-  border-color: var(--red-a7, var(--oui-border));
-}
-
-.oui-badge[data-tone=ruby] {
-  color: var(--ruby-11, var(--oui-text));
-  background: var(--ruby-a3, var(--oui-soft));
-}
-
-.oui-badge[data-tone=ruby][data-variant=solid] {
-  color: #ffffff;
-  background: var(--ruby-9, var(--oui-primary-base));
-  border-color: var(--ruby-9, var(--oui-primary-base));
-}
-
-.oui-badge[data-tone=ruby][data-variant=outline] {
-  color: var(--ruby-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--ruby-a7, var(--oui-border-strong));
-}
-
-.oui-badge[data-tone=ruby][data-variant=surface] {
-  color: var(--ruby-11, var(--oui-text));
-  background: var(--ruby-a3, var(--oui-soft));
-  border-color: var(--ruby-a7, var(--oui-border));
+  color: var(--oui-status-danger-text, var(--oui-danger-text));
+  background: var(--oui-danger-surface);
+  border-color: var(--oui-status-danger-border, var(--oui-danger-border));
 }
 
-.oui-badge[data-tone=crimson] {
-  color: var(--crimson-11, var(--oui-text));
-  background: var(--crimson-a3, var(--oui-soft));
+.oui-badge[data-tone=blue] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
+  background: var(--oui-info-surface);
 }
 
-.oui-badge[data-tone=crimson][data-variant=solid] {
-  color: #ffffff;
-  background: var(--crimson-9, var(--oui-primary-base));
-  border-color: var(--crimson-9, var(--oui-primary-base));
+.oui-badge[data-tone=blue][data-variant=solid] {
+  color: var(--oui-info-contrast);
+  background: var(--oui-info-base);
+  border-color: var(--oui-info-base);
 }
 
-.oui-badge[data-tone=crimson][data-variant=outline] {
-  color: var(--crimson-11, var(--oui-text));
+.oui-badge[data-tone=blue][data-variant=outline] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
   background: transparent;
-  border-color: var(--crimson-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-info-border, var(--oui-info-border));
 }
 
-.oui-badge[data-tone=crimson][data-variant=surface] {
-  color: var(--crimson-11, var(--oui-text));
-  background: var(--crimson-a3, var(--oui-soft));
-  border-color: var(--crimson-a7, var(--oui-border));
+.oui-badge[data-tone=blue][data-variant=surface] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
+  background: var(--oui-info-surface);
+  border-color: var(--oui-status-info-border, var(--oui-info-border));
 }
 
-.oui-badge[data-tone=pink] {
-  color: var(--pink-11, var(--oui-text));
-  background: var(--pink-a3, var(--oui-soft));
+.oui-badge[data-tone=cyan] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
+  background: var(--oui-info-surface);
 }
 
-.oui-badge[data-tone=pink][data-variant=solid] {
-  color: #ffffff;
-  background: var(--pink-9, var(--oui-primary-base));
-  border-color: var(--pink-9, var(--oui-primary-base));
+.oui-badge[data-tone=cyan][data-variant=solid] {
+  color: var(--oui-info-contrast);
+  background: var(--oui-info-base);
+  border-color: var(--oui-info-base);
 }
 
-.oui-badge[data-tone=pink][data-variant=outline] {
-  color: var(--pink-11, var(--oui-text));
+.oui-badge[data-tone=cyan][data-variant=outline] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
   background: transparent;
-  border-color: var(--pink-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-info-border, var(--oui-info-border));
 }
 
-.oui-badge[data-tone=pink][data-variant=surface] {
-  color: var(--pink-11, var(--oui-text));
-  background: var(--pink-a3, var(--oui-soft));
-  border-color: var(--pink-a7, var(--oui-border));
+.oui-badge[data-tone=cyan][data-variant=surface] {
+  color: var(--oui-status-info-text, var(--oui-info-text));
+  background: var(--oui-info-surface);
+  border-color: var(--oui-status-info-border, var(--oui-info-border));
 }
 
-.oui-badge[data-tone=tomato] {
-  color: var(--tomato-11, var(--oui-text));
-  background: var(--tomato-a3, var(--oui-soft));
+.oui-badge[data-tone=purple] {
+  color: var(--oui-status-primary-text, var(--oui-primary-text));
+  background: var(--oui-primary-surface);
 }
 
-.oui-badge[data-tone=tomato][data-variant=solid] {
-  color: #ffffff;
-  background: var(--tomato-9, var(--oui-primary-base));
-  border-color: var(--tomato-9, var(--oui-primary-base));
+.oui-badge[data-tone=purple][data-variant=solid] {
+  color: var(--oui-primary-contrast);
+  background: var(--oui-primary-base);
+  border-color: var(--oui-primary-base);
 }
 
-.oui-badge[data-tone=tomato][data-variant=outline] {
-  color: var(--tomato-11, var(--oui-text));
+.oui-badge[data-tone=purple][data-variant=outline] {
+  color: var(--oui-status-primary-text, var(--oui-primary-text));
   background: transparent;
-  border-color: var(--tomato-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-primary-border, var(--oui-primary-border));
 }
 
-.oui-badge[data-tone=tomato][data-variant=surface] {
-  color: var(--tomato-11, var(--oui-text));
-  background: var(--tomato-a3, var(--oui-soft));
-  border-color: var(--tomato-a7, var(--oui-border));
+.oui-badge[data-tone=purple][data-variant=surface] {
+  color: var(--oui-status-primary-text, var(--oui-primary-text));
+  background: var(--oui-primary-surface);
+  border-color: var(--oui-status-primary-border, var(--oui-primary-border));
 }
 
 .oui-text-field,
@@ -2671,7 +2370,7 @@ a.oui-card {
 .oui-date-picker-trigger:hover,
 .oui-date-picker-trigger:focus-visible {
   color: var(--oui-text);
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  background: var(--oui-control-hover-bg);
   outline: none;
 }
 
@@ -2745,7 +2444,7 @@ a.oui-card {
 
 .oui-date-picker-day:hover:not(:disabled),
 .oui-date-picker-day:focus-visible {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  background: var(--oui-control-hover-bg);
   outline: none;
 }
 
@@ -2845,13 +2544,13 @@ a.oui-card {
   z-index: 2;
   margin-right: -1px;
   margin-left: -1px;
-  border-right: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
-  border-left: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
+  border-left: 1px solid color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
 }
 
 .oui-stepper .oui-stepper-field:hover {
-  border-right-color: var(--oui-gray-a8);
-  border-left-color: var(--oui-gray-a8);
+  border-right-color: var(--oui-border-strong);
+  border-left-color: var(--oui-border-strong);
 }
 
 .oui-stepper .oui-stepper-field:focus-within {
@@ -3264,6 +2963,11 @@ a.oui-card {
   background: var(--oui-pad-bg);
   padding: 10px 12px;
   color: var(--oui-text);
+  box-shadow: none;
+}
+
+.oui-alert[data-variant=soft] {
+  background: var(--oui-subtle);
 }
 
 .oui-alert[data-tone=success] {
@@ -3286,114 +2990,39 @@ a.oui-card {
   background: var(--oui-info-surface);
 }
 
-.oui-alert[data-tone=blue] {
-  border-color: color-mix(in srgb, var(--blue-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--blue-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=sky] {
-  border-color: color-mix(in srgb, var(--sky-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--sky-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=cyan] {
-  border-color: color-mix(in srgb, var(--cyan-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--cyan-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=teal] {
-  border-color: color-mix(in srgb, var(--teal-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--teal-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=indigo] {
-  border-color: color-mix(in srgb, var(--indigo-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--indigo-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=violet] {
-  border-color: color-mix(in srgb, var(--violet-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--violet-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=purple] {
-  border-color: color-mix(in srgb, var(--purple-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--purple-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=iris] {
-  border-color: color-mix(in srgb, var(--iris-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--iris-a3, var(--oui-info-surface));
-}
-
 .oui-alert[data-tone=green] {
-  border-color: color-mix(in srgb, var(--green-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--green-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=jade] {
-  border-color: color-mix(in srgb, var(--jade-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--jade-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=mint] {
-  border-color: color-mix(in srgb, var(--mint-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--mint-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=grass] {
-  border-color: color-mix(in srgb, var(--grass-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--grass-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=lime] {
-  border-color: color-mix(in srgb, var(--lime-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--lime-a3, var(--oui-info-surface));
+  border-color: color-mix(in srgb, var(--oui-success-base) 42%, var(--oui-border));
+  background: var(--oui-success-surface);
 }
 
 .oui-alert[data-tone=yellow] {
-  border-color: color-mix(in srgb, var(--yellow-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--yellow-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=amber] {
-  border-color: color-mix(in srgb, var(--amber-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--amber-a3, var(--oui-info-surface));
+  border-color: color-mix(in srgb, var(--oui-warning-base) 42%, var(--oui-border));
+  background: var(--oui-warning-surface);
 }
 
 .oui-alert[data-tone=orange] {
-  border-color: color-mix(in srgb, var(--orange-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--orange-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=brown] {
-  border-color: color-mix(in srgb, var(--brown-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--brown-a3, var(--oui-info-surface));
+  border-color: color-mix(in srgb, var(--oui-warning-base) 42%, var(--oui-border));
+  background: var(--oui-warning-surface);
 }
 
 .oui-alert[data-tone=red] {
-  border-color: color-mix(in srgb, var(--red-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--red-a3, var(--oui-info-surface));
-}
-
-.oui-alert[data-tone=ruby] {
-  border-color: color-mix(in srgb, var(--ruby-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--ruby-a3, var(--oui-info-surface));
+  border-color: color-mix(in srgb, var(--oui-danger-base) 42%, var(--oui-border));
+  background: var(--oui-danger-surface);
 }
 
-.oui-alert[data-tone=crimson] {
-  border-color: color-mix(in srgb, var(--crimson-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--crimson-a3, var(--oui-info-surface));
+.oui-alert[data-tone=blue] {
+  border-color: color-mix(in srgb, var(--oui-info-base) 42%, var(--oui-border));
+  background: var(--oui-info-surface);
 }
 
-.oui-alert[data-tone=pink] {
-  border-color: color-mix(in srgb, var(--pink-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--pink-a3, var(--oui-info-surface));
+.oui-alert[data-tone=cyan] {
+  border-color: color-mix(in srgb, var(--oui-info-base) 42%, var(--oui-border));
+  background: var(--oui-info-surface);
 }
 
-.oui-alert[data-tone=tomato] {
-  border-color: color-mix(in srgb, var(--tomato-9, var(--oui-info-base)) 42%, var(--oui-border));
-  background: var(--tomato-a3, var(--oui-info-surface));
+.oui-alert[data-tone=purple] {
+  border-color: color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border));
+  background: var(--oui-primary-surface);
 }
 
 .oui-alert-icon,
@@ -3522,8 +3151,7 @@ a.oui-card {
   transform: translateX(18px);
 }
 
-.oui-segmented,
-.oui-tabs-list {
+.oui-segmented {
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -3534,8 +3162,7 @@ a.oui-card {
   padding: 3px;
 }
 
-.oui-segmented-item,
-.oui-tabs-trigger {
+.oui-segmented-item {
   border: 0;
   border-radius: var(--oui-radius-sm);
   padding: 7px 11px;
@@ -3548,10 +3175,9 @@ a.oui-card {
   transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
 }
 
-.oui-segmented-item[data-active=true],
-.oui-tabs-trigger[data-active=true] {
+.oui-segmented-item[data-active=true] {
   color: var(--oui-text);
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft)));
+  background: var(--oui-control-hover-bg);
   box-shadow: var(--oui-shadow-sm);
 }
 
@@ -3566,25 +3192,17 @@ a.oui-card {
 }
 
 .oui-button[data-variant=surface],
-.oui-icon-button[data-variant=surface],
-.oui-combobox-trigger {
+.oui-icon-button[data-variant=surface] {
   background-color: var(--oui-control-bg, transparent);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   box-shadow: none;
   font-weight: 400;
 }
 
 .oui-button[data-variant=surface]:not(:disabled):hover,
-.oui-icon-button[data-variant=surface]:not(:disabled):hover,
-.oui-combobox-trigger:not(:disabled):hover {
-  border-color: var(--oui-gray-a8);
-  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
-}
-
-.oui-combobox-trigger[data-state=open],
-.oui-combobox-trigger[data-state=open]:hover {
-  border-color: var(--oui-primary-base);
-  box-shadow: none;
+.oui-icon-button[data-variant=surface]:not(:disabled):hover {
+  border-color: var(--oui-border-strong);
+  background-color: var(--oui-control-hover-bg);
 }
 
 .oui-combobox-trigger .oui-button-label {
@@ -3631,12 +3249,38 @@ a.oui-card {
 
 .oui-combobox-content,
 .oui-select-content {
+  --oui-selection-content-text: var(--oui-text, #202020);
+  --oui-selection-content-bg: var(--oui-floating-bg, var(--oui-bg, #ffffff));
+  --oui-selection-option-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 8%, transparent));
+  --oui-selection-option-selected-bg: var(--oui-selected-bg, color-mix(in srgb, var(--oui-selection-content-text) 10%, transparent));
+  --oui-selection-option-selected-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 13%, transparent));
+  --oui-selection-check-color: var(--oui-primary-text, #0d74ce);
   min-width: 280px;
   max-width: min(420px, 100vw - 24px);
   padding: 0;
   overflow: hidden;
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
+  color: var(--oui-selection-content-text);
+  background: var(--oui-selection-content-bg);
+}
+
+.oui-combobox-content[data-oui-theme=light],
+.oui-select-content[data-oui-theme=light] {
+  --oui-selection-content-text: #202020;
+  --oui-selection-content-bg: #ffffff;
+  --oui-selection-option-hover-bg: #0000000f;
+  --oui-selection-option-selected-bg: #008ff519;
+  --oui-selection-option-selected-hover-bg: #008ff526;
+  --oui-selection-check-color: #0d74ce;
+}
+
+.oui-combobox-content[data-oui-theme=dark],
+.oui-select-content[data-oui-theme=dark] {
+  --oui-selection-content-text: #eeeeee;
+  --oui-selection-content-bg: #0c0c0f;
+  --oui-selection-option-hover-bg: #ffffff12;
+  --oui-selection-option-selected-bg: #0077ff3a;
+  --oui-selection-option-selected-hover-bg: #0077ff52;
+  --oui-selection-check-color: #70b8ff;
 }
 
 .oui-combobox-search-wrap {
@@ -3653,7 +3297,7 @@ a.oui-card {
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8)) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-combobox-options,
@@ -3674,7 +3318,7 @@ a.oui-card {
   border: 0;
   border-radius: 6px;
   padding: 0;
-  color: var(--oui-text);
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
   background: transparent;
   font: inherit;
   font-size: 14px;
@@ -3713,33 +3357,33 @@ a.oui-card {
 .oui-combobox-option[data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-hover-bg);
 }
 
 .oui-combobox-option[data-selected=true]:hover,
 .oui-combobox-option[data-selected=true][data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-selected-hover-bg);
 }
 
 .oui-combobox-option[data-selected=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true] {
-  color: var(--oui-text);
-  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
+  background: var(--oui-selection-option-selected-bg);
 }
 
 .oui-combobox-option[data-selected=true]:hover,
 .oui-combobox-option[data-selected=true][data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-selected-hover-bg);
 }
 
 .oui-combobox-check {
   flex: 0 0 auto;
   margin-right: 10px;
-  color: var(--oui-primary-text);
+  color: var(--oui-selection-check-color);
 }
 
 .oui-combobox-option-action {
@@ -3766,7 +3410,7 @@ a.oui-card {
 
 .oui-combobox-option-action:hover,
 .oui-combobox-option-action:focus-visible {
-  background: var(--oui-gray-a4);
+  background: var(--oui-control-hover-bg);
   color: var(--oui-text);
   outline: none;
 }
@@ -3883,7 +3527,7 @@ a.oui-card {
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
-  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border: 1px solid color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   border-radius: 4px;
   color: #ffffff;
   background: var(--oui-control-bg, transparent);
@@ -3902,17 +3546,18 @@ a.oui-card {
 .oui-button.oui-combobox-trigger[data-variant=surface],
 .oui-button.oui-combobox-trigger {
   background-color: var(--oui-control-bg, transparent);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: var(--oui-field-border-color, var(--oui-border));
   border-radius: 6px;
   box-shadow: none;
+  font-weight: 400;
   outline: none;
   transition: border-color 280ms ease, background-color 180ms ease;
 }
 
 .oui-button.oui-combobox-trigger[data-variant=surface]:not(:disabled):hover,
 .oui-button.oui-combobox-trigger:not(:disabled):hover {
-  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
-  border-color: var(--oui-gray-a8);
+  background-color: var(--oui-control-bg, transparent);
+  border-color: var(--oui-field-border-hover-color, var(--oui-border-strong));
   box-shadow: none;
 }
 
@@ -3961,7 +3606,7 @@ a.oui-card {
   height: 16px;
   min-width: 16px;
   min-height: 16px;
-  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border: 1px solid color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   background: var(--oui-control-bg, transparent);
   color: #ffffff;
   box-shadow: none;
@@ -3987,7 +3632,7 @@ a.oui-card {
 
 .oui-checkbox:hover .oui-checkbox-box,
 .oui-radio:hover .oui-radio-dot {
-  border-color: var(--oui-gray-a8);
+  border-color: var(--oui-border-strong);
 }
 
 .oui-checkbox[data-checked=true] .oui-checkbox-box,
@@ -4018,7 +3663,7 @@ a.oui-card {
   position: relative;
   width: 36px;
   height: 20px;
-  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border: 1px solid color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   border-radius: 999px;
   background: var(--oui-control-bg, transparent);
   box-shadow: none;
@@ -4026,7 +3671,7 @@ a.oui-card {
 }
 
 .oui-switch:hover .oui-switch-track {
-  border-color: var(--oui-gray-a8);
+  border-color: var(--oui-border-strong);
 }
 
 .oui-switch-thumb {
@@ -4062,6 +3707,7 @@ a.oui-card {
 }
 
 .oui-collapse {
+  display: grid;
   overflow: hidden;
   min-width: 0;
   min-height: 0;
@@ -4076,6 +3722,10 @@ a.oui-card {
   transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+.oui-collapse[data-animate=false] .oui-collapse-content {
+  transition: none;
+}
+
 .oui-collapse[data-state=open] .oui-collapse-content {
   opacity: 1;
   transform: translateY(0);
@@ -4117,17 +3767,17 @@ a.oui-card {
   position: absolute;
   border-radius: 6px;
   pointer-events: none;
-  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1), height 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
+  transition: left 460ms cubic-bezier(0.22, 1, 0.36, 1), top 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), height 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
 }
 
 .oui-tabs-active-indicator {
   z-index: 0;
-  background: var(--oui-gray-a4);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
 }
 
 .oui-tabs-hover-indicator {
   z-index: 0;
-  background: var(--oui-gray-a3);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
   opacity: 0;
 }
 
@@ -4168,10 +3818,6 @@ a.oui-card {
   outline: none;
 }
 
-.oui-tabs-trigger[data-active=true] {
-  font-weight: 500;
-}
-
 .oui-tabs-trigger-icon {
   display: inline-flex;
   align-items: center;
@@ -4196,7 +3842,7 @@ a.oui-card {
   border-radius: 999px;
   padding: 0 5px;
   color: var(--oui-muted);
-  background: var(--oui-gray-a4);
+  background: var(--oui-control-hover-bg);
   font-size: 10px;
   font-weight: 650;
   line-height: 1;
@@ -4286,17 +3932,17 @@ a.oui-card {
   position: absolute;
   border-radius: 6px;
   pointer-events: none;
-  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1), height 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
+  transition: left 460ms cubic-bezier(0.22, 1, 0.36, 1), top 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), height 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
 }
 
 .oui-tabs-compound-active-indicator {
   z-index: 0;
-  background: var(--oui-gray-a4);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
 }
 
 .oui-tabs-compound-hover-indicator {
   z-index: 0;
-  background: var(--oui-gray-a3);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
   opacity: 0;
 }
 
@@ -4396,9 +4042,9 @@ a.oui-card {
 
 .oui-popover-content,
 .oui-tooltip-content {
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
-  border: 1px solid var(--oui-border);
+  color: var(--oui-text, #202020);
+  background: var(--oui-floating-bg, var(--oui-bg, #ffffff));
+  border: 1px solid var(--oui-border, rgba(0, 0, 0, 0.0901960784));
   border-radius: var(--oui-radius);
   box-shadow: var(--oui-shadow-md);
   transform-origin: top center;
@@ -4446,7 +4092,7 @@ a.oui-card {
   border: 0;
   border-radius: var(--oui-radius-sm);
   padding: 7px 9px;
-  color: var(--oui-text);
+  color: var(--oui-text, #202020);
   background: transparent;
   font: inherit;
   font-size: 13px;
@@ -4463,8 +4109,8 @@ a.oui-card {
 }
 
 .oui-listbox-item[data-selected=true] {
-  color: var(--oui-text);
-  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+  color: var(--oui-text, #202020);
+  background: color-mix(in srgb, var(--oui-text, #202020) 7%, transparent);
 }
 
 .oui-listbox-item[data-selected=true]:hover,
@@ -4502,7 +4148,7 @@ a.oui-card {
   overflow: auto;
   padding-right: 2px;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-command-palette-results::-webkit-scrollbar {
@@ -4510,13 +4156,13 @@ a.oui-card {
 }
 
 .oui-command-palette-results::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-command-palette-results::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-border-strong));
   background-clip: content-box;
 }
 
@@ -4580,8 +4226,8 @@ a.oui-card {
 .oui-command-palette-item:hover,
 .oui-command-palette-item:focus-visible,
 .oui-command-palette-item[data-selected=true] {
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 42%, transparent);
-  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  border-color: color-mix(in srgb, var(--oui-border-strong) 42%, transparent);
+  background: var(--oui-control-hover-bg);
   outline: none;
 }
 
@@ -4631,7 +4277,7 @@ a.oui-card {
   min-width: 34px;
   min-height: 22px;
   flex: 0 0 auto;
-  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 36%, transparent);
+  border: 1px solid color-mix(in srgb, var(--oui-border-strong) 36%, transparent);
   border-radius: 5px;
   padding: 0 6px;
   color: var(--oui-muted);
@@ -4835,107 +4481,83 @@ a.oui-card {
   padding: 18px;
 }
 
-.oui-toast-viewport {
+.oui-toast-stack {
   position: fixed;
   z-index: var(--oui-z-toast, 2147483000);
   display: flex;
-  width: min(380px, 100vw - 32px);
+  width: min(380px, calc(100vw - 32px));
   flex-direction: column;
   gap: 8px;
   pointer-events: none;
 }
 
-.oui-toast-viewport[data-position^=top] {
+.oui-toast-stack[data-position^=top] {
   top: 16px;
 }
 
-.oui-toast-viewport[data-position^=bottom] {
+.oui-toast-stack[data-position^=bottom] {
   bottom: 16px;
 }
 
-.oui-toast-viewport[data-position$=left] {
+.oui-toast-stack[data-position$=left] {
   left: 16px;
   align-items: flex-start;
 }
 
-.oui-toast-viewport[data-position$=right] {
+.oui-toast-stack[data-position$=right] {
   right: 16px;
   align-items: flex-end;
 }
 
-.oui-toast-viewport[data-position$=center] {
+.oui-toast-stack[data-position$=center] {
   left: 50%;
   align-items: center;
   transform: translateX(-50%);
 }
 
-.oui-toast-frame {
+.oui-toast-viewport {
   position: relative;
-  isolation: isolate;
   width: 100%;
+  overflow: hidden;
+  border-radius: var(--oui-radius-xl, 12px);
+  background: var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg)));
+  box-shadow: var(--oui-toast-shadow, 0 10px 26px rgba(0, 0, 0, 0.18));
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
   animation: ouiToastIn var(--oui-toast-animation-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1) both;
   pointer-events: none;
   will-change: opacity, transform;
 }
 
-.oui-toast-backdrop {
-  position: absolute;
-  inset: -10px;
-  z-index: 0;
-  border-radius: 14px;
-  background: transparent;
-  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
-  pointer-events: none;
-}
-
 .oui-toast {
   position: relative;
-  z-index: 1;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  border: 1px solid var(--oui-toast-custom-border-color, var(--oui-toast-border-color, var(--oui-border)));
+  border: 0;
   border-radius: var(--oui-radius-xl, 12px);
   width: 100%;
   isolation: isolate;
   overflow: hidden;
   padding: 16px;
   color: var(--oui-text);
-  background: var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg)));
-  box-shadow: var(--oui-toast-shadow, 0 10px 26px rgba(0, 0, 0, 0.18));
-  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
+  background: color-mix(in srgb, var(--oui-toast-tone-color, var(--oui-info-base)) 5%, transparent);
+  box-shadow: none;
   transform-origin: var(--oui-toast-origin, center);
   pointer-events: auto;
 }
 
-.oui-toast::after {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--oui-toast-tone-bg, transparent);
-  content: "";
-  pointer-events: none;
-}
-
 .oui-toast[data-clickable=true] {
   cursor: pointer;
 }
 
-.oui-toast[data-clickable=true]:hover {
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-border) 78%, var(--oui-text)));
-  background: color-mix(in srgb, var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg))) 92%, var(--oui-text) 8%);
-}
-
-.oui-root[data-oui-theme=light] .oui-toast,
-:root[data-oui-theme=light] .oui-toast {
+.oui-root[data-oui-theme=light] .oui-toast-viewport,
+:root[data-oui-theme=light] .oui-toast-viewport {
   box-shadow: var(--oui-toast-shadow, 0 10px 24px rgba(15, 23, 42, 0.12));
 }
 
-.oui-toast-frame[data-position$=right] {
+.oui-toast-viewport[data-position$=right] {
   --oui-toast-enter-x: calc(100% + 32px);
   --oui-toast-enter-y: 0;
   --oui-toast-exit-x: calc(100% + 32px);
@@ -4943,7 +4565,7 @@ a.oui-card {
   --oui-toast-origin: right center;
 }
 
-.oui-toast-frame[data-position$=left] {
+.oui-toast-viewport[data-position$=left] {
   --oui-toast-enter-x: calc(-100% - 32px);
   --oui-toast-enter-y: 0;
   --oui-toast-exit-x: calc(-100% - 32px);
@@ -4951,7 +4573,7 @@ a.oui-card {
   --oui-toast-origin: left center;
 }
 
-.oui-toast-frame[data-position=top-center] {
+.oui-toast-viewport[data-position=top-center] {
   --oui-toast-enter-x: 0;
   --oui-toast-enter-y: calc(-100% - 32px);
   --oui-toast-exit-x: 0;
@@ -4959,7 +4581,7 @@ a.oui-card {
   --oui-toast-origin: top center;
 }
 
-.oui-toast-frame[data-position=bottom-center] {
+.oui-toast-viewport[data-position=bottom-center] {
   --oui-toast-enter-x: 0;
   --oui-toast-enter-y: calc(100% + 32px);
   --oui-toast-exit-x: 0;
@@ -4967,7 +4589,7 @@ a.oui-card {
   --oui-toast-origin: bottom center;
 }
 
-.oui-toast-frame[data-state=closing] {
+.oui-toast-viewport[data-state=closing] {
   animation: ouiToastOut var(--oui-toast-exit-duration, 320ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
@@ -4990,18 +4612,34 @@ a.oui-card {
   line-height: 1;
 }
 
+.oui-toast[data-tone=success] {
+  --oui-toast-tone-color: var(--oui-success-base);
+}
+
 .oui-toast-icon[data-tone=success] {
   color: var(--oui-success-base);
 }
 
+.oui-toast[data-tone=warning] {
+  --oui-toast-tone-color: var(--oui-warning-base);
+}
+
 .oui-toast-icon[data-tone=warning] {
   color: var(--oui-warning-base);
 }
 
+.oui-toast[data-tone=danger] {
+  --oui-toast-tone-color: var(--oui-danger-base);
+}
+
 .oui-toast-icon[data-tone=danger] {
   color: var(--oui-danger-base);
 }
 
+.oui-toast[data-tone=info] {
+  --oui-toast-tone-color: var(--oui-info-base);
+}
+
 .oui-toast-main {
   display: flex;
   min-width: 0;
@@ -5043,45 +4681,29 @@ a.oui-card {
   pointer-events: none;
 }
 
-.oui-toast[data-tone=success] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-success-surface) 34%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-success-base) 16%, var(--oui-border)));
+.oui-toast:hover .oui-toast-progress {
+  animation-play-state: paused;
 }
 
 .oui-toast[data-tone=success] .oui-toast-progress {
   background: var(--oui-toast-progress-color, var(--oui-success-base));
 }
 
-.oui-toast[data-tone=warning] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-warning-surface) 32%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-warning-base) 18%, var(--oui-border)));
-}
-
 .oui-toast[data-tone=warning] .oui-toast-progress {
   background: var(--oui-toast-progress-color, var(--oui-warning-base));
 }
 
-.oui-toast[data-tone=danger] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-danger-surface) 32%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-danger-base) 18%, var(--oui-border)));
-}
-
 .oui-toast[data-tone=danger] .oui-toast-progress {
   background: var(--oui-toast-progress-color, var(--oui-danger-base));
 }
 
-.oui-toast[data-tone=info] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-info-surface) 30%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-info-base) 16%, var(--oui-border)));
-}
-
 .oui-toast[data-tone=info] .oui-toast-progress {
   background: var(--oui-toast-progress-color, var(--oui-info-base));
 }
 
 .oui-popover-content,
 .oui-tooltip-content {
-  border-color: var(--oui-gray-a8);
+  border-color: var(--oui-border-strong);
   background: var(--oui-floating-bg, var(--oui-bg));
   box-shadow: var(--oui-floating-shadow, 0 8px 20px var(--oui-shadow-soft, rgba(0, 0, 0, 0.32)));
 }
@@ -5155,7 +4777,7 @@ a.oui-card {
 
 .oui-menu-info:hover,
 .oui-menu-info:focus-visible {
-  background: var(--oui-gray-a4);
+  background: var(--oui-control-hover-bg);
   color: var(--oui-text);
   outline: none;
 }
@@ -5163,7 +4785,7 @@ a.oui-card {
 .oui-menu-separator {
   height: 1px;
   margin: 3px 2px;
-  background: var(--oui-gray-a5);
+  background: var(--oui-border);
 }
 
 .oui-menu-sub-chevron {
@@ -5274,15 +4896,15 @@ a.oui-card {
 .oui-combobox-content,
 .oui-select-content {
   background: var(--oui-floating-bg, var(--oui-bg));
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
 }
 
 .oui-combobox-content,
 .oui-select-content,
 .oui-popover-content.oui-combobox-content,
 .oui-popover-content.oui-select-content {
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
+  background: var(--oui-selection-content-bg, var(--oui-floating-bg, var(--oui-bg, #ffffff)));
 }
 
 .oui-menu.oui-action-menu-content,
@@ -5313,7 +4935,7 @@ a.oui-card {
 
 .oui-menu-subcontent {
   left: calc(100% + 4px);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   border-radius: 6px;
   opacity: 0;
   pointer-events: none;
@@ -5349,7 +4971,7 @@ a.oui-card {
   min-width: 0;
   overflow: hidden;
   background: var(--oui-panel);
-  border-color: color-mix(in srgb, var(--oui-gray-a8, var(--oui-border-strong)) 48%, transparent);
+  border-color: color-mix(in srgb, var(--oui-border-strong) 48%, transparent);
   border-radius: 10px;
   box-shadow: var(--oui-special-modal-shadow, 0 8px 20px var(--oui-shadow-soft, rgba(0, 0, 0, 0.48)));
 }
@@ -5718,7 +5340,7 @@ a.oui-card {
   background: var(--oui-data-table-row-base-bg);
   min-height: 0;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-data-table-wrap:focus,
@@ -5989,14 +5611,14 @@ a.oui-card {
 }
 
 .oui-data-table-wrap::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-data-table-wrap::-webkit-scrollbar-thumb {
   min-height: 28px;
   border: 3px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-border-strong));
   background-clip: content-box;
 }
 
@@ -6141,8 +5763,10 @@ a.oui-card {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
+  border: 0;
   color: var(--oui-text);
   font-size: 13px;
+  box-shadow: none;
 }
 
 .oui-table[data-variant=surface] {
@@ -6220,7 +5844,7 @@ a.oui-card {
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-scroll-area[data-scrollbars=vertical] > .oui-scroll-area-viewport {
@@ -6271,7 +5895,7 @@ a.oui-card {
 .oui-scroll-area-viewport::-webkit-scrollbar-track,
 .oui-combobox-scroll::-webkit-scrollbar-track,
 .oui-modal-body::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-scroll-area-viewport::-webkit-scrollbar-thumb,
@@ -6280,8 +5904,9 @@ a.oui-card {
   min-height: 28px;
   border: 3px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-border-strong));
   background-clip: content-box;
+  transition: background-color 180ms ease;
 }
 
 .oui-scroll-area-viewport::-webkit-scrollbar-thumb:hover,