tailvars 1.2.0 → 1.3.0

package/{docs/src/preflight.css → preflight.css}

@@ -1,3 +1,9 @@
+/*
+  TailwindCSS v4.2 preflight stylesheet.
+  Copyright ©️ Tailwind Labs, Inc.
+  2026
+*/
+
 /*
   1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
   2. Remove default margins and padding
@@ -9,10 +15,10 @@
 ::before,
 ::backdrop,
 ::file-selector-button {
-  box-sizing: border-box; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 2 */
-  border: 0 solid; /* 3 */
+	box-sizing: border-box; /* 1 */
+	margin: 0; /* 2 */
+	padding: 0; /* 2 */
+	border: 0 solid; /* 3 */
 }
 
 /*
@@ -27,10 +33,10 @@
 
 html,
 :host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  tab-size: 4; /* 3 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
+	line-height: 1.5; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+	tab-size: 4; /* 3 */
+	-webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -40,9 +46,9 @@ html,
 */
 
 hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+	border-top-width: 1px; /* 3 */
 }
 
 /*
@@ -50,8 +56,8 @@ hr {
 */
 
 abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+	-webkit-text-decoration: underline dotted;
+	text-decoration: underline dotted;
 }
 
 /*
@@ -64,8 +70,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: inherit;
-  font-weight: inherit;
+	font-size: inherit;
+	font-weight: inherit;
 }
 
 /*
@@ -73,9 +79,9 @@ h6 {
 */
 
 a {
-  color: inherit;
-  -webkit-text-decoration: inherit;
-  text-decoration: inherit;
+	color: inherit;
+	-webkit-text-decoration: inherit;
+	text-decoration: inherit;
 }
 
 /*
@@ -84,7 +90,7 @@ a {
 
 b,
 strong {
-  font-weight: bolder;
+	font-weight: bolder;
 }
 
 /*
@@ -98,7 +104,7 @@ code,
 kbd,
 samp,
 pre {
-  font-size: 1em; /* 4 */
+	font-size: 1em; /* 4 */
 }
 
 /*
@@ -106,7 +112,7 @@ pre {
 */
 
 small {
-  font-size: 80%;
+	font-size: 80%;
 }
 
 /*
@@ -115,18 +121,18 @@ small {
 
 sub,
 sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
 }
 
 sub {
-  bottom: -0.25em;
+	bottom: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+	top: -0.5em;
 }
 
 /*
@@ -136,9 +142,9 @@ sup {
 */
 
 table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+	border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -146,7 +152,7 @@ table {
 */
 
 :-moz-focusring {
-  outline: auto;
+	outline: auto;
 }
 
 /*
@@ -154,7 +160,7 @@ table {
 */
 
 progress {
-  vertical-align: baseline;
+	vertical-align: baseline;
 }
 
 /*
@@ -162,7 +168,7 @@ progress {
 */
 
 summary {
-  display: list-item;
+	display: list-item;
 }
 
 /*
@@ -172,7 +178,7 @@ summary {
 ol,
 ul,
 menu {
-  list-style: none;
+	list-style: none;
 }
 
 /*
@@ -189,8 +195,8 @@ audio,
 iframe,
 embed,
 object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+	display: block; /* 1 */
+	vertical-align: middle; /* 2 */
 }
 
 /*
@@ -199,8 +205,8 @@ object {
 
 img,
 video {
-  max-width: 100%;
-  height: auto;
+	max-width: 100%;
+	height: auto;
 }
 
 /*
@@ -216,14 +222,14 @@ select,
 optgroup,
 textarea,
 ::file-selector-button {
-  font: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  border-radius: 0; /* 2 */
-  background-color: transparent; /* 3 */
-  opacity: 1; /* 4 */
+	font: inherit; /* 1 */
+	font-feature-settings: inherit; /* 1 */
+	font-variation-settings: inherit; /* 1 */
+	letter-spacing: inherit; /* 1 */
+	color: inherit; /* 1 */
+	border-radius: 0; /* 2 */
+	background-color: transparent; /* 3 */
+	opacity: 1; /* 4 */
 }
 
 /*
@@ -231,7 +237,7 @@ textarea,
 */
 
 :where(select:is([multiple], [size])) optgroup {
-  font-weight: bolder;
+	font-weight: bolder;
 }
 
 /*
@@ -239,7 +245,7 @@ textarea,
 */
 
 :where(select:is([multiple], [size])) optgroup option {
-  padding-inline-start: 20px;
+	padding-inline-start: 20px;
 }
 
 /*
@@ -247,7 +253,7 @@ textarea,
 */
 
 ::file-selector-button {
-  margin-inline-end: 4px;
+	margin-inline-end: 4px;
 }
 
 /*
@@ -255,7 +261,7 @@ textarea,
 */
 
 ::placeholder {
-  opacity: 1;
+	opacity: 1;
 }
 
 /*
@@ -263,11 +269,10 @@ textarea,
   crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
 */
 
-@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
-  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
-  ::placeholder {
-    color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+	::placeholder {
+		color: color-mix(in oklab, currentcolor 50%, transparent);
+	}
 }
 
 /*
@@ -275,7 +280,7 @@ textarea,
 */
 
 textarea {
-  resize: vertical;
+	resize: vertical;
 }
 
 /*
@@ -283,7 +288,7 @@ textarea {
 */
 
 ::-webkit-search-decoration {
-  -webkit-appearance: none;
+	-webkit-appearance: none;
 }
 
 /*
@@ -292,8 +297,8 @@ textarea {
 */
 
 ::-webkit-date-and-time-value {
-  min-height: 1lh; /* 1 */
-  text-align: inherit; /* 2 */
+	min-height: 1lh; /* 1 */
+	text-align: inherit; /* 2 */
 }
 
 /*
@@ -301,7 +306,7 @@ textarea {
 */
 
 ::-webkit-datetime-edit {
-  display: inline-flex;
+	display: inline-flex;
 }
 
 /*
@@ -309,7 +314,7 @@ textarea {
 */
 
 ::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
+	padding: 0;
 }
 
 ::-webkit-datetime-edit,
@@ -321,7 +326,7 @@ textarea {
 ::-webkit-datetime-edit-second-field,
 ::-webkit-datetime-edit-millisecond-field,
 ::-webkit-datetime-edit-meridiem-field {
-  padding-block: 0;
+	padding-block: 0;
 }
 
 /*
@@ -329,7 +334,7 @@ textarea {
 */
 
 ::-webkit-calendar-picker-indicator {
-  line-height: 1;
+	line-height: 1;
 }
 
 /*
@@ -337,7 +342,7 @@ textarea {
 */
 
 :-moz-ui-invalid {
-  box-shadow: none;
+	box-shadow: none;
 }
 
 /*
@@ -347,7 +352,7 @@ textarea {
 button,
 input:where([type="button"], [type="reset"], [type="submit"]),
 ::file-selector-button {
-  appearance: button;
+	appearance: button;
 }
 
 /*
@@ -356,7 +361,7 @@ input:where([type="button"], [type="reset"], [type="submit"]),
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+	height: auto;
 }
 
 /*
@@ -364,5 +369,5 @@ input:where([type="button"], [type="reset"], [type="submit"]),
 */
 
 [hidden]:where(:not([hidden="until-found"])) {
-  display: none !important;
+	display: none !important;
 }

package/docs/src/doc-section.js

@@ -1,27 +0,0 @@
-import { css, html, LitElement } from "lit";
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class DocSection extends LitElement {
-	static properties = {};
-
-	render() {
-		return html`
-      <section>
-
-      </section>
-    `;
-	}
-
-	static styles = css`
-    section {
-      margin: var(--size-16) 0;
-    }
-  `;
-}
-
-window.customElements.define("doc-section", DocSection);

package/docs/src/index.css

@@ -1,31 +0,0 @@
-@import "tailvars";
-@import "preflight.css";
-@import "@fontsource/vt323";
-
-:root {
-	--font-heading: "VT323";
-}
-
-body {
-	font: var(--font-body-md);
-}
-
-.container {
-	--gap-size: var(--size-3);
-
-	display: grid;
-	gap: 0 var(--gap-size);
-	grid-template-columns: 1fr min(calc(100% - 2 * var(--gap-size)), var(--screen-width-lg)) 1fr;
-
-	& > * {
-		grid-column: 2;
-	}
-
-	& .no-container {
-		grid-column: 1 / -1;
-	}
-
-	@media (--screen-lg) or (--screen-md) or (--screen-sm) or (--screen-xs) {
-		grid-template-columns: 1fr min(calc(100% - 2 * var(--gap-size)), var(--screen-width-md)) 1fr;
-	}
-}