tailvars 1.2.0 → 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 (24) hide show
  1. package/base.css +7 -5
  2. package/docs/index.html +2 -10
  3. package/docs/package-lock.json +1077 -1040
  4. package/docs/package.json +5 -1
  5. package/docs/public/hero-texture.webp +0 -0
  6. package/docs/src/components/about-section.js +74 -0
  7. package/docs/src/components/box-icon.js +31 -0
  8. package/docs/src/components/color-box.js +32 -0
  9. package/docs/src/components/color-shades.js +89 -0
  10. package/docs/src/components/feature-list-item.js +54 -0
  11. package/docs/src/components/feature-list.js +57 -0
  12. package/docs/src/{hero-section.js → components/hero-section.js} +15 -12
  13. package/docs/src/components/sidebar-layout.js +50 -0
  14. package/docs/src/components/table-of-contents-item.js +89 -0
  15. package/docs/src/components/table-of-contents.js +35 -0
  16. package/docs/src/global-css-mixin.js +8 -6
  17. package/docs/src/global.css +98 -0
  18. package/docs/src/index.js +20 -0
  19. package/docs/src/pages/index-page.js +147 -0
  20. package/index.min.css +1 -1
  21. package/package.json +1 -4
  22. package/{docs/src/preflight.css → preflight.css} +72 -67
  23. package/docs/src/doc-section.js +0 -27
  24. package/docs/src/index.css +0 -31
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 */
package/docs/index.html CHANGED
@@ -5,17 +5,9 @@
5
5
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
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>
8
+ <link rel="stylesheet" href="./src/global.css" />
9
+ <script type="module" src="/src/index.js"></script>
11
10
  </head>
12
11
  <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
12
  </body>
21
13
  </html>