@papyrus-ui/styles 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @papyrus-ui/styles
+
+## 0.1.0
+
+### Minor Changes
+
+- ade82e1: Initial version

package/README.md

@@ -0,0 +1,50 @@
+# @papyrus-ui/base
+
+Global styles, themes and style utilities for implementing components based on the Papyrus UI design system.
+
+## Getting Started:
+
+1. **Create Utility Classes with `atoms()`**
+
+    Define utility classes using the atoms() function provided by @papyrus-ui/base.
+  
+    ```ts
+    // card.css.ts
+    
+    import { atoms } from '@papyrus-ui/styles';
+
+    export const card = atoms({
+      p: 4,
+      rounded: 'md',
+      shadow: 'md',
+      bg: 'white',
+    });
+    ```
+
+    Atoms can be generated at runtime as well. However, defining them in .css.ts files ensures that all calculations are
+    performed during the build phase.
+   
+2. **Create a Card Component**
+    
+    Utilize the defined utility class (card) to create a custom Card component:
+
+    ```tsx
+    import React from 'react';
+    import * as S from './card.css.ts';
+    
+    const Card: React.FC<{ title: string; content: string }> = ({ title, content }) => {
+      return (
+        <div className={S.card}>
+          <h2>{title}</h2>
+          <p>{content}</p>
+        </div>
+      );
+    };
+    
+    export default Card;
+    ```
+   
+## Contributing
+
+We welcome contributions to enhance Papyrus UI. To contribute, fork the repository, make your changes, and submit a pull
+request. If you encounter issues or have suggestions, please open an issue on GitHub.