code · pull · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/.changeset/fix-tags-input-overflow.md b/.changeset/fix-tags-input-overflow.md
@@ -5,3 +5,6 @@
 
 - **TagsInput**: Fix overflow issue where very long tags would overflow the
   container instead of truncating with ellipsis.
+
+- **CheckboxGroup**: Fix type issue where `CheckboxGroupProps` could not be
+  passed to the `CheckboxGroup` component.
diff --git a/.changeset/improve-outline-border-visibility.md b/.changeset/improve-outline-border-visibility.md
@@ -0,0 +1,19 @@
+---
+"@chakra-ui/react": minor
+"@chakra-ui/panda-preset": minor
+---
+
+### Added
+
+- **Semantic Tokens**: Add new `border` semantic token to all color palettes
+  (`gray.300`/`gray.700` for gray, `color.500`/`color.400` for colored palettes)
+  to improve outline component appearance
+
+### Changed
+
+- **Button, Badge, Tag, Checkbox**: Update outline variants to use
+  `colorPalette.border` instead of `colorPalette.muted` or global `border` token
+  for better appearance, especially for non-gray color palettes.
+
+  > **NOTE**: All changes include CSS variable fallbacks to `colorPalette.muted`
+  > for backward compatibility.
diff --git a/apps/compositions/src/examples/drawer-non-modal.tsx b/apps/compositions/src/examples/drawer-non-modal.tsx
@@ -0,0 +1,37 @@
+import { Button, CloseButton, Drawer, Portal } from "@chakra-ui/react"
+
+export const DrawerNonModal = () => {
+  return (
+    <Drawer.Root closeOnInteractOutside={false} modal={false}>
+      <Drawer.Trigger asChild>
+        <Button variant="outline" size="sm">
+          Open Drawer
+        </Button>
+      </Drawer.Trigger>
+      <Portal>
+        <Drawer.Positioner pointerEvents="none">
+          <Drawer.Content>
+            <Drawer.Header>
+              <Drawer.Title>Drawer Title</Drawer.Title>
+            </Drawer.Header>
+            <Drawer.Body>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Drawer.ActionTrigger asChild>
+                <Button variant="outline">Cancel</Button>
+              </Drawer.ActionTrigger>
+              <Button>Save</Button>
+            </Drawer.Footer>
+            <Drawer.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Drawer.CloseTrigger>
+          </Drawer.Content>
+        </Drawer.Positioner>
+      </Portal>
+    </Drawer.Root>
+  )
+}
diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
@@ -103,6 +103,17 @@ corresponding sizes. For example:
 
 <ExampleTabs name="drawer-with-conditional-variants" />
 
+### Non-Modal Drawer
+
+We don't recommend using a non-modal drawer due to the accessibility concerns
+they present. In event you need it, here's what you can do:
+
+- set the `modal` prop to `false`
+- set `pointerEvents` to `none` on the `Drawer.Positioner` component
+- (optional)set the `closeOnInteractOutside` prop to `false`
+
+<ExampleTabs name="drawer-non-modal" />
+
 ## Props
 
 ### Root

diff --git a/apps/www/public/r/examples/drawer.json b/apps/www/public/r/examples/drawer.json
@@ -95,6 +95,15 @@
         "import {\n  Button,\n  CloseButton,\n  Drawer,\n  For,\n  HStack,\n  Kbd,\n  Portal,\n} from \"@chakra-ui/react\""
       ],
       "importPath": "import { Drawer } from \"@chakra-ui/react\""
+    },
+    {
+      "name": "drawer-non-modal",
+      "content": "export const DrawerNonModal = () => {\n  return (\n    <Drawer.Root closeOnInteractOutside={false} modal={false}>\n      <Drawer.Trigger asChild>\n        <Button variant=\"outline\" size=\"sm\">\n          Open Drawer\n        </Button>\n      </Drawer.Trigger>\n      <Portal>\n        <Drawer.Positioner pointerEvents=\"none\">\n          <Drawer.Content>\n            <Drawer.Header>\n              <Drawer.Title>Drawer Title</Drawer.Title>\n            </Drawer.Header>\n            <Drawer.Body>\n              <p>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua.\n              </p>\n            </Drawer.Body>\n            <Drawer.Footer>\n              <Drawer.ActionTrigger asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </Drawer.ActionTrigger>\n              <Button>Save</Button>\n            </Drawer.Footer>\n            <Drawer.CloseTrigger asChild>\n              <CloseButton size=\"sm\" />\n            </Drawer.CloseTrigger>\n          </Drawer.Content>\n        </Drawer.Positioner>\n      </Portal>\n    </Drawer.Root>\n  )\n}\n",
+      "hasSnippet": false,
+      "importPaths": [
+        "import { Button, CloseButton, Drawer, Portal } from \"@chakra-ui/react\""
+      ],
+      "importPath": "import { Drawer } from \"@chakra-ui/react\""
     }
   ]
-}
+}
diff --git a/apps/www/public/r/examples/index.json b/apps/www/public/r/examples/index.json
@@ -289,6 +289,7 @@
   "drawer-with-offset",
   "drawer-with-placement",
   "drawer-with-sizes",
+  "drawer-non-modal",
   "editable-basic",
   "editable-controlled",
   "editable-disabled",

diff --git a/packages/panda-preset/src/recipes/badge.ts b/packages/panda-preset/src/recipes/badge.ts
@@ -24,8 +24,10 @@ export const badgeRecipe = defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted",
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))",
       },
       surface: {
         bg: "colorPalette.subtle",

diff --git a/packages/panda-preset/src/recipes/button.ts b/packages/panda-preset/src/recipes/button.ts
@@ -147,7 +147,9 @@ export const buttonRecipe = defineRecipe({
       },
       outline: {
         borderWidth: "1px",
-        borderColor: "colorPalette.muted",
+        "--outline-color-legacy": "colors.colorPalette.muted",
+        "--outline-color": "colors.colorPalette.border",
+        borderColor: "var(--outline-color, var(--outline-color-legacy))",
         color: "colorPalette.fg",
         _hover: {
           bg: "colorPalette.subtle",

diff --git a/packages/panda-preset/src/recipes/code.ts b/packages/panda-preset/src/recipes/code.ts
@@ -20,8 +20,10 @@ export const codeRecipe = defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted",
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))",
       },
       surface: {
         bg: "colorPalette.subtle",

diff --git a/packages/panda-preset/src/semantic-tokens/colors.ts b/packages/panda-preset/src/semantic-tokens/colors.ts
@@ -212,6 +212,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.gray.400}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}",
+      },
+    },
   },
   red: {
     contrast: {
@@ -256,6 +262,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.red.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.red.500}",
+        _dark: "{colors.red.400}",
+      },
+    },
   },
   orange: {
     contrast: {
@@ -300,6 +312,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.orange.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.orange.500}",
+        _dark: "{colors.orange.400}",
+      },
+    },
   },
   green: {
     contrast: {
@@ -344,6 +362,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.green.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.green.500}",
+        _dark: "{colors.green.400}",
+      },
+    },
   },
   blue: {
     contrast: {
@@ -388,6 +412,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.blue.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.blue.500}",
+        _dark: "{colors.blue.400}",
+      },
+    },
   },
   yellow: {
     contrast: {
@@ -432,6 +462,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.yellow.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.yellow.500}",
+        _dark: "{colors.yellow.500}",
+      },
+    },
   },
   teal: {
     contrast: {
@@ -476,6 +512,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.teal.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.teal.500}",
+        _dark: "{colors.teal.400}",
+      },
+    },
   },
   purple: {
     contrast: {
@@ -520,6 +562,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.purple.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.purple.500}",
+        _dark: "{colors.purple.400}",
+      },
+    },
   },
   pink: {
     contrast: {
@@ -564,6 +612,12 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.pink.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.pink.500}",
+        _dark: "{colors.pink.400}",
+      },
+    },
   },
   cyan: {
     contrast: {
@@ -608,5 +662,11 @@ export const colors = defineSemanticTokens.colors({
         _dark: "{colors.cyan.500}",
       },
     },
+    border: {
+      value: {
+        _light: "{colors.cyan.500}",
+        _dark: "{colors.cyan.400}",
+      },
+    },
   },
 })
diff --git a/packages/panda-preset/src/slot-recipes/alert.ts b/packages/panda-preset/src/slot-recipes/alert.ts
@@ -99,7 +99,9 @@ export const alertSlotRecipe = defineSlotRecipe({
         root: {
           color: "colorPalette.fg",
           shadow: "inset 0 0 0px 1px var(--shadow-color)",
-          shadowColor: "colorPalette.muted",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))",
         },
         indicator: {
           color: "colorPalette.fg",

diff --git a/packages/panda-preset/src/slot-recipes/avatar.ts b/packages/panda-preset/src/slot-recipes/avatar.ts
@@ -104,7 +104,9 @@ export const avatarSlotRecipe = defineSlotRecipe({
         root: {
           color: "colorPalette.fg",
           borderWidth: "1px",
-          borderColor: "colorPalette.muted",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          borderColor: "var(--outline-shadow, var(--outline-shadow-legacy))",
         },
       },
     },

diff --git a/packages/panda-preset/src/slot-recipes/carousel.ts b/packages/panda-preset/src/slot-recipes/carousel.ts
@@ -7,54 +7,63 @@ export const carouselSlotRecipe = defineSlotRecipe({
     "itemGroup",
     "item",
     "control",
-    "prevTrigger",
     "nextTrigger",
-    "autoplayTrigger",
+    "prevTrigger",
     "indicatorGroup",
     "indicator",
+    "autoplayTrigger",
   ],
   base: {
     root: {
       position: "relative",
-      overflow: "hidden",
-      "--carousel-spacing": "spacing.4",
-    },
-    itemGroup: {
       display: "flex",
-      transition: "transform 0.3s ease-in-out",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column",
+      },
+      _vertical: {
+        flexDirection: "row",
+      },
     },
     item: {
-      minWidth: "0",
-      flex: "0 0 auto",
-      width: "full",
+      _horizontal: {
+        width: "100%",
+      },
+      _vertical: {
+        height: "100%",
+      },
     },
     control: {
-      position: "absolute",
-      top: "50%",
-      left: 0,
-      width: "100%",
       display: "flex",
-      justifyContent: "space-between",
       alignItems: "center",
-      transform: "translateY(-50%)",
-      px: "var(--carousel-spacing)",
-      zIndex: 2,
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%",
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%",
+      },
     },
     indicatorGroup: {
       display: "flex",
       justifyContent: "center",
-      gap: "2",
-      mt: "var(--carousel-spacing)",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row",
+      },
+      _vertical: {
+        flexDirection: "column",
+      },
     },
     indicator: {
-      width: "3",
-      height: "3",
+      width: "2.5",
+      height: "2.5",
       borderRadius: "full",
-      bg: "bg.muted",
-      cursor: "pointer",
-      transition: "all 0.2s",
-      "&[data-current]": {
-        bg: "fg",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid",
       },
     },
   },

diff --git a/packages/panda-preset/src/slot-recipes/tag.ts b/packages/panda-preset/src/slot-recipes/tag.ts
@@ -121,8 +121,10 @@ export const tagSlotRecipe = defineSlotRecipe({
       outline: {
         root: {
           color: "colorPalette.fg",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
           shadow: "inset 0 0 0px 1px var(--shadow-color)",
-          shadowColor: "colorPalette.muted",
+          shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))",
         },
       },
       surface: {