@averoui/tokens 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Faraz Pourebrahim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @averoui/tokens
+
+The design tokens behind [Avero](https://github.com/FarazPourebrahim/avero): colour, typography,
+spacing, radius, elevation, motion and z-index, as Tailwind CSS v4 `@theme` variables.
+
+A theme is a set of CSS custom properties, not a fork — redefining a token restyles every component
+that uses it.
+
+## Install
+
+```bash
+pnpm add @averoui/tokens
+```
+
+Tailwind CSS v4.3+ is a peer dependency.
+
+## Stylesheets
+
+Import in this order; only `theme.css` is required.
+
+| Import                             | Contributes                                             | When                           |
+| ---------------------------------- | ------------------------------------------------------- | ------------------------------ |
+| `@averoui/tokens/theme.css`        | Every token, plus keyframes                             | Always                         |
+| `@averoui/tokens/base.css`         | Document defaults, reduced motion, scroll-lock gutter   | Apps built on Avero end to end |
+| `@averoui/tokens/utilities.css`    | Scrollbars, shimmer, glow ring, typing caret, gradients | When you use them              |
+| `@averoui/tokens/rich-content.css` | Prose styles for `RichContent` and the editor           | With either of those           |
+
+```css
+@import "tailwindcss";
+@import "@averoui/tokens/theme.css";
+```
+
+## Overriding
+
+Add your own `@theme` block after the import; later declarations win.
+
+```css
+@theme {
+  --color-primary: #7c3aed;
+  --color-primary-hover: #5b21b6;
+}
+```
+
+## Token data
+
+The same tokens are published as typed data and as DTCG JSON, generated from `theme.css` so they
+cannot drift.
+
+```ts
+import { tokens } from "@averoui/tokens";
+
+tokens.colorPrimary.cssVar; // "--color-primary"
+tokens.colorPrimary.value; // "#0a66c2"
+```
+
+Use it where a value must reach JavaScript rather than CSS — charting libraries that take colours
+as props, for instance. `@averoui/tokens/tokens.json` is the DTCG form, for design tools.
+
+## Licence
+
+MIT.

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@averoui/tokens",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Avero design tokens: Tailwind CSS v4 theme, base styles, utilities and token data.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./theme.css": "./src/theme.css",
+    "./base.css": "./src/base.css",
+    "./utilities.css": "./src/utilities.css",
+    "./rich-content.css": "./src/rich-content.css",
+    "./tokens.json": "./src/generated/tokens.json",
+    ".": {
+      "types": "./src/generated/tokens.d.ts",
+      "import": "./src/generated/tokens.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "lightningcss": "1.32.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "license": "MIT",
+  "author": "Faraz Pourebrahim",
+  "homepage": "https://github.com/FarazPourebrahim/avero",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FarazPourebrahim/avero.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/FarazPourebrahim/avero/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "generate": "node scripts/generate-token-data.mjs",
+    "test": "node scripts/generate-token-data.mjs --check && node scripts/check-z-order.mjs",
+    "contrast": "node scripts/contrast-report.mjs"
+  }
+}

package/src/base.css

@@ -0,0 +1,68 @@
+/*
+ * Avero document defaults (opt-in).
+ *
+ * Import this file in applications built on Avero end to end. It sets the page background, text
+ * color and font on <body>. Hosts with their own chrome (such as a docs
+ * site) should import only theme.css and utilities.css.
+ */
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    min-width: 320px;
+    min-height: 100vh;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a,
+  button {
+    font-family: var(--font-sans);
+  }
+
+  /* Every link and enabled button shows a pointer. Outlines are left alone, so focus indication
+     stays intact. */
+  a,
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]) {
+    cursor: pointer;
+  }
+
+  svg,
+  canvas {
+    max-width: 100%;
+  }
+
+  /* Overlays (Dialog, Drawer, Popover) lock scrolling through react-remove-scroll-bar, which makes
+     up for the hidden scrollbar with a margin on the physical right. Browsers put a right-to-left
+     page's scrollbar on different sides, so instead the viewport keeps the scrollbar's space on
+     whichever side it is, and the margin is dropped: the page doesn't move in either direction.
+     Important declarations in a layer outrank the library's unlayered ones. */
+  html:has(body[data-scroll-locked]) {
+    scrollbar-gutter: stable;
+  }
+
+  body[data-scroll-locked] {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+/* Honour reduced-motion preferences for every animation and transition. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/generated/tokens.d.ts

@@ -0,0 +1,122 @@
+// Generated from @averoui/tokens/src/theme.css by scripts/generate-token-data.mjs. Do not edit.
+export type TokenName =
+  | "fontFamilySans"
+  | "fontFamilyCode"
+  | "fontSize4xs"
+  | "fontSize3xs"
+  | "fontSize2xs"
+  | "fontSizeSmPlus"
+  | "fontSizeMd"
+  | "fontSizeXlPlus"
+  | "lineHeightProse"
+  | "lineHeightAiry"
+  | "colorPrimary"
+  | "colorPrimaryHover"
+  | "colorSecondary"
+  | "colorBackground"
+  | "colorForeground"
+  | "colorSurface"
+  | "colorSurfaceGlass"
+  | "colorSurfaceMuted"
+  | "colorSurfaceSunken"
+  | "colorBorderSubtle"
+  | "colorTextStrong"
+  | "colorTextChrome"
+  | "colorTextChromeHover"
+  | "colorTextSubtle"
+  | "colorTextMuted"
+  | "colorAccentSocial"
+  | "colorIconMuted"
+  | "colorWarning"
+  | "colorWarningHover"
+  | "colorShadowBrand"
+  | "colorShadowBox"
+  | "colorChartViews"
+  | "colorChartLikes"
+  | "colorChartClicks"
+  | "colorChartComments"
+  | "colorChartGrid"
+  | "colorChartAxis"
+  | "colorChartCursor"
+  | "colorChartTooltipSurface"
+  | "colorChartTooltipText"
+  | "colorChartTooltipLabel"
+  | "radiusHuge"
+  | "radiusLeaf"
+  | "shadowBrandSoft"
+  | "shadowBrandMd"
+  | "shadowBrandLg"
+  | "shadowBrandHover"
+  | "shadowBrandDrop"
+  | "shadowBox"
+  | "shadowCardSoft"
+  | "shadowCardAmbient"
+  | "shadowCardFaint"
+  | "shadowCardSubtle"
+  | "shadowCardHairline"
+  | "shadowCardRaised"
+  | "shadowElevated"
+  | "shadowElevatedSoft"
+  | "shadowElevatedTight"
+  | "shadowFloat"
+  | "shadowFloatHover"
+  | "shadowFloatWide"
+  | "shadowFloatStrong"
+  | "shadowPop"
+  | "shadowPopWide"
+  | "shadowModal"
+  | "shadowLightbox"
+  | "dropShadowSoft"
+  | "dropShadowAmberSm"
+  | "dropShadowAmberMd"
+  | "blurHair"
+  | "blurThin"
+  | "blurMist"
+  | "blurOrb"
+  | "blurHaze"
+  | "animationSlideUp"
+  | "animationFadeIn"
+  | "animationFade"
+  | "animationBlink"
+  | "animationBlinkCaret"
+  | "animationSway"
+  | "animationShimmer"
+  | "animationSpinGlow"
+  | "animationAccordionDown"
+  | "animationAccordionUp"
+  | "zIndexRaised"
+  | "zIndexSticky"
+  | "zIndexDrawer"
+  | "zIndexDropdown"
+  | "zIndexOverlay"
+  | "zIndexOverlayContent"
+  | "zIndexModal"
+  | "zIndexModalContent"
+  | "zIndexModalNested"
+  | "zIndexPopover"
+  | "zIndexTopLayer"
+  | "zIndexTopLayerContent"
+  | "zIndexToast"
+  | "zIndexMax";
+
+export type Token = { readonly cssVar: `--${string}`; readonly value: string };
+
+export declare const tokens: Readonly<Record<TokenName, Token>>;
+
+/** Class-name suffixes per token group (e.g. `fontSize` → `text-<suffix>`), plus Avero `@utility` names. */
+export declare const tokenGroups: Readonly<{
+  color: readonly string[];
+  fontFamily: readonly string[];
+  fontSize: readonly string[];
+  lineHeight: readonly string[];
+  radius: readonly string[];
+  shadow: readonly string[];
+  dropShadow: readonly string[];
+  blur: readonly string[];
+  animation: readonly string[];
+  zIndex: readonly string[];
+  utility: readonly string[];
+}>;
+
+/** Returns the CSS `var()` reference for a token, for use in style props. */
+export declare function tokenVar(name: TokenName): string;