@handijit/ui 1.0.0 → 2.0.0

package/build/theme/UiProvider.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),t=require("react"),r=require("../helpers/theme.helper.cjs"),a=require("./context.cjs"),m=({children:l,theme:e,linkComponent:s,labels:u})=>{const o=t.useMemo(()=>e?JSON.stringify(e):"",[e]),n=t.useMemo(()=>e?r.toStyleHtml(r.buildThemeCss(e)):"",[o]),c=t.useRef(e);c.current=e;const d=t.useMemo(()=>({theme:c.current,linkComponent:s,labels:u}),[o,s,u]);return i.jsxs(a.default.Provider,{value:d,children:[n!==""&&i.jsx("style",{id:r.THEME_STYLE_ID,dangerouslySetInnerHTML:{__html:n}}),l]})};exports.default=m;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),c=({children:r,linkComponent:e,labels:t})=>{const u=s.useMemo(()=>({linkComponent:e,labels:t}),[e,t]);return o.jsx(i.default.Provider,{value:u,children:r})};exports.default=c;
 //# sourceMappingURL=UiProvider.cjs.map

package/build/theme/UiProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UiProvider.cjs","sources":["../../src/theme/UiProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useMemo, useRef } from 'react';\n\nimport { buildThemeCss, THEME_STYLE_ID, toStyleHtml } from '../helpers/theme.helper';\nimport type { UiLinkComponent } from '../types/link.type';\nimport UiContext from './context';\nimport type { UiLabels, UiThemeConfig } from '@/types/theme.type';\n\ntype Props = {\n  children: ReactNode;\n  /** Tema ezmeleri. */\n  theme?: UiThemeConfig;\n  /**\n   * Tüketicinin bağlantı bileşeni.\n   * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</Ha…\n   */\n  linkComponent?: UiLinkComponent;\n  /** Arayüz metinleri — bir kez, burada. */\n  labels?: UiLabels;\n};\n\n/**\n * Kütüphane sağlayıcısı. `<body>` içine konur: tema ezmesini çocuklarından önce bir `<style>`\n * olarak çizer.\n * @example <UiProvider linkComponent={NextLink} theme={{ light: { link: '#0a58ca' } }}> <App…\n */\nconst UiProvider: FC<Props> = ({ children, theme, linkComponent, labels }) => {\n  /*\n   * `JSON.stringify` bagimlilik anahtari olarak kullaniliyor: cagiran taraf neredeyse her zaman\n   * satir ici bir nesne literali veriyor ve referans her…\n   */\n  const themeKey = useMemo(() => (theme ? JSON.stringify(theme) : ''), [theme]);\n\n  /*\n   * Ezme AGACTA cizilir, efektte belgeye yazilmaz: sunucu ciktisinda da var ve ilk boyamada\n   * uygulanir. 5.6.2'ye kadar `useEffect` icindeki `applyThemeConfig` `<head>`e hidrasyondan SONRA\n   * yaziyordu; ilk karede varsayilan palet, bir kare sonra tema gorunuyordu. `<body>` icinde\n   * oldugu icin tuketicinin `<head>`deki stil sayfalarindan (katman sirasi bildirimi dahil) sonra\n   * gelir.\n   */\n  const themeHtml = useMemo(\n    () => (theme ? toStyleHtml(buildThemeCss(theme)) : ''),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [themeKey],\n  );\n\n  /* `theme` bir REFERANSTAN okunur, bagimliliktan degil. */\n  const themeRef = useRef(theme);\n  themeRef.current = theme;\n\n  const value = useMemo(\n    () => ({ theme: themeRef.current, linkComponent, labels }),\n    /*\n     * `themeKey` denetciye GEREKSIZ gorunuyor cunku memo'nun govdesinde gecmiyor — ama tam da isi\n     * bu: temanin ICERIGI degistiginde yeni bir nesne…\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [themeKey, linkComponent, labels],\n  );\n\n  return (\n    <UiContext.Provider value={value}>\n      {themeHtml !== '' && (\n        <style id={THEME_STYLE_ID} dangerouslySetInnerHTML={{ __html: themeHtml }} />\n      )}\n      {children}\n    </UiContext.Provider>\n  );\n};\n\nexport default UiProvider;\n"],"names":["UiProvider","children","theme","linkComponent","labels","themeKey","useMemo","themeHtml","toStyleHtml","buildThemeCss","themeRef","useRef","value","jsxs","UiContext","THEME_STYLE_ID"],"mappings":"qPA0BMA,EAAwB,CAAC,CAAE,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAe,OAAAC,KAAa,CAK5E,MAAMC,EAAWC,EAAAA,QAAQ,IAAOJ,EAAQ,KAAK,UAAUA,CAAK,EAAI,GAAK,CAACA,CAAK,CAAC,EAStEK,EAAYD,EAAAA,QAChB,IAAOJ,EAAQM,EAAAA,YAAYC,EAAAA,cAAcP,CAAK,CAAC,EAAI,GAEnD,CAACG,CAAQ,CAAA,EAILK,EAAWC,EAAAA,OAAOT,CAAK,EAC7BQ,EAAS,QAAUR,EAEnB,MAAMU,EAAQN,EAAAA,QACZ,KAAO,CAAE,MAAOI,EAAS,QAAS,cAAAP,EAAe,OAAAC,CAAA,GAMjD,CAACC,EAAUF,EAAeC,CAAM,CAAA,EAGlC,OACES,EAAAA,KAACC,EAAAA,QAAU,SAAV,CAAmB,MAAAF,EACjB,SAAA,CAAAL,IAAc,UACZ,QAAA,CAAM,GAAIQ,EAAAA,eAAgB,wBAAyB,CAAE,OAAQR,CAAA,CAAU,CAAG,EAE5EN,CAAA,EACH,CAEJ"}
+{"version":3,"file":"UiProvider.cjs","sources":["../../src/theme/UiProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useMemo } from 'react';\n\nimport type { UiLinkComponent } from '../types/link.type';\nimport UiContext from './context';\nimport type { UiLabels } from '@/types/theme.type';\n\ntype Props = {\n  children: ReactNode;\n  /**\n   * The application's link component.\n   * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</UiProvider>\n   */\n  linkComponent?: UiLinkComponent;\n  /** Interface strings — once, here. */\n  labels?: UiLabels;\n};\n\n/**\n * Library provider: the router's link component and the interface strings.\n *\n * It renders nothing of its own and injects no style. Colours, type, spacing and motion come from\n * `@handijit/design/tokens.css`, which the application loads once; a brand override is a plain\n * `--hd-*` declaration in the application's own stylesheet.\n * @example <UiProvider linkComponent={NextLink} labels={{ close: 'Kapat' }}><App /></UiProvider>\n */\nconst UiProvider: FC<Props> = ({ children, linkComponent, labels }) => {\n  const value = useMemo(() => ({ linkComponent, labels }), [linkComponent, labels]);\n\n  return <UiContext.Provider value={value}>{children}</UiContext.Provider>;\n};\n\nexport default UiProvider;\n"],"names":["UiProvider","children","linkComponent","labels","value","useMemo","jsx","UiContext"],"mappings":"4MA0BMA,EAAwB,CAAC,CAAE,SAAAC,EAAU,cAAAC,EAAe,OAAAC,KAAa,CACrE,MAAMC,EAAQC,UAAQ,KAAO,CAAE,cAAAH,EAAe,OAAAC,IAAW,CAACD,EAAeC,CAAM,CAAC,EAEhF,OAAOG,EAAAA,IAACC,EAAAA,QAAU,SAAV,CAAmB,MAAAH,EAAe,SAAAH,CAAA,CAAS,CACrD"}

package/build/theme/UiProvider.d.ts

@@ -1,22 +1,23 @@
 import { FC, ReactNode } from 'react';
 import { UiLinkComponent } from '../types/link.type';
-import { UiLabels, UiThemeConfig } from '../types/theme.type';
+import { UiLabels } from '../types/theme.type';
 type Props = {
     children: ReactNode;
-    /** Tema ezmeleri. */
-    theme?: UiThemeConfig;
     /**
-     * Tüketicinin bağlantı bileşeni.
-     * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</Ha…
+     * The application's link component.
+     * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</UiProvider>
      */
     linkComponent?: UiLinkComponent;
-    /** Arayüz metinleri — bir kez, burada. */
+    /** Interface strings — once, here. */
     labels?: UiLabels;
 };
 /**
- * Kütüphane sağlayıcısı. `<body>` içine konur: tema ezmesini çocuklarından önce bir `<style>`
- * olarak çizer.
- * @example <UiProvider linkComponent={NextLink} theme={{ light: { link: '#0a58ca' } }}> <App…
+ * Library provider: the router's link component and the interface strings.
+ *
+ * It renders nothing of its own and injects no style. Colours, type, spacing and motion come from
+ * `@handijit/design/tokens.css`, which the application loads once; a brand override is a plain
+ * `--hd-*` declaration in the application's own stylesheet.
+ * @example <UiProvider linkComponent={NextLink} labels={{ close: 'Kapat' }}><App /></UiProvider>
  */
 declare const UiProvider: FC<Props>;
 export default UiProvider;

package/build/theme/UiProvider.js

@@ -1,30 +1,12 @@
 "use client";
-import { jsxs as c, jsx as f } from "react/jsx-runtime";
-import { useMemo as t, useRef as l } from "react";
-import { toStyleHtml as d, buildThemeCss as y, THEME_STYLE_ID as p } from "../helpers/theme.helper.js";
-import x from "./context.js";
-const a = ({ children: m, theme: r, linkComponent: e, labels: o }) => {
-  const s = t(() => r ? JSON.stringify(r) : "", [r]), i = t(
-    () => r ? d(y(r)) : "",
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [s]
-  ), n = l(r);
-  n.current = r;
-  const u = t(
-    () => ({ theme: n.current, linkComponent: e, labels: o }),
-    /*
-     * `themeKey` denetciye GEREKSIZ gorunuyor cunku memo'nun govdesinde gecmiyor — ama tam da isi
-     * bu: temanin ICERIGI degistiginde yeni bir nesne…
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [s, e, o]
-  );
-  return /* @__PURE__ */ c(x.Provider, { value: u, children: [
-    i !== "" && /* @__PURE__ */ f("style", { id: p, dangerouslySetInnerHTML: { __html: i } }),
-    m
-  ] });
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import s from "./context.js";
+const d = ({ children: t, linkComponent: r, labels: o }) => {
+  const e = m(() => ({ linkComponent: r, labels: o }), [r, o]);
+  return /* @__PURE__ */ i(s.Provider, { value: e, children: t });
 };
 export {
-  a as default
+  d as default
 };
 //# sourceMappingURL=UiProvider.js.map

package/build/theme/UiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiProvider.js","sources":["../../src/theme/UiProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useMemo, useRef } from 'react';\n\nimport { buildThemeCss, THEME_STYLE_ID, toStyleHtml } from '../helpers/theme.helper';\nimport type { UiLinkComponent } from '../types/link.type';\nimport UiContext from './context';\nimport type { UiLabels, UiThemeConfig } from '@/types/theme.type';\n\ntype Props = {\n  children: ReactNode;\n  /** Tema ezmeleri. */\n  theme?: UiThemeConfig;\n  /**\n   * Tüketicinin bağlantı bileşeni.\n   * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</Ha…\n   */\n  linkComponent?: UiLinkComponent;\n  /** Arayüz metinleri — bir kez, burada. */\n  labels?: UiLabels;\n};\n\n/**\n * Kütüphane sağlayıcısı. `<body>` içine konur: tema ezmesini çocuklarından önce bir `<style>`\n * olarak çizer.\n * @example <UiProvider linkComponent={NextLink} theme={{ light: { link: '#0a58ca' } }}> <App…\n */\nconst UiProvider: FC<Props> = ({ children, theme, linkComponent, labels }) => {\n  /*\n   * `JSON.stringify` bagimlilik anahtari olarak kullaniliyor: cagiran taraf neredeyse her zaman\n   * satir ici bir nesne literali veriyor ve referans her…\n   */\n  const themeKey = useMemo(() => (theme ? JSON.stringify(theme) : ''), [theme]);\n\n  /*\n   * Ezme AGACTA cizilir, efektte belgeye yazilmaz: sunucu ciktisinda da var ve ilk boyamada\n   * uygulanir. 5.6.2'ye kadar `useEffect` icindeki `applyThemeConfig` `<head>`e hidrasyondan SONRA\n   * yaziyordu; ilk karede varsayilan palet, bir kare sonra tema gorunuyordu. `<body>` icinde\n   * oldugu icin tuketicinin `<head>`deki stil sayfalarindan (katman sirasi bildirimi dahil) sonra\n   * gelir.\n   */\n  const themeHtml = useMemo(\n    () => (theme ? toStyleHtml(buildThemeCss(theme)) : ''),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [themeKey],\n  );\n\n  /* `theme` bir REFERANSTAN okunur, bagimliliktan degil. */\n  const themeRef = useRef(theme);\n  themeRef.current = theme;\n\n  const value = useMemo(\n    () => ({ theme: themeRef.current, linkComponent, labels }),\n    /*\n     * `themeKey` denetciye GEREKSIZ gorunuyor cunku memo'nun govdesinde gecmiyor — ama tam da isi\n     * bu: temanin ICERIGI degistiginde yeni bir nesne…\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [themeKey, linkComponent, labels],\n  );\n\n  return (\n    <UiContext.Provider value={value}>\n      {themeHtml !== '' && (\n        <style id={THEME_STYLE_ID} dangerouslySetInnerHTML={{ __html: themeHtml }} />\n      )}\n      {children}\n    </UiContext.Provider>\n  );\n};\n\nexport default UiProvider;\n"],"names":["UiProvider","children","theme","linkComponent","labels","themeKey","useMemo","themeHtml","toStyleHtml","buildThemeCss","themeRef","useRef","value","jsxs","UiContext","THEME_STYLE_ID"],"mappings":";;;;;AA0BA,MAAMA,IAAwB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,GAAe,QAAAC,QAAa;AAK5E,QAAMC,IAAWC,EAAQ,MAAOJ,IAAQ,KAAK,UAAUA,CAAK,IAAI,IAAK,CAACA,CAAK,CAAC,GAStEK,IAAYD;AAAA,IAChB,MAAOJ,IAAQM,EAAYC,EAAcP,CAAK,CAAC,IAAI;AAAA;AAAA,IAEnD,CAACG,CAAQ;AAAA,EAAA,GAILK,IAAWC,EAAOT,CAAK;AAC7B,EAAAQ,EAAS,UAAUR;AAEnB,QAAMU,IAAQN;AAAA,IACZ,OAAO,EAAE,OAAOI,EAAS,SAAS,eAAAP,GAAe,QAAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjD,CAACC,GAAUF,GAAeC,CAAM;AAAA,EAAA;AAGlC,SACE,gBAAAS,EAACC,EAAU,UAAV,EAAmB,OAAAF,GACjB,UAAA;AAAA,IAAAL,MAAc,wBACZ,SAAA,EAAM,IAAIQ,GAAgB,yBAAyB,EAAE,QAAQR,EAAA,EAAU,CAAG;AAAA,IAE5EN;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"UiProvider.js","sources":["../../src/theme/UiProvider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useMemo } from 'react';\n\nimport type { UiLinkComponent } from '../types/link.type';\nimport UiContext from './context';\nimport type { UiLabels } from '@/types/theme.type';\n\ntype Props = {\n  children: ReactNode;\n  /**\n   * The application's link component.\n   * @example import NextLink from 'next/link'; <UiProvider linkComponent={NextLink}>…</UiProvider>\n   */\n  linkComponent?: UiLinkComponent;\n  /** Interface strings — once, here. */\n  labels?: UiLabels;\n};\n\n/**\n * Library provider: the router's link component and the interface strings.\n *\n * It renders nothing of its own and injects no style. Colours, type, spacing and motion come from\n * `@handijit/design/tokens.css`, which the application loads once; a brand override is a plain\n * `--hd-*` declaration in the application's own stylesheet.\n * @example <UiProvider linkComponent={NextLink} labels={{ close: 'Kapat' }}><App /></UiProvider>\n */\nconst UiProvider: FC<Props> = ({ children, linkComponent, labels }) => {\n  const value = useMemo(() => ({ linkComponent, labels }), [linkComponent, labels]);\n\n  return <UiContext.Provider value={value}>{children}</UiContext.Provider>;\n};\n\nexport default UiProvider;\n"],"names":["UiProvider","children","linkComponent","labels","value","useMemo","jsx","UiContext"],"mappings":";;;;AA0BA,MAAMA,IAAwB,CAAC,EAAE,UAAAC,GAAU,eAAAC,GAAe,QAAAC,QAAa;AACrE,QAAMC,IAAQC,EAAQ,OAAO,EAAE,eAAAH,GAAe,QAAAC,MAAW,CAACD,GAAeC,CAAM,CAAC;AAEhF,SAAO,gBAAAG,EAACC,EAAU,UAAV,EAAmB,OAAAH,GAAe,UAAAH,EAAA,CAAS;AACrD;"}

package/build/theme/UiThemeScript.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("../helpers/theme.helper.cjs"),i=({storageKey:e})=>t.jsx("script",{dangerouslySetInnerHTML:{__html:r.themeBootScript({storageKey:e})}});exports.default=i;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("@handijit/design"),s=({nonce:e})=>t.jsx("script",{nonce:e,dangerouslySetInnerHTML:{__html:r.THEME_BOOT_SCRIPT}});exports.default=s;
 //# sourceMappingURL=UiThemeScript.cjs.map

package/build/theme/UiThemeScript.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UiThemeScript.cjs","sources":["../../src/theme/UiThemeScript.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { themeBootScript } from '../helpers/theme.helper';\n\ntype Props = {\n  /** Kullanıcının seçiminin tutulduğu `localStorage` anahtarı. */\n  storageKey: string;\n};\n\n/**\n * İLK BOYAMADAN ÖNCE tema — `<head>` içine, sunucu düzeninde.\n *\n * Kayıtlı açık seçimi (`light` / `dark`) `<html data-ui-theme>`e yazar; kayıt yoksa sistem\n * tercihi izlenir. Sunucu çıktısındaki satır içi betik HTML ayrıştırılırken çalışır; React onu\n * istemcide YENİDEN çalıştırmaz.\n *\n * ⚠ BİR BİLEŞEN, fonksiyon değil: paket `'use client'` taşıdığı için dışa verilen düz bir\n * fonksiyon Next'in sunucu bileşeninde ÇAĞRILAMIYOR (\"Attempted to call … from the server\").\n * Bileşen ise sunucuda da çizilir. Bu yüzden 5.1 taslağındaki `themeBootScript()` dışa verilmedi.\n * @example <head><UiThemeScript storageKey=\"theme\" /></head>\n */\nconst UiThemeScript: FC<Props> = ({ storageKey }) => (\n  <script dangerouslySetInnerHTML={{ __html: themeBootScript({ storageKey }) }} />\n);\n\nexport default UiThemeScript;\n"],"names":["UiThemeScript","storageKey","jsx","themeBootScript"],"mappings":"uMAsBMA,EAA2B,CAAC,CAAE,WAAAC,KAClCC,EAAAA,IAAC,SAAA,CAAO,wBAAyB,CAAE,OAAQC,EAAAA,gBAAgB,CAAE,WAAAF,CAAA,CAAY,EAAE,CAAG"}
+{"version":3,"file":"UiThemeScript.cjs","sources":["../../src/theme/UiThemeScript.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { THEME_BOOT_SCRIPT } from '@handijit/design';\n\ntype Props = {\n  /**\n   * The request's CSP nonce. Leave it out when the policy allows the script by hash\n   * (`THEME_BOOT_SCRIPT_HASH`), which also works for statically rendered pages.\n   */\n  nonce?: string;\n};\n\n/**\n * The theme before the first paint — rendered in `<head>`, in the server output.\n *\n * It inlines the boot script of `@handijit/design` unchanged, so its text matches\n * `THEME_BOOT_SCRIPT_HASH`: the stored choice (`localStorage[\"hd-theme\"]`) or the system setting is\n * written to `<html data-theme>` while the HTML is parsed. Put `suppressHydrationWarning` on\n * `<html>`: the attribute is set before React hydrates.\n *\n * A component and not a function: the package carries `'use client'`, and a plain exported function\n * cannot be called from a Next server component, while a component renders on the server too.\n * @example <head><UiThemeScript nonce={nonce} /></head>\n */\nconst UiThemeScript: FC<Props> = ({ nonce }) => (\n  <script nonce={nonce} dangerouslySetInnerHTML={{ __html: THEME_BOOT_SCRIPT }} />\n);\n\nexport default UiThemeScript;\n"],"names":["UiThemeScript","nonce","jsx","THEME_BOOT_SCRIPT"],"mappings":"4LAyBMA,EAA2B,CAAC,CAAE,MAAAC,CAAA,IAClCC,MAAC,SAAA,CAAO,MAAAD,EAAc,wBAAyB,CAAE,OAAQE,EAAAA,iBAAA,CAAkB,CAAG"}

package/build/theme/UiThemeScript.d.ts

@@ -1,19 +1,22 @@
 import { FC } from 'react';
 type Props = {
-    /** Kullanıcının seçiminin tutulduğu `localStorage` anahtarı. */
-    storageKey: string;
+    /**
+     * The request's CSP nonce. Leave it out when the policy allows the script by hash
+     * (`THEME_BOOT_SCRIPT_HASH`), which also works for statically rendered pages.
+     */
+    nonce?: string;
 };
 /**
- * İLK BOYAMADAN ÖNCE tema — `<head>` içine, sunucu düzeninde.
+ * The theme before the first paint — rendered in `<head>`, in the server output.
  *
- * Kayıtlı açık seçimi (`light` / `dark`) `<html data-ui-theme>`e yazar; kayıt yoksa sistem
- * tercihi izlenir. Sunucu çıktısındaki satır içi betik HTML ayrıştırılırken çalışır; React onu
- * istemcide YENİDEN çalıştırmaz.
+ * It inlines the boot script of `@handijit/design` unchanged, so its text matches
+ * `THEME_BOOT_SCRIPT_HASH`: the stored choice (`localStorage["hd-theme"]`) or the system setting is
+ * written to `<html data-theme>` while the HTML is parsed. Put `suppressHydrationWarning` on
+ * `<html>`: the attribute is set before React hydrates.
  *
- * ⚠ BİR BİLEŞEN, fonksiyon değil: paket `'use client'` taşıdığı için dışa verilen düz bir
- * fonksiyon Next'in sunucu bileşeninde ÇAĞRILAMIYOR ("Attempted to call … from the server").
- * Bileşen ise sunucuda da çizilir. Bu yüzden 5.1 taslağındaki `themeBootScript()` dışa verilmedi.
- * @example <head><UiThemeScript storageKey="theme" /></head>
+ * A component and not a function: the package carries `'use client'`, and a plain exported function
+ * cannot be called from a Next server component, while a component renders on the server too.
+ * @example <head><UiThemeScript nonce={nonce} /></head>
  */
 declare const UiThemeScript: FC<Props>;
 export default UiThemeScript;

package/build/theme/UiThemeScript.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { themeBootScript as r } from "../helpers/theme.helper.js";
-const m = ({ storageKey: t }) => /* @__PURE__ */ e("script", { dangerouslySetInnerHTML: { __html: r({ storageKey: t }) } });
+import { THEME_BOOT_SCRIPT as r } from "@handijit/design";
+const m = ({ nonce: t }) => /* @__PURE__ */ e("script", { nonce: t, dangerouslySetInnerHTML: { __html: r } });
 export {
   m as default
 };

package/build/theme/UiThemeScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiThemeScript.js","sources":["../../src/theme/UiThemeScript.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { themeBootScript } from '../helpers/theme.helper';\n\ntype Props = {\n  /** Kullanıcının seçiminin tutulduğu `localStorage` anahtarı. */\n  storageKey: string;\n};\n\n/**\n * İLK BOYAMADAN ÖNCE tema — `<head>` içine, sunucu düzeninde.\n *\n * Kayıtlı açık seçimi (`light` / `dark`) `<html data-ui-theme>`e yazar; kayıt yoksa sistem\n * tercihi izlenir. Sunucu çıktısındaki satır içi betik HTML ayrıştırılırken çalışır; React onu\n * istemcide YENİDEN çalıştırmaz.\n *\n * ⚠ BİR BİLEŞEN, fonksiyon değil: paket `'use client'` taşıdığı için dışa verilen düz bir\n * fonksiyon Next'in sunucu bileşeninde ÇAĞRILAMIYOR (\"Attempted to call … from the server\").\n * Bileşen ise sunucuda da çizilir. Bu yüzden 5.1 taslağındaki `themeBootScript()` dışa verilmedi.\n * @example <head><UiThemeScript storageKey=\"theme\" /></head>\n */\nconst UiThemeScript: FC<Props> = ({ storageKey }) => (\n  <script dangerouslySetInnerHTML={{ __html: themeBootScript({ storageKey }) }} />\n);\n\nexport default UiThemeScript;\n"],"names":["UiThemeScript","storageKey","jsx","themeBootScript"],"mappings":";;;AAsBA,MAAMA,IAA2B,CAAC,EAAE,YAAAC,QAClC,gBAAAC,EAAC,UAAA,EAAO,yBAAyB,EAAE,QAAQC,EAAgB,EAAE,YAAAF,EAAA,CAAY,IAAE,CAAG;"}
+{"version":3,"file":"UiThemeScript.js","sources":["../../src/theme/UiThemeScript.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { THEME_BOOT_SCRIPT } from '@handijit/design';\n\ntype Props = {\n  /**\n   * The request's CSP nonce. Leave it out when the policy allows the script by hash\n   * (`THEME_BOOT_SCRIPT_HASH`), which also works for statically rendered pages.\n   */\n  nonce?: string;\n};\n\n/**\n * The theme before the first paint — rendered in `<head>`, in the server output.\n *\n * It inlines the boot script of `@handijit/design` unchanged, so its text matches\n * `THEME_BOOT_SCRIPT_HASH`: the stored choice (`localStorage[\"hd-theme\"]`) or the system setting is\n * written to `<html data-theme>` while the HTML is parsed. Put `suppressHydrationWarning` on\n * `<html>`: the attribute is set before React hydrates.\n *\n * A component and not a function: the package carries `'use client'`, and a plain exported function\n * cannot be called from a Next server component, while a component renders on the server too.\n * @example <head><UiThemeScript nonce={nonce} /></head>\n */\nconst UiThemeScript: FC<Props> = ({ nonce }) => (\n  <script nonce={nonce} dangerouslySetInnerHTML={{ __html: THEME_BOOT_SCRIPT }} />\n);\n\nexport default UiThemeScript;\n"],"names":["UiThemeScript","nonce","jsx","THEME_BOOT_SCRIPT"],"mappings":";;;AAyBA,MAAMA,IAA2B,CAAC,EAAE,OAAAC,EAAA,MAClC,gBAAAC,EAAC,UAAA,EAAO,OAAAD,GAAc,yBAAyB,EAAE,QAAQE,EAAA,EAAkB,CAAG;"}

package/build/theme/context.js

@@ -1,6 +1,6 @@
 "use client";
-import { useContext as t, createContext as e } from "react";
-const o = e({}), s = () => t(o);
+import { createContext as t, useContext as e } from "react";
+const o = t({}), s = () => e(o);
 export {
   o as default,
   s as useUi

package/build/types/charts/core/palette.d.ts

@@ -1,13 +1,11 @@
 /**
- * SERİ RENKLERİ — ui kategorik paleti (`cat-1…5`, `series-2`). Her ton iki temanın üç
- * yüzeyinde ≥3:1 (`check:contrast`) ve iki ton arasında ΔE ≥ 8 (palet üreteci).
- * ⚠ Marka yeşilleri (çam, mint) seri rengi OLMAZ: yeşil eylemin rengi. `cat-3` orta aydınlıkta bir
- * kategori yeşili.
+ * SERIES COLOURS — the six data series tokens of `@handijit/design` (`chart-1…6`), which the design
+ * package gates for contrast against the theme surfaces and for distance from each other.
+ * `muted` is for a waiting or empty part.
  */
-export type ChartTone = 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'series-1' | 'series-2' | 'muted';
-/** Sıra: ilk iki seri en uzak iki ton (mavi, kil) — iki serili grafik en sık durum. */
+export type ChartTone = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'chart-6' | 'muted';
 export declare const TONE_ORDER: readonly ChartTone[];
-/** Verilmeyen tonu sıradan alır; altıdan fazla seride döner (lejant adı ayırt eder). */
+/** Takes a missing tone from the order; wraps after six series (the legend name tells them apart). */
 export declare const toneAt: (index: number, tone?: ChartTone) => ChartTone;
-/** CSS rengi — tema değişince yeniden çizim gerekmez, değişken çözülür. */
+/** A CSS colour — the variable resolves when the theme changes, no redraw needed. */
 export declare const toneColor: (tone: ChartTone) => string;

package/build/types/chat/Legend/index.d.ts

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
-/** Kategorik paletin adları (`cat-*`, `series-*`) + bekleme/boşluk için `muted`. */
-export type LegendTone = 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'series-1' | 'series-2' | 'muted';
+/** The data series tokens of `@handijit/design` (`chart-1…6`) + `muted` for a waiting or empty part. */
+export type LegendTone = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'chart-6' | 'muted';
 export type LegendItem = {
     id: string;
     label: string;
@@ -11,6 +11,7 @@ type Props = {
     className?: string;
     testId?: string;
 };
+export declare const legendToneColor: (tone: LegendTone) => string;
 /**
  * Grafik lejantı — renk karesi + ad. Renk yalnızca kategorik paletten gelir (iki temanın üç
  * yüzeyinde ≥3:1); ad her zaman metin olarak yazılır, renk tek başına anlam taşımaz.

package/build/types/theme.type.d.ts

@@ -1,54 +1,20 @@
+import { ThemeName, ThemePreference } from '@handijit/design';
 import { UiLinkComponent } from './link.type';
-import { LIGHT_THEME, METRIC_TOKENS } from '../theme/tokens';
 /**
  * Sayı biçimlendiricileri: değere bağlı metinler dizeyle verilemez.
  * ⚠ `helpers/label.helper.ts` de aynı imzayı ELLE taşıyordu.
  */
 export type Formatter<TArgs extends unknown[]> = (...args: TArgs) => string;
 /**
- * Dışarıdan verilebilecek tema yapılandırması.
- * @example initUi({ theme: { light: { link: '#0a58ca', 'ring-color': '#0d6efd' }, dark: {…
+ * The user's CHOICE. `system` = no explicit choice, the operating system's setting is followed.
+ * The same union as `ThemePreference` of `@handijit/design`.
  */
-export type UiThemeConfig = Partial<{
-    light: UiThemeTokens;
-    dark: UiThemeTokens;
-    fonts: UiFonts;
-    /**
-     * Ölçü ezmeleri — yarıçap, boşluk, punto, süre.
-     * @example initUi({ theme: { metrics: { 'radius-md': '2px', 'radius-lg': '4px' } } });
-     */
-    metrics: UiMetrics;
-}>;
-/** Yazı tipi ailesi sözleşmesi. */
-export type UiFonts = Partial<{
-    heading: string;
-    body: string;
-    mono: string;
-}>;
-/**
- * Kullanıcının SEÇİMİ. `system` = açık bir seçim yok, işletim sistemi tercihi izlenir
- * (`prefers-color-scheme`).
- */
-export type UiColorPreference = UiColorScheme | 'system';
-/** ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili. */
-export type UiColorScheme = 'light' | 'dark';
-/** Bir temanın TAM eşlemesi. */
-export type UiResolvedTokens = Record<UiToken, string>;
-/** Bir temanın token → değer eşlemesi. */
-export type UiThemeTokens = Partial<Record<UiToken, string>>;
-/** Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli. */
-export type UiDensity = 'default' | 'compact';
-/** Ölçü ezmeleri. */
-export type UiMetrics = Partial<Record<UiMetricToken, string>>;
-/** Ölçü token adları — `METRIC_TOKENS`ten türetilir. */
-export type UiMetricToken = keyof typeof METRIC_TOKENS;
-/** Token adları — `LIGHT_THEME`den türetilir, elle listelenmez. */
-export type UiToken = keyof typeof LIGHT_THEME;
+export type UiColorPreference = ThemePreference;
+/** The RESOLVED theme — the one actually drawn. The same union as design's `ThemeName`. */
+export type UiColorScheme = ThemeName;
 export type UiContextValue = {
     /** Tüketicinin yönlendiricisi (`next/link`, `react-router`ın `Link`i…). */
     linkComponent?: UiLinkComponent;
-    /** Uygulanan tema ezmeleri. */
-    theme?: UiThemeConfig;
     /**
      * Arayüz metinleri.
      * ⚠ Referans bir dönem `theme/labels.ts`yi gösteriyordu; o dosya yalnızca tek satırlık bir başlık
@@ -198,14 +164,6 @@ export type UiLabels = Partial<{
         scale: Record<1 | 2 | 3 | 4 | 5, string>;
     }>;
 }>;
-export type InitUiOptions = Partial<{
-    /** Tema ve ölçü ezmeleri. */
-    theme: UiThemeConfig;
-    /** Başlangıç şeması. */
-    colorScheme: UiColorScheme;
-    /** Bilgi yoğunluğu. */
-    density: UiDensity;
-}>;
 export type UiThemeState = {
     /**
      * ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan işletim sisteminin o

package/build/types/types/theme.type.d.ts

@@ -1,54 +1,20 @@
+import type { ThemeName, ThemePreference } from '@handijit/design';
 import type { UiLinkComponent } from '@/types/link.type';
-import { LIGHT_THEME, METRIC_TOKENS } from '@/theme/tokens';
 /**
  * Sayı biçimlendiricileri: değere bağlı metinler dizeyle verilemez.
  * ⚠ `helpers/label.helper.ts` de aynı imzayı ELLE taşıyordu.
  */
 export type Formatter<TArgs extends unknown[]> = (...args: TArgs) => string;
 /**
- * Dışarıdan verilebilecek tema yapılandırması.
- * @example initUi({ theme: { light: { link: '#0a58ca', 'ring-color': '#0d6efd' }, dark: {…
+ * The user's CHOICE. `system` = no explicit choice, the operating system's setting is followed.
+ * The same union as `ThemePreference` of `@handijit/design`.
  */
-export type UiThemeConfig = Partial<{
-    light: UiThemeTokens;
-    dark: UiThemeTokens;
-    fonts: UiFonts;
-    /**
-     * Ölçü ezmeleri — yarıçap, boşluk, punto, süre.
-     * @example initUi({ theme: { metrics: { 'radius-md': '2px', 'radius-lg': '4px' } } });
-     */
-    metrics: UiMetrics;
-}>;
-/** Yazı tipi ailesi sözleşmesi. */
-export type UiFonts = Partial<{
-    heading: string;
-    body: string;
-    mono: string;
-}>;
-/**
- * Kullanıcının SEÇİMİ. `system` = açık bir seçim yok, işletim sistemi tercihi izlenir
- * (`prefers-color-scheme`).
- */
-export type UiColorPreference = UiColorScheme | 'system';
-/** ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili. */
-export type UiColorScheme = 'light' | 'dark';
-/** Bir temanın TAM eşlemesi. */
-export type UiResolvedTokens = Record<UiToken, string>;
-/** Bir temanın token → değer eşlemesi. */
-export type UiThemeTokens = Partial<Record<UiToken, string>>;
-/** Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli. */
-export type UiDensity = 'default' | 'compact';
-/** Ölçü ezmeleri. */
-export type UiMetrics = Partial<Record<UiMetricToken, string>>;
-/** Ölçü token adları — `METRIC_TOKENS`ten türetilir. */
-export type UiMetricToken = keyof typeof METRIC_TOKENS;
-/** Token adları — `LIGHT_THEME`den türetilir, elle listelenmez. */
-export type UiToken = keyof typeof LIGHT_THEME;
+export type UiColorPreference = ThemePreference;
+/** The RESOLVED theme — the one actually drawn. The same union as design's `ThemeName`. */
+export type UiColorScheme = ThemeName;
 export type UiContextValue = {
     /** Tüketicinin yönlendiricisi (`next/link`, `react-router`ın `Link`i…). */
     linkComponent?: UiLinkComponent;
-    /** Uygulanan tema ezmeleri. */
-    theme?: UiThemeConfig;
     /**
      * Arayüz metinleri.
      * ⚠ Referans bir dönem `theme/labels.ts`yi gösteriyordu; o dosya yalnızca tek satırlık bir başlık
@@ -198,14 +164,6 @@ export type UiLabels = Partial<{
         scale: Record<1 | 2 | 3 | 4 | 5, string>;
     }>;
 }>;
-export type InitUiOptions = Partial<{
-    /** Tema ve ölçü ezmeleri. */
-    theme: UiThemeConfig;
-    /** Başlangıç şeması. */
-    colorScheme: UiColorScheme;
-    /** Bilgi yoğunluğu. */
-    density: UiDensity;
-}>;
 export type UiThemeState = {
     /**
      * ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan işletim sisteminin o

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@handijit/ui",
-  "version": "1.0.0",
-  "description": "Accessible, theme-driven React component library built on SCSS Modules. Bootstrap Icons for shell iconography, two built-in themes and a fully overridable design-token contract.",
+  "version": "2.0.0",
+  "description": "Accessible React component library on SCSS Modules, themed by @handijit/design: light and dark from one set of --hd-* tokens, a CSP-ready theme boot script, and Bootstrap Icons for iconography.",
   "author": "Ahmet ilhan <ahmetilhan.dev@gmail.com>",
   "license": "MIT",
   "private": false,
@@ -416,9 +416,8 @@
   ],
   "scripts": {
     "prepare": "git rev-parse --git-dir >/dev/null 2>&1 && git config core.hooksPath .githooks || true",
-    "tokens": "node scripts/build-palette.mjs && node scripts/build-tokens.mjs",
-    "build": "npm run tokens && vite build && vite build --config vite.chat.config.ts && vite build --config vite.charts.config.ts && tsc -p tsconfig.subentries.json && node scripts/build-scss.mjs && node scripts/build-exports.mjs --check",
-    "dev": "npm run tokens && vite build --watch",
+    "build": "vite build && vite build --config vite.chat.config.ts && vite build --config vite.charts.config.ts && tsc -p tsconfig.subentries.json && node scripts/build-scss.mjs && node scripts/build-exports.mjs --check",
+    "dev": "vite build --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src __tests__ scripts --max-warnings 0 && stylelint \"src/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{ts,tsx,scss}\" \"playground/**/*.{ts,tsx,css}\" \"__tests__/**/*.{ts,tsx}\"",
@@ -433,22 +432,23 @@
     "test:device": "playwright test --project=ios --project=android",
     "test:device:install": "playwright install webkit chromium",
     "playground": "vite --config playground/vite.config.ts",
-    "playground:build": "npm run tokens && vite build --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
     "size": "npm run build && size-limit",
-    "verify": "npm run check:palette && npm run tokens && npm run check:contrast && npm run typecheck && npm run lint && npm run test:coverage && npm run build && npm run check:api && npm run check:animations && size-limit",
-    "check:palette": "node scripts/build-palette.mjs --check",
+    "verify": "npm run check:contrast && npm run typecheck && npm run lint && npm run test:coverage && npm run build && npm run check:api && npm run check:animations && size-limit",
     "check:exports": "node scripts/build-exports.mjs --check",
     "exports": "node scripts/build-exports.mjs"
   },
   "peerDependencies": {
-    "@handijit/utils": "^1.0.0",
+    "@handijit/design": "^1.0.0",
+    "@handijit/utils": "^2.0.0",
     "react": ">=18",
     "react-bootstrap-icons": ">=1.11.0",
     "react-dom": ">=18"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
-    "@handijit/utils": "^1.0.0",
+    "@handijit/design": "^1.0.0",
+    "@handijit/utils": "^2.0.0",
     "@playwright/test": "^1.62.1",
     "@size-limit/preset-small-lib": "^13.0.3",
     "@testing-library/jest-dom": "^6.9.1",

package/build/scss/_colors.generated.scss

@@ -1,119 +0,0 @@
-$page: var(--ui-page);
-$surface: var(--ui-surface);
-$surface-2: var(--ui-surface-2);
-$surface-3: var(--ui-surface-3);
-$surface-inset: var(--ui-surface-inset);
-$border: var(--ui-border);
-$border-strong: var(--ui-border-strong);
-$text: var(--ui-text);
-$text-2: var(--ui-text-2);
-$text-3: var(--ui-text-3);
-$shell: var(--ui-shell);
-$shell-2: var(--ui-shell-2);
-$shell-3: var(--ui-shell-3);
-$on-shell: var(--ui-on-shell);
-$on-shell-2: var(--ui-on-shell-2);
-$on-shell-danger: var(--ui-on-shell-danger);
-$shell-line: var(--ui-shell-line);
-$action: var(--ui-action);
-$action-hover: var(--ui-action-hover);
-$action-active: var(--ui-action-active);
-$on-action: var(--ui-on-action);
-$action-line: var(--ui-action-line);
-$action-soft: var(--ui-action-soft);
-$on-action-soft: var(--ui-on-action-soft);
-$cart: var(--ui-cart);
-$cart-hover: var(--ui-cart-hover);
-$cart-active: var(--ui-cart-active);
-$cart-soft: var(--ui-cart-soft);
-$on-cart: var(--ui-on-cart);
-$selected: var(--ui-selected);
-$selected-hover: var(--ui-selected-hover);
-$selected-active: var(--ui-selected-active);
-$on-selected: var(--ui-on-selected);
-$selected-tint: var(--ui-selected-tint);
-$selected-line: var(--ui-selected-line);
-$link: var(--ui-link);
-$link-hover: var(--ui-link-hover);
-$ok-bg: var(--ui-ok-bg);
-$ok-fg: var(--ui-ok-fg);
-$ok-line: var(--ui-ok-line);
-$warn-bg: var(--ui-warn-bg);
-$warn-fg: var(--ui-warn-fg);
-$warn-line: var(--ui-warn-line);
-$off-bg: var(--ui-off-bg);
-$off-fg: var(--ui-off-fg);
-$off-line: var(--ui-off-line);
-$bad-bg: var(--ui-bad-bg);
-$bad-fg: var(--ui-bad-fg);
-$bad-line: var(--ui-bad-line);
-$oem-bg: var(--ui-oem-bg);
-$oem-fg: var(--ui-oem-fg);
-$oem-line: var(--ui-oem-line);
-$alt-bg: var(--ui-alt-bg);
-$alt-fg: var(--ui-alt-fg);
-$alt-line: var(--ui-alt-line);
-$sale-bg: var(--ui-sale-bg);
-$sale-fg: var(--ui-sale-fg);
-$red-accent: var(--ui-red-accent);
-$green-accent: var(--ui-green-accent);
-$green-accent-hover: var(--ui-green-accent-hover);
-$on-green: var(--ui-on-green);
-$star: var(--ui-star);
-$danger-solid: var(--ui-danger-solid);
-$danger-solid-hover: var(--ui-danger-solid-hover);
-$on-danger: var(--ui-on-danger);
-$nav-bg: var(--ui-nav-bg);
-$nav-bg-2: var(--ui-nav-bg-2);
-$nav-fg: var(--ui-nav-fg);
-$nav-fg-2: var(--ui-nav-fg-2);
-$nav-fg-3: var(--ui-nav-fg-3);
-$nav-line: var(--ui-nav-line);
-$nav-line-strong: var(--ui-nav-line-strong);
-$nav-hover: var(--ui-nav-hover);
-$footer-bg: var(--ui-footer-bg);
-$band-bg: var(--ui-band-bg);
-$band-fg: var(--ui-band-fg);
-$band-fg-2: var(--ui-band-fg-2);
-$band-fg-3: var(--ui-band-fg-3);
-$band-accent: var(--ui-band-accent);
-$band-line: var(--ui-band-line);
-$band-hover: var(--ui-band-hover);
-$shadow-xs: var(--ui-shadow-xs);
-$shadow-sm: var(--ui-shadow-sm);
-$shadow-md: var(--ui-shadow-md);
-$shadow-lg: var(--ui-shadow-lg);
-$shadow-xl: var(--ui-shadow-xl);
-$shadow-up: var(--ui-shadow-up);
-$ring: var(--ui-ring);
-$ring-color: var(--ui-ring-color);
-$ring-danger: var(--ui-ring-danger);
-$ring-ok: var(--ui-ring-ok);
-$scrim: var(--ui-scrim);
-$scrim-soft: var(--ui-scrim-soft);
-$glass: var(--ui-glass);
-$glass-solid: var(--ui-glass-solid);
-$on-scrim: var(--ui-on-scrim);
-$skeleton-a: var(--ui-skeleton-a);
-$skeleton-b: var(--ui-skeleton-b);
-$track: var(--ui-track);
-$media-bg: var(--ui-media-bg);
-$glow-1: var(--ui-glow-1);
-$glow-2: var(--ui-glow-2);
-$glow-cart: var(--ui-glow-cart);
-$cat-1: var(--ui-cat-1);
-$cat-2: var(--ui-cat-2);
-$cat-3: var(--ui-cat-3);
-$cat-4: var(--ui-cat-4);
-$cat-5: var(--ui-cat-5);
-$series-1: var(--ui-series-1);
-$series-2: var(--ui-series-2);
-
-$font-heading: var(--ui-font-heading);
-$font-body: var(--ui-font-body);
-$font-mono: var(--ui-font-mono);
-$font-ui: $font-body;
-
-$header-offset: var(--ui-header-height, 0px);
-$sheet-inset-bottom: var(--ui-sheet-inset-bottom, 0px);
-$sheet-height: var(--ui-sheet-height, 100dvh);

package/build/scss/_metrics.generated.scss

@@ -1,49 +0,0 @@
-$radius-xs: var(--ui-radius-xs);
-$radius-sm: var(--ui-radius-sm);
-$radius-md: var(--ui-radius-md);
-$radius-lg: var(--ui-radius-lg);
-$radius-xl: var(--ui-radius-xl);
-$radius-pill: var(--ui-radius-pill);
-$type-scale: var(--ui-type-scale);
-$space-scale: var(--ui-space-scale);
-$space-0: var(--ui-space-0);
-$space-1: var(--ui-space-1);
-$space-2: var(--ui-space-2);
-$space-3: var(--ui-space-3);
-$space-4: var(--ui-space-4);
-$space-5: var(--ui-space-5);
-$space-6: var(--ui-space-6);
-$space-7: var(--ui-space-7);
-$space-8: var(--ui-space-8);
-$space-9: var(--ui-space-9);
-$font-size-2xs: var(--ui-font-size-2xs);
-$font-size-xs: var(--ui-font-size-xs);
-$font-size-sm: var(--ui-font-size-sm);
-$font-size-base: var(--ui-font-size-base);
-$font-size-body: var(--ui-font-size-body);
-$font-size-lg: var(--ui-font-size-lg);
-$font-size-xl: var(--ui-font-size-xl);
-$font-size-2xl: var(--ui-font-size-2xl);
-$font-size-3xl: var(--ui-font-size-3xl);
-$font-size-4xl: var(--ui-font-size-4xl);
-$font-size-control: var(--ui-font-size-control);
-$leading-none: var(--ui-leading-none);
-$leading-tight: var(--ui-leading-tight);
-$leading-snug: var(--ui-leading-snug);
-$leading-normal: var(--ui-leading-normal);
-$leading-relaxed: var(--ui-leading-relaxed);
-$icon-xs: var(--ui-icon-xs);
-$icon-sm: var(--ui-icon-sm);
-$icon-md: var(--ui-icon-md);
-$icon-lg: var(--ui-icon-lg);
-$icon-xl: var(--ui-icon-xl);
-$duration-instant: var(--ui-duration-instant);
-$duration-fast: var(--ui-duration-fast);
-$duration-normal: var(--ui-duration-normal);
-$duration-slow: var(--ui-duration-slow);
-$ease-out: var(--ui-ease-out);
-$ease-in-out: var(--ui-ease-in-out);
-$ease-spring: var(--ui-ease-spring);
-$duration-spin: var(--ui-duration-spin);
-$duration-shimmer: var(--ui-duration-shimmer);
-$duration-pulse: var(--ui-duration-pulse);