@schemavaults/theme 0.22.14 → 0.22.18
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 +11 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
# @schemavaults/theme
|
|
1
|
+
# 🎨 @schemavaults/theme
|
|
2
2
|
|
|
3
|
-
## About
|
|
3
|
+
## About 🎨
|
|
4
4
|
|
|
5
|
-
Package containing code for building TailwindCSS themes that contain SchemaVaults branding colors and shared styles.
|
|
5
|
+
Package containing code for building opionated TailwindCSS themes/configurations that contain SchemaVaults branding colors and shared styles.
|
|
6
|
+
|
|
7
|
+
To see the theme in action you can check out the [`@schemavaults/ui` preview site](https://ui.schemavaults.com) showcasing some styled React.js components and the features available in this theme.
|
|
6
8
|
|
|
7
9
|
## Usage
|
|
8
10
|
|
|
@@ -11,6 +13,7 @@ Package containing code for building TailwindCSS themes that contain SchemaVault
|
|
|
11
13
|
The generated TailwindCSS config sets colors based on CSS variables. It's important that `globals.css` is imported, so that these colors can be resolved. E.g. `var(--foreground)` and `var(--card)` become functional after this CSS import.
|
|
12
14
|
|
|
13
15
|
```javascript
|
|
16
|
+
// within App.jsx / layout.jsx
|
|
14
17
|
import "@schemavaults/theme/globals.css"
|
|
15
18
|
```
|
|
16
19
|
|
|
@@ -18,6 +21,7 @@ import "@schemavaults/theme/globals.css"
|
|
|
18
21
|
|
|
19
22
|
#### Simple Example
|
|
20
23
|
```typescript
|
|
24
|
+
// tailwind.config.ts
|
|
21
25
|
import { SchemaVaultsTailwindConfigFactory } from "@schemavaults/theme";
|
|
22
26
|
const config = new SchemaVaultsTailwindConfigFactory().createConfig({
|
|
23
27
|
content: [
|
|
@@ -30,6 +34,8 @@ export default config;
|
|
|
30
34
|
|
|
31
35
|
#### More complex example
|
|
32
36
|
```typescript
|
|
37
|
+
// tailwind.config.ts
|
|
38
|
+
|
|
33
39
|
// Import the config factory
|
|
34
40
|
import { SchemaVaultsTailwindConfigFactory } from "@schemavaults/theme";
|
|
35
41
|
import { join } from "path";
|
|
@@ -88,7 +94,8 @@ export default config;
|
|
|
88
94
|
|
|
89
95
|
You may wish to also dig deeper on the options passed to the factory / `createConfig` in order to customize the final Tailwind configuration generated. Notably, the `content` parameter to `createConfig`, if the code for styles to be generated from is not found within `./src/**/*.ts|tsx|js|jsx`!
|
|
90
96
|
|
|
91
|
-
```
|
|
97
|
+
```typescript
|
|
98
|
+
// tailwind.config.ts
|
|
92
99
|
// ... initialize the factory somewhere
|
|
93
100
|
|
|
94
101
|
// An example demonstrating customization of where Tailwind searches for classnames
|