@papyrus-ui/styles 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +7 -0
- package/README.md +50 -0
- package/css/styles.css +25609 -0
- package/css/styles.css.map +1 -0
- package/css/styles.min.css +2 -0
- package/css/styles.min.css.map +1 -0
- package/dist/cjs/const/atoms.js +238 -0
- package/dist/cjs/const/atoms.js.map +1 -0
- package/dist/cjs/const/themes.js +167 -0
- package/dist/cjs/const/themes.js.map +1 -0
- package/dist/cjs/index.js +69 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/styles/atoms.css.vanilla.js +10 -0
- package/dist/cjs/styles/atoms.css.vanilla.js.map +1 -0
- package/dist/cjs/styles/global.css.vanilla.js +8 -0
- package/dist/cjs/styles/global.css.vanilla.js.map +1 -0
- package/dist/cjs/styles/themes.css.vanilla.js +8 -0
- package/dist/cjs/styles/themes.css.vanilla.js.map +1 -0
- package/dist/cjs/styles/utility.css.vanilla.js +26 -0
- package/dist/cjs/styles/utility.css.vanilla.js.map +1 -0
- package/dist/cjs/utils/bp.js +69 -0
- package/dist/cjs/utils/bp.js.map +1 -0
- package/dist/cjs/utils/partition-atoms.js +13 -0
- package/dist/cjs/utils/partition-atoms.js.map +1 -0
- package/dist/cjs/utils/partition-object.js +20 -0
- package/dist/cjs/utils/partition-object.js.map +1 -0
- package/dist/es/const/atoms.js +201 -0
- package/dist/es/const/atoms.js.map +1 -0
- package/dist/es/const/themes.js +163 -0
- package/dist/es/const/themes.js.map +1 -0
- package/dist/es/index.js +9 -0
- package/dist/es/index.js.map +1 -0
- package/dist/es/styles/atoms.css.vanilla.js +6 -0
- package/dist/es/styles/atoms.css.vanilla.js.map +1 -0
- package/dist/es/styles/global.css.vanilla.js +4 -0
- package/dist/es/styles/global.css.vanilla.js.map +1 -0
- package/dist/es/styles/themes.css.vanilla.js +4 -0
- package/dist/es/styles/themes.css.vanilla.js.map +1 -0
- package/dist/es/styles/utility.css.vanilla.js +13 -0
- package/dist/es/styles/utility.css.vanilla.js.map +1 -0
- package/dist/es/utils/bp.js +62 -0
- package/dist/es/utils/bp.js.map +1 -0
- package/dist/es/utils/partition-atoms.js +9 -0
- package/dist/es/utils/partition-atoms.js.map +1 -0
- package/dist/es/utils/partition-object.js +16 -0
- package/dist/es/utils/partition-object.js.map +1 -0
- package/dist/types/const/atoms.d.ts +544 -0
- package/dist/types/const/index.d.ts +2 -0
- package/dist/types/const/themes.d.ts +2 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/types/styles/atoms.css.d.ts +12107 -0
- package/dist/types/styles/global.css.d.ts +165 -0
- package/dist/types/styles/themes.css.d.ts +1 -0
- package/dist/types/styles/utility.css.d.ts +22 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types/types/theme.d.ts +158 -0
- package/dist/types/utils/bp.d.ts +7 -0
- package/dist/types/utils/partition-atoms.d.ts +3 -0
- package/dist/types/utils/partition-object.d.ts +5 -0
- package/fonts/boxicons.eot +0 -0
- package/fonts/boxicons.svg +1660 -0
- package/fonts/boxicons.ttf +0 -0
- package/fonts/boxicons.woff +0 -0
- package/fonts/boxicons.woff2 +0 -0
- package/package.json +52 -0
package/CHANGELOG.md
ADDED
package/README.md
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
# @papyrus-ui/base
|
2
|
+
|
3
|
+
Global styles, themes and style utilities for implementing components based on the Papyrus UI design system.
|
4
|
+
|
5
|
+
## Getting Started:
|
6
|
+
|
7
|
+
1. **Create Utility Classes with `atoms()`**
|
8
|
+
|
9
|
+
Define utility classes using the atoms() function provided by @papyrus-ui/base.
|
10
|
+
|
11
|
+
```ts
|
12
|
+
// card.css.ts
|
13
|
+
|
14
|
+
import { atoms } from '@papyrus-ui/styles';
|
15
|
+
|
16
|
+
export const card = atoms({
|
17
|
+
p: 4,
|
18
|
+
rounded: 'md',
|
19
|
+
shadow: 'md',
|
20
|
+
bg: 'white',
|
21
|
+
});
|
22
|
+
```
|
23
|
+
|
24
|
+
Atoms can be generated at runtime as well. However, defining them in .css.ts files ensures that all calculations are
|
25
|
+
performed during the build phase.
|
26
|
+
|
27
|
+
2. **Create a Card Component**
|
28
|
+
|
29
|
+
Utilize the defined utility class (card) to create a custom Card component:
|
30
|
+
|
31
|
+
```tsx
|
32
|
+
import React from 'react';
|
33
|
+
import * as S from './card.css.ts';
|
34
|
+
|
35
|
+
const Card: React.FC<{ title: string; content: string }> = ({ title, content }) => {
|
36
|
+
return (
|
37
|
+
<div className={S.card}>
|
38
|
+
<h2>{title}</h2>
|
39
|
+
<p>{content}</p>
|
40
|
+
</div>
|
41
|
+
);
|
42
|
+
};
|
43
|
+
|
44
|
+
export default Card;
|
45
|
+
```
|
46
|
+
|
47
|
+
## Contributing
|
48
|
+
|
49
|
+
We welcome contributions to enhance Papyrus UI. To contribute, fork the repository, make your changes, and submit a pull
|
50
|
+
request. If you encounter issues or have suggestions, please open an issue on GitHub.
|