Update border, outline, svg utilities (#1739)

chakra-ui · Dec 1, 2023 · 428e540 · 428e540 · vercel · Dec 1, 2023
1 parent 6a9b5b6
commit 428e540
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 1 deletion.
diff --git a/.changeset/tiny-tips-warn.md b/.changeset/tiny-tips-warn.md
@@ -0,0 +1,8 @@
+---
+"@pandacss/preset-base": patch
+"website": patch
+---
+
+- Added `strokeWidth` to svg utilities.
+- Connected `outlineWidth` utility to `borderWidths` token.
+- Add `borderWidth`, `borderTopWidth`, `borderLeftWidth`, `borderRightWidth`, `borderBottomWidth`  to berder utilities.
diff --git a/packages/generator/__tests__/generate-prop-types.test.ts b/packages/generator/__tests__/generate-prop-types.test.ts
@@ -65,6 +65,7 @@ describe('generate property types', () => {
       	marginInline: \\"auto\\" | Tokens[\\"spacing\\"];
       	marginInlineEnd: \\"auto\\" | Tokens[\\"spacing\\"];
       	marginInlineStart: \\"auto\\" | Tokens[\\"spacing\\"];
+      	outlineWidth: Tokens[\\"borderWidths\\"];
       	outlineColor: Tokens[\\"colors\\"];
       	outline: Tokens[\\"borders\\"];
       	outlineOffset: Tokens[\\"spacing\\"];
@@ -122,6 +123,11 @@ describe('generate property types', () => {
       	borderEndEndRadius: Tokens[\\"radii\\"];
       	borderEndRadius: Tokens[\\"radii\\"] | CssProperties[\\"borderRadius\\"];
       	border: Tokens[\\"borders\\"];
+      	borderWidth: Tokens[\\"borderWidths\\"];
+      	borderTopWidth: Tokens[\\"borderWidths\\"];
+      	borderLeftWidth: Tokens[\\"borderWidths\\"];
+      	borderRightWidth: Tokens[\\"borderWidths\\"];
+      	borderBottomWidth: Tokens[\\"borderWidths\\"];
       	borderColor: Tokens[\\"colors\\"];
       	borderInline: Tokens[\\"borders\\"];
       	borderInlineWidth: Tokens[\\"borderWidths\\"];
@@ -207,6 +213,7 @@ describe('generate property types', () => {
       	scrollSnapMarginRight: Tokens[\\"spacing\\"];
       	fill: Tokens[\\"colors\\"];
       	stroke: Tokens[\\"colors\\"];
+      	strokeWidth: Tokens[\\"borderWidths\\"];
       	srOnly: boolean;
       	debug: boolean;
       	colorPalette: \\"current\\" | \\"black\\" | \\"white\\" | \\"transparent\\" | \\"rose\\" | \\"pink\\" | \\"fuchsia\\" | \\"purple\\" | \\"violet\\" | \\"indigo\\" | \\"blue\\" | \\"sky\\" | \\"cyan\\" | \\"teal\\" | \\"emerald\\" | \\"green\\" | \\"lime\\" | \\"yellow\\" | \\"amber\\" | \\"orange\\" | \\"red\\" | \\"neutral\\" | \\"stone\\" | \\"zinc\\" | \\"gray\\" | \\"slate\\" | \\"deep\\" | \\"deep.test\\" | \\"deep.test.pool\\" | \\"primary\\" | \\"secondary\\" | \\"complex\\" | \\"surface\\" | \\"button\\" | \\"button.card\\";
@@ -380,6 +387,7 @@ describe('generate property types', () => {
       	marginInline: \\"auto\\" | Tokens[\\"spacing\\"];
       	marginInlineEnd: \\"auto\\" | Tokens[\\"spacing\\"];
       	marginInlineStart: \\"auto\\" | Tokens[\\"spacing\\"];
+      	outlineWidth: Tokens[\\"borderWidths\\"];
       	outlineColor: Tokens[\\"colors\\"];
       	outline: Tokens[\\"borders\\"];
       	outlineOffset: Tokens[\\"spacing\\"];
@@ -436,6 +444,11 @@ describe('generate property types', () => {
       	borderEndEndRadius: Tokens[\\"radii\\"];
       	borderEndRadius: Tokens[\\"radii\\"];
       	border: Tokens[\\"borders\\"];
+      	borderWidth: Tokens[\\"borderWidths\\"];
+      	borderTopWidth: Tokens[\\"borderWidths\\"];
+      	borderLeftWidth: Tokens[\\"borderWidths\\"];
+      	borderRightWidth: Tokens[\\"borderWidths\\"];
+      	borderBottomWidth: Tokens[\\"borderWidths\\"];
       	borderColor: Tokens[\\"colors\\"];
       	borderInline: Tokens[\\"borders\\"];
       	borderInlineWidth: Tokens[\\"borderWidths\\"];
@@ -521,6 +534,7 @@ describe('generate property types', () => {
       	scrollSnapMarginRight: Tokens[\\"spacing\\"];
       	fill: Tokens[\\"colors\\"];
       	stroke: Tokens[\\"colors\\"];
+      	strokeWidth: Tokens[\\"borderWidths\\"];
       	srOnly: boolean;
       	debug: boolean;
       	colorPalette: \\"current\\" | \\"black\\" | \\"white\\" | \\"transparent\\" | \\"rose\\" | \\"pink\\" | \\"fuchsia\\" | \\"purple\\" | \\"violet\\" | \\"indigo\\" | \\"blue\\" | \\"sky\\" | \\"cyan\\" | \\"teal\\" | \\"emerald\\" | \\"green\\" | \\"lime\\" | \\"yellow\\" | \\"amber\\" | \\"orange\\" | \\"red\\" | \\"neutral\\" | \\"stone\\" | \\"zinc\\" | \\"gray\\" | \\"slate\\" | \\"deep\\" | \\"deep.test\\" | \\"deep.test.pool\\" | \\"primary\\" | \\"secondary\\" | \\"complex\\" | \\"surface\\" | \\"button\\" | \\"button.card\\";

diff --git a/packages/preset-base/src/utilities/border.ts b/packages/preset-base/src/utilities/border.ts
@@ -122,6 +122,26 @@ export const border: UtilityConfig = {
     className: 'border',
     values: 'borders',
   },
+  borderWidth: {
+    className: 'border-w',
+    values: 'borderWidths',
+  },
+  borderTopWidth: {
+    className: 'border-tw',
+    values: 'borderWidths',
+  },
+  borderLeftWidth: {
+    className: 'border-lw',
+    values: 'borderWidths',
+  },
+  borderRightWidth: {
+    className: 'border-rw',
+    values: 'borderWidths',
+  },
+  borderBottomWidth: {
+    className: 'border-bw',
+    values: 'borderWidths',
+  },
   borderColor: {
     className: 'border',
     values: 'colors',

diff --git a/packages/preset-base/src/utilities/outline.ts b/packages/preset-base/src/utilities/outline.ts
@@ -4,6 +4,7 @@ export const outline: UtilityConfig = {
   outlineWidth: {
     className: 'ring',
     shorthand: 'ringWidth',
+    values: 'borderWidths',
   },
   outlineColor: {
     className: 'ring',

diff --git a/packages/preset-base/src/utilities/svg.ts b/packages/preset-base/src/utilities/svg.ts
@@ -9,4 +9,8 @@ export const svg: UtilityConfig = {
     className: 'stroke',
     values: 'colors',
   },
+  strokeWidth: {
+    className: 'stroke-w',
+    values: 'borderWidths',
+  },
 }
diff --git a/website/pages/docs/utilities/outline.md b/website/pages/docs/utilities/outline.md
@@ -25,13 +25,14 @@ Set the width, color, and style of the outline.
 Change the width of the outline.
 
 ```jsx
+<div className={css({ outlineWidth: '4' })} />
 <div className={css({ outlineWidth: '2px' })} />
 <div className={css({ ringWidth: '2px' })} /> // shorthand
 ```
 
 | Prop                         | CSS Property    | Token Category |
 | ---------------------------- | --------------- | -------------- |
-| `ringWidth` , `outlineWidth` | `outline-width` | none           |
+| `ringWidth` , `outlineWidth` | `outline-width` | `borderWidths` |
 
 ## Outline Color
 

diff --git a/website/pages/docs/utilities/svg.md b/website/pages/docs/utilities/svg.md
@@ -30,3 +30,15 @@ Change the stroke color of an SVG element.
 | Prop     | CSS Property | Token Category |
 | -------- | ------------ | -------------- |
 | `stroke` | `stroke`     | colors         |
+
+## Stroke Width
+
+Change the stroke width of an SVG element.
+
+```jsx
+<div className={css({ strokeWidth: '1px' })} />
+```
+
+| Prop          | CSS Property | Token Category |
+| ------------- | ------------ | -------------- |
+| `strokeWidth` | `stroke-width`     | borderWidths   |