@plumeria/core 0.9.5 → 0.9.7

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.
Files changed (2) hide show
  1. package/README.md +18 -15
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -54,7 +54,8 @@ Also, any properties that are not wrapped will conform to that className.
54
54
  ```ts
55
55
  const styles = css.create({
56
56
  box: {
57
- [css.media.max('width: 900px')]: {
57
+ // 900px
58
+ [css.media.maxWidth(900)]: {
58
59
  width: '100%',
59
60
  color: 'rgb(60,60,60)',
60
61
  },
@@ -88,12 +89,6 @@ css.global({
88
89
  h1: {
89
90
  fontSize: 32,
90
91
  },
91
- h2: {
92
- fontSize: 24,
93
- },
94
- h3: {
95
- fontSize: 16,
96
- },
97
92
  });
98
93
  ```
99
94
 
@@ -130,7 +125,7 @@ const tokens = css.defineVars({
130
125
  sm: 360,
131
126
  md: 480,
132
127
  lg: 600,
133
- xl: 768,
128
+ xl: 720,
134
129
  });
135
130
  ```
136
131
 
@@ -159,11 +154,17 @@ const themes = css.defineTheme({
159
154
  Mixes #000 or #FFF into the color.
160
155
  The first argument takes the color and the second argument takes the same value as opacity (string % or number).
161
156
 
157
+ You can also retrieve the complement of the color property from an color object.
158
+
162
159
  ```ts
163
160
  color: css.color.darken('skyblue', 0.12),
164
161
  color: css.color.lighten('navy', 0.6),
162
+
165
163
  color: css.color.skyblue,
166
- color: css.color.navy,
164
+ color: css.color.aqua,
165
+ // ...many more colors
166
+ color: css.color.*...,
167
+
167
168
  ```
168
169
 
169
170
  ### cx
@@ -171,8 +172,10 @@ color: css.color.navy,
171
172
  Merges strings such as class names and pseudo.
172
173
 
173
174
  ```tsx
174
- cx(css.pseudo.hover, css.pseudo.after); // ":hover::after"
175
- cx(styles.text, styles, box); // "text_hash box_hash"
175
+ // ":hover::after"
176
+ cx(css.pseudo.hover, css.pseudo.after);
177
+ // "text_hash box_hash"
178
+ cx(styles.text, styles, box);
176
179
  ```
177
180
 
178
181
  ## ESLint
@@ -181,10 +184,10 @@ cx(styles.text, styles, box); // "text_hash box_hash"
181
184
 
182
185
  ### Rules: recommended
183
186
 
184
- \- **no-inner-call:(error)**
185
- \- **no-unused-keys:(warn)**
186
- \- **sort-properties:(warn)**
187
- \- **validate-values:(warn)**
187
+ \- no-inner-call:(error)
188
+ \- no-unused-keys:(warn)
189
+ \- sort-properties:(warn)
190
+ \- validate-values:(warn)
188
191
 
189
192
  It is recommended to use it in conjunction with TypeScript completion, which is one of the big advantages of using plumeria.
190
193
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@plumeria/core",
3
- "version": "0.9.5",
4
- "description": "Zero-runtime CSS in JS library in TypeScript.",
3
+ "version": "0.9.7",
4
+ "description": "Zero-runtime CSS in JS - Compile at build-time. No runtime overhead.",
5
5
  "keywords": [
6
6
  "css",
7
7
  "css-in-js",