@polyxd/react 0.2.2 → 0.4.0

package/themes/editorial.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the editorial pack. Do not edit. */
+
+[data-pxd-theme="editorial"]:not([data-pxd-mode]),
+[data-pxd-theme="editorial"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #f7f3ec;
+  --pxd-color-surface-subtle: #efe9de;
+  --pxd-color-surface-raised: #fbf8f2;
+  --pxd-color-surface-overlay: #fffdf9;
+  --pxd-color-surface-inverse: #1a1a1a;
+  --pxd-color-scrim: rgba(26, 26, 26, 0.55);
+  --pxd-color-text-default: #1a1a1a;
+  --pxd-color-text-muted: #5a5449;
+  --pxd-color-text-inverse: #f7f3ec;
+  --pxd-color-text-link: #8a2a1a;
+  --pxd-color-border-default: #d8d0c2;
+  --pxd-color-border-strong: #77705f;
+  --pxd-color-border-focus: #8a2a1a;
+  --pxd-color-action-primary-background: #1a1a1a;
+  --pxd-color-action-primary-foreground: #f7f3ec;
+  --pxd-color-action-secondary-background: #f7f3ec;
+  --pxd-color-action-secondary-foreground: #1a1a1a;
+  --pxd-color-action-secondary-border: #1a1a1a;
+  --pxd-color-action-danger-background: #8a2a1a;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #e9dfcc;
+  --pxd-color-selection-foreground: #1a1a1a;
+  --pxd-color-status-info-background: #e6e9ef;
+  --pxd-color-status-info-foreground: #2b3a55;
+  --pxd-color-status-info-emphasis: #3b4f78;
+  --pxd-color-status-success-background: #e5ece2;
+  --pxd-color-status-success-foreground: #2f4a2a;
+  --pxd-color-status-success-emphasis: #3f6b38;
+  --pxd-color-status-warning-background: #f3e8d2;
+  --pxd-color-status-warning-foreground: #66450e;
+  --pxd-color-status-warning-emphasis: #8a6220;
+  --pxd-color-status-danger-background: #f1dfda;
+  --pxd-color-status-danger-foreground: #6e2013;
+  --pxd-color-status-danger-emphasis: #8a2a1a;
+  --pxd-color-data-categorical-1: #8a2a1a;
+  --pxd-color-data-categorical-2: #3b4f78;
+  --pxd-color-data-categorical-3: #3f6b38;
+  --pxd-color-data-categorical-4: #8a6220;
+  --pxd-color-data-categorical-5: #5b3d6e;
+  --pxd-color-data-categorical-6: #2d6a6a;
+  --pxd-color-data-positive: #3f6b38;
+  --pxd-color-data-negative: #8a2a1a;
+  --pxd-color-data-neutral: #77705f;
+  --pxd-type-title-page-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-page-size: 40px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.1;
+  --pxd-type-title-page-letter-spacing: -0.5px;
+  --pxd-type-title-section-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-section-size: 28px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.2;
+  --pxd-type-title-section-letter-spacing: -0.25px;
+  --pxd-type-title-item-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-item-size: 21px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.3;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: Fraunces, Georgia, "Times New Roman", Times, 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: Fraunces, Georgia, "Times New Roman", Times, 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: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.6px;
+  --pxd-type-label-small-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.8px;
+  --pxd-type-numeric-display-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-numeric-display-size: 36px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.1;
+  --pxd-type-numeric-display-letter-spacing: -0.5px;
+  --pxd-space-inset-compact: 12px;
+  --pxd-space-inset-default: 20px;
+  --pxd-space-inset-comfortable: 32px;
+  --pxd-space-stack-tight: 6px;
+  --pxd-space-stack-default: 12px;
+  --pxd-space-stack-loose: 20px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 6px;
+  --pxd-space-inline-default: 12px;
+  --pxd-space-inline-loose: 20px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 2px;
+  --pxd-radius-default: 2px;
+  --pxd-radius-large: 4px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 3px;
+  --pxd-measure-max: 72;
+  --pxd-opacity-state-hover: 0.05;
+  --pxd-opacity-state-pressed: 0.1;
+  --pxd-opacity-state-focus: 0.1;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 24px 48px -12px rgba(26, 26, 26, 0.35);
+  --pxd-motion-duration-instant: 80ms;
+  --pxd-motion-duration-short: 160ms;
+  --pxd-motion-duration-medium: 240ms;
+  --pxd-motion-duration-long: 360ms;
+  --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="editorial"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #1c1a17;
+  --pxd-color-surface-subtle: #262320;
+  --pxd-color-surface-raised: #221f1b;
+  --pxd-color-surface-overlay: #2a2723;
+  --pxd-color-surface-inverse: #f2ece2;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.6);
+  --pxd-color-text-default: #ede6da;
+  --pxd-color-text-muted: #b3aa9b;
+  --pxd-color-text-inverse: #1c1a17;
+  --pxd-color-text-link: #e8a08c;
+  --pxd-color-border-default: #3d3833;
+  --pxd-color-border-strong: #8a8175;
+  --pxd-color-border-focus: #e8a08c;
+  --pxd-color-action-primary-background: #f2ece2;
+  --pxd-color-action-primary-foreground: #1c1a17;
+  --pxd-color-action-secondary-background: #1c1a17;
+  --pxd-color-action-secondary-foreground: #ede6da;
+  --pxd-color-action-secondary-border: #ede6da;
+  --pxd-color-action-danger-background: #c4472f;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #3a3020;
+  --pxd-color-selection-foreground: #ead9b0;
+  --pxd-color-status-info-background: #262e3f;
+  --pxd-color-status-info-foreground: #cfdbf0;
+  --pxd-color-status-info-emphasis: #a9bde0;
+  --pxd-color-status-success-background: #26332a;
+  --pxd-color-status-success-foreground: #c4dcbf;
+  --pxd-color-status-success-emphasis: #9cc294;
+  --pxd-color-status-warning-background: #3a3020;
+  --pxd-color-status-warning-foreground: #ead9b0;
+  --pxd-color-status-warning-emphasis: #d9b46a;
+  --pxd-color-status-danger-background: #3f2520;
+  --pxd-color-status-danger-foreground: #f5c9bc;
+  --pxd-color-status-danger-emphasis: #e8a08c;
+  --pxd-color-data-categorical-1: #e8a08c;
+  --pxd-color-data-categorical-2: #a9bde0;
+  --pxd-color-data-categorical-3: #9cc294;
+  --pxd-color-data-categorical-4: #d9b46a;
+  --pxd-color-data-categorical-5: #c3a6d6;
+  --pxd-color-data-categorical-6: #8fc4c4;
+  --pxd-color-data-positive: #9cc294;
+  --pxd-color-data-negative: #e8a08c;
+  --pxd-color-data-neutral: #8a8175;
+  --pxd-type-title-page-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-page-size: 40px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.1;
+  --pxd-type-title-page-letter-spacing: -0.5px;
+  --pxd-type-title-section-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-section-size: 28px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.2;
+  --pxd-type-title-section-letter-spacing: -0.25px;
+  --pxd-type-title-item-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-item-size: 21px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.3;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: Fraunces, Georgia, "Times New Roman", Times, 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: Fraunces, Georgia, "Times New Roman", Times, 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: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.6px;
+  --pxd-type-label-small-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.8px;
+  --pxd-type-numeric-display-family: Fraunces, Georgia, "Times New Roman", Times, serif;
+  --pxd-type-numeric-display-size: 36px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.1;
+  --pxd-type-numeric-display-letter-spacing: -0.5px;
+  --pxd-space-inset-compact: 12px;
+  --pxd-space-inset-default: 20px;
+  --pxd-space-inset-comfortable: 32px;
+  --pxd-space-stack-tight: 6px;
+  --pxd-space-stack-default: 12px;
+  --pxd-space-stack-loose: 20px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 6px;
+  --pxd-space-inline-default: 12px;
+  --pxd-space-inline-loose: 20px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 2px;
+  --pxd-radius-default: 2px;
+  --pxd-radius-large: 4px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 3px;
+  --pxd-measure-max: 72;
+  --pxd-opacity-state-hover: 0.05;
+  --pxd-opacity-state-pressed: 0.1;
+  --pxd-opacity-state-focus: 0.1;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 24px 48px -12px rgba(0, 0, 0, 0.6);
+  --pxd-motion-duration-instant: 80ms;
+  --pxd-motion-duration-short: 160ms;
+  --pxd-motion-duration-medium: 240ms;
+  --pxd-motion-duration-long: 360ms;
+  --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/finance.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the finance pack. Do not edit. */
+
+[data-pxd-theme="finance"]:not([data-pxd-mode]),
+[data-pxd-theme="finance"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #ffffff;
+  --pxd-color-surface-subtle: #f3f5f8;
+  --pxd-color-surface-raised: #ffffff;
+  --pxd-color-surface-overlay: #ffffff;
+  --pxd-color-surface-inverse: #0e2038;
+  --pxd-color-scrim: rgba(14, 32, 56, 0.5);
+  --pxd-color-text-default: #101828;
+  --pxd-color-text-muted: #4b5565;
+  --pxd-color-text-inverse: #ffffff;
+  --pxd-color-text-link: #153d6f;
+  --pxd-color-border-default: #d5dae2;
+  --pxd-color-border-strong: #6b7484;
+  --pxd-color-border-focus: #a67c0c;
+  --pxd-color-action-primary-background: #0e2038;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #ffffff;
+  --pxd-color-action-secondary-foreground: #0e2038;
+  --pxd-color-action-secondary-border: #0e2038;
+  --pxd-color-action-danger-background: #a61b1b;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #fbf1d6;
+  --pxd-color-selection-foreground: #5c4200;
+  --pxd-color-status-info-background: #e8eef7;
+  --pxd-color-status-info-foreground: #153d6f;
+  --pxd-color-status-info-emphasis: #2a5ea8;
+  --pxd-color-status-success-background: #e4f2e8;
+  --pxd-color-status-success-foreground: #0f5132;
+  --pxd-color-status-success-emphasis: #1b7a44;
+  --pxd-color-status-warning-background: #fbf1d6;
+  --pxd-color-status-warning-foreground: #5c4200;
+  --pxd-color-status-warning-emphasis: #a67c0c;
+  --pxd-color-status-danger-background: #f8e3e3;
+  --pxd-color-status-danger-foreground: #7a1414;
+  --pxd-color-status-danger-emphasis: #a61b1b;
+  --pxd-color-data-categorical-1: #0e2038;
+  --pxd-color-data-categorical-2: #a67c0c;
+  --pxd-color-data-categorical-3: #2a5ea8;
+  --pxd-color-data-categorical-4: #1b7a44;
+  --pxd-color-data-categorical-5: #a61b1b;
+  --pxd-color-data-categorical-6: #5b3d7a;
+  --pxd-color-data-positive: #1b7a44;
+  --pxd-color-data-negative: #a61b1b;
+  --pxd-color-data-neutral: #6b7484;
+  --pxd-type-title-page-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-page-size: 28px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.2;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-section-size: 21px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.25;
+  --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: 16px;
+  --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: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --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: 13px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.45;
+  --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: 13px;
+  --pxd-type-label-default-weight: 600;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.1px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 600;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.4px;
+  --pxd-type-numeric-display-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-numeric-display-size: 30px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.1;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 6px;
+  --pxd-space-inset-default: 12px;
+  --pxd-space-inset-comfortable: 20px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 12px;
+  --pxd-space-stack-section: 24px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 12px;
+  --pxd-size-target-min: 36px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 3px;
+  --pxd-radius-default: 4px;
+  --pxd-radius-large: 6px;
+  --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.05;
+  --pxd-opacity-state-pressed: 0.1;
+  --pxd-opacity-state-focus: 0.1;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 1px 2px 0px rgba(16, 24, 40, 0.08);
+  --pxd-shadow-overlay: 0px 12px 32px 0px rgba(16, 24, 40, 0.24);
+  --pxd-motion-duration-instant: 50ms;
+  --pxd-motion-duration-short: 100ms;
+  --pxd-motion-duration-medium: 150ms;
+  --pxd-motion-duration-long: 200ms;
+  --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="finance"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #0b1424;
+  --pxd-color-surface-subtle: #111d33;
+  --pxd-color-surface-raised: #0f1a2e;
+  --pxd-color-surface-overlay: #152340;
+  --pxd-color-surface-inverse: #e8ecf3;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.6);
+  --pxd-color-text-default: #e8ecf3;
+  --pxd-color-text-muted: #a5b0c4;
+  --pxd-color-text-inverse: #0b1424;
+  --pxd-color-text-link: #9dbdf5;
+  --pxd-color-border-default: #26344d;
+  --pxd-color-border-strong: #6f7f9c;
+  --pxd-color-border-focus: #e2b93b;
+  --pxd-color-action-primary-background: #e2b93b;
+  --pxd-color-action-primary-foreground: #1a1300;
+  --pxd-color-action-secondary-background: #0b1424;
+  --pxd-color-action-secondary-foreground: #e8ecf3;
+  --pxd-color-action-secondary-border: #6f7f9c;
+  --pxd-color-action-danger-background: #f26b6b;
+  --pxd-color-action-danger-foreground: #2a0707;
+  --pxd-color-selection-background: #3b3212;
+  --pxd-color-selection-foreground: #f5dd8a;
+  --pxd-color-status-info-background: #152b4d;
+  --pxd-color-status-info-foreground: #bcd4ff;
+  --pxd-color-status-info-emphasis: #7fa8ef;
+  --pxd-color-status-success-background: #0f3324;
+  --pxd-color-status-success-foreground: #a6e3c2;
+  --pxd-color-status-success-emphasis: #4fbf7f;
+  --pxd-color-status-warning-background: #3b3212;
+  --pxd-color-status-warning-foreground: #f5dd8a;
+  --pxd-color-status-warning-emphasis: #e2b93b;
+  --pxd-color-status-danger-background: #3f1414;
+  --pxd-color-status-danger-foreground: #ffb3b3;
+  --pxd-color-status-danger-emphasis: #f26b6b;
+  --pxd-color-data-categorical-1: #e2b93b;
+  --pxd-color-data-categorical-2: #7fa8ef;
+  --pxd-color-data-categorical-3: #4fbf7f;
+  --pxd-color-data-categorical-4: #f26b6b;
+  --pxd-color-data-categorical-5: #c1a0ff;
+  --pxd-color-data-categorical-6: #a5b0c4;
+  --pxd-color-data-positive: #4fbf7f;
+  --pxd-color-data-negative: #f26b6b;
+  --pxd-color-data-neutral: #8a97ad;
+  --pxd-type-title-page-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-page-size: 28px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.2;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-title-section-size: 21px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.25;
+  --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: 16px;
+  --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: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --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: 13px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.45;
+  --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: 13px;
+  --pxd-type-label-default-weight: 600;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.1px;
+  --pxd-type-label-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 600;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.4px;
+  --pxd-type-numeric-display-family: Georgia, "Times New Roman", Times, serif;
+  --pxd-type-numeric-display-size: 30px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.1;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 6px;
+  --pxd-space-inset-default: 12px;
+  --pxd-space-inset-comfortable: 20px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 12px;
+  --pxd-space-stack-section: 24px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 12px;
+  --pxd-size-target-min: 36px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 3px;
+  --pxd-radius-default: 4px;
+  --pxd-radius-large: 6px;
+  --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.05;
+  --pxd-opacity-state-pressed: 0.1;
+  --pxd-opacity-state-focus: 0.1;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
+  --pxd-shadow-overlay: 0px 12px 32px 0px rgba(0, 0, 0, 0.6);
+  --pxd-motion-duration-instant: 50ms;
+  --pxd-motion-duration-short: 100ms;
+  --pxd-motion-duration-medium: 150ms;
+  --pxd-motion-duration-long: 200ms;
+  --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;
+}