tailvars 1.1.2 → 1.3.0

package/docs/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "docs",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@boxicons/js": "^1.0.1",
+		"@fontsource/ibm-plex-sans": "^5.2.8",
+		"@fontsource/ibm-plex-serif": "^5.2.7",
+		"lit": "^3.3.1",
+		"tailvars": "file:..",
+		"universal-router": "^10.0.3"
+	},
+	"devDependencies": {
+		"@fontsource/vt323": "^5.2.7",
+		"postcss-custom-media": "^12.0.1",
+		"vite": "^8.0.0-beta.13"
+	},
+	"overrides": {
+		"vite": "^8.0.0-beta.13"
+	}
+}

package/docs/postcss.config.mjs

@@ -0,0 +1,5 @@
+import postcssCustomMedia from "postcss-custom-media";
+
+export default {
+	plugins: [postcssCustomMedia()],
+};

package/docs/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/docs/src/assets/lit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

package/docs/src/components/about-section.js

@@ -0,0 +1,74 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class AboutSection extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		title: {},
+	};
+
+	render() {
+		return html`
+      <section>
+        <h2>Why another CSS library?</h2>
+        <p>
+          Most think that CSS has been solved at this point. We don't need any more Bootstraps or Bulmas, and if we do, well, you can just install Bootstrap or Bulma - problem solved! I was also like that, until I actually <i>tried</i> to write CSS without a library. Turns out, it's easier said than done to design an application when given <i>all</i> the tools. I was a kid in a candy shop. What colors should I use? How wide should a button be? It quickly became impossible to maintain any level of consistency.
+        </p>
+        <p>
+          <a href="https://tailwindcss.com" target="_blank">TailwindCSS</a> solves this issue elegantly, something that isn't surprising considering <a href="https://refactoringui.com" target="_blank">Refactoring UI</a>, also written by Stever Schroger, regularly speaks about this issue. But TailwindCSS is not just a system of style values, it's also a <a href="https://v1.tailwindcss.com/#what-is-tailwind" target="_blank"><i>philosophy</i></a>&mdash;A philosophy I quickly found myself disagreeing with. Scrapping CSS for a system of only utility classes comes with a few uncomfortable realities:
+          <ul>
+            <li>The HTML code quickly gets hard to read and filled with class names.</li>
+            <li>Toggling or applying groups of classes depending on state is burdensome, requiring workarounds like dictionaries or <code>@apply</code>.</li>
+            <li>Many frontend frameworks don't consider tailwind classes well enough in their implementations.</li>
+          </ul>
+        </p>
+        <p>
+          CSS now supports nesting natively and scoped CSS is available in most framework or through shadow DOMs. With that in mind, the goal of tailvars is to maintain the spirit of the TailwindCSS style system (which I quite like) but in the form of CSS custom properties, rather than utility classes. Custom properties have their own strengths and weaknesses, of course, but I found them more practical to work with.
+        </p>
+      </section>
+    `;
+	}
+
+	static styles = css`
+    :host {
+      display: block;
+    }
+
+    section {
+      padding-top: min(8vw, var(--size-12));
+      padding-bottom: min(8vw, var(--size-8));
+    }
+
+    h2 {
+      font: var(--font-heading-md);
+      margin-bottom: var(--size-1);
+    }
+
+    a {
+      text-decoration: underline;
+    }
+
+    p {
+      margin-bottom: var(--size-2);
+    }
+
+    h3 {
+      font: var(--font-heading-sm);
+    }
+
+    ul {
+      list-style: disc outside;
+      margin-left: var(--size-4);
+
+      & li {
+        margin-bottom: var(--size-2);
+      }
+    }
+  `;
+}
+
+window.customElements.define("about-section", AboutSection);

package/docs/src/components/box-icon.js

@@ -0,0 +1,31 @@
+import { createElement } from "@boxicons/js";
+import { css, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class BoxIcon extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		icon: {},
+    size: {},
+		pack: {}
+	};
+
+	render() {
+		return "";
+	}
+
+  connectedCallback() {
+		const el = createElement(this.icon, { size: this.size || "base", pack: this.pack || "basic" });
+		this.appendChild(el);
+	}
+
+	static styles = css`
+  `;
+}
+
+window.customElements.define("box-icon", BoxIcon);

package/docs/src/components/color-box.js

@@ -0,0 +1,32 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class ColorBox extends GlobalCSSMixin(LitElement) {
+	static properties = {};
+
+	render() {
+		return html`
+      <div class="color-box">
+        <slot></slot>
+      </div>
+    `;
+	}
+
+	static styles = css`
+		.color-box {
+		  padding: var(--size-2) var(--size-4);
+			border-radius: var(--rounded-md);
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='"var(--color-slate-100)"' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+     	background-size: 6px;
+			border: 1px solid var(--color-slate-300);
+		}
+  `;
+}
+
+window.customElements.define("color-box", ColorBox);

package/docs/src/components/color-shades.js

@@ -0,0 +1,89 @@
+import { css, html, LitElement } from "lit";
+import { map } from "lit/directives/map.js";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class ColorShades extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		color: {},
+	};
+
+	copyShade(shade) {
+		navigator.clipboard.writeText(`--color-${this.color}-${shade}`);
+		alert(`Copied "--color-${this.color}-${shade}"`);
+	}
+
+	render() {
+		return html`
+			<h3>--color-${this.color}</h3>
+			<article class="color">
+        <div class="spacer"></div>
+			  ${map(shades, (shade) => {
+					return html`
+              <button @click=${() => this.copyShade(shade)} class="shade" style="
+                background: var(--color-${this.color}-${shade});
+                color: ${shade > 400 ? "white" : "black"}
+              ">
+                ${shade}
+              </button>
+            `;
+				})}
+      </article>
+    `;
+	}
+
+	static styles = css`
+	  h3 {
+			font: var(--font-heading-md);
+			text-transform: lowercase;
+		}
+
+    .color {
+      display: grid;
+      flex-wrap: wrap;
+      gap: var(--size-2);
+      border: 1px solid var(--color-slate-300);
+      border-radius: var(--rounded-sm);
+      padding: var(--size-3);
+      background: var(--color-white);
+      margin-bottom: var(--size-3);
+      grid-template-columns: repeat(4, 1fr);
+
+      @media (min-width: 640px) {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      @media (min-width: 1024px) {
+        grid-template-columns: repeat(11, 1fr);
+        & .spacer {
+          display: none;
+        }
+      }
+    }
+
+    .shade {
+      aspect-ratio: 3/2;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font: var(--font-heading-sm);
+      padding: var(--size-3);
+      box-shadow: inset 0 0 0 1px var(--color-slate-400);
+      transition: var(--transition-quick);
+
+      &:hover {
+        opacity: 60%;
+      }
+    }
+  `;
+}
+
+window.customElements.define("color-shades", ColorShades);

package/docs/src/components/feature-list-item.js

@@ -0,0 +1,54 @@
+import { css, html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class FeatureListItem extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		title: {},
+		description: {},
+		icon: {},
+	};
+
+	render() {
+		return html`
+      <article role="listitem">
+        <box-icon .icon=${this.icon} class="icon"></box-icon>
+        <h3>${this.title}</h3>
+        <p><slot></p>
+      </article>
+    `;
+	}
+
+	static styles = css`
+  	article {
+      padding: var(--size-4);
+      padding-bottom: var(--size-6);
+      background-color: var(--color-slate-200);
+      border-radius: var(--rounded-md);
+      height: 100%;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.8' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+     	background-size: 6px;
+   }
+
+    .icon {
+      display: inline-flex;
+      padding: var(--size-3);
+      border-radius: var(--rounded-md);
+      background-color: var(--color-slate-50);
+      margin-bottom: var(--size-3);
+      color: var(--color-slate-800);
+    }
+
+    h3 {
+      font: var(--font-heading-md);
+    }
+  `;
+}
+
+window.customElements.define("feature-list-item", FeatureListItem);

package/docs/src/components/feature-list.js

@@ -0,0 +1,57 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class FeatureList extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		features: {},
+	};
+
+	render() {
+		return html`
+      <section>
+        <ul>
+          <slot>
+        </ul>
+      </section>
+    `;
+	}
+
+	static styles = css`
+    section {
+      margin: var(--size-4) 0;
+    }
+
+    ul {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      flex-wrap: wrap;
+      gap: var(--size-6);
+
+      & > ::slotted(*) {
+        grid-column: auto / span 2;
+      }
+
+      @media (min-width: 640px) and (max-width: 1023px) {
+        grid-template-columns: repeat(4, 1fr);
+        gap: var(--size-3);
+
+        & > ::slotted(*:nth-child(odd):last-of-type) {
+          grid-column: 2 / span 2 !important;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        grid-template-columns: repeat(6, 1fr);
+        gap: var(--size-6);
+      }
+    }
+  `;
+}
+
+window.customElements.define("feature-list", FeatureList);

package/docs/src/components/hero-section.js

@@ -0,0 +1,78 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin.js";
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+
+export class HeroSection extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		title: {},
+		subtitle: {},
+	};
+
+	render() {
+		return html`
+      <section class="container">
+        <h1>--tailvars</h1>
+        <p>Putting the CSS back into TailwindCSS</p>
+      </section>
+    `;
+	}
+
+	static styles = css`
+    :host {
+      display: block;
+    }
+
+    section {
+      padding-top: 12vw;
+      padding-bottom: 12vw;
+      background-color: var(--color-slate-200);
+      color: var(--color-indigo-950);
+      background-image: url("/hero-texture.webp");
+      background-size: 100%;
+      background-fit: cover;
+      background-blend-mode: overlay;
+
+      & h1 {
+        font: var(--font-heading-fluid-2xl);
+
+        &::after {
+          content: "";
+          display: inline-block;
+          position: relative;
+          margin-left: -1ch;
+          margin-bottom: -0.1em;
+          pointer-events: none;
+          mix-blend-mode: hard-light;
+          width: 1ch;
+          aspect-ratio: 1/2;
+          background-color: var(--color-indigo-600);
+          animation: 2s steps(1) infinite blink;
+        }
+      }
+
+      & p {
+        --color-opacity: 90%;
+        font: var(--font-heading-fluid-md);
+      }
+    }
+
+    @keyframes blink {
+      from {
+        opacity: 100%;
+      }
+      50% {
+        opacity: 0%;
+      }
+      to {
+        opacity: 100%;
+      }
+    }
+  `;
+}
+
+window.customElements.define("hero-section", HeroSection);

package/docs/src/components/sidebar-layout.js

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class SidebarLayout extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		title: {},
+	};
+
+	render() {
+		return html`
+      <div class="wrapper">
+        <aside>
+          <div class="sidebar-content">
+            <slot name="sidebar"></slot>
+          </div>
+        </aside>
+        <div>
+          <slot></slot>
+        </div>
+        <div></div>
+      </div>
+    `;
+	}
+
+	static styles = css`
+    .wrapper {
+      display: grid;
+      grid-template-columns: 200px 1fr 200px;
+      gap: var(--size-12);
+    }
+
+    .sidebar-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--size-3);
+      position: sticky;
+      top: 0;
+      left: 0;
+      padding: min(8vw, var(--size-12)) 0;
+    }
+  `;
+}
+
+window.customElements.define("sidebar-layout", SidebarLayout);

package/docs/src/components/table-of-contents-item.js

@@ -0,0 +1,89 @@
+import { css, html, LitElement } from "lit";
+import { GlobalCSSMixin } from "../global-css-mixin";
+import { map } from "lit/directives/map.js";
+import { when } from "lit/directives/when.js";
+import { query } from "lit/decorators.js";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class TableOfContentsItem extends GlobalCSSMixin(LitElement) {
+	static properties = {
+		target: {},
+		label: {},
+		icon: {},
+		active: {},
+	};
+
+	/** @type {HTMLElement} */
+	targetElement;
+
+	handleClick(e) {
+		e.preventDefault();
+		this.targetElement?.scrollIntoView({ behavior: "smooth" });
+	}
+
+	// Use arrow function to preserve value of `this`
+	handleWindowScroll = () => {
+		if (this.targetElement == null) return;
+		const rect = this.targetElement.getBoundingClientRect();
+		const origin = window.innerHeight / 3;
+		this.active = origin > rect.top && origin < rect.bottom;
+	};
+
+	connectedCallback() {
+		super.connectedCallback();
+		const page = this.ownerDocument.body.firstChild;
+		this.targetElement = page?.shadowRoot?.getElementById(this.target);
+
+		window.addEventListener("scroll", this.handleWindowScroll);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("scroll", this.handleWindowScroll);
+	}
+
+	render() {
+		return html`
+      <li>
+        <a @click=${this.handleClick} href="#${this.target}" class=${this.active ? "active" : ""}>
+          <span>
+            ${when(
+							this.icon,
+							() =>
+								html`<box-icon size="xs" pack="filled" .icon=${this.icon}></box-icon>`,
+						)}
+          </span>
+
+          <span><slot></slot></span>
+        </a>
+      </li>
+    `;
+	}
+
+	static styles = css`
+    li {
+      list-style: none;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: var(--size-2);
+      padding: var(--size-1) var(--size-3);
+      color: var(--color-slate-900) !important;
+      font: var(--font-heading-sm) !important;
+      border-radius: var(--rounded-xs);
+
+      &.active {
+        background: var(--color-slate-200);
+      }
+    }
+  `;
+}
+
+window.customElements.define("table-of-contents-item", TableOfContentsItem);

package/docs/src/components/table-of-contents.js

@@ -0,0 +1,35 @@
+import { css, html, LitElement } from "lit";
+import { map } from "lit/directives/map.js";
+import { when } from "lit/directives/when.js";
+import { GlobalCSSMixin } from "../global-css-mixin";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class TableOfContents extends GlobalCSSMixin(LitElement) {
+	static properties = {};
+
+	render() {
+		return html`
+      <ul>
+        <slot></slot>
+      </ul>
+    `;
+	}
+
+	static styles = css`
+    ul {
+      border-radius: var(--rounded-md);
+      border: 1px solid var(--color-slate-300);
+      padding: var(--size-1);
+      gap: calc(-1 * var(--size-1));
+      display: flex;
+      flex-direction: column;
+    }
+  `;
+}
+
+window.customElements.define("table-of-contents", TableOfContents);

package/docs/src/global-css-mixin.js

@@ -0,0 +1,14 @@
+import css from "./global.css?inline";
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(css);
+
+export const globalCSS = sheet;
+
+export const GlobalCSSMixin = (superClass) =>
+	class extends superClass {
+		connectedCallback() {
+			super.connectedCallback();
+			this.shadowRoot.adoptedStyleSheets.push(globalCSS);
+		}
+	};