@zitadel/components 0.1.0-alpha.10 → 0.1.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/atoms/index.mjs +1 -1
  2. package/dist/{atoms-BaayzEsr.mjs → atoms-BHSt5lSe.mjs} +2 -2
  3. package/dist/{atoms-BaayzEsr.mjs.map → atoms-BHSt5lSe.mjs.map} +1 -1
  4. package/dist/{index-DB_JTtln.d.mts → index-Bv62se8F.d.mts} +8 -4
  5. package/dist/{index-DB_JTtln.d.mts.map → index-Bv62se8F.d.mts.map} +1 -1
  6. package/dist/{index-EJengPPu.d.mts → index-EC-BnGsx.d.mts} +3 -3
  7. package/dist/{index-EJengPPu.d.mts.map → index-EC-BnGsx.d.mts.map} +1 -1
  8. package/dist/index.d.mts +2 -2
  9. package/dist/index.mjs +3 -3
  10. package/dist/manifests.mjs +1 -1
  11. package/dist/orchestrator/index.d.mts +1 -1
  12. package/dist/orchestrator/index.mjs +1 -1
  13. package/dist/{orchestrator-BEvS2wA_.mjs → orchestrator-BeTmVk54.mjs} +54 -23
  14. package/dist/orchestrator-BeTmVk54.mjs.map +1 -0
  15. package/dist/standalone.mjs +54 -23
  16. package/dist/tokens/index.d.mts +1 -1
  17. package/dist/tokens/index.mjs +1 -1
  18. package/dist/{tokens-BQ_augxi.mjs → tokens-C0j4iCrs.mjs} +4 -4
  19. package/dist/tokens-C0j4iCrs.mjs.map +1 -0
  20. package/package.json +3 -3
  21. package/dist/orchestrator-BEvS2wA_.mjs.map +0 -1
  22. package/dist/tokens-BQ_augxi.mjs.map +0 -1
package/dist/standalone.mjs CHANGED
@@ -788,8 +788,8 @@ const tokens = {
788
788
  "xl": "1.5rem"
789
789
  },
790
790
  "font": { "family": {
791
- "sans": "\"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
792
- "heading": "\"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
791
+ "sans": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
792
+ "heading": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
793
793
  "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
794
794
  } },
795
795
  "motion": {
@@ -944,7 +944,7 @@ const cssVars = {
944
944
  "page": "var(--zl-container-page)"
945
945
  }
946
946
  };
947
- const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n Source: src/generated/figma.tokens.json + src/overrides.ts.\n Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n --zl-color-surface-default-black: #0f0f11;\n --zl-color-surface-default-white: #f4f4f6;\n --zl-color-surface-default-primary-gray: #252528;\n --zl-color-surface-default-secondary-gray: #37373a;\n --zl-color-text-primary-white: #f4f4f6;\n --zl-color-text-secondary-gray: #bfbfcf;\n --zl-color-text-button-default: #0f0f11;\n --zl-color-text-button-invert: #f4f4f6;\n --zl-color-text-disabled: #686883;\n --zl-color-text-error: #ea4f70;\n --zl-color-text-success: #33a779;\n --zl-color-text-subtitle-pink: #f48aa0;\n --zl-color-text-subtitle-purple: #bba5e4;\n --zl-color-text-subtitle-gray: #bfbfcf;\n --zl-color-text-subtitle-orange: #f25543;\n --zl-color-icon-default-black: #0f0f11;\n --zl-color-icon-default-white: #f4f4f6;\n --zl-color-icon-default-gray: #bfbfcf;\n --zl-color-icon-default-pink: #f48aa0;\n --zl-color-icon-default-purple: #bba5e4;\n --zl-color-icon-default-orange: #f25543;\n --zl-color-icon-disabled: #686883;\n --zl-color-icon-error: #ea4f70;\n --zl-color-icon-success: #33a779;\n --zl-color-border-default-black: #252528;\n --zl-color-border-default-white: #f4f4f6;\n --zl-color-border-default-gray-100: #37373a;\n --zl-color-border-default-gray-200: #484a57;\n --zl-color-border-default-gray-300: #686883;\n --zl-color-border-default-gray-400: #82829c;\n --zl-color-border-error: #ea4f70;\n --zl-color-border-success: #33a779;\n --zl-color-gray-50: #0f0f11;\n --zl-color-gray-75: #252528;\n --zl-color-gray-100: #37373a;\n --zl-color-gray-200: #484a57;\n --zl-color-gray-300: #686883;\n --zl-color-gray-400: #82829c;\n --zl-color-gray-500: #9e9eb2;\n --zl-color-gray-600: #cfcfde;\n --zl-color-gray-700: #bfbfcf;\n --zl-color-gray-800: #e1e1e7;\n --zl-color-gray-900: #f4f4f6;\n --zl-spacing-01: 0.25rem;\n --zl-spacing-02: 0.5rem;\n --zl-spacing-03: 1rem;\n --zl-spacing-04: 1.5rem;\n --zl-spacing-05: 2rem;\n --zl-spacing-06: 1.5rem;\n --zl-spacing-07: 2.5rem;\n --zl-spacing-08: 3rem;\n --zl-spacing-09: 3.5rem;\n --zl-spacing-10: 4rem;\n --zl-spacing-11: 5rem;\n --zl-spacing-12: 5.5rem;\n --zl-spacing-13: 6rem;\n --zl-spacing-14: 6.5rem;\n --zl-spacing-15: 7rem;\n --zl-spacing-16: 7.5rem;\n --zl-radius-xs: 0.25rem;\n --zl-radius-s: 0.5rem;\n --zl-radius-m: 0.75rem;\n --zl-radius-l: 1rem;\n --zl-radius-xl: 1.5rem;\n --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --zl-duration-instant: 0ms;\n --zl-duration-fast: 120ms;\n --zl-duration-base: 200ms;\n --zl-duration-slow: 320ms;\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n --zl-focus-width: 2px;\n --zl-focus-offset: 2px;\n --zl-focus-color: #f4f4f6;\n --zl-breakpoint-xs: 26.5625rem;\n --zl-breakpoint-sm: 40rem;\n --zl-breakpoint-md: 48rem;\n --zl-breakpoint-lg: 64rem;\n --zl-breakpoint-xl: 80rem;\n --zl-breakpoint-2xl: 96rem;\n --zl-breakpoint-3xl: 120rem;\n --zl-breakpoint-4xl: 160rem;\n --zl-container-auth-card: 24rem;\n --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n /* Reserved. Light mode lands when the Figma design system publishes\n a light variable mode; the next sync will populate this block. */\n}\n";
947
+ const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n Source: src/generated/figma.tokens.json + src/overrides.ts.\n Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n --zl-color-surface-default-black: #0f0f11;\n --zl-color-surface-default-white: #f4f4f6;\n --zl-color-surface-default-primary-gray: #252528;\n --zl-color-surface-default-secondary-gray: #37373a;\n --zl-color-text-primary-white: #f4f4f6;\n --zl-color-text-secondary-gray: #bfbfcf;\n --zl-color-text-button-default: #0f0f11;\n --zl-color-text-button-invert: #f4f4f6;\n --zl-color-text-disabled: #686883;\n --zl-color-text-error: #ea4f70;\n --zl-color-text-success: #33a779;\n --zl-color-text-subtitle-pink: #f48aa0;\n --zl-color-text-subtitle-purple: #bba5e4;\n --zl-color-text-subtitle-gray: #bfbfcf;\n --zl-color-text-subtitle-orange: #f25543;\n --zl-color-icon-default-black: #0f0f11;\n --zl-color-icon-default-white: #f4f4f6;\n --zl-color-icon-default-gray: #bfbfcf;\n --zl-color-icon-default-pink: #f48aa0;\n --zl-color-icon-default-purple: #bba5e4;\n --zl-color-icon-default-orange: #f25543;\n --zl-color-icon-disabled: #686883;\n --zl-color-icon-error: #ea4f70;\n --zl-color-icon-success: #33a779;\n --zl-color-border-default-black: #252528;\n --zl-color-border-default-white: #f4f4f6;\n --zl-color-border-default-gray-100: #37373a;\n --zl-color-border-default-gray-200: #484a57;\n --zl-color-border-default-gray-300: #686883;\n --zl-color-border-default-gray-400: #82829c;\n --zl-color-border-error: #ea4f70;\n --zl-color-border-success: #33a779;\n --zl-color-gray-50: #0f0f11;\n --zl-color-gray-75: #252528;\n --zl-color-gray-100: #37373a;\n --zl-color-gray-200: #484a57;\n --zl-color-gray-300: #686883;\n --zl-color-gray-400: #82829c;\n --zl-color-gray-500: #9e9eb2;\n --zl-color-gray-600: #cfcfde;\n --zl-color-gray-700: #bfbfcf;\n --zl-color-gray-800: #e1e1e7;\n --zl-color-gray-900: #f4f4f6;\n --zl-spacing-01: 0.25rem;\n --zl-spacing-02: 0.5rem;\n --zl-spacing-03: 1rem;\n --zl-spacing-04: 1.5rem;\n --zl-spacing-05: 2rem;\n --zl-spacing-06: 1.5rem;\n --zl-spacing-07: 2.5rem;\n --zl-spacing-08: 3rem;\n --zl-spacing-09: 3.5rem;\n --zl-spacing-10: 4rem;\n --zl-spacing-11: 5rem;\n --zl-spacing-12: 5.5rem;\n --zl-spacing-13: 6rem;\n --zl-spacing-14: 6.5rem;\n --zl-spacing-15: 7rem;\n --zl-spacing-16: 7.5rem;\n --zl-radius-xs: 0.25rem;\n --zl-radius-s: 0.5rem;\n --zl-radius-m: 0.75rem;\n --zl-radius-l: 1rem;\n --zl-radius-xl: 1.5rem;\n --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --zl-duration-instant: 0ms;\n --zl-duration-fast: 120ms;\n --zl-duration-base: 200ms;\n --zl-duration-slow: 320ms;\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n --zl-focus-width: 2px;\n --zl-focus-offset: 2px;\n --zl-focus-color: #f4f4f6;\n --zl-breakpoint-xs: 26.5625rem;\n --zl-breakpoint-sm: 40rem;\n --zl-breakpoint-md: 48rem;\n --zl-breakpoint-lg: 64rem;\n --zl-breakpoint-xl: 80rem;\n --zl-breakpoint-2xl: 96rem;\n --zl-breakpoint-3xl: 120rem;\n --zl-breakpoint-4xl: 160rem;\n --zl-container-auth-card: 24rem;\n --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n /* Reserved. Light mode lands when the Figma design system publishes\n a light variable mode; the next sync will populate this block. */\n}\n";
948
948
  //#endregion
949
949
  //#region src/styles/tokens.ts
950
950
  function wrap(node) {
@@ -3020,7 +3020,7 @@ const getGetTokenUrl = () => {
3020
3020
  return `${getProxyPath()}/auth/token`;
3021
3021
  };
3022
3022
  /**
3023
- * @summary Get accesstoken
3023
+ * @summary Get access token
3024
3024
  */
3025
3025
  const getToken = async (getTokenBody, options) => {
3026
3026
  const formUrlEncoded = new URLSearchParams();
@@ -4225,34 +4225,63 @@ function sanitiseUrl(value, field, issues) {
4225
4225
  //#endregion
4226
4226
  //#region src/orchestrator/font-loader.ts
4227
4227
  /**
4228
- * Inject `branding.font_url` as `<link rel="stylesheet">` into the host
4229
- * document's `<head>`. Per `docs/design/branding/templates.md`:
4228
+ * Document-level font stylesheet injection for `<zitadel-login>`.
4230
4229
  *
4231
- * "The `font_url` stylesheet is injected by the orchestrator; the template
4232
- * does not emit the `<link>` tag itself."
4230
+ * Two faces can be linked into the host document's `<head>`:
4233
4231
  *
4234
- * The link must live at document level, not inside the shadow root:
4235
- * browsers ignore `@font-face` rules declared in shadow-tree stylesheets,
4236
- * so a shadow-scoped link would never register the font faces and every
4237
- * branded font silently falls back to the system stack. `font-family`
4238
- * references inside the shadow tree resolve against document-level faces.
4232
+ * - The **design-system default** (`applyDefaultFont`) — the brand body face
4233
+ * (Arimo, named first in `--zl-font-family-sans`). The component ships this
4234
+ * so the auth screens render in the brand font out of the box, even when the
4235
+ * server returns no branding. This is the "default users can override" layer.
4236
+ * - The **tenant override** (`applyFontUrl`) — `branding.font_url`, resolved
4237
+ * server-side from the app → team → project branding hierarchy.
4239
4238
  *
4240
- * Idempotent: calling with the same URL is a no-op; calling with a new URL
4241
- * replaces the previous link. Calling with `null`/`undefined` removes any
4242
- * previously injected link.
4239
+ * Both must live at document level, not inside the shadow root: browsers ignore
4240
+ * `@font-face` rules declared in shadow-tree stylesheets, so a shadow-scoped
4241
+ * link would never register the font faces and every branded font silently
4242
+ * falls back to the system stack. `font-family` references inside the shadow
4243
+ * tree resolve against document-level faces.
4244
+ *
4245
+ * Both injectors are idempotent: calling with the same URL is a no-op; calling
4246
+ * with a new URL replaces the previous link; calling with `null`/`undefined`
4247
+ * removes any previously injected link.
4248
+ */
4249
+ const TENANT_LINK_ID = "zl-font-link";
4250
+ const DEFAULT_LINK_ID = "zl-default-font-link";
4251
+ /**
4252
+ * Design-system default brand font. Arimo is the Figma body face and leads the
4253
+ * `--zl-font-family-sans` stack; loading it here makes the unbranded auth UI
4254
+ * paint in the brand font instead of the system fallback. Tenants override it
4255
+ * with `branding.font_url`. Exported so a privacy- or offline-sensitive
4256
+ * deployment can self-host the same face and swap this single URL.
4257
+ */
4258
+ const DEFAULT_BRAND_FONT_HREF = "https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
4259
+ /**
4260
+ * Inject the tenant's `branding.font_url` stylesheet. Pass `null`/`undefined`
4261
+ * to remove it (e.g. when a flow resolves with no tenant font).
4243
4262
  */
4244
- const LINK_ID = "zl-font-link";
4245
4263
  function applyFontUrl(shadowRoot, fontUrl) {
4264
+ applyLinkedStylesheet(shadowRoot, TENANT_LINK_ID, fontUrl);
4265
+ }
4266
+ /**
4267
+ * Inject the design-system default font stylesheet. Defaults to
4268
+ * {@link DEFAULT_BRAND_FONT_HREF}; pass `null` to remove it (the orchestrator
4269
+ * does this when a tenant `font_url` takes over, to avoid a redundant request).
4270
+ */
4271
+ function applyDefaultFont(shadowRoot, href = DEFAULT_BRAND_FONT_HREF) {
4272
+ applyLinkedStylesheet(shadowRoot, DEFAULT_LINK_ID, href);
4273
+ }
4274
+ function applyLinkedStylesheet(shadowRoot, linkId, href) {
4246
4275
  const ownerDocument = shadowRoot.ownerDocument ?? document;
4247
- const existing = ownerDocument.head.querySelector(`link#${LINK_ID}`);
4248
- if (!fontUrl) {
4276
+ const existing = ownerDocument.head.querySelector(`link#${linkId}`);
4277
+ if (!href) {
4249
4278
  existing?.remove();
4250
4279
  return;
4251
4280
  }
4252
4281
  const link = existing ?? ownerDocument.createElement("link");
4253
- link.id = LINK_ID;
4282
+ link.id = linkId;
4254
4283
  link.rel = "stylesheet";
4255
- if (link.href !== fontUrl) link.href = fontUrl;
4284
+ if (link.href !== href) link.href = href;
4256
4285
  if (!existing) ownerDocument.head.appendChild(link);
4257
4286
  }
4258
4287
  //#endregion
@@ -11069,7 +11098,7 @@ function createSanitiser() {
11069
11098
  }
11070
11099
  //#endregion
11071
11100
  //#region src/orchestrator/templates/layout-chrome.css?inline
11072
- var layout_chrome_default = ":host {\n background: var(--zl-color-surface-default-black, #0f0f11);\n min-height: 100%;\n color: var(--zl-color-text-primary-white, #f4f4f6);\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n display: block;\n}\n\n.zl-mount {\n background: inherit;\n min-height: 100vh;\n color: inherit;\n flex-direction: column;\n display: flex;\n}\n\n.zl-mount > zl-page-shell, .zl-mount > [data-zl-template-root] {\n flex: auto;\n}\n\n.zl-attribution {\n background: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.zl-attribution[hidden] {\n display: none;\n}\n\n.zl-card-title {\n font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n letter-spacing: -.02em;\n color: var(--zl-color-text-primary-white, #f4f4f6);\n text-align: left;\n margin: 0;\n font-size: 2rem;\n font-weight: 400;\n line-height: 2.5rem;\n}\n\n.zl-card-subtitle {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-text-primary-white, #f4f4f6);\n margin: 0;\n font-size: .875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n\n.zl-card-nav {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-text-primary-white, #f4f4f6);\n text-align: left;\n margin: 0;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n}\n\n.zl-card-nav__link {\n font: inherit;\n line-height: inherit;\n color: var(--zl-color-icon-default-purple, #bba5e4);\n cursor: pointer;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n text-decoration: none;\n display: inline;\n}\n\n.zl-card-nav__link:hover {\n text-decoration: underline;\n}\n\n.zl-card-nav__link:focus-visible {\n outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-card-forgot {\n text-align: left;\n margin: 0;\n}\n\n.zl-card-forgot__link {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-icon-default-purple, #bba5e4);\n cursor: pointer;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n text-decoration: none;\n display: inline;\n}\n\n.zl-card-forgot__link:hover {\n text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n outline-offset: var(--zl-focus-offset, 2px);\n}\n";
11101
+ var layout_chrome_default = ":host {\n background: var(--zl-color-surface-default-black, #0f0f11);\n min-height: 100%;\n color: var(--zl-color-text-primary-white, #f4f4f6);\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n display: block;\n}\n\n.zl-mount {\n background: inherit;\n min-height: 100vh;\n color: inherit;\n flex-direction: column;\n display: flex;\n}\n\n.zl-mount > zl-page-shell, .zl-mount > [data-zl-template-root] {\n flex: auto;\n}\n\n.zl-attribution {\n background: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.zl-attribution[hidden] {\n display: none;\n}\n\n.zl-card-title {\n font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n letter-spacing: -.02em;\n color: var(--zl-color-text-primary-white, #f4f4f6);\n text-align: left;\n margin: 0;\n font-size: 2rem;\n font-weight: 700;\n line-height: 2.5rem;\n}\n\n.zl-card-subtitle {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-text-primary-white, #f4f4f6);\n margin: 0;\n font-size: .875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n\n.zl-card-nav {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-text-primary-white, #f4f4f6);\n text-align: left;\n margin: 0;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n}\n\n.zl-card-nav__link {\n font: inherit;\n line-height: inherit;\n color: var(--zl-color-icon-default-purple, #bba5e4);\n cursor: pointer;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n text-decoration: none;\n display: inline;\n}\n\n.zl-card-nav__link:hover {\n text-decoration: underline;\n}\n\n.zl-card-nav__link:focus-visible {\n outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-card-forgot {\n text-align: left;\n margin: 0;\n}\n\n.zl-card-forgot__link {\n font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n color: var(--zl-color-icon-default-purple, #bba5e4);\n cursor: pointer;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n text-decoration: none;\n display: inline;\n}\n\n.zl-card-forgot__link:hover {\n text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n outline-offset: var(--zl-focus-offset, 2px);\n}\n";
11073
11102
  //#endregion
11074
11103
  //#region src/orchestrator/theme-controller.ts
11075
11104
  const DARK_QUERY = "(prefers-color-scheme: dark)";
@@ -11297,7 +11326,9 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
11297
11326
  if (root) {
11298
11327
  applyBaseTokens(root);
11299
11328
  applyBrandingTokens(root, this.branding, this.themeController.theme);
11300
- applyFontUrl(root, this.branding?.font_url ?? null);
11329
+ const tenantFontUrl = this.branding?.font_url ?? null;
11330
+ applyDefaultFont(root, tenantFontUrl ? null : void 0);
11331
+ applyFontUrl(root, tenantFontUrl);
11301
11332
  }
11302
11333
  this.dataset.theme = this.themeController.theme;
11303
11334
  this.toggleAttribute("data-theme-dark", this.themeController.theme === "dark");
package/dist/tokens/index.d.mts CHANGED
@@ -1,2 +1,2 @@
1
- import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-EJengPPu.mjs";
1
+ import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-EC-BnGsx.mjs";
2
2
  export { CssVars, Tokens, cssVars, tokens };
package/dist/tokens/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { n as tokens, t as cssVars } from "../tokens-BQ_augxi.mjs";
1
+ import { n as tokens, t as cssVars } from "../tokens-C0j4iCrs.mjs";
2
2
  export { cssVars, tokens };
package/dist/{tokens-BQ_augxi.mjs → tokens-C0j4iCrs.mjs} RENAMED
@@ -81,8 +81,8 @@ const tokens = {
81
81
  "xl": "1.5rem"
82
82
  },
83
83
  "font": { "family": {
84
- "sans": "\"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
85
- "heading": "\"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
84
+ "sans": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
85
+ "heading": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
86
86
  "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
87
87
  } },
88
88
  "motion": {
@@ -237,8 +237,8 @@ const cssVars = {
237
237
  "page": "var(--zl-container-page)"
238
238
  }
239
239
  };
240
- const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n Source: src/generated/figma.tokens.json + src/overrides.ts.\n Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n --zl-color-surface-default-black: #0f0f11;\n --zl-color-surface-default-white: #f4f4f6;\n --zl-color-surface-default-primary-gray: #252528;\n --zl-color-surface-default-secondary-gray: #37373a;\n --zl-color-text-primary-white: #f4f4f6;\n --zl-color-text-secondary-gray: #bfbfcf;\n --zl-color-text-button-default: #0f0f11;\n --zl-color-text-button-invert: #f4f4f6;\n --zl-color-text-disabled: #686883;\n --zl-color-text-error: #ea4f70;\n --zl-color-text-success: #33a779;\n --zl-color-text-subtitle-pink: #f48aa0;\n --zl-color-text-subtitle-purple: #bba5e4;\n --zl-color-text-subtitle-gray: #bfbfcf;\n --zl-color-text-subtitle-orange: #f25543;\n --zl-color-icon-default-black: #0f0f11;\n --zl-color-icon-default-white: #f4f4f6;\n --zl-color-icon-default-gray: #bfbfcf;\n --zl-color-icon-default-pink: #f48aa0;\n --zl-color-icon-default-purple: #bba5e4;\n --zl-color-icon-default-orange: #f25543;\n --zl-color-icon-disabled: #686883;\n --zl-color-icon-error: #ea4f70;\n --zl-color-icon-success: #33a779;\n --zl-color-border-default-black: #252528;\n --zl-color-border-default-white: #f4f4f6;\n --zl-color-border-default-gray-100: #37373a;\n --zl-color-border-default-gray-200: #484a57;\n --zl-color-border-default-gray-300: #686883;\n --zl-color-border-default-gray-400: #82829c;\n --zl-color-border-error: #ea4f70;\n --zl-color-border-success: #33a779;\n --zl-color-gray-50: #0f0f11;\n --zl-color-gray-75: #252528;\n --zl-color-gray-100: #37373a;\n --zl-color-gray-200: #484a57;\n --zl-color-gray-300: #686883;\n --zl-color-gray-400: #82829c;\n --zl-color-gray-500: #9e9eb2;\n --zl-color-gray-600: #cfcfde;\n --zl-color-gray-700: #bfbfcf;\n --zl-color-gray-800: #e1e1e7;\n --zl-color-gray-900: #f4f4f6;\n --zl-spacing-01: 0.25rem;\n --zl-spacing-02: 0.5rem;\n --zl-spacing-03: 1rem;\n --zl-spacing-04: 1.5rem;\n --zl-spacing-05: 2rem;\n --zl-spacing-06: 1.5rem;\n --zl-spacing-07: 2.5rem;\n --zl-spacing-08: 3rem;\n --zl-spacing-09: 3.5rem;\n --zl-spacing-10: 4rem;\n --zl-spacing-11: 5rem;\n --zl-spacing-12: 5.5rem;\n --zl-spacing-13: 6rem;\n --zl-spacing-14: 6.5rem;\n --zl-spacing-15: 7rem;\n --zl-spacing-16: 7.5rem;\n --zl-radius-xs: 0.25rem;\n --zl-radius-s: 0.5rem;\n --zl-radius-m: 0.75rem;\n --zl-radius-l: 1rem;\n --zl-radius-xl: 1.5rem;\n --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --zl-duration-instant: 0ms;\n --zl-duration-fast: 120ms;\n --zl-duration-base: 200ms;\n --zl-duration-slow: 320ms;\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n --zl-focus-width: 2px;\n --zl-focus-offset: 2px;\n --zl-focus-color: #f4f4f6;\n --zl-breakpoint-xs: 26.5625rem;\n --zl-breakpoint-sm: 40rem;\n --zl-breakpoint-md: 48rem;\n --zl-breakpoint-lg: 64rem;\n --zl-breakpoint-xl: 80rem;\n --zl-breakpoint-2xl: 96rem;\n --zl-breakpoint-3xl: 120rem;\n --zl-breakpoint-4xl: 160rem;\n --zl-container-auth-card: 24rem;\n --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n /* Reserved. Light mode lands when the Figma design system publishes\n a light variable mode; the next sync will populate this block. */\n}\n";
240
+ const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n Source: src/generated/figma.tokens.json + src/overrides.ts.\n Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n --zl-color-surface-default-black: #0f0f11;\n --zl-color-surface-default-white: #f4f4f6;\n --zl-color-surface-default-primary-gray: #252528;\n --zl-color-surface-default-secondary-gray: #37373a;\n --zl-color-text-primary-white: #f4f4f6;\n --zl-color-text-secondary-gray: #bfbfcf;\n --zl-color-text-button-default: #0f0f11;\n --zl-color-text-button-invert: #f4f4f6;\n --zl-color-text-disabled: #686883;\n --zl-color-text-error: #ea4f70;\n --zl-color-text-success: #33a779;\n --zl-color-text-subtitle-pink: #f48aa0;\n --zl-color-text-subtitle-purple: #bba5e4;\n --zl-color-text-subtitle-gray: #bfbfcf;\n --zl-color-text-subtitle-orange: #f25543;\n --zl-color-icon-default-black: #0f0f11;\n --zl-color-icon-default-white: #f4f4f6;\n --zl-color-icon-default-gray: #bfbfcf;\n --zl-color-icon-default-pink: #f48aa0;\n --zl-color-icon-default-purple: #bba5e4;\n --zl-color-icon-default-orange: #f25543;\n --zl-color-icon-disabled: #686883;\n --zl-color-icon-error: #ea4f70;\n --zl-color-icon-success: #33a779;\n --zl-color-border-default-black: #252528;\n --zl-color-border-default-white: #f4f4f6;\n --zl-color-border-default-gray-100: #37373a;\n --zl-color-border-default-gray-200: #484a57;\n --zl-color-border-default-gray-300: #686883;\n --zl-color-border-default-gray-400: #82829c;\n --zl-color-border-error: #ea4f70;\n --zl-color-border-success: #33a779;\n --zl-color-gray-50: #0f0f11;\n --zl-color-gray-75: #252528;\n --zl-color-gray-100: #37373a;\n --zl-color-gray-200: #484a57;\n --zl-color-gray-300: #686883;\n --zl-color-gray-400: #82829c;\n --zl-color-gray-500: #9e9eb2;\n --zl-color-gray-600: #cfcfde;\n --zl-color-gray-700: #bfbfcf;\n --zl-color-gray-800: #e1e1e7;\n --zl-color-gray-900: #f4f4f6;\n --zl-spacing-01: 0.25rem;\n --zl-spacing-02: 0.5rem;\n --zl-spacing-03: 1rem;\n --zl-spacing-04: 1.5rem;\n --zl-spacing-05: 2rem;\n --zl-spacing-06: 1.5rem;\n --zl-spacing-07: 2.5rem;\n --zl-spacing-08: 3rem;\n --zl-spacing-09: 3.5rem;\n --zl-spacing-10: 4rem;\n --zl-spacing-11: 5rem;\n --zl-spacing-12: 5.5rem;\n --zl-spacing-13: 6rem;\n --zl-spacing-14: 6.5rem;\n --zl-spacing-15: 7rem;\n --zl-spacing-16: 7.5rem;\n --zl-radius-xs: 0.25rem;\n --zl-radius-s: 0.5rem;\n --zl-radius-m: 0.75rem;\n --zl-radius-l: 1rem;\n --zl-radius-xl: 1.5rem;\n --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --zl-duration-instant: 0ms;\n --zl-duration-fast: 120ms;\n --zl-duration-base: 200ms;\n --zl-duration-slow: 320ms;\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n --zl-focus-width: 2px;\n --zl-focus-offset: 2px;\n --zl-focus-color: #f4f4f6;\n --zl-breakpoint-xs: 26.5625rem;\n --zl-breakpoint-sm: 40rem;\n --zl-breakpoint-md: 48rem;\n --zl-breakpoint-lg: 64rem;\n --zl-breakpoint-xl: 80rem;\n --zl-breakpoint-2xl: 96rem;\n --zl-breakpoint-3xl: 120rem;\n --zl-breakpoint-4xl: 160rem;\n --zl-container-auth-card: 24rem;\n --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n /* Reserved. Light mode lands when the Figma design system publishes\n a light variable mode; the next sync will populate this block. */\n}\n";
241
241
  //#endregion
242
242
  export { tokens as n, tokensCss as r, cssVars as t };
243
243
 
244
- //# sourceMappingURL=tokens-BQ_augxi.mjs.map
244
+ //# sourceMappingURL=tokens-C0j4iCrs.mjs.map
package/dist/tokens-C0j4iCrs.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens-C0j4iCrs.mjs","names":[],"sources":["../../design-tokens/dist/tokens.mjs"],"sourcesContent":["//#region src/generated/tokens.ts\nconst tokens = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultPrimaryGray\": \"#252528\",\n\t\t\t\"defaultSecondaryGray\": \"#37373a\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"#f4f4f6\",\n\t\t\t\"secondaryGray\": \"#bfbfcf\",\n\t\t\t\"buttonDefault\": \"#0f0f11\",\n\t\t\t\"buttonInvert\": \"#f4f4f6\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\",\n\t\t\t\"subtitlePink\": \"#f48aa0\",\n\t\t\t\"subtitlePurple\": \"#bba5e4\",\n\t\t\t\"subtitleGray\": \"#bfbfcf\",\n\t\t\t\"subtitleOrange\": \"#f25543\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray\": \"#bfbfcf\",\n\t\t\t\"defaultPink\": \"#f48aa0\",\n\t\t\t\"defaultPurple\": \"#bba5e4\",\n\t\t\t\"defaultOrange\": \"#f25543\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"#252528\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray100\": \"#37373a\",\n\t\t\t\"defaultGray200\": \"#484a57\",\n\t\t\t\"defaultGray300\": \"#686883\",\n\t\t\t\"defaultGray400\": \"#82829c\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"#0f0f11\",\n\t\t\t\"75\": \"#252528\",\n\t\t\t\"100\": \"#37373a\",\n\t\t\t\"200\": \"#484a57\",\n\t\t\t\"300\": \"#686883\",\n\t\t\t\"400\": \"#82829c\",\n\t\t\t\"500\": \"#9e9eb2\",\n\t\t\t\"600\": \"#cfcfde\",\n\t\t\t\"700\": \"#bfbfcf\",\n\t\t\t\"800\": \"#e1e1e7\",\n\t\t\t\"900\": \"#f4f4f6\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"4rem\",\n\t\t\"11\": \"5rem\",\n\t\t\"12\": \"5.5rem\",\n\t\t\"13\": \"6rem\",\n\t\t\"14\": \"6.5rem\",\n\t\t\"15\": \"7rem\",\n\t\t\"16\": \"7.5rem\",\n\t\t\"01\": \"0.25rem\",\n\t\t\"02\": \"0.5rem\",\n\t\t\"03\": \"1rem\",\n\t\t\"04\": \"1.5rem\",\n\t\t\"05\": \"2rem\",\n\t\t\"06\": \"1.5rem\",\n\t\t\"07\": \"2.5rem\",\n\t\t\"08\": \"3rem\",\n\t\t\"09\": \"3.5rem\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"0.25rem\",\n\t\t\"s\": \"0.5rem\",\n\t\t\"m\": \"0.75rem\",\n\t\t\"l\": \"1rem\",\n\t\t\"xl\": \"1.5rem\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"heading\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"mono\": \"ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"0ms\",\n\t\t\t\"fast\": \"120ms\",\n\t\t\t\"base\": \"200ms\",\n\t\t\t\"slow\": \"320ms\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"cubic-bezier(0.2, 0, 0, 1)\",\n\t\t\t\"decelerate\": \"cubic-bezier(0, 0, 0, 1)\",\n\t\t\t\"accelerate\": \"cubic-bezier(0.3, 0, 1, 1)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"2px\",\n\t\t\"offset\": \"2px\",\n\t\t\"color\": \"#f4f4f6\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"26.5625rem\",\n\t\t\"sm\": \"40rem\",\n\t\t\"md\": \"48rem\",\n\t\t\"lg\": \"64rem\",\n\t\t\"xl\": \"80rem\",\n\t\t\"2xl\": \"96rem\",\n\t\t\"3xl\": \"120rem\",\n\t\t\"4xl\": \"160rem\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"24rem\",\n\t\t\"page\": \"80rem\"\n\t}\n};\nconst cssVars = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-surface-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-surface-default-white)\",\n\t\t\t\"defaultPrimaryGray\": \"var(--zl-color-surface-default-primary-gray)\",\n\t\t\t\"defaultSecondaryGray\": \"var(--zl-color-surface-default-secondary-gray)\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"var(--zl-color-text-primary-white)\",\n\t\t\t\"secondaryGray\": \"var(--zl-color-text-secondary-gray)\",\n\t\t\t\"buttonDefault\": \"var(--zl-color-text-button-default)\",\n\t\t\t\"buttonInvert\": \"var(--zl-color-text-button-invert)\",\n\t\t\t\"disabled\": \"var(--zl-color-text-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-text-error)\",\n\t\t\t\"success\": \"var(--zl-color-text-success)\",\n\t\t\t\"subtitlePink\": \"var(--zl-color-text-subtitle-pink)\",\n\t\t\t\"subtitlePurple\": \"var(--zl-color-text-subtitle-purple)\",\n\t\t\t\"subtitleGray\": \"var(--zl-color-text-subtitle-gray)\",\n\t\t\t\"subtitleOrange\": \"var(--zl-color-text-subtitle-orange)\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-icon-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-icon-default-white)\",\n\t\t\t\"defaultGray\": \"var(--zl-color-icon-default-gray)\",\n\t\t\t\"defaultPink\": \"var(--zl-color-icon-default-pink)\",\n\t\t\t\"defaultPurple\": \"var(--zl-color-icon-default-purple)\",\n\t\t\t\"defaultOrange\": \"var(--zl-color-icon-default-orange)\",\n\t\t\t\"disabled\": \"var(--zl-color-icon-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-icon-error)\",\n\t\t\t\"success\": \"var(--zl-color-icon-success)\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-border-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-border-default-white)\",\n\t\t\t\"defaultGray100\": \"var(--zl-color-border-default-gray-100)\",\n\t\t\t\"defaultGray200\": \"var(--zl-color-border-default-gray-200)\",\n\t\t\t\"defaultGray300\": \"var(--zl-color-border-default-gray-300)\",\n\t\t\t\"defaultGray400\": \"var(--zl-color-border-default-gray-400)\",\n\t\t\t\"error\": \"var(--zl-color-border-error)\",\n\t\t\t\"success\": \"var(--zl-color-border-success)\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"var(--zl-color-gray-50)\",\n\t\t\t\"75\": \"var(--zl-color-gray-75)\",\n\t\t\t\"100\": \"var(--zl-color-gray-100)\",\n\t\t\t\"200\": \"var(--zl-color-gray-200)\",\n\t\t\t\"300\": \"var(--zl-color-gray-300)\",\n\t\t\t\"400\": \"var(--zl-color-gray-400)\",\n\t\t\t\"500\": \"var(--zl-color-gray-500)\",\n\t\t\t\"600\": \"var(--zl-color-gray-600)\",\n\t\t\t\"700\": \"var(--zl-color-gray-700)\",\n\t\t\t\"800\": \"var(--zl-color-gray-800)\",\n\t\t\t\"900\": \"var(--zl-color-gray-900)\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"var(--zl-spacing-10)\",\n\t\t\"11\": \"var(--zl-spacing-11)\",\n\t\t\"12\": \"var(--zl-spacing-12)\",\n\t\t\"13\": \"var(--zl-spacing-13)\",\n\t\t\"14\": \"var(--zl-spacing-14)\",\n\t\t\"15\": \"var(--zl-spacing-15)\",\n\t\t\"16\": \"var(--zl-spacing-16)\",\n\t\t\"01\": \"var(--zl-spacing-01)\",\n\t\t\"02\": \"var(--zl-spacing-02)\",\n\t\t\"03\": \"var(--zl-spacing-03)\",\n\t\t\"04\": \"var(--zl-spacing-04)\",\n\t\t\"05\": \"var(--zl-spacing-05)\",\n\t\t\"06\": \"var(--zl-spacing-06)\",\n\t\t\"07\": \"var(--zl-spacing-07)\",\n\t\t\"08\": \"var(--zl-spacing-08)\",\n\t\t\"09\": \"var(--zl-spacing-09)\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"var(--zl-radius-xs)\",\n\t\t\"s\": \"var(--zl-radius-s)\",\n\t\t\"m\": \"var(--zl-radius-m)\",\n\t\t\"l\": \"var(--zl-radius-l)\",\n\t\t\"xl\": \"var(--zl-radius-xl)\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"var(--zl-font-family-sans)\",\n\t\t\"heading\": \"var(--zl-font-family-heading)\",\n\t\t\"mono\": \"var(--zl-font-family-mono)\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"var(--zl-duration-instant)\",\n\t\t\t\"fast\": \"var(--zl-duration-fast)\",\n\t\t\t\"base\": \"var(--zl-duration-base)\",\n\t\t\t\"slow\": \"var(--zl-duration-slow)\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"var(--zl-easing-standard)\",\n\t\t\t\"decelerate\": \"var(--zl-easing-decelerate)\",\n\t\t\t\"accelerate\": \"var(--zl-easing-accelerate)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"var(--zl-focus-width)\",\n\t\t\"offset\": \"var(--zl-focus-offset)\",\n\t\t\"color\": \"var(--zl-focus-color)\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"var(--zl-breakpoint-xs)\",\n\t\t\"sm\": \"var(--zl-breakpoint-sm)\",\n\t\t\"md\": \"var(--zl-breakpoint-md)\",\n\t\t\"lg\": \"var(--zl-breakpoint-lg)\",\n\t\t\"xl\": \"var(--zl-breakpoint-xl)\",\n\t\t\"2xl\": \"var(--zl-breakpoint-2xl)\",\n\t\t\"3xl\": \"var(--zl-breakpoint-3xl)\",\n\t\t\"4xl\": \"var(--zl-breakpoint-4xl)\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"var(--zl-container-auth-card)\",\n\t\t\"page\": \"var(--zl-container-page)\"\n\t}\n};\nconst tokensCss = \"/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\\n Source: src/generated/figma.tokens.json + src/overrides.ts.\\n Re-run: moon run design-tokens:generate */\\n\\n:root,\\n[data-theme=\\\"dark\\\"] {\\n --zl-color-surface-default-black: #0f0f11;\\n --zl-color-surface-default-white: #f4f4f6;\\n --zl-color-surface-default-primary-gray: #252528;\\n --zl-color-surface-default-secondary-gray: #37373a;\\n --zl-color-text-primary-white: #f4f4f6;\\n --zl-color-text-secondary-gray: #bfbfcf;\\n --zl-color-text-button-default: #0f0f11;\\n --zl-color-text-button-invert: #f4f4f6;\\n --zl-color-text-disabled: #686883;\\n --zl-color-text-error: #ea4f70;\\n --zl-color-text-success: #33a779;\\n --zl-color-text-subtitle-pink: #f48aa0;\\n --zl-color-text-subtitle-purple: #bba5e4;\\n --zl-color-text-subtitle-gray: #bfbfcf;\\n --zl-color-text-subtitle-orange: #f25543;\\n --zl-color-icon-default-black: #0f0f11;\\n --zl-color-icon-default-white: #f4f4f6;\\n --zl-color-icon-default-gray: #bfbfcf;\\n --zl-color-icon-default-pink: #f48aa0;\\n --zl-color-icon-default-purple: #bba5e4;\\n --zl-color-icon-default-orange: #f25543;\\n --zl-color-icon-disabled: #686883;\\n --zl-color-icon-error: #ea4f70;\\n --zl-color-icon-success: #33a779;\\n --zl-color-border-default-black: #252528;\\n --zl-color-border-default-white: #f4f4f6;\\n --zl-color-border-default-gray-100: #37373a;\\n --zl-color-border-default-gray-200: #484a57;\\n --zl-color-border-default-gray-300: #686883;\\n --zl-color-border-default-gray-400: #82829c;\\n --zl-color-border-error: #ea4f70;\\n --zl-color-border-success: #33a779;\\n --zl-color-gray-50: #0f0f11;\\n --zl-color-gray-75: #252528;\\n --zl-color-gray-100: #37373a;\\n --zl-color-gray-200: #484a57;\\n --zl-color-gray-300: #686883;\\n --zl-color-gray-400: #82829c;\\n --zl-color-gray-500: #9e9eb2;\\n --zl-color-gray-600: #cfcfde;\\n --zl-color-gray-700: #bfbfcf;\\n --zl-color-gray-800: #e1e1e7;\\n --zl-color-gray-900: #f4f4f6;\\n --zl-spacing-01: 0.25rem;\\n --zl-spacing-02: 0.5rem;\\n --zl-spacing-03: 1rem;\\n --zl-spacing-04: 1.5rem;\\n --zl-spacing-05: 2rem;\\n --zl-spacing-06: 1.5rem;\\n --zl-spacing-07: 2.5rem;\\n --zl-spacing-08: 3rem;\\n --zl-spacing-09: 3.5rem;\\n --zl-spacing-10: 4rem;\\n --zl-spacing-11: 5rem;\\n --zl-spacing-12: 5.5rem;\\n --zl-spacing-13: 6rem;\\n --zl-spacing-14: 6.5rem;\\n --zl-spacing-15: 7rem;\\n --zl-spacing-16: 7.5rem;\\n --zl-radius-xs: 0.25rem;\\n --zl-radius-s: 0.5rem;\\n --zl-radius-m: 0.75rem;\\n --zl-radius-l: 1rem;\\n --zl-radius-xl: 1.5rem;\\n --zl-font-family-sans: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n --zl-font-family-heading: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n --zl-duration-instant: 0ms;\\n --zl-duration-fast: 120ms;\\n --zl-duration-base: 200ms;\\n --zl-duration-slow: 320ms;\\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\\n --zl-focus-width: 2px;\\n --zl-focus-offset: 2px;\\n --zl-focus-color: #f4f4f6;\\n --zl-breakpoint-xs: 26.5625rem;\\n --zl-breakpoint-sm: 40rem;\\n --zl-breakpoint-md: 48rem;\\n --zl-breakpoint-lg: 64rem;\\n --zl-breakpoint-xl: 80rem;\\n --zl-breakpoint-2xl: 96rem;\\n --zl-breakpoint-3xl: 120rem;\\n --zl-breakpoint-4xl: 160rem;\\n --zl-container-auth-card: 24rem;\\n --zl-container-page: 80rem;\\n}\\n\\n[data-theme=\\\"light\\\"] {\\n /* Reserved. Light mode lands when the Figma design system publishes\\n a light variable mode; the next sync will populate this block. */\\n}\\n\";\n//#endregion\nexport { cssVars, tokens, tokensCss };\n\n//# sourceMappingURL=tokens.mjs.map"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zitadel/components",
3
- "version": "0.1.0-alpha.10",
3
+ "version": "0.1.0-alpha.11",
4
4
  "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
5
5
  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
6
6
  "bugs": {
@@ -70,9 +70,9 @@
70
70
  "lightningcss": "^1.30.1",
71
71
  "tsdown": "^0.21.10",
72
72
  "tslib": "^2.8.1",
73
- "@zitadel/api": "0.1.0-alpha.10",
74
- "@zitadel/design-tokens": "0.1.0-alpha.0",
75
73
  "@zitadel/api-mock": "0.0.0",
74
+ "@zitadel/api": "0.1.0-alpha.11",
75
+ "@zitadel/design-tokens": "0.1.0-alpha.0",
76
76
  "@zitadel/shared-component-styles": "0.0.0"
77
77
  },
78
78
  "scripts": {