@polyxd/web 0.3.0

package/themes/brutalist.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the brutalist pack. Do not edit. */
+
+[data-pxd-theme="brutalist"]:not([data-pxd-mode]),
+[data-pxd-theme="brutalist"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #ffffff;
+  --pxd-color-surface-subtle: #fff6b3;
+  --pxd-color-surface-raised: #ffffff;
+  --pxd-color-surface-overlay: #ffe600;
+  --pxd-color-surface-inverse: #000000;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.7);
+  --pxd-color-text-default: #000000;
+  --pxd-color-text-muted: #333333;
+  --pxd-color-text-inverse: #ffe600;
+  --pxd-color-text-link: #1400ff;
+  --pxd-color-border-default: #000000;
+  --pxd-color-border-strong: #000000;
+  --pxd-color-border-focus: #1400ff;
+  --pxd-color-action-primary-background: #000000;
+  --pxd-color-action-primary-foreground: #ffe600;
+  --pxd-color-action-secondary-background: #ffe600;
+  --pxd-color-action-secondary-foreground: #000000;
+  --pxd-color-action-secondary-border: #000000;
+  --pxd-color-action-danger-background: #ff2d2d;
+  --pxd-color-action-danger-foreground: #000000;
+  --pxd-color-selection-background: #ffe600;
+  --pxd-color-selection-foreground: #000000;
+  --pxd-color-status-info-background: #cfe8ff;
+  --pxd-color-status-info-foreground: #000000;
+  --pxd-color-status-info-emphasis: #1400ff;
+  --pxd-color-status-success-background: #c8f7c5;
+  --pxd-color-status-success-foreground: #000000;
+  --pxd-color-status-success-emphasis: #007a1f;
+  --pxd-color-status-warning-background: #ffe600;
+  --pxd-color-status-warning-foreground: #000000;
+  --pxd-color-status-warning-emphasis: #7a6100;
+  --pxd-color-status-danger-background: #ffc9c9;
+  --pxd-color-status-danger-foreground: #000000;
+  --pxd-color-status-danger-emphasis: #d10000;
+  --pxd-color-data-categorical-1: #000000;
+  --pxd-color-data-categorical-2: #1400ff;
+  --pxd-color-data-categorical-3: #d10000;
+  --pxd-color-data-categorical-4: #007a1f;
+  --pxd-color-data-categorical-5: #7a6100;
+  --pxd-color-data-categorical-6: #c400a0;
+  --pxd-color-data-positive: #007a1f;
+  --pxd-color-data-negative: #d10000;
+  --pxd-color-data-neutral: #5c5c5c;
+  --pxd-type-title-page-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 40px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.05;
+  --pxd-type-title-page-letter-spacing: -1px;
+  --pxd-type-title-section-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 26px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.15;
+  --pxd-type-title-section-letter-spacing: -0.5px;
+  --pxd-type-title-item-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 19px;
+  --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: Arial, Helvetica, 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: Arial, Helvetica, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 700;
+  --pxd-type-label-default-line-height: 1.3;
+  --pxd-type-label-default-letter-spacing: 0.5px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 700;
+  --pxd-type-label-small-line-height: 1.3;
+  --pxd-type-label-small-letter-spacing: 0.8px;
+  --pxd-type-numeric-display-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 40px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1;
+  --pxd-type-numeric-display-letter-spacing: -1px;
+  --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: 40px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 0px;
+  --pxd-radius-default: 0px;
+  --pxd-radius-large: 0px;
+  --pxd-radius-full: 0px;
+  --pxd-border-width-default: 2px;
+  --pxd-border-width-strong: 3px;
+  --pxd-focus-ring-width: 3px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 60;
+  --pxd-opacity-state-hover: 0.1;
+  --pxd-opacity-state-pressed: 0.2;
+  --pxd-opacity-state-focus: 0.2;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 4px 4px 0px 0px #000000;
+  --pxd-shadow-overlay: 8px 8px 0px 0px #000000;
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 0ms;
+  --pxd-motion-duration-medium: 80ms;
+  --pxd-motion-duration-long: 120ms;
+  --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="brutalist"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #111111;
+  --pxd-color-surface-subtle: #3a3200;
+  --pxd-color-surface-raised: #111111;
+  --pxd-color-surface-overlay: #1a1a1a;
+  --pxd-color-surface-inverse: #ffe600;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.8);
+  --pxd-color-text-default: #ffffff;
+  --pxd-color-text-muted: #cfcfcf;
+  --pxd-color-text-inverse: #111111;
+  --pxd-color-text-link: #8fb1ff;
+  --pxd-color-border-default: #ffffff;
+  --pxd-color-border-strong: #ffffff;
+  --pxd-color-border-focus: #ffe600;
+  --pxd-color-action-primary-background: #ffe600;
+  --pxd-color-action-primary-foreground: #111111;
+  --pxd-color-action-secondary-background: #111111;
+  --pxd-color-action-secondary-foreground: #ffffff;
+  --pxd-color-action-secondary-border: #ffffff;
+  --pxd-color-action-danger-background: #ff5c5c;
+  --pxd-color-action-danger-foreground: #111111;
+  --pxd-color-selection-background: #ffe600;
+  --pxd-color-selection-foreground: #111111;
+  --pxd-color-status-info-background: #0f2a5c;
+  --pxd-color-status-info-foreground: #cfe0ff;
+  --pxd-color-status-info-emphasis: #8fb1ff;
+  --pxd-color-status-success-background: #0d3d16;
+  --pxd-color-status-success-foreground: #c8f7c5;
+  --pxd-color-status-success-emphasis: #4fdc6a;
+  --pxd-color-status-warning-background: #3a3200;
+  --pxd-color-status-warning-foreground: #ffe600;
+  --pxd-color-status-warning-emphasis: #ffe600;
+  --pxd-color-status-danger-background: #4d0f0f;
+  --pxd-color-status-danger-foreground: #ffc9c9;
+  --pxd-color-status-danger-emphasis: #ff5c5c;
+  --pxd-color-data-categorical-1: #ffe600;
+  --pxd-color-data-categorical-2: #8fb1ff;
+  --pxd-color-data-categorical-3: #ff5c5c;
+  --pxd-color-data-categorical-4: #4fdc6a;
+  --pxd-color-data-categorical-5: #ff9ee6;
+  --pxd-color-data-categorical-6: #ffffff;
+  --pxd-color-data-positive: #4fdc6a;
+  --pxd-color-data-negative: #ff5c5c;
+  --pxd-color-data-neutral: #9a9a9a;
+  --pxd-type-title-page-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 40px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.05;
+  --pxd-type-title-page-letter-spacing: -1px;
+  --pxd-type-title-section-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 26px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.15;
+  --pxd-type-title-section-letter-spacing: -0.5px;
+  --pxd-type-title-item-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 19px;
+  --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: Arial, Helvetica, 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: Arial, Helvetica, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 700;
+  --pxd-type-label-default-line-height: 1.3;
+  --pxd-type-label-default-letter-spacing: 0.5px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 700;
+  --pxd-type-label-small-line-height: 1.3;
+  --pxd-type-label-small-letter-spacing: 0.8px;
+  --pxd-type-numeric-display-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-numeric-display-size: 40px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1;
+  --pxd-type-numeric-display-letter-spacing: -1px;
+  --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: 40px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 0px;
+  --pxd-radius-default: 0px;
+  --pxd-radius-large: 0px;
+  --pxd-radius-full: 0px;
+  --pxd-border-width-default: 2px;
+  --pxd-border-width-strong: 3px;
+  --pxd-focus-ring-width: 3px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 60;
+  --pxd-opacity-state-hover: 0.1;
+  --pxd-opacity-state-pressed: 0.2;
+  --pxd-opacity-state-focus: 0.2;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 4px 4px 0px 0px #ffffff;
+  --pxd-shadow-overlay: 8px 8px 0px 0px #ffe600;
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 0ms;
+  --pxd-motion-duration-medium: 80ms;
+  --pxd-motion-duration-long: 120ms;
+  --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/carbon.css

@@ -0,0 +1,310 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the carbon pack. Do not edit. */
+
+[data-pxd-theme="carbon"]:not([data-pxd-mode]),
+[data-pxd-theme="carbon"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #ffffff;
+  --pxd-color-surface-subtle: #e0e0e0;
+  --pxd-color-surface-raised: #f4f4f4;
+  --pxd-color-surface-overlay: #f4f4f4;
+  --pxd-color-surface-inverse: #393939;
+  --pxd-color-scrim: rgb(0 0 0 / 0.6);
+  --pxd-color-text-default: #161616;
+  --pxd-color-text-muted: #525252;
+  --pxd-color-text-inverse: #ffffff;
+  --pxd-color-text-link: #0f62fe;
+  --pxd-color-border-default: #c6c6c6;
+  --pxd-color-border-strong: #8d8d8d;
+  --pxd-color-border-focus: #0f62fe;
+  --pxd-color-action-primary-background: #0f62fe;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #393939;
+  --pxd-color-action-secondary-foreground: #ffffff;
+  --pxd-color-action-secondary-border: #393939;
+  --pxd-color-action-danger-background: #da1e28;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #e0e0e0;
+  --pxd-color-selection-foreground: #161616;
+  --pxd-color-status-info-background: #edf5ff;
+  --pxd-color-status-info-foreground: #161616;
+  --pxd-color-status-info-emphasis: #0043ce;
+  --pxd-color-status-success-background: #defbe6;
+  --pxd-color-status-success-foreground: #161616;
+  --pxd-color-status-success-emphasis: #24a148;
+  --pxd-color-status-warning-background: #fcf4d6;
+  --pxd-color-status-warning-foreground: #161616;
+  --pxd-color-status-warning-emphasis: #8e6a00;
+  --pxd-color-status-danger-background: #fff1f1;
+  --pxd-color-status-danger-foreground: #161616;
+  --pxd-color-status-danger-emphasis: #da1e28;
+  --pxd-color-data-categorical-1: #6929c4;
+  --pxd-color-data-categorical-2: #1192e8;
+  --pxd-color-data-categorical-3: #005d5d;
+  --pxd-color-data-categorical-4: #9f1853;
+  --pxd-color-data-categorical-5: #fa4d56;
+  --pxd-color-data-categorical-6: #520408;
+  --pxd-color-data-positive: #24a148;
+  --pxd-color-data-negative: #da1e28;
+  --pxd-color-data-neutral: #6f6f6f;
+  --pxd-type-title-page-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-title-page-size: 32px;
+  --pxd-type-title-page-weight: 400;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 400;
+  --pxd-type-title-section-line-height: 1.4;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --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: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", 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: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.42857;
+  --pxd-type-body-small-letter-spacing: 0.16px;
+  --pxd-type-label-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 400;
+  --pxd-type-label-default-line-height: 1.28572;
+  --pxd-type-label-default-letter-spacing: 0.16px;
+  --pxd-type-label-small-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 400;
+  --pxd-type-label-small-line-height: 1.33333;
+  --pxd-type-label-small-letter-spacing: 0.32px;
+  --pxd-type-numeric-display-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-numeric-display-size: 42px;
+  --pxd-type-numeric-display-weight: 300;
+  --pxd-type-numeric-display-line-height: 1.199;
+  --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: 8px;
+  --pxd-space-stack-default: 16px;
+  --pxd-space-stack-loose: 32px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 48px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 0px;
+  --pxd-radius-default: 0px;
+  --pxd-radius-large: 0px;
+  --pxd-radius-full: 999999px;
+  --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.12;
+  --pxd-opacity-state-pressed: 0.5;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.3;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgb(0 0 0 / 0);
+  --pxd-shadow-overlay: 0px 2px 6px 0px rgb(0 0 0 / 0.3);
+  --pxd-motion-duration-instant: 70ms;
+  --pxd-motion-duration-short: 110ms;
+  --pxd-motion-duration-medium: 240ms;
+  --pxd-motion-duration-long: 400ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.38, 0.9);
+  --pxd-motion-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
+
+  /* Layout this system's components differ on, which tokens can't express (see the manifest) */
+  --pxd-layout-action-gap: 1px;
+  --pxd-layout-action-item: 1 1 0;
+  --pxd-layout-action-bleed: var(--pxd-space-stack-default) calc(-1 * var(--pxd-space-inset-comfortable)) calc(-1 * var(--pxd-space-inset-comfortable));
+
+  /* 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="carbon"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #161616;
+  --pxd-color-surface-subtle: #393939;
+  --pxd-color-surface-raised: #262626;
+  --pxd-color-surface-overlay: #262626;
+  --pxd-color-surface-inverse: #f4f4f4;
+  --pxd-color-scrim: rgb(0 0 0 / 0.6);
+  --pxd-color-text-default: #f4f4f4;
+  --pxd-color-text-muted: #c6c6c6;
+  --pxd-color-text-inverse: #161616;
+  --pxd-color-text-link: #78a9ff;
+  --pxd-color-border-default: #525252;
+  --pxd-color-border-strong: #6f6f6f;
+  --pxd-color-border-focus: #ffffff;
+  --pxd-color-action-primary-background: #0f62fe;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #6f6f6f;
+  --pxd-color-action-secondary-foreground: #ffffff;
+  --pxd-color-action-secondary-border: #6f6f6f;
+  --pxd-color-action-danger-background: #da1e28;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #393939;
+  --pxd-color-selection-foreground: #f4f4f4;
+  --pxd-color-status-info-background: #262626;
+  --pxd-color-status-info-foreground: #f4f4f4;
+  --pxd-color-status-info-emphasis: #4589ff;
+  --pxd-color-status-success-background: #262626;
+  --pxd-color-status-success-foreground: #f4f4f4;
+  --pxd-color-status-success-emphasis: #42be65;
+  --pxd-color-status-warning-background: #262626;
+  --pxd-color-status-warning-foreground: #f4f4f4;
+  --pxd-color-status-warning-emphasis: #f1c21b;
+  --pxd-color-status-danger-background: #262626;
+  --pxd-color-status-danger-foreground: #f4f4f4;
+  --pxd-color-status-danger-emphasis: #fa4d56;
+  --pxd-color-data-categorical-1: #8a3ffc;
+  --pxd-color-data-categorical-2: #33b1ff;
+  --pxd-color-data-categorical-3: #007d79;
+  --pxd-color-data-categorical-4: #ff7eb6;
+  --pxd-color-data-categorical-5: #fa4d56;
+  --pxd-color-data-categorical-6: #fff1f1;
+  --pxd-color-data-positive: #42be65;
+  --pxd-color-data-negative: #fa4d56;
+  --pxd-color-data-neutral: #8d8d8d;
+  --pxd-type-title-page-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-title-page-size: 32px;
+  --pxd-type-title-page-weight: 400;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 400;
+  --pxd-type-title-section-line-height: 1.4;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --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: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", 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: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.42857;
+  --pxd-type-body-small-letter-spacing: 0.16px;
+  --pxd-type-label-default-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-label-default-size: 14px;
+  --pxd-type-label-default-weight: 400;
+  --pxd-type-label-default-line-height: 1.28572;
+  --pxd-type-label-default-letter-spacing: 0.16px;
+  --pxd-type-label-small-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 400;
+  --pxd-type-label-small-line-height: 1.33333;
+  --pxd-type-label-small-letter-spacing: 0.32px;
+  --pxd-type-numeric-display-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
+  --pxd-type-numeric-display-size: 42px;
+  --pxd-type-numeric-display-weight: 300;
+  --pxd-type-numeric-display-line-height: 1.199;
+  --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: 8px;
+  --pxd-space-stack-default: 16px;
+  --pxd-space-stack-loose: 32px;
+  --pxd-space-stack-section: 48px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 48px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 0px;
+  --pxd-radius-control: 0px;
+  --pxd-radius-default: 0px;
+  --pxd-radius-large: 0px;
+  --pxd-radius-full: 999999px;
+  --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.16;
+  --pxd-opacity-state-pressed: 0.4;
+  --pxd-opacity-state-focus: 0.16;
+  --pxd-opacity-state-disabled: 0.3;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgb(0 0 0 / 0);
+  --pxd-shadow-overlay: 0px 2px 6px 0px rgb(0 0 0 / 0.8);
+  --pxd-motion-duration-instant: 70ms;
+  --pxd-motion-duration-short: 110ms;
+  --pxd-motion-duration-medium: 240ms;
+  --pxd-motion-duration-long: 400ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.38, 0.9);
+  --pxd-motion-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
+
+  /* Layout this system's components differ on, which tokens can't express (see the manifest) */
+  --pxd-layout-action-gap: 1px;
+  --pxd-layout-action-item: 1 1 0;
+  --pxd-layout-action-bleed: var(--pxd-space-stack-default) calc(-1 * var(--pxd-space-inset-comfortable)) calc(-1 * var(--pxd-space-inset-comfortable));
+
+  /* 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;
+}