tailvars 1.1.2 → 1.2.0

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 (17) hide show
  1. package/README.md +4 -0
  2. package/base.css +21 -23
  3. package/biome.json +10 -0
  4. package/docs/.zed/settings.json +3 -0
  5. package/docs/index.html +21 -0
  6. package/docs/package-lock.json +1042 -0
  7. package/docs/package.json +23 -0
  8. package/docs/postcss.config.mjs +5 -0
  9. package/docs/public/vite.svg +1 -0
  10. package/docs/src/assets/lit.svg +1 -0
  11. package/docs/src/doc-section.js +27 -0
  12. package/docs/src/global-css-mixin.js +12 -0
  13. package/docs/src/hero-section.js +75 -0
  14. package/docs/src/index.css +31 -0
  15. package/docs/src/preflight.css +368 -0
  16. package/index.min.css +1 -0
  17. package/package.json +12 -2
package/README.md CHANGED
@@ -23,3 +23,7 @@ The package is ~13kb gzipped, which is a relatively small size, but if you need
23
23
  ## Documentation
24
24
 
25
25
  To be continued...
26
+
27
+ ## Known bugs
28
+
29
+ `--color-opacity` does not work as expected, and always falls back to 100%.
package/base.css CHANGED
@@ -220,48 +220,46 @@
220
220
  --font-size-xl: 1.5rem;
221
221
  --font-size-2xl: 2rem;
222
222
  --font-size-3xl: 3rem;
223
+ --font-size-4xl: 5rem;
223
224
  --font-size-fluid-xs: clamp(0.625rem, 0.582rem + 0.217vw, 0.75rem);
224
225
  --font-size-fluid-sm: clamp(0.75rem, 0.707rem + 0.217vw, 0.875rem);
225
226
  --font-size-fluid-md: clamp(0.875rem, 0.832rem + 0.217vw, 1rem);
226
227
  --font-size-fluid-lg: clamp(1rem, 0.957rem + 0.217vw, 1.125rem);
227
- --font-size-fluid-xl: clamp(1.25rem, 1.163rem + 0.435vw, 1.5rem);
228
- --font-size-fluid-2xl: clamp(1.5rem, 1.326rem + 0.87vw, 2rem);
229
- --font-size-fluid-3xl: clamp(2rem, 1.652rem + 1.739vw, 3rem);
228
+ --font-size-fluid-xl: clamp(1.125rem, 0.995rem + 0.652vw, 1.5rem);
229
+ --font-size-fluid-2xl: clamp(1.25rem, 0.989rem + 1.304vw, 2rem);
230
+ --font-size-fluid-3xl: clamp(1.5rem, 0.978rem + 2.609vw, 3rem);
231
+ --font-size-fluid-4xl: clamp(2rem, 0.957rem + 5.217vw, 5rem);
230
232
  --font-body-weight: 400;
231
233
  --font-heading-weight: 600;
234
+ --font-body: var(--font-sans);
235
+ --font-heading: var(--font-sans);
232
236
  }
233
237
 
234
238
  * {
235
- --font-body: var(--font-sans);
236
- --font-heading: var(--font-sans);
237
239
  --font-body-xs: var(--font-body-weight) var(--font-size-xs) / 1.6 var(--font-body);
238
240
  --font-body-sm: var(--font-body-weight) var(--font-size-sm) / 1.5 var(--font-body);
239
241
  --font-body-md: var(--font-body-weight) var(--font-size-md) / 1.4 var(--font-body);
240
242
  --font-body-lg: var(--font-body-weight) var(--font-size-lg) / 1.3 var(--font-body);
241
243
  --font-body-xl: var(--font-body-weight) var(--font-size-xl) / 1.25 var(--font-body);
242
- --font-body-2xl: var(--font-body-weight) var(--font-size-2xl) / 1.1 var(--font-body);
243
- --font-body-3xl: var(--font-body-weight) var(--font-size-3xl) / 1.1 var(--font-body);
244
+ --font-body-2xl: var(--font-body-weight) var(--font-size-2xl) / 1.25 var(--font-body);
244
245
  --font-body-fluid-xs: var(--font-body-weight) var(--font-size-fluid-xs) / 1.6 var(--font-body);
245
246
  --font-body-fluid-sm: var(--font-body-weight) var(--font-size-fluid-sm) / 1.5 var(--font-body);
246
247
  --font-body-fluid-md: var(--font-body-weight) var(--font-size-fluid-md) / 1.4 var(--font-body);
247
248
  --font-body-fluid-lg: var(--font-body-weight) var(--font-size-fluid-lg) / 1.3 var(--font-body);
248
249
  --font-body-fluid-xl: var(--font-body-weight) var(--font-size-fluid-xl) / 1.25 var(--font-body);
249
- --font-body-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.1 var(--font-body);
250
- --font-body-fluid-3xl: var(--font-body-weight) var(--font-size-fluid-3xl) / 1.1 var(--font-body);
251
- --font-heading-xs: var(--font-body-weight) var(--font-size-xs) / 1.6 var(--font-heading);
252
- --font-heading-sm: var(--font-body-weight) var(--font-size-sm) / 1.5 var(--font-heading);
253
- --font-heading-md: var(--font-body-weight) var(--font-size-md) / 1.4 var(--font-heading);
254
- --font-heading-lg: var(--font-body-weight) var(--font-size-lg) / 1.3 var(--font-heading);
255
- --font-heading-xl: var(--font-body-weight) var(--font-size-xl) / 1.25 var(--font-heading);
256
- --font-heading-2xl: var(--font-body-weight) var(--font-size-2xl) / 1.1 var(--font-heading);
257
- --font-heading-3xl: var(--font-body-weight) var(--font-size-3xl) / 1.1 var(--font-heading);
258
- --font-heading-fluid-xs: var(--font-body-weight) var(--font-size-fluid-xs) / 1.6 var(--font-heading);
259
- --font-heading-fluid-sm: var(--font-body-weight) var(--font-size-fluid-sm) / 1.5 var(--font-heading);
260
- --font-heading-fluid-md: var(--font-body-weight) var(--font-size-fluid-md) / 1.4 var(--font-heading);
261
- --font-heading-fluid-lg: var(--font-body-weight) var(--font-size-fluid-lg) / 1.3 var(--font-heading);
262
- --font-heading-fluid-xl: var(--font-body-weight) var(--font-size-fluid-xl) / 1.25 var(--font-heading);
263
- --font-heading-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.1 var(--font-heading);
264
- --font-heading-fluid-3xl: var(--font-body-weight) var(--font-size-fluid-3xl) / 1.1 var(--font-heading);
250
+ --font-body-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.25 var(--font-body);
251
+ --font-heading-xs: var(--font-body-weight) var(--font-size-md) / 1.6 var(--font-heading);
252
+ --font-heading-sm: var(--font-body-weight) var(--font-size-lg) / 1.5 var(--font-heading);
253
+ --font-heading-md: var(--font-body-weight) var(--font-size-xl) / 1.4 var(--font-heading);
254
+ --font-heading-lg: var(--font-body-weight) var(--font-size-2xl) / 1.3 var(--font-heading);
255
+ --font-heading-xl: var(--font-body-weight) var(--font-size-3xl) / 1.25 var(--font-heading);
256
+ --font-heading-2xl: var(--font-body-weight) var(--font-size-4xl) / 1.25 var(--font-heading);
257
+ --font-heading-fluid-xs: var(--font-body-weight) var(--font-size-fluid-md) / 1.6 var(--font-heading);
258
+ --font-heading-fluid-sm: var(--font-body-weight) var(--font-size-fluid-lg) / 1.5 var(--font-heading);
259
+ --font-heading-fluid-md: var(--font-body-weight) var(--font-size-fluid-xl) / 1.4 var(--font-heading);
260
+ --font-heading-fluid-lg: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.3 var(--font-heading);
261
+ --font-heading-fluid-xl: var(--font-body-weight) var(--font-size-fluid-3xl) / 1.25 var(--font-heading);
262
+ --font-heading-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-4xl) / 1.1 var(--font-heading);
265
263
  }
266
264
 
267
265
  /* Spacing */
package/biome.json CHANGED
@@ -4,5 +4,15 @@
4
4
  "formatter": {
5
5
  "lineWidth": 160
6
6
  }
7
+ },
8
+ "linter": {
9
+ "rules": {
10
+ "correctness": {
11
+ "noUnknownMediaFeatureName": "off"
12
+ }
13
+ }
14
+ },
15
+ "files": {
16
+ "includes": ["**", "!index.min.css"]
7
17
  }
8
18
  }
package/docs/.zed/settings.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "tab_size": 2
3
+ }
package/docs/index.html ADDED
@@ -0,0 +1,21 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>docs</title>
8
+ <link global rel="stylesheet" href="./src/index.css" />
9
+ <script type="module" src="/src/doc-section.js"></script>
10
+ <script type="module" src="/src/hero-section.js"></script>
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <hero-section
15
+ title="--tailvars"
16
+ subtitle="Putting the CSS back into your Tailwind"
17
+ class="no-container"
18
+ ></hero-section>
19
+ </div>
20
+ </body>
21
+ </html>