@mindlogic-ai/logician-ui 5.0.0-alpha.24 → 5.0.0-alpha.25

package/dist/components/Switch/SwitchControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchControl.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/SwitchControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAsB,MAAM,kBAAkB,CAAC;AAK9E,eAAO,MAAM,aAAa,uHAkCzB,CAAC"}
+{"version":3,"file":"SwitchControl.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/SwitchControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAsB,MAAM,kBAAkB,CAAC;AAS9E,eAAO,MAAM,aAAa,uHA4CzB,CAAC"}

package/dist/components/Switch/SwitchControl.js

@@ -7,13 +7,26 @@ var react = require('@chakra-ui/react');
 var disabledControl = require('../../utils/disabledControl.js');
 var focusRing = require('../../utils/focusRing.js');
 
+// Drawn as an inset shadow, not a border, so the thumb's travel and the
+// track's size stay exactly what Chakra's recipe computes.
+const OFF_OUTLINE = 'inset 0 0 0 1px var(--chakra-colors-border-control)';
 const SwitchControl = React.forwardRef((props, ref) => (jsxRuntime.jsx(react.Switch.Control, { ref: ref, 
-    // The off-state track is a meter surface — its extent is the information —
-    // so it needs a visible fill, not just an edge. bg.muted (gray.100) is
-    // only ~1.03:1 against the bg.sunken page wash (gray.50) and vanishes
-    // there; bg.track (gray.300) reads as a filled track on any background.
-    // The checked state is the self-defining primary.main fill.
-    bg: "bg.track", _checked: { bg: 'primary.main' }, animationStyle: "feedback", transitionProperty: "background-color", _disabled: { ...disabledControl.disabledControl, cursor: 'not-allowed' }, ...focusRing.focusRing, ...props, children: jsxRuntime.jsx(react.Switch.Thumb
+    // Off is drawn the way an unchecked Checkbox is: a bg.surface track with a
+    // border.control outline and a border.control thumb, each at least 3:1
+    // against what it sits on (WCAG 1.4.11). The previous off state, a
+    // bg.track fill with a bg.surface thumb, measured 1.3:1 (light) and
+    // 1.4:1 (dark) between thumb and track, so the thumb's position, the only
+    // thing that tells off from on, could not be seen.
+    // On is success.solid with a success.onSolid thumb. With a black (light) or
+    // pale (dark) primary fill, neither state carried colour, and dark-mode
+    // "on" read as light-mode "off"; green gives both modes one meaning.
+    bg: "bg.surface", boxShadow: OFF_OUTLINE, _checked: { bg: 'success.solid', boxShadow: 'none' }, animationStyle: "feedback", transitionProperty: "background-color, box-shadow", _disabled: { ...disabledControl.disabledControl, cursor: 'not-allowed' }, ...focusRing.focusRing, 
+    // focusRing's shadow would replace the outline; keep both while off.
+    _focusVisible: {
+        ...focusRing.focusRing._focusVisible,
+        boxShadow: `${OFF_OUTLINE}, ${focusRing.FOCUS_RING_SHADOW}`,
+        _checked: { boxShadow: focusRing.FOCUS_RING_SHADOW },
+    }, ...props, children: jsxRuntime.jsx(react.Switch.Thumb
     // A toggle is the metaphor of a physical switch, so the thumb settles
     // slightly past its stop rather than easing to a halt. Chakra's default
     // is `translate` over `fast` on a plain curve; `overshoot` is the one
@@ -26,11 +39,10 @@ const SwitchControl = React.forwardRef((props, ref) => (jsxRuntime.jsx(react.Swi
         // curve that stays legible over the thumb's ~16px of travel, because it
         // reverses direction — `standard` vs `emphasized` would not.
         animationStyle: "spring", transitionProperty: "translate", 
-        // Chakra's default is a raw `white` thumb that stays `white` when
-        // checked via an undefined `colorPalette.contrast`. bg.surface reads
-        // as the same near-white in light and flips correctly in dark; the
-        // checked thumb is fg.onPrimary (cream) to match Checkbox/Radio.
-        bg: "bg.surface", _checked: { bg: 'fg.onPrimary' } }) })));
+        // Off: border.control, the same 3:1 control token as the outline.
+        // On: success.onSolid, the text colour success buttons put on the same
+        // fill (white in light, ink in dark).
+        bg: "border.control", _checked: { bg: 'success.onSolid' } }) })));
 SwitchControl.displayName = 'Switch.Control';
 
 exports.SwitchControl = SwitchControl;

package/dist/components/Switch/SwitchControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchControl.js","sources":["../../../src/components/Switch/SwitchControl.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSwitch","disabledControl","focusRing"],"mappings":";;;;;;;;;MAMa,aAAa,GAAGA,gBAAU,CACrC,CAAC,KAAK,EAAE,GAAG,MACTC,cAAA,CAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;;;;AAMR,IAAA,EAAE,EAAC,UAAU,EACb,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAChC,cAAc,EAAC,UAAU,EACzB,kBAAkB,EAAC,kBAAkB,EACrC,SAAS,EAAE,EAAE,GAAGC,+BAAe,EAAE,MAAM,EAAE,aAAa,EAAE,EAAA,GACpDC,mBAAS,EAAA,GACT,KAAK,YAETH,cAAA,CAACC,YAAY,CAAC;;;;;;;;;;;;AAMZ,QAAA,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,WAAW;;;;;AAK9B,QAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAAA,CAChC,EAAA,CACmB,CACxB;AAEH,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"SwitchControl.js","sources":["../../../src/components/Switch/SwitchControl.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSwitch","disabledControl","focusRing","FOCUS_RING_SHADOW"],"mappings":";;;;;;;;;AAMA;AACA;AACA,MAAM,WAAW,GAAG,qDAAqD;MAE5D,aAAa,GAAGA,gBAAU,CACrC,CAAC,KAAK,EAAE,GAAG,MACTC,cAAA,CAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;;;;;;;;AAUR,IAAA,EAAE,EAAC,YAAY,EACf,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,EACpD,cAAc,EAAC,UAAU,EACzB,kBAAkB,EAAC,8BAA8B,EACjD,SAAS,EAAE,EAAE,GAAGC,+BAAe,EAAE,MAAM,EAAE,aAAa,EAAE,KACpDC,mBAAS;;AAEb,IAAA,aAAa,EAAE;QACb,GAAGA,mBAAS,CAAC,aAAa;AAC1B,QAAA,SAAS,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,EAAKC,2BAAiB,CAAA,CAAE;AACjD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAEA,2BAAiB,EAAE;AAC3C,KAAA,EAAA,GACG,KAAK,EAAA,QAAA,EAETJ,cAAA,CAACC,YAAY,CAAC;;;;;;;;;;;;AAMZ,QAAA,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,WAAW;;;;AAI9B,QAAA,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAA,CACnC,EAAA,CACmB,CACxB;AAEH,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/Switch/SwitchControl.mjs

@@ -3,15 +3,28 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Switch } from '@chakra-ui/react';
 import { disabledControl } from '../../utils/disabledControl.mjs';
-import { focusRing } from '../../utils/focusRing.mjs';
+import { FOCUS_RING_SHADOW, focusRing } from '../../utils/focusRing.mjs';
 
+// Drawn as an inset shadow, not a border, so the thumb's travel and the
+// track's size stay exactly what Chakra's recipe computes.
+const OFF_OUTLINE = 'inset 0 0 0 1px var(--chakra-colors-border-control)';
 const SwitchControl = forwardRef((props, ref) => (jsx(Switch.Control, { ref: ref, 
-    // The off-state track is a meter surface — its extent is the information —
-    // so it needs a visible fill, not just an edge. bg.muted (gray.100) is
-    // only ~1.03:1 against the bg.sunken page wash (gray.50) and vanishes
-    // there; bg.track (gray.300) reads as a filled track on any background.
-    // The checked state is the self-defining primary.main fill.
-    bg: "bg.track", _checked: { bg: 'primary.main' }, animationStyle: "feedback", transitionProperty: "background-color", _disabled: { ...disabledControl, cursor: 'not-allowed' }, ...focusRing, ...props, children: jsx(Switch.Thumb
+    // Off is drawn the way an unchecked Checkbox is: a bg.surface track with a
+    // border.control outline and a border.control thumb, each at least 3:1
+    // against what it sits on (WCAG 1.4.11). The previous off state, a
+    // bg.track fill with a bg.surface thumb, measured 1.3:1 (light) and
+    // 1.4:1 (dark) between thumb and track, so the thumb's position, the only
+    // thing that tells off from on, could not be seen.
+    // On is success.solid with a success.onSolid thumb. With a black (light) or
+    // pale (dark) primary fill, neither state carried colour, and dark-mode
+    // "on" read as light-mode "off"; green gives both modes one meaning.
+    bg: "bg.surface", boxShadow: OFF_OUTLINE, _checked: { bg: 'success.solid', boxShadow: 'none' }, animationStyle: "feedback", transitionProperty: "background-color, box-shadow", _disabled: { ...disabledControl, cursor: 'not-allowed' }, ...focusRing, 
+    // focusRing's shadow would replace the outline; keep both while off.
+    _focusVisible: {
+        ...focusRing._focusVisible,
+        boxShadow: `${OFF_OUTLINE}, ${FOCUS_RING_SHADOW}`,
+        _checked: { boxShadow: FOCUS_RING_SHADOW },
+    }, ...props, children: jsx(Switch.Thumb
     // A toggle is the metaphor of a physical switch, so the thumb settles
     // slightly past its stop rather than easing to a halt. Chakra's default
     // is `translate` over `fast` on a plain curve; `overshoot` is the one
@@ -24,11 +37,10 @@ const SwitchControl = forwardRef((props, ref) => (jsx(Switch.Control, { ref: ref
         // curve that stays legible over the thumb's ~16px of travel, because it
         // reverses direction — `standard` vs `emphasized` would not.
         animationStyle: "spring", transitionProperty: "translate", 
-        // Chakra's default is a raw `white` thumb that stays `white` when
-        // checked via an undefined `colorPalette.contrast`. bg.surface reads
-        // as the same near-white in light and flips correctly in dark; the
-        // checked thumb is fg.onPrimary (cream) to match Checkbox/Radio.
-        bg: "bg.surface", _checked: { bg: 'fg.onPrimary' } }) })));
+        // Off: border.control, the same 3:1 control token as the outline.
+        // On: success.onSolid, the text colour success buttons put on the same
+        // fill (white in light, ink in dark).
+        bg: "border.control", _checked: { bg: 'success.onSolid' } }) })));
 SwitchControl.displayName = 'Switch.Control';
 
 export { SwitchControl };

package/dist/components/Switch/SwitchControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchControl.mjs","sources":["../../../src/components/Switch/SwitchControl.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSwitch"],"mappings":";;;;;;;MAMa,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,MACTA,GAAA,CAACC,MAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;;;;AAMR,IAAA,EAAE,EAAC,UAAU,EACb,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAChC,cAAc,EAAC,UAAU,EACzB,kBAAkB,EAAC,kBAAkB,EACrC,SAAS,EAAE,EAAE,GAAG,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,EAAA,GACpD,SAAS,EAAA,GACT,KAAK,YAETD,GAAA,CAACC,MAAY,CAAC;;;;;;;;;;;;AAMZ,QAAA,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,WAAW;;;;;AAK9B,QAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAAA,CAChC,EAAA,CACmB,CACxB;AAEH,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"SwitchControl.mjs","sources":["../../../src/components/Switch/SwitchControl.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSwitch"],"mappings":";;;;;;;AAMA;AACA;AACA,MAAM,WAAW,GAAG,qDAAqD;MAE5D,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,MACTA,GAAA,CAACC,MAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;;;;;;;;AAUR,IAAA,EAAE,EAAC,YAAY,EACf,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,EACpD,cAAc,EAAC,UAAU,EACzB,kBAAkB,EAAC,8BAA8B,EACjD,SAAS,EAAE,EAAE,GAAG,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,KACpD,SAAS;;AAEb,IAAA,aAAa,EAAE;QACb,GAAG,SAAS,CAAC,aAAa;AAC1B,QAAA,SAAS,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,EAAK,iBAAiB,CAAA,CAAE;AACjD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAC3C,KAAA,EAAA,GACG,KAAK,EAAA,QAAA,EAETD,GAAA,CAACC,MAAY,CAAC;;;;;;;;;;;;AAMZ,QAAA,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,WAAW;;;;AAI9B,QAAA,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAA,CACnC,EAAA,CACmB,CACxB;AAEH,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/theme/palette.generated.d.ts

@@ -324,7 +324,7 @@ export declare const SCHEMES: {
             readonly "success-bg": "#E5EDDD";
             readonly "success-border": "#C5D4B5";
             readonly "success-fg": "#556344";
-            readonly "success-solid": "#5E7A37";
+            readonly "success-solid": "#30862D";
             readonly "success-onSolid": "#FFFFFF";
             readonly "warning-bg": "#FEE9BC";
             readonly "warning-border": "#F0CF83";
@@ -506,7 +506,7 @@ export declare const SCHEMES: {
             readonly "success-bg": "#E5EDDD";
             readonly "success-border": "#7D8B6E";
             readonly "success-fg": "#445133";
-            readonly "success-solid": "#47611D";
+            readonly "success-solid": "#036805";
             readonly "success-onSolid": "#FFFFFF";
             readonly "warning-bg": "#FEE9BC";
             readonly "warning-border": "#A28336";
@@ -690,7 +690,7 @@ export declare const SCHEMES: {
             readonly "success-bg": "#E5EDDD";
             readonly "success-border": "#C5D4B5";
             readonly "success-fg": "#556344";
-            readonly "success-solid": "#5E7A37";
+            readonly "success-solid": "#30862D";
             readonly "success-onSolid": "#FFFFFF";
             readonly "warning-bg": "#FEE9BC";
             readonly "warning-border": "#F0CF83";
@@ -872,7 +872,7 @@ export declare const SCHEMES: {
             readonly "success-bg": "#E5EDDD";
             readonly "success-border": "#7D8B6E";
             readonly "success-fg": "#445133";
-            readonly "success-solid": "#47611D";
+            readonly "success-solid": "#036805";
             readonly "success-onSolid": "#FFFFFF";
             readonly "warning-bg": "#FEE9BC";
             readonly "warning-border": "#A28336";

package/dist/theme/palette.generated.js

@@ -330,7 +330,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#C5D4B5",
             "success-fg": "#556344",
-            "success-solid": "#5E7A37",
+            "success-solid": "#30862D",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#F0CF83",
@@ -512,7 +512,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#7D8B6E",
             "success-fg": "#445133",
-            "success-solid": "#47611D",
+            "success-solid": "#036805",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#A28336",
@@ -696,7 +696,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#C5D4B5",
             "success-fg": "#556344",
-            "success-solid": "#5E7A37",
+            "success-solid": "#30862D",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#F0CF83",
@@ -878,7 +878,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#7D8B6E",
             "success-fg": "#445133",
-            "success-solid": "#47611D",
+            "success-solid": "#036805",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#A28336",

package/dist/theme/palette.generated.mjs

@@ -328,7 +328,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#C5D4B5",
             "success-fg": "#556344",
-            "success-solid": "#5E7A37",
+            "success-solid": "#30862D",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#F0CF83",
@@ -510,7 +510,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#7D8B6E",
             "success-fg": "#445133",
-            "success-solid": "#47611D",
+            "success-solid": "#036805",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#A28336",
@@ -694,7 +694,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#C5D4B5",
             "success-fg": "#556344",
-            "success-solid": "#5E7A37",
+            "success-solid": "#30862D",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#F0CF83",
@@ -876,7 +876,7 @@ const SCHEMES = {
             "success-bg": "#E5EDDD",
             "success-border": "#7D8B6E",
             "success-fg": "#445133",
-            "success-solid": "#47611D",
+            "success-solid": "#036805",
             "success-onSolid": "#FFFFFF",
             "warning-bg": "#FEE9BC",
             "warning-border": "#A28336",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.25",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Switch/Switch.stories.tsx

@@ -179,14 +179,22 @@ export const UsageTokens: Story = {
   render: () => (
     <TokenTable
       rows={[
-        { token: 'bg.track', use: <T en="Track when off" ko="꺼짐 트랙" /> },
-        { token: 'primary.main', use: <T en="Track when on" ko="켜짐 트랙" /> },
+        { token: 'bg.surface', use: <T en="Track when off" ko="꺼짐 트랙" /> },
         {
-          token: 'bg.surface',
-          use: <T en="Thumb when off" ko="꺼짐 손잡이" />,
+          token: 'border.control',
+          use: (
+            <T
+              en="Track outline and thumb when off"
+              ko="꺼짐 트랙 테두리·손잡이"
+            />
+          ),
         },
         {
-          token: 'fg.onPrimary',
+          token: 'success.solid',
+          use: <T en="Track when on" ko="켜짐 트랙" />,
+        },
+        {
+          token: 'success.onSolid',
           use: <T en="Thumb when on" ko="켜짐 손잡이" />,
         },
         {

package/src/components/Switch/Switch.usage.mdx

@@ -128,8 +128,9 @@ What Switch does for you:
 
 - A native checkbox input carries the state, so Tab focuses it and Space
   toggles it.
-- The keyboard focus ring shows on the track (WCAG 2.4.7). The off track is
-  `bg.track`, a filled track that stays visible on any surface (WCAG 1.4.11).
+- The keyboard focus ring shows on the track (WCAG 2.4.7). Off is drawn like an
+  unchecked Checkbox: a `border.control` outline and thumb, at least 3:1 on any
+  surface (WCAG 1.4.11).
 
 What you still have to do:
 
@@ -160,8 +161,8 @@ Switch가 알아서 하는 일
 
 - 상태는 네이티브 체크박스 입력이 가지고 있어서 Tab으로 초점을 옮기고 Space로 바꿀 수
   있습니다.
-- 키보드 초점 링이 트랙에 보입니다(WCAG 2.4.7). 꺼짐 트랙은 어떤 면 위에서도 보이도록
-  채워진 `bg.track`을 씁니다(WCAG 1.4.11).
+- 키보드 초점 링이 트랙에 보입니다(WCAG 2.4.7). 꺼짐은 체크하지 않은 Checkbox처럼
+  `border.control` 테두리와 손잡이로 그려, 어떤 면 위에서도 3:1 이상입니다(WCAG 1.4.11).
 
 직접 챙겨야 하는 일
 

package/src/components/Switch/SwitchControl.tsx

@@ -2,23 +2,38 @@ import { forwardRef } from 'react';
 import { Switch as ChakraSwitch, SwitchControlProps } from '@chakra-ui/react';
 
 import { disabledControl } from '@/utils/disabledControl';
-import { focusRing } from '@/utils/focusRing';
+import { FOCUS_RING_SHADOW, focusRing } from '@/utils/focusRing';
+
+// Drawn as an inset shadow, not a border, so the thumb's travel and the
+// track's size stay exactly what Chakra's recipe computes.
+const OFF_OUTLINE = 'inset 0 0 0 1px var(--chakra-colors-border-control)';
 
 export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
   (props, ref) => (
     <ChakraSwitch.Control
       ref={ref}
-      // The off-state track is a meter surface — its extent is the information —
-      // so it needs a visible fill, not just an edge. bg.muted (gray.100) is
-      // only ~1.03:1 against the bg.sunken page wash (gray.50) and vanishes
-      // there; bg.track (gray.300) reads as a filled track on any background.
-      // The checked state is the self-defining primary.main fill.
-      bg="bg.track"
-      _checked={{ bg: 'primary.main' }}
+      // Off is drawn the way an unchecked Checkbox is: a bg.surface track with a
+      // border.control outline and a border.control thumb, each at least 3:1
+      // against what it sits on (WCAG 1.4.11). The previous off state, a
+      // bg.track fill with a bg.surface thumb, measured 1.3:1 (light) and
+      // 1.4:1 (dark) between thumb and track, so the thumb's position, the only
+      // thing that tells off from on, could not be seen.
+      // On is success.solid with a success.onSolid thumb. With a black (light) or
+      // pale (dark) primary fill, neither state carried colour, and dark-mode
+      // "on" read as light-mode "off"; green gives both modes one meaning.
+      bg="bg.surface"
+      boxShadow={OFF_OUTLINE}
+      _checked={{ bg: 'success.solid', boxShadow: 'none' }}
       animationStyle="feedback"
-      transitionProperty="background-color"
+      transitionProperty="background-color, box-shadow"
       _disabled={{ ...disabledControl, cursor: 'not-allowed' }}
       {...focusRing}
+      // focusRing's shadow would replace the outline; keep both while off.
+      _focusVisible={{
+        ...focusRing._focusVisible,
+        boxShadow: `${OFF_OUTLINE}, ${FOCUS_RING_SHADOW}`,
+        _checked: { boxShadow: FOCUS_RING_SHADOW },
+      }}
       {...props}
     >
       <ChakraSwitch.Thumb
@@ -29,12 +44,11 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
         // reverses direction — `standard` vs `emphasized` would not.
         animationStyle="spring"
         transitionProperty="translate"
-        // Chakra's default is a raw `white` thumb that stays `white` when
-        // checked via an undefined `colorPalette.contrast`. bg.surface reads
-        // as the same near-white in light and flips correctly in dark; the
-        // checked thumb is fg.onPrimary (cream) to match Checkbox/Radio.
-        bg="bg.surface"
-        _checked={{ bg: 'fg.onPrimary' }}
+        // Off: border.control, the same 3:1 control token as the outline.
+        // On: success.onSolid, the text colour success buttons put on the same
+        // fill (white in light, ink in dark).
+        bg="border.control"
+        _checked={{ bg: 'success.onSolid' }}
       />
     </ChakraSwitch.Control>
   )

package/src/theme/palette.generated.ts

@@ -332,7 +332,7 @@ export const SCHEMES = {
       "success-bg": "#E5EDDD",
       "success-border": "#C5D4B5",
       "success-fg": "#556344",
-      "success-solid": "#5E7A37",
+      "success-solid": "#30862D",
       "success-onSolid": "#FFFFFF",
       "warning-bg": "#FEE9BC",
       "warning-border": "#F0CF83",
@@ -514,7 +514,7 @@ export const SCHEMES = {
       "success-bg": "#E5EDDD",
       "success-border": "#7D8B6E",
       "success-fg": "#445133",
-      "success-solid": "#47611D",
+      "success-solid": "#036805",
       "success-onSolid": "#FFFFFF",
       "warning-bg": "#FEE9BC",
       "warning-border": "#A28336",
@@ -698,7 +698,7 @@ export const SCHEMES = {
       "success-bg": "#E5EDDD",
       "success-border": "#C5D4B5",
       "success-fg": "#556344",
-      "success-solid": "#5E7A37",
+      "success-solid": "#30862D",
       "success-onSolid": "#FFFFFF",
       "warning-bg": "#FEE9BC",
       "warning-border": "#F0CF83",
@@ -880,7 +880,7 @@ export const SCHEMES = {
       "success-bg": "#E5EDDD",
       "success-border": "#7D8B6E",
       "success-fg": "#445133",
-      "success-solid": "#47611D",
+      "success-solid": "#036805",
       "success-onSolid": "#FFFFFF",
       "warning-bg": "#FEE9BC",
       "warning-border": "#A28336",