figma-kit 1.0.0-beta.27 → 1.0.0-beta.28

package/dist/styles.css

@@ -1248,6 +1248,16 @@
     background-color: var(--figma-color-bg-selected-strong);
     --color-icon: var(--figma-color-icon-onbrand);
   }
+:root,
+.light,
+.light-theme {
+  --switch-border-color: #00000033;
+  --switch-thumb-outline-color-unchecked: #00000033;
+  --switch-thumb-outline-color-checked: #0000001a;
+}
+.figma-dark {
+  --switch-border-color: #ffffff33;
+}
 .fp-switchRoot {
   appearance: none;
   box-sizing: border-box;
@@ -1266,18 +1276,26 @@
   outline and the background in the focused mode as it is in Figma.  */
 }
 .fp-switchRoot::before {
+    box-sizing: border-box;
     position: absolute;
     inset: 0;
+    border: 1px solid var(--switch-border-color);
     border-radius: var(--radius-full);
     background: none;
     content: '';
   }
 .fp-switchRoot[data-unchecked]::before {
+    background: var(--figma-color-bg-secondary);
+  }
+.fp-switchRoot[data-unchecked]:active::before {
     background: var(--figma-color-bg-tertiary);
   }
 .fp-switchRoot[data-checked]::before {
     background: var(--figma-color-bg-brand);
   }
+.fp-switchRoot[data-checked]:active::before {
+    background: var(--figma-color-bg-brand-pressed);
+  }
 .fp-switchRoot:focus-visible {
     outline-offset: -1px;
     outline: 1px solid var(--figma-color-border-selected-strong);
@@ -1296,22 +1314,21 @@
 .fp-switchThumb {
   box-sizing: border-box;
   position: absolute;
-  top: 1px;
-  left: 1px;
-  height: var(--space-3_5);
-  width: var(--space-3_5);
+  top: var(--space-1);
+  left: var(--space-1);
+  height: var(--space-2);
+  width: var(--space-3);
   border-radius: var(--radius-full);
+  outline: 1px solid var(--switch-thumb-outline-color-unchecked);
   background: var(--figma-color-icon-onbrand);
   transition: all 0.08s ease-out;
 }
 .fp-switchThumb[data-disabled] {
     background-color: var(--figma-color-icon-ondisabled);
   }
-.fp-switchThumb[data-unchecked] {
-    left: 1px;
-  }
 .fp-switchThumb[data-checked] {
-    left: calc(100% - var(--space-3_5) - 1px);
+    left: calc(100% - var(--space-3) - var(--space-1));
+    outline-color: var(--switch-thumb-outline-color-checked);
   }
 :root,
 .light,

package/dist/tailwind.css

@@ -1466,6 +1466,18 @@
 }
 @layer components {
 
+:root,
+.light,
+.light-theme {
+  --switch-border-color: #00000033;
+  --switch-thumb-outline-color-unchecked: #00000033;
+  --switch-thumb-outline-color-checked: #0000001a;
+}
+
+.figma-dark {
+  --switch-border-color: #ffffff33;
+}
+
 .fp-switchRoot {
   appearance: none;
   box-sizing: border-box;
@@ -1484,14 +1496,20 @@
   outline and the background in the focused mode as it is in Figma.  */
 }
   .fp-switchRoot::before {
+    box-sizing: border-box;
     position: absolute;
     inset: 0;
+    border: 1px solid var(--switch-border-color);
     border-radius: var(--radius-full);
     background: none;
     content: '';
   }
 
   .fp-switchRoot[data-unchecked]::before {
+    background: var(--figma-color-bg-secondary);
+  }
+
+  .fp-switchRoot[data-unchecked]:active::before {
     background: var(--figma-color-bg-tertiary);
   }
 
@@ -1499,6 +1517,10 @@
     background: var(--figma-color-bg-brand);
   }
 
+  .fp-switchRoot[data-checked]:active::before {
+    background: var(--figma-color-bg-brand-pressed);
+  }
+
   .fp-switchRoot:focus-visible {
     outline-offset: -1px;
     outline: 1px solid var(--figma-color-border-selected-strong);
@@ -1520,11 +1542,12 @@
 .fp-switchThumb {
   box-sizing: border-box;
   position: absolute;
-  top: 1px;
-  left: 1px;
-  height: var(--space-3_5);
-  width: var(--space-3_5);
+  top: var(--space-1);
+  left: var(--space-1);
+  height: var(--space-2);
+  width: var(--space-3);
   border-radius: var(--radius-full);
+  outline: 1px solid var(--switch-thumb-outline-color-unchecked);
   background: var(--figma-color-icon-onbrand);
   transition: all 0.08s ease-out;
 }
@@ -1533,12 +1556,9 @@
     background-color: var(--figma-color-icon-ondisabled);
   }
 
-  .fp-switchThumb[data-unchecked] {
-    left: 1px;
-  }
-
   .fp-switchThumb[data-checked] {
-    left: calc(100% - var(--space-3_5) - 1px);
+    left: calc(100% - var(--space-3) - var(--space-1));
+    outline-color: var(--switch-thumb-outline-color-checked);
   }
 }
 @layer components {

package/package.json

@@ -2,7 +2,7 @@
   "name": "figma-kit",
   "description": "A set of React components for building Figma plugins.",
   "homepage": "https://figma-kit.dev",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.28",
   "license": "MIT",
   "repository": {
     "type": "git",