@fristil/designsystem 0.2.0

package/dist/tokens/theme.js

@@ -0,0 +1,197 @@
+import { adjustForContrast, buildNeutralScale, buildScale, contrastRatio, parseHex, } from "./color.js";
+/** Kravet til tekst mot flate. */
+const TEKST = 4.5;
+/** Kravet til en grafisk avgrensning, som rammen rundt et felt. */
+const RAMME = 3;
+function forhold(a, b) {
+    return contrastRatio(parseHex(a), parseHex(b));
+}
+/**
+ * Setter en forgrunnsfarge som holder kravet mot alle flatene den havner på.
+ *
+ * En farge brukes sjelden bare ett sted. `interactive-main` er både
+ * lenkefargen på sideflaten, flaten under teksten på en primærknapp, og
+ * fargen på et interaktivt merke. Holder den mot den ene, kan den likevel
+ * ryke mot den neste, så alle flatene sendes inn samtidig og den vanskeligste
+ * avgjør.
+ */
+function sikre(verdier, notater, problemer, tema, token, foreslatt, bakgrunner, krav = TEKST) {
+    let farge = foreslatt;
+    const start = Math.min(...bakgrunner.map((flate) => forhold(farge, flate)));
+    // Flere runder, fordi en justering mot den ene flaten kan gjøre fargen
+    // dårligere mot en annen. I praksis stopper det etter én eller to.
+    for (let runde = 0; runde < 4; runde += 1) {
+        const verste = bakgrunner.reduce((a, b) => forhold(farge, a) <= forhold(farge, b) ? a : b);
+        if (forhold(farge, verste) >= krav)
+            break;
+        farge = adjustForContrast(farge, verste, krav).hex;
+    }
+    verdier[token] = farge;
+    const slutt = Math.min(...bakgrunner.map((flate) => forhold(farge, flate)));
+    if (farge !== foreslatt) {
+        notater.push({ token, theme: tema, before: start, after: slutt });
+    }
+    if (slutt < krav) {
+        const verste = bakgrunner.reduce((a, b) => forhold(farge, a) <= forhold(farge, b) ? a : b);
+        problemer.push(`${token} i ${tema} tema kommer bare til ${slutt.toFixed(2)}:1 mot ${verste}, og kravet er ${krav}:1`);
+    }
+}
+export function buildTheme(input) {
+    const palett = {
+        interactive: buildScale(input.interactive),
+        danger: buildScale(input.danger),
+        success: buildScale(input.success),
+        warning: buildScale(input.warning),
+        visited: buildScale(input.visited ?? input.interactive),
+        neutral: buildNeutralScale(input.neutral ?? "#1a1a1a"),
+    };
+    const notater = [];
+    const problemer = [];
+    /**
+     * Bygger ett tema.
+     *
+     * Lyst og mørkt tema er samme oppskrift med motsatte trinn: flaten er lys
+     * og teksten mørk, eller omvendt. Derfor står de to i samme funksjon, med
+     * trinnene som parametre.
+     */
+    function tema(modus, trinn) {
+        const verdier = {};
+        const flate = palett.neutral[trinn.flate];
+        // Flatene først. De er utgangspunktet alt annet måles mot.
+        verdier["--semantic-page-background"] = flate;
+        verdier["--semantic-danger-background"] = palett.danger[trinn.statusFlate];
+        verdier["--semantic-warning-background"] = palett.warning[trinn.statusFlate];
+        verdier["--semantic-success-background"] = palett.success[trinn.statusFlate];
+        verdier["--semantic-neutral-background"] =
+            palett.neutral[trinn.noytralFlate];
+        verdier["--semantic-interactive-background"] =
+            palett.interactive[trinn.statusFlate];
+        verdier["--semantic-disabled-background"] =
+            palett.neutral[trinn.avslattFlate];
+        verdier["--semantic-disabled-foreground"] =
+            palett.neutral[trinn.avslattTekst];
+        verdier["--semantic-field-border-hover"] = palett.neutral[trinn.rammeHover];
+        verdier["--semantic-divider-30"] = palett.neutral[trinn.skille];
+        verdier["--semantic-divider-100"] = palett.neutral[trinn.tekst];
+        // Teksten oppå en fylt knapp er flaten fra det motsatte temaet.
+        const kontrastfarge = modus === "light" ? "#ffffff" : palett.neutral[100];
+        verdier["--semantic-interactive-contrast"] = kontrastfarge;
+        verdier["--semantic-danger-contrast"] = kontrastfarge;
+        const sett = (token, foreslatt, bakgrunner, krav) => sikre(verdier, notater, problemer, modus, token, foreslatt, bakgrunner, krav);
+        // Brødteksten står både på sideflaten og i felt med statusfarge.
+        sett("--semantic-page-foreground", palett.neutral[trinn.tekst], [
+            flate,
+            verdier["--semantic-danger-background"],
+            verdier["--semantic-warning-background"],
+            verdier["--semantic-success-background"],
+        ]);
+        sett("--semantic-muted-foreground", palett.neutral[trinn.dempet], [flate]);
+        /*
+         * Den interaktive fargen brukes tre steder: som lenke på sideflaten, som
+         * flate under teksten på en primærknapp, og som farge på et interaktivt
+         * merke. Alle tre må holde.
+         */
+        sett("--semantic-interactive-main", palett.interactive[trinn.interaktiv], [
+            flate,
+            verdier["--semantic-interactive-background"],
+            kontrastfarge,
+        ]);
+        /*
+         * Hover-flaten på knappen, med den samme teksten oppå. Den brukes også
+         * som tekst i avataren, oppå interactive-background, så den flaten må
+         * med her.
+         */
+        sett("--semantic-interactive-foreground", palett.interactive[trinn.interaktivHover], [flate, kontrastfarge, verdier["--semantic-interactive-background"]]);
+        sett("--semantic-interactive-visited", palett.visited[trinn.interaktivHover], [flate]);
+        // Statusfargene står både i sitt eget merke og som tekst på sideflaten.
+        for (const status of ["danger", "warning", "success"]) {
+            sett(`--semantic-${status}-foreground`, palett[status][trinn.statusTekst], [verdier[`--semantic-${status}-background`], flate]);
+        }
+        sett("--semantic-neutral-foreground", palett.neutral[trinn.noytralTekst], [
+            verdier["--semantic-neutral-background"],
+        ]);
+        // Den fylte sletteknappen, med lys tekst oppå.
+        sett("--semantic-danger-main", palett.danger[trinn.interaktiv], [
+            kontrastfarge,
+        ]);
+        // Rammen er en grafisk avgrensning, og har derfor et lavere krav.
+        sett("--semantic-field-border", palett.neutral[50], [flate], RAMME);
+        return verdier;
+    }
+    const light = tema("light", {
+        flate: 0,
+        tekst: 100,
+        statusFlate: 10,
+        statusTekst: 100,
+        noytralFlate: 10,
+        noytralTekst: 70,
+        interaktiv: 70,
+        interaktivHover: 100,
+        avslattFlate: 10,
+        avslattTekst: 50,
+        dempet: 50,
+        rammeHover: 70,
+        skille: 30,
+    });
+    const dark = tema("dark", {
+        flate: 100,
+        tekst: 5,
+        statusFlate: 100,
+        statusTekst: 30,
+        noytralFlate: 70,
+        noytralTekst: 10,
+        interaktiv: 30,
+        interaktivHover: 10,
+        avslattFlate: 70,
+        avslattTekst: 30,
+        dempet: 30,
+        rammeHover: 30,
+        skille: 70,
+    });
+    return {
+        light,
+        dark,
+        adjustments: notater,
+        problems: problemer,
+        css: tilCss(palett, light, dark),
+    };
+}
+function linjer(verdier, innrykk) {
+    return Object.entries(verdier)
+        .map(([navn, verdi]) => `${innrykk}${navn}: ${verdi};`)
+        .join("\n");
+}
+function tilCss(paletter, light, dark) {
+    const palett = {};
+    for (const [navn, skala] of Object.entries(paletter)) {
+        for (const [trinn, verdi] of Object.entries(skala)) {
+            palett[`--palette-${navn}-${trinn}`] = verdi;
+        }
+    }
+    return `/*
+ * Generert av @fristil/designsystem. Rediger merkefargene, ikke denne fila.
+ *
+ * Legges etter tokens.css, og overstyrer fargene der. Størrelser,
+ * skriftstørrelser og ikoner kommer fortsatt fra tokens.css.
+ */
+
+@layer fristil {
+  :root {
+${linjer(palett, "    ")}
+
+${linjer(light, "    ")}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+${linjer(dark, "      ")}
+    }
+  }
+
+  [data-theme="dark"] {
+${linjer(dark, "    ")}
+  }
+}
+`;
+}
+//# sourceMappingURL=theme.js.map

package/dist/tokens/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/tokens/theme.ts"],"names":[],"mappings":"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"}

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,210 @@
+export declare const Breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly "2xl": "1536px";
+};
+export declare const Containers: {
+    readonly xs: "100%";
+    readonly sm: "576px";
+    readonly md: "960px";
+    readonly lg: "1152px";
+    readonly xl: "1536px";
+    readonly aside: "384px";
+    readonly asideNarrow: "288px";
+    readonly wideContent: "768px";
+};
+export type Breakpoint = keyof typeof Breakpoints;
+export type Container = keyof typeof Containers;
+export declare const cssTokens: {
+    readonly "--font-size-reference": "16px";
+    readonly "--font-size-xxs": "0.625rem";
+    readonly "--font-size-xs": "0.75rem";
+    readonly "--font-size-s": "0.875rem";
+    readonly "--font-size-m": "1rem";
+    readonly "--font-size-l": "1.125rem";
+    readonly "--font-size-xl": "1.375rem";
+    readonly "--font-size-xxl": "1.875rem";
+    readonly "--font-size-mega": "2.625rem";
+    readonly "--size-px": "1px";
+    readonly "--size-0-5": "0.125rem";
+    readonly "--size-1": "0.25rem";
+    readonly "--size-2": "0.5rem";
+    readonly "--size-3": "0.75rem";
+    readonly "--size-4": "1rem";
+    readonly "--size-5": "1.25rem";
+    readonly "--size-6": "1.5rem";
+    readonly "--size-7": "1.75rem";
+    readonly "--size-8": "2rem";
+    readonly "--size-10": "2.5rem";
+    readonly "--size-12": "3rem";
+    readonly "--size-16": "4rem";
+    readonly "--semantic-size-default": "var(--size-4)";
+    readonly "--semantic-spacing-default": "var(--size-4)";
+    readonly "--palette-burgundy-5": "#faf0f3";
+    readonly "--palette-burgundy-10": "#f7e2e8";
+    readonly "--palette-burgundy-30": "#f3a7b0";
+    readonly "--palette-burgundy-50": "#f06674";
+    readonly "--palette-burgundy-70": "#b04c5c";
+    readonly "--palette-burgundy-100": "#6f2c3f";
+    readonly "--palette-forest-5": "#f4faf5";
+    readonly "--palette-forest-10": "#e3f5ea";
+    readonly "--palette-forest-30": "#b9e1c8";
+    readonly "--palette-forest-50": "#91d6ac";
+    readonly "--palette-forest-70": "#5d9b73";
+    readonly "--palette-forest-100": "#2b6940";
+    readonly "--palette-ochre-5": "#f9f4f0";
+    readonly "--palette-ochre-10": "#f9ede2";
+    readonly "--palette-ochre-30": "#f0d2b6";
+    readonly "--palette-ochre-50": "#e7b78a";
+    readonly "--palette-ochre-70": "#a9805b";
+    readonly "--palette-ochre-100": "#6b492c";
+    readonly "--palette-denim-5": "#eff3f9";
+    readonly "--palette-denim-10": "#e2eaf7";
+    readonly "--palette-denim-30": "#b5cbee";
+    readonly "--palette-denim-50": "#89abe5";
+    readonly "--palette-denim-70": "#5a77a8";
+    readonly "--palette-denim-100": "#2c436b";
+    readonly "--palette-azure-10": "#cde1f9";
+    readonly "--palette-azure-30": "#9ccff2";
+    readonly "--palette-azure-70": "#1362ae";
+    readonly "--palette-azure-100": "#093e61";
+    readonly "--palette-graphite-0": "#ffffff";
+    readonly "--palette-graphite-5": "#f4f4f4";
+    readonly "--palette-graphite-10": "#e5e5e5";
+    readonly "--palette-graphite-30": "#b2b2b2";
+    readonly "--palette-graphite-50": "#757575";
+    readonly "--palette-graphite-70": "#4d4d4d";
+    readonly "--palette-graphite-100": "#1a1a1a";
+    readonly "--palette-dark-alpha-50": "#1a1a1a80";
+    readonly "--semantic-page-background": "var(--palette-graphite-0)";
+    readonly "--semantic-page-foreground": "var(--palette-graphite-100)";
+    readonly "--semantic-danger-background": "var(--palette-burgundy-10)";
+    readonly "--semantic-danger-foreground": "#a82e39";
+    readonly "--semantic-warning-background": "var(--palette-ochre-10)";
+    readonly "--semantic-warning-foreground": "#896508";
+    readonly "--semantic-success-background": "var(--palette-forest-10)";
+    readonly "--semantic-success-foreground": "#316f2a";
+    /**
+     * Deaktiverte kontroller. WCAG 1.4.3 unntar inaktive komponenter fra
+     * kontrastkravet, men teksten bør fortsatt kunne leses, siden et avslått
+     * felt ofte viser innhold brukeren trenger. Bruk den bare på noe som faktisk er
+     * slått av; dempet tekst som skal leses bruker `muted-foreground`.
+     */
+    readonly "--semantic-disabled-background": "var(--palette-graphite-10)";
+    readonly "--semantic-disabled-foreground": "var(--palette-graphite-50)";
+    /**
+     * Dempet tekst som likevel skal leses: hjelpetekst, plassholdere,
+     * «(valgfri)»-markeringen, ukedagene i kalenderen. Holder 4,5:1 mot
+     * sideflaten i begge temaer.
+     */
+    readonly "--semantic-muted-foreground": "var(--palette-graphite-50)";
+    readonly "--semantic-neutral-background": "var(--palette-graphite-10)";
+    readonly "--semantic-neutral-foreground": "var(--palette-graphite-70)";
+    readonly "--semantic-interactive-background": "var(--palette-azure-10)";
+    readonly "--semantic-interactive-main": "var(--palette-azure-70)";
+    readonly "--semantic-interactive-foreground": "var(--palette-azure-100)";
+    /** Tekst oppå `interactive-main`. Snur med temaet. */
+    readonly "--semantic-interactive-contrast": "var(--palette-graphite-0)";
+    readonly "--semantic-interactive-visited": "var(--palette-denim-70)";
+    /**
+     * Rammen rundt input, textarea, select og kalenderpanelet.
+     *
+     * graphite-50, ikke graphite-30. WCAG 1.4.11 krever 3:1 for grafiske
+     * avgrensninger, og graphite-30 gir bare 2,12:1 mot hvit flate. Feltet var
+     * så vidt synlig for den som ser dårlig.
+     */
+    readonly "--semantic-field-border": "var(--palette-graphite-50)";
+    readonly "--semantic-field-border-hover": "var(--palette-graphite-70)";
+    /**
+     * Fylt flate på danger-knappen når den holdes over, med `danger-contrast`
+     * som tekst. Før mørknet bakgrunnen mens teksten ble stående, og hover
+     * havnet på 3,52:1, altså svakere enn hviletilstanden.
+     */
+    readonly "--semantic-danger-main": "#a82e39";
+    readonly "--semantic-danger-contrast": "var(--palette-graphite-0)";
+    readonly "--semantic-divider-30": "var(--palette-graphite-30)";
+    readonly "--semantic-divider-100": "var(--palette-graphite-100)";
+    /** Forstørrelsesglasset i søkefeltet. */
+    readonly "--semantic-icon-search": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E\")";
+    /**
+     * Haken og streken i avkryssingsboksen.
+     *
+     * De tegnes oppå `interactive-main`, og må derfor følge
+     * `interactive-contrast`, ikke sideflaten.
+     */
+    readonly "--semantic-icon-check": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-dash": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E\")";
+    /**
+     * Ikonene som tegnes inn i bakgrunnen til dato- og klokkeslettfeltet.
+     *
+     * De hører hjemme her og ikke i komponenten, fordi en data-URL ikke kan
+     * lese en CSS-variabel: streken er malt inn i selve bildet. Med ikonet som
+     * token snur det med temaet, som alt annet. Før var streken fast
+     * graphite-70, altså 2,03:1 mot den mørke flaten, og så vidt synlig.
+     */
+    readonly "--semantic-icon-calendar": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-clock": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E\")";
+    /**
+     * Flaten bak en dialog som er åpnet med `showModal()`.
+     *
+     * Den ligger mellom siden og dialogen, og må dempe sideinnholdet i begge
+     * temaer. I mørkt tema er en sort flate nesten usynlig mot bakgrunnen, så
+     * den er kraftigere der.
+     */
+    readonly "--semantic-overlay-backdrop": "var(--palette-dark-alpha-50)";
+    /**
+     * Skyggen under flater som ligger over siden, som kalenderpanelet.
+     *
+     * Hører til det semantiske laget fordi den må snu med temaet: en svak
+     * sort skygge er usynlig mot en nesten sort flate, og panelet mistet
+     * dybden si i mørkt tema.
+     */
+    readonly "--semantic-shadow-overlay": "0 16px 40px rgba(0, 0, 0, 0.12)";
+};
+export type CssToken = keyof typeof cssTokens;
+/**
+ * Verdiene som overstyres i mørkt tema.
+ *
+ * Bare det semantiske laget snur. Paletten er råverdier og er den samme i
+ * begge temaer. Det er hva fargene *betyr* som endrer seg, ikke hvilke
+ * farger som finnes.
+ *
+ * Alle par er kontrollert mot WCAG AA. Se `tokens.browser.test.ts`.
+ */
+export declare const darkTokens: {
+    readonly "--semantic-page-background": "var(--palette-graphite-100)";
+    readonly "--semantic-page-foreground": "var(--palette-graphite-5)";
+    readonly "--semantic-danger-background": "var(--palette-burgundy-100)";
+    readonly "--semantic-danger-foreground": "var(--palette-burgundy-30)";
+    readonly "--semantic-warning-background": "var(--palette-ochre-100)";
+    readonly "--semantic-warning-foreground": "var(--palette-ochre-30)";
+    readonly "--semantic-success-background": "var(--palette-forest-100)";
+    readonly "--semantic-success-foreground": "var(--palette-forest-30)";
+    readonly "--semantic-disabled-background": "var(--palette-graphite-70)";
+    readonly "--semantic-disabled-foreground": "var(--palette-graphite-30)";
+    readonly "--semantic-muted-foreground": "var(--palette-graphite-30)";
+    readonly "--semantic-neutral-background": "var(--palette-graphite-70)";
+    readonly "--semantic-neutral-foreground": "var(--palette-graphite-10)";
+    readonly "--semantic-interactive-background": "var(--palette-azure-100)";
+    readonly "--semantic-interactive-main": "var(--palette-azure-30)";
+    readonly "--semantic-interactive-foreground": "var(--palette-azure-10)";
+    readonly "--semantic-interactive-contrast": "var(--palette-graphite-100)";
+    readonly "--semantic-interactive-visited": "var(--palette-denim-30)";
+    readonly "--semantic-field-border": "var(--palette-graphite-50)";
+    readonly "--semantic-field-border-hover": "var(--palette-graphite-30)";
+    readonly "--semantic-danger-main": "var(--palette-burgundy-30)";
+    readonly "--semantic-danger-contrast": "var(--palette-graphite-100)";
+    readonly "--semantic-divider-30": "var(--palette-graphite-70)";
+    readonly "--semantic-divider-100": "var(--palette-graphite-30)";
+    readonly "--semantic-icon-search": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-check": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-dash": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-calendar": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E\")";
+    readonly "--semantic-icon-clock": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E\")";
+    readonly "--semantic-overlay-backdrop": "rgba(0, 0, 0, 0.72)";
+    readonly "--semantic-shadow-overlay": "0 16px 40px rgba(0, 0, 0, 0.6)";
+};
+export type DarkToken = keyof typeof darkTokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAA;AAEV,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAA;AACjD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6FpB;;;;;OAKG;;;IAIH;;;;OAIG;;;;;;;IAYH,sDAAsD;;;IAKtD;;;;;;OAMG;;;IAKH;;;;OAIG;;;;;IAQH,yCAAyC;;IAIzC;;;;;OAKG;;;IAMH;;;;;;;OAOG;;;IAMH;;;;;;OAMG;;IAGH;;;;;;OAMG;;CAEK,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAA;AAE7C;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE+B,CAAA;AAEtD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAA"}