@polyxd/react 0.2.2 → 0.3.0

package/themes/glass.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the glass pack. Do not edit. */
+
+[data-pxd-theme="glass"]:not([data-pxd-mode]),
+[data-pxd-theme="glass"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #e6ebf7;
+  --pxd-color-surface-subtle: rgba(255, 255, 255, 0.45);
+  --pxd-color-surface-raised: rgba(255, 255, 255, 0.65);
+  --pxd-color-surface-overlay: rgba(255, 255, 255, 0.82);
+  --pxd-color-surface-inverse: #101a33;
+  --pxd-color-scrim: rgba(16, 26, 51, 0.35);
+  --pxd-color-text-default: #0f172a;
+  --pxd-color-text-muted: #465063;
+  --pxd-color-text-inverse: #ffffff;
+  --pxd-color-text-link: #3552c9;
+  --pxd-color-border-default: rgba(255, 255, 255, 0.75);
+  --pxd-color-border-strong: #68758f;
+  --pxd-color-border-focus: #3552c9;
+  --pxd-color-action-primary-background: #3552c9;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: rgba(255, 255, 255, 0.82);
+  --pxd-color-action-secondary-foreground: #0f172a;
+  --pxd-color-action-secondary-border: rgba(255, 255, 255, 0.75);
+  --pxd-color-action-danger-background: #c22f4a;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: rgba(219, 228, 255, 0.8);
+  --pxd-color-selection-foreground: #243a8f;
+  --pxd-color-status-info-background: rgba(214, 236, 244, 0.8);
+  --pxd-color-status-info-foreground: #085566;
+  --pxd-color-status-info-emphasis: #0c7a92;
+  --pxd-color-status-success-background: rgba(216, 240, 230, 0.8);
+  --pxd-color-status-success-foreground: #155a40;
+  --pxd-color-status-success-emphasis: #1f7f5c;
+  --pxd-color-status-warning-background: rgba(250, 237, 210, 0.8);
+  --pxd-color-status-warning-foreground: #6b4400;
+  --pxd-color-status-warning-emphasis: #9a6200;
+  --pxd-color-status-danger-background: rgba(250, 222, 228, 0.8);
+  --pxd-color-status-danger-foreground: #8a1f34;
+  --pxd-color-status-danger-emphasis: #c22f4a;
+  --pxd-color-data-categorical-1: #3552c9;
+  --pxd-color-data-categorical-2: #0c7a92;
+  --pxd-color-data-categorical-3: #1f7f5c;
+  --pxd-color-data-categorical-4: #9a6200;
+  --pxd-color-data-categorical-5: #6b45c9;
+  --pxd-color-data-categorical-6: #b23a7a;
+  --pxd-color-data-positive: #1f7f5c;
+  --pxd-color-data-negative: #c22f4a;
+  --pxd-color-data-neutral: #68758f;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.2;
+  --pxd-type-title-page-letter-spacing: -0.4px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 22px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.25;
+  --pxd-type-title-section-letter-spacing: -0.2px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 17px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.35;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.55;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.5;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.2px;
+  --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 30px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: -0.4px;
+  --pxd-space-inset-compact: 10px;
+  --pxd-space-inset-default: 18px;
+  --pxd-space-inset-comfortable: 28px;
+  --pxd-space-stack-tight: 6px;
+  --pxd-space-stack-default: 10px;
+  --pxd-space-stack-loose: 18px;
+  --pxd-space-stack-section: 36px;
+  --pxd-space-inline-tight: 6px;
+  --pxd-space-inline-default: 10px;
+  --pxd-space-inline-loose: 18px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 10px;
+  --pxd-radius-control: 14px;
+  --pxd-radius-default: 20px;
+  --pxd-radius-large: 28px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 65;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 8px 32px 0px rgba(31, 38, 135, 0.12), 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
+  --pxd-shadow-overlay: 0px 24px 64px 0px rgba(31, 38, 135, 0.22), 0px 1px 0px 0px rgba(255, 255, 255, 0.7);
+  --pxd-motion-duration-instant: 80ms;
+  --pxd-motion-duration-short: 180ms;
+  --pxd-motion-duration-medium: 260ms;
+  --pxd-motion-duration-long: 400ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: light;
+}
+
+[data-pxd-theme="glass"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #0e1424;
+  --pxd-color-surface-subtle: rgba(30, 40, 70, 0.55);
+  --pxd-color-surface-raised: rgba(34, 45, 78, 0.7);
+  --pxd-color-surface-overlay: rgba(28, 38, 66, 0.92);
+  --pxd-color-surface-inverse: #e8edff;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.5);
+  --pxd-color-text-default: #e6ecff;
+  --pxd-color-text-muted: #a9b4d0;
+  --pxd-color-text-inverse: #0b1230;
+  --pxd-color-text-link: #8aa6ff;
+  --pxd-color-border-default: rgba(255, 255, 255, 0.16);
+  --pxd-color-border-strong: #7f8cae;
+  --pxd-color-border-focus: #8aa6ff;
+  --pxd-color-action-primary-background: #8aa6ff;
+  --pxd-color-action-primary-foreground: #0b1230;
+  --pxd-color-action-secondary-background: rgba(28, 38, 66, 0.92);
+  --pxd-color-action-secondary-foreground: #e6ecff;
+  --pxd-color-action-secondary-border: rgba(255, 255, 255, 0.16);
+  --pxd-color-action-danger-background: #ff7d93;
+  --pxd-color-action-danger-foreground: #0b1230;
+  --pxd-color-selection-background: rgba(34, 50, 110, 0.8);
+  --pxd-color-selection-foreground: #c9d6ff;
+  --pxd-color-status-info-background: rgba(16, 60, 78, 0.8);
+  --pxd-color-status-info-foreground: #b6edf8;
+  --pxd-color-status-info-emphasis: #5fd3ec;
+  --pxd-color-status-success-background: rgba(20, 70, 55, 0.8);
+  --pxd-color-status-success-foreground: #b9f0da;
+  --pxd-color-status-success-emphasis: #5ad4a4;
+  --pxd-color-status-warning-background: rgba(80, 60, 20, 0.8);
+  --pxd-color-status-warning-foreground: #fbe1a6;
+  --pxd-color-status-warning-emphasis: #f0b64a;
+  --pxd-color-status-danger-background: rgba(90, 30, 45, 0.8);
+  --pxd-color-status-danger-foreground: #ffc4cf;
+  --pxd-color-status-danger-emphasis: #ff7d93;
+  --pxd-color-data-categorical-1: #8aa6ff;
+  --pxd-color-data-categorical-2: #5fd3ec;
+  --pxd-color-data-categorical-3: #5ad4a4;
+  --pxd-color-data-categorical-4: #f0b64a;
+  --pxd-color-data-categorical-5: #b79bff;
+  --pxd-color-data-categorical-6: #f08ac2;
+  --pxd-color-data-positive: #5ad4a4;
+  --pxd-color-data-negative: #ff7d93;
+  --pxd-color-data-neutral: #7f8cae;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.2;
+  --pxd-type-title-page-letter-spacing: -0.4px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 22px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.25;
+  --pxd-type-title-section-letter-spacing: -0.2px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 17px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.35;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.55;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.5;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.2px;
+  --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 30px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: -0.4px;
+  --pxd-space-inset-compact: 10px;
+  --pxd-space-inset-default: 18px;
+  --pxd-space-inset-comfortable: 28px;
+  --pxd-space-stack-tight: 6px;
+  --pxd-space-stack-default: 10px;
+  --pxd-space-stack-loose: 18px;
+  --pxd-space-stack-section: 36px;
+  --pxd-space-inline-tight: 6px;
+  --pxd-space-inline-default: 10px;
+  --pxd-space-inline-loose: 18px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 10px;
+  --pxd-radius-control: 14px;
+  --pxd-radius-default: 20px;
+  --pxd-radius-large: 28px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 65;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 8px 32px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.08);
+  --pxd-shadow-overlay: 0px 24px 64px 0px rgba(0, 0, 0, 0.55), 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
+  --pxd-motion-duration-instant: 80ms;
+  --pxd-motion-duration-short: 180ms;
+  --pxd-motion-duration-medium: 260ms;
+  --pxd-motion-duration-long: 400ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: dark;
+}

package/themes/health.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the health pack. Do not edit. */
+
+[data-pxd-theme="health"]:not([data-pxd-mode]),
+[data-pxd-theme="health"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #fdfbf6;
+  --pxd-color-surface-subtle: #f1f4f0;
+  --pxd-color-surface-raised: #ffffff;
+  --pxd-color-surface-overlay: #ffffff;
+  --pxd-color-surface-inverse: #13403f;
+  --pxd-color-scrim: rgba(19, 64, 63, 0.45);
+  --pxd-color-text-default: #1f2d2c;
+  --pxd-color-text-muted: #4e6b69;
+  --pxd-color-text-inverse: #fdfbf6;
+  --pxd-color-text-link: #0f6e6a;
+  --pxd-color-border-default: #d6ddd9;
+  --pxd-color-border-strong: #6f8a87;
+  --pxd-color-border-focus: #0f6e6a;
+  --pxd-color-action-primary-background: #0f6e6a;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #e4f1ef;
+  --pxd-color-action-secondary-foreground: #13403f;
+  --pxd-color-action-secondary-border: #b6d3cf;
+  --pxd-color-action-danger-background: #b5432f;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #d9efe9;
+  --pxd-color-selection-foreground: #13403f;
+  --pxd-color-status-info-background: #e2eef5;
+  --pxd-color-status-info-foreground: #1e4b66;
+  --pxd-color-status-info-emphasis: #2f7fa8;
+  --pxd-color-status-success-background: #e2f2e6;
+  --pxd-color-status-success-foreground: #1e5a34;
+  --pxd-color-status-success-emphasis: #2f8a52;
+  --pxd-color-status-warning-background: #fbecd9;
+  --pxd-color-status-warning-foreground: #6e4210;
+  --pxd-color-status-warning-emphasis: #c17a1d;
+  --pxd-color-status-danger-background: #f9e2dd;
+  --pxd-color-status-danger-foreground: #7f2a20;
+  --pxd-color-status-danger-emphasis: #b5432f;
+  --pxd-color-data-categorical-1: #0f6e6a;
+  --pxd-color-data-categorical-2: #c17a1d;
+  --pxd-color-data-categorical-3: #2f7fa8;
+  --pxd-color-data-categorical-4: #8a5fa8;
+  --pxd-color-data-categorical-5: #2f8a52;
+  --pxd-color-data-categorical-6: #b5432f;
+  --pxd-color-data-positive: #2f8a52;
+  --pxd-color-data-negative: #b5432f;
+  --pxd-color-data-neutral: #6f8a87;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: -0.2px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 22px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 18px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 17px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.6;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 15px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.55;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-default-size: 16px;
+  --pxd-type-label-default-weight: 600;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 14px;
+  --pxd-type-label-small-weight: 600;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.1px;
+  --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 34px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: -0.2px;
+  --pxd-space-inset-compact: 12px;
+  --pxd-space-inset-default: 20px;
+  --pxd-space-inset-comfortable: 32px;
+  --pxd-space-stack-tight: 8px;
+  --pxd-space-stack-default: 16px;
+  --pxd-space-stack-loose: 24px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 8px;
+  --pxd-space-inline-default: 12px;
+  --pxd-space-inline-loose: 20px;
+  --pxd-size-target-min: 48px;
+  --pxd-size-icon-small: 18px;
+  --pxd-size-icon-default: 22px;
+  --pxd-radius-small: 8px;
+  --pxd-radius-control: 12px;
+  --pxd-radius-default: 12px;
+  --pxd-radius-large: 20px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 3px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 62;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 2px 8px 0px rgba(19, 64, 63, 0.06);
+  --pxd-shadow-overlay: 0px 12px 32px 0px rgba(19, 64, 63, 0.18);
+  --pxd-motion-duration-instant: 100ms;
+  --pxd-motion-duration-short: 200ms;
+  --pxd-motion-duration-medium: 300ms;
+  --pxd-motion-duration-long: 420ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: light;
+}
+
+[data-pxd-theme="health"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #14201f;
+  --pxd-color-surface-subtle: #1c2a29;
+  --pxd-color-surface-raised: #192625;
+  --pxd-color-surface-overlay: #1f2e2d;
+  --pxd-color-surface-inverse: #e6f0ee;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.55);
+  --pxd-color-text-default: #e6f0ee;
+  --pxd-color-text-muted: #a3b8b5;
+  --pxd-color-text-inverse: #14201f;
+  --pxd-color-text-link: #7fd1cb;
+  --pxd-color-border-default: #2d3f3d;
+  --pxd-color-border-strong: #6e8e8b;
+  --pxd-color-border-focus: #7fd1cb;
+  --pxd-color-action-primary-background: #5fc4bd;
+  --pxd-color-action-primary-foreground: #062c2a;
+  --pxd-color-action-secondary-background: #1f3634;
+  --pxd-color-action-secondary-foreground: #cfe9e6;
+  --pxd-color-action-secondary-border: #3c5f5b;
+  --pxd-color-action-danger-background: #ea8a78;
+  --pxd-color-action-danger-foreground: #3a1108;
+  --pxd-color-selection-background: #1f3f3c;
+  --pxd-color-selection-foreground: #bfe6e1;
+  --pxd-color-status-info-background: #1a3242;
+  --pxd-color-status-info-foreground: #b5d7ee;
+  --pxd-color-status-info-emphasis: #7fb8dc;
+  --pxd-color-status-success-background: #193526;
+  --pxd-color-status-success-foreground: #b3e3c3;
+  --pxd-color-status-success-emphasis: #6fc48f;
+  --pxd-color-status-warning-background: #3f2e17;
+  --pxd-color-status-warning-foreground: #f5d3a3;
+  --pxd-color-status-warning-emphasis: #e0a35a;
+  --pxd-color-status-danger-background: #432220;
+  --pxd-color-status-danger-foreground: #f5bdb2;
+  --pxd-color-status-danger-emphasis: #ea8a78;
+  --pxd-color-data-categorical-1: #5fc4bd;
+  --pxd-color-data-categorical-2: #e0a35a;
+  --pxd-color-data-categorical-3: #7fb8dc;
+  --pxd-color-data-categorical-4: #c0a5e0;
+  --pxd-color-data-categorical-5: #6fc48f;
+  --pxd-color-data-categorical-6: #ea8a78;
+  --pxd-color-data-positive: #6fc48f;
+  --pxd-color-data-negative: #ea8a78;
+  --pxd-color-data-neutral: #8ca6a3;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: -0.2px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 22px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 18px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 17px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.6;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 15px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.55;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-default-size: 16px;
+  --pxd-type-label-default-weight: 600;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 14px;
+  --pxd-type-label-small-weight: 600;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.1px;
+  --pxd-type-numeric-display-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 34px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: -0.2px;
+  --pxd-space-inset-compact: 12px;
+  --pxd-space-inset-default: 20px;
+  --pxd-space-inset-comfortable: 32px;
+  --pxd-space-stack-tight: 8px;
+  --pxd-space-stack-default: 16px;
+  --pxd-space-stack-loose: 24px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 8px;
+  --pxd-space-inline-default: 12px;
+  --pxd-space-inline-loose: 20px;
+  --pxd-size-target-min: 48px;
+  --pxd-size-icon-small: 18px;
+  --pxd-size-icon-default: 22px;
+  --pxd-radius-small: 8px;
+  --pxd-radius-control: 12px;
+  --pxd-radius-default: 12px;
+  --pxd-radius-large: 20px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 3px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 62;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
+  --pxd-shadow-overlay: 0px 12px 32px 0px rgba(0, 0, 0, 0.5);
+  --pxd-motion-duration-instant: 100ms;
+  --pxd-motion-duration-short: 200ms;
+  --pxd-motion-duration-medium: 300ms;
+  --pxd-motion-duration-long: 420ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: dark;
+}