@ivao/atmosphere-react 2.1.0-next.0 → 3.0.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -25
- package/dist/atmosphere-react.js +5629 -5124
- package/dist/atmosphere-react.js.map +1 -1
- package/dist/react-components.d.ts +23 -8
- package/dist/styles/index.css +2 -3
- package/dist/styles/theme.css +207 -0
- package/package.json +18 -15
- package/src/styles/colors.css +0 -98
- package/src/styles/index.css +0 -109
- package/tailwind.preset.ts +0 -238
package/README.md
CHANGED
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
### Requirements
|
|
6
6
|
|
|
7
|
-
React version:
|
|
7
|
+
React version: 18.2 or newer.
|
|
8
|
+
|
|
9
|
+
The Tailwind CSS integration uses Tailwind CSS v4 and its modern browser
|
|
10
|
+
baseline: Safari 16.4+, Chrome 111+, and Firefox 128+.
|
|
8
11
|
|
|
9
12
|
### How to install
|
|
10
13
|
|
|
@@ -18,41 +21,26 @@ pnpm add @ivao/atmosphere-react
|
|
|
18
21
|
|
|
19
22
|
### Configure
|
|
20
23
|
|
|
21
|
-
####
|
|
22
|
-
|
|
23
|
-
If you want to use tailwindcss classes, customizations or overrides,
|
|
24
|
-
you need to add our [tailwind preset](https://v3.tailwindcss.com/docs/presets) to your `tailwind.config.ts` file.
|
|
25
|
-
|
|
26
|
-
```typescript
|
|
27
|
-
import ivaoPreset from '@ivao/atmosphere-react/tailwind.preset.ts'; // import the preset
|
|
28
|
-
|
|
29
|
-
import { Config } from 'tailwindcss';
|
|
30
|
-
|
|
31
|
-
export default {
|
|
32
|
-
content: [
|
|
33
|
-
'./src/**/*.tsx', // your files here...
|
|
34
|
-
'./node_modules/@ivao/atmosphere-react/dist/atmosphere-react.js', // let tailwind know about our components
|
|
35
|
-
],
|
|
36
|
-
presets: [ivaoPreset], // add the preset here
|
|
37
|
-
} satisfies Config;
|
|
38
|
-
```
|
|
24
|
+
#### Tailwind CSS v4
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
In your app CSS file, add this line:
|
|
26
|
+
Import Tailwind and the Atmosphere theme adapter in your application CSS:
|
|
42
27
|
|
|
43
28
|
```css
|
|
44
|
-
@import '
|
|
29
|
+
@import 'tailwindcss';
|
|
30
|
+
@import '@ivao/atmosphere-react/theme.css';
|
|
45
31
|
```
|
|
46
32
|
|
|
47
|
-
|
|
48
|
-
|
|
33
|
+
The adapter includes the Atmosphere brand theme, the component semantic tokens,
|
|
34
|
+
animations, `tailwindcss-radix`, and the component bundle as a Tailwind source.
|
|
35
|
+
You can add your own CSS-first `@theme`, `@utility`, and `@custom-variant`
|
|
36
|
+
directives in the same entry file.
|
|
49
37
|
|
|
50
38
|
#### CSS only
|
|
51
39
|
|
|
52
40
|
Import our CSS by adding this line to your index file.
|
|
53
41
|
|
|
54
42
|
```typescript
|
|
55
|
-
import '@ivao/atmosphere-react/
|
|
43
|
+
import '@ivao/atmosphere-react/styles.css';
|
|
56
44
|
```
|
|
57
45
|
|
|
58
46
|
> This approach is sufficient if no further tailwind classes, customizations or overrides are needed.
|