@coras-io/embed 0.1.2 → 0.3.0

package/dist/sdk/meta.d.ts

@@ -1,7 +0,0 @@
-import type { CorasPageMeta, CorasPageName } from "./types.js";
-/**
- * Public metadata for a page. Currently exposes the internal custom-element tag
- * used to render it; richer SEO metadata (title/description/canonical/JSON-LD)
- * is added under the SEO work (plan P-072).
- */
-export declare function getPageMeta(page: CorasPageName): CorasPageMeta;

package/dist/sdk/meta.js

@@ -1,9 +0,0 @@
-import { defaultPageRegistry } from "./page-registry.js";
-/**
- * Public metadata for a page. Currently exposes the internal custom-element tag
- * used to render it; richer SEO metadata (title/description/canonical/JSON-LD)
- * is added under the SEO work (plan P-072).
- */
-export function getPageMeta(page) {
-    return { page, tagName: defaultPageRegistry[page].tagName };
-}

package/dist/styles/tokens.css

@@ -1,359 +0,0 @@
-/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */
-/* CSS-first four-tier token system (plan F-004, P-051..P-055). */
-
-@layer coras.palette, coras.brand, coras.semantic, coras.components;
-
-@property --coras-brand-primary {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #4657d4;
-}
-@property --coras-brand-secondary {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #161c44;
-}
-@property --coras-brand-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #ffffff;
-}
-@property --coras-brand-surface {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #fcfcff;
-}
-@property --coras-brand-text {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #161c44;
-}
-@property --coras-brand-radius {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 1.5rem;
-}
-@property --coras-brand-text-button {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #4657d4;
-}
-@property --coras-brand-body-icon {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #161c44;
-}
-@property --coras-brand-button-radius {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 1.5rem;
-}
-@property --coras-brand-chip-radius {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 1.5rem;
-}
-@property --coras-brand-navbar {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #ffffff;
-}
-@property --coras-brand-navbar-text {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #000000;
-}
-@property --coras-brand-navbar-icon {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #000000;
-}
-@property --coras-brand-navbar-border {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-@property --coras-brand-footer {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #e6e6e6;
-}
-@property --coras-brand-footer-text {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #000000;
-}
-@property --coras-brand-footer-link {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #000000;
-}
-@property --coras-brand-error {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #c9224a;
-}
-@property --coras-brand-success {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #00ad8f;
-}
-@property --coras-brand-warning {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #ed8f1c;
-}
-@property --coras-brand-info {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: #670c93;
-}
-
-@layer coras.palette {
-  :where([data-coras-root], .coras-theme) {
-    --coras-palette-primary-50: #fcfcff;
-    --coras-palette-primary-100: #fbfbff;
-    --coras-palette-primary-200: #eef0ff;
-    --coras-palette-primary-300: #dde1ff;
-    --coras-palette-primary-400: #5468ff;
-    --coras-palette-primary-500: #4657d4;
-    --coras-palette-primary-700: #323e99;
-    --coras-palette-secondary-50: #e8e8ec;
-    --coras-palette-secondary-100: #d0d2da;
-    --coras-palette-secondary-200: #b9bbc7;
-    --coras-palette-secondary-300: #a2a4b4;
-    --coras-palette-secondary-400: #1c2355;
-    --coras-palette-secondary-500: #161c44;
-    --coras-palette-secondary-700: #121636;
-    --coras-palette-neutral-50: #f5f5f5;
-    --coras-palette-neutral-100: #eeeeee;
-    --coras-palette-neutral-200: #e6e6e6;
-    --coras-palette-neutral-300: #dddddd;
-    --coras-palette-neutral-400: #cccccc;
-    --coras-palette-neutral-500: #aaaaaa;
-    --coras-palette-neutral-600: #888888;
-    --coras-palette-neutral-700: #666666;
-    --coras-palette-neutral-800: #444444;
-    --coras-palette-neutral-900: #292929;
-    --coras-palette-error-50: #fae9ed;
-    --coras-palette-error-500: #c9224a;
-    --coras-palette-error-700: #a11b3b;
-    --coras-palette-error-900: #79142c;
-    --coras-palette-info-50: #f0e7f4;
-    --coras-palette-info-500: #670c93;
-    --coras-palette-info-700: #520a76;
-    --coras-palette-info-900: #3e0758;
-    --coras-palette-success-50: #e6f7f4;
-    --coras-palette-success-500: #00ad8f;
-    --coras-palette-success-700: #008a72;
-    --coras-palette-success-900: #006856;
-    --coras-palette-warning-50: #fdf4e8;
-    --coras-palette-warning-500: #ed8f1c;
-    --coras-palette-warning-700: #be7216;
-    --coras-palette-warning-900: #8e5611;
-    --coras-palette-pink-500: #ff2d55;
-    --coras-palette-black: #000000;
-    --coras-palette-white: #ffffff;
-  }
-}
-
-@layer coras.brand {
-  :where([data-coras-root], .coras-theme) {
-    color-scheme: light;
-    --coras-brand-primary: var(--coras-palette-primary-500);
-    --coras-brand-secondary: var(--coras-palette-secondary-500);
-    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);
-    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);
-    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);
-    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);
-    --coras-brand-radius: 1.5rem;
-    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --coras-brand-text-button: var(--coras-brand-primary);
-    --coras-brand-body-icon: var(--coras-brand-text);
-    --coras-brand-button-radius: var(--coras-brand-radius);
-    --coras-brand-chip-radius: var(--coras-brand-radius);
-    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);
-    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);
-    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);
-    --coras-brand-navbar-border: transparent;
-    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
-    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);
-    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);
-    --coras-brand-footer-link: var(--coras-brand-footer-text);
-    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);
-    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);
-    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);
-    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);
-  }
-}
-
-@layer coras.semantic {
-  :where([data-coras-root], .coras-theme) {
-    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));
-    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));
-    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));
-    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));
-    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));
-    --coras-color-primary-500: var(--coras-brand-primary);
-    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);
-    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));
-    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));
-    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));
-    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));
-    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));
-    --coras-color-secondary-500: var(--coras-brand-secondary);
-    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);
-    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));
-    --coras-color-error-500: var(--coras-brand-error);
-    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);
-    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);
-    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));
-    --coras-color-success-500: var(--coras-brand-success);
-    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);
-    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);
-    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));
-    --coras-color-warning-500: var(--coras-brand-warning);
-    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);
-    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);
-    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));
-    --coras-color-info-500: var(--coras-brand-info);
-    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);
-    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);
-    --coras-color-neutral-50: var(--coras-palette-neutral-50);
-    --coras-color-neutral-100: var(--coras-palette-neutral-100);
-    --coras-color-neutral-200: var(--coras-palette-neutral-200);
-    --coras-color-neutral-300: var(--coras-palette-neutral-300);
-    --coras-color-neutral-400: var(--coras-palette-neutral-400);
-    --coras-color-neutral-500: var(--coras-palette-neutral-500);
-    --coras-color-neutral-600: var(--coras-palette-neutral-600);
-    --coras-color-neutral-700: var(--coras-palette-neutral-700);
-    --coras-color-neutral-800: var(--coras-palette-neutral-800);
-    --coras-color-neutral-900: var(--coras-palette-neutral-900);
-    --coras-color-background: var(--coras-brand-background);
-    --coras-color-surface: var(--coras-brand-surface);
-    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);
-    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));
-    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));
-    --coras-color-text: var(--coras-brand-text);
-    --coras-color-text-primary: var(--coras-brand-text);
-    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));
-    --coras-color-text-muted: var(--coras-brand-text-muted);
-    --coras-color-text-disabled: var(--coras-palette-neutral-500);
-    --coras-state-overlay: #000;
-    --coras-state-hover: 10%;
-    --coras-state-active: 18%;
-    --coras-state-selected: 12%;
-    --coras-color-action: var(--coras-brand-primary);
-    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));
-    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));
-    --coras-color-action-text: var(--coras-palette-white);
-    --coras-color-primary: var(--coras-brand-primary);
-    --coras-color-primary-hover: var(--coras-color-action-hover);
-    --coras-color-text-button: var(--coras-brand-text-button);
-    --coras-color-icon: var(--coras-brand-body-icon);
-    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));
-    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));
-    --coras-color-focus-ring: var(--coras-brand-primary);
-    --coras-color-error: var(--coras-brand-error);
-    --coras-color-error-surface: var(--coras-color-error-50);
-    --coras-color-success: var(--coras-brand-success);
-    --coras-color-success-surface: var(--coras-color-success-50);
-    --coras-color-warning: var(--coras-brand-warning);
-    --coras-color-warning-surface: var(--coras-color-warning-50);
-    --coras-color-info: var(--coras-brand-info);
-    --coras-color-info-surface: var(--coras-color-info-50);
-    --coras-font-family-sans: var(--coras-brand-font);
-    --coras-font-size-xxs: 0.625rem;
-    --coras-font-size-xs: 0.75rem;
-    --coras-font-size-sm: 0.875rem;
-    --coras-font-size-base: 1rem;
-    --coras-font-size-lg: 1.125rem;
-    --coras-font-size-xl: 1.25rem;
-    --coras-font-size-2xl: 1.5rem;
-    --coras-font-size-3xl: 2.25rem;
-    --coras-font-size-4xl: 3rem;
-    --coras-font-size-5xl: 3.5rem;
-    --coras-font-weight-light: 300;
-    --coras-font-weight-normal: 400;
-    --coras-font-weight-medium: 500;
-    --coras-font-weight-semibold: 600;
-    --coras-font-weight-bold: 700;
-    --coras-radius-none: 0;
-    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);
-    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);
-    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);
-    --coras-radius-lg: var(--coras-brand-radius);
-    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);
-    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);
-    --coras-radius-full: 9999px;
-    --coras-radius-control: 0.25rem;
-    --coras-radius-field: 0.5rem;
-    --coras-radius-button: var(--coras-brand-button-radius);
-    --coras-radius-chip: var(--coras-brand-chip-radius);
-    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);
-    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);
-    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);
-    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);
-    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
-    --coras-page-max-width: 950px;
-    --coras-container-max-width: 1368px;
-    --coras-footer-max-width: 1073px;
-    --coras-z-index-overlay: 1000;
-    --coras-navbar-padding: 1rem;
-    --coras-content-padding: 0 1rem;
-    --coras-footer-padding: 4rem 2rem;
-    --coras-width-mobile: 375px;
-    --coras-width-tablet: 768px;
-    --coras-width-desktop: 1024px;
-  }
-}
-
-@layer coras.components {
-  :where([data-coras-root], .coras-theme) {
-    --coras-base-background-color: var(--coras-color-background);
-    --coras-base-text-color: var(--coras-color-text);
-    --coras-base-primary-background-color: var(--coras-color-text);
-    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);
-    --coras-navbar-background: var(--coras-brand-navbar);
-    --coras-navbar-text-color: var(--coras-brand-navbar-text);
-    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);
-    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);
-    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);
-    --coras-footer-background-color: var(--coras-brand-footer);
-    --coras-footer-text-color: var(--coras-brand-footer-text);
-    --coras-footer-link-color: var(--coras-brand-footer-link);
-    --coras-button-primary-background: var(--coras-color-action);
-    --coras-button-primary-text-color: var(--coras-color-action-text);
-    --coras-button-primary-background-hover: var(--coras-color-action-hover);
-    --coras-button-primary-text-color-hover: var(--coras-color-action-text);
-    --coras-button-primary-background-active: var(--coras-color-action-active);
-    --coras-button-primary-text-color-active: var(--coras-color-action-text);
-    --coras-input-field-background-color: var(--coras-color-background);
-    --coras-basket-accent-color: var(--coras-brand-secondary);
-  }
-}
-
-@layer coras.components {
-  /* SDK-owned query container: embedded pages respond to the container width,
-     never the viewport (P-062). Components query `@container coras-page`. */
-  :where([data-coras-root]) {
-    container: coras-page / inline-size;
-    max-width: 100%;
-    /* The page background is opt-in: transparent by default so the embed adopts
-       the host page's background, and painted only when the brand sets a
-       background (the theme/override paths mirror it onto --coras-page-background,
-       which is intentionally undefined here). The text colour always follows the
-       brand; chrome paints its own background on top. */
-    background-color: var(--coras-page-background, transparent);
-    color: var(--coras-base-text-color);
-  }
-  /* The SDK-created page element is the root's only child. Make it block-level
-     so it fills the container: custom elements default to `display: inline`,
-     whose `clientWidth` is 0, which forces width-aware layouts into mobile.
-     The body icon colour is set here as an inherited `fill`: content icons pick
-     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */
-  :where([data-coras-root]) > * {
-    display: block;
-    fill: var(--coras-color-icon);
-  }
-}