@signosoft/signpad-js 0.6.0 → 0.7.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@signosoft/signpad-js",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.7.1",
+  "license": "SEE LICENSE IN LICENSE",
   "browser": {
     "fs": false
   },
@@ -22,9 +23,13 @@
   },
   "files": [
     "dist",
+    "src/i18n",
+    "src/styles/primitive.css",
+    "src/styles/semantic.css",
+    "src/styles/semantic-dark.css",
     "src/styles/styles-variables.css",
     "src/styles/signosoft-signpad.css",
-    "docsVideo.gif",
+    "presentation.gif",
     "package.json",
     "README.md",
     "LICENSE"
@@ -32,15 +37,21 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@signosoft/tablet-driver": "0.1.4",
+    "@signosoft/tablet-driver": "0.1.5",
     "lit": "^3.3.1"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^6.0.3",
+    "@types/jest": "^30.0.0",
     "@types/node": "^25.0.9",
+    "jest": "^30.5.2",
+    "jest-environment-jsdom": "^30.5.2",
+    "ts-jest": "^29.4.14",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4"

package/src/i18n/cs.json

@@ -0,0 +1,38 @@
+{
+  "OK": "OK",
+  "CLEAR": "Smazat",
+  "CANCEL": "Zrušit",
+  "CLEAR_SIGNATURE": "Smazat podpis",
+  "DISCONNECT": "Odpojit",
+  "CONNECT_SIGNPAD": "Připojit Signpad",
+  "MOUSE": "Myš",
+  "CONNECTED_UNKNOWN_DEVICE": "Připojeno (neznámé zařízení)",
+  "AUTO_CONNECTING": "Automatické připojování k zařízení...",
+  "CONNECTING_TO_DEVICE": "Připojování k vašemu zařízení...",
+  "REVERTING_TO_DEFAULT": "Přepínání na výchozí vstup...",
+  "DISCONNECTING_DEVICE": "Odpojování zařízení...",
+  "PREPARING_SESSION": "Připravuji podpisovou relaci...",
+  "PROCESSING_OK": "Zpracovávám potvrzení...",
+  "PROCESSING_CLEAR": "Mazání podpisu...",
+  "PROCESSING_CANCEL": "Rušení podpisu...",
+  "TEXT_START_SIGNING": "Připojte své zařízení.",
+  "TEXT_SIGN_WITH_PHYSICAL": "Podepište se perem zařízení.",
+  "TEXT_SIGN_WITH_MOUSE": "Podepište se pomocí myši.",
+  "TEXT_SIGN_GENERIC": "Podepište se v oblasti výše pomocí myši nebo pera.",
+  "TEXT_SIGNING_WITH_DEVICE": "Podepisování pomocí: {device}",
+  "TEXT_PRESS_START_SIGNING": "Pro pokračování zahajte nové podepisování.",
+  "CONNECTION_ERROR": "K podpisovému padu se nepodařilo připojit. Zkuste to znovu.",
+  "INSUFFICIENT_TOKENS": "Nedostatek podpisových kreditů.",
+  "ERROR_STARTING_SIGNING": "Podpisovou relaci se nepodařilo zahájit.",
+  "ERROR_PROCESSING_ACTION": "Akci se nepodařilo dokončit.",
+  "INVALID_LICENSE_KEY": "Licenční klíč byl odmítnut. Zkontrolujte, že je lease platný a vydaný pro tuto stránku.",
+  "READY_TO_SIGN_MOUSE": "Připraveno k podpisu. Použijte myš.",
+  "READY_TO_SIGN_PHYSICAL": "Připraveno k podpisu. Použijte pero zařízení.",
+  "INITIALIZING": "Připravuji podpisový pad...",
+  "LICENSE_MISSING": "Chybí licenční klíč. Předejte platný lease v konfiguraci komponenty.",
+  "ERROR_DRIVER_INIT": "Ovladač podpisového padu se nepodařilo spustit. Zkuste to znovu nebo obnovte stránku.",
+  "NETWORK_ERROR": "Chyba sítě. Zkontrolujte připojení k internetu a zkuste to znovu.",
+  "START_NEW_SIGNATURE": "Podepsat znovu",
+  "RESTART_SESSION": "Obnovit relaci",
+  "CANVAS_ARIA_LABEL": "Oblast pro podpis"
+}

package/src/i18n/en.json

@@ -0,0 +1,38 @@
+{
+  "OK": "OK",
+  "CLEAR": "Clear",
+  "CANCEL": "Cancel",
+  "CLEAR_SIGNATURE": "Clear signature",
+  "DISCONNECT": "Disconnect",
+  "CONNECT_SIGNPAD": "Connect Signpad",
+  "MOUSE": "Mouse",
+  "CONNECTED_UNKNOWN_DEVICE": "Connected (Unknown Device)",
+  "AUTO_CONNECTING": "Auto-connecting to device...",
+  "CONNECTING_TO_DEVICE": "Connecting to your device...",
+  "REVERTING_TO_DEFAULT": "Reverting to default input...",
+  "DISCONNECTING_DEVICE": "Disconnecting device...",
+  "PREPARING_SESSION": "Preparing session...",
+  "PROCESSING_OK": "Processing OK...",
+  "PROCESSING_CLEAR": "Clearing...",
+  "PROCESSING_CANCEL": "Canceling...",
+  "TEXT_START_SIGNING": "Connect your device.",
+  "TEXT_SIGN_WITH_PHYSICAL": "Please sign using the device pen.",
+  "TEXT_SIGN_WITH_MOUSE": "Please sign using your mouse.",
+  "TEXT_SIGN_GENERIC": "Sign in the area above using mouse or pen.",
+  "TEXT_SIGNING_WITH_DEVICE": "Signing with {device}",
+  "TEXT_PRESS_START_SIGNING": "Start a new signing session to continue.",
+  "CONNECTION_ERROR": "Could not connect to the signature pad. Try again.",
+  "INSUFFICIENT_TOKENS": "Not enough signing credits.",
+  "ERROR_STARTING_SIGNING": "Could not start the signing session.",
+  "ERROR_PROCESSING_ACTION": "The action could not be completed.",
+  "INVALID_LICENSE_KEY": "The license key was rejected. Check that the lease is valid and issued for this website.",
+  "READY_TO_SIGN_MOUSE": "Ready to sign. Use your mouse.",
+  "READY_TO_SIGN_PHYSICAL": "Ready to sign. Use the device pen.",
+  "INITIALIZING": "Preparing signature pad...",
+  "LICENSE_MISSING": "License key is missing. Provide a valid lease in the component config.",
+  "ERROR_DRIVER_INIT": "The signature driver could not be started. Try again or reload the page.",
+  "NETWORK_ERROR": "Network error. Check your internet connection and try again.",
+  "START_NEW_SIGNATURE": "Start new signature",
+  "RESTART_SESSION": "Restart session",
+  "CANVAS_ARIA_LABEL": "Signature drawing area"
+}

package/src/i18n/pt.json

@@ -0,0 +1,38 @@
+{
+  "OK": "OK",
+  "CLEAR": "Limpar",
+  "CANCEL": "Cancelar",
+  "CLEAR_SIGNATURE": "Limpar assinatura",
+  "DISCONNECT": "Desconectar",
+  "CONNECT_SIGNPAD": "Conectar Signpad",
+  "MOUSE": "Mouse",
+  "CONNECTED_UNKNOWN_DEVICE": "Conectado (Dispositivo Desconhecido)",
+  "AUTO_CONNECTING": "Autoconectando ao dispositivo...",
+  "CONNECTING_TO_DEVICE": "Conectando ao seu dispositivo...",
+  "REVERTING_TO_DEFAULT": "Voltando para a entrada padrão...",
+  "DISCONNECTING_DEVICE": "Desconectando dispositivo...",
+  "PREPARING_SESSION": "Preparando a sessão...",
+  "PROCESSING_OK": "Processando OK...",
+  "PROCESSING_CLEAR": "Limpando...",
+  "PROCESSING_CANCEL": "Cancelando...",
+  "TEXT_START_SIGNING": "Conecte o seu dispositivo.",
+  "TEXT_SIGN_WITH_PHYSICAL": "Por favor, assine usando a caneta do dispositivo.",
+  "TEXT_SIGN_WITH_MOUSE": "Por favor, assine usando o mouse.",
+  "TEXT_SIGN_GENERIC": "Assine na área acima usando o mouse ou a caneta.",
+  "TEXT_SIGNING_WITH_DEVICE": "Assinando com {device}",
+  "TEXT_PRESS_START_SIGNING": "Inicie uma nova sessão de assinatura para continuar.",
+  "CONNECTION_ERROR": "Não foi possível conectar ao pad de assinatura. Tente novamente.",
+  "INSUFFICIENT_TOKENS": "Créditos de assinatura insuficientes.",
+  "ERROR_STARTING_SIGNING": "Não foi possível iniciar a sessão de assinatura.",
+  "ERROR_PROCESSING_ACTION": "Não foi possível concluir a ação.",
+  "INVALID_LICENSE_KEY": "A chave de licença foi rejeitada. Verifique se o lease é válido e emitido para este site.",
+  "READY_TO_SIGN_MOUSE": "Pronto para assinar. Use o mouse.",
+  "READY_TO_SIGN_PHYSICAL": "Pronto para assinar. Use a caneta do dispositivo.",
+  "INITIALIZING": "Preparando o pad de assinatura...",
+  "LICENSE_MISSING": "Falta a chave de licença. Forneça um lease válido na configuração do componente.",
+  "ERROR_DRIVER_INIT": "Não foi possível iniciar o driver de assinatura. Tente novamente ou recarregue a página.",
+  "NETWORK_ERROR": "Erro de rede. Verifique a sua ligação à internet e tente novamente.",
+  "START_NEW_SIGNATURE": "Assinar novamente",
+  "RESTART_SESSION": "Reiniciar sessão",
+  "CANVAS_ARIA_LABEL": "Área de assinatura"
+}

package/src/styles/primitive.css

@@ -0,0 +1,292 @@
+/* Design system primitive tokens. Source of truth: the design system (Figma export) — edit here only to re-sync.
+   --unit-*, --spacing-* and --borderRadius-* are converted from px to rem (value / 16, original px in the comment)
+   so the component scales with the browser font size; re-apply this when re-syncing. Pill/circle radii and border widths stay px. */
+:host {
+  --primary-black: #000000;
+  --primary-black50: #00000080;
+  --primary-white: #ffffff;
+  --primary-white50: #ffffff80;
+}
+:host {
+  --brand-50: #ebf7f1;
+  --brand-100: #d7efe2;
+  --brand-150: #c4e8d4;
+  --brand-200: #b0e0c5;
+  --brand-250: #9cd8b7;
+  --brand-300: #88d0a9;
+  --brand-350: #74c89a;
+  --brand-400: #61c18c;
+  --brand-450: #4db97d;
+  --brand-500: #39b16f;
+  --brand-550: #339f64;
+  --brand-600: #2e8e59;
+  --brand-650: #287c4e;
+  --brand-700: #226a43;
+  --brand-750: #1d5938;
+  --brand-800: #17472c;
+  --brand-850: #113521;
+  --brand-900: #0b2316;
+  --brand-950: #06120b;
+}
+:host {
+  --brandBeige-50: #fefefd;
+  --brandBeige-100: #fcfcfa;
+  --brandBeige-150: #fbfbf8;
+  --brandBeige-200: #faf9f5;
+  --brandBeige-250: #f9f8f3;
+  --brandBeige-300: #f7f7f1;
+  --brandBeige-350: #f6f5ee;
+  --brandBeige-400: #f5f4ec;
+  --brandBeige-450: #f3f2e9;
+  --brandBeige-500: #f2f1e7;
+  --brandBeige-550: #dad9d0;
+  --brandBeige-600: #c2c1b9;
+  --brandBeige-650: #a9a9a2;
+  --brandBeige-700: #91918b;
+  --brandBeige-750: #797974;
+  --brandBeige-800: #61605c;
+  --brandBeige-850: #494845;
+  --brandBeige-900: #30302e;
+  --brandBeige-950: #181817;
+}
+:host {
+  --neutral-0: #ffffff;
+  --neutral-50: #f2f2f2;
+  --neutral-100: #e5e5e5;
+  --neutral-150: #d9d9d9;
+  --neutral-200: #cccccc;
+  --neutral-250: #bfbfbf;
+  --neutral-300: #b2b2b2;
+  --neutral-350: #a6a6a6;
+  --neutral-400: #999999;
+  --neutral-450: #8c8c8c;
+  --neutral-500: #808080;
+  --neutral-550: #737373;
+  --neutral-600: #666666;
+  --neutral-650: #595959;
+  --neutral-700: #4d4d4d;
+  --neutral-750: #404040;
+  --neutral-800: #333333;
+  --neutral-850: #262626;
+  --neutral-900: #1a1a1a;
+  --neutral-950: #0d0d0d;
+}
+:host {
+  --blue-100: #d6ddff;
+  --blue-200: #adbbff;
+  --blue-300: #8599ff;
+  --blue-400: #5c77ff;
+  --blue-500: #3355ff;
+  --blue-600: #2944cc;
+  --blue-700: #1f3399;
+  --blue-800: #142266;
+  --blue-900: #0a1133;
+}
+:host {
+  --purple-100: #e4d6ff;
+  --purple-200: #c9adff;
+  --purple-300: #ad85ff;
+  --purple-400: #925cff;
+  --purple-500: #7733ff;
+  --purple-600: #5f29cc;
+  --purple-700: #471f99;
+  --purple-800: #301466;
+  --purple-900: #180a33;
+}
+:host {
+  --violet-100: #f1d6ff;
+  --violet-200: #e4adff;
+  --violet-300: #d685ff;
+  --violet-400: #c95cff;
+  --violet-500: #bb33ff;
+  --violet-600: #9629cc;
+  --violet-700: #701f99;
+  --violet-800: #4b1466;
+  --violet-900: #250a33;
+}
+:host {
+  --red-100: #ffd4d4;
+  --red-200: #ffa9a9;
+  --red-300: #ff7f7f;
+  --red-400: #ff5454;
+  --red-500: #ff2929;
+  --red-600: #cc2121;
+  --red-700: #991919;
+  --red-800: #661010;
+  --red-900: #330808;
+}
+:host {
+  --pink-100: #ffd6dd;
+  --pink-200: #ffadbb;
+  --pink-300: #ff8599;
+  --pink-400: #ff5c77;
+  --pink-500: #ff3355;
+  --pink-600: #cc2944;
+  --pink-700: #991f33;
+  --pink-800: #661422;
+  --pink-900: #330a11;
+}
+:host {
+  --orange-100: #ffead4;
+  --orange-200: #ffd5a9;
+  --orange-300: #ffc17f;
+  --orange-400: #ffac54;
+  --orange-500: #ff9729;
+  --orange-600: #cc7921;
+  --orange-700: #995b19;
+  --orange-800: #663c10;
+  --orange-900: #331e08;
+}
+:host {
+  --yellow-100: #fff5cc;
+  --yellow-200: #ffeb99;
+  --yellow-300: #ffe066;
+  --yellow-400: #ffd633;
+  --yellow-500: #ffcc00;
+  --yellow-600: #cca300;
+  --yellow-700: #997a00;
+  --yellow-800: #665200;
+  --yellow-900: #332900;
+}
+:host {
+  --green-100: #ccebd6;
+  --green-200: #99d6ad;
+  --green-300: #66c285;
+  --green-400: #33ad5c;
+  --green-500: #009933;
+  --green-600: #007a29;
+  --green-700: #005c1f;
+  --green-800: #003d14;
+  --green-900: #001f0a;
+}
+:host {
+  --teal-100: #ccf5f5;
+  --teal-200: #99ebeb;
+  --teal-300: #66e0e0;
+  --teal-400: #33d6d6;
+  --teal-500: #00cccc;
+  --teal-600: #00a3a3;
+  --teal-700: #007a7a;
+  --teal-800: #005252;
+  --teal-900: #002929;
+}
+:host {
+  --cyan-100: #cceeff;
+  --cyan-200: #99ddff;
+  --cyan-300: #66ccff;
+  --cyan-400: #33bbff;
+  --cyan-500: #00aaff;
+  --cyan-600: #0088cc;
+  --cyan-700: #006699;
+  --cyan-800: #004466;
+  --cyan-900: #002233;
+}
+:host {
+  --fontFamily-inter: Inter;
+  --fontFamily-newOrder: Inter Display;
+  --fontFamily-sfProText: SF Pro Text;
+  --fontFamily-roboto: Roboto;
+}
+:host {
+  --fontWeight-regular: 400;
+  --fontWeight-semiBold: 600;
+}
+:host {
+  --fontSize-xs: var(--unit-10);
+  --fontSize-s: var(--unit-12);
+  --fontSize-m: var(--unit-14);
+  --fontSize-l: var(--unit-16);
+  --fontSize-xl: var(--unit-18);
+  --fontSize-2xl: var(--unit-20);
+  --fontSize-3xl: var(--unit-24);
+  --fontSize-4xl: var(--unit-28);
+  --fontSize-5xl: var(--unit-32);
+  --fontSize-6xl: var(--unit-40);
+  --fontSize-7xl: var(--unit-48);
+  --fontSize-8xl: var(--unit-56);
+  --fontSize-9xl: var(--unit-64);
+  --fontSize-10xl: var(--unit-72);
+}
+:host {
+  --lineHeight-xs: var(--unit-14);
+  --lineHeight-s: var(--unit-16);
+  --lineHeight-m: var(--unit-20);
+  --lineHeight-l: var(--unit-24);
+  --lineHeight-xl: var(--unit-26);
+  --lineHeight-2xl: var(--unit-28);
+  --lineHeight-3xl: var(--unit-32);
+  --lineHeight-4xl: var(--unit-36);
+  --lineHeight-5xl: var(--unit-40);
+  --lineHeight-6xl: var(--unit-48);
+  --lineHeight-7xl: var(--unit-56);
+  --lineHeight-8xl: var(--unit-64);
+  --lineHeight-9xl: var(--unit-72);
+  --lineHeight-10xl: var(--unit-80);
+}
+:host {
+  --letterSpacing-xs: -1;
+  --letterSpacing-s: -0.5;
+  --letterSpacing-none: 0;
+}
+:host {
+  --unit-2: 0.125rem; /* 2px */
+  --unit-4: 0.25rem; /* 4px */
+  --unit-8: 0.5rem; /* 8px */
+  --unit-10: 0.625rem; /* 10px */
+  --unit-12: 0.75rem; /* 12px */
+  --unit-14: 0.875rem; /* 14px */
+  --unit-16: 1rem; /* 16px */
+  --unit-18: 1.125rem; /* 18px */
+  --unit-20: 1.25rem; /* 20px */
+  --unit-24: 1.5rem; /* 24px */
+  --unit-26: 1.625rem; /* 26px */
+  --unit-28: 1.75rem; /* 28px */
+  --unit-32: 2rem; /* 32px */
+  --unit-36: 2.25rem; /* 36px */
+  --unit-40: 2.5rem; /* 40px */
+  --unit-44: 2.75rem; /* 44px */
+  --unit-48: 3rem; /* 48px */
+  --unit-56: 3.5rem; /* 56px */
+  --unit-64: 4rem; /* 64px */
+  --unit-72: 4.5rem; /* 72px */
+  --unit-80: 5rem; /* 80px */
+  --unit-88: 5.5rem; /* 88px */
+  --unit-96: 6rem; /* 96px */
+  --unit-104: 6.5rem; /* 104px */
+  --unit-112: 7rem; /* 112px */
+  --unit-120: 7.5rem; /* 120px */
+}
+:host {
+  --spacing-2: 0.125rem; /* 2px */
+  --spacing-4: 0.25rem; /* 4px */
+  --spacing-8: 0.5rem; /* 8px */
+  --spacing-10: 0.625rem; /* 10px */
+  --spacing-12: 0.75rem; /* 12px */
+  --spacing-16: 1rem; /* 16px */
+  --spacing-24: 1.5rem; /* 24px */
+  --spacing-32: 2rem; /* 32px */
+  --spacing-40: 2.5rem; /* 40px */
+  --spacing-48: 3rem; /* 48px */
+  --spacing-56: 3.5rem; /* 56px */
+  --spacing-64: 4rem; /* 64px */
+  --spacing-72: 4.5rem; /* 72px */
+  --spacing-80: 5rem; /* 80px */
+  --spacing-88: 5.5rem; /* 88px */
+  --spacing-96: 6rem; /* 96px */
+}
+:host {
+  --borderRadius-circle: 50px;
+  --borderRadius-pill: 999px;
+  --borderRadius-l: 1rem; /* 16px */
+  --borderRadius-m: 0.75rem; /* 12px */
+  --borderRadius-s: 0.5rem; /* 8px */
+  --borderRadius-xs: 0.25rem; /* 4px */
+}
+:host {
+  --borderWidth-xl: 8px;
+  --borderWidth-l: 4px;
+  --borderWidth-m: 2px;
+  --borderWidth-s: 1.5px;
+  --borderWidth-xs: 1px;
+  --borderWidth-xxs: 0.5px;
+}

package/src/styles/semantic-dark.css

@@ -0,0 +1,82 @@
+/* Design system semantic tokens (dark). Source: dark.scss from the design system — edit there and re-sync. Applied when the host has data-theme="dark". Users tokens are not used by the component and are omitted. */
+:host([data-theme="dark"]) {
+  --content-primary: var(--neutral-0);
+  --content-secondary: var(--neutral-100);
+  --content-tertiary: var(--neutral-300);
+  --content-quaternary: var(--neutral-300);
+  --content-primaryInverse: var(--neutral-900);
+  --content-secondaryInverse: var(--neutral-800);
+  --content-tertiaryInverse: var(--neutral-600);
+  --content-disabled: var(--neutral-700);
+  --content-brand: var(--brand-400);
+  --content-link: var(--blue-400);
+  --content-linkHover: var(--blue-300);
+  --content-linkPressed: var(--blue-200);
+  --content-info: var(--blue-400);
+  --content-infoBold: var(--blue-300);
+  --content-notice: var(--orange-400);
+  --content-noticeBold: var(--orange-300);
+  --content-negative: var(--red-400);
+  --content-negativeHover: var(--red-300);
+  --content-positive: var(--green-400);
+  --content-positiveBold: var(--green-300);
+  --content-brandHover: var(--brand-300);
+  --content-brandPressed: var(--brand-200);
+  --content-brandSubtle: var(--brand-800);
+  --content-negativePressed: var(--red-300);
+  --content-brandBold: var(--brand-50);
+}
+:host([data-theme="dark"]) {
+  --background-primary: var(--neutral-900);
+  --background-hover: var(--neutral-800);
+  --background-pressed: var(--neutral-700);
+  --background-selected: var(--brand-800);
+  --background-disabled: var(--neutral-800);
+  --background-inverse: var(--neutral-0);
+  --background-brand: var(--brand-400);
+  --background-brandHover: var(--brand-300);
+  --background-brandPressed: var(--brand-200);
+  --background-info: var(--blue-400);
+  --background-infoSubtle: var(--blue-800);
+  --background-notice: var(--orange-400);
+  --background-noticeSubtle: var(--orange-800);
+  --background-negative: var(--red-400);
+  --background-negativeHover: var(--red-300);
+  --background-negativePressed: var(--red-200);
+  --background-negativeSubtle: var(--red-800);
+  --background-positive: var(--green-400);
+  --background-positiveSubtle: var(--green-800);
+  --background-secondary: var(--neutral-800);
+  --background-secondaryPressed: var(--neutral-800);
+  --background-brandSubtle: var(--brand-800);
+  --background-brandBold: var(--brand-50);
+  --background-secondaryHover: var(--neutral-800);
+  --background-subtle: var(--neutral-800);
+}
+:host([data-theme="dark"]) {
+  --border-primary: var(--neutral-400);
+  --border-secondary: var(--neutral-600);
+  --border-tertiary: var(--neutral-800);
+  --border-disabled: var(--neutral-700);
+  --border-brand: var(--brand-400);
+  --border-inverse: var(--neutral-900);
+  --border-focus: var(--blue-400);
+  --border-info: var(--blue-400);
+  --border-notice: var(--orange-400);
+  --border-negative: var(--red-400);
+  --border-positive: var(--green-400);
+  --border-mono: var(--primary-white);
+  --border-negativeHover: var(--red-300);
+  --border-brandPressed: var(--brand-400);
+  --border-brandHover: var(--brand-400);
+  --border-brandSubtle: var(--brand-800);
+  --border-brandBold: var(--brand-50);
+  --border-negativePressed: var(--red-200);
+}
+:host([data-theme="dark"]) {
+  --surface-l0: var(--neutral-950);
+}
+:host([data-theme="dark"]) {
+  --overlay-50: var(--primary-black50);
+  --overlay-50Inverse: var(--primary-white50);
+}

package/src/styles/semantic.css

@@ -0,0 +1,144 @@
+/* Design system semantic tokens (light). Source of truth: the design system (Figma export) — edit here only to re-sync. */
+:host {
+  --content-primary: var(--neutral-800);
+  --content-secondary: var(--neutral-700);
+  --content-tertiary: var(--neutral-600);
+  --content-quaternary: var(--neutral-500);
+  --content-primaryInverse: var(--neutral-0);
+  --content-secondaryInverse: var(--neutral-100);
+  --content-tertiaryInverse: var(--neutral-300);
+  --content-disabled: var(--neutral-500);
+  --content-brand: var(--brand-500);
+  --content-link: var(--blue-500);
+  --content-linkHover: var(--blue-600);
+  --content-linkPressed: var(--blue-700);
+  --content-info: var(--blue-500);
+  --content-infoBold: var(--blue-600);
+  --content-notice: var(--orange-500);
+  --content-noticeBold: var(--orange-700);
+  --content-negative: var(--red-600);
+  --content-negativeHover: var(--red-700);
+  --content-positive: var(--brand-500);
+  --content-positiveBold: var(--brand-600);
+  --content-brandHover: var(--brand-600);
+  --content-brandPressed: var(--brand-750);
+  --content-brandSubtle: var(--brand-50);
+  --content-negativePressed: var(--red-800);
+  --content-brandBold: var(--brand-800);
+}
+:host {
+  --background-primary: var(--neutral-0);
+  --background-hover: var(--neutral-50);
+  --background-pressed: var(--neutral-100);
+  --background-selected: var(--neutral-50);
+  --background-disabled: var(--neutral-100);
+  --background-inverse: var(--neutral-900);
+  --background-brand: var(--brand-650);
+  --background-brandHover: var(--brand-700);
+  --background-brandPressed: var(--brand-750);
+  --background-info: var(--blue-500);
+  --background-infoSubtle: var(--blue-100);
+  --background-notice: var(--orange-500);
+  --background-noticeSubtle: var(--orange-100);
+  --background-negative: var(--red-500);
+  --background-negativeHover: var(--red-600);
+  --background-negativePressed: var(--red-700);
+  --background-negativeSubtle: var(--red-100);
+  --background-positive: var(--brand-500);
+  --background-positiveSubtle: var(--brand-100);
+  --background-secondary: var(--neutral-150);
+  --background-secondaryPressed: var(--neutral-250);
+  --background-brandSubtle: var(--brand-50);
+  --background-brandBold: var(--brand-800);
+  --background-secondaryHover: var(--neutral-200);
+  --background-subtle: var(--neutral-50);
+}
+:host {
+  --border-primary: var(--neutral-600);
+  --border-secondary: var(--neutral-400);
+  --border-tertiary: var(--neutral-150);
+  --border-disabled: var(--neutral-200);
+  --border-brand: var(--brand-500);
+  --border-inverse: var(--neutral-0);
+  --border-focus: var(--blue-500);
+  --border-info: var(--blue-500);
+  --border-notice: var(--orange-500);
+  --border-negative: var(--red-500);
+  --border-positive: var(--brand-500);
+  --border-mono: var(--neutral-900);
+  --border-negativeHover: var(--red-600);
+  --border-brandPressed: var(--brand-750);
+  --border-brandHover: var(--brand-600);
+  --border-brandSubtle: var(--brand-50);
+  --border-brandBold: var(--brand-800);
+  --border-negativePressed: var(--red-700);
+}
+:host {
+  --surface-l0: var(--neutral-0);
+}
+:host {
+  --overlay-50: var(--primary-black50);
+  --overlay-50Inverse: #2d2d2d;
+}
+:host {
+  --fontFamily-primary: var(--fontFamily-inter);
+  --fontFamily-secondary: var(--fontFamily-newOrder);
+}
+:host {
+  --text-3xl-regular-fontWeight: var(--fontWeight-regular);
+  --text-3xl-regular-fontSize: var(--fontSize-4xl);
+  --text-3xl-regular-lineHeight: var(--lineHeight-4xl);
+  --text-3xl-regular-letterSpacing: var(--letterSpacing-none);
+  --text-3xl-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-3xl-semibold-fontSize: var(--fontSize-4xl);
+  --text-3xl-semibold-lineHeight: var(--lineHeight-4xl);
+  --text-3xl-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-2xl-regular-fontWeight: var(--fontWeight-regular);
+  --text-2xl-regular-fontSize: var(--fontSize-3xl);
+  --text-2xl-regular-lineHeight: var(--lineHeight-3xl);
+  --text-2xl-regular-letterSpacing: var(--letterSpacing-none);
+  --text-2xl-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-2xl-semibold-fontSize: var(--fontSize-3xl);
+  --text-2xl-semibold-lineHeight: var(--lineHeight-3xl);
+  --text-2xl-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-xl-regular-fontWeight: var(--fontWeight-regular);
+  --text-xl-regular-fontSize: var(--fontSize-2xl);
+  --text-xl-regular-lineHeight: var(--lineHeight-2xl);
+  --text-xl-regular-letterSpacing: var(--letterSpacing-none);
+  --text-xl-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-xl-semibold-fontSize: var(--fontSize-2xl);
+  --text-xl-semibold-lineHeight: var(--lineHeight-2xl);
+  --text-xl-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-l-regular-fontWeight: var(--fontWeight-regular);
+  --text-l-regular-fontSize: var(--fontSize-l);
+  --text-l-regular-lineHeight: var(--lineHeight-l);
+  --text-l-regular-letterSpacing: var(--letterSpacing-none);
+  --text-l-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-l-semibold-fontSize: var(--fontSize-l);
+  --text-l-semibold-lineHeight: var(--lineHeight-l);
+  --text-l-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-m-regular-fontWeight: var(--fontWeight-regular);
+  --text-m-regular-fontSize: var(--fontSize-m);
+  --text-m-regular-lineHeight: var(--lineHeight-m);
+  --text-m-regular-letterSpacing: var(--letterSpacing-none);
+  --text-m-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-m-semibold-fontSize: var(--fontSize-m);
+  --text-m-semibold-lineHeight: var(--lineHeight-m);
+  --text-m-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-s-regular-fontWeight: var(--fontWeight-regular);
+  --text-s-regular-fontSize: var(--fontSize-s);
+  --text-s-regular-lineHeight: var(--lineHeight-s);
+  --text-s-regular-letterSpacing: var(--letterSpacing-none);
+  --text-s-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-s-semibold-fontSize: var(--fontSize-s);
+  --text-s-semibold-lineHeight: var(--lineHeight-s);
+  --text-s-semibold-letterSpacing: var(--letterSpacing-none);
+  --text-xs-regular-fontWeight: var(--fontWeight-regular);
+  --text-xs-regular-fontSize: var(--fontSize-xs);
+  --text-xs-regular-lineHeight: var(--lineHeight-xs);
+  --text-xs-regular-letterSpacing: var(--letterSpacing-none);
+  --text-xs-semibold-fontWeight: var(--fontWeight-semiBold);
+  --text-xs-semibold-fontSize: var(--fontSize-xs);
+  --text-xs-semibold-lineHeight: var(--lineHeight-xs);
+  --text-xs-semibold-letterSpacing: var(--letterSpacing-none);
+}