fix: scrollbar gutter

chakra-ui · Dec 6, 2024 · af9715a · af9715a
1 parent ab827ea
commit af9715a
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 6 deletions.
diff --git a/.changeset/six-doors-live.md b/.changeset/six-doors-live.md
@@ -0,0 +1,7 @@
+---
+'@pandacss/preset-base': patch
+'@pandacss/generator': patch
+---
+
+Fix issue where `scrollbarGutter` property incorrectly referenced spacing tokens. The only valid values are `auto`,
+`stable`, and `both-edges`.
diff --git a/packages/generator/__tests__/generate-prop-types.test.ts b/packages/generator/__tests__/generate-prop-types.test.ts
@@ -165,7 +165,6 @@ describe('generate property types', () => {
       	caretColor: Tokens["colors"];
       	scrollbar: "visible" | "hidden";
       	scrollbarColor: Tokens["colors"];
-      	scrollbarGutter: Tokens["spacing"];
       	scrollbarWidth: Tokens["sizes"];
       	scrollMargin: Tokens["spacing"];
       	scrollMarginLeft: Tokens["spacing"];

diff --git a/packages/generator/__tests__/generate-style-props.test.ts b/packages/generator/__tests__/generate-style-props.test.ts
@@ -4846,7 +4846,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
          */
-      scrollbarGutter?: ConditionalValue<UtilityValues["scrollbarGutter"] | CssVars | CssProperties["scrollbarGutter"] | AnyString>
+      scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
        /**
          * The **\`scrollbar-width\`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
          *
@@ -12318,7 +12318,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
          */
-      scrollbarGutter?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollbarGutter"] | CssVars>>
+      scrollbarGutter?: ConditionalValue<WithEscapeHatch<CssProperties["scrollbarGutter"]>>
        /**
          * The **\`scrollbar-width\`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
          *

diff --git a/packages/preset-base/src/utilities/interactivity.ts b/packages/preset-base/src/utilities/interactivity.ts
@@ -53,7 +53,6 @@ export const interactivity: UtilityConfig = {
   },
   scrollbarGutter: {
     className: 'scr-bar-g',
-    values: 'spacing',
     group: 'Scroll',
   },
   scrollbarWidth: {

diff --git a/packages/studio/styled-system/types/prop-type.d.ts b/packages/studio/styled-system/types/prop-type.d.ts
@@ -161,7 +161,6 @@ export interface UtilityValues {
 	caretColor: Tokens["colors"];
 	scrollbar: "visible" | "hidden";
 	scrollbarColor: Tokens["colors"];
-	scrollbarGutter: Tokens["spacing"];
 	scrollbarWidth: Tokens["sizes"];
 	scrollMargin: Tokens["spacing"];
 	scrollMarginLeft: Tokens["spacing"];

diff --git a/packages/studio/styled-system/types/style-props.d.ts b/packages/studio/styled-system/types/style-props.d.ts
@@ -4840,7 +4840,7 @@ scrollbarColor?: ConditionalValue<UtilityValues["scrollbarColor"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
    */
-scrollbarGutter?: ConditionalValue<UtilityValues["scrollbarGutter"] | CssVars | CssProperties["scrollbarGutter"] | AnyString>
+scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
  /**
    * The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
    *