Switch component overrides

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.1.2",
+    "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "framer-motion": "^6",

theme/components/Switch.ts

+import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
+import { cssVar } from '@chakra-ui/theme-tools';
+
+const $width = cssVar('switch-track-width');
+const $height = cssVar('switch-track-height');
+
+const Switch: ComponentMultiStyleConfig = {
+  parts: [ ],
+  sizes: {
+    md: {
+      container: {
+        [$width.variable]: '38px',
+        [$height.variable]: '18px',
+      },
+    },
+  },
+  baseStyle: {
+    track: {
+      p: '1px',
+    },
+  },
+}
+
+export default Switch;

theme/components/index.ts

+import Switch from './Switch';
+
+const components = {
+  Switch,
+}
+
+export default components;

theme/index.ts

@@ -3,11 +3,13 @@ import { extendTheme } from '@chakra-ui/react';
 import typography from './foundations/typography';
 import borders from './foundations/borders';
 import colors from './foundations/colors';
+import components from './components/index';
 
 const overrides = {
   ...typography,
   ...borders,
   colors,
+  components,
 }
 
 export default extendTheme(overrides);

yarn.lock

@@ -556,6 +556,14 @@
     "@chakra-ui/utils" "2.0.1"
     "@ctrl/tinycolor" "^3.4.0"
 
+"@chakra-ui/theme-tools@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.2.tgz#2f59f14f553dcb5ccc8e8492cb9524954fe1bf89"
+  integrity sha512-E01ZJZB4XVqkvn2hOXKQ/uVkvaPLQN1SyxAYXjFZGyZ1ppBLl362EWfY9IgWNzDITgq9MCJyQFfm2mXwQDUNzA==
+  dependencies:
+    "@chakra-ui/utils" "2.0.2"
+    "@ctrl/tinycolor" "^3.4.0"
+
 "@chakra-ui/theme@2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.0.3.tgz#51be178bdc841b9a54c4e6db320d75c004fc49f0"
@@ -609,6 +617,16 @@
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/utils@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.2.tgz#130ba1647ea2b94ad956ae4cbcf685838d350593"
+  integrity sha512-9AC/ir9zm0shgFG7kdzOKUH2Wx5VB71M3uRMEsMZf75YlhhiU7AvBNtWXnJu+CBiTi41rKa5A+2ImMOsuPfGbA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
 "@chakra-ui/visually-hidden@2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.1.tgz#93fc6dba340a8d32e5b17144de3a575b8b16250c"