chore: update docs

Author: anubra266

README.md

@@ -89,6 +89,8 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 - [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md) `all`
 - [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) `all`
 - [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all`
+- [`@pandacss/prefer-composite-properties`](docs/rules/prefer-composite-properties.md) `all`
+- [`@pandacss/prefer-unified-property-style`](docs/rules/prefer-unified-property-style.md) `all`, `recommended`
 
 ## Settings
 

docs/rules/prefer-atomic-properties.md

@@ -2,7 +2,7 @@
 
 # prefer-atomic-properties
 
-Encourage the use of atomic properties instead of composite shorthand properties in the codebase.
+Encourage the use of atomic properties instead of composite properties in the codebase.
 
 📋 This rule is enabled in `plugin:@pandacss/all`.
 

docs/rules/prefer-composite-properties.md

@@ -0,0 +1,60 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# prefer-composite-properties
+
+Encourage the use of composite properties instead of atomic properties in the codebase.
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ rowGap: '4', columnGap: '4' });
+```
+```js
+
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ bgColor: 'red.100' })} />;
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  borderTopStyle: 'solid', borderTopWidth: '1px', borderTopColor: 'blue' }} />;
+}
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ gap: '4' });
+```
+```js
+
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ background: 'red.100' })} />;
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  borderTop: 'solid 1px blue' }} />;
+}
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/prefer-composite-properties.ts)
+* [Test source](/tests/prefer-composite-properties.test.ts)

docs/rules/prefer-unified-property-style.md

@@ -0,0 +1,48 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# prefer-unified-property-style
+
+Discourage against mixing atomic and composite forms of the same property in a style declaration. Atomic styles give more consistent results
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+📋 This rule is enabled in `plugin:@pandacss/recommended`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+const color = 'red.100';
+const styles = css({ borderRadius:"lg", borderTopRightRadius: "0" });
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  const bool = true;
+  return <Circle border="solid 1px" borderColor="gray.800" />;
+}
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ borderColor: 'gray.900', borderWidth: '1px' });
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return <Circle marginTop="2" marginRight="3" />;
+}
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/prefer-unified-property-style.ts)
+* [Test source](/tests/prefer-unified-property-style.test.ts)