@shohojdhara/atomix 0.3.13 → 0.3.15

package/dist/atomix.css

@@ -365,7 +365,7 @@ summary {
  */
 :root,
 [data-atomix-color-mode=light] {
-  --atomix-primary: #ffb800;
+  --atomix-primary: #8b5cf6;
   --atomix-secondary: #f3f4f6;
   --atomix-success: #22c55e;
   --atomix-info: #3b82f6;
@@ -373,7 +373,7 @@ summary {
   --atomix-error: #ef4444;
   --atomix-light: #f9fafb;
   --atomix-dark: #1f2937;
-  --atomix-primary-rgb: 255, 184, 0;
+  --atomix-primary-rgb: 139, 92, 246;
   --atomix-secondary-rgb: 243, 244, 246;
   --atomix-success-rgb: 34, 197, 94;
   --atomix-info-rgb: 59, 130, 246;
@@ -391,22 +391,22 @@ summary {
   --atomix-gray-8: #374151;
   --atomix-gray-9: #1f2937;
   --atomix-gray-10: #111827;
-  --atomix-primary-1: #fff9e6;
-  --atomix-primary-2: #fff4cc;
-  --atomix-primary-3: #ffe699;
-  --atomix-primary-4: #ffd966;
-  --atomix-primary-5: #ffcc33;
-  --atomix-primary-6: #ffb800;
-  --atomix-primary-7: #e6a600;
-  --atomix-primary-8: #cc9400;
-  --atomix-primary-9: #b38200;
-  --atomix-primary-10: #997000;
+  --atomix-primary-1: #f5f3ff;
+  --atomix-primary-2: #ede9fe;
+  --atomix-primary-3: #ddd6fe;
+  --atomix-primary-4: #c4b5fd;
+  --atomix-primary-5: #a78bfa;
+  --atomix-primary-6: #8b5cf6;
+  --atomix-primary-7: #7c3aed;
+  --atomix-primary-8: #6d28d9;
+  --atomix-primary-9: #5b21b6;
+  --atomix-primary-10: #4c1d95;
   --atomix-primary-text-emphasis: #111827;
   --atomix-secondary-text-emphasis: #374151;
   --atomix-tertiary-text-emphasis: #6b7280;
   --atomix-disabled-text-emphasis: #9ca3af;
   --atomix-invert-text-emphasis: #111827;
-  --atomix-brand-text-emphasis: #ffb800;
+  --atomix-brand-text-emphasis: #8b5cf6;
   --atomix-error-text-emphasis: #ef4444;
   --atomix-success-text-emphasis: #22c55e;
   --atomix-warning-text-emphasis: #eab308;
@@ -417,7 +417,7 @@ summary {
   --atomix-secondary-bg-subtle: #e5e7eb;
   --atomix-tertiary-bg-subtle: #d1d5db;
   --atomix-invert-bg-subtle: #111827;
-  --atomix-brand-bg-subtle: #fff4cc;
+  --atomix-brand-bg-subtle: #ede9fe;
   --atomix-error-bg-subtle: #fee2e2;
   --atomix-success-bg-subtle: #dcfce7;
   --atomix-warning-bg-subtle: #fef9c3;
@@ -430,10 +430,10 @@ summary {
   --atomix-error-border-subtle: #ef4444;
   --atomix-warning-border-subtle: #eab308;
   --atomix-info-border-subtle: #3b82f6;
-  --atomix-brand-border-subtle: #ffb800;
+  --atomix-brand-border-subtle: #8b5cf6;
   --atomix-light-border-subtle: #f9fafb;
   --atomix-dark-border-subtle: #1f2937;
-  --atomix-primary-hover: #ffb800;
+  --atomix-primary-hover: #8b5cf6;
   --atomix-secondary-hover: #e5e7eb;
   --atomix-light-hover: #f3f4f6;
   --atomix-dark-hover: #4b5563;
@@ -441,7 +441,7 @@ summary {
   --atomix-success-hover: #15803d;
   --atomix-warning-hover: #a16207;
   --atomix-info-hover: #1d4ed8;
-  --atomix-primary-gradient: linear-gradient(135deg, #fff4cc, #ffe699, #ffd966);
+  --atomix-primary-gradient: linear-gradient(135deg, #ede9fe, #ddd6fe, #c4b5fd);
   --atomix-secondary-gradient: linear-gradient(135deg, #f3f4f6, #e5e7eb, #d1d5db);
   --atomix-light-gradient: linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb);
   --atomix-dark-gradient: linear-gradient(135deg, #4b5563, #1f2937, #000000);
@@ -459,11 +459,11 @@ summary {
   --atomix-body-color: #111827;
   --atomix-body-bg: #ffffff;
   --atomix-heading-color: #111827;
-  --atomix-link-color: #ffb800;
-  --atomix-link-color-rgb: 255, 184, 0;
+  --atomix-link-color: #8b5cf6;
+  --atomix-link-color-rgb: 139, 92, 246;
   --atomix-link-decoration: none;
-  --atomix-link-hover-color: rgb(178.5, 128.8, 0);
-  --atomix-link-hover-color-rgb: 178.5, 128.8, 0;
+  --atomix-link-hover-color: rgb(87.4069767442, 19.5029069767, 241.9970930233);
+  --atomix-link-hover-color-rgb: 87.4069767442, 19.5029069767, 241.9970930233;
   --atomix-highlight-bg: #fef08a;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -484,7 +484,7 @@ summary {
   --atomix-box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.175);
   --atomix-box-shadow-xl: 0px 16px 64px -8px rgba(45, 54, 67, 0.14);
   --atomix-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --atomix-focus-border-color: #ffcc33;
+  --atomix-focus-border-color: #a78bfa;
   --atomix-form-valid-color: #22c55e;
   --atomix-form-valid-border-color: #22c55e;
   --atomix-form-invalid-color: #ef4444;
@@ -624,7 +624,7 @@ summary {
   color-scheme: dark;
   --atomix-body-color: #ffffff;
   --atomix-body-bg: #1f2937;
-  --atomix-primary: #ffb800;
+  --atomix-primary: #8b5cf6;
   --atomix-secondary: #4b5563;
   --atomix-light: #f9fafb;
   --atomix-dark: #374151;
@@ -632,7 +632,7 @@ summary {
   --atomix-success: #22c55e;
   --atomix-warning: #eab308;
   --atomix-info: #3b82f6;
-  --atomix-primary-rgb: 255, 184, 0;
+  --atomix-primary-rgb: 139, 92, 246;
   --atomix-secondary-rgb: 75, 85, 99;
   --atomix-light-rgb: 249, 250, 251;
   --atomix-dark-rgb: 55, 65, 81;
@@ -645,7 +645,7 @@ summary {
   --atomix-tertiary-text-emphasis: #d1d5db;
   --atomix-disabled-text-emphasis: #9ca3af;
   --atomix-invert-text-emphasis: #f9fafb;
-  --atomix-brand-text-emphasis: #fff4cc;
+  --atomix-brand-text-emphasis: #ede9fe;
   --atomix-error-text-emphasis: #fecaca;
   --atomix-success-text-emphasis: #bbf7d0;
   --atomix-warning-text-emphasis: #fef08a;
@@ -656,7 +656,7 @@ summary {
   --atomix-secondary-bg-subtle: #4b5563;
   --atomix-tertiary-bg-subtle: #6b7280;
   --atomix-invert-bg-subtle: #ffffff;
-  --atomix-brand-bg-subtle: #cc9400;
+  --atomix-brand-bg-subtle: #6d28d9;
   --atomix-error-bg-subtle: #7f1d1d;
   --atomix-success-bg-subtle: #166534;
   --atomix-warning-bg-subtle: #713f12;
@@ -669,10 +669,10 @@ summary {
   --atomix-error-border-subtle: #ef4444;
   --atomix-warning-border-subtle: #eab308;
   --atomix-info-border-subtle: #3b82f6;
-  --atomix-brand-border-subtle: #ffb800;
+  --atomix-brand-border-subtle: #8b5cf6;
   --atomix-light-border-subtle: #f9fafb;
   --atomix-dark-border-subtle: #374151;
-  --atomix-primary-hover: #ffb800;
+  --atomix-primary-hover: #8b5cf6;
   --atomix-secondary-hover: #6b7280;
   --atomix-light-hover: #9ca3af;
   --atomix-dark-hover: #4b5563;
@@ -680,7 +680,7 @@ summary {
   --atomix-success-hover: #86efac;
   --atomix-warning-hover: #facc15;
   --atomix-info-hover: #93c5fd;
-  --atomix-primary-gradient: linear-gradient(135deg, #997000, #b38200, #cc9400);
+  --atomix-primary-gradient: linear-gradient(135deg, #4c1d95, #5b21b6, #6d28d9);
   --atomix-secondary-gradient: linear-gradient(135deg, #374151, #6b7280, #d1d5db);
   --atomix-light-gradient: linear-gradient(135deg, #9ca3af, #6b7280, #9ca3af);
   --atomix-dark-gradient: linear-gradient(135deg, #000000, #4b5563, #1f2937);
@@ -695,33 +695,33 @@ summary {
   --atomix-box-shadow-lg: 0px 8px 18px -2px rgba(30, 30, 30, 0.5), 0px 8px 24px -2px rgba(30, 30, 30, 0.5);
   --atomix-box-shadow-xl: 0px 33px 61px -8px rgba(30, 30, 30, 0.9), 0px 8px 10px 0px rgba(30, 30, 30, 0.9);
   --atomix-heading-color: #e5e7eb;
-  --atomix-link-color: #ffd966;
-  --atomix-link-color-rgb: 255, 217, 102;
-  --atomix-link-hover-color: rgb(255, 198, 25.5);
-  --atomix-link-hover-color-rgb: 255, 198, 25.5;
+  --atomix-link-color: #c4b5fd;
+  --atomix-link-color-rgb: 196, 181, 253;
+  --atomix-link-hover-color: rgb(136.6118421053, 106.5131578947, 250.9868421053);
+  --atomix-link-hover-color-rgb: 136.6118421053, 106.5131578947, 250.9868421053;
   --atomix-code-color: #f87171;
   --atomix-border-color: #374151;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --atomix-focus-border-color: #ffd966;
+  --atomix-focus-border-color: #c4b5fd;
   --atomix-form-valid-color: #4ade80;
   --atomix-form-valid-border-color: #4ade80;
   --atomix-form-invalid-color: #f87171;
   --atomix-form-invalid-border-color: #f87171;
 }
 ::-moz-selection {
-  background: #ffb800;
-  background: rgba(255, 184, 0, 0.3);
+  background: #8b5cf6;
+  background: rgba(139, 92, 246, 0.3);
 }
 ::selection {
-  background: #ffb800;
-  background: rgba(255, 184, 0, 0.3);
+  background: #8b5cf6;
+  background: rgba(139, 92, 246, 0.3);
 }
 ::-moz-selection {
-  background: #ffb800;
-  background: rgba(255, 184, 0, 0.3);
+  background: #8b5cf6;
+  background: rgba(139, 92, 246, 0.3);
 }
 * {
-  -webkit-tap-highlight-color: rgba(255, 184, 0, 0.2);
+  -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);
 }
 *,
 *:before,
@@ -1588,7 +1588,7 @@ a, a:hover {
 .c-accordion {
   --atomix-accordion-width: 100%;
   --atomix-accordion-border-width: calc(var(--atomix-border-width) * 2);
-  --atomix-accordion-border-color: transparent;
+  --atomix-accordion-border-color: var(--atomix-primary-border-subtle);
   --atomix-accordion-border-radius: 0.25rem;
   --atomix-accordion-body-padding-x: 1.25rem;
   --atomix-accordion-body-padding-y: 0.5rem;
@@ -1603,12 +1603,19 @@ a, a:hover {
   --atomix-accordion-icon-color: var(--atomix-body-color);
   --atomix-accordion-icon-transform: 180deg;
   --atomix-accordion-disable-color: var(--atomix-tertiary-text-emphasis);
+  --atomix-accordion-focus-border-color: var(--atomix-focus-border-color);
+  --atomix-accordion-header-font-size: 1rem;
+  --atomix-accordion-header-font-weight: 400;
+  --atomix-accordion-header-inner-gap: 0.5rem;
+  --atomix-accordion-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --atomix-accordion-panel-transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --panel-height: 0px;
   width: 100%;
   max-width: var(--atomix-accordion-width);
   border: var(--atomix-accordion-border-width) solid var(--atomix-accordion-border-color);
   border-radius: var(--atomix-accordion-border-radius);
   overflow: hidden;
+  transition: var(--atomix-accordion-transition);
 }
 .c-accordion__header {
   display: flex;
@@ -1620,6 +1627,9 @@ a, a:hover {
   border: none;
   outline: none;
   cursor: pointer;
+  font-size: var(--atomix-accordion-header-font-size);
+  font-weight: var(--atomix-accordion-header-font-weight);
+  gap: var(--atomix-accordion-header-inner-gap);
   transition-property: background;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
@@ -1629,18 +1639,25 @@ a, a:hover {
 .c-accordion__header--icon-left {
   flex-direction: row-reverse;
   justify-content: flex-end;
-  gap: var(--atomix-accordion-header-padding-x);
 }
 .c-accordion__header:hover {
   --atomix-accordion-header-bg: var(--atomix-accordion-header-bg-hover);
 }
+.c-accordion__header:focus-visible {
+  outline: 2px solid var(--atomix-accordion-focus-border-color);
+  outline-offset: 2px;
+}
 .c-accordion__title {
-  margin-right: 1.25rem;
+  flex: 1 1;
 }
 .c-accordion__icon {
   color: var(--atomix-accordion-icon-color);
   font-size: var(--atomix-accordion-icon-size);
   will-change: transform;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   transition-property: all;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
@@ -1650,6 +1667,7 @@ a, a:hover {
   height: var(--panel-height);
   overflow: hidden;
   will-change: height;
+  scroll-behavior: smooth;
   transition-property: all;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
@@ -1672,10 +1690,14 @@ a, a:hover {
 }
 .c-accordion.is-disabled {
   pointer-events: none;
+  cursor: not-allowed;
   --atomix-accordion-header-color: var(--atomix-accordion-disable-color);
   --atomix-accordion-body-color: var(--atomix-accordion-disable-color);
   --atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
 }
+.c-accordion.is-disabled .c-accordion__header {
+  cursor: not-allowed;
+}
 .c-accordion--glass {
   border-color: transparent;
 }
@@ -1685,6 +1707,16 @@ a, a:hover {
 .c-accordion--glass .c-accordion__body {
   background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  .c-accordion {
+    transition: none;
+  }
+  .c-accordion .c-accordion__icon,
+  .c-accordion .c-accordion__panel,
+  .c-accordion .c-accordion__header {
+    transition: none;
+  }
+}
 .c-avatar {
   --atomix-avatar-fit: cover;
   --atomix-avatar-size: 2.5rem;
@@ -2259,17 +2291,17 @@ a, a:hover {
 }
 .c-btn--primary {
   --atomix-btn-color: var(--atomix-white, #ffffff);
-  --atomix-btn-bg: var(--atomix-primary, #ffb800);
-  --atomix-btn-border-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-bg: var(--atomix-primary, #8b5cf6);
+  --atomix-btn-border-color: var(--atomix-primary, #8b5cf6);
   --atomix-btn-hover-color: var(--atomix-white, #ffffff);
-  --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(216.75, 156.4, 0));
-  --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(229.5, 165.6, 0));
+  --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(104.8069767442, 43.9529069767, 243.3470930233));
+  --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(116.2046511628, 59.9686046512, 244.2313953488));
   --atomix-btn-active-color: var(--atomix-white, #ffffff);
-  --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(204, 147.2, 0));
-  --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(191.25, 138, 0));
+  --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(93.4093023256, 27.9372093023, 242.4627906977));
+  --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(82.5348837209, 13.2645348837, 240.2354651163));
   --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
-  --atomix-btn-disabled-bg: var(--atomix-primary, #ffb800);
-  --atomix-btn-disabled-border-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-disabled-bg: var(--atomix-primary, #8b5cf6);
+  --atomix-btn-disabled-border-color: var(--atomix-primary, #8b5cf6);
 }
 .c-btn--secondary {
   --atomix-btn-color: var(--atomix-dark-text-emphasis, #1f2937);
@@ -2370,18 +2402,18 @@ a, a:hover {
   --atomix-btn-disabled-border-color: var(--atomix-dark, #1f2937);
 }
 .c-btn--outline-primary {
-  --atomix-btn-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-color: var(--atomix-primary, #8b5cf6);
   --atomix-btn-bg: transparent;
-  --atomix-btn-border-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-border-color: var(--atomix-primary, #8b5cf6);
   --atomix-btn-hover-color: var(--atomix-white, #ffffff);
-  --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(216.75, 156.4, 0));
-  --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(229.5, 165.6, 0));
+  --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(104.8069767442, 43.9529069767, 243.3470930233));
+  --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(116.2046511628, 59.9686046512, 244.2313953488));
   --atomix-btn-active-color: var(--atomix-white, #ffffff);
-  --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(204, 147.2, 0));
-  --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(191.25, 138, 0));
-  --atomix-btn-disabled-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(93.4093023256, 27.9372093023, 242.4627906977));
+  --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(82.5348837209, 13.2645348837, 240.2354651163));
+  --atomix-btn-disabled-color: var(--atomix-primary, #8b5cf6);
   --atomix-btn-disabled-bg: transparent;
-  --atomix-btn-disabled-border-color: var(--atomix-primary, #ffb800);
+  --atomix-btn-disabled-border-color: var(--atomix-primary, #8b5cf6);
 }
 .c-btn--outline-secondary {
   --atomix-btn-color: var(--atomix-secondary, #f3f4f6);
@@ -4809,6 +4841,7 @@ a, a:hover {
   --atomix-checkbox-border-color-hover: var(--atomix-primary-text-emphasis);
   --atomix-checkbox-border-color-disabled: var(--atomix-disabled-text-emphasis);
   --atomix-checkbox-border-color-error: var(--atomix-error-border-subtle);
+  --atomix-checkbox-checked-border-color: var(--atomix-invert-bg-subtle);
   display: flex;
   gap: var(--atomix-checkbox-spacer);
 }
@@ -4834,34 +4867,39 @@ a, a:hover {
 }
 .c-checkbox__input::before {
   position: absolute;
-  top: -7px;
-  left: -4px;
-  font-family: "Lux Icon";
-  color: var(--atomix-checkbox-checked-bg);
-  content: "\ef10";
-  font-size: 1.625rem;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--atomix-checkbox-checked-text-color);
+  background: var(--atomix-checkbox-checked-bg);
+  content: "";
   transform: scale(0);
-  display: block;
-  transform-origin: center;
-  transition: 120ms transform ease-in-out;
+  opacity: 0;
+  transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
+  font-size: 0.65em;
+  line-height: 1;
+  font-family: "Lux Icon";
 }
 .c-checkbox__input:hover {
   border-color: var(--atomix-checkbox-border-color-hover);
 }
 .c-checkbox__input:checked {
-  border-color: var(--atomix-checkbox-checked-bg);
+  border-color: var(--atomix-checkbox-checked-border-color);
 }
 .c-checkbox__input:checked::before {
+  content: "\ef10";
   transform: scale(1);
+  opacity: 1;
 }
 .c-checkbox__input:checked:hover {
   border-color: var(--atomix-checkbox-checked-bg-hover);
 }
 .c-checkbox__input:checked:hover::before {
-  color: var(--atomix-checkbox-checked-bg-hover);
-}
-.c-checkbox__input:checked + .c-checkbox {
-  color: red;
+  background: var(--atomix-checkbox-checked-bg-hover);
 }
 .c-checkbox__input:focus-visible {
   outline: 2px solid var(--atomix-brand-border-subtle);
@@ -4871,7 +4909,7 @@ a, a:hover {
   cursor: not-allowed;
 }
 .c-checkbox__input:disabled::before {
-  color: var(--atomix-checkbox-checked-text-color-disabled) !important;
+  background: var(--atomix-checkbox-checked-bg-disabled) !important;
 }
 .c-checkbox__label {
   font-size: var(--atomix-checkbox-font-size);
@@ -4885,13 +4923,14 @@ a, a:hover {
   cursor: not-allowed;
 }
 .c-checkbox.is-disabled .c-checkbox__input::before {
-  color: var(--atomix-checkbox-checked-text-color-disabled) !important;
+  background: var(--atomix-checkbox-checked-bg-disabled) !important;
 }
 .c-checkbox.is-error .c-checkbox__input {
   border-color: var(--atomix-checkbox-border-color-error) !important;
 }
 .c-checkbox--mixed .c-checkbox__input::before {
   content: "\f0d6";
+  background: var(--atomix-checkbox-checked-bg);
 }
 .c-color-mode-toggle {
   display: inline-flex;
@@ -7093,7 +7132,7 @@ a, a:hover {
   --atomix-input-textarea-height: 120px;
 }
 .c-input--primary {
-  --atomix-input-border-color: var(--atomix-primary-border-subtle, #ffb800);
+  --atomix-input-border-color: var(--atomix-primary-border-subtle, #8b5cf6);
 }
 .c-input--success {
   --atomix-input-border-color: var(--atomix-success-border-subtle, #22c55e);
@@ -7466,7 +7505,7 @@ a, a:hover {
   --atomix-messages-file-text-color: var(--atomix-body-color);
   --atomix-messages-file-icon-size: 2.5rem;
   --atomix-messages-file-icon-margin-right: 0.5rem;
-  --atomix-messages-file-icon-bg: #fff4cc;
+  --atomix-messages-file-icon-bg: #ede9fe;
   --atomix-messages-file-info-font-size: 0.75rem;
   --atomix-messages-file-info-color: var(--atomix-tertiary-text-emphasis);
   --atomix-messages-file-bg: var(--atomix-tertiary-bg-subtle);
@@ -7611,7 +7650,7 @@ a, a:hover {
   border-radius: var(--atomix-messages-file-border-radius) 0.25rem 0.25rem var(--atomix-messages-file-border-radius);
 }
 .c-messages__content--self .c-messages__file [data-atomix-color-mode=dark] {
-  --atomix-messages-file-icon-bg: #e6a600;
+  --atomix-messages-file-icon-bg: #7c3aed;
 }
 .c-messages__content--self .c-messages__image {
   border-radius: var(--atomix-messages-image-border-radius) 0.25rem 0.25rem var(--atomix-messages-image-border-radius);
@@ -7621,7 +7660,7 @@ a, a:hover {
   background-color: var(--atomix-messages-file-icon-bg);
 }
 .c-messages__content--self .c-messages__file-icon [data-atomix-color-mode=dark] {
-  --atomix-messages-file-icon-bg: #e6a600;
+  --atomix-messages-file-icon-bg: #7c3aed;
 }
 .c-messages__form {
   display: flex;
@@ -8460,12 +8499,12 @@ a, a:hover {
   --atomix-callout-width: 100%;
   --atomix-callout-padding-x: 1rem;
   --atomix-callout-padding-y: 1rem;
-  --atomix-callout-tost-padding-x: 1rem;
-  --atomix-callout-tost-padding-y: 1rem;
+  --atomix-callout-toast-padding-x: 1rem;
+  --atomix-callout-toast-padding-y: 1rem;
   --atomix-callout-bg: var(--atomix-body-bg);
   --atomix-callout-border-radius: 0.5rem;
   --atomix-callout-border-color: var(--atomix-border-color);
-  --atomix-callout-border-witdh: var(--atomix-border-width);
+  --atomix-callout-border-width: var(--atomix-border-width);
   --atomix-callout-title-font-size: 1rem;
   --atomix-callout-title-font-weight: 600;
   --atomix-callout-title-color: var(--atomix-body-color);
@@ -8555,7 +8594,7 @@ a, a:hover {
 .c-callout__close-btn:focus-visible {
   box-shadow: 0 0 0 2px var(--atomix-callout-border-color);
 }
-.c-callout--oneline .c-callout__message {
+.c-callout--compact .c-callout__message {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -8584,8 +8623,8 @@ a, a:hover {
 }
 .c-callout--toast .c-callout__close-btn {
   position: absolute;
-  top: var(--atomix-callout-tost-padding-y);
-  right: var(--atomix-callout-tost-padding-x);
+  top: var(--atomix-callout-toast-padding-y);
+  right: var(--atomix-callout-toast-padding-x);
 }
 .c-callout--toast:focus-visible {
   outline: 2px solid var(--atomix-callout-border-color);
@@ -8646,7 +8685,7 @@ a, a:hover {
   justify-content: center;
   align-items: center;
   padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
-  border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
+  border: var(--atomix-callout-border-width) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
   max-width: var(--atomix-callout-width);
   border-radius: var(--atomix-callout-border-radius);
   width: 100%;
@@ -9207,7 +9246,7 @@ a, a:hover {
   display: block;
 }
 .c-rating__star--primary {
-  --atomix-rating-star-bg: #ffb800;
+  --atomix-rating-star-bg: #8b5cf6;
 }
 .c-rating__star--secondary {
   --atomix-rating-star-bg: #f3f4f6;
@@ -9277,7 +9316,7 @@ a, a:hover {
   flex-direction: column;
 }
 .c-rating--primary {
-  --atomix-rating-star-bg: #ffb800;
+  --atomix-rating-star-bg: #8b5cf6;
 }
 .c-rating--secondary {
   --atomix-rating-star-bg: #f3f4f6;
@@ -12451,7 +12490,7 @@ body.is-open-photoviewer {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
 }
 .c-image-gallery__item:hover .c-image-gallery__card {
-  border-color: #ffcc33;
+  border-color: #a78bfa;
 }
 .c-image-gallery__card {
   height: 100%;
@@ -12514,8 +12553,8 @@ body.is-open-photoviewer {
   text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
 }
 .u-link-primary:hover, .u-link-primary:focus {
-  color: RGBA(255, 194.65, 38.25, var(--atomix-u-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(255, 194.65, 38.25, var(--atomix-u-link-underline-opacity, 1)) !important;
+  color: RGBA(156.4, 116.45, 247.35, var(--atomix-u-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(156.4, 116.45, 247.35, var(--atomix-u-link-underline-opacity, 1)) !important;
 }
 .u-link-secondary {
   color: RGBA(var(--atomix-secondary-rgb), var(--atomix-u-link-opacity, 1)) !important;
@@ -12585,7 +12624,7 @@ body.is-open-photoviewer {
   white-space: nowrap;
 }
 .u-bg-primary {
-  background-color: #ffb800;
+  background-color: #8b5cf6;
 }
 .u-bg-secondary {
   background-color: #f3f4f6;
@@ -12687,34 +12726,44 @@ body.is-open-photoviewer {
   border-inline-start: 0;
 }
 .u-border-primary {
-  border-color: #ffb800;
+  border-color: #8b5cf6;
+  --border-opacity: 1;
 }
 .u-border-secondary {
   border-color: #f3f4f6;
+  --border-opacity: 1;
 }
 .u-border-success {
   border-color: #22c55e;
+  --border-opacity: 1;
 }
 .u-border-info {
   border-color: #3b82f6;
+  --border-opacity: 1;
 }
 .u-border-warning {
   border-color: #eab308;
+  --border-opacity: 1;
 }
 .u-border-error {
   border-color: #ef4444;
+  --border-opacity: 1;
 }
 .u-border-light {
   border-color: #f9fafb;
+  --border-opacity: 1;
 }
 .u-border-dark {
   border-color: #1f2937;
+  --border-opacity: 1;
 }
 .u-border-black {
   border-color: #000000;
+  --border-opacity: 1;
 }
 .u-border-white {
   border-color: #ffffff;
+  --border-opacity: 1;
 }
 .u-border-primary-subtle {
   border-color: var(--atomix-primary-border-subtle);
@@ -12944,37 +12993,37 @@ body.is-open-photoviewer {
   border-end-start-radius: var(--atomix-border-radius-pill);
   border-start-start-radius: var(--atomix-border-radius-pill);
 }
-.u-d-inline {
+.u-inline {
   display: inline;
 }
-.u-d-inline-block {
+.u-inline-block {
   display: inline-block;
 }
-.u-d-block {
+.u-block {
   display: block;
 }
-.u-d-grid {
+.u-grid {
   display: grid;
 }
-.u-d-inline-grid {
+.u-inline-grid {
   display: inline-grid;
 }
-.u-d-table {
+.u-table {
   display: table;
 }
-.u-d-table-row {
+.u-table-row {
   display: table-row;
 }
-.u-d-table-cell {
+.u-table-cell {
   display: table-cell;
 }
-.u-d-flex {
+.u-flex {
   display: flex;
 }
-.u-d-inline-flex {
+.u-inline-flex {
   display: inline-flex;
 }
-.u-d-none {
+.u-none {
   display: none;
 }
 .u-flex-fill {
@@ -13013,73 +13062,73 @@ body.is-open-photoviewer {
 .u-flex-wrap-reverse {
   flex-wrap: wrap-reverse;
 }
-.u-justify-content-start {
+.u-justify-start {
   justify-content: flex-start;
 }
-.u-justify-content-end {
+.u-justify-end {
   justify-content: flex-end;
 }
-.u-justify-content-center {
+.u-justify-center {
   justify-content: center;
 }
-.u-justify-content-between {
+.u-justify-between {
   justify-content: space-between;
 }
-.u-justify-content-around {
+.u-justify-around {
   justify-content: space-around;
 }
-.u-justify-content-evenly {
+.u-justify-evenly {
   justify-content: space-evenly;
 }
-.u-align-items-start {
+.u-items-start {
   align-items: flex-start;
 }
-.u-align-items-end {
+.u-items-end {
   align-items: flex-end;
 }
-.u-align-items-center {
+.u-items-center {
   align-items: center;
 }
-.u-align-items-baseline {
+.u-items-baseline {
   align-items: baseline;
 }
-.u-align-items-stretch {
+.u-items-stretch {
   align-items: stretch;
 }
-.u-align-content-start {
+.u-content-start {
   align-content: flex-start;
 }
-.u-align-content-end {
+.u-content-end {
   align-content: flex-end;
 }
-.u-align-content-center {
+.u-content-center {
   align-content: center;
 }
-.u-align-content-between {
+.u-content-between {
   align-content: space-between;
 }
-.u-align-content-around {
+.u-content-around {
   align-content: space-around;
 }
-.u-align-content-stretch {
+.u-content-stretch {
   align-content: stretch;
 }
-.u-align-self-auto {
+.u-self-auto {
   align-self: auto;
 }
-.u-align-self-start {
+.u-self-start {
   align-self: flex-start;
 }
-.u-align-self-end {
+.u-self-end {
   align-self: flex-end;
 }
-.u-align-self-center {
+.u-self-center {
   align-self: center;
 }
-.u-align-self-baseline {
+.u-self-baseline {
   align-self: baseline;
 }
-.u-align-self-stretch {
+.u-self-stretch {
   align-self: stretch;
 }
 .u-order-first {
@@ -13107,7 +13156,7 @@ body.is-open-photoviewer {
   order: 6;
 }
 .u-bg-gradient-primary {
-  background-image: linear-gradient(135deg, #fff4cc, #ffe699, #ffd966);
+  background-image: linear-gradient(135deg, #ede9fe, #ddd6fe, #c4b5fd);
 }
 .u-bg-gradient-secondary {
   background-image: linear-gradient(135deg, #f3f4f6, #e5e7eb, #d1d5db);
@@ -13155,37 +13204,48 @@ body.is-open-photoviewer {
   text-underline-offset: 0.375em;
 }
 .u-link-underline-primary {
-  text-decoration-color: #ffb800;
+  text-decoration-color: #8b5cf6;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-secondary {
   text-decoration-color: #f3f4f6;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-success {
   text-decoration-color: #22c55e;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-info {
   text-decoration-color: #3b82f6;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-warning {
   text-decoration-color: #eab308;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-error {
   text-decoration-color: #ef4444;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-light {
   text-decoration-color: #f9fafb;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-dark {
   text-decoration-color: #1f2937;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-black {
   text-decoration-color: #000000;
+  --link-underline-opacity: 1;
 }
 .u-link-underline-white {
   text-decoration-color: #ffffff;
+  --link-underline-opacity: 1;
 }
 .u-link-underline {
   text-decoration-color: rgba(var(--atomix-link-color-rgb), var(--atomix-u-link-underline-opacity, 1));
+  --link-underline-opacity: 1;
 }
 .u-link-underline-opacityhover-0 {
   --atomix-u-u-link-underline-opacity-0: 0;
@@ -15334,64 +15394,64 @@ body.is-open-photoviewer {
   -moz-column-gap: 50rem;
        column-gap: 50rem;
 }
-.u-fs-xs {
+.u-text-xs {
   font-size: 0.75rem;
 }
-.u-fs-sm {
+.u-text-sm {
   font-size: 0.875rem;
 }
-.u-fs-base {
+.u-text-base {
   font-size: 1rem;
 }
-.u-fs-md {
+.u-text-md {
   font-size: 1.125rem;
 }
-.u-fs-lg {
+.u-text-lg {
   font-size: 1.25rem;
 }
-.u-fs-xl {
+.u-text-xl {
   font-size: 1.5rem;
 }
-.u-fs-2xl {
+.u-text-2xl {
   font-size: 2rem;
 }
-.u-fs-h1 {
+.u-text-h1 {
   font-size: 2.5rem;
 }
-.u-fs-h2 {
+.u-text-h2 {
   font-size: 2rem;
 }
-.u-fs-h3 {
+.u-text-h3 {
   font-size: 1.5rem;
 }
-.u-fs-h4 {
+.u-text-h4 {
   font-size: 1.25rem;
 }
-.u-fs-h5 {
+.u-text-h5 {
   font-size: 1.125rem;
 }
-.u-fs-h6 {
+.u-text-h6 {
   font-size: 1rem;
 }
-.u-fs-display-1 {
+.u-text-display-1 {
   font-size: 4rem;
 }
-.u-fs-1 {
+.u-text-1 {
   font-size: 2.5rem;
 }
-.u-fs-2 {
+.u-text-2 {
   font-size: 2rem;
 }
-.u-fs-3 {
+.u-text-3 {
   font-size: 1.5rem;
 }
-.u-fs-4 {
+.u-text-4 {
   font-size: 1.25rem;
 }
-.u-fs-5 {
+.u-text-5 {
   font-size: 1.125rem;
 }
-.u-fs-6 {
+.u-text-6 {
   font-size: 1rem;
 }
 .u-fst-italic {
@@ -15400,37 +15460,55 @@ body.is-open-photoviewer {
 .u-fst-normal {
   font-style: normal;
 }
-.u-fw-light {
+.u-font-light {
   font-weight: 300;
 }
-.u-fw-normal {
+.u-font-normal {
   font-weight: 400;
 }
-.u-fw-medium {
+.u-font-medium {
   font-weight: 500;
 }
-.u-fw-semibold {
+.u-font-semibold {
   font-weight: 600;
 }
-.u-fw-bold {
+.u-font-bold {
   font-weight: 700;
 }
-.u-fw-heavy {
+.u-font-heavy {
   font-weight: 800;
 }
-.u-fw-black {
+.u-font-black {
   font-weight: 900;
 }
-.u-lh-base {
+.u-leading-base {
   line-height: 1.2;
 }
-.u-lh-sm {
+.u-leading-sm {
   line-height: 1.43;
 }
-.u-lh-lg {
+.u-leading-lg {
   line-height: 1.56;
 }
-.u-lh-1 {
+.u-leading-none {
+  line-height: 1;
+}
+.u-leading-tight {
+  line-height: 1.25;
+}
+.u-leading-snug {
+  line-height: 1.375;
+}
+.u-leading-normal {
+  line-height: 1.5;
+}
+.u-leading-relaxed {
+  line-height: 1.625;
+}
+.u-leading-loose {
+  line-height: 2;
+}
+.u-leading-1 {
   line-height: 1;
 }
 .u-text-start {
@@ -15442,15 +15520,15 @@ body.is-open-photoviewer {
 .u-text-center {
   text-align: center;
 }
-.u-td-none {
-  text-decoration: none;
-}
-.u-td-underline {
+.u-underline {
   text-decoration: underline;
 }
-.u-td-line-through {
+.u-line-through {
   text-decoration: line-through;
 }
+.u-no-underline {
+  text-decoration: none;
+}
 .u-text-lowercase {
   text-transform: lowercase;
 }
@@ -15471,7 +15549,7 @@ body.is-open-photoviewer {
   word-break: break-word !important;
 }
 .u-text-primary {
-  color: #ffb800;
+  color: #8b5cf6;
 }
 .u-text-secondary {
   color: #f3f4f6;
@@ -15587,4 +15665,57 @@ body.is-open-photoviewer {
 .u-z-drawer {
   z-index: 1070;
 }
+.u-text-gradient-base {
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-primary {
+  background-image: var(--atomix-primary-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-secondary {
+  background-image: var(--atomix-secondary-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-success {
+  background-image: var(--atomix-success-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-warning {
+  background-image: var(--atomix-warning-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-error {
+  background-image: var(--atomix-error-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-info {
+  background-image: var(--atomix-info-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-light {
+  background-image: var(--atomix-light-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
+.u-text-gradient-dark {
+  background-image: var(--atomix-dark-gradient);
+  --background-clip: text;
+  ---webkit-background-clip: text;
+  ---webkit-text-fill-color: transparent;
+}
 /*# sourceMappingURL=atomix.css.map */