Skip to content

Commit d3d6eb2

Browse files
bre97-webbre97-web
committed
chore: update readme
1 parent eae792a commit d3d6eb2

File tree

1 file changed

+54
-74
lines changed

1 file changed

+54
-74
lines changed

‎README.md

+54-74
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,20 @@ npm i -D @glare-labs/tailwindcss-material-tokens
99
```
1010

1111
```javascript
12-
import { ColorTokens, TypographyTokens, ElevationTokens, ShapeTokens } from '@glare-labs/tailwindcss-material-tokens'
12+
import { provideAll } from '@glare-labs/tailwindcss-material-tokens'
13+
14+
const all = provideAll()
1315

1416
/** @type {import('tailwindcss').Config} */
1517
export default {
1618
// ...
1719

1820
plugins: [
19-
...ColorTokens.FullTokens,
20-
...TypographyTokens.FullTokens,
21-
...ElevationTokens.FullTokens,
22-
...ShapeTokens.FullTokens,
21+
...all.allPlugins()
2322
],
2423
}
2524
```
26-
_If you don’t want to be troubled by the original styles of tailwindcss, please try to turn off the styles that come with tailwindcss (color, rounded, shadow)._
25+
_If you don’t want to be troubled by the original styles of tailwindcss, please try to turn off the styles that come with tailwindcss (color, rounded, shadow, text)._
2726

2827
![Screenshot1](https://github.com/glare-labs/tailwindcss-material-tokens/blob/main/imgs/Part-1.png?raw=true)
2928
![Screenshot2](https://github.com/glare-labs/tailwindcss-material-tokens/blob/main/imgs/Part-2.png?raw=true)
@@ -32,76 +31,57 @@ _If you don’t want to be troubled by the original styles of tailwindcss, pleas
3231

3332
For example:
3433
```html
35-
<div class="w-24 h-24 shape-large elevation-1 primary">
36-
<p class="title-large on-primary">Title</p>
34+
<div class="w-24 h-24 shape-large elevation-1 bg-primary">
35+
<p class="text-title-large text-on-primary">Title</p>
3736
</div>
3837
```
3938

40-
## Mapping
41-
|Tailwindcss Util Name|CSS Property|Value|
42-
|:--|--:|:--|
43-
|background|background-color|var(--md-sys-color-background)|
44-
|on-background|color|var(--md-sys-color-on-background)|
45-
|surface|background-color|var(--md-sys-color-surface)|
46-
|surface-dim|background-color|var(--md-sys-color-surface-dim)|
47-
|surface-bright|background-color|var(--md-sys-color-surface-bright)|
48-
|surface-container-lowest|background-color|var(--md-sys-color-surface-container-lowest)|
49-
|surface-container-low|background-color|var(--md-sys-color-surface-container-low)|
50-
|surface-container|background-color|var(--md-sys-color-surface-container)|
51-
|surface-container-high|background-color|var(--md-sys-color-surface-container-high)|
52-
|surface-container-highest|background-color|var(--md-sys-color-surface-container-highest)|
53-
|on-surface|color|var(--md-sys-color-on-surface)|
54-
|surface-variant|background-color|var(--md-sys-color-surface-variant)|
55-
|on-surface-variant|color|var(--md-sys-color-on-surface-variant)|
56-
|inverse-surface|background-color|var(--md-sys-color-inverse-surface)|
57-
|inverse-on-surface|color|var(--md-sys-color-inverse-on-surface)|
58-
|border-outline|border-color|var(--md-sys-color-outline)|
59-
|border-outline-variant|border-color|var(--md-sys-color-outline-variant)|
60-
|shadow|--tw-shadow-color|var(--md-sys-color-shadow)|
61-
|scrim|background-color|var(--md-sys-color-scrim)|
62-
|surface-tint|background-color|var(--md-sys-color-surface-tint)|
63-
|primary|background-color|var(--md-sys-color-primary)|
64-
|on-primary|color|var(--md-sys-color-on-primary)|
65-
|primary-container|background-color|var(--md-sys-color-primary-container)|
66-
|on-primary-container|color|var(--md-sys-color-on-primary-container)|
67-
|inverse-primary|background-color|var(--md-sys-color-inverse-primary)|
68-
|secondary|background-color|var(--md-sys-color-secondary)|
69-
|on-secondary|color|var(--md-sys-color-on-secondary)|
70-
|secondary-container|background-color|var(--md-sys-color-secondary-container)|
71-
|on-secondary-container|color|var(--md-sys-color-on-secondary-container)|
72-
|tertiary|background-color|var(--md-sys-color-tertiary)|
73-
|on-tertiary|color|var(--md-sys-color-on-tertiary)|
74-
|tertiary-container|background-color|var(--md-sys-color-tertiary-container)|
75-
|on-tertiary-container|color|var(--md-sys-color-on-tertiary-container)|
76-
|error|background-color|var(--md-sys-color-error)|
77-
|on-error|color|var(--md-sys-color-on-error)|
78-
|error-container|background-color|var(--md-sys-color-error-container)|
79-
|on-error-container|color|var(--md-sys-color-on-error-container)|
80-
|primary-fixed|background-color|var(--md-sys-color-primary-fixed)|
81-
|primary-fixed-dim|background-color|var(--md-sys-color-primary-fixed-dim)|
82-
|on-primary-fixed|color|var(--md-sys-color-on-primary-fixed)|
83-
|on-primary-fixed-variant|color|var(--md-sys-color-on-primary-fixed-variant)|
84-
|secondary-fixed|background-color|var(--md-sys-color-secondary-fixed)|
85-
|secondary-fixed-dim|background-color|var(--md-sys-color-secondary-fixed-dim)|
86-
|on-secondary-fixed|color|var(--md-sys-color-on-secondary-fixed)|
87-
|on-secondary-fixed-variant|color|var(--md-sys-color-on-secondary-fixed-variant)|
88-
|tertiary-fixed|background-color|var(--md-sys-color-tertiary-fixed)|
89-
|tertiary-fixed-dim|background-color|var(--md-sys-color-tertiary-fixed-dim)|
90-
|on-tertiary-fixed|color|var(--md-sys-color-on-tertiary-fixed)|
91-
|on-tertiary-fixed-variant|color|var(--md-sys-color-on-tertiary-fixed-variant)|
92-
|elevation-none|box-shadow|none|
93-
|elevation-1|box-shadow|rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px|
94-
|elevation-2|box-shadow|rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px|
95-
|elevation-3|box-shadow|rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px|
96-
|elevation-4|box-shadow|rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px|
97-
|elevation-5|box-shadow|rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px|
98-
|shape-full|border-radius|9999px|
99-
|shape-extra|border-radius|28px|
100-
|shape-large|border-radius|16px|
101-
|shape-medium|border-radius|12px|
102-
|shape-small|border-radius|8px|
103-
|shape-extra|border-radius|4px|
104-
|shape-none|border-radius|none|
39+
### provideColor & provide*
40+
```typescript
41+
import { provideColor, provideElevation, provideMotion, provideShape, provideTypography } from '@glare-labs/tailwindcss-material-tokens'
42+
43+
const color = provideColor()
44+
const elevation = provideElevation()
45+
const motion = provideMotion()
46+
const shape = provideShape()
47+
const typography = provideTypography()
48+
49+
/** @type {import('tailwindcss').Config} */
50+
export default {
51+
// ...
52+
53+
plugins: [
54+
color.plugin(),
55+
elevation.plugin(),
56+
motion.plugin(),
57+
shape.plugin(),
58+
typography.plugin(),
59+
],
60+
}
61+
```
62+
63+
### provideAll
64+
provideAll includes:
65+
- color
66+
- elevation
67+
- motion
68+
- shape
69+
- typography
70+
71+
```typescript
72+
import { provideAll } from '@glare-labs/tailwindcss-material-tokens'
73+
74+
const all = provideAll()
75+
76+
/** @type {import('tailwindcss').Config} */
77+
export default {
78+
// ...
79+
80+
plugins: [
81+
...all.allPlugins()
82+
],
83+
}
84+
```
10585

10686
## Default Value
10787

@@ -163,4 +143,4 @@ _Contains only color._
163143
onTertiaryFixed: '#1e1341',
164144
onTertiaryFixedVariant: '#4a4070'
165145
}
166-
```
146+
```

0 commit comments

Comments
 (0)