@fristil/designsystem 0.2.0

package/src/tailwind/tailwind.css

@@ -0,0 +1,134 @@
+/*
+ * Fristils verdier som Tailwind-tema.
+ *
+ * Fila er ren CSS, og pakken har ingen avhengighet til Tailwind. Det er
+ * Tailwind-versjonen i appen din som leser den, så to versjoner kan ikke
+ * komme i konflikt: her finnes det ingen andre.
+ *
+ * Krever Tailwind 4 og at `tokens.css` er lastet, siden verdiene peker dit.
+ *
+ * ```css
+ * @layer theme, base, fristil, components, utilities;
+ *
+ * @import "tailwindcss";
+ * @import "@fristil/designsystem/tokens.css";
+ * @import "@fristil/designsystem/tailwind.css";
+ * ```
+ *
+ * Rekkefølgen på den første linja er ikke pynt. Lagene teller i den
+ * rekkefølgen de først blir nevnt, og vinneren er det siste laget, uansett
+ * spesifisitet. Står `fristil` foran `base`, slår Tailwinds Preflight
+ * komponentene våre og nullstiller for eksempel bakgrunnen på en knapp. Står
+ * det etter `utilities`, slår komponentene våre `p-6` og resten av klassene
+ * dine. Mellom `base` og `components` er det eneste stedet begge deler virker.
+ *
+ * Alt vi legger til heter `fs-`, som klassene ellers i systemet. Da rører vi
+ * ikke Tailwinds egne verdier: `bg-neutral-100` betyr fortsatt det samme.
+ */
+
+@theme inline {
+  /*
+   * Avstandsenheten. Tailwind regner `p-4` som `calc(var(--spacing) * 4)`,
+   * så med `--size-1` som enhet er `p-4` nøyaktig `--size-4`. Endrer du
+   * skalaen, følger Tailwind-klassene med.
+   */
+  --spacing: var(--size-1);
+
+  /* Side */
+  --color-fs-page: var(--semantic-page-background);
+  --color-fs-page-fg: var(--semantic-page-foreground);
+
+  /* Interaktiv */
+  --color-fs-interactive: var(--semantic-interactive-main);
+  --color-fs-interactive-bg: var(--semantic-interactive-background);
+  --color-fs-interactive-fg: var(--semantic-interactive-foreground);
+  --color-fs-interactive-contrast: var(--semantic-interactive-contrast);
+  --color-fs-visited: var(--semantic-interactive-visited);
+
+  /* Status */
+  --color-fs-success: var(--semantic-success-foreground);
+  --color-fs-success-bg: var(--semantic-success-background);
+  --color-fs-warning: var(--semantic-warning-foreground);
+  --color-fs-warning-bg: var(--semantic-warning-background);
+  --color-fs-danger: var(--semantic-danger-foreground);
+  --color-fs-danger-bg: var(--semantic-danger-background);
+  --color-fs-danger-main: var(--semantic-danger-main);
+  --color-fs-danger-contrast: var(--semantic-danger-contrast);
+  --color-fs-neutral: var(--semantic-neutral-foreground);
+  --color-fs-neutral-bg: var(--semantic-neutral-background);
+  --color-fs-disabled: var(--semantic-disabled-foreground);
+  --color-fs-disabled-bg: var(--semantic-disabled-background);
+
+  /* Tekst og kanter */
+  --color-fs-muted: var(--semantic-muted-foreground);
+  --color-fs-field-border: var(--semantic-field-border);
+  --color-fs-field-border-hover: var(--semantic-field-border-hover);
+  --color-fs-divider: var(--semantic-divider-30);
+  --color-fs-divider-strong: var(--semantic-divider-100);
+
+  /* Palett, for det som ikke har en semantisk betydning ennå */
+  --color-fs-burgundy-5: var(--palette-burgundy-5);
+  --color-fs-burgundy-10: var(--palette-burgundy-10);
+  --color-fs-burgundy-30: var(--palette-burgundy-30);
+  --color-fs-burgundy-50: var(--palette-burgundy-50);
+  --color-fs-burgundy-70: var(--palette-burgundy-70);
+  --color-fs-burgundy-100: var(--palette-burgundy-100);
+  --color-fs-forest-5: var(--palette-forest-5);
+  --color-fs-forest-10: var(--palette-forest-10);
+  --color-fs-forest-30: var(--palette-forest-30);
+  --color-fs-forest-50: var(--palette-forest-50);
+  --color-fs-forest-70: var(--palette-forest-70);
+  --color-fs-forest-100: var(--palette-forest-100);
+  --color-fs-ochre-5: var(--palette-ochre-5);
+  --color-fs-ochre-10: var(--palette-ochre-10);
+  --color-fs-ochre-30: var(--palette-ochre-30);
+  --color-fs-ochre-50: var(--palette-ochre-50);
+  --color-fs-ochre-70: var(--palette-ochre-70);
+  --color-fs-ochre-100: var(--palette-ochre-100);
+  --color-fs-denim-5: var(--palette-denim-5);
+  --color-fs-denim-10: var(--palette-denim-10);
+  --color-fs-denim-30: var(--palette-denim-30);
+  --color-fs-denim-50: var(--palette-denim-50);
+  --color-fs-denim-70: var(--palette-denim-70);
+  --color-fs-denim-100: var(--palette-denim-100);
+  --color-fs-azure-10: var(--palette-azure-10);
+  --color-fs-azure-30: var(--palette-azure-30);
+  --color-fs-azure-70: var(--palette-azure-70);
+  --color-fs-azure-100: var(--palette-azure-100);
+  --color-fs-graphite-0: var(--palette-graphite-0);
+  --color-fs-graphite-5: var(--palette-graphite-5);
+  --color-fs-graphite-10: var(--palette-graphite-10);
+  --color-fs-graphite-30: var(--palette-graphite-30);
+  --color-fs-graphite-50: var(--palette-graphite-50);
+  --color-fs-graphite-70: var(--palette-graphite-70);
+  --color-fs-graphite-100: var(--palette-graphite-100);
+
+  /* Tekststørrelser */
+  --text-fs-xxs: var(--font-size-xxs);
+  --text-fs-xs: var(--font-size-xs);
+  --text-fs-s: var(--font-size-s);
+  --text-fs-m: var(--font-size-m);
+  --text-fs-l: var(--font-size-l);
+  --text-fs-xl: var(--font-size-xl);
+  --text-fs-xxl: var(--font-size-xxl);
+  --text-fs-mega: var(--font-size-mega);
+
+  /* Bredder for sideoppsett */
+  --container-fs-xs: 100%;
+  --container-fs-sm: 576px;
+  --container-fs-md: 960px;
+  --container-fs-lg: 1152px;
+  --container-fs-xl: 1536px;
+  --container-fs-aside: 384px;
+  --container-fs-aside-narrow: 288px;
+  --container-fs-wide-content: 768px;
+
+  /* Skygge under flater som ligger over siden */
+  --shadow-fs-overlay: var(--semantic-shadow-overlay);
+}
+
+/*
+ * Brekkpunktene er med vilje utelatt. Fristils `sm`, `md`, `lg`, `xl` og
+ * `2xl` har nøyaktig de samme verdiene som Tailwind allerede bruker, så
+ * `md:` virker som før uten at vi overstyrer noe.
+ */

package/src/tokens/color.ts

@@ -0,0 +1,267 @@
+/**
+ * Fargeregning for temageneratoren.
+ *
+ * Skalaene lages i OKLCH og ikke i HSL. I HSL betyr lyshet noe annet for hver
+ * kulør: `hsl(60 100% 50%)` er knallgul og `hsl(240 100% 50%)` er nesten sort,
+ * med samme tall. En skala bygget på HSL blir derfor ujevn, og kontrasten
+ * varierer med kuløren brukeren valgte. I OKLCH er lysheten den samme
+ * opplevde lysheten uansett kulør, så trinnene kan settes én gang og gjelde
+ * for alle farger.
+ *
+ * Kontrasten regnes med WCAG 2.1 sin formel, altså den samme som testene
+ * bruker, slik at generatoren og kontrollen er enige.
+ */
+
+export type Rgb = { r: number; g: number; b: number }
+export type Oklch = { l: number; c: number; h: number }
+
+/** Leser `#rrggbb` eller `#rgb`. */
+export function parseHex(hex: string): Rgb {
+  const rent = hex.trim().replace(/^#/, "")
+  const full =
+    rent.length === 3
+      ? rent
+          .split("")
+          .map((tegn) => tegn + tegn)
+          .join("")
+      : rent
+
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    throw new Error(`«${hex}» er ikke en gyldig heksadesimal farge`)
+  }
+
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16),
+  }
+}
+
+export function toHex({ r, g, b }: Rgb): string {
+  const tall = (verdi: number) =>
+    Math.round(Math.min(255, Math.max(0, verdi)))
+      .toString(16)
+      .padStart(2, "0")
+
+  return `#${tall(r)}${tall(g)}${tall(b)}`
+}
+
+function toLinear(kanal: number): number {
+  const c = kanal / 255
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+}
+
+function fromLinear(kanal: number): number {
+  const c =
+    kanal <= 0.0031308 ? kanal * 12.92 : 1.055 * kanal ** (1 / 2.4) - 0.055
+  return c * 255
+}
+
+export function rgbToOklch({ r, g, b }: Rgb): Oklch {
+  const lr = toLinear(r)
+  const lg = toLinear(g)
+  const lb = toLinear(b)
+
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
+
+  const l_ = Math.cbrt(l)
+  const m_ = Math.cbrt(m)
+  const s_ = Math.cbrt(s)
+
+  const lightness = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_
+  const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
+
+  return {
+    l: lightness,
+    c: Math.hypot(a, bb),
+    h: (Math.atan2(bb, a) * 180) / Math.PI,
+  }
+}
+
+function oklchToRgbRaw({ l, c, h }: Oklch): Rgb {
+  const rad = (h * Math.PI) / 180
+  const a = c * Math.cos(rad)
+  const b = c * Math.sin(rad)
+
+  const l_ = l + 0.3963377774 * a + 0.2158037573 * b
+  const m_ = l - 0.1055613458 * a - 0.0638541728 * b
+  const s_ = l - 0.0894841775 * a - 1.291485548 * b
+
+  const lr = l_ ** 3
+  const mr = m_ ** 3
+  const sr = s_ ** 3
+
+  return {
+    r: fromLinear(4.0767416621 * lr - 3.3077115913 * mr + 0.2309699292 * sr),
+    g: fromLinear(-1.2684380046 * lr + 2.6097574011 * mr - 0.3413193965 * sr),
+    b: fromLinear(-0.0041960863 * lr - 0.7034186147 * mr + 1.707614701 * sr),
+  }
+}
+
+function utenfor({ r, g, b }: Rgb): boolean {
+  const slingringsmonn = 0.5
+  return [r, g, b].some(
+    (kanal) => kanal < -slingringsmonn || kanal > 255 + slingringsmonn,
+  )
+}
+
+/**
+ * Gjør en OKLCH-farge om til rgb som finnes på en skjerm.
+ *
+ * Ikke alle kombinasjoner av lyshet og metning kan vises i sRGB. Havner
+ * fargen utenfor, dempes metningen til den er innenfor, framfor å klippe
+ * kanalene hver for seg. Det siste ville endret kuløren.
+ */
+export function oklchToRgb(farge: Oklch): Rgb {
+  const forsok = oklchToRgbRaw(farge)
+  if (!utenfor(forsok)) return forsok
+
+  let lav = 0
+  let hoy = farge.c
+
+  for (let i = 0; i < 24; i += 1) {
+    const midt = (lav + hoy) / 2
+    if (utenfor(oklchToRgbRaw({ ...farge, c: midt }))) hoy = midt
+    else lav = midt
+  }
+
+  return oklchToRgbRaw({ ...farge, c: lav })
+}
+
+function luminans({ r, g, b }: Rgb): number {
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+}
+
+/** Kontrastforholdet mellom to farger, slik WCAG 2.1 regner det. */
+export function contrastRatio(a: Rgb, b: Rgb): number {
+  const la = luminans(a)
+  const lb = luminans(b)
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05)
+}
+
+/** Trinnene i en Fristil-skala, og lysheten hvert av dem sikter mot. */
+export const SCALE_STEPS = {
+  5: 0.97,
+  10: 0.93,
+  30: 0.83,
+  50: 0.72,
+  70: 0.55,
+  100: 0.38,
+} as const
+
+/**
+ * Hvor mye av kulørens metning hvert trinn beholder.
+ *
+ * Lyse trinn tåler lite metning før de ser skitne ut, og mørke trinn mister
+ * den likevel i sRGB. Forholdstallene er lest av Fristils egen palett, så en
+ * generert skala får samme rytme som den håndlagde.
+ */
+const CHROMA_FACTOR: Record<keyof typeof SCALE_STEPS, number> = {
+  5: 0.09,
+  10: 0.24,
+  30: 0.62,
+  50: 1.06,
+  70: 1,
+  100: 0.79,
+}
+
+/** Lysheten i den nøytrale skalaen, som går lenger i begge ender. */
+export const NEUTRAL_STEPS = {
+  0: 1,
+  5: 0.97,
+  10: 0.92,
+  30: 0.76,
+  50: 0.56,
+  70: 0.42,
+  100: 0.22,
+} as const
+
+/**
+ * Bygger en skala fra én farge.
+ *
+ * Kuløren beholdes, mens lysheten settes av trinnet. Metningen tas fra fargen
+ * som ble oppgitt, og dempes i endene.
+ */
+export function buildScale(hex: string): Record<number, string> {
+  const { c, h } = rgbToOklch(parseHex(hex))
+  const referanse = Math.min(c, 0.16)
+
+  const skala: Record<number, string> = {}
+  for (const [trinn, lyshet] of Object.entries(SCALE_STEPS)) {
+    const nummer = Number(trinn) as keyof typeof SCALE_STEPS
+    skala[nummer] = toHex(
+      oklchToRgb({ l: lyshet, c: referanse * CHROMA_FACTOR[nummer], h }),
+    )
+  }
+  return skala
+}
+
+/** Bygger den nøytrale skalaen, som også har et rent hvitt trinn. */
+export function buildNeutralScale(hex: string): Record<number, string> {
+  const { c, h } = rgbToOklch(parseHex(hex))
+  // Nøytrale farger tåler bare en antydning til kulør før de ser malt ut.
+  const metning = Math.min(c, 0.02)
+
+  const skala: Record<number, string> = {}
+  for (const [trinn, lyshet] of Object.entries(NEUTRAL_STEPS)) {
+    skala[Number(trinn)] =
+      Number(trinn) === 0
+        ? "#ffffff"
+        : toHex(oklchToRgb({ l: lyshet, c: metning, h }))
+  }
+  return skala
+}
+
+export type AdjustResult = {
+  /** Fargen som holder kravet. */
+  hex: string
+  /** Hvor mye lysheten måtte flyttes, i OKLCH-enheter. */
+  moved: number
+  /** Kontrasten den endte på. */
+  ratio: number
+}
+
+/**
+ * Flytter lysheten til fargen holder kravet mot bakgrunnen.
+ *
+ * Kuløren og metningen står stille, så fargen er den samme fargen, bare lys
+ * nok eller mørk nok. Retningen velges etter bakgrunnen: mot sort på en lys
+ * flate, mot hvit på en mørk.
+ *
+ * Kravet kan være umulig, for eksempel 4,5:1 mot en flate midt på skalaen.
+ * Da returneres det beste forsøket, og kalleren sier fra.
+ */
+export function adjustForContrast(
+  hex: string,
+  backgroundHex: string,
+  target: number,
+): AdjustResult {
+  const bakgrunn = parseHex(backgroundHex)
+  const start = rgbToOklch(parseHex(hex))
+  const mork = luminans(bakgrunn) > 0.18 ? -1 : 1
+
+  let beste = {
+    hex: toHex(oklchToRgb(start)),
+    moved: 0,
+    ratio: contrastRatio(oklchToRgb(start), bakgrunn),
+  }
+
+  for (let steg = 0; steg <= 100; steg += 1) {
+    const lyshet = Math.min(1, Math.max(0, start.l + mork * steg * 0.01))
+    const farge = oklchToRgb({ ...start, l: lyshet })
+    const forhold = contrastRatio(farge, bakgrunn)
+
+    if (forhold > beste.ratio) {
+      beste = { hex: toHex(farge), moved: steg * 0.01, ratio: forhold }
+    }
+
+    if (forhold >= target) {
+      return { hex: toHex(farge), moved: steg * 0.01, ratio: forhold }
+    }
+  }
+
+  return beste
+}