@ternent/core 0.0.1

package/packages/ui/src/themes/ledger.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="ledger-light"], [data-theme="ledger-light"] {
+  color-scheme: light;
+  --ui-bg: #f8f4ef;
+  --ui-fg: #241817;
+  --ui-fg-muted: #6f5b57;
+  --ui-surface: #efe7de;
+  --ui-surface-hover: #e5dacd;
+  --ui-border: rgba(36, 24, 23, 0.12);
+  --ui-primary: #7a2e2e;
+  --ui-on-primary: #f8f4ef;
+  --ui-primary-muted: rgba(122, 46, 46, 0.14);
+  --ui-primary-hover: rgba(122, 46, 46, 0.22);
+  --ui-primary-active: rgba(122, 46, 46, 0.3);
+  --ui-secondary: #5d4742;
+  --ui-on-secondary: #f8f4ef;
+  --ui-secondary-muted: rgba(93, 71, 66, 0.14);
+  --ui-secondary-hover: rgba(93, 71, 66, 0.22);
+  --ui-secondary-active: rgba(93, 71, 66, 0.3);
+  --ui-accent: #b98932;
+  --ui-on-accent: #241817;
+  --ui-accent-muted: rgba(185, 137, 50, 0.14);
+  --ui-accent-hover: rgba(185, 137, 50, 0.22);
+  --ui-accent-active: rgba(185, 137, 50, 0.3);
+  --ui-success: #3f7a52;
+  --ui-on-success: #f8f4ef;
+  --ui-success-muted: rgba(63, 122, 82, 0.16);
+  --ui-success-hover: rgba(63, 122, 82, 0.24);
+  --ui-success-active: rgba(63, 122, 82, 0.32);
+  --ui-warning: #b86b2b;
+  --ui-on-warning: #fff7ed;
+  --ui-warning-muted: rgba(184, 107, 43, 0.16);
+  --ui-warning-hover: rgba(184, 107, 43, 0.24);
+  --ui-warning-active: rgba(184, 107, 43, 0.32);
+  --ui-info: #3f5f8f;
+  --ui-on-info: #f8f4ef;
+  --ui-info-muted: rgba(63, 95, 143, 0.16);
+  --ui-info-hover: rgba(63, 95, 143, 0.24);
+  --ui-info-active: rgba(63, 95, 143, 0.32);
+  --ui-critical: #b23a3a;
+  --ui-on-critical: #fef2f2;
+  --ui-critical-muted: rgba(178, 58, 58, 0.16);
+  --ui-critical-hover: rgba(178, 58, 58, 0.24);
+  --ui-critical-active: rgba(178, 58, 58, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(36, 24, 23, 0.06);
+  --ui-tonal-secondary-hover: rgba(36, 24, 23, 0.1);
+  --ui-tonal-tertiary: rgba(36, 24, 23, 0.03);
+  --ui-tonal-tertiary-hover: rgba(36, 24, 23, 0.07);
+  --ui-ring: rgba(122, 46, 46, 0.4);
+  --ui-glow-primary: 0 0 0 2px rgba(122, 46, 46, 0.25);
+  --ui-glow-accent: 0 0 0 2px rgba(185, 137, 50, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(178, 58, 58, 0.25);
+  --ui-glow-success: 0 0 0 2px rgba(63, 122, 82, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(22, 14, 13, 0.12);
+  --ui-shadow-md: 0 6px 18px rgba(22, 14, 13, 0.22);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #7a2e2e;
+  --ui-logo-end: #b98932;
+  --ui-logo-cutout: #f8f4ef;
+}
+
+:root[data-theme="ledger-dark"], [data-theme="ledger-dark"] {
+  color-scheme: dark;
+  --ui-bg: #140d0d;
+  --ui-fg: #f4ebe4;
+  --ui-fg-muted: #bda69f;
+  --ui-surface: #1d1414;
+  --ui-surface-hover: #281b1b;
+  --ui-border: rgba(244, 235, 228, 0.08);
+  --ui-primary: #c46a6a;
+  --ui-on-primary: #1a1010;
+  --ui-primary-muted: rgba(196, 106, 106, 0.16);
+  --ui-primary-hover: rgba(196, 106, 106, 0.24);
+  --ui-primary-active: rgba(196, 106, 106, 0.32);
+  --ui-secondary: #6d5651;
+  --ui-on-secondary: #ffffff;
+  --ui-secondary-muted: rgba(109, 86, 81, 0.16);
+  --ui-secondary-hover: rgba(109, 86, 81, 0.24);
+  --ui-secondary-active: rgba(109, 86, 81, 0.32);
+  --ui-accent: #d4a84f;
+  --ui-on-accent: #1d1407;
+  --ui-accent-muted: rgba(212, 168, 79, 0.16);
+  --ui-accent-hover: rgba(212, 168, 79, 0.24);
+  --ui-accent-active: rgba(212, 168, 79, 0.32);
+  --ui-success: #6eb385;
+  --ui-on-success: #0d1710;
+  --ui-success-muted: rgba(110, 179, 133, 0.16);
+  --ui-success-hover: rgba(110, 179, 133, 0.24);
+  --ui-success-active: rgba(110, 179, 133, 0.32);
+  --ui-warning: #df8b4f;
+  --ui-on-warning: #201208;
+  --ui-warning-muted: rgba(223, 139, 79, 0.16);
+  --ui-warning-hover: rgba(223, 139, 79, 0.24);
+  --ui-warning-active: rgba(223, 139, 79, 0.32);
+  --ui-info: #7f9fd4;
+  --ui-on-info: #101521;
+  --ui-info-muted: rgba(127, 159, 212, 0.16);
+  --ui-info-hover: rgba(127, 159, 212, 0.24);
+  --ui-info-active: rgba(127, 159, 212, 0.32);
+  --ui-critical: #e07a7a;
+  --ui-on-critical: #190b0b;
+  --ui-critical-muted: rgba(224, 122, 122, 0.16);
+  --ui-critical-hover: rgba(224, 122, 122, 0.24);
+  --ui-critical-active: rgba(224, 122, 122, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(244, 235, 228, 0.06);
+  --ui-tonal-secondary-hover: rgba(244, 235, 228, 0.12);
+  --ui-tonal-tertiary: rgba(244, 235, 228, 0.03);
+  --ui-tonal-tertiary-hover: rgba(244, 235, 228, 0.08);
+  --ui-ring: rgba(196, 106, 106, 0.45);
+  --ui-glow-primary: 0 0 0 2px rgba(196, 106, 106, 0.35);
+  --ui-glow-accent: 0 0 0 2px rgba(212, 168, 79, 0.35);
+  --ui-glow-critical: 0 0 0 2px rgba(224, 122, 122, 0.3);
+  --ui-glow-success: 0 0 0 2px rgba(110, 179, 133, 0.35);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --ui-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.65);
+  --ui-radius-sm: 6px;
+  --ui-radius-md: 10px;
+  --ui-radius-lg: 14px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 180ms;
+  --ui-duration-slow: 240ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.98;
+  --ui-logo-start: #c46a6a;
+  --ui-logo-end: #d4a84f;
+  --ui-logo-cutout: #140d0d;
+}

package/packages/ui/src/themes/neon-noir.css

@@ -0,0 +1,74 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="neon-noir"], [data-theme="neon-noir"] {
+  color-scheme: dark;
+  --ui-bg: oklch(12% 0 0);
+  --ui-fg: oklch(92% 0 0);
+  --ui-fg-muted: oklch(70% 0 0);
+  --ui-surface: oklch(18% 0 0);
+  --ui-surface-hover: oklch(22% 0 0);
+  --ui-border: oklch(28% 0 0);
+  --ui-primary: oklch(65% 0.27 310);
+  --ui-on-primary: oklch(10% 0 0);
+  --ui-primary-muted: oklch(65% 0.27 310 / 0.14);
+  --ui-primary-hover: oklch(65% 0.27 310 / 0.22);
+  --ui-primary-active: oklch(65% 0.27 310 / 0.3);
+  --ui-accent: oklch(78% 0.2 95);
+  --ui-on-accent: oklch(10% 0 0);
+  --ui-accent-muted: oklch(78% 0.2 95 / 0.14);
+  --ui-accent-hover: oklch(78% 0.2 95 / 0.22);
+  --ui-accent-active: oklch(78% 0.2 95 / 0.3);
+  --ui-secondary: oklch(70% 0.16 200);
+  --ui-on-secondary: oklch(10% 0 0);
+  --ui-secondary-muted: oklch(70% 0.16 200 / 0.14);
+  --ui-secondary-hover: oklch(70% 0.16 200 / 0.22);
+  --ui-secondary-active: oklch(70% 0.16 200 / 0.3);
+  --ui-critical: oklch(66% 0.25 25);
+  --ui-on-critical: oklch(10% 0 0);
+  --ui-critical-muted: oklch(66% 0.25 25 / 0.16);
+  --ui-critical-hover: oklch(66% 0.25 25 / 0.24);
+  --ui-critical-active: oklch(66% 0.25 25 / 0.32);
+  --ui-success: oklch(68% 0.18 150);
+  --ui-on-success: oklch(10% 0 0);
+  --ui-success-muted: oklch(68% 0.18 150 / 0.16);
+  --ui-success-hover: oklch(68% 0.18 150 / 0.24);
+  --ui-success-active: oklch(68% 0.18 150 / 0.32);
+  --ui-warning: oklch(75% 0.2 70);
+  --ui-on-warning: oklch(10% 0 0);
+  --ui-warning-muted: oklch(75% 0.2 70 / 0.16);
+  --ui-warning-hover: oklch(75% 0.2 70 / 0.24);
+  --ui-warning-active: oklch(75% 0.2 70 / 0.32);
+  --ui-info: oklch(70% 0.18 230);
+  --ui-on-info: oklch(10% 0 0);
+  --ui-info-muted: oklch(70% 0.18 230 / 0.16);
+  --ui-info-hover: oklch(70% 0.18 230 / 0.24);
+  --ui-info-active: oklch(70% 0.18 230 / 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: oklch(92% 0 0 / 0.06);
+  --ui-tonal-secondary-hover: oklch(92% 0 0 / 0.1);
+  --ui-tonal-tertiary: oklch(92% 0 0 / 0.03);
+  --ui-tonal-tertiary-hover: oklch(92% 0 0 / 0.07);
+  --ui-ring: oklch(65% 0.27 310 / 0.5);
+  --ui-glow-primary: 0 0 0 1px oklch(65% 0.27 310 / 0.55);
+  --ui-glow-accent: 0 0 0 1px oklch(78% 0.2 95 / 0.55);
+  --ui-glow-critical: 0 0 0 1px oklch(66% 0.25 25 / 0.55);
+  --ui-glow-success: 0 0 0 1px oklch(68% 0.18 150 / 0.5);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
+  --ui-shadow-md: 0 6px 18px oklch(0% 0 0 / 0.35);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: oklch(65% 0.27 310);
+  --ui-logo-end: oklch(70% 0.16 200);
+  --ui-logo-cutout: oklch(12% 0 0);
+}

package/packages/ui/src/themes/obsidian-iris.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="obsidian-iris-light"], [data-theme="obsidian-iris-light"] {
+  color-scheme: light;
+  --ui-bg: #f7f5f7;
+  --ui-fg: #211a1d;
+  --ui-fg-muted: #5a4f55;
+  --ui-surface: #eee9ee;
+  --ui-surface-hover: #e2dbe2;
+  --ui-border: rgba(33, 26, 29, 0.14);
+  --ui-primary: #4a1d96;
+  --ui-on-primary: #f7f5f7;
+  --ui-primary-muted: rgba(74, 29, 150, 0.14);
+  --ui-primary-hover: rgba(74, 29, 150, 0.22);
+  --ui-primary-active: rgba(74, 29, 150, 0.3);
+  --ui-secondary: #1f1b24;
+  --ui-on-secondary: #f7f5f7;
+  --ui-secondary-muted: rgba(31, 27, 36, 0.14);
+  --ui-secondary-hover: rgba(31, 27, 36, 0.22);
+  --ui-secondary-active: rgba(31, 27, 36, 0.3);
+  --ui-accent: #7c5cf0;
+  --ui-on-accent: #140a20;
+  --ui-accent-muted: rgba(124, 92, 240, 0.14);
+  --ui-accent-hover: rgba(124, 92, 240, 0.22);
+  --ui-accent-active: rgba(124, 92, 240, 0.3);
+  --ui-success: #2f8f7a;
+  --ui-on-success: #f7f5f7;
+  --ui-success-muted: rgba(47, 143, 122, 0.16);
+  --ui-success-hover: rgba(47, 143, 122, 0.24);
+  --ui-success-active: rgba(47, 143, 122, 0.32);
+  --ui-warning: #c4832f;
+  --ui-on-warning: #1b1205;
+  --ui-warning-muted: rgba(196, 131, 47, 0.16);
+  --ui-warning-hover: rgba(196, 131, 47, 0.24);
+  --ui-warning-active: rgba(196, 131, 47, 0.32);
+  --ui-info: #3f5fb7;
+  --ui-on-info: #f7f5f7;
+  --ui-info-muted: rgba(63, 95, 183, 0.16);
+  --ui-info-hover: rgba(63, 95, 183, 0.24);
+  --ui-info-active: rgba(63, 95, 183, 0.32);
+  --ui-critical: #b84a4a;
+  --ui-on-critical: #f7f5f7;
+  --ui-critical-muted: rgba(184, 74, 74, 0.16);
+  --ui-critical-hover: rgba(184, 74, 74, 0.24);
+  --ui-critical-active: rgba(184, 74, 74, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(33, 26, 29, 0.06);
+  --ui-tonal-secondary-hover: rgba(33, 26, 29, 0.1);
+  --ui-tonal-tertiary: rgba(33, 26, 29, 0.03);
+  --ui-tonal-tertiary-hover: rgba(33, 26, 29, 0.07);
+  --ui-ring: rgba(74, 29, 150, 0.4);
+  --ui-glow-primary: 0 0 0 2px rgba(74, 29, 150, 0.25);
+  --ui-glow-accent: 0 0 0 2px rgba(124, 92, 240, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(184, 74, 74, 0.25);
+  --ui-glow-success: 0 0 0 2px rgba(47, 143, 122, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(12, 10, 12, 0.12);
+  --ui-shadow-md: 0 6px 18px rgba(12, 10, 12, 0.22);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #4a1d96;
+  --ui-logo-end: #7c5cf0;
+  --ui-logo-cutout: #f7f5f7;
+}
+
+:root[data-theme="obsidian-iris-dark"], [data-theme="obsidian-iris-dark"] {
+  color-scheme: dark;
+  --ui-bg: #120e11;
+  --ui-fg: #f3eff4;
+  --ui-fg-muted: #b9adb7;
+  --ui-surface: #1a1418;
+  --ui-surface-hover: #231c21;
+  --ui-border: rgba(243, 239, 244, 0.12);
+  --ui-primary: #9b7bff;
+  --ui-on-primary: #160a2a;
+  --ui-primary-muted: rgba(155, 123, 255, 0.14);
+  --ui-primary-hover: rgba(155, 123, 255, 0.22);
+  --ui-primary-active: rgba(155, 123, 255, 0.3);
+  --ui-secondary: #433c49;
+  --ui-on-secondary: #f3eff4;
+  --ui-secondary-muted: rgba(67, 60, 73, 0.16);
+  --ui-secondary-hover: rgba(67, 60, 73, 0.24);
+  --ui-secondary-active: rgba(67, 60, 73, 0.32);
+  --ui-accent: #b39aff;
+  --ui-on-accent: #160a2a;
+  --ui-accent-muted: rgba(179, 154, 255, 0.16);
+  --ui-accent-hover: rgba(179, 154, 255, 0.24);
+  --ui-accent-active: rgba(179, 154, 255, 0.32);
+  --ui-success: #5ec7ad;
+  --ui-on-success: #0e1815;
+  --ui-success-muted: rgba(94, 199, 173, 0.16);
+  --ui-success-hover: rgba(94, 199, 173, 0.24);
+  --ui-success-active: rgba(94, 199, 173, 0.32);
+  --ui-warning: #d9a15a;
+  --ui-on-warning: #1c1207;
+  --ui-warning-muted: rgba(217, 161, 90, 0.16);
+  --ui-warning-hover: rgba(217, 161, 90, 0.24);
+  --ui-warning-active: rgba(217, 161, 90, 0.32);
+  --ui-info: #7f95e6;
+  --ui-on-info: #12101f;
+  --ui-info-muted: rgba(127, 149, 230, 0.16);
+  --ui-info-hover: rgba(127, 149, 230, 0.24);
+  --ui-info-active: rgba(127, 149, 230, 0.32);
+  --ui-critical: #e28787;
+  --ui-on-critical: #14090b;
+  --ui-critical-muted: rgba(226, 135, 135, 0.16);
+  --ui-critical-hover: rgba(226, 135, 135, 0.24);
+  --ui-critical-active: rgba(226, 135, 135, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(243, 239, 244, 0.08);
+  --ui-tonal-secondary-hover: rgba(243, 239, 244, 0.14);
+  --ui-tonal-tertiary: rgba(243, 239, 244, 0.04);
+  --ui-tonal-tertiary-hover: rgba(243, 239, 244, 0.1);
+  --ui-ring: rgba(155, 123, 255, 0.5);
+  --ui-glow-primary: 0 0 0 2px rgba(155, 123, 255, 0.35);
+  --ui-glow-accent: 0 0 0 2px rgba(179, 154, 255, 0.35);
+  --ui-glow-critical: 0 0 0 2px rgba(226, 135, 135, 0.3);
+  --ui-glow-success: 0 0 0 2px rgba(94, 199, 173, 0.3);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --ui-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #a78bfa;
+  --ui-logo-end: #c4b5fd;
+  --ui-logo-cutout: #120e11;
+}

package/packages/ui/src/themes/pixpax.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="pixpax-light"], [data-theme="pixpax-light"] {
+  color-scheme: light;
+  --ui-bg: #f8f6ff;
+  --ui-fg: #241b2f;
+  --ui-fg-muted: #6d627b;
+  --ui-surface: #ffffff;
+  --ui-surface-hover: #f3eeff;
+  --ui-border: rgba(36, 27, 47, 0.1);
+  --ui-primary: #7c3aed;
+  --ui-on-primary: #fdfbff;
+  --ui-primary-muted: rgba(124, 58, 237, 0.14);
+  --ui-primary-hover: rgba(124, 58, 237, 0.22);
+  --ui-primary-active: rgba(124, 58, 237, 0.3);
+  --ui-secondary: #4b5563;
+  --ui-on-secondary: #fdfbff;
+  --ui-secondary-muted: rgba(75, 85, 99, 0.12);
+  --ui-secondary-hover: rgba(75, 85, 99, 0.2);
+  --ui-secondary-active: rgba(75, 85, 99, 0.28);
+  --ui-accent: #f59e0b;
+  --ui-on-accent: #2b1700;
+  --ui-accent-muted: rgba(245, 158, 11, 0.14);
+  --ui-accent-hover: rgba(245, 158, 11, 0.22);
+  --ui-accent-active: rgba(245, 158, 11, 0.3);
+  --ui-success: #10b981;
+  --ui-on-success: #f3fffb;
+  --ui-success-muted: rgba(16, 185, 129, 0.14);
+  --ui-success-hover: rgba(16, 185, 129, 0.22);
+  --ui-success-active: rgba(16, 185, 129, 0.3);
+  --ui-warning: #f59e0b;
+  --ui-on-warning: #2b1700;
+  --ui-warning-muted: rgba(245, 158, 11, 0.14);
+  --ui-warning-hover: rgba(245, 158, 11, 0.22);
+  --ui-warning-active: rgba(245, 158, 11, 0.3);
+  --ui-info: #06b6d4;
+  --ui-on-info: #ecfeff;
+  --ui-info-muted: rgba(6, 182, 212, 0.14);
+  --ui-info-hover: rgba(6, 182, 212, 0.22);
+  --ui-info-active: rgba(6, 182, 212, 0.3);
+  --ui-critical: #ec4899;
+  --ui-on-critical: #fff4fa;
+  --ui-critical-muted: rgba(236, 72, 153, 0.14);
+  --ui-critical-hover: rgba(236, 72, 153, 0.22);
+  --ui-critical-active: rgba(236, 72, 153, 0.3);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(36, 27, 47, 0.05);
+  --ui-tonal-secondary-hover: rgba(36, 27, 47, 0.09);
+  --ui-tonal-tertiary: rgba(36, 27, 47, 0.025);
+  --ui-tonal-tertiary-hover: rgba(36, 27, 47, 0.06);
+  --ui-ring: rgba(124, 58, 237, 0.38);
+  --ui-glow-primary: 0 0 0 2px rgba(124, 58, 237, 0.22);
+  --ui-glow-accent: 0 0 0 2px rgba(245, 158, 11, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(236, 72, 153, 0.22);
+  --ui-glow-success: 0 0 0 2px rgba(16, 185, 129, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(36, 27, 47, 0.1);
+  --ui-shadow-md: 0 10px 28px rgba(85, 47, 140, 0.16);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #7c3aed;
+  --ui-logo-end: #f59e0b;
+  --ui-logo-cutout: #f8f6ff;
+}
+
+:root[data-theme="pixpax-dark"], [data-theme="pixpax-dark"] {
+  color-scheme: dark;
+  --ui-bg: #120f1f;
+  --ui-fg: #f6f2ff;
+  --ui-fg-muted: #b7add1;
+  --ui-surface: #1a1630;
+  --ui-surface-hover: #241d40;
+  --ui-border: rgba(246, 242, 255, 0.08);
+  --ui-primary: #a855f7;
+  --ui-on-primary: #190a26;
+  --ui-primary-muted: rgba(168, 85, 247, 0.16);
+  --ui-primary-hover: rgba(168, 85, 247, 0.24);
+  --ui-primary-active: rgba(168, 85, 247, 0.32);
+  --ui-secondary: #7c6f9f;
+  --ui-on-secondary: #120f1f;
+  --ui-secondary-muted: rgba(124, 111, 159, 0.16);
+  --ui-secondary-hover: rgba(124, 111, 159, 0.24);
+  --ui-secondary-active: rgba(124, 111, 159, 0.32);
+  --ui-accent: #fbbf24;
+  --ui-on-accent: #2a1b00;
+  --ui-accent-muted: rgba(251, 191, 36, 0.16);
+  --ui-accent-hover: rgba(251, 191, 36, 0.24);
+  --ui-accent-active: rgba(251, 191, 36, 0.32);
+  --ui-success: #34d399;
+  --ui-on-success: #062116;
+  --ui-success-muted: rgba(52, 211, 153, 0.16);
+  --ui-success-hover: rgba(52, 211, 153, 0.24);
+  --ui-success-active: rgba(52, 211, 153, 0.32);
+  --ui-warning: #f59e0b;
+  --ui-on-warning: #2b1700;
+  --ui-warning-muted: rgba(245, 158, 11, 0.16);
+  --ui-warning-hover: rgba(245, 158, 11, 0.24);
+  --ui-warning-active: rgba(245, 158, 11, 0.32);
+  --ui-info: #22d3ee;
+  --ui-on-info: #06202a;
+  --ui-info-muted: rgba(34, 211, 238, 0.16);
+  --ui-info-hover: rgba(34, 211, 238, 0.24);
+  --ui-info-active: rgba(34, 211, 238, 0.32);
+  --ui-critical: #f472b6;
+  --ui-on-critical: #2a0b1d;
+  --ui-critical-muted: rgba(244, 114, 182, 0.16);
+  --ui-critical-hover: rgba(244, 114, 182, 0.24);
+  --ui-critical-active: rgba(244, 114, 182, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(246, 242, 255, 0.06);
+  --ui-tonal-secondary-hover: rgba(246, 242, 255, 0.12);
+  --ui-tonal-tertiary: rgba(246, 242, 255, 0.03);
+  --ui-tonal-tertiary-hover: rgba(246, 242, 255, 0.08);
+  --ui-ring: rgba(168, 85, 247, 0.42);
+  --ui-glow-primary: 0 0 0 2px rgba(168, 85, 247, 0.32);
+  --ui-glow-accent: 0 0 0 2px rgba(251, 191, 36, 0.28);
+  --ui-glow-critical: 0 0 0 2px rgba(244, 114, 182, 0.28);
+  --ui-glow-success: 0 0 0 2px rgba(52, 211, 153, 0.28);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --ui-shadow-md: 0 14px 40px rgba(5, 0, 20, 0.58);
+  --ui-radius-sm: 6px;
+  --ui-radius-md: 10px;
+  --ui-radius-lg: 14px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 180ms;
+  --ui-duration-slow: 240ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.98;
+  --ui-logo-start: #a855f7;
+  --ui-logo-end: #fbbf24;
+  --ui-logo-cutout: #120f1f;
+}

package/packages/ui/src/themes/print.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="print-light"], [data-theme="print-light"] {
+  color-scheme: light;
+  --ui-bg: #fbf7f0;
+  --ui-fg: #181615;
+  --ui-fg-muted: #5f5b55;
+  --ui-surface: #f2ece2;
+  --ui-surface-hover: #e7e0d4;
+  --ui-border: rgba(24, 22, 21, 0.12);
+  --ui-primary: #4c1d95;
+  --ui-on-primary: #fbf7f0;
+  --ui-primary-muted: rgba(76, 29, 149, 0.14);
+  --ui-primary-hover: rgba(76, 29, 149, 0.22);
+  --ui-primary-active: rgba(76, 29, 149, 0.3);
+  --ui-accent: #f59e0b;
+  --ui-on-accent: #181615;
+  --ui-accent-muted: rgba(245, 158, 11, 0.14);
+  --ui-accent-hover: rgba(245, 158, 11, 0.22);
+  --ui-accent-active: rgba(245, 158, 11, 0.3);
+  --ui-secondary: #0f766e;
+  --ui-on-secondary: #fbf7f0;
+  --ui-secondary-muted: rgba(15, 118, 110, 0.14);
+  --ui-secondary-hover: rgba(15, 118, 110, 0.22);
+  --ui-secondary-active: rgba(15, 118, 110, 0.3);
+  --ui-critical: #b91c1c;
+  --ui-on-critical: #fbf7f0;
+  --ui-critical-muted: rgba(185, 28, 28, 0.16);
+  --ui-critical-hover: rgba(185, 28, 28, 0.24);
+  --ui-critical-active: rgba(185, 28, 28, 0.32);
+  --ui-success: #15803d;
+  --ui-on-success: #fbf7f0;
+  --ui-success-muted: rgba(21, 128, 61, 0.16);
+  --ui-success-hover: rgba(21, 128, 61, 0.24);
+  --ui-success-active: rgba(21, 128, 61, 0.32);
+  --ui-warning: #b45309;
+  --ui-on-warning: #fbf7f0;
+  --ui-warning-muted: rgba(180, 83, 9, 0.16);
+  --ui-warning-hover: rgba(180, 83, 9, 0.24);
+  --ui-warning-active: rgba(180, 83, 9, 0.32);
+  --ui-info: #1d4ed8;
+  --ui-on-info: #fbf7f0;
+  --ui-info-muted: rgba(29, 78, 216, 0.16);
+  --ui-info-hover: rgba(29, 78, 216, 0.24);
+  --ui-info-active: rgba(29, 78, 216, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(24, 22, 21, 0.06);
+  --ui-tonal-secondary-hover: rgba(24, 22, 21, 0.1);
+  --ui-tonal-tertiary: rgba(24, 22, 21, 0.03);
+  --ui-tonal-tertiary-hover: rgba(24, 22, 21, 0.07);
+  --ui-ring: rgba(76, 29, 149, 0.4);
+  --ui-glow-primary: 0 0 0 2px rgba(76, 29, 149, 0.25);
+  --ui-glow-accent: 0 0 0 2px rgba(245, 158, 11, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(185, 28, 28, 0.25);
+  --ui-glow-success: 0 0 0 2px rgba(21, 128, 61, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(10, 8, 6, 0.12);
+  --ui-shadow-md: 0 6px 18px rgba(10, 8, 6, 0.22);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #FF5757;
+  --ui-logo-end: #8C52FF;
+  --ui-logo-cutout: #fbf7f0;
+}
+
+:root[data-theme="print-dark"], [data-theme="print-dark"] {
+  color-scheme: dark;
+  --ui-bg: #141311;
+  --ui-fg: #e9e6df;
+  --ui-fg-muted: #b7b2a8;
+  --ui-surface: #1b1a18;
+  --ui-surface-hover: #24231f;
+  --ui-border: rgba(233, 230, 223, 0.12);
+  --ui-primary: #c4b5fd;
+  --ui-on-primary: #141311;
+  --ui-primary-muted: rgba(196, 181, 253, 0.14);
+  --ui-primary-hover: rgba(196, 181, 253, 0.22);
+  --ui-primary-active: rgba(196, 181, 253, 0.3);
+  --ui-accent: #fcd34d;
+  --ui-on-accent: #141311;
+  --ui-accent-muted: rgba(252, 211, 77, 0.16);
+  --ui-accent-hover: rgba(252, 211, 77, 0.24);
+  --ui-accent-active: rgba(252, 211, 77, 0.32);
+  --ui-secondary: #5eead4;
+  --ui-on-secondary: #0b1411;
+  --ui-secondary-muted: rgba(94, 234, 212, 0.16);
+  --ui-secondary-hover: rgba(94, 234, 212, 0.24);
+  --ui-secondary-active: rgba(94, 234, 212, 0.32);
+  --ui-critical: #fca5a5;
+  --ui-on-critical: #141311;
+  --ui-critical-muted: rgba(252, 165, 165, 0.16);
+  --ui-critical-hover: rgba(252, 165, 165, 0.24);
+  --ui-critical-active: rgba(252, 165, 165, 0.32);
+  --ui-success: #86efac;
+  --ui-on-success: #0b1411;
+  --ui-success-muted: rgba(134, 239, 172, 0.16);
+  --ui-success-hover: rgba(134, 239, 172, 0.24);
+  --ui-success-active: rgba(134, 239, 172, 0.32);
+  --ui-warning: #fbbf24;
+  --ui-on-warning: #141311;
+  --ui-warning-muted: rgba(251, 191, 36, 0.16);
+  --ui-warning-hover: rgba(251, 191, 36, 0.24);
+  --ui-warning-active: rgba(251, 191, 36, 0.32);
+  --ui-info: #93c5fd;
+  --ui-on-info: #0b1411;
+  --ui-info-muted: rgba(147, 197, 253, 0.16);
+  --ui-info-hover: rgba(147, 197, 253, 0.24);
+  --ui-info-active: rgba(147, 197, 253, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(233, 230, 223, 0.08);
+  --ui-tonal-secondary-hover: rgba(233, 230, 223, 0.14);
+  --ui-tonal-tertiary: rgba(233, 230, 223, 0.04);
+  --ui-tonal-tertiary-hover: rgba(233, 230, 223, 0.1);
+  --ui-ring: rgba(196, 181, 253, 0.5);
+  --ui-glow-primary: 0 0 0 2px rgba(196, 181, 253, 0.35);
+  --ui-glow-accent: 0 0 0 2px rgba(252, 211, 77, 0.35);
+  --ui-glow-critical: 0 0 0 2px rgba(252, 165, 165, 0.3);
+  --ui-glow-success: 0 0 0 2px rgba(134, 239, 172, 0.3);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --ui-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #FF6B6B;
+  --ui-logo-end: #A78BFA;
+  --ui-logo-cutout: #141311;
+}