feat(shared): redesign Toggle/Switch per Figma design system

packages/shared/src/components/fields/Switch.module.css

@@ -1,61 +1,106 @@
+/*
+ * Toggle / Switch — daily.dev design system.
+ * Track 44x24 (rounded-8), knob 20x20 (rounded-6) with a 2px inset.
+ * On press the knob squeezes to the track center (12x12) for tactile feedback,
+ * then snaps to the destination side on release.
+ */
+
 .track {
-  will-change: background-color, opacity;
-  transition: background-color 0.1s linear, opacity 0.2s linear;
+  background: var(--theme-surface-float);
+  will-change: background-color;
+  transition: background-color 0.12s linear;
+}
+
+.hoverLayer {
+  opacity: 0;
+  background: var(--theme-surface-hover);
+  will-change: opacity, background-color;
+  transition: opacity 0.15s linear, background-color 0.12s linear;
+}
+
+.focusRing {
+  opacity: 0;
+  border-color: var(--theme-surface-focus);
+  transition: opacity 0.1s linear;
 }
 
 .knob {
-  will-change: transform, background-color;
-  transition: background-color 0.1s linear, transform 0.2s linear;
+  background: var(--theme-surface-secondary);
+  transform: translateX(0) scale(1);
+  transform-origin: center;
+  will-change: transform, background-color, opacity;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 0.12s linear, opacity 0.12s linear;
+}
+
+.children {
+  color: var(--theme-text-tertiary);
+  transition: color 0.12s linear;
+}
+
+/* Off knob turns to the primary surface on hover / focus / press */
+.switch:hover input:not(:checked) ~ * .knob,
+.switch:active input:not(:checked) ~ * .knob,
+.switch input:not(:checked):focus-visible ~ * .knob {
+  background: var(--theme-surface-primary);
 }
 
-.switch {
-  &:hover .knob {
-    background: var(--theme-text-primary);
-  }
+.switch:hover .hoverLayer {
+  opacity: 1;
+}
 
-  &:hover input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.20');
-  }
+.switch:hover .children,
+.switch:active .children {
+  color: var(--theme-text-primary);
+}
 
-  &:active {
-    background: none;
-  }
+/* Keyboard focus */
+.switch input:focus-visible ~ * .focusRing,
+.switch input:focus-visible ~ * .hoverLayer {
+  opacity: 1;
+}
 
-  & input:checked {
-      & ~ * .track {
-        background: theme('colors.raw.cabbage.50');
-        opacity: 0.24;
-      }
+.switch input:focus-visible ~ .children {
+  color: var(--theme-text-primary);
+}
 
-      & ~ * .knob {
-        transform: translateX(100%);
-        background: theme('colors.raw.cabbage.40');
-      }
+/* Checked (on) */
+.switch input:checked ~ * .track {
+  background: color-mix(
+    in srgb,
+    var(--theme-accent-cabbage-bolder),
+    transparent 84%
+  );
+}
 
-      & ~ .children {
-        color: var(--theme-text-primary);
-      }
-  }
+.switch input:checked ~ * .hoverLayer {
+  background: color-mix(
+    in srgb,
+    var(--theme-accent-cabbage-bolder),
+    transparent 88%
+  );
 }
 
-:global(.light) .switch {
-   & input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.80');
-  }
+.switch input:checked ~ * .knob {
+  background: var(--theme-accent-cabbage-default);
+  transform: translateX(20px) scale(1);
+}
+
+.switch input:checked ~ .children {
+  color: var(--theme-text-primary);
+}
 
-  &:hover input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.60');
-  }
+/* Press — knob squeezes toward the track center for both states */
+.switch:active .knob,
+.switch:active input:checked ~ * .knob {
+  transform: translateX(10px) scale(0.6);
 }
 
-@media (prefers-color-scheme: light) {
-  :global(.auto) .switch {
-    & input:checked ~ * .knob {
-     background: theme('colors.raw.cabbage.80');
-   }
+/* Disabled */
+.disabled .knob {
+  opacity: 0.32;
+}
 
-   &:hover input:checked ~ * .knob {
-     background: theme('colors.raw.cabbage.60');
-   }
- }
+.disabled .children {
+  color: var(--theme-text-disabled);
 }

packages/shared/src/components/fields/Switch.tsx

@@ -43,10 +43,9 @@ function SwitchComponent(
       className={classNames(
         className,
         'group relative flex items-center',
-        disabled
-          ? 'pointer-events-none cursor-not-allowed opacity-32'
-          : 'cursor-pointer',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
         styles.switch,
+        disabled && styles.disabled,
       )}
       ref={ref}
     >
@@ -60,32 +59,34 @@ function SwitchComponent(
         onChange={onToggle}
         className="absolute h-0 w-0 opacity-0"
       />
-      <span
-        className={classNames(
-          'relative block',
-          compact ? 'h-4 w-8' : 'h-5 w-10',
-        )}
-      >
+      <span className="relative block h-6 w-11">
+        <span
+          className={classNames('absolute inset-0 rounded-8', styles.track)}
+        />
+        <span
+          className={classNames(
+            'absolute inset-0.5 rounded-6',
+            styles.hoverLayer,
+          )}
+        />
         <span
           className={classNames(
-            'absolute bottom-0 left-0 top-0 my-auto w-full bg-theme-overlay-quaternary',
-            compact ? 'h-2.5 rounded-3' : 'h-3 rounded-4',
-            styles.track,
+            'pointer-events-none absolute inset-0 rounded-8 border-2 border-solid',
+            styles.focusRing,
           )}
         />
         <span
           className={classNames(
-            'absolute left-0 top-0 bg-text-tertiary',
-            compact ? 'h-4 w-4 rounded-3' : 'h-5 w-5 rounded-6',
+            'absolute left-0.5 top-0.5 h-5 w-5 rounded-6',
             styles.knob,
           )}
         />
       </span>
       {children ? (
         <span
           className={classNames(
-            'ml-3 font-bold text-text-tertiary',
-            defaultTypo && 'typo-footnote',
+            'ml-3 font-bold',
+            defaultTypo && (compact ? 'typo-footnote' : 'typo-callout'),
             styles.children,
             labelClassName,
           )}