@netzi/tokens 0.1.0-beta.10

package/lib/brand-context.d.ts

@@ -0,0 +1,10 @@
+import type { NETZI_BRAND_CONTEXT } from './brand.js';
+import type { Rgba } from './contrast.js';
+
+/** Superficies, alfas de los tintes y tintas con que se mide una marca. */
+export type BrandContext = typeof NETZI_BRAND_CONTEXT;
+
+export declare function parseBrandColor(color: unknown): string | null;
+export declare function rgba(hex: unknown, name: string): Rgba;
+/** Si un relleno aguanta una tinta del kit y los textos de sus tintes, en los dos modos. */
+export declare function fillPasses(fill: Rgba, ctx: BrandContext): boolean;

package/lib/brand-context.js

@@ -0,0 +1,65 @@
+/**
+ * Lo que la marca mide contra un CONTEXTO (superficies, alfas de los tintes y tintas del kit):
+ * las piezas de `brand.js` que no dependen de los valores del tema por defecto, que se le
+ * pasan. Así se prueban con superficies en las que el contrato muerde de verdad. Es interno:
+ * no está en los `exports` del paquete; lo público es `@netzi/tokens/brand`.
+ */
+import { MINIMUM, contrastRatio, over } from './contrast.js';
+
+const HEX = /^#(?:[\da-f]{3}|[\da-f]{6})$/i;
+const MODES = Object.freeze(['light', 'dark']);
+
+/** `#rgb` o `#rrggbb` (sin alfa: la marca es un relleno opaco) → `#rrggbb` en minúsculas. */
+export function parseBrandColor(color) {
+  if (typeof color !== 'string') return null;
+  const hex = color.trim();
+  if (!HEX.test(hex)) return null;
+  const digits = hex.length === 4 ? hex.slice(1).replaceAll(/./g, (d) => d + d) : hex.slice(1);
+  return `#${digits.toLowerCase()}`;
+}
+
+/** El color en canales de 8 bits; `TypeError` con el nombre de lo que no es un color. */
+export function rgba(hex, name) {
+  const normal = parseBrandColor(hex);
+  if (!normal) throw new TypeError(`${name}: «${hex}» no es un color #rgb o #rrggbb`);
+  const n = Number.parseInt(normal.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1];
+}
+
+/** Las superficies del modo, opacas. */
+export const surfacesOf = (ctx, mode) =>
+  Object.entries(ctx.surfaces[mode]).map(([name, hex]) => ({ name, color: rgba(hex, name) }));
+
+/** El tinte del primario (`soft` o `strong`) de un modo: el relleno con su alfa. */
+export const tintOf = (ctx, primary, mode, kind) => ({
+  name: kind === 'soft' ? '--netzi-primary-tint' : '--netzi-primary-tint-strong',
+  color: [primary[0], primary[1], primary[2], ctx.tintAlpha[mode][kind]],
+});
+
+/** Un tinte translúcido compuesto sobre cada superficie del modo. */
+export const tintedOf = (ctx, mode, tint) =>
+  surfacesOf(ctx, mode).map((s) => ({
+    name: `${tint.name} sobre ${s.name}`,
+    color: over(tint.color, s.color),
+  }));
+
+/**
+ * Lo que un relleno tiene que aguantar en los dos modos: alguna de las tintas del kit a 4.5:1
+ * encima, `--netzi-text` a 4.5:1 sobre su tinte marcado y el pulgar de las barras
+ * (`--netzi-text-2`) a 3:1 sobre el suave. Lo segundo hoy no muerde con las superficies del
+ * kit (el peor caso, un relleno blanco en oscuro, da 3.03:1), pero es parte del contrato.
+ */
+export function fillPasses(fill, ctx) {
+  const inks = Object.entries(ctx.ink).map(([k, hex]) => rgba(hex, `ink.${k}`));
+  if (Math.max(...inks.map((i) => contrastRatio(i, fill))) < MINIMUM.text) return false;
+  return MODES.every((mode) => {
+    const text = rgba(ctx.inksOnTint[mode].text, '--netzi-text');
+    const text2 = rgba(ctx.inksOnTint[mode]['text-2'], '--netzi-text-2');
+    const strong = tintedOf(ctx, mode, tintOf(ctx, fill, mode, 'strong'));
+    const soft = tintedOf(ctx, mode, tintOf(ctx, fill, mode, 'soft'));
+    return (
+      strong.every((b) => contrastRatio(text, b.color) >= MINIMUM.text) &&
+      soft.every((b) => contrastRatio(text2, b.color) >= MINIMUM['non-text'])
+    );
+  });
+}

package/lib/brand.d.ts

@@ -0,0 +1,90 @@
+/** Modo de color en que se mide una marca. */
+export type NetziBrandMode = 'light' | 'dark';
+
+/**
+ * Los tokens del primario de UN modo, en `#rrggbb`. Son los que se redefinen juntos al poner
+ * una marca propia: cada uno se pinta encima o debajo de otro, y cambiar uno solo rompe el
+ * par. Los tintes (`--netzi-primary-tint`, `-strong`) y el anillo de foco salen solos de
+ * `primary` y `primaryText`.
+ */
+export interface NetziBrandTokens {
+  /** `--netzi-primary`: el relleno de marca (botón primario, interruptor, barra). */
+  primary: string;
+  /** `--netzi-primary-hover`: el relleno al pasar el puntero, con la misma tinta encima. */
+  primaryHover: string;
+  /**
+   * `--netzi-primary-pressed`: el relleno presionado (#156), el hover con la capa de presionado
+   * del color que se aleja de la tinta. 4.5:1 con la misma tinta.
+   */
+  primaryPressed: string;
+  /** `--netzi-primary-dark`: el relleno de lo marcado (checkbox, radio), con blanco encima. */
+  primaryDark: string;
+  /** `--netzi-primary-text`: el primario que se LEE (enlaces, ítem activo). 4.5:1. */
+  primaryText: string;
+  /** `--netzi-primary-graphic`: lo no textual que comunica (progreso, anillo). 3:1. */
+  primaryGraphic: string;
+  /** `--netzi-on-primary`: la tinta sobre el relleno y su hover. 4.5:1. */
+  onPrimary: string;
+  /** `--netzi-on-primary-dark`: la tinta sobre el primario oscuro. 3:1. */
+  onPrimaryDark: string;
+}
+
+/** Una marca completa: sus tokens en claro y en oscuro. */
+export interface NetziBrandTheme {
+  light: NetziBrandTokens;
+  dark: NetziBrandTokens;
+}
+
+/** Lo que devuelve `deriveBrand`: la marca pedida y la paleta que cumple el contrato. */
+export interface NetziBrand extends NetziBrandTheme {
+  /** El color pedido, normalizado a `#rrggbb`. */
+  color: string;
+  /**
+   * `true` si el color no podía ser el relleno (ninguna tinta llegaba a 4.5:1 encima, o
+   * tumbaba los textos de su tinte) y `primary` es el tono más cercano que sí.
+   */
+  adjusted: boolean;
+}
+
+/** Un par del contrato medido: una tinta sobre un fondo, en un modo. */
+export interface NetziBrandCheck {
+  mode: NetziBrandMode;
+  /** La custom property que se pinta encima (`--netzi-primary-text`). */
+  token: string;
+  /** El fondo: una superficie, un tinte compuesto sobre ella o un relleno. */
+  on: string;
+  ratio: number;
+  /** 4.5 para texto (WCAG 1.4.3), 3 para lo no textual (WCAG 1.4.11). */
+  minimum: number;
+  ok: boolean;
+}
+
+/** El veredicto del validador: `ok` si cumplen todos los pares. */
+export interface NetziBrandReport {
+  ok: boolean;
+  checks: NetziBrandCheck[];
+  failures: NetziBrandCheck[];
+}
+
+/** Cada token de marca y su custom property (`primaryText` → `--netzi-primary-text`). */
+export declare const NETZI_BRAND_TOKENS: Readonly<Record<keyof NetziBrandTokens, string>>;
+
+/** Las superficies, tintes y tintas con que mide el validador (las del tema por defecto). */
+export declare const NETZI_BRAND_CONTEXT: Readonly<{
+  surfaces: Readonly<Record<NetziBrandMode, Readonly<Record<string, string>>>>;
+  tintAlpha: Readonly<Record<NetziBrandMode, Readonly<{ soft: number; strong: number }>>>;
+  inksOnTint: Readonly<Record<NetziBrandMode, Readonly<{ text: string; 'text-2': string }>>>;
+  ink: Readonly<{ dark: string; light: string }>;
+}>;
+
+/** `#rgb` o `#rrggbb` → `#rrggbb` en minúsculas; `null` si no es un color así. */
+export declare function parseBrandColor(color: unknown): string | null;
+
+/** Comprueba una marca contra el contrato en claro y en oscuro; `TypeError` si falta un modo. */
+export declare function validateBrand(brand: NetziBrandTheme): NetziBrandReport;
+
+/** Deriva de un color de marca los tokens del primario que cumplen el contrato. */
+export declare function deriveBrand(color: string): NetziBrand;
+
+/** Los tokens de un modo como custom properties, listos para aplicar. */
+export declare function brandVariables(tokens: NetziBrandTokens): Record<string, string>;

package/lib/brand.js

@@ -0,0 +1,256 @@
+/**
+ * Marca propia con contraste (#174): el contrato de los tokens del primario, un validador y
+ * la derivación de una paleta que lo cumple a partir de UN color. Se publica como
+ * `@netzi/tokens/brand`, en JavaScript plano y sin dependencias para que valga en cualquier
+ * framework; los tipos van en `brand.d.ts`.
+ *
+ * El contrato es el mismo que declara la fuente DTCG para el primario (texto a 4.5:1, lo no
+ * textual a 3:1, sobre cada superficie y sobre el tinte del primario), con las superficies,
+ * tintes y tintas del tema por defecto en claro y en oscuro. Un test de `@netzi/tokens` mete
+ * lo derivado en la fuente y pasa el contrato del build: si uno cambia sin el otro, se rompe.
+ */
+import {
+  fillPasses,
+  rgba,
+  surfacesOf as surfacesIn,
+  tintOf as tintIn,
+  tintedOf as tintedIn,
+} from './brand-context.js';
+import { MINIMUM, contrastRatio } from './contrast.js';
+
+export { parseBrandColor } from './brand-context.js';
+
+/** Superficies del tema por defecto: todo token con papel de superficie en la fuente. */
+const SURFACES = Object.freeze({
+  light: Object.freeze({
+    '--netzi-bg': '#f7f9fb',
+    '--netzi-surface': '#ffffff',
+    '--netzi-surface-2': '#f4f6f8',
+    '--netzi-surface-3': '#eef1f4',
+  }),
+  dark: Object.freeze({
+    '--netzi-bg': '#0d1117',
+    '--netzi-surface': '#161b22',
+    '--netzi-surface-2': '#0d1117',
+    '--netzi-surface-3': '#21262d',
+  }),
+});
+
+/** Alfa de los tintes del primario (`--netzi-primary-tint` y `-strong`) en cada modo. */
+const TINT_ALPHA = Object.freeze({
+  light: Object.freeze({ soft: 0.1, strong: 0.22 }),
+  dark: Object.freeze({ soft: 0.15, strong: 0.28 }),
+});
+
+/**
+ * Los textos del kit que se pintan sobre los tintes del primario: `--netzi-text` sobre el
+ * marcado y `--netzi-text-2` (el pulgar de las barras de desplazamiento) sobre el suave. No
+ * son de la marca, pero dependen de ella: una marca puede tumbarlos a través de su tinte.
+ */
+const INKS_ON_TINT = Object.freeze({
+  light: Object.freeze({ text: '#1c252e', 'text-2': '#5c6b78' }),
+  dark: Object.freeze({ text: '#ffffff', 'text-2': '#8b949e' }),
+});
+
+/** Las dos tintas que el kit pone sobre un relleno del primario. */
+const INK = Object.freeze({ dark: '#04121f', light: '#ffffff' });
+
+/** El paso mínimo del hover frente al reposo: que se note el cambio sin perder la tinta. */
+const HOVER_STEP = 1.2;
+
+/**
+ * La opacidad de la capa de presionado (`state.pressed.opacity` de la fuente, #156): el
+ * presionado es el hover con esa capa del color que se aleja de su tinta.
+ */
+const PRESSED_OPACITY = 0.12;
+
+/** Cada token de marca y su custom property, en el orden en que se aplican y se documentan. */
+export const NETZI_BRAND_TOKENS = Object.freeze({
+  primary: '--netzi-primary',
+  primaryHover: '--netzi-primary-hover',
+  primaryPressed: '--netzi-primary-pressed',
+  primaryDark: '--netzi-primary-dark',
+  primaryText: '--netzi-primary-text',
+  primaryGraphic: '--netzi-primary-graphic',
+  onPrimary: '--netzi-on-primary',
+  onPrimaryDark: '--netzi-on-primary-dark',
+});
+
+const CSS_NAMES = NETZI_BRAND_TOKENS;
+const KEYS = Object.freeze(Object.keys(CSS_NAMES));
+
+const MODES = Object.freeze(['light', 'dark']);
+const BLACK = Object.freeze([0, 0, 0, 1]);
+const WHITE = Object.freeze([255, 255, 255, 1]);
+const twoDigits = (n) => n.toString(16).padStart(2, '0');
+const toHex = ([r, g, b]) => `#${twoDigits(r)}${twoDigits(g)}${twoDigits(b)}`;
+
+/** `color-mix(in srgb, color, hacia t)`, redondeado a 8 bits. */
+function mix(color, toward, t) {
+  const canal = (i) => Math.round(color[i] + (toward[i] - color[i]) * t);
+  return [canal(0), canal(1), canal(2), 1];
+}
+
+/**
+ * El primer tono que cumple `passes` yendo de `base` hacia cada extremo de `towards` en pasos
+ * del 1 %, todos los sentidos a la vez: el más cercano, con empate para el primero de la lista.
+ */
+function nearest(base, towards, passes) {
+  for (let step = 0; step <= 100; step++) {
+    for (const toward of towards) {
+      const candidate = mix(base, toward, step / 100);
+      if (passes(candidate)) return candidate;
+    }
+  }
+  return null;
+}
+
+/**
+ * El tono más cercano a `base` que cumple `passes`, oscureciendo o aclarando. Los extremos
+ * (negro y blanco) cumplen cualquier contrato del kit, así que siempre hay respuesta.
+ */
+function closest(base, prefer, passes) {
+  const found = nearest(base, prefer === 'darker' ? [BLACK, WHITE] : [WHITE, BLACK], passes);
+  if (!found) throw new Error(`Ningún tono de ${toHex(base)} cumple el contrato`);
+  return found;
+}
+
+/** El contexto del tema por defecto, ya aplicado. */
+const surfacesOf = (mode) => surfacesIn(NETZI_BRAND_CONTEXT, mode);
+const tintedOf = (mode, tint) => tintedIn(NETZI_BRAND_CONTEXT, mode, tint);
+const tintOf = (primary, mode, kind) => tintIn(NETZI_BRAND_CONTEXT, primary, mode, kind);
+
+/** Los pares del contrato de un modo: cada tinta con su papel y sus fondos. */
+function pairsOf(mode, tokens) {
+  const c = Object.fromEntries(KEYS.map((k) => [k, rgba(tokens[k], CSS_NAMES[k])]));
+  const soft = tintOf(c.primary, mode, 'soft');
+  const strong = tintOf(c.primary, mode, 'strong');
+  const ink = (name, color, role, on) => ({ name, color, role, on });
+  return [
+    ink(CSS_NAMES.primaryText, c.primaryText, 'text', [
+      ...surfacesOf(mode),
+      ...tintedOf(mode, soft),
+    ]),
+    ink(CSS_NAMES.primaryGraphic, c.primaryGraphic, 'non-text', [
+      ...surfacesOf(mode),
+      ...tintedOf(mode, soft),
+    ]),
+    ink(CSS_NAMES.primaryDark, c.primaryDark, 'non-text', surfacesOf(mode)),
+    ink(CSS_NAMES.onPrimaryDark, c.onPrimaryDark, 'non-text', [
+      { name: CSS_NAMES.primaryDark, color: c.primaryDark },
+    ]),
+    ink(CSS_NAMES.onPrimary, c.onPrimary, 'text', [
+      { name: CSS_NAMES.primary, color: c.primary },
+      { name: CSS_NAMES.primaryHover, color: c.primaryHover },
+      { name: CSS_NAMES.primaryPressed, color: c.primaryPressed },
+    ]),
+    ink(
+      '--netzi-text',
+      rgba(INKS_ON_TINT[mode].text, '--netzi-text'),
+      'text',
+      tintedOf(mode, strong),
+    ),
+    ink(
+      '--netzi-scrollbar-thumb',
+      rgba(INKS_ON_TINT[mode]['text-2'], '--netzi-text-2'),
+      'non-text',
+      tintedOf(mode, soft),
+    ),
+  ];
+}
+
+/**
+ * Comprueba una marca contra el contrato, en claro y en oscuro. Cada par lleva su ratio y su
+ * mínimo; `ok` es que cumplen todos. Lanza `TypeError` si falta un modo o un token no es un
+ * color.
+ */
+export function validateBrand(brand) {
+  const checks = [];
+  for (const mode of MODES) {
+    if (!brand?.[mode]) throw new TypeError(`validateBrand: falta el modo «${mode}»`);
+    for (const pair of pairsOf(mode, brand[mode])) {
+      const minimum = MINIMUM[pair.role];
+      for (const bg of pair.on) {
+        const ratio = contrastRatio(pair.color, bg.color);
+        checks.push({ mode, token: pair.name, on: bg.name, ratio, minimum, ok: ratio >= minimum });
+      }
+    }
+  }
+  const failures = checks.filter((c) => !c.ok);
+  return { ok: failures.length === 0, checks, failures };
+}
+
+/** Una tinta que llega a `minimum` sobre todos los fondos. */
+const reaches = (minimum, on) => (color) =>
+  on.every((b) => contrastRatio(color, b.color) >= minimum);
+
+/**
+ * Deriva de un color de marca los tokens del primario que cumplen el contrato en claro y en
+ * oscuro. El relleno es el color tal cual mientras alguna tinta llegue a 4.5:1 encima; si
+ * ninguna llega (los tonos medios), se mueve al más cercano que sí y `adjusted` lo dice. El
+ * texto, el gráfico y el primario oscuro son el tono más cercano al relleno que llega a su
+ * mínimo en cada modo. Lanza `TypeError` si el color no es `#rgb` ni `#rrggbb`.
+ */
+export function deriveBrand(color) {
+  const source = rgba(color, 'deriveBrand');
+  const primary = closest(source, 'darker', (f) => fillPasses(f, NETZI_BRAND_CONTEXT));
+  const [onPrimary] = Object.values(INK)
+    .map((i) => rgba(i, 'INK'))
+    .sort((a, b) => contrastRatio(b, primary) - contrastRatio(a, primary));
+  // El hover OSCURECE, como en los presets; solo si con su tinta no puede, aclara.
+  const hoverPasses = (h) =>
+    contrastRatio(onPrimary, h) >= MINIMUM.text && contrastRatio(primary, h) >= HOVER_STEP;
+  const hover = nearest(primary, [BLACK], hoverPasses) ?? closest(primary, 'lighter', hoverPasses);
+  const pressed = pressedOf(hover, onPrimary);
+  const white = rgba(INK.light, 'INK');
+  const tokensOf = (mode) => {
+    const prefer = mode === 'light' ? 'darker' : 'lighter';
+    const conTinte = [...surfacesOf(mode), ...tintedOf(mode, tintOf(primary, mode, 'soft'))];
+    const onSurfaces = reaches(MINIMUM['non-text'], surfacesOf(mode));
+    const dark = closest(primary, 'darker', (d) => {
+      return onSurfaces(d) && contrastRatio(white, d) >= MINIMUM['non-text'];
+    });
+    return {
+      primary: toHex(primary),
+      primaryHover: toHex(hover),
+      primaryPressed: toHex(pressed),
+      primaryDark: toHex(dark),
+      primaryText: toHex(closest(primary, prefer, reaches(MINIMUM.text, conTinte))),
+      primaryGraphic: toHex(closest(primary, prefer, reaches(MINIMUM['non-text'], conTinte))),
+      onPrimary: toHex(onPrimary),
+      onPrimaryDark: INK.light,
+    };
+  };
+  return {
+    color: toHex(source),
+    adjusted: toHex(primary) !== toHex(source),
+    light: tokensOf('light'),
+    dark: tokensOf('dark'),
+  };
+}
+
+/**
+ * El presionado (#156): el hover con la capa de presionado del color que se aleja de la tinta
+ * (blanco bajo una tinta oscura, negro bajo una blanca), así que la tinta gana contraste en vez
+ * de perderlo. Si aun así no llegara a 4.5:1, el tono más cercano que sí.
+ */
+function pressedOf(hover, onPrimary) {
+  const away = contrastRatio(onPrimary, BLACK) > contrastRatio(onPrimary, WHITE) ? BLACK : WHITE;
+  const pressed = mix(hover, away, PRESSED_OPACITY);
+  const passes = (p) => contrastRatio(onPrimary, p) >= MINIMUM.text;
+  if (passes(pressed)) return pressed;
+  return closest(pressed, away === WHITE ? 'lighter' : 'darker', passes);
+}
+
+/** Los tokens de un modo como custom properties (`--netzi-primary` → valor), para aplicarlos. */
+export function brandVariables(tokens) {
+  return Object.fromEntries(KEYS.map((k) => [CSS_NAMES[k], tokens[k]]));
+}
+
+/** Las superficies, tintes y tintas con que mide el validador (las del tema por defecto). */
+export const NETZI_BRAND_CONTEXT = Object.freeze({
+  surfaces: SURFACES,
+  tintAlpha: TINT_ALPHA,
+  inksOnTint: INKS_ON_TINT,
+  ink: INK,
+});

package/lib/contrast.d.ts

@@ -0,0 +1,14 @@
+/** Canales 0-255 y alfa 0-1. */
+export type Rgba = readonly [number, number, number, number];
+
+/** Los mínimos de WCAG 2.1: texto (SC 1.4.3) y lo no textual con significado (SC 1.4.11). */
+export declare const MINIMUM: Readonly<{ text: 4.5; 'non-text': 3 }>;
+
+/** Luminancia relativa (WCAG 2.1, definición literal). */
+export declare function luminance(color: Rgba): number;
+
+/** Ratio de contraste entre dos colores opacos. */
+export declare function contrastRatio(a: Rgba, b: Rgba): number;
+
+/** `arriba` compuesto sobre un fondo OPACO, redondeado a 8 bits como lo pinta el navegador. */
+export declare function over(arriba: Rgba, abajo: Rgba): Rgba;

package/lib/contrast.js

@@ -0,0 +1,34 @@
+/**
+ * Contraste WCAG 2.1 entre colores de 8 bits. Es la ÚNICA definición del repo: la usan el
+ * build de los tokens (su contrato, `build/contrast.ts`), los guardianes de `@netzi/ui` y el
+ * validador de marca que se publica (`@netzi/tokens/brand`). JavaScript plano y sin
+ * dependencias para que se publique tal cual; los tipos van en `contrast.d.ts`.
+ */
+
+/** Los mínimos de WCAG 2.1: texto (SC 1.4.3) y lo no textual con significado (SC 1.4.11). */
+export const MINIMUM = Object.freeze({ text: 4.5, 'non-text': 3 });
+
+/** Luminancia relativa (WCAG 2.1, definición literal). */
+export function luminance([r, g, b]) {
+  const lineal = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lineal(r) + 0.7152 * lineal(g) + 0.0722 * lineal(b);
+}
+
+/** Ratio de contraste entre dos colores opacos. */
+export function contrastRatio(a, b) {
+  const [alta, baja] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (alta + 0.05) / (baja + 0.05);
+}
+
+/**
+ * `arriba` compuesto sobre un fondo OPACO, redondeado a 8 bits como lo pinta el navegador.
+ * Es también la mezcla `color-mix(in srgb, arriba P%, abajo)` con P = el alfa de `arriba`.
+ */
+export function over(arriba, abajo) {
+  const a = arriba[3];
+  const canal = (i) => Math.round(arriba[i] * a + abajo[i] * (1 - a));
+  return [canal(0), canal(1), canal(2), 1];
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@netzi/tokens",
+  "version": "0.1.0-beta.10",
+  "description": "Design tokens de Netzi (CSS custom properties): marca, tema claro/oscuro, tipografía, radios, sombras, y un validador de marca propia con contraste. Agnóstico de framework.",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ui.netzi.tech",
+  "bugs": {
+    "email": "netzi.tech@gmail.com"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "styles",
+    "lib",
+    "public-tokens.json",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE.md"
+  ],
+  "exports": {
+    ".": "./styles/index.css",
+    "./tokens.css": "./styles/tokens.css",
+    "./base.css": "./styles/base.css",
+    "./fonts.css": "./styles/fonts.css",
+    "./index.css": "./styles/index.css",
+    "./public-tokens.json": "./public-tokens.json",
+    "./brand": {
+      "types": "./lib/brand.d.ts",
+      "default": "./lib/brand.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "netzi",
+    "design-tokens",
+    "css",
+    "theme"
+  ],
+  "devDependencies": {
+    "prettier": "^3.4.2",
+    "style-dictionary": "~5.5.5"
+  },
+  "scripts": {
+    "build": "node build/build.ts --check",
+    "generate": "node build/build.ts",
+    "lint": "stylelint \"styles/**/*.css\"",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "typecheck": "tsc -p tsconfig.json"
+  }
+}