feat(amicode): flat soft-yellow settings toggle (was blue gradient)

ON state was --v2-background-bg-accent (= --v2-blue-600 upstream), off-brand. Flat soft-yellow track (accent mixed into the base, both themes) + --accent-edge ring; tokenized the raw-px radius (pill) and the retired font-weight; flat solids (no gradients); removed the hover thumb-resize/position jitter.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kateebonner

packages/ui/src/v2/components/switch-v2.css

@@ -26,38 +26,29 @@
     width: 24px;
     height: 16px;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: var(--radius-full);
     border: none;
-    background:
-      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
-      var(--v2-background-bg-layer-03);
+    background: var(--v2-background-bg-layer-03);
     box-shadow: var(--v2-elevation-switch-off);
     transition:
-      background 90ms ease-out,
-      opacity 90ms ease-out,
-      outline-color 90ms ease-out;
+      background 150ms ease-out,
+      box-shadow 150ms ease-out,
+      opacity 150ms ease-out,
+      outline-color 150ms ease-out;
   }
 
   [data-slot="switch-thumb"] {
     box-sizing: border-box;
     width: 12px;
     height: 12px;
     transform: translateX(0);
-    border-radius: 2px;
+    border-radius: var(--radius-full);
     border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
-    background:
-      linear-gradient(
-        180deg,
-        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
-        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
-      ),
-      var(--v2-grey-200);
+    background: var(--v2-grey-200);
     box-shadow: var(--v2-elevation-elements);
     transition:
-      transform 90ms ease-out,
-      width 90ms ease-out,
-      border-radius 90ms,
-      background 90ms;
+      transform 150ms ease-out,
+      background 150ms ease-out;
   }
 
   [data-slot="switch-label"] {
@@ -66,11 +57,11 @@
     height: 16px;
     user-select: none;
     color: var(--v2-text-text-faint);
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     font-style: normal;
-    font-weight: 440;
+    font-weight: var(--font-weight-regular);
     line-height: 16px;
-    letter-spacing: 0.05px;
+    letter-spacing: var(--letter-spacing-normal);
     font-variation-settings: "slnt" 0;
   }
 
@@ -86,53 +77,38 @@
     display: none;
   }
 
+  /* Hover — flat color shift only. No thumb resize / position jitter
+     (design system: no layout-shifting transform). */
   &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    background:
-      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
-      var(--v2-background-bg-layer-03);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    width: 13px;
-    border-radius: 3px;
+    background: color-mix(in srgb, var(--v2-text-text-base) 7%, var(--v2-background-bg-layer-03));
   }
 
   &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
     outline: 2px solid var(--v2-border-border-focus);
     outline-offset: 1px;
   }
 
+  /* ON — flat soft-yellow: accent mixed into the track base (solid, no gradient,
+     same base as OFF in both themes) + an --accent-edge ring for definition
+     (neutral on light, yellow on dark). Was --v2-background-bg-accent, which
+     resolves to --v2-blue-600 upstream — off-brand. */
   &[data-checked] [data-slot="switch-control"] {
-    background:
-      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
-    box-shadow: var(--v2-elevation-switch-on);
+    background: color-mix(in srgb, var(--accent) 16%, var(--v2-background-bg-layer-03));
+    box-shadow:
+      inset 0 0 0 1px var(--accent-edge),
+      var(--v2-elevation-switch-on);
   }
 
   &[data-checked] [data-slot="switch-thumb"] {
     transform: translateX(8px);
-    border-radius: 2px;
-    background:
-      linear-gradient(
-        180deg,
-        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
-        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
-      ),
-      var(--v2-grey-300);
+    background: var(--v2-grey-300);
   }
 
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    background:
-      linear-gradient(
-        0deg,
-        var(--v2-overlay-simple-overlay-contrast-hover),
-        var(--v2-overlay-simple-overlay-contrast-hover)
-      ),
-      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    transform: translateX(7px);
+    background: color-mix(in srgb, var(--accent) 24%, var(--v2-background-bg-layer-03));
+    box-shadow:
+      inset 0 0 0 1px var(--accent-edge),
+      var(--v2-elevation-switch-on);
   }
 
   &[data-disabled] {
@@ -144,7 +120,7 @@
   }
 
   &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--v2-state-border-danger);
+    box-shadow: inset 0 0 0 1px var(--v2-state-border-danger);
   }
 
   &[data-readonly] {