tailvars 1.1.2 → 1.3.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 (28) hide show
  1. package/README.md +4 -0
  2. package/base.css +28 -28
  3. package/biome.json +10 -0
  4. package/docs/.zed/settings.json +3 -0
  5. package/docs/index.html +13 -0
  6. package/docs/package-lock.json +1079 -0
  7. package/docs/package.json +27 -0
  8. package/docs/postcss.config.mjs +5 -0
  9. package/docs/public/hero-texture.webp +0 -0
  10. package/docs/public/vite.svg +1 -0
  11. package/docs/src/assets/lit.svg +1 -0
  12. package/docs/src/components/about-section.js +74 -0
  13. package/docs/src/components/box-icon.js +31 -0
  14. package/docs/src/components/color-box.js +32 -0
  15. package/docs/src/components/color-shades.js +89 -0
  16. package/docs/src/components/feature-list-item.js +54 -0
  17. package/docs/src/components/feature-list.js +57 -0
  18. package/docs/src/components/hero-section.js +78 -0
  19. package/docs/src/components/sidebar-layout.js +50 -0
  20. package/docs/src/components/table-of-contents-item.js +89 -0
  21. package/docs/src/components/table-of-contents.js +35 -0
  22. package/docs/src/global-css-mixin.js +14 -0
  23. package/docs/src/global.css +98 -0
  24. package/docs/src/index.js +20 -0
  25. package/docs/src/pages/index-page.js +147 -0
  26. package/index.min.css +1 -0
  27. package/package.json +9 -2
  28. package/preflight.css +373 -0
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
@@ -1,11 +1,11 @@
1
1
  /** biome-ignore-all lint/suspicious/noUnknownAtRules: Custom media rules are not officially baseline CSS yet. */
2
2
 
3
3
  /* Media Queries */
4
- @custom-media --screen-xs (max-width: 359px);
5
- @custom-media --screen-sm (min-width: 360px) and (max-width: 479px);
6
- @custom-media --screen-md (min-width: 480px) and (max-width: 767px);
7
- @custom-media --screen-lg (min-width: 768px) and (max-width: 1023px);
8
- @custom-media --screen-xl (min-width: 1024px);
4
+ @custom-media --screen-xs (min-width: 360px) and (max-width: 479px);
5
+ @custom-media --screen-sm (min-width: 480px) and (max-width: 767px);
6
+ @custom-media --screen-md (min-width: 768px) and (max-width: 1023px);
7
+ @custom-media --screen-lg (min-width: 1024px) and (max-width: 1279px);
8
+ @custom-media --screen-xl (min-width: 1280px);
9
9
 
10
10
  /* Shapes */
11
11
  :root {
@@ -206,6 +206,8 @@
206
206
  left 0.075s var(--ease-both), right 0.075s var(--ease-both),
207
207
  bottom 0.075s var(--ease-both), inset 0.075s var(--ease-both);
208
208
  --transition: var(--transition-out);
209
+ --transition-slow: var(--transition-out-slow);
210
+ --transition-quick: var(--transition-out-quick);
209
211
  }
210
212
 
211
213
  /* Typography */
@@ -220,48 +222,46 @@
220
222
  --font-size-xl: 1.5rem;
221
223
  --font-size-2xl: 2rem;
222
224
  --font-size-3xl: 3rem;
225
+ --font-size-4xl: 5rem;
223
226
  --font-size-fluid-xs: clamp(0.625rem, 0.582rem + 0.217vw, 0.75rem);
224
227
  --font-size-fluid-sm: clamp(0.75rem, 0.707rem + 0.217vw, 0.875rem);
225
228
  --font-size-fluid-md: clamp(0.875rem, 0.832rem + 0.217vw, 1rem);
226
229
  --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);
230
+ --font-size-fluid-xl: clamp(1.125rem, 0.995rem + 0.652vw, 1.5rem);
231
+ --font-size-fluid-2xl: clamp(1.25rem, 0.989rem + 1.304vw, 2rem);
232
+ --font-size-fluid-3xl: clamp(1.5rem, 0.978rem + 2.609vw, 3rem);
233
+ --font-size-fluid-4xl: clamp(2rem, 0.957rem + 5.217vw, 5rem);
230
234
  --font-body-weight: 400;
231
235
  --font-heading-weight: 600;
236
+ --font-body: var(--font-sans);
237
+ --font-heading: var(--font-sans);
232
238
  }
233
239
 
234
240
  * {
235
- --font-body: var(--font-sans);
236
- --font-heading: var(--font-sans);
237
241
  --font-body-xs: var(--font-body-weight) var(--font-size-xs) / 1.6 var(--font-body);
238
242
  --font-body-sm: var(--font-body-weight) var(--font-size-sm) / 1.5 var(--font-body);
239
243
  --font-body-md: var(--font-body-weight) var(--font-size-md) / 1.4 var(--font-body);
240
244
  --font-body-lg: var(--font-body-weight) var(--font-size-lg) / 1.3 var(--font-body);
241
245
  --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);
246
+ --font-body-2xl: var(--font-body-weight) var(--font-size-2xl) / 1.25 var(--font-body);
244
247
  --font-body-fluid-xs: var(--font-body-weight) var(--font-size-fluid-xs) / 1.6 var(--font-body);
245
248
  --font-body-fluid-sm: var(--font-body-weight) var(--font-size-fluid-sm) / 1.5 var(--font-body);
246
249
  --font-body-fluid-md: var(--font-body-weight) var(--font-size-fluid-md) / 1.4 var(--font-body);
247
250
  --font-body-fluid-lg: var(--font-body-weight) var(--font-size-fluid-lg) / 1.3 var(--font-body);
248
251
  --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);
252
+ --font-body-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.25 var(--font-body);
253
+ --font-heading-xs: var(--font-body-weight) var(--font-size-md) / 1.6 var(--font-heading);
254
+ --font-heading-sm: var(--font-body-weight) var(--font-size-lg) / 1.5 var(--font-heading);
255
+ --font-heading-md: var(--font-body-weight) var(--font-size-xl) / 1.4 var(--font-heading);
256
+ --font-heading-lg: var(--font-body-weight) var(--font-size-2xl) / 1.3 var(--font-heading);
257
+ --font-heading-xl: var(--font-body-weight) var(--font-size-3xl) / 1.25 var(--font-heading);
258
+ --font-heading-2xl: var(--font-body-weight) var(--font-size-4xl) / 1.25 var(--font-heading);
259
+ --font-heading-fluid-xs: var(--font-body-weight) var(--font-size-fluid-md) / 1.6 var(--font-heading);
260
+ --font-heading-fluid-sm: var(--font-body-weight) var(--font-size-fluid-lg) / 1.5 var(--font-heading);
261
+ --font-heading-fluid-md: var(--font-body-weight) var(--font-size-fluid-xl) / 1.4 var(--font-heading);
262
+ --font-heading-fluid-lg: var(--font-body-weight) var(--font-size-fluid-2xl) / 1.3 var(--font-heading);
263
+ --font-heading-fluid-xl: var(--font-body-weight) var(--font-size-fluid-3xl) / 1.25 var(--font-heading);
264
+ --font-heading-fluid-2xl: var(--font-body-weight) var(--font-size-fluid-4xl) / 1.1 var(--font-heading);
265
265
  }
266
266
 
267
267
  /* 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,13 @@
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 rel="stylesheet" href="./src/global.css" />
9
+ <script type="module" src="/src/index.js"></script>
10
+ </head>
11
+ <body>
12
+ </body>
13
+ </html>