@solidxai/core-ui 0.1.12-beta.2 → 0.1.12-beta.5

package/dist/resources/themes/solid-dark-purple/theme.css

@@ -1,188 +1,4 @@
-:root {
-  --surface-a: #18191D;
-  --surface-b: #161616;
-  --surface-c: rgba(255, 255, 255, 0.03);
-  --surface-d: rgba(216, 226, 234, 0.08);
-  --surface-e: #18191D;
-  --surface-f: #18191D;
-  --text-color: #FFFFFF;
-  --text-color-secondary: rgba(255, 255, 255, 0.6);
-  --primary-color: var(--primary);
-  --primary-color-text: var(--primary-foreground, #030712);
-  --surface-0: #161616;
-  --surface-50: #18191D;
-  --surface-100: #374151;
-  --surface-200: #4b5563;
-  --surface-300: #6b7280;
-  --surface-400: #9ca3af;
-  --surface-500: #d1d5db;
-  --surface-600: #e5e7eb;
-  --surface-700: #f3f4f6;
-  --surface-800: #f9fafb;
-  --surface-900: #ffffff;
-  --gray-50: #f9fafb;
-  --gray-100: #f3f4f6;
-  --gray-200: #e5e7eb;
-  --gray-300: #d1d5db;
-  --gray-400: #9ca3af;
-  --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #18191D;
-  --gray-900: #161616;
-  --content-padding: 1.25rem;
-  --inline-spacing: 0.5rem;
-  --border-radius: 6px;
-  --surface-ground: #161616;
-  --surface-section: #161616;
-  --surface-card: #18191D;
-  --surface-overlay: #18191D;
-  --surface-border: rgba(255, 255, 255, 0.1);
-  --surface-hover: rgba(255, 255, 255, 0.03);
-  --focus-ring: 0 0 0 0.2rem var(--ring, rgba(179, 127, 235, 0.35));
-  --maskbg: rgba(0, 0, 0, 0.4);
-  --primary-light-color: rgba(216, 226, 234, 0.08);
-  --highlight-bg: rgba(140, 100, 255, 0.18);
-  --hightlight-bg-secondary: #161616;
-  --highlight-text-color: #FFFFFF;
-  --icon-color: #FFFFFF;
-  --solid-login-bg-color: #000000;
-  --solid-light-grey: #161616;
-  --solid-stepper-border: rgba(216, 226, 234, 0.08);
-  --solid-dark-title: #FFFFFF;
-  --solid-dropzone-bg: rgba(255, 255, 255, 0.03);
-  --solid-file-wrapper: rgba(216, 226, 234, 0.08);
-  --solid-chatter-dash: rgba(216, 226, 234, 0.08);
-  --solid-chatter-date-border: rgba(216, 226, 234, 0.08);
-  --solid-chatter-input-bg: #161616;
-  --solid-chatter-input-placeholder: #949494;
-  --solid-dashboard-welcome-bg: #260955;
-  --solid-dashboard-card-one-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-two-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-three-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-one-bg: linear-gradient(111deg, rgba(226, 241, 247, 0.60) 0%, rgba(208, 235, 254, 0.60) 50%, rgba(192, 226, 250, 0.60) 100%);
-  --solid-dashboard-card-two-bg: linear-gradient(291deg, rgba(241, 226, 255, 0.60) 0%, rgba(238, 215, 255, 0.60) 46.5%, rgba(231, 200, 255, 0.60) 100%);
-  --solid-dashboard-card-three-bg: linear-gradient(111deg, rgba(254, 248, 226, 0.60) 0%, rgba(255, 243, 209, 0.60) 50%, rgba(254, 238, 186, 0.60) 100%);
-  --solid-module-home-add-button-bg: rgba(255, 255, 255, 0.40);
-  --solid-admin-card-color-1: #4F99FB;
-  --solid-admin-card-color-2: #A968EE;
-  --solid-admin-card-color-3: #FFCA61;
-  --solid-primary-black: #fff;
-  color-scheme: dark;
-}
-
-:root {
-  --blue-50: #f5f9ff;
-  --blue-100: #d0e1fd;
-  --blue-200: #abc9fb;
-  --blue-300: #85b2f9;
-  --blue-400: #609af8;
-  --blue-500: #3b82f6;
-  --blue-600: #326fd1;
-  --blue-700: #295bac;
-  --blue-800: #204887;
-  --blue-900: #183462;
-  --green-50: #f4fcf7;
-  --green-100: #caf1d8;
-  --green-200: #a0e6ba;
-  --green-300: #76db9b;
-  --green-400: #4cd07d;
-  --green-500: #22c55e;
-  --green-600: #1da750;
-  --green-700: #188a42;
-  --green-800: #136c34;
-  --green-900: #0e4f26;
-  --yellow-50: #fefbf3;
-  --yellow-100: #faedc4;
-  --yellow-200: #f6de95;
-  --yellow-300: #f2d066;
-  --yellow-400: #eec137;
-  --yellow-500: #eab308;
-  --yellow-600: #c79807;
-  --yellow-700: #a47d06;
-  --yellow-800: #816204;
-  --yellow-900: #5e4803;
-  --pink-50: #fef6fa;
-  --pink-100: #fad3e7;
-  --pink-200: #f7b0d3;
-  --pink-300: #f38ec0;
-  --pink-400: #f06bac;
-  --pink-500: #ec4899;
-  --pink-600: #c93d82;
-  --pink-700: #a5326b;
-  --pink-800: #822854;
-  --pink-900: #5e1d3d;
-  --indigo-50: #f7f7fe;
-  --indigo-100: #dadafc;
-  --indigo-200: #bcbdf9;
-  --indigo-300: #9ea0f6;
-  --indigo-400: #8183f4;
-  --indigo-500: #6366f1;
-  --indigo-600: #5457cd;
-  --indigo-700: #4547a9;
-  --indigo-800: #363885;
-  --indigo-900: #282960;
-  --teal-50: #f3fbfb;
-  --teal-100: #c7eeea;
-  --teal-200: #9ae0d9;
-  --teal-300: #6dd3c8;
-  --teal-400: #41c5b7;
-  --teal-500: #14b8a6;
-  --teal-600: #119c8d;
-  --teal-700: #0e8174;
-  --teal-800: #0b655b;
-  --teal-900: #084a42;
-  --orange-50: #fff8f3;
-  --orange-100: #feddc7;
-  --orange-200: #fcc39b;
-  --orange-300: #fba86f;
-  --orange-400: #fa8e42;
-  --orange-500: #f97316;
-  --orange-600: #d46213;
-  --orange-700: #ae510f;
-  --orange-800: #893f0c;
-  --orange-900: #642e09;
-  --bluegray-50: #f7f8f9;
-  --bluegray-100: #dadee3;
-  --bluegray-200: #bcc3cd;
-  --bluegray-300: #9fa9b7;
-  --bluegray-400: #818ea1;
-  --bluegray-500: #64748b;
-  --bluegray-600: #556376;
-  --bluegray-700: #465161;
-  --bluegray-800: #37404c;
-  --bluegray-900: #282e38;
-  --purple-50: #fbf7ff;
-  --purple-100: #ead6fd;
-  --purple-200: #dab6fc;
-  --purple-300: #c996fa;
-  --purple-400: #b975f9;
-  --purple-500: #a855f7;
-  --purple-600: #8f48d2;
-  --purple-700: #763cad;
-  --purple-800: #5c2f88;
-  --purple-900: #432263;
-  --red-50: #fff5f5;
-  --red-100: #ffd0ce;
-  --red-200: #ffaca7;
-  --red-300: #ff8780;
-  --red-400: #ff6259;
-  --red-500: #ff3d32;
-  --red-600: #d9342b;
-  --red-700: #b32b23;
-  --red-800: #8c221c;
-  --red-900: #661814;
-  --primary-50: #f9f0ff;
-  --primary-100: #efdbff;
-  --primary-200: #d3adf7;
-  --primary-300: #b37feb;
-  --primary-400: #9254de;
-  --primary-500: #722ED1;
-  --primary-600: #531dab;
-  --primary-700: #391085;
-  --primary-800: #22075e;
-  --primary-900: #120338;
-}
+@import url("/themes/solid-dark-purple/theme-variables.css");
 
 .solid-primary-black-text {
   color: var(--solid-primary-black);

package/dist/resources/themes/solid-light-purple/theme-variables.css

@@ -0,0 +1,237 @@
+/* Edit light-mode design tokens here. */
+:root {
+  --solid-surface-0: #f6f8fc;
+  --solid-surface-1: #ffffff;
+  --solid-surface-2: #eef2ff;
+  --solid-surface-3: #f8fafc;
+  --solid-surface-elevated: #ffffff;
+  --solid-text-primary: #0f172a;
+  --solid-text-secondary: #475569;
+  --solid-text-muted: #64748b;
+  --solid-border-default: #e2e8f0;
+  --solid-border-strong: #cbd5e1;
+  --solid-interactive-bg: #722ed1;
+  --solid-interactive-fg: #ffffff;
+  --solid-focus-ring: rgba(114, 46, 209, 0.35);
+  --background: #f6f8fc;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --border: #e2e8f0;
+  --muted: #64748b;
+  --muted-foreground: #475569;
+  --accent: #eef2ff;
+  --accent-foreground: #3730a3;
+  --primary: #722ed1;
+  --primary-foreground: #ffffff;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --ring: rgba(114, 46, 209, 0.35);
+  --sidebar-background: #f8fafc;
+  --sidebar-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-primary: #722ed1;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-width: 272px;
+  --sidebar-width-collapsed: 76px;
+  --solid-sidebar-width: 272px;
+  --solid-studio-header-height: 0px;
+  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.1);
+  --z-app: 1;
+  --z-overlay: 1000;
+  --z-studio: 9999;
+  --solid-danger: var(--destructive);
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f5f5f5;
+  --surface-d: #ced0d6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: var(--primary);
+  --primary-color-text: var(--primary-foreground, #ffffff);
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f5f5f5;
+  --surface-200: #ced0d6;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f5f5f5;
+  --gray-200: #ced0d6;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem var(--ring, rgba(114, 46, 209, 0.35));
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --primary-light-color: #d8e2ea;
+  --highlight-bg: #f5f5f5;
+  --hightlight-bg-secondary: #fafafa;
+  --highlight-text-color: color-mix(in srgb, var(--primary-color, var(--primary)) 72%, #0f172a);
+  --icon-color: #000000e0;
+  --auth-title-color: #000000;
+  --auth-subtitle-color: #666666e5;
+  --secondary-dark-color: #333333;
+  --solid-login-bg-color: #ffffff;
+  --solid-light-grey: #eff1f4;
+  --solid-light-100: #fbfcff;
+  --solid-grey-500: #666666;
+  --solid-form-title: #4b4d52;
+  --solid-secondary-text-color: #4b4d52;
+  --solid-title: #4b4d52;
+  --solid-primary-border: #dadce0;
+  --solid-stepper-border: #cfd6dc;
+  --solid-setting-title: rgba(0, 0, 0, 0.88);
+  --solid-dark-title: rgba(0, 0, 0, 0.88);
+  --solid-dropzone-bg: rgba(255, 255, 255, 0.6);
+  --solid-file-wrapper: #e0e0e0;
+  --solid-chatter-dash: #00000026;
+  --solid-chatter-date-border: rgba(0, 0, 0, 0.15);
+  --solid-chatter-input-bg: #fefcff;
+  --solid-chatter-input-placeholder: rgba(51, 51, 51, 0.2);
+  --solid-kanban-wrapper: #e0e0e0;
+  --solid-dashboard-welcome-bg: #faf6ff;
+  --solid-dashboard-card-one-border: rgba(79, 153, 251, 0.2);
+  --solid-dashboard-card-two-border: rgba(79, 153, 251, 0.2);
+  --solid-dashboard-card-three-border: rgba(79, 153, 251, 0.2);
+  --solid-dashboard-card-one-bg: linear-gradient(111deg, rgba(226, 241, 247, 0.6) 0%, rgba(208, 235, 254, 0.6) 50%, rgba(192, 226, 250, 0.6) 100%);
+  --solid-dashboard-card-two-bg: linear-gradient(291deg, rgba(241, 226, 255, 0.6) 0%, rgba(238, 215, 255, 0.6) 46.5%, rgba(231, 200, 255, 0.6) 100%);
+  --solid-dashboard-card-three-bg: linear-gradient(111deg, rgba(254, 248, 226, 0.6) 0%, rgba(255, 243, 209, 0.6) 50%, rgba(254, 238, 186, 0.6) 100%);
+  --solid-module-home-add-button-bg: rgba(255, 255, 255, 0.4);
+  --solid-admin-card-color-1: #4f99fb;
+  --solid-admin-card-color-2: #a968ee;
+  --solid-admin-card-color-3: #ffca61;
+  --solid-primary-black: #000;
+  --blue-50: #f5f9ff;
+  --blue-100: #d0e1fd;
+  --blue-200: #abc9fb;
+  --blue-300: #85b2f9;
+  --blue-400: #609af8;
+  --blue-500: #3b82f6;
+  --blue-600: #326fd1;
+  --blue-700: #295bac;
+  --blue-800: #204887;
+  --blue-900: #183462;
+  --green-50: #f4fcf7;
+  --green-100: #caf1d8;
+  --green-200: #a0e6ba;
+  --green-300: #76db9b;
+  --green-400: #4cd07d;
+  --green-500: #22c55e;
+  --green-600: #1da750;
+  --green-700: #188a42;
+  --green-800: #136c34;
+  --green-900: #0e4f26;
+  --yellow-50: #fefbf3;
+  --yellow-100: #faedc4;
+  --yellow-200: #f6de95;
+  --yellow-300: #f2d066;
+  --yellow-400: #eec137;
+  --yellow-500: #eab308;
+  --yellow-600: #c79807;
+  --yellow-700: #a47d06;
+  --yellow-800: #816204;
+  --yellow-900: #5e4803;
+  --purple-50: #fbf7ff;
+  --purple-100: #ead6fd;
+  --purple-200: #dab6fc;
+  --purple-300: #c996fa;
+  --purple-400: #b975f9;
+  --purple-500: #a855f7;
+  --purple-600: #8f48d2;
+  --purple-700: #763cad;
+  --purple-800: #5c2f88;
+  --purple-900: #432263;
+  --pink-50: #fef6fa;
+  --pink-100: #fad3e7;
+  --pink-200: #f7b0d3;
+  --pink-300: #f38ec0;
+  --pink-400: #f06bac;
+  --pink-500: #ec4899;
+  --pink-600: #c93d82;
+  --pink-700: #a5326b;
+  --pink-800: #822854;
+  --pink-900: #5e1d3d;
+  --indigo-50: #f7f7fe;
+  --indigo-100: #dadafc;
+  --indigo-200: #bcbdf9;
+  --indigo-300: #9ea0f6;
+  --indigo-400: #8183f4;
+  --indigo-500: #6366f1;
+  --indigo-600: #5457cd;
+  --indigo-700: #4547a9;
+  --indigo-800: #363885;
+  --indigo-900: #282960;
+  --teal-50: #f3fbfb;
+  --teal-100: #c7eeea;
+  --teal-200: #9ae0d9;
+  --teal-300: #6dd3c8;
+  --teal-400: #41c5b7;
+  --teal-500: #14b8a6;
+  --teal-600: #119c8d;
+  --teal-700: #0e8174;
+  --teal-800: #0b655b;
+  --teal-900: #084a42;
+  --orange-50: #fff8f3;
+  --orange-100: #feddc7;
+  --orange-200: #fcc39b;
+  --orange-300: #fba86f;
+  --orange-400: #fa8e42;
+  --orange-500: #f97316;
+  --orange-600: #d46213;
+  --orange-700: #ae510f;
+  --orange-800: #893f0c;
+  --orange-900: #642e09;
+  --bluegray-50: #f7f8f9;
+  --bluegray-100: #dadee3;
+  --bluegray-200: #bcc3cd;
+  --bluegray-300: #9fa9b7;
+  --bluegray-400: #818ea1;
+  --bluegray-500: #64748b;
+  --bluegray-600: #556376;
+  --bluegray-700: #465161;
+  --bluegray-800: #37404c;
+  --bluegray-900: #282e38;
+  --red-50: #fff5f5;
+  --red-100: #ffd0ce;
+  --red-200: #ffaca7;
+  --red-300: #ff8780;
+  --red-400: #ff6259;
+  --red-500: #ff3d32;
+  --red-600: #d9342b;
+  --red-700: #b32b23;
+  --red-800: #8c221c;
+  --red-900: #661814;
+  --primary-50: #f9f0ff;
+  --primary-100: #efdbff;
+  --primary-200: #d3adf7;
+  --primary-300: #b37feb;
+  --primary-400: #9254de;
+  --primary-500: #722ed1;
+  --primary-600: #531dab;
+  --primary-700: #391085;
+  --primary-800: #22075e;
+  --primary-900: #120338;
+  color-scheme: light;
+}

package/dist/resources/themes/solid-light-purple/theme.css

@@ -1,209 +1,4 @@
-:root {
-  --surface-a: #ffffff;
-  --surface-b: #f9fafb;
-  --surface-c: #F5F5F5;
-  --surface-d: #CED0D6;
-  --surface-e: #ffffff;
-  --surface-f: #ffffff;
-  --text-color: #4b5563;
-  --text-color-secondary: #6b7280;
-  --primary-color: var(--primary);
-  --primary-color-text: var(--primary-foreground, #ffffff);
-  --surface-0: #ffffff;
-  --surface-50: #f9fafb;
-  --surface-100: #F5F5F5;
-  --surface-200: #CED0D6;
-  --surface-300: #d1d5db;
-  --surface-400: #9ca3af;
-  --surface-500: #6b7280;
-  --surface-600: #4b5563;
-  --surface-700: #374151;
-  --surface-800: #1f2937;
-  --surface-900: #111827;
-  --gray-50: #f9fafb;
-  --gray-100: #F5F5F5;
-  --gray-200: #CED0D6;
-  --gray-300: #d1d5db;
-  --gray-400: #9ca3af;
-  --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #1f2937;
-  --gray-900: #111827;
-  --content-padding: 1.25rem;
-  --inline-spacing: 0.5rem;
-  --border-radius: 6px;
-  --surface-ground: #f9fafb;
-  --surface-section: #ffffff;
-  --surface-card: #ffffff;
-  --surface-overlay: #ffffff;
-  --surface-border: #dfe7ef;
-  --surface-hover: #f6f9fc;
-  --focus-ring: 0 0 0 0.2rem var(--ring, rgba(114, 46, 209, 0.35));
-  --maskbg: rgba(0, 0, 0, 0.4);
-  --primary-light-color: #D8E2EA;
-  --highlight-bg: #F5F5F5;
-  --hightlight-bg-secondary: #FAFAFA;
-  --highlight-text-color: color-mix(in srgb, var(--primary-color, var(--primary)) 72%, #0f172a);
-  --icon-color: #000000E0;
-  --auth-title-color: #000000;
-  --auth-subtitle-color: #666666E5;
-  --secondary-dark-color: #333333;
-  --solid-login-bg-color: #ffffff;
-  --solid-light-grey: #EFF1F4;
-  --solid-light-100: #FBFCFF;
-  --solid-grey-500: #666666;
-  --solid-form-title: #4B4D52;
-  --solid-secondary-text-color: #4B4D52;
-  --solid-title: #4B4D52;
-  --solid-primary-border: #DADCE0;
-  --solid-stepper-border: #CFD6DC;
-  --solid-setting-title: rgba(0, 0, 0, 0.88);
-  --solid-dark-title: rgba(0, 0, 0, 0.88);
-  --solid-dropzone-bg: rgba(255, 255, 255, 0.60);
-  --solid-file-wrapper: #E0E0E0;
-  --solid-chatter-dash: #00000026;
-  --solid-chatter-date-border: rgba(0, 0, 0, 0.15);
-  --solid-chatter-input-bg: #FEFCFF;
-  --solid-chatter-input-placeholder: rgba(51, 51, 51, 0.20);
-  --solid-kanban-wrapper: #E0E0E0;
-  --solid-dashboard-welcome-bg: #FAF6FF;
-  --solid-dashboard-card-one-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-two-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-three-border: rgba(79, 153, 251, 0.20);
-  --solid-dashboard-card-one-bg: linear-gradient(111deg, rgba(226, 241, 247, 0.60) 0%, rgba(208, 235, 254, 0.60) 50%, rgba(192, 226, 250, 0.60) 100%);
-  --solid-dashboard-card-two-bg: linear-gradient(291deg, rgba(241, 226, 255, 0.60) 0%, rgba(238, 215, 255, 0.60) 46.5%, rgba(231, 200, 255, 0.60) 100%);
-  --solid-dashboard-card-three-bg: linear-gradient(111deg, rgba(254, 248, 226, 0.60) 0%, rgba(255, 243, 209, 0.60) 50%, rgba(254, 238, 186, 0.60) 100%);
-  --solid-module-home-add-button-bg: rgba(255, 255, 255, 0.40);
-  --solid-admin-card-color-1: #4F99FB;
-  --solid-admin-card-color-2: #A968EE;
-  --solid-admin-card-color-3: #FFCA61;
-  --solid-primary-black: #000;
-  color-scheme: light;
-}
-
-:root {
-  --blue-50: #f5f9ff;
-  --blue-100: #d0e1fd;
-  --blue-200: #abc9fb;
-  --blue-300: #85b2f9;
-  --blue-400: #609af8;
-  --blue-500: #3b82f6;
-  --blue-600: #326fd1;
-  --blue-700: #295bac;
-  --blue-800: #204887;
-  --blue-900: #183462;
-  --green-50: #f4fcf7;
-  --green-100: #caf1d8;
-  --green-200: #a0e6ba;
-  --green-300: #76db9b;
-  --green-400: #4cd07d;
-  --green-500: #22c55e;
-  --green-600: #1da750;
-  --green-700: #188a42;
-  --green-800: #136c34;
-  --green-900: #0e4f26;
-  --yellow-50: #fefbf3;
-  --yellow-100: #faedc4;
-  --yellow-200: #f6de95;
-  --yellow-300: #f2d066;
-  --yellow-400: #eec137;
-  --yellow-500: #eab308;
-  --yellow-600: #c79807;
-  --yellow-700: #a47d06;
-  --yellow-800: #816204;
-  --yellow-900: #5e4803;
-  --purple-50: #f5f0fc;
-  --purple-100: #dbc4f5;
-  --purple-200: #c299ee;
-  --purple-300: #a96ee7;
-  --purple-400: color-mix(in srgb, var(--primary-color, var(--primary)) 84%, #0f172a);
-  --purple-500: var(--primary-color, var(--primary));
-  --purple-600: #5f24b3;
-  --purple-700: #4c1b94;
-  --purple-800: #391275;
-  --purple-900: #260955;
-  --pink-50: #fef6fa;
-  --pink-100: #fad3e7;
-  --pink-200: #f7b0d3;
-  --pink-300: #f38ec0;
-  --pink-400: #f06bac;
-  --pink-500: #ec4899;
-  --pink-600: #c93d82;
-  --pink-700: #a5326b;
-  --pink-800: #822854;
-  --pink-900: #5e1d3d;
-  --indigo-50: #f7f7fe;
-  --indigo-100: #dadafc;
-  --indigo-200: #bcbdf9;
-  --indigo-300: #9ea0f6;
-  --indigo-400: #8183f4;
-  --indigo-500: #6366f1;
-  --indigo-600: #5457cd;
-  --indigo-700: #4547a9;
-  --indigo-800: #363885;
-  --indigo-900: #282960;
-  --teal-50: #f3fbfb;
-  --teal-100: #c7eeea;
-  --teal-200: #9ae0d9;
-  --teal-300: #6dd3c8;
-  --teal-400: #41c5b7;
-  --teal-500: #14b8a6;
-  --teal-600: #119c8d;
-  --teal-700: #0e8174;
-  --teal-800: #0b655b;
-  --teal-900: #084a42;
-  --orange-50: #fff8f3;
-  --orange-100: #feddc7;
-  --orange-200: #fcc39b;
-  --orange-300: #fba86f;
-  --orange-400: #fa8e42;
-  --orange-500: #f97316;
-  --orange-600: #d46213;
-  --orange-700: #ae510f;
-  --orange-800: #893f0c;
-  --orange-900: #642e09;
-  --bluegray-50: #f7f8f9;
-  --bluegray-100: #dadee3;
-  --bluegray-200: #bcc3cd;
-  --bluegray-300: #9fa9b7;
-  --bluegray-400: #818ea1;
-  --bluegray-500: #64748b;
-  --bluegray-600: #556376;
-  --bluegray-700: #465161;
-  --bluegray-800: #37404c;
-  --bluegray-900: #282e38;
-  --purple-50: #fbf7ff;
-  --purple-100: #ead6fd;
-  --purple-200: #dab6fc;
-  --purple-300: #c996fa;
-  --purple-400: #b975f9;
-  --purple-500: #a855f7;
-  --purple-600: #8f48d2;
-  --purple-700: #763cad;
-  --purple-800: #5c2f88;
-  --purple-900: #432263;
-  --red-50: #fff5f5;
-  --red-100: #ffd0ce;
-  --red-200: #ffaca7;
-  --red-300: #ff8780;
-  --red-400: #ff6259;
-  --red-500: #ff3d32;
-  --red-600: #d9342b;
-  --red-700: #b32b23;
-  --red-800: #8c221c;
-  --red-900: #661814;
-  --primary-50: #f9f0ff;
-  --primary-100: #efdbff;
-  --primary-200: #d3adf7;
-  --primary-300: #b37feb;
-  --primary-400: #9254de;
-  --primary-500: #722ED1;
-  --primary-600: #531dab;
-  --primary-700: #391085;
-  --primary-800: #22075e;
-  --primary-900: #120338;
-}
+@import url("/themes/solid-light-purple/theme-variables.css");
 
 .solid-primary-black-text {
   color: var(--solid-primary-black);