@orcestr/ui 0.1.1 → 0.2.1

package/dist/styles/orcestr-ui.css

@@ -89,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;
@@ -172,12 +166,6 @@
   --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;
 }
@@ -257,92 +245,36 @@
   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 {
@@ -1141,7 +1073,15 @@
   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 {
@@ -1347,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] {
@@ -1387,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 {
@@ -1584,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;
 }
 
@@ -1599,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],
@@ -1617,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,
@@ -1629,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,
@@ -1682,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],
@@ -2031,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);
 }
 
@@ -2109,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] {
@@ -2121,13 +1879,13 @@ 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));
+  background: var(--oui-pad-bg);
+  border-color: var(--oui-border);
 }
 
 .oui-badge[data-tone=primary] {
@@ -2160,510 +1918,188 @@ a.oui-card {
   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=gray] {
+  color: var(--oui-status-neutral-text, var(--oui-neutral-text));
+  background: var(--oui-neutral-surface);
 }
 
-.oui-badge[data-tone=iris] {
-  color: var(--iris-11, var(--oui-text));
-  background: var(--iris-a3, var(--oui-soft));
+.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=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));
+.oui-badge[data-tone=gray][data-variant=outline] {
+  color: var(--oui-status-neutral-text, var(--oui-neutral-text));
   background: transparent;
-  border-color: var(--iris-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-neutral-border, var(--oui-neutral-border));
 }
 
-.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=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=green] {
-  color: var(--green-11, var(--oui-text));
-  background: var(--green-a3, var(--oui-soft));
+  color: var(--oui-status-success-text, var(--oui-success-text));
+  background: var(--oui-success-surface);
 }
 
 .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));
+  color: var(--oui-success-contrast);
+  background: var(--oui-success-base);
+  border-color: var(--oui-success-base);
 }
 
 .oui-badge[data-tone=green][data-variant=outline] {
-  color: var(--green-11, var(--oui-text));
+  color: var(--oui-status-success-text, var(--oui-success-text));
   background: transparent;
-  border-color: var(--green-a7, var(--oui-border-strong));
+  border-color: var(--oui-status-success-border, var(--oui-success-border));
 }
 
 .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));
-}
-
-.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=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=mint] {
-  color: var(--mint-11, var(--oui-text));
-  background: var(--mint-a3, var(--oui-soft));
-}
-
-.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=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=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=grass] {
-  color: var(--grass-11, var(--oui-text));
-  background: var(--grass-a3, var(--oui-soft));
-}
-
-.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=grass][data-variant=outline] {
-  color: var(--grass-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--grass-a7, var(--oui-border-strong));
-}
-
-.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=lime] {
-  color: var(--lime-11, var(--oui-text));
-  background: var(--lime-a3, var(--oui-soft));
-}
-
-.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=lime][data-variant=outline] {
-  color: var(--lime-11, var(--oui-text));
-  background: transparent;
-  border-color: var(--lime-a7, var(--oui-border-strong));
-}
-
-.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));
+  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,
@@ -2934,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;
 }
 
@@ -3008,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;
 }
 
@@ -3108,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 {
@@ -3527,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] {
@@ -3549,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,
@@ -3811,7 +3177,7 @@ a.oui-card {
 
 .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);
 }
 
@@ -3828,15 +3194,15 @@ a.oui-card {
 .oui-button[data-variant=surface],
 .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 {
-  border-color: var(--oui-gray-a8);
-  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  border-color: var(--oui-border-strong);
+  background-color: var(--oui-control-hover-bg);
 }
 
 .oui-combobox-trigger .oui-button-label {
@@ -3885,9 +3251,9 @@ a.oui-card {
 .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-hover-bg: var(--oui-pad-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-option-selected-hover-bg: color-mix(in srgb, var(--oui-selection-option-selected-bg) 76%, var(--oui-selection-option-hover-bg));
   --oui-selection-check-color: var(--oui-primary-text, #0d74ce);
   min-width: 280px;
   max-width: min(420px, 100vw - 24px);
@@ -3897,26 +3263,6 @@ a.oui-card {
   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 {
   display: flex;
   align-items: center;
@@ -3931,7 +3277,7 @@ a.oui-card {
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8)) var(--oui-scrollbar-track, transparent);
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-combobox-options,
@@ -4044,7 +3390,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;
 }
@@ -4161,7 +3507,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);
@@ -4240,7 +3586,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;
@@ -4266,7 +3612,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,
@@ -4297,7 +3643,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;
@@ -4305,7 +3651,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 {
@@ -4406,12 +3752,12 @@ a.oui-card {
 
 .oui-tabs-active-indicator {
   z-index: 0;
-  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
 }
 
 .oui-tabs-hover-indicator {
   z-index: 0;
-  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
   opacity: 0;
 }
 
@@ -4476,7 +3822,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;
@@ -4571,12 +3917,12 @@ a.oui-card {
 
 .oui-tabs-compound-active-indicator {
   z-index: 0;
-  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
+  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-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg)));
   opacity: 0;
 }
 
@@ -4782,7 +4128,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))) var(--oui-scrollbar-track, transparent);
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-command-palette-results::-webkit-scrollbar {
@@ -4796,7 +4142,7 @@ a.oui-card {
 .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;
 }
 
@@ -4860,8 +4206,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;
 }
 
@@ -4911,7 +4257,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);
@@ -5337,7 +4683,7 @@ a.oui-card {
 
 .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)));
 }
@@ -5411,7 +4757,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;
 }
@@ -5419,7 +4765,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 {
@@ -5530,7 +4876,7 @@ 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,
@@ -5569,7 +4915,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;
@@ -5605,7 +4951,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)));
 }
@@ -5974,7 +5320,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))) var(--oui-scrollbar-track, transparent);
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-border-strong)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-data-table-wrap:focus,
@@ -6252,7 +5598,7 @@ 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;
 }
 
@@ -6397,8 +5743,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] {
@@ -6476,7 +5824,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))) var(--oui-scrollbar-track, 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 {
@@ -6536,7 +5884,7 @@ 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;
 }