@fluixi-ui/tokens 0.4.0-alpha.0 → 0.4.0-alpha.2

package/dist/tokens.css

@@ -0,0 +1,587 @@
+@layer flx.tokens, flx.components, flx.skin;
+
+@layer flx.tokens {
+:root, [data-theme='light'] {
+  --flx-ui-space-0: 0px;
+  --flx-ui-space-1: 0.25rem;
+  --flx-ui-space-2: 0.5rem;
+  --flx-ui-space-3: 0.75rem;
+  --flx-ui-space-4: 1rem;
+  --flx-ui-space-5: 1.25rem;
+  --flx-ui-space-6: 1.5rem;
+  --flx-ui-space-8: 2rem;
+  --flx-ui-space-10: 2.5rem;
+  --flx-ui-space-12: 3rem;
+  --flx-ui-space-16: 4rem;
+  --flx-ui-space-20: 5rem;
+  --flx-ui-space-24: 6rem;
+  --flx-ui-size-xs: 1.5rem;
+  --flx-ui-size-sm: 2rem;
+  --flx-ui-size-md: 2.5rem;
+  --flx-ui-size-lg: 3rem;
+  --flx-ui-size-xl: 3.5rem;
+  --flx-ui-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --flx-ui-font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --flx-ui-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --flx-ui-font-size-xs: 0.75rem;
+  --flx-ui-font-size-sm: 0.875rem;
+  --flx-ui-font-size-md: 1rem;
+  --flx-ui-font-size-lg: 1.125rem;
+  --flx-ui-font-size-xl: 1.25rem;
+  --flx-ui-font-size-2xl: 1.5rem;
+  --flx-ui-font-size-3xl: 1.875rem;
+  --flx-ui-font-size-4xl: 2.25rem;
+  --flx-ui-font-weight-normal: 400;
+  --flx-ui-font-weight-medium: 500;
+  --flx-ui-font-weight-semibold: 600;
+  --flx-ui-font-weight-bold: 700;
+  --flx-ui-line-height-none: 1;
+  --flx-ui-line-height-tight: 1.25;
+  --flx-ui-line-height-normal: 1.5;
+  --flx-ui-line-height-relaxed: 1.75;
+  --flx-ui-letter-spacing-tight: -0.01em;
+  --flx-ui-letter-spacing-normal: 0em;
+  --flx-ui-letter-spacing-wide: 0.02em;
+  --flx-ui-radius-none: 0px;
+  --flx-ui-radius-sm: 0.25rem;
+  --flx-ui-radius-md: 0.375rem;
+  --flx-ui-radius-lg: 0.5rem;
+  --flx-ui-radius-xl: 0.75rem;
+  --flx-ui-radius-full: 9999px;
+  --flx-ui-border-width-none: 0px;
+  --flx-ui-border-width-thin: 1px;
+  --flx-ui-border-width-thick: 2px;
+  --flx-ui-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
+  --flx-ui-shadow-md: 0 2px 4px -1px rgba(17, 24, 39, 0.06), 0 4px 8px -2px rgba(17, 24, 39, 0.05);
+  --flx-ui-shadow-lg: 0 4px 8px -2px rgba(17, 24, 39, 0.06), 0 12px 20px -6px rgba(17, 24, 39, 0.10);
+  --flx-ui-shadow-xl: 0 8px 16px -4px rgba(17, 24, 39, 0.08), 0 20px 32px -12px rgba(17, 24, 39, 0.14);
+  --flx-ui-duration-instant: 0ms;
+  --flx-ui-duration-fast: 150ms;
+  --flx-ui-duration-normal: 200ms;
+  --flx-ui-duration-slow: 300ms;
+  --flx-ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --flx-ui-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --flx-ui-ease-linear: linear;
+  --flx-ui-opacity-0: 0;
+  --flx-ui-opacity-25: 0.25;
+  --flx-ui-opacity-50: 0.5;
+  --flx-ui-opacity-75: 0.75;
+  --flx-ui-opacity-100: 1;
+  --flx-ui-opacity-disabled: 0.5;
+  --flx-ui-blur-sm: 4px;
+  --flx-ui-blur-md: 8px;
+  --flx-ui-blur-lg: 16px;
+  --flx-ui-z-hide: -1;
+  --flx-ui-z-base: 0;
+  --flx-ui-z-dropdown: 1000;
+  --flx-ui-z-sticky: 1100;
+  --flx-ui-z-overlay: 1200;
+  --flx-ui-z-modal: 1300;
+  --flx-ui-z-popover: 1400;
+  --flx-ui-z-toast: 1500;
+  --flx-ui-z-tooltip: 1600;
+  --flx-ui-z-max: 2147483647;
+  --flx-ui-elevation-1: var(--flx-ui-shadow-sm);
+  --flx-ui-elevation-2: var(--flx-ui-shadow-md);
+  --flx-ui-elevation-3: var(--flx-ui-shadow-lg);
+  --flx-ui-elevation-4: var(--flx-ui-shadow-xl);
+  --flx-ui-breakpoint-sm: 640px;
+  --flx-ui-breakpoint-md: 768px;
+  --flx-ui-breakpoint-lg: 1024px;
+  --flx-ui-breakpoint-xl: 1280px;
+  --flx-ui-breakpoint-2xl: 1536px;
+  --flx-ui-gray-1: #fcfcfd;
+  --flx-ui-gray-2: #f9fafb;
+  --flx-ui-gray-3: #f1f2f4;
+  --flx-ui-gray-4: #eaecef;
+  --flx-ui-gray-5: #e3e5e9;
+  --flx-ui-gray-6: #dcdfe3;
+  --flx-ui-gray-7: #ced2d8;
+  --flx-ui-gray-8: #b8bdc6;
+  --flx-ui-gray-9: #8a9099;
+  --flx-ui-gray-10: #7e848d;
+  --flx-ui-gray-11: #60646c;
+  --flx-ui-gray-12: #1a1d21;
+  --flx-ui-accent-1: #fbfdff;
+  --flx-ui-accent-2: #f3f8ff;
+  --flx-ui-accent-3: #e7f1ff;
+  --flx-ui-accent-4: #d7e7ff;
+  --flx-ui-accent-5: #c3dafe;
+  --flx-ui-accent-6: #aac8fb;
+  --flx-ui-accent-7: #87aff5;
+  --flx-ui-accent-8: #568eec;
+  --flx-ui-accent-9: #2563eb;
+  --flx-ui-accent-10: #1b57d8;
+  --flx-ui-accent-11: #295ec2;
+  --flx-ui-accent-12: #12275c;
+  --flx-ui-danger-solid: #e5484d;
+  --flx-ui-danger-subtle: #feebec;
+  --flx-ui-danger-fg: #ffffff;
+  --flx-ui-success-solid: #30a46c;
+  --flx-ui-success-subtle: #e6f6ec;
+  --flx-ui-success-fg: #ffffff;
+  --flx-ui-warning-solid: #ffb224;
+  --flx-ui-warning-subtle: #fff4d5;
+  --flx-ui-warning-fg: #1c2024;
+  --flx-ui-color-bg: var(--flx-ui-gray-1);
+  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
+  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
+  --flx-ui-color-fg: var(--flx-ui-gray-12);
+  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
+  --flx-ui-color-border: var(--flx-ui-gray-6);
+  --flx-ui-color-border-strong: var(--flx-ui-gray-7);
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-fg: #ffffff;
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-danger: var(--flx-ui-danger-solid);
+  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
+  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-success: var(--flx-ui-success-solid);
+  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
+  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-warning: var(--flx-ui-warning-solid);
+  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
+  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='dark'] {
+  --flx-ui-gray-1: #0e0f11;
+  --flx-ui-gray-2: #161719;
+  --flx-ui-gray-3: #1d1f22;
+  --flx-ui-gray-4: #232629;
+  --flx-ui-gray-5: #292d31;
+  --flx-ui-gray-6: #31353a;
+  --flx-ui-gray-7: #3d424a;
+  --flx-ui-gray-8: #4e545e;
+  --flx-ui-gray-9: #5c626c;
+  --flx-ui-gray-10: #697079;
+  --flx-ui-gray-11: #a5abb3;
+  --flx-ui-gray-12: #eceef0;
+  --flx-ui-accent-1: #0c1420;
+  --flx-ui-accent-2: #0f1a2c;
+  --flx-ui-accent-3: #0f2547;
+  --flx-ui-accent-4: #0e2f5a;
+  --flx-ui-accent-5: #153a6b;
+  --flx-ui-accent-6: #1e477d;
+  --flx-ui-accent-7: #265795;
+  --flx-ui-accent-8: #2e6ab8;
+  --flx-ui-accent-9: #3162cf;
+  --flx-ui-accent-10: #4074e2;
+  --flx-ui-accent-11: #8fb4fb;
+  --flx-ui-accent-12: #d6e6ff;
+  --flx-ui-danger-solid: #ff6369;
+  --flx-ui-danger-subtle: #3b1219;
+  --flx-ui-danger-fg: #ffffff;
+  --flx-ui-success-solid: #3dd68c;
+  --flx-ui-success-subtle: #0f291e;
+  --flx-ui-success-fg: #ffffff;
+  --flx-ui-warning-solid: #ffca16;
+  --flx-ui-warning-subtle: #3a2e00;
+  --flx-ui-warning-fg: #1c2024;
+  --flx-ui-color-bg: var(--flx-ui-gray-1);
+  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
+  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
+  --flx-ui-color-fg: var(--flx-ui-gray-12);
+  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
+  --flx-ui-color-border: var(--flx-ui-gray-6);
+  --flx-ui-color-border-strong: var(--flx-ui-gray-7);
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-fg: #ffffff;
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-danger: var(--flx-ui-danger-solid);
+  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
+  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-success: var(--flx-ui-success-solid);
+  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
+  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-warning: var(--flx-ui-warning-solid);
+  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
+  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
+  --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --flx-ui-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.36);
+  --flx-ui-shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.42);
+}
+
+[data-theme='high-contrast'] {
+  --flx-ui-gray-1: #ffffff;
+  --flx-ui-gray-2: #f9fafb;
+  --flx-ui-gray-3: #f1f2f4;
+  --flx-ui-gray-4: #eaecef;
+  --flx-ui-gray-5: #e3e5e9;
+  --flx-ui-gray-6: #8a9099;
+  --flx-ui-gray-7: #ced2d8;
+  --flx-ui-gray-8: #5f636b;
+  --flx-ui-gray-9: #8a9099;
+  --flx-ui-gray-10: #7e848d;
+  --flx-ui-gray-11: #60646c;
+  --flx-ui-gray-12: #000000;
+  --flx-ui-accent-1: #fbfdff;
+  --flx-ui-accent-2: #f3f8ff;
+  --flx-ui-accent-3: #e7f1ff;
+  --flx-ui-accent-4: #d7e7ff;
+  --flx-ui-accent-5: #c3dafe;
+  --flx-ui-accent-6: #aac8fb;
+  --flx-ui-accent-7: #87aff5;
+  --flx-ui-accent-8: #568eec;
+  --flx-ui-accent-9: #123f9c;
+  --flx-ui-accent-10: #0e3176;
+  --flx-ui-accent-11: #295ec2;
+  --flx-ui-accent-12: #12275c;
+  --flx-ui-danger-solid: #e5484d;
+  --flx-ui-danger-subtle: #feebec;
+  --flx-ui-danger-fg: #ffffff;
+  --flx-ui-success-solid: #30a46c;
+  --flx-ui-success-subtle: #e6f6ec;
+  --flx-ui-success-fg: #ffffff;
+  --flx-ui-warning-solid: #ffb224;
+  --flx-ui-warning-subtle: #fff4d5;
+  --flx-ui-warning-fg: #1c2024;
+  --flx-ui-color-bg: var(--flx-ui-gray-1);
+  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
+  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
+  --flx-ui-color-fg: var(--flx-ui-gray-12);
+  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
+  --flx-ui-color-border: var(--flx-ui-gray-12);
+  --flx-ui-color-border-strong: var(--flx-ui-gray-12);
+  --flx-ui-color-focus-ring: var(--flx-ui-gray-12);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-fg: #ffffff;
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-danger: var(--flx-ui-danger-solid);
+  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
+  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-success: var(--flx-ui-success-solid);
+  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
+  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-warning: var(--flx-ui-warning-solid);
+  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
+  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --flx-ui-gray-1: #0e0f11;
+    --flx-ui-gray-2: #161719;
+    --flx-ui-gray-3: #1d1f22;
+    --flx-ui-gray-4: #232629;
+    --flx-ui-gray-5: #292d31;
+    --flx-ui-gray-6: #31353a;
+    --flx-ui-gray-7: #3d424a;
+    --flx-ui-gray-8: #4e545e;
+    --flx-ui-gray-9: #5c626c;
+    --flx-ui-gray-10: #697079;
+    --flx-ui-gray-11: #a5abb3;
+    --flx-ui-gray-12: #eceef0;
+    --flx-ui-accent-1: #0c1420;
+    --flx-ui-accent-2: #0f1a2c;
+    --flx-ui-accent-3: #0f2547;
+    --flx-ui-accent-4: #0e2f5a;
+    --flx-ui-accent-5: #153a6b;
+    --flx-ui-accent-6: #1e477d;
+    --flx-ui-accent-7: #265795;
+    --flx-ui-accent-8: #2e6ab8;
+    --flx-ui-accent-9: #3162cf;
+    --flx-ui-accent-10: #4074e2;
+    --flx-ui-accent-11: #8fb4fb;
+    --flx-ui-accent-12: #d6e6ff;
+    --flx-ui-danger-solid: #ff6369;
+    --flx-ui-danger-subtle: #3b1219;
+    --flx-ui-danger-fg: #ffffff;
+    --flx-ui-success-solid: #3dd68c;
+    --flx-ui-success-subtle: #0f291e;
+    --flx-ui-success-fg: #ffffff;
+    --flx-ui-warning-solid: #ffca16;
+    --flx-ui-warning-subtle: #3a2e00;
+    --flx-ui-warning-fg: #1c2024;
+    --flx-ui-color-bg: var(--flx-ui-gray-1);
+    --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
+    --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
+    --flx-ui-color-fg: var(--flx-ui-gray-12);
+    --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
+    --flx-ui-color-border: var(--flx-ui-gray-6);
+    --flx-ui-color-border-strong: var(--flx-ui-gray-7);
+    --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+    --flx-ui-color-primary: var(--flx-ui-accent-9);
+    --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+    --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+    --flx-ui-color-primary-fg: #ffffff;
+    --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+    --flx-ui-color-danger: var(--flx-ui-danger-solid);
+    --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
+    --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+    --flx-ui-color-success: var(--flx-ui-success-solid);
+    --flx-ui-color-success-fg: var(--flx-ui-success-fg);
+    --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+    --flx-ui-color-warning: var(--flx-ui-warning-solid);
+    --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
+    --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+    --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
+    --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --flx-ui-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.36);
+    --flx-ui-shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.42);
+  }
+}
+
+:root[data-accent='violet'], [data-theme='light'][data-accent='violet'] {
+  --flx-ui-accent-1: #fdfcfe;
+  --flx-ui-accent-2: #faf8ff;
+  --flx-ui-accent-3: #f4f0fe;
+  --flx-ui-accent-4: #ebe4ff;
+  --flx-ui-accent-5: #e1d5ff;
+  --flx-ui-accent-6: #d4c4fb;
+  --flx-ui-accent-7: #c2adf0;
+  --flx-ui-accent-8: #aa8fe0;
+  --flx-ui-accent-9: #6e56cf;
+  --flx-ui-accent-10: #654dc4;
+  --flx-ui-accent-11: #6550b9;
+  --flx-ui-accent-12: #2f265f;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='dark'][data-accent='violet'] {
+  --flx-ui-accent-1: #14121f;
+  --flx-ui-accent-2: #1b1525;
+  --flx-ui-accent-3: #291f43;
+  --flx-ui-accent-4: #33255b;
+  --flx-ui-accent-5: #3c2e69;
+  --flx-ui-accent-6: #473876;
+  --flx-ui-accent-7: #56468b;
+  --flx-ui-accent-8: #6958ad;
+  --flx-ui-accent-9: #6e56cf;
+  --flx-ui-accent-10: #7d66d9;
+  --flx-ui-accent-11: #baa7ff;
+  --flx-ui-accent-12: #e2ddfe;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='high-contrast'][data-accent='violet'] {
+  --flx-ui-accent-1: #fdfcfe;
+  --flx-ui-accent-2: #faf8ff;
+  --flx-ui-accent-3: #f4f0fe;
+  --flx-ui-accent-4: #ebe4ff;
+  --flx-ui-accent-5: #e1d5ff;
+  --flx-ui-accent-6: #d4c4fb;
+  --flx-ui-accent-7: #c2adf0;
+  --flx-ui-accent-8: #aa8fe0;
+  --flx-ui-accent-9: #6e56cf;
+  --flx-ui-accent-10: #654dc4;
+  --flx-ui-accent-11: #6550b9;
+  --flx-ui-accent-12: #2f265f;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme])[data-accent='violet'] {
+    --flx-ui-accent-1: #14121f;
+    --flx-ui-accent-2: #1b1525;
+    --flx-ui-accent-3: #291f43;
+    --flx-ui-accent-4: #33255b;
+    --flx-ui-accent-5: #3c2e69;
+    --flx-ui-accent-6: #473876;
+    --flx-ui-accent-7: #56468b;
+    --flx-ui-accent-8: #6958ad;
+    --flx-ui-accent-9: #6e56cf;
+    --flx-ui-accent-10: #7d66d9;
+    --flx-ui-accent-11: #baa7ff;
+    --flx-ui-accent-12: #e2ddfe;
+    --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+    --flx-ui-color-primary: var(--flx-ui-accent-9);
+    --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+    --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+    --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  }
+}
+
+:root[data-accent='rose'], [data-theme='light'][data-accent='rose'] {
+  --flx-ui-accent-1: #fffcfd;
+  --flx-ui-accent-2: #fef7f9;
+  --flx-ui-accent-3: #ffe9f0;
+  --flx-ui-accent-4: #fedce7;
+  --flx-ui-accent-5: #facedd;
+  --flx-ui-accent-6: #f3bed1;
+  --flx-ui-accent-7: #eaacc3;
+  --flx-ui-accent-8: #e093b2;
+  --flx-ui-accent-9: #e93d82;
+  --flx-ui-accent-10: #df3478;
+  --flx-ui-accent-11: #cb1d63;
+  --flx-ui-accent-12: #621639;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='dark'][data-accent='rose'] {
+  --flx-ui-accent-1: #191114;
+  --flx-ui-accent-2: #201318;
+  --flx-ui-accent-3: #381525;
+  --flx-ui-accent-4: #4d122f;
+  --flx-ui-accent-5: #5c1839;
+  --flx-ui-accent-6: #6d2545;
+  --flx-ui-accent-7: #873356;
+  --flx-ui-accent-8: #b0436e;
+  --flx-ui-accent-9: #e93d82;
+  --flx-ui-accent-10: #ee518a;
+  --flx-ui-accent-11: #ff92ad;
+  --flx-ui-accent-12: #fdd3e8;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='high-contrast'][data-accent='rose'] {
+  --flx-ui-accent-1: #fffcfd;
+  --flx-ui-accent-2: #fef7f9;
+  --flx-ui-accent-3: #ffe9f0;
+  --flx-ui-accent-4: #fedce7;
+  --flx-ui-accent-5: #facedd;
+  --flx-ui-accent-6: #f3bed1;
+  --flx-ui-accent-7: #eaacc3;
+  --flx-ui-accent-8: #e093b2;
+  --flx-ui-accent-9: #e93d82;
+  --flx-ui-accent-10: #df3478;
+  --flx-ui-accent-11: #cb1d63;
+  --flx-ui-accent-12: #621639;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme])[data-accent='rose'] {
+    --flx-ui-accent-1: #191114;
+    --flx-ui-accent-2: #201318;
+    --flx-ui-accent-3: #381525;
+    --flx-ui-accent-4: #4d122f;
+    --flx-ui-accent-5: #5c1839;
+    --flx-ui-accent-6: #6d2545;
+    --flx-ui-accent-7: #873356;
+    --flx-ui-accent-8: #b0436e;
+    --flx-ui-accent-9: #e93d82;
+    --flx-ui-accent-10: #ee518a;
+    --flx-ui-accent-11: #ff92ad;
+    --flx-ui-accent-12: #fdd3e8;
+    --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+    --flx-ui-color-primary: var(--flx-ui-accent-9);
+    --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+    --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+    --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  }
+}
+
+:root[data-accent='green'], [data-theme='light'][data-accent='green'] {
+  --flx-ui-accent-1: #fbfefb;
+  --flx-ui-accent-2: #f5fbf5;
+  --flx-ui-accent-3: #e9f6e9;
+  --flx-ui-accent-4: #daf1db;
+  --flx-ui-accent-5: #c9e8ca;
+  --flx-ui-accent-6: #b2ddb5;
+  --flx-ui-accent-7: #94ce9a;
+  --flx-ui-accent-8: #65ba74;
+  --flx-ui-accent-9: #46a758;
+  --flx-ui-accent-10: #3e9b4f;
+  --flx-ui-accent-11: #2a7e3b;
+  --flx-ui-accent-12: #203c25;
+  --flx-ui-color-primary-fg: #0c2617;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='dark'][data-accent='green'] {
+  --flx-ui-accent-1: #0e1511;
+  --flx-ui-accent-2: #141a15;
+  --flx-ui-accent-3: #1b2a1e;
+  --flx-ui-accent-4: #1d3a24;
+  --flx-ui-accent-5: #25482d;
+  --flx-ui-accent-6: #2d5736;
+  --flx-ui-accent-7: #366740;
+  --flx-ui-accent-8: #3e7949;
+  --flx-ui-accent-9: #46a758;
+  --flx-ui-accent-10: #53b365;
+  --flx-ui-accent-11: #71d083;
+  --flx-ui-accent-12: #c2f0c2;
+  --flx-ui-color-primary-fg: #0c2617;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+[data-theme='high-contrast'][data-accent='green'] {
+  --flx-ui-accent-1: #fbfefb;
+  --flx-ui-accent-2: #f5fbf5;
+  --flx-ui-accent-3: #e9f6e9;
+  --flx-ui-accent-4: #daf1db;
+  --flx-ui-accent-5: #c9e8ca;
+  --flx-ui-accent-6: #b2ddb5;
+  --flx-ui-accent-7: #94ce9a;
+  --flx-ui-accent-8: #65ba74;
+  --flx-ui-accent-9: #46a758;
+  --flx-ui-accent-10: #3e9b4f;
+  --flx-ui-accent-11: #2a7e3b;
+  --flx-ui-accent-12: #203c25;
+  --flx-ui-color-primary-fg: #0c2617;
+  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+  --flx-ui-color-primary: var(--flx-ui-accent-9);
+  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme])[data-accent='green'] {
+    --flx-ui-accent-1: #0e1511;
+    --flx-ui-accent-2: #141a15;
+    --flx-ui-accent-3: #1b2a1e;
+    --flx-ui-accent-4: #1d3a24;
+    --flx-ui-accent-5: #25482d;
+    --flx-ui-accent-6: #2d5736;
+    --flx-ui-accent-7: #366740;
+    --flx-ui-accent-8: #3e7949;
+    --flx-ui-accent-9: #46a758;
+    --flx-ui-accent-10: #53b365;
+    --flx-ui-accent-11: #71d083;
+    --flx-ui-accent-12: #c2f0c2;
+    --flx-ui-color-primary-fg: #0c2617;
+    --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
+    --flx-ui-color-primary: var(--flx-ui-accent-9);
+    --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
+    --flx-ui-color-primary-active: var(--flx-ui-accent-11);
+    --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  }
+}
+}