@polyxd/web 0.3.0

package/themes/shadcn.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the shadcn pack. Do not edit. */
+
+[data-pxd-theme="shadcn"]:not([data-pxd-mode]),
+[data-pxd-theme="shadcn"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: oklch(1 0 0);
+  --pxd-color-surface-subtle: oklch(0.97 0 0);
+  --pxd-color-surface-raised: oklch(1 0 0);
+  --pxd-color-surface-overlay: oklch(1 0 0);
+  --pxd-color-surface-inverse: oklch(0% 0 0);
+  --pxd-color-scrim: rgba(0, 0, 0, 0.5);
+  --pxd-color-text-default: oklch(0% 0 0);
+  --pxd-color-text-muted: oklch(44.2% 0.017 285.786);
+  --pxd-color-text-inverse: oklch(0.985 0 0);
+  --pxd-color-text-link: oklch(0% 0 0);
+  --pxd-color-border-default: oklch(0.922 0 0);
+  --pxd-color-border-strong: oklch(55.2% 0.016 285.938);
+  --pxd-color-border-focus: oklch(44.2% 0.017 285.786);
+  --pxd-color-action-primary-background: oklch(0% 0 0);
+  --pxd-color-action-primary-foreground: oklch(0.985 0 0);
+  --pxd-color-action-secondary-background: oklch(0.97 0 0);
+  --pxd-color-action-secondary-foreground: oklch(0.205 0 0);
+  --pxd-color-action-secondary-border: oklch(0.922 0 0);
+  --pxd-color-action-danger-background: oklch(0.577 0.245 27.325);
+  --pxd-color-action-danger-foreground: oklch(1 0 0);
+  --pxd-color-selection-background: oklch(0.97 0 0);
+  --pxd-color-selection-foreground: oklch(0.205 0 0);
+  --pxd-color-status-info-background: oklch(97% 0.014 254.604);
+  --pxd-color-status-info-foreground: oklch(48.8% 0.243 264.376);
+  --pxd-color-status-info-emphasis: oklch(54.6% 0.245 262.881);
+  --pxd-color-status-success-background: oklch(98.2% 0.018 155.826);
+  --pxd-color-status-success-foreground: oklch(52.7% 0.154 150.069);
+  --pxd-color-status-success-emphasis: oklch(62.7% 0.194 149.214);
+  --pxd-color-status-warning-background: oklch(98.7% 0.022 95.277);
+  --pxd-color-status-warning-foreground: oklch(47.3% 0.137 46.201);
+  --pxd-color-status-warning-emphasis: oklch(66.6% 0.179 58.318);
+  --pxd-color-status-danger-background: oklch(97.1% 0.013 17.38);
+  --pxd-color-status-danger-foreground: oklch(50.5% 0.213 27.518);
+  --pxd-color-status-danger-emphasis: oklch(57.7% 0.245 27.325);
+  --pxd-color-data-categorical-1: oklch(54.6% 0.245 262.881);
+  --pxd-color-data-categorical-2: oklch(59.6% 0.145 163.225);
+  --pxd-color-data-categorical-3: oklch(54.1% 0.281 293.009);
+  --pxd-color-data-categorical-4: oklch(66.6% 0.179 58.318);
+  --pxd-color-data-categorical-5: oklch(58.6% 0.253 17.585);
+  --pxd-color-data-categorical-6: oklch(60% 0.118 184.704);
+  --pxd-color-data-positive: oklch(62.7% 0.194 149.214);
+  --pxd-color-data-negative: oklch(57.7% 0.245 27.325);
+  --pxd-color-data-neutral: oklch(55.2% 0.016 285.938);
+  --pxd-type-title-page-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.5;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.5;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-item-size: 16px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.5;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.5;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.5;
+  --pxd-type-label-small-letter-spacing: 0px;
+  --pxd-type-numeric-display-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-numeric-display-size: 24px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.5;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 16px;
+  --pxd-space-inset-comfortable: 24px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 16px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 6px;
+  --pxd-radius-control: 8px;
+  --pxd-radius-default: 8px;
+  --pxd-radius-large: 10px;
+  --pxd-radius-full: 9999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 3px;
+  --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.12;
+  --pxd-opacity-state-disabled: 0.5;
+  --pxd-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --pxd-shadow-overlay: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --pxd-motion-duration-instant: 75ms;
+  --pxd-motion-duration-short: 150ms;
+  --pxd-motion-duration-medium: 200ms;
+  --pxd-motion-duration-long: 300ms;
+  --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="shadcn"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: oklch(0.145 0 0);
+  --pxd-color-surface-subtle: oklch(0.269 0 0);
+  --pxd-color-surface-raised: oklch(0.205 0 0);
+  --pxd-color-surface-overlay: oklch(0.205 0 0);
+  --pxd-color-surface-inverse: oklch(0.922 0 0);
+  --pxd-color-scrim: rgba(0, 0, 0, 0.5);
+  --pxd-color-text-default: oklch(0.985 0 0);
+  --pxd-color-text-muted: oklch(0.708 0 0);
+  --pxd-color-text-inverse: oklch(0.205 0 0);
+  --pxd-color-text-link: oklch(0.985 0 0);
+  --pxd-color-border-default: oklch(1 0 0 / 10%);
+  --pxd-color-border-strong: oklch(0.556 0 0);
+  --pxd-color-border-focus: oklch(0.556 0 0);
+  --pxd-color-action-primary-background: oklch(0.922 0 0);
+  --pxd-color-action-primary-foreground: oklch(0.205 0 0);
+  --pxd-color-action-secondary-background: oklch(0.269 0 0);
+  --pxd-color-action-secondary-foreground: oklch(0.985 0 0);
+  --pxd-color-action-secondary-border: oklch(1 0 0 / 10%);
+  --pxd-color-action-danger-background: oklch(0.704 0.191 22.216);
+  --pxd-color-action-danger-foreground: oklch(0.145 0 0);
+  --pxd-color-selection-background: oklch(0.371 0 0);
+  --pxd-color-selection-foreground: oklch(0.985 0 0);
+  --pxd-color-status-info-background: oklch(28.2% 0.091 267.935);
+  --pxd-color-status-info-foreground: oklch(80.9% 0.105 251.813);
+  --pxd-color-status-info-emphasis: oklch(70.7% 0.165 254.624);
+  --pxd-color-status-success-background: oklch(26.6% 0.065 152.934);
+  --pxd-color-status-success-foreground: oklch(87.1% 0.15 154.449);
+  --pxd-color-status-success-emphasis: oklch(79.2% 0.209 151.711);
+  --pxd-color-status-warning-background: oklch(27.9% 0.077 45.635);
+  --pxd-color-status-warning-foreground: oklch(87.9% 0.169 91.605);
+  --pxd-color-status-warning-emphasis: oklch(82.8% 0.189 84.429);
+  --pxd-color-status-danger-background: oklch(25.8% 0.092 26.042);
+  --pxd-color-status-danger-foreground: oklch(80.8% 0.114 19.571);
+  --pxd-color-status-danger-emphasis: oklch(70.4% 0.191 22.216);
+  --pxd-color-data-categorical-1: oklch(70.7% 0.165 254.624);
+  --pxd-color-data-categorical-2: oklch(76.5% 0.177 163.223);
+  --pxd-color-data-categorical-3: oklch(70.2% 0.183 293.541);
+  --pxd-color-data-categorical-4: oklch(82.8% 0.189 84.429);
+  --pxd-color-data-categorical-5: oklch(71.2% 0.194 13.428);
+  --pxd-color-data-categorical-6: oklch(77.7% 0.152 181.912);
+  --pxd-color-data-positive: oklch(79.2% 0.209 151.711);
+  --pxd-color-data-negative: oklch(70.4% 0.191 22.216);
+  --pxd-color-data-neutral: oklch(70.5% 0.015 286.067);
+  --pxd-type-title-page-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-page-size: 30px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.5;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.5;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-title-item-size: 16px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.5;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.5;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.5;
+  --pxd-type-label-small-letter-spacing: 0px;
+  --pxd-type-numeric-display-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pxd-type-numeric-display-size: 24px;
+  --pxd-type-numeric-display-weight: 600;
+  --pxd-type-numeric-display-line-height: 1.5;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 16px;
+  --pxd-space-inset-comfortable: 24px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 16px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 6px;
+  --pxd-radius-control: 8px;
+  --pxd-radius-default: 8px;
+  --pxd-radius-large: 10px;
+  --pxd-radius-full: 9999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 3px;
+  --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.12;
+  --pxd-opacity-state-disabled: 0.5;
+  --pxd-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --pxd-shadow-overlay: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --pxd-motion-duration-instant: 75ms;
+  --pxd-motion-duration-short: 150ms;
+  --pxd-motion-duration-medium: 200ms;
+  --pxd-motion-duration-long: 300ms;
+  --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/sketch.css

@@ -0,0 +1,356 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the sketch pack. Do not edit. */
+
+[data-pxd-theme="sketch"]:not([data-pxd-mode]),
+[data-pxd-theme="sketch"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #fbf7ee;
+  --pxd-color-surface-subtle: #f2ebdc;
+  --pxd-color-surface-raised: #fffdf7;
+  --pxd-color-surface-overlay: #fffdf7;
+  --pxd-color-surface-inverse: #2b2a26;
+  --pxd-color-scrim: rgba(43, 42, 38, 0.5);
+  --pxd-color-text-default: #2b2a26;
+  --pxd-color-text-muted: #5c584f;
+  --pxd-color-text-inverse: #fbf7ee;
+  --pxd-color-text-link: #1f5fa8;
+  --pxd-color-border-default: #a8a39a;
+  --pxd-color-border-strong: #6b675f;
+  --pxd-color-border-focus: #1f5fa8;
+  --pxd-color-action-primary-background: #2b2a26;
+  --pxd-color-action-primary-foreground: #fbf7ee;
+  --pxd-color-action-secondary-background: #fffdf7;
+  --pxd-color-action-secondary-foreground: #2b2a26;
+  --pxd-color-action-secondary-border: #2b2a26;
+  --pxd-color-action-danger-background: #b3261e;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #fbe8a6;
+  --pxd-color-selection-foreground: #2b2a26;
+  --pxd-color-status-info-background: #e4eef9;
+  --pxd-color-status-info-foreground: #1a4a80;
+  --pxd-color-status-info-emphasis: #1f5fa8;
+  --pxd-color-status-success-background: #e3f1e1;
+  --pxd-color-status-success-foreground: #1e5e2a;
+  --pxd-color-status-success-emphasis: #2e7d32;
+  --pxd-color-status-warning-background: #fdf0d5;
+  --pxd-color-status-warning-foreground: #7a4a00;
+  --pxd-color-status-warning-emphasis: #b26a00;
+  --pxd-color-status-danger-background: #fae4e1;
+  --pxd-color-status-danger-foreground: #8c1d18;
+  --pxd-color-status-danger-emphasis: #b3261e;
+  --pxd-color-data-categorical-1: #1f5fa8;
+  --pxd-color-data-categorical-2: #c2410c;
+  --pxd-color-data-categorical-3: #2e7d32;
+  --pxd-color-data-categorical-4: #7c3aed;
+  --pxd-color-data-categorical-5: #b45309;
+  --pxd-color-data-categorical-6: #0e7490;
+  --pxd-color-data-positive: #2e7d32;
+  --pxd-color-data-negative: #b3261e;
+  --pxd-color-data-neutral: #6b675f;
+  --pxd-type-title-page-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-page-size: 38px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.15;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-section-size: 28px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.2;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-item-size: 22px;
+  --pxd-type-title-item-weight: 700;
+  --pxd-type-title-item-line-height: 1.25;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: Nunito, "Segoe UI", "Trebuchet MS", Verdana, 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: Nunito, "Segoe UI", "Trebuchet MS", Verdana, 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: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive, system-ui, sans-serif;
+  --pxd-type-label-default-size: 17px;
+  --pxd-type-label-default-weight: 400;
+  --pxd-type-label-default-line-height: 1.35;
+  --pxd-type-label-default-letter-spacing: 0.2px;
+  --pxd-type-label-small-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive, system-ui, sans-serif;
+  --pxd-type-label-small-size: 15px;
+  --pxd-type-label-small-weight: 400;
+  --pxd-type-label-small-line-height: 1.3;
+  --pxd-type-label-small-letter-spacing: 0.2px;
+  --pxd-type-numeric-display-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-numeric-display-size: 34px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 14px;
+  --pxd-space-inset-comfortable: 22px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 14px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 14px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 6px;
+  --pxd-radius-control: 12px;
+  --pxd-radius-default: 10px;
+  --pxd-radius-large: 18px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 2px;
+  --pxd-border-width-strong: 3px;
+  --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 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 120ms;
+  --pxd-motion-duration-medium: 180ms;
+  --pxd-motion-duration-long: 260ms;
+  --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="sketch"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #1f2421;
+  --pxd-color-surface-subtle: #272d29;
+  --pxd-color-surface-raised: #252b27;
+  --pxd-color-surface-overlay: #2b322d;
+  --pxd-color-surface-inverse: #f2ede0;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.6);
+  --pxd-color-text-default: #f2ede0;
+  --pxd-color-text-muted: #bdb7a8;
+  --pxd-color-text-inverse: #1f2421;
+  --pxd-color-text-link: #8fc1ff;
+  --pxd-color-border-default: #5d645f;
+  --pxd-color-border-strong: #9aa39d;
+  --pxd-color-border-focus: #8fc1ff;
+  --pxd-color-action-primary-background: #f2ede0;
+  --pxd-color-action-primary-foreground: #1f2421;
+  --pxd-color-action-secondary-background: #252b27;
+  --pxd-color-action-secondary-foreground: #f2ede0;
+  --pxd-color-action-secondary-border: #f2ede0;
+  --pxd-color-action-danger-background: #f08a80;
+  --pxd-color-action-danger-foreground: #1f2421;
+  --pxd-color-selection-background: #f5d76e;
+  --pxd-color-selection-foreground: #1f2421;
+  --pxd-color-status-info-background: #233649;
+  --pxd-color-status-info-foreground: #bcdcff;
+  --pxd-color-status-info-emphasis: #8fc1ff;
+  --pxd-color-status-success-background: #243b2a;
+  --pxd-color-status-success-foreground: #b6e2b8;
+  --pxd-color-status-success-emphasis: #7fcf85;
+  --pxd-color-status-warning-background: #4a3a17;
+  --pxd-color-status-warning-foreground: #ffe08a;
+  --pxd-color-status-warning-emphasis: #f5c04a;
+  --pxd-color-status-danger-background: #4a2522;
+  --pxd-color-status-danger-foreground: #ffb4ab;
+  --pxd-color-status-danger-emphasis: #f08a80;
+  --pxd-color-data-categorical-1: #8fc1ff;
+  --pxd-color-data-categorical-2: #ffab7a;
+  --pxd-color-data-categorical-3: #7fcf85;
+  --pxd-color-data-categorical-4: #c9a8ff;
+  --pxd-color-data-categorical-5: #f5c04a;
+  --pxd-color-data-categorical-6: #67d8e8;
+  --pxd-color-data-positive: #7fcf85;
+  --pxd-color-data-negative: #f08a80;
+  --pxd-color-data-neutral: #9aa39d;
+  --pxd-type-title-page-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-page-size: 38px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.15;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-section-size: 28px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.2;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-title-item-size: 22px;
+  --pxd-type-title-item-weight: 700;
+  --pxd-type-title-item-line-height: 1.25;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: Nunito, "Segoe UI", "Trebuchet MS", Verdana, 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: Nunito, "Segoe UI", "Trebuchet MS", Verdana, 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: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive, system-ui, sans-serif;
+  --pxd-type-label-default-size: 17px;
+  --pxd-type-label-default-weight: 400;
+  --pxd-type-label-default-line-height: 1.35;
+  --pxd-type-label-default-letter-spacing: 0.2px;
+  --pxd-type-label-small-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive, system-ui, sans-serif;
+  --pxd-type-label-small-size: 15px;
+  --pxd-type-label-small-weight: 400;
+  --pxd-type-label-small-line-height: 1.3;
+  --pxd-type-label-small-letter-spacing: 0.2px;
+  --pxd-type-numeric-display-family: Caveat, "Segoe Print", "Bradley Hand", cursive, system-ui, sans-serif;
+  --pxd-type-numeric-display-size: 34px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 14px;
+  --pxd-space-inset-comfortable: 22px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 14px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 14px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 6px;
+  --pxd-radius-control: 12px;
+  --pxd-radius-default: 10px;
+  --pxd-radius-large: 18px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 2px;
+  --pxd-border-width-strong: 3px;
+  --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 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 120ms;
+  --pxd-motion-duration-medium: 180ms;
+  --pxd-motion-duration-long: 260ms;
+  --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;
+}
+
+/* Extras from the sketch pack's manifest: what tokens can't express, appended verbatim, scoped to this theme. */
+/*
+ * Sketch: what tokens can't draw. The theme compiler appends this file verbatim to themes/sketch.css.
+ * Every rule is scoped to [data-pxd-theme="sketch"], and every colour is a token variable, so recolouring
+ * the tokens recolours this too. Delete the "extras" line in manifest.json and the pack is plain tokens.
+ */
+
+/* Cards lean a third of a degree; even ones lean the other way. Set it to 0deg to straighten them. */
+[data-pxd-theme="sketch"] {
+  --pxd-sketch-tilt: -0.3deg;
+}
+
+/* An uneven radius on each corner is what reads as a drawn line rather than a rounded rectangle. */
+[data-pxd-theme="sketch"] .pxd-button,
+[data-pxd-theme="sketch"] .pxd-card,
+[data-pxd-theme="sketch"] .pxd-input,
+[data-pxd-theme="sketch"] .pxd-status,
+[data-pxd-theme="sketch"] .pxd-panel,
+[data-pxd-theme="sketch"] .pxd-chip,
+[data-pxd-theme="sketch"] .pxd-tag,
+[data-pxd-theme="sketch"] .pxd-badge,
+[data-pxd-theme="sketch"] .pxd-snackbar,
+[data-pxd-theme="sketch"] .pxd-dropzone,
+[data-pxd-theme="sketch"] .pxd-media {
+  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
+}
+
+/* Pencil lines are thick; a button or a field gets the strong width, and a text button gets a line at all. */
+[data-pxd-theme="sketch"] .pxd-button,
+[data-pxd-theme="sketch"] .pxd-input {
+  border-width: var(--pxd-border-width-strong);
+}
+[data-pxd-theme="sketch"] .pxd-button-primary,
+[data-pxd-theme="sketch"] .pxd-button-danger {
+  border-color: var(--pxd-color-text-default);
+}
+[data-pxd-theme="sketch"] .pxd-button-tertiary {
+  border-color: var(--pxd-color-border-default);
+}
+
+[data-pxd-theme="sketch"] .pxd-card {
+  transform: rotate(var(--pxd-sketch-tilt));
+}
+[data-pxd-theme="sketch"] .pxd-card:nth-child(even) {
+  --pxd-sketch-tilt: 0.3deg;
+}
+
+/* Links are underlined by hand. */
+[data-pxd-theme="sketch"] .pxd-link,
+[data-pxd-theme="sketch"] .pxd-nav-toc-link,
+[data-pxd-theme="sketch"] .pxd-footer-link {
+  text-decoration: underline wavy;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}