@shohojdhara/atomix 0.5.9 → 0.6.1

package/dist/atomix.css

@@ -1454,11 +1454,6 @@ a, a:hover {
 .o-masonry-grid--animate .o-masonry-grid__item {
   transition: opacity var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), top var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), left var(--atomix-transition-duration-base) var(--atomix-transition-timing-base);
 }
-@supports (transition-behavior: allow-discrete) {
-  .o-masonry-grid--animate .o-masonry-grid__item {
-    transition-behavior: allow-discrete;
-  }
-}
 .o-masonry-grid__item {
   box-sizing: border-box;
   width: 100%;
@@ -1480,11 +1475,6 @@ a, a:hover {
   opacity: 0;
   visibility: hidden;
 }
-@supports (view-transition-name: masonry-item) {
-  .o-masonry-grid__item:not([style*="position: absolute"]) {
-    view-transition-name: masonry-item;
-  }
-}
 .o-masonry-grid__item-loading {
   position: relative;
 }
@@ -1498,31 +1488,13 @@ a, a:hover {
   background: var(--atomix-gray-10);
   z-index: var(--atomix-z-index-10);
   border-radius: var(--atomix-border-radius-sm);
-  animation: masonry-loading-fade-in 0.5s ease-out forwards;
+  opacity: 0;
 }
 .o-masonry-grid__item-loading img {
   opacity: 0;
 }
-@supports (property: opacity) and (animation-timeline: view()) {
-  .o-masonry-grid__item-loading img {
-    opacity: var(--masonry-img-opacity);
-  }
-  @property --masonry-img-opacity {
-    .o-masonry-grid__item-loading img {
-      syntax: "<number>";
-      inherits: false;
-      initial-value: 0;
-    }
-  }
-}
 .o-masonry-grid__item-loaded img {
-  animation: masonry-item-fade-in var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
-}
-@supports (property: opacity) and (animation-timeline: view()) {
-  .o-masonry-grid__item-loaded img {
-    opacity: var(--masonry-img-opacity);
-    animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
-  }
+  opacity: 1;
 }
 .o-masonry-grid--loading-images {
   position: relative;
@@ -1557,36 +1529,6 @@ a, a:hover {
     transform: rotate(360deg);
   }
 }
-@keyframes masonry-loading-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes masonry-item-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes masonry-item-fade-in-advanced {
-  from {
-    --masonry-img-opacity: 0;
-    transform: translateY(20px) scale(0.95);
-  }
-  to {
-    --masonry-img-opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
 .o-block {
   --atomix-block-spacing-xs: 1rem;
   --atomix-block-spacing-sm: 2rem;
@@ -1751,7 +1693,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 65%, transparent);
+  background-color: var(--atomix-accordion-header-bg);
 }
 .c-accordion__header--icon-left {
   flex-direction: row-reverse;
@@ -1792,7 +1734,7 @@ a, a:hover {
   color: var(--atomix-accordion-body-color);
   padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
   border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-accordion-body-bg) 65%, transparent);
+  background-color: var(--atomix-accordion-body-bg);
 }
 .c-accordion:focus, .c-accordion.is-focused {
   --atomix-accordion-border-color: var(--atomix-focus-border-color);
@@ -1863,7 +1805,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-avatar-bg) 65%, transparent);
+  background-color: var(--atomix-avatar-bg);
 }
 .c-avatar--xs {
   --atomix-avatar-size: 1.5rem;
@@ -1959,7 +1901,7 @@ a, a:hover {
   width: var(--atomix-avatar-size);
   height: var(--atomix-avatar-size);
   border-radius: var(--atomix-avatar-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-avatar-group-more-bg) 65%, transparent);
+  background-color: var(--atomix-avatar-group-more-bg);
 }
 .c-avatar-group--stacked {
   gap: 0;
@@ -2282,7 +2224,7 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 65%, transparent);
+  background-color: var(--atomix-tag-bg-color);
 }
 .c-badge__icon {
   font-size: var(--atomix-tag-icon-size);
@@ -2353,7 +2295,7 @@ a, a:hover {
   list-style: none;
   padding-left: 0px;
   margin-bottom: var(--atomix-breadcrumb-margin-bottom);
-  background-color: color-mix(in srgb, var(--atomix-breadcrumb-bg) 65%, transparent);
+  background-color: var(--atomix-breadcrumb-bg);
 }
 .c-breadcrumb__item {
   display: flex;
@@ -2455,7 +2397,7 @@ a, a:hover {
   border: var(--atomix-btn-border-width) solid var(--atomix-btn-border-color);
   border-radius: var(--atomix-btn-border-radius);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-btn-bg) 65%, transparent);
+  background-color: var(--atomix-btn-bg);
 }
 .c-btn__icon {
   font-size: var(--atomix-btn-icon-size);
@@ -2463,7 +2405,7 @@ a, a:hover {
 .c-btn:hover {
   color: var(--atomix-btn-hover-color);
   border-color: var(--atomix-btn-hover-border-color);
-  background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 65%, transparent);
+  background-color: var(--atomix-btn-hover-bg);
 }
 .c-btn--primary {
   --atomix-btn-color: var(--atomix-white, #ffffff);
@@ -2897,7 +2839,7 @@ a, a:hover {
   border-color: var(--atomix-btn-disabled-border-color);
   opacity: var(--atomix-btn-disabled-opacity);
   cursor: not-allowed;
-  background-color: color-mix(in srgb, var(--atomix-btn-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-btn-disabled-bg);
 }
 .c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
   outline: none;
@@ -3005,7 +2947,7 @@ a, a:hover {
   border-radius: var(--atomix-datepicker-border-radius);
   box-shadow: var(--atomix-datepicker-box-shadow);
   margin-top: 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-datepicker-bg) 65%, transparent);
+  background-color: var(--atomix-datepicker-bg);
 }
 .c-datepicker__calendar--top-start, .c-datepicker__calendar--top-end {
   bottom: 100%;
@@ -3388,7 +3330,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
+  background-color: var(--atomix-card-bg);
 }
 .c-card[href] {
   display: block;
@@ -3518,7 +3460,7 @@ a, a:hover {
   --atomix-card-text-font-size: var(--atomix-font-size-base);
 }
 .c-card--filled {
-  background-color: color-mix(in srgb, var(--atomix-card-bg) 65%, transparent);
+  background-color: var(--atomix-card-bg);
 }
 .c-card--glass {
   max-width: none;
@@ -5161,7 +5103,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-checkbox-bg) 65%, transparent);
+  background-color: var(--atomix-checkbox-bg);
 }
 .c-checkbox__input[type=radio] {
   border-radius: 50rem;
@@ -5246,7 +5188,7 @@ a, a:hover {
   color: var(--atomix-body-color);
 }
 .c-color-mode-toggle:hover:not(:disabled) {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-color-mode-toggle:focus-visible {
   outline: none;
@@ -5273,7 +5215,7 @@ a, a:hover {
   opacity: 0.5;
 }
 [data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
-  background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 65%, transparent);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 @media (prefers-reduced-motion: reduce) {
   .c-color-mode-toggle {
@@ -5322,7 +5264,7 @@ a, a:hover {
   align-items: center;
   padding: var(--atomix-countdown-item-padding-y) var(--atomix-countdown-item-padding-x);
   border-radius: var(--atomix-countdown-focused-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-countdown-focused-bg) 65%, transparent);
+  background-color: var(--atomix-countdown-focused-bg);
 }
 .c-countdown--focused .c-countdown__time-label {
   font-size: var(--atomix-countdown-focused-label-font-size);
@@ -5350,10 +5292,10 @@ a, a:hover {
   margin-bottom: 0;
   color: var(--atomix-data-table-color);
   border-collapse: collapse;
-  background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-bg);
 }
 .c-data-table__header {
-  background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-header-bg);
 }
 .c-data-table__header-cell {
   padding: 0.75rem 1rem;
@@ -5370,7 +5312,7 @@ a, a:hover {
           user-select: none;
 }
 .c-data-table__header-cell--sortable:hover {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-data-table__header-content {
   display: flex;
@@ -5438,16 +5380,16 @@ a, a:hover {
   vertical-align: middle;
 }
 .c-data-table__row {
-  background-color: color-mix(in srgb, var(--atomix-data-table-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-bg);
 }
 .c-data-table__row:hover {
-  background-color: color-mix(in srgb, var(--atomix-data-table-hover-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-hover-bg);
 }
 .c-data-table__row[role=button] {
   cursor: pointer;
 }
 .c-data-table__row--selected {
-  background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.1) 65%, transparent);
+  background-color: rgba(var(--atomix-primary-rgb), 0.1);
 }
 .c-data-table__cell--selection {
   width: 48px;
@@ -5470,7 +5412,7 @@ a, a:hover {
   color: var(--atomix-gray-500);
 }
 .c-data-table--striped tbody tr:nth-of-type(odd) {
-  background-color: color-mix(in srgb, var(--atomix-data-table-striped-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-striped-bg);
 }
 .c-data-table--bordered {
   border: var(--atomix-border-width) var(--atomix-border-style) var(--atomix-data-table-border-color);
@@ -5491,7 +5433,7 @@ a, a:hover {
   position: sticky;
   top: var(--sticky-header-offset, 0);
   z-index: 10;
-  background-color: color-mix(in srgb, var(--atomix-data-table-header-bg) 65%, transparent);
+  background-color: var(--atomix-data-table-header-bg);
 }
 .c-data-table-toolbar {
   display: flex;
@@ -5690,7 +5632,7 @@ a, a:hover {
   border-radius: var(--atomix-dropdown-border-radius);
   box-shadow: var(--atomix-dropdown-box-shadow);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-bg);
 }
 .c-dropdown__menu--glass {
   box-shadow: var(--atomix-dropdown-box-shadow);
@@ -5714,11 +5656,11 @@ a, a:hover {
   color: var(--atomix-dropdown-link-hover-color);
   outline: none;
   padding-left: calc(var(--atomix-dropdown-item-padding-x) + 3px);
-  background-color: color-mix(in srgb, var(--atomix-dropdown-link-hover-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-link-hover-bg);
 }
 .c-dropdown__menu-item.is-active {
   color: var(--atomix-dropdown-active-color);
-  background-color: color-mix(in srgb, var(--atomix-dropdown-active-bg) 65%, transparent);
+  background-color: var(--atomix-dropdown-active-bg);
 }
 .c-dropdown__menu-item.is-disabled {
   color: var(--atomix-dropdown-color);
@@ -5862,7 +5804,7 @@ a, a:hover {
   opacity: 0;
   z-index: 1;
   transition: opacity var(--atomix-edge-panel-animation-duration) ease;
-  background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-edge-panel-backdrop-bg);
 }
 .c-edge-panel__backdrop.is-animating {
   animation: fadeIn 0.3s ease forwards;
@@ -5880,7 +5822,7 @@ a, a:hover {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  background-color: color-mix(in srgb, var(--atomix-edge-panel-bg) 65%, transparent);
+  background-color: var(--atomix-edge-panel-bg);
 }
 .c-edge-panel__container.is-animating {
   animation: slideIn var(--atomix-edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
@@ -5909,7 +5851,7 @@ a, a:hover {
   transition: background-color 0.2s ease;
 }
 .c-edge-panel__close:hover {
-  background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 65%, transparent);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .c-edge-panel__close:focus-visible {
   outline: 2px solid var(--atomix-primary);
@@ -6197,7 +6139,7 @@ a, a:hover {
   border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
   padding: var(--atomix-footer-padding-y) 0;
   position: relative;
-  background-color: color-mix(in srgb, var(--atomix-footer-bg) 65%, transparent);
+  background-color: var(--atomix-footer-bg);
 }
 .c-footer--glass {
   padding: 0;
@@ -6210,7 +6152,7 @@ a, a:hover {
   color: var(--atomix-footer-color);
   border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
   padding: var(--atomix-footer-padding-y) 0;
-  background-color: color-mix(in srgb, rgba(var(--atomix-footer-bg-rgb), 0.5, true) 65%, transparent);
+  background-color: rgba(var(--atomix-footer-bg-rgb), 0.5, true);
 }
 .c-footer__container {
   display: flex;
@@ -6444,7 +6386,7 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-footer__social-link::before {
   content: "";
@@ -6458,7 +6400,7 @@ a, a:hover {
   color: var(--atomix-component-active-color);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
   transform: translateX(100%);
@@ -6528,7 +6470,7 @@ a, a:hover {
   border: 1px solid var(--atomix-border-subtle);
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8)) 65%, transparent);
+  background-color: linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8));
 }
 .c-footer__newsletter::before {
   content: "";
@@ -6589,7 +6531,7 @@ a, a:hover {
   outline: none;
   transition: all 0.3s ease;
   box-sizing: border-box;
-  background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-primary-bg-subtle);
 }
 .c-footer__newsletter-input:focus {
   border-color: var(--atomix-primary);
@@ -6622,7 +6564,7 @@ a, a:hover {
   white-space: nowrap;
   position: relative;
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-footer__newsletter-button::before {
   content: "";
@@ -6635,7 +6577,7 @@ a, a:hover {
 .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
   transform: translateX(100%);
@@ -6689,7 +6631,7 @@ a, a:hover {
   overflow: hidden;
   text-decoration: none;
   outline: none;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg) 65%, transparent);
+  background-color: var(--atomix-secondary-bg);
 }
 .c-footer__back-to-top::before {
   content: "";
@@ -6704,7 +6646,7 @@ a, a:hover {
   border-color: var(--atomix-primary);
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
   transform: translateX(100%);
@@ -7223,7 +7165,7 @@ a, a:hover {
   place-items: center;
   padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-hero-bg) 65%, transparent);
+  background-color: var(--atomix-hero-bg);
 }
 .c-hero__bg {
   position: absolute;
@@ -7247,7 +7189,7 @@ a, a:hover {
   inset: 0;
   opacity: var(--atomix-hero-overlay-opacity);
   z-index: 1;
-  background-color: color-mix(in srgb, var(--atomix-hero-overlay) 65%, transparent);
+  background-color: var(--atomix-hero-overlay);
 }
 .c-hero__container {
   position: relative;
@@ -7422,7 +7364,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-input-bg) 65%, transparent);
+  background-color: var(--atomix-input-bg);
 }
 .c-input:focus, .c-input:hover {
   --atomix-input-border-color: var(--atomix-primary-border-subtle);
@@ -7523,14 +7465,14 @@ a, a:hover {
   list-style: none;
   width: 100%;
   max-width: var(--atomix-list-group-width);
-  background-color: color-mix(in srgb, var(--atomix-list-group-bg) 65%, transparent);
+  background-color: var(--atomix-list-group-bg);
 }
 .c-list-group__item {
   padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
   font-size: var(--atomix-list-group-item-font-size);
   color: var(--atomix-list-group-item-color);
   border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
-  background-color: color-mix(in srgb, var(--atomix-list-group-item-bg) 65%, transparent);
+  background-color: var(--atomix-list-group-item-bg);
 }
 .c-list-group__item--primary {
   --atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
@@ -7597,7 +7539,7 @@ a, a:hover {
   width: var(--atomix-list-item-dash-width);
   height: var(--atomix-list-item-dash-height);
   transform: translateY(-50%);
-  background-color: color-mix(in srgb, var(--atomix-list-color) 65%, transparent);
+  background-color: var(--atomix-list-color);
 }
 .c-list--number {
   list-style-type: decimal;
@@ -7639,7 +7581,7 @@ a, a:hover {
   border-radius: var(--atomix-menu-border-radius);
   box-shadow: var(--atomix-menu-box-shadow);
   z-index: 5;
-  background-color: color-mix(in srgb, var(--atomix-menu-bg) 65%, transparent);
+  background-color: var(--atomix-menu-bg);
 }
 .c-menu__container {
   width: 100%;
@@ -7688,14 +7630,14 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg);
 }
 .c-menu__link:hover {
   color: var(--atomix-menu-item-color);
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg-hover) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg-hover);
 }
 .c-menu__link:focus, .c-menu__link:active, .c-menu__link.is-active {
-  background-color: color-mix(in srgb, var(--atomix-menu-item-bg-active) 65%, transparent);
+  background-color: var(--atomix-menu-item-bg-active);
 }
 .c-menu__icon {
   font-size: var(--atomix-menu-item-icon-size);
@@ -7865,7 +7807,7 @@ a, a:hover {
   padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
   border-radius: var(--atomix-messages-border-radius);
   border: var(--atomix-messages-border-width) solid var(--atomix-messages-border-color);
-  background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
+  background-color: var(--atomix-messages-bg);
 }
 .c-messages__body {
   max-height: var(--atomix-messages-body-height);
@@ -7916,14 +7858,14 @@ a, a:hover {
   font-size: var(--atomix-messages-text-font-size);
   padding: var(--atomix-messages-text-padding-y) var(--atomix-messages-text-padding-x);
   border-radius: 0.25rem var(--atomix-messages-text-border-radius) var(--atomix-messages-text-border-radius) 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-messages-text-bg) 65%, transparent);
+  background-color: var(--atomix-messages-text-bg);
 }
 .c-messages__file {
   display: flex;
   flex-wrap: wrap;
   padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
   border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-messages-file-bg) 65%, transparent);
+  background-color: var(--atomix-messages-file-bg);
 }
 .c-messages__file-icon {
   display: grid !important;
@@ -7934,7 +7876,7 @@ a, a:hover {
   color: var(--atomix-tertiary-text-emphasis);
   margin-right: var(--atomix-messages-file-icon-margin-right);
   border-radius: 50rem;
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-messages__file-name {
   color: var(--atomix-messages-file-text-color);
@@ -7989,7 +7931,7 @@ a, a:hover {
 }
 .c-messages__content--self .c-messages__file-icon {
   color: var(--atomix-invert-text-emphasis);
-  background-color: color-mix(in srgb, var(--atomix-messages-file-icon-bg) 65%, transparent);
+  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: #7c3aed;
@@ -8034,7 +7976,7 @@ a, a:hover {
   border: var(--atomix-messages-input-border-width) solid var(--atomix-messages-input-border-color);
   border-radius: var(--atomix-messages-input-border-radius);
   resize: none;
-  background-color: color-mix(in srgb, var(--atomix-messages-bg) 65%, transparent);
+  background-color: var(--atomix-messages-bg);
 }
 .c-messages__input::-moz-placeholder {
   color: var(--atomix-messages-input-placeholder-color);
@@ -8060,7 +8002,7 @@ a, a:hover {
      -moz-appearance: none;
           appearance: none;
   border: 0;
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-messages__submit .c-icon {
   width: var(--atomix-messages-form-submit-icon-size);
@@ -8232,7 +8174,7 @@ a, a:hover {
   inset: 0;
   opacity: 0;
   transition: 0.3s;
-  background-color: color-mix(in srgb, var(--atomix-modal-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-modal-backdrop-bg);
 }
 .c-modal__dialog {
   position: relative;
@@ -8257,7 +8199,7 @@ a, a:hover {
   border-radius: var(--atomix-modal-content-border-radius);
   overflow: hidden;
   pointer-events: auto;
-  background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 65%, transparent);
+  background-color: var(--atomix-modal-content-bg);
 }
 .c-modal__header {
   display: flex;
@@ -8371,14 +8313,14 @@ a, a:hover {
   color: var(--atomix-nav-link-color);
 }
 .c-nav__link:hover, .c-nav__link:active, .c-nav__link:focus, .c-nav__link:focus-visible {
-  background-color: color-mix(in srgb, var(--atomix-nav-link-hover-bg) 65%, transparent);
+  background-color: var(--atomix-nav-link-hover-bg);
 }
 .c-nav__link--disabled {
   color: var(--atomix-disabled-text-emphasis);
   pointer-events: none;
 }
 .c-nav__link:focus, .c-nav__link:active, .c-nav__link.is-active {
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-nav__icon {
   font-size: var(--atomix-nav-icon-size);
@@ -8441,7 +8383,7 @@ a, a:hover {
   padding: 0.5rem 1rem;
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
-  background-color: color-mix(in srgb, rgba(var(--atomix-body-bg-rgb), 0.95) 65%, transparent);
+  background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
 }
 .c-nav--float-top-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-top-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item {
   margin-left: 0.25rem;
@@ -8451,7 +8393,7 @@ a, a:hover {
   border-radius: 0.625rem;
 }
 .c-nav--float-top-center .c-nav__link:hover, .c-nav--float-top-center .c-nav__link:focus, .c-nav--float-top-center .c-nav__link:active, .c-nav--float-top-center .c-nav__link.is-active, .c-nav--float-bottom-center .c-nav__link:hover, .c-nav--float-bottom-center .c-nav__link:focus, .c-nav--float-bottom-center .c-nav__link:active, .c-nav--float-bottom-center .c-nav__link.is-active {
-  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-brand-bg-subtle);
 }
 .c-nav--float-top-center {
   top: 1.25rem;
@@ -8486,7 +8428,7 @@ a, a:hover {
   padding: var(--atomix-navbar-padding-y) 0;
   border-bottom: var(--atomix-navbar-border-width) solid var(--atomix-navbar-border-color);
   z-index: var(--atomix-navbar-z-index);
-  background-color: color-mix(in srgb, var(--atomix-navbar-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-bg);
 }
 .c-navbar__container {
   display: flex;
@@ -8525,7 +8467,7 @@ a, a:hover {
   border-radius: var(--atomix-navbar-toggler-border-radius);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-navbar-toggler-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-toggler-bg);
 }
 .c-navbar__toggler:hover {
   opacity: 0.8;
@@ -8574,7 +8516,7 @@ a, a:hover {
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-navbar-backdrop-bg) 65%, transparent);
+  background-color: var(--atomix-navbar-backdrop-bg);
 }
 .c-navbar__backdrop.is-open {
   opacity: 1;
@@ -8864,7 +8806,7 @@ a, a:hover {
   border-radius: var(--atomix-callout-border-radius);
   border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
   transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
-  background-color: color-mix(in srgb, var(--atomix-callout-bg) 65%, transparent);
+  background-color: var(--atomix-callout-bg);
 }
 .c-callout__content {
   width: 100%;
@@ -8944,7 +8886,7 @@ a, a:hover {
   border: none;
   box-shadow: var(--atomix-callout-box-shadow);
   animation: calloutToastIn 0.3s var(--atomix-callout-transition-timing) forwards;
-  background-color: color-mix(in srgb, var(--atomix-callout-toast-bg) 65%, transparent);
+  background-color: var(--atomix-callout-toast-bg);
 }
 .c-callout--toast .c-callout__content {
   align-items: flex-start;
@@ -9180,7 +9122,7 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__link:hover {
   --atomix-pagination-color: var(--atomix-pagination-hover-color);
@@ -9260,7 +9202,7 @@ a, a:hover {
   border-radius: var(--atomix-pagination-border-radius);
   color: var(--atomix-pagination-color);
   transition: all 0.2s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__search-input:focus {
   outline: none;
@@ -9283,7 +9225,7 @@ a, a:hover {
   color: var(--atomix-pagination-color);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  background-color: color-mix(in srgb, var(--atomix-pagination-bg) 65%, transparent);
+  background-color: var(--atomix-pagination-bg);
 }
 .c-pagination__search-button:hover {
   --atomix-pagination-color: var(--atomix-pagination-hover-color);
@@ -9334,7 +9276,7 @@ a, a:hover {
   padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
   border-radius: var(--atomix-popover-border-radius);
   box-shadow: var(--atomix-popover-box-shadow);
-  background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
+  background-color: var(--atomix-popover-bg);
 }
 .c-popover__arrow {
   position: absolute;
@@ -9343,7 +9285,7 @@ a, a:hover {
   box-shadow: var(--atomix-popover-box-shadow);
   z-index: 1;
   transform-origin: center;
-  background-color: color-mix(in srgb, var(--atomix-popover-bg) 65%, transparent);
+  background-color: var(--atomix-popover-bg);
 }
 .c-popover.is-open {
   opacity: 1;
@@ -9390,7 +9332,7 @@ a, a:hover {
   width: 100%;
   max-width: 37.5rem;
   margin: 0 auto;
-  background-color: color-mix(in srgb, var(--atomix-product-review-bg) 65%, transparent);
+  background-color: var(--atomix-product-review-bg);
 }
 .c-product-review__header {
   display: flex;
@@ -9449,7 +9391,7 @@ a, a:hover {
   color: var(--atomix-body-color);
   font-family: inherit;
   resize: vertical;
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-product-review__textarea:focus {
   outline: none;
@@ -9496,7 +9438,7 @@ a, a:hover {
   height: var(--atomix-progress-bar-height);
   border-radius: var(--atomix-progress-border-radius);
   overflow: hidden;
-  background-color: color-mix(in srgb, var(--atomix-progress-bg) 65%, transparent);
+  background-color: var(--atomix-progress-bg);
 }
 .c-progress__bar {
   width: var(--atomix-progress-bar-width);
@@ -9504,7 +9446,7 @@ a, a:hover {
   color: var(--atomix-progress-bar-color);
   border-radius: var(--atomix-progress-border-radius);
   transition: var(--atomix-progress-bar-transition) var(--atomix-progress-bar-easing);
-  background-color: color-mix(in srgb, var(--atomix-progress-bar-bg) 65%, transparent);
+  background-color: var(--atomix-progress-bar-bg);
 }
 .c-progress--primary {
   --atomix-progress-bar-bg: var(--atomix-primary);
@@ -9709,7 +9651,7 @@ a, a:hover {
   max-width: var(--atomix-river-width);
   padding: var(--atomix-river-padding-y) var(--atomix-river-padding-x);
   border-radius: var(--atomix-river-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-river-bg) 65%, transparent);
+  background-color: var(--atomix-river-bg);
 }
 .c-river__bg {
   position: absolute;
@@ -9731,7 +9673,7 @@ a, a:hover {
   inset: 0;
   opacity: var(--atomix-river-overlay-opacity);
   border-radius: var(--atomix-river-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-river-overlay) 65%, transparent);
+  background-color: var(--atomix-river-overlay);
 }
 .c-river__container {
   position: relative;
@@ -9953,7 +9895,7 @@ a, a:hover {
   width: 100%;
   height: 100%;
   opacity: var(--atomix-sectionintro-overlay-opacity);
-  background-color: color-mix(in srgb, var(--atomix-sectionintro-overlay-bg-color) 65%, transparent);
+  background-color: var(--atomix-sectionintro-overlay-bg-color);
 }
 .c-sectionintro--has-bg {
   color: var(--atomix-color-white);
@@ -10039,7 +9981,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-bg) 65%, transparent);
+  background-color: var(--atomix-select-bg);
 }
 .c-select__selected:hover {
   border-color: var(--atomix-select-border-color-hover);
@@ -10070,7 +10012,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 65%, transparent);
+  background-color: var(--atomix-select-panel-bg);
 }
 .c-select__panel {
   padding: var(--atomix-select-panel-padding-x) var(--atomix-select-panel-padding-y);
@@ -10088,13 +10030,13 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-select-item-bg) 65%, transparent);
+  background-color: var(--atomix-select-item-bg);
 }
 .c-select__item, .c-select__item > * {
   cursor: pointer;
 }
 .c-select__item:hover {
-  background-color: color-mix(in srgb, var(--atomix-select-item-bg-hover) 65%, transparent);
+  background-color: var(--atomix-select-item-bg-hover);
 }
 .c-select--lg {
   --atomix-select-font-size: var(--atomix-select-font-size-lg);
@@ -10147,7 +10089,7 @@ a, a:hover {
   border-radius: var(--atomix-side-menu-border-radius);
   border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
   box-shadow: var(--atomix-side-menu-box-shadow);
-  background-color: color-mix(in srgb, var(--atomix-side-menu-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-bg);
 }
 @media (max-width: 991.98px) {
   .c-side-menu {
@@ -10191,10 +10133,10 @@ a, a:hover {
   transition: var(--atomix-side-menu-toggler-transition);
   text-align: left;
   margin: 0;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-toggler-bg);
 }
 .c-side-menu__toggler:hover {
-  background-color: color-mix(in srgb, var(--atomix-side-menu-toggler-hover-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-toggler-hover-bg);
 }
 .c-side-menu__toggler:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
@@ -10261,12 +10203,12 @@ a, a:hover {
   cursor: pointer;
   transition: var(--atomix-side-menu-item-transition);
   position: relative;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-bg);
 }
 .c-side-menu__link:hover {
   color: var(--atomix-side-menu-item-hover-color);
   text-decoration: none;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-hover-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-hover-bg);
 }
 .c-side-menu__link:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
@@ -10281,14 +10223,14 @@ a, a:hover {
 .c-side-menu__link.is-active {
   color: var(--atomix-side-menu-item-active-color);
   font-weight: 500;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-active-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-active-bg);
 }
 .c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
   color: var(--atomix-side-menu-item-disabled-color);
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.6;
-  background-color: color-mix(in srgb, var(--atomix-side-menu-item-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-side-menu-item-disabled-bg);
 }
 .c-side-menu__link-icon {
   flex-shrink: 0;
@@ -10360,7 +10302,7 @@ a, a:hover {
   pointer-events: none;
   vertical-align: middle;
   cursor: wait;
-  background-color: color-mix(in srgb, linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%) 65%, transparent);
+  background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
 }
 .c-skeleton--rect {
   width: calc(var(--atomix-skeleton-height) * 5.15);
@@ -10446,7 +10388,7 @@ a, a:hover {
   justify-content: center;
   border: 2px dashed var(--atomix-primary-border-subtle);
   border-radius: 0.25rem;
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__wrapper {
   position: relative;
@@ -10492,13 +10434,13 @@ a, a:hover {
   justify-content: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  background-color: color-mix(in srgb, var(--atomix-primary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-primary-bg-subtle);
 }
 .c-slider__navigation-prev:hover,
 .c-slider__navigation-next:hover {
   transform: translateY(-50%) scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__navigation-prev:active,
 .c-slider__navigation-next:active {
@@ -10551,18 +10493,18 @@ a, a:hover {
   cursor: pointer;
   pointer-events: auto;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: color-mix(in srgb, var(--atomix-tertiary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-tertiary-bg-subtle);
 }
 .c-slider__pagination-bullet:hover {
   transform: scale(1.2);
-  background-color: color-mix(in srgb, var(--atomix-secondary-bg-subtle) 65%, transparent);
+  background-color: var(--atomix-secondary-bg-subtle);
 }
 .c-slider__pagination-bullet:active {
   transform: scale(1.1);
 }
 .c-slider__pagination-bullet--active {
   transform: scale(1.2);
-  background-color: color-mix(in srgb, var(--atomix-primary) 65%, transparent);
+  background-color: var(--atomix-primary);
 }
 .c-slider__empty-message {
   color: var(--atomix-tertiary-text);
@@ -10719,7 +10661,7 @@ a, a:hover {
   width: var(--atomix-steps-line-width);
   height: var(--atomix-steps-line-height);
   transition: 1s;
-  background-color: color-mix(in srgb, var(--atomix-steps-item-bg) 65%, transparent);
+  background-color: var(--atomix-steps-item-bg);
 }
 .c-steps__content {
   display: flex;
@@ -10735,7 +10677,7 @@ a, a:hover {
   color: var(--atomix-steps-item-number-color);
   font-size: var(--atomix-steps-item-number-font-size);
   border-radius: var(--atomix-steps-item-number-border-radius);
-  background-color: color-mix(in srgb, var(--atomix-steps-item-number-bg) 65%, transparent);
+  background-color: var(--atomix-steps-item-number-bg);
 }
 .c-steps__text {
   color: var(--atomix-steps-item-color);
@@ -10815,14 +10757,14 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg);
 }
 .c-tabs__nav-btn:active, .c-tabs__nav-btn.is-active {
   color: var(--atomix-tabs-nav-btn-active-color);
   border-color: transparent transparent var(--atomix-tabs-nav-btn-border-active-color) transparent;
 }
 .c-tabs__nav-btn:hover {
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-hover) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg-hover);
 }
 .c-tabs__nav-btn:disabled, .c-tabs__nav-btn.is-disabled {
   --atomix-tabs-nav-btn-border-active-color: var(
@@ -10830,7 +10772,7 @@ a, a:hover {
   );
   color: var(--atomix-tabs-nav-btn-border-disabled-color);
   pointer-events: none;
-  background-color: color-mix(in srgb, var(--atomix-tabs-nav-btn-bg-disabled) 65%, transparent);
+  background-color: var(--atomix-tabs-nav-btn-bg-disabled);
 }
 .c-tabs__nav-btn:focus-visible {
   outline: none;
@@ -10874,7 +10816,7 @@ a, a:hover {
   width: 100%;
   max-width: var(--atomix-testimonial-width);
   padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
-  background-color: color-mix(in srgb, var(--atomix-testimonial-bg) 65%, transparent);
+  background-color: var(--atomix-testimonial-bg);
 }
 .c-testimonial__quote {
   color: var(--atomix-testimonial-quote-color);
@@ -10920,7 +10862,7 @@ a, a:hover {
   border-radius: var(--atomix-todo-border-radius);
   color: var(--atomix-todo-color);
   padding: 1.25rem;
-  background-color: color-mix(in srgb, var(--atomix-todo-bg) 65%, transparent);
+  background-color: var(--atomix-todo-bg);
 }
 .c-todo__title {
   font-size: 1.25rem;
@@ -10960,7 +10902,7 @@ a, a:hover {
   transition: background-color 0.2s ease;
 }
 .c-todo__item:hover {
-  background-color: color-mix(in srgb, var(--atomix-todo-item-hover-bg) 65%, transparent);
+  background-color: var(--atomix-todo-item-hover-bg);
 }
 .c-todo__item--completed .c-todo__item-text {
   color: var(--atomix-todo-completed-color);
@@ -11057,7 +10999,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-bg);
 }
 .c-toggle__switch::before {
   content: "";
@@ -11070,7 +11012,7 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-handle-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-handle-bg);
 }
 .c-toggle__label {
   font-size: var(--atomix-toggle-label-font-size);
@@ -11086,7 +11028,7 @@ a, a:hover {
   pointer-events: none;
 }
 .c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
-  background-color: color-mix(in srgb, var(--atomix-toggle-switch-disabled-bg) 65%, transparent);
+  background-color: var(--atomix-toggle-switch-disabled-bg);
 }
 .c-toggle.is-disabled.is-on {
   pointer-events: none;
@@ -11096,7 +11038,7 @@ a, a:hover {
   position: absolute;
   inset: 0;
   border-radius: var(--atomix-toggle-switch-handle-border-radius);
-  background-color: color-mix(in srgb, rgba(107, 114, 128, 0.6) 65%, transparent);
+  background-color: rgba(107, 114, 128, 0.6);
 }
 .c-toggle--glass {
   --atomix-toggle-switch-bg: transparent;
@@ -11146,7 +11088,7 @@ a, a:hover {
   pointer-events: auto;
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95);
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
+  background-color: var(--atomix-tooltip-bg);
 }
 .c-tooltip__content.is-active {
   opacity: 1;
@@ -11159,7 +11101,7 @@ a, a:hover {
   border-radius: calc((var(--atomix-tooltip-arrow-size) - var(--atomix-tooltip-border-radius)) / 2);
   z-index: 1;
   transform: rotate(45deg);
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 65%, transparent);
+  background-color: var(--atomix-tooltip-bg);
 }
 .c-tooltip--left .c-tooltip__arrow, .c-tooltip--right .c-tooltip__arrow {
   transform: rotate(45deg);
@@ -11239,10 +11181,10 @@ a, a:hover {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-  background-color: color-mix(in srgb, var(--atomix-upload-bg) 65%, transparent);
+  background-color: var(--atomix-upload-bg);
 }
 .c-upload:hover {
-  background-color: color-mix(in srgb, var(--atomix-upload-hover-bg) 65%, transparent);
+  background-color: var(--atomix-upload-hover-bg);
 }
 .c-upload__inner {
   display: flex;
@@ -11572,7 +11514,7 @@ a, a:hover {
   border-radius: var(--atomix--video-player-border-radius, 0.5rem);
   overflow: hidden;
   font-family: var(--atomix--font-family-base);
-  background-color: color-mix(in srgb, var(--atomix--video-player-bg, #000) 65%, transparent);
+  background-color: var(--atomix--video-player-bg, #000);
 }
 .c-video-player__video {
   width: 100%;
@@ -11828,7 +11770,7 @@ a, a:hover {
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  background-color: color-mix(in srgb, rgba(var(--atomix-primary-rgb), 0.7) 65%, transparent);
+  background-color: rgba(var(--atomix-primary-rgb), 0.7);
 }
 .c-video-player__settings-tabs {
   display: flex;
@@ -12096,7 +12038,7 @@ a, a:hover {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  background-color: color-mix(in srgb, var(--atomix-body-bg) 65%, transparent);
+  background-color: var(--atomix-body-bg);
 }
 .c-photo-viewer__info-panel, .c-photo-viewer__thumbnails {
   scrollbar-width: thin;
@@ -12148,7 +12090,7 @@ a, a:hover {
   overflow: hidden;
   position: relative;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
-  background-color: color-mix(in srgb, transparent 65%, transparent);
+  background-color: transparent;
 }
 .c-photo-viewer__thumbnail:hover {
   transform: translateY(-2px);
@@ -12204,7 +12146,7 @@ body.is-open-photoviewer {
   z-index: 1000;
   opacity: 1;
   transition-property: opacity;
-  background-color: color-mix(in srgb, transparent 65%, transparent);
+  background-color: transparent;
 }
 .c-photo-viewer__backdrop {
   position: absolute;