@shohojdhara/atomix 0.3.0 → 0.3.1

package/dist/themes/esrar.css

@@ -735,7 +735,6 @@ summary {
   --atomix-link-decoration: none;
   --atomix-link-hover-color: rgb(9.9104477612, 114.5895522388, 79.9029850746);
   --atomix-link-hover-color-rgb: 9.9104477612, 114.5895522388, 79.9029850746;
-  --atomix-code-color: #ef4444;
   --atomix-highlight-bg: #fde68a;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -746,9 +745,7 @@ summary {
   --atomix-border-radius-lg: 0.625rem;
   --atomix-border-radius-xl: 0.75rem;
   --atomix-border-radius-xxl: 1rem;
-  --atomix-border-radius-2xl: var(
-    --atomix-border-radius-xxl
-  );
+  --atomix-border-radius-2xl: var(--atomix-border-radius-xxl);
   --atomix-border-radius-3xl: 1.5rem;
   --atomix-border-radius-4xl: 2rem;
   --atomix-border-radius-pill: 50rem;
@@ -763,6 +760,136 @@ summary {
   --atomix-form-valid-border-color: #22c55e;
   --atomix-form-invalid-color: #ef4444;
   --atomix-form-invalid-border-color: #ef4444;
+  --atomix-spacing-0: 0rem;
+  --atomix-spacing-1: 0.25rem;
+  --atomix-spacing-px-6: 0.375rem;
+  --atomix-spacing-2: 0.5rem;
+  --atomix-spacing-px-10: 0.625rem;
+  --atomix-spacing-3: 0.75rem;
+  --atomix-spacing-px-14: 0.875rem;
+  --atomix-spacing-4: 1rem;
+  --atomix-spacing-5: 1.25rem;
+  --atomix-spacing-px-22: 1.375rem;
+  --atomix-spacing-6: 1.5rem;
+  --atomix-spacing-7: 1.75rem;
+  --atomix-spacing-px-30: 1.875rem;
+  --atomix-spacing-8: 2rem;
+  --atomix-spacing-9: 2.25rem;
+  --atomix-spacing-10: 2.5rem;
+  --atomix-spacing-11: 2.75rem;
+  --atomix-spacing-12: 3rem;
+  --atomix-spacing-14: 3.5rem;
+  --atomix-spacing-16: 4rem;
+  --atomix-spacing-20: 5rem;
+  --atomix-spacing-24: 6rem;
+  --atomix-spacing-28: 7rem;
+  --atomix-spacing-32: 8rem;
+  --atomix-spacing-36: 9rem;
+  --atomix-spacing-40: 10rem;
+  --atomix-spacing-44: 11rem;
+  --atomix-spacing-48: 12rem;
+  --atomix-spacing-52: 13rem;
+  --atomix-spacing-56: 14rem;
+  --atomix-spacing-60: 15rem;
+  --atomix-spacing-64: 16rem;
+  --atomix-spacing-72: 18rem;
+  --atomix-spacing-80: 20rem;
+  --atomix-spacing-90: 22.5rem;
+  --atomix-spacing-200: 50rem;
+  --atomix-red-1: #fef2f2;
+  --atomix-red-2: #fee2e2;
+  --atomix-red-3: #fecaca;
+  --atomix-red-4: #fca5a5;
+  --atomix-red-5: #f87171;
+  --atomix-red-6: #ef4444;
+  --atomix-red-7: #dc2626;
+  --atomix-red-8: #b91c1c;
+  --atomix-red-9: #991b1b;
+  --atomix-red-10: #7f1d1d;
+  --atomix-green-1: #f0fdf4;
+  --atomix-green-2: #dcfce7;
+  --atomix-green-3: #bbf7d0;
+  --atomix-green-4: #86efac;
+  --atomix-green-5: #4ade80;
+  --atomix-green-6: #22c55e;
+  --atomix-green-7: #16a34a;
+  --atomix-green-8: #15803d;
+  --atomix-green-9: #166534;
+  --atomix-green-10: #14532d;
+  --atomix-blue-1: #eff6ff;
+  --atomix-blue-2: #dbeafe;
+  --atomix-blue-3: #bfdbfe;
+  --atomix-blue-4: #93c5fd;
+  --atomix-blue-5: #60a5fa;
+  --atomix-blue-6: #3b82f6;
+  --atomix-blue-7: #2563eb;
+  --atomix-blue-8: #1d4ed8;
+  --atomix-blue-9: #1e40af;
+  --atomix-blue-10: #1e3a8a;
+  --atomix-yellow-1: #fffbeb;
+  --atomix-yellow-2: #fef3c7;
+  --atomix-yellow-3: #fde68a;
+  --atomix-yellow-4: #fcd34d;
+  --atomix-yellow-5: #fbbf24;
+  --atomix-yellow-6: #f59e0b;
+  --atomix-yellow-7: #d97706;
+  --atomix-yellow-8: #b45309;
+  --atomix-yellow-9: #92400e;
+  --atomix-yellow-10: #78350f;
+  --atomix-font-weight-light: 300;
+  --atomix-font-weight-normal: 400;
+  --atomix-font-weight-medium: 500;
+  --atomix-font-weight-semibold: 600;
+  --atomix-font-weight-bold: 700;
+  --atomix-font-weight-heavy: 800;
+  --atomix-font-weight-black: 900;
+  --atomix-line-height-base: 1.2;
+  --atomix-line-height-sm: 1.43;
+  --atomix-line-height-lg: 1.56;
+  --atomix-font-size-xl: 1.5rem;
+  --atomix-font-size-2xl: 2rem;
+  --atomix-display-1: 4rem;
+  --atomix-letter-spacing-h1: -1px;
+  --atomix-letter-spacing-h2: -1px;
+  --atomix-letter-spacing-h3: -1px;
+  --atomix-letter-spacing-h4: -0.5px;
+  --atomix-letter-spacing-h5: -0.5px;
+  --atomix-letter-spacing-h6: -0.5px;
+  --atomix-transition-duration-fast: 0.15s;
+  --atomix-transition-duration-base: 0.3s;
+  --atomix-transition-duration-slow: 0.5s;
+  --atomix-transition-duration-slower: 0.7s;
+  --atomix-easing-base: cubic-bezier(0.23, 1, 0.32, 1);
+  --atomix-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --atomix-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --atomix-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --atomix-easing-ease-linear: linear;
+  --atomix-transition-fast: all 0.15s cubic-bezier(0.23, 1, 0.32, 1);
+  --atomix-transition-base: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  --atomix-transition-slow: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  --atomix-z-n1: -1;
+  --atomix-z-0: 0;
+  --atomix-z-1: 1;
+  --atomix-z-2: 2;
+  --atomix-z-3: 3;
+  --atomix-z-4: 4;
+  --atomix-z-5: 5;
+  --atomix-z-dropdown: 1000;
+  --atomix-z-sticky: 1020;
+  --atomix-z-fixed: 1030;
+  --atomix-z-modal: 1040;
+  --atomix-z-popover: 1050;
+  --atomix-z-tooltip: 1060;
+  --atomix-z-drawer: 1070;
+  --atomix-breakpoint-xs: 0;
+  --atomix-breakpoint-sm: 576px;
+  --atomix-breakpoint-md: 768px;
+  --atomix-breakpoint-lg: 992px;
+  --atomix-breakpoint-xl: 1200px;
+  --atomix-breakpoint-xxl: 1440px;
+  --atomix-focus-ring-width: 3px;
+  --atomix-focus-ring-offset: 2px;
+  --atomix-focus-ring-opacity: 0.25;
 }
 [data-atomix-color-mode=dark] {
   color-scheme: dark;
@@ -776,6 +903,14 @@ summary {
   --atomix-success: #22c55e;
   --atomix-warning: #f59e0b;
   --atomix-info: #3b82f6;
+  --atomix-primary-rgb: 16, 185, 129;
+  --atomix-secondary-rgb: 75, 85, 99;
+  --atomix-light-rgb: 249, 250, 251;
+  --atomix-dark-rgb: 55, 65, 81;
+  --atomix-error-rgb: 239, 68, 68;
+  --atomix-success-rgb: 34, 197, 94;
+  --atomix-warning-rgb: 245, 158, 11;
+  --atomix-info-rgb: 59, 130, 246;
   --atomix-primary-text-emphasis: #ffffff;
   --atomix-secondary-text-emphasis: #e5e7eb;
   --atomix-tertiary-text-emphasis: #d1d5db;
@@ -834,6 +969,7 @@ summary {
   --atomix-link-color: #6ee7b7;
   --atomix-link-color-rgb: 110, 231, 183;
   --atomix-link-hover-color: rgb(44.3639053254, 220.1360946746, 150.4082840237);
+  --atomix-link-hover-color-rgb: 44.3639053254, 220.1360946746, 150.4082840237;
   --atomix-code-color: #f87171;
   --atomix-border-color: #374151;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
@@ -3575,7 +3711,7 @@ a, a:hover {
   position: relative;
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
+  --atomix-glass-transition: all var(--atomix-transition-duration, 0.15s) ease-out;
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
@@ -3682,10 +3818,14 @@ a, a:hover {
   height: 100%;
   pointer-events: none;
 }
+.c-atomix-glass__filter svg {
+  border-radius: var(--atomix-glass-radius);
+}
 .c-atomix-glass__filter-overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
+  border-radius: var(--atomix-glass-radius);
 }
 .c-atomix-glass__filter-shadow {
   position: absolute;
@@ -3696,6 +3836,7 @@ a, a:hover {
   position: relative;
   width: var(--atomix-glass-container-width);
   height: var(--atomix-glass-container-height);
+  border-radius: var(--atomix-glass-radius);
 }
 .c-atomix-glass__background-layer {
   position: absolute;
@@ -3703,7 +3844,6 @@ a, a:hover {
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
   transition: var(--atomix-glass-transition);
-  will-change: transform;
 }
 .c-atomix-glass__background-layer--dark {
   background-color: var(--atomix-gray-9, #1f2937);
@@ -3759,7 +3899,7 @@ a, a:hover {
   --atomix-tag-border-radius: 50rem;
   --atomix-tag-bg-color: var(--atomix-body-bg);
   --atomix-tag-icon-size: 1rem;
-  --atomix-tag-inner-items-gap: 0.375rem;
+  --atomix-tag-inner-items-gap: ;
   display: inline-flex;
   align-items: center;
   gap: var(--atomix-tag-inner-items-gap);
@@ -3787,7 +3927,7 @@ a, a:hover {
 }
 .c-badge--glass {
   background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
-  border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 50%, transparent);
 }
 .c-badge--primary {
   --atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
@@ -4754,7 +4894,7 @@ a, a:hover {
   --atomix-card-bg: var(--atomix-primary-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-secondary-bg-subtle);
   --atomix-card-icon-size: 1.25rem;
-  --atomix-card-icon-padding: 0.375rem;
+  --atomix-card-icon-padding: ;
   --atomix-card-icon-bg: var(--atomix-brand-bg-subtle);
   --atomix-card-icon-color: var(--atomix-brand-text-emphasis);
   --atomix-card-width: 100%;
@@ -4820,6 +4960,35 @@ a, a:hover {
   padding: var(--atomix-card-icon-padding);
   border-radius: 50rem;
 }
+.c-card__footer {
+  margin-top: var(--atomix-card-spacer-y);
+  padding-top: var(--atomix-card-spacer-y);
+  border-top: 1px solid var(--atomix-card-border-color);
+}
+.c-card__footer--align-start {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.c-card__footer--align-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.c-card__footer--align-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.c-card__footer--align-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.c-card__body--scrollable {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 .c-card:focus, .c-card.is-active {
   --atomix-card-border-color: var(--atomix-brand-border-subtle);
 }
@@ -4948,6 +5117,31 @@ a, a:hover {
 .c-card--interactive:active:not(.c-card--interactive--disabled) {
   transform: translateY(0);
 }
+.c-card--hoverable {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.c-card--hoverable:hover:not(.c-card--hoverable--disabled) {
+  transform: translateY(-2px);
+}
+.c-card--hoverable:active:not(.c-card--hoverable--disabled) {
+  transform: translateY(0);
+}
+.c-card--hoverable--hover-elevation-none:hover:not(.c-card--hoverable--disabled) {
+  box-shadow: none;
+}
+.c-card--hoverable--hover-elevation-sm:hover:not(.c-card--hoverable--disabled) {
+  box-shadow: var(--atomix-box-shadow-sm);
+}
+.c-card--hoverable--hover-elevation-md:hover:not(.c-card--hoverable--disabled) {
+  box-shadow: var(--atomix-box-shadow-md);
+}
+.c-card--hoverable--hover-elevation-lg:hover:not(.c-card--hoverable--disabled) {
+  box-shadow: var(--atomix-box-shadow-lg);
+}
+.c-card--hoverable--hover-elevation-xl:hover:not(.c-card--hoverable--disabled) {
+  box-shadow: var(--atomix-box-shadow-xl);
+}
 .c-card--primary {
   --atomix-card-bg: var(--atomix-brand-bg-subtle);
   --atomix-card-bg-hover: var(--atomix-brand-bg-subtle);
@@ -5046,7 +5240,7 @@ a, a:hover {
   .c-card {
     transition: none;
   }
-  .c-card--interactive:hover:not(.c-card--disabled) {
+  .c-card--interactive:hover:not(.c-card--disabled), .c-card--hoverable:hover:not(.c-card--disabled) {
     transform: none;
   }
   .c-card__spinner {
@@ -5287,7 +5481,6 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
-  font-size: 0.875rem;
 }
 .c-chart__action::before {
   content: "";
@@ -5447,7 +5640,7 @@ a, a:hover {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.375rem 0;
+  padding: 0;
   gap: 0.75rem;
 }
 .c-chart__settings-menu-item--info {
@@ -7017,6 +7210,9 @@ a, a:hover {
   --atomix-dropdown-link-hover-color: var(--atomix-dark-text-emphasis);
   --atomix-dropdown-link-hover-bg: var(--atomix-dark-bg-subtle);
 }
+.c-dropdown--glass .c-dropdown__menu-inner {
+  box-shadow: none;
+}
 .c-dropdown.is-open .c-dropdown__toggle-icon {
   transform: rotate(-180deg);
 }
@@ -8596,7 +8792,7 @@ a, a:hover {
   --atomix-input-font-size: 0.875rem;
   --atomix-input-line-height: 20px;
   --atomix-input-padding-x: 0.75rem;
-  --atomix-input-padding-y: 0.625rem;
+  --atomix-input-padding-y: ;
   --atomix-input-border-color: var(--atomix-primary-border-subtle);
   --atomix-input-border-width: var(--atomix-border-width);
   --atomix-input-border-radius: 0.75rem;
@@ -8642,7 +8838,7 @@ a, a:hover {
   --atomix-input-font-size: 0.875rem;
   --atomix-input-line-height: 20px;
   --atomix-input-padding-x: 0.75rem;
-  --atomix-input-padding-y: 0.375rem;
+  --atomix-input-padding-y: ;
 }
 .c-input--sm.c-input--textarea {
   --atomix-input-textarea-height: 80px;
@@ -9402,7 +9598,7 @@ a, a:hover {
   --atomix-modal-sub-margin-top: 0.25rem;
   --atomix-modal-sub-color: var(--atomix-tertiary-text-emphasis);
   --atomix-modal-sub-font-size: 0.875rem;
-  --atomix-modal-footer-items-gap: 2rem;
+  --atomix-modal-footer-items-gap: 0.5rem;
   --atomix-modal-backdrop-bg: var(--atomix-invert-bg-subtle);
   --atomix-modal-backdrop-opacity: 0.5;
   --atomix-modal-backdrop-blur: 10px;
@@ -9504,8 +9700,12 @@ a, a:hover {
 .c-modal--xl {
   --atomix-modal-width: var(--atomix-modal-xl);
 }
-.c-modal--glass .c-modal .c-modal--glass .c-modal__content {
+.c-modal--glass .c-modal__content {
   background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent);
+  box-shadow: none;
+  border-radius: inherit;
+  width: var(--atomix-modal-width);
+  height: 100%;
 }
 .c-modal.is-open .c-modal__backdrop {
   opacity: var(--atomix-modal-backdrop-opacity);
@@ -9656,7 +9856,7 @@ a, a:hover {
   --atomix-navbar-border-width: var(--atomix-border-width);
   --atomix-navbar-border-color: var(--atomix-primary-border-subtle);
   --atomix-navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --atomix-navbar-brand-margin-end: 1.875rem;
+  --atomix-navbar-brand-margin-end: ;
   --atomix-navbar-brand-font-size: 1.25rem;
   --atomix-navbar-brand-font-weight: 700;
   --atomix-navbar-brand-color: var(--atomix-body-color);
@@ -10026,7 +10226,7 @@ a, a:hover {
   --atomix-callout-title-font-size: 1rem;
   --atomix-callout-title-font-weight: 600;
   --atomix-callout-title-color: var(--atomix-body-color);
-  --atomix-callout-text-font-size: 0.875rem;
+  --atomix-callout-text-font-size: ;
   --atomix-callout-text-font-weight: 400;
   --atomix-callout-text-color: var(--atomix-body-color);
   --atomix-callout-message-spacer: 0.75rem;
@@ -10481,6 +10681,10 @@ a, a:hover {
   left: calc(var(--atomix-popover-arrow-offset) * -1);
   transform: translateY(-50%) rotate(45deg);
 }
+.c-popover--glass .c-popover__content-inner {
+  background-color: color-mix(in srgb, var(--atomix-popover-bg) 50%, transparent);
+  box-shadow: none;
+}
 .c-product-review {
   --atomix-product-review-padding: 1.5rem;
   --atomix-product-review-border-radius: var(--atomix-border-radius);
@@ -12358,7 +12562,7 @@ a, a:hover {
   --atomix-upload-loader-text-margin-top: 0.3125rem;
   --atomix-upload-loader-color: var(--atomix-primary);
   --atomix-upload-loader-bar-height: 0.625rem;
-  --atomix-upload-loader-bar-margin-top: 0.625rem;
+  --atomix-upload-loader-bar-margin-top: ;
   --atomix-upload-loader-bg-opacity: 1;
   --atomix-upload-loader-progress: 39%;
   --atomix-upload-content-margin-left: 1rem;
@@ -12537,7 +12741,7 @@ a, a:hover {
 .c-upload--large {
   --atomix-upload-width: 43.75rem;
   --atomix-upload-inner-padding-x: 1.25rem;
-  --atomix-upload-inner-padding-y: 1.375rem;
+  --atomix-upload-inner-padding-y: ;
   --atomix-upload-title-margin-top: 0;
   --atomix-upload-btn-margin-top: 0;
   --atomix-upload-helper-text-margin-top: 0;
@@ -14934,19 +15138,19 @@ body.is-open-photoviewer {
 .u-m-1 {
   margin: 0.25rem;
 }
-.u-m-1\.5 {
+.u-m-px-6 {
   margin: 0.375rem;
 }
 .u-m-2 {
   margin: 0.5rem;
 }
-.u-m-2\.5 {
+.u-m-px-10 {
   margin: 0.625rem;
 }
 .u-m-3 {
   margin: 0.75rem;
 }
-.u-m-3\.5 {
+.u-m-px-14 {
   margin: 0.875rem;
 }
 .u-m-4 {
@@ -14955,7 +15159,7 @@ body.is-open-photoviewer {
 .u-m-5 {
   margin: 1.25rem;
 }
-.u-m-5\.5 {
+.u-m-px-22 {
   margin: 1.375rem;
 }
 .u-m-6 {
@@ -14964,7 +15168,7 @@ body.is-open-photoviewer {
 .u-m-7 {
   margin: 1.75rem;
 }
-.u-m-7\.5 {
+.u-m-px-30 {
   margin: 1.875rem;
 }
 .u-m-8 {
@@ -15047,7 +15251,7 @@ body.is-open-photoviewer {
   margin-right: 0.25rem;
   margin-left: 0.25rem;
 }
-.u-mx-1\.5 {
+.u-mx-px-6 {
   margin-right: 0.375rem;
   margin-left: 0.375rem;
 }
@@ -15055,7 +15259,7 @@ body.is-open-photoviewer {
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 }
-.u-mx-2\.5 {
+.u-mx-px-10 {
   margin-right: 0.625rem;
   margin-left: 0.625rem;
 }
@@ -15063,7 +15267,7 @@ body.is-open-photoviewer {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
-.u-mx-3\.5 {
+.u-mx-px-14 {
   margin-right: 0.875rem;
   margin-left: 0.875rem;
 }
@@ -15075,7 +15279,7 @@ body.is-open-photoviewer {
   margin-right: 1.25rem;
   margin-left: 1.25rem;
 }
-.u-mx-5\.5 {
+.u-mx-px-22 {
   margin-right: 1.375rem;
   margin-left: 1.375rem;
 }
@@ -15087,7 +15291,7 @@ body.is-open-photoviewer {
   margin-right: 1.75rem;
   margin-left: 1.75rem;
 }
-.u-mx-7\.5 {
+.u-mx-px-30 {
   margin-right: 1.875rem;
   margin-left: 1.875rem;
 }
@@ -15195,7 +15399,7 @@ body.is-open-photoviewer {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
-.u-my-1\.5 {
+.u-my-px-6 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
 }
@@ -15203,7 +15407,7 @@ body.is-open-photoviewer {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.u-my-2\.5 {
+.u-my-px-10 {
   margin-top: 0.625rem;
   margin-bottom: 0.625rem;
 }
@@ -15211,7 +15415,7 @@ body.is-open-photoviewer {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
-.u-my-3\.5 {
+.u-my-px-14 {
   margin-top: 0.875rem;
   margin-bottom: 0.875rem;
 }
@@ -15223,7 +15427,7 @@ body.is-open-photoviewer {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
-.u-my-5\.5 {
+.u-my-px-22 {
   margin-top: 1.375rem;
   margin-bottom: 1.375rem;
 }
@@ -15235,7 +15439,7 @@ body.is-open-photoviewer {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
 }
-.u-my-7\.5 {
+.u-my-px-30 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
@@ -15341,19 +15545,19 @@ body.is-open-photoviewer {
 .u-mt-1 {
   margin-top: 0.25rem;
 }
-.u-mt-1\.5 {
+.u-mt-px-6 {
   margin-top: 0.375rem;
 }
 .u-mt-2 {
   margin-top: 0.5rem;
 }
-.u-mt-2\.5 {
+.u-mt-px-10 {
   margin-top: 0.625rem;
 }
 .u-mt-3 {
   margin-top: 0.75rem;
 }
-.u-mt-3\.5 {
+.u-mt-px-14 {
   margin-top: 0.875rem;
 }
 .u-mt-4 {
@@ -15362,7 +15566,7 @@ body.is-open-photoviewer {
 .u-mt-5 {
   margin-top: 1.25rem;
 }
-.u-mt-5\.5 {
+.u-mt-px-22 {
   margin-top: 1.375rem;
 }
 .u-mt-6 {
@@ -15371,7 +15575,7 @@ body.is-open-photoviewer {
 .u-mt-7 {
   margin-top: 1.75rem;
 }
-.u-mt-7\.5 {
+.u-mt-px-30 {
   margin-top: 1.875rem;
 }
 .u-mt-8 {
@@ -15452,19 +15656,19 @@ body.is-open-photoviewer {
 .u-me-1 {
   margin-right: 0.25rem;
 }
-.u-me-1\.5 {
+.u-me-px-6 {
   margin-right: 0.375rem;
 }
 .u-me-2 {
   margin-right: 0.5rem;
 }
-.u-me-2\.5 {
+.u-me-px-10 {
   margin-right: 0.625rem;
 }
 .u-me-3 {
   margin-right: 0.75rem;
 }
-.u-me-3\.5 {
+.u-me-px-14 {
   margin-right: 0.875rem;
 }
 .u-me-4 {
@@ -15473,7 +15677,7 @@ body.is-open-photoviewer {
 .u-me-5 {
   margin-right: 1.25rem;
 }
-.u-me-5\.5 {
+.u-me-px-22 {
   margin-right: 1.375rem;
 }
 .u-me-6 {
@@ -15482,7 +15686,7 @@ body.is-open-photoviewer {
 .u-me-7 {
   margin-right: 1.75rem;
 }
-.u-me-7\.5 {
+.u-me-px-30 {
   margin-right: 1.875rem;
 }
 .u-me-8 {
@@ -15563,19 +15767,19 @@ body.is-open-photoviewer {
 .u-mb-1 {
   margin-bottom: 0.25rem;
 }
-.u-mb-1\.5 {
+.u-mb-px-6 {
   margin-bottom: 0.375rem;
 }
 .u-mb-2 {
   margin-bottom: 0.5rem;
 }
-.u-mb-2\.5 {
+.u-mb-px-10 {
   margin-bottom: 0.625rem;
 }
 .u-mb-3 {
   margin-bottom: 0.75rem;
 }
-.u-mb-3\.5 {
+.u-mb-px-14 {
   margin-bottom: 0.875rem;
 }
 .u-mb-4 {
@@ -15584,7 +15788,7 @@ body.is-open-photoviewer {
 .u-mb-5 {
   margin-bottom: 1.25rem;
 }
-.u-mb-5\.5 {
+.u-mb-px-22 {
   margin-bottom: 1.375rem;
 }
 .u-mb-6 {
@@ -15593,7 +15797,7 @@ body.is-open-photoviewer {
 .u-mb-7 {
   margin-bottom: 1.75rem;
 }
-.u-mb-7\.5 {
+.u-mb-px-30 {
   margin-bottom: 1.875rem;
 }
 .u-mb-8 {
@@ -15674,19 +15878,19 @@ body.is-open-photoviewer {
 .u-ms-1 {
   margin-left: 0.25rem;
 }
-.u-ms-1\.5 {
+.u-ms-px-6 {
   margin-left: 0.375rem;
 }
 .u-ms-2 {
   margin-left: 0.5rem;
 }
-.u-ms-2\.5 {
+.u-ms-px-10 {
   margin-left: 0.625rem;
 }
 .u-ms-3 {
   margin-left: 0.75rem;
 }
-.u-ms-3\.5 {
+.u-ms-px-14 {
   margin-left: 0.875rem;
 }
 .u-ms-4 {
@@ -15695,7 +15899,7 @@ body.is-open-photoviewer {
 .u-ms-5 {
   margin-left: 1.25rem;
 }
-.u-ms-5\.5 {
+.u-ms-px-22 {
   margin-left: 1.375rem;
 }
 .u-ms-6 {
@@ -15704,7 +15908,7 @@ body.is-open-photoviewer {
 .u-ms-7 {
   margin-left: 1.75rem;
 }
-.u-ms-7\.5 {
+.u-ms-px-30 {
   margin-left: 1.875rem;
 }
 .u-ms-8 {
@@ -15785,19 +15989,19 @@ body.is-open-photoviewer {
 .u-p-1 {
   padding: 0.25rem;
 }
-.u-p-1\.5 {
+.u-p-px-6 {
   padding: 0.375rem;
 }
 .u-p-2 {
   padding: 0.5rem;
 }
-.u-p-2\.5 {
+.u-p-px-10 {
   padding: 0.625rem;
 }
 .u-p-3 {
   padding: 0.75rem;
 }
-.u-p-3\.5 {
+.u-p-px-14 {
   padding: 0.875rem;
 }
 .u-p-4 {
@@ -15806,7 +16010,7 @@ body.is-open-photoviewer {
 .u-p-5 {
   padding: 1.25rem;
 }
-.u-p-5\.5 {
+.u-p-px-22 {
   padding: 1.375rem;
 }
 .u-p-6 {
@@ -15815,7 +16019,7 @@ body.is-open-photoviewer {
 .u-p-7 {
   padding: 1.75rem;
 }
-.u-p-7\.5 {
+.u-p-px-30 {
   padding: 1.875rem;
 }
 .u-p-8 {
@@ -15895,7 +16099,7 @@ body.is-open-photoviewer {
   padding-right: 0.25rem;
   padding-left: 0.25rem;
 }
-.u-px-1\.5 {
+.u-px-px-6 {
   padding-right: 0.375rem;
   padding-left: 0.375rem;
 }
@@ -15903,7 +16107,7 @@ body.is-open-photoviewer {
   padding-right: 0.5rem;
   padding-left: 0.5rem;
 }
-.u-px-2\.5 {
+.u-px-px-10 {
   padding-right: 0.625rem;
   padding-left: 0.625rem;
 }
@@ -15911,7 +16115,7 @@ body.is-open-photoviewer {
   padding-right: 0.75rem;
   padding-left: 0.75rem;
 }
-.u-px-3\.5 {
+.u-px-px-14 {
   padding-right: 0.875rem;
   padding-left: 0.875rem;
 }
@@ -15923,7 +16127,7 @@ body.is-open-photoviewer {
   padding-right: 1.25rem;
   padding-left: 1.25rem;
 }
-.u-px-5\.5 {
+.u-px-px-22 {
   padding-right: 1.375rem;
   padding-left: 1.375rem;
 }
@@ -15935,7 +16139,7 @@ body.is-open-photoviewer {
   padding-right: 1.75rem;
   padding-left: 1.75rem;
 }
-.u-px-7\.5 {
+.u-px-px-30 {
   padding-right: 1.875rem;
   padding-left: 1.875rem;
 }
@@ -16039,7 +16243,7 @@ body.is-open-photoviewer {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.u-py-1\.5 {
+.u-py-px-6 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
@@ -16047,7 +16251,7 @@ body.is-open-photoviewer {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.u-py-2\.5 {
+.u-py-px-10 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
@@ -16055,7 +16259,7 @@ body.is-open-photoviewer {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.u-py-3\.5 {
+.u-py-px-14 {
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
 }
@@ -16067,7 +16271,7 @@ body.is-open-photoviewer {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
-.u-py-5\.5 {
+.u-py-px-22 {
   padding-top: 1.375rem;
   padding-bottom: 1.375rem;
 }
@@ -16079,7 +16283,7 @@ body.is-open-photoviewer {
   padding-top: 1.75rem;
   padding-bottom: 1.75rem;
 }
-.u-py-7\.5 {
+.u-py-px-30 {
   padding-top: 1.875rem;
   padding-bottom: 1.875rem;
 }
@@ -16181,19 +16385,19 @@ body.is-open-photoviewer {
 .u-pt-1 {
   padding-top: 0.25rem;
 }
-.u-pt-1\.5 {
+.u-pt-px-6 {
   padding-top: 0.375rem;
 }
 .u-pt-2 {
   padding-top: 0.5rem;
 }
-.u-pt-2\.5 {
+.u-pt-px-10 {
   padding-top: 0.625rem;
 }
 .u-pt-3 {
   padding-top: 0.75rem;
 }
-.u-pt-3\.5 {
+.u-pt-px-14 {
   padding-top: 0.875rem;
 }
 .u-pt-4 {
@@ -16202,7 +16406,7 @@ body.is-open-photoviewer {
 .u-pt-5 {
   padding-top: 1.25rem;
 }
-.u-pt-5\.5 {
+.u-pt-px-22 {
   padding-top: 1.375rem;
 }
 .u-pt-6 {
@@ -16211,7 +16415,7 @@ body.is-open-photoviewer {
 .u-pt-7 {
   padding-top: 1.75rem;
 }
-.u-pt-7\.5 {
+.u-pt-px-30 {
   padding-top: 1.875rem;
 }
 .u-pt-8 {
@@ -16289,19 +16493,19 @@ body.is-open-photoviewer {
 .u-pe-1 {
   padding-right: 0.25rem;
 }
-.u-pe-1\.5 {
+.u-pe-px-6 {
   padding-right: 0.375rem;
 }
 .u-pe-2 {
   padding-right: 0.5rem;
 }
-.u-pe-2\.5 {
+.u-pe-px-10 {
   padding-right: 0.625rem;
 }
 .u-pe-3 {
   padding-right: 0.75rem;
 }
-.u-pe-3\.5 {
+.u-pe-px-14 {
   padding-right: 0.875rem;
 }
 .u-pe-4 {
@@ -16310,7 +16514,7 @@ body.is-open-photoviewer {
 .u-pe-5 {
   padding-right: 1.25rem;
 }
-.u-pe-5\.5 {
+.u-pe-px-22 {
   padding-right: 1.375rem;
 }
 .u-pe-6 {
@@ -16319,7 +16523,7 @@ body.is-open-photoviewer {
 .u-pe-7 {
   padding-right: 1.75rem;
 }
-.u-pe-7\.5 {
+.u-pe-px-30 {
   padding-right: 1.875rem;
 }
 .u-pe-8 {
@@ -16397,19 +16601,19 @@ body.is-open-photoviewer {
 .u-pb-1 {
   padding-bottom: 0.25rem;
 }
-.u-pb-1\.5 {
+.u-pb-px-6 {
   padding-bottom: 0.375rem;
 }
 .u-pb-2 {
   padding-bottom: 0.5rem;
 }
-.u-pb-2\.5 {
+.u-pb-px-10 {
   padding-bottom: 0.625rem;
 }
 .u-pb-3 {
   padding-bottom: 0.75rem;
 }
-.u-pb-3\.5 {
+.u-pb-px-14 {
   padding-bottom: 0.875rem;
 }
 .u-pb-4 {
@@ -16418,7 +16622,7 @@ body.is-open-photoviewer {
 .u-pb-5 {
   padding-bottom: 1.25rem;
 }
-.u-pb-5\.5 {
+.u-pb-px-22 {
   padding-bottom: 1.375rem;
 }
 .u-pb-6 {
@@ -16427,7 +16631,7 @@ body.is-open-photoviewer {
 .u-pb-7 {
   padding-bottom: 1.75rem;
 }
-.u-pb-7\.5 {
+.u-pb-px-30 {
   padding-bottom: 1.875rem;
 }
 .u-pb-8 {
@@ -16505,19 +16709,19 @@ body.is-open-photoviewer {
 .u-ps-1 {
   padding-left: 0.25rem;
 }
-.u-ps-1\.5 {
+.u-ps-px-6 {
   padding-left: 0.375rem;
 }
 .u-ps-2 {
   padding-left: 0.5rem;
 }
-.u-ps-2\.5 {
+.u-ps-px-10 {
   padding-left: 0.625rem;
 }
 .u-ps-3 {
   padding-left: 0.75rem;
 }
-.u-ps-3\.5 {
+.u-ps-px-14 {
   padding-left: 0.875rem;
 }
 .u-ps-4 {
@@ -16526,7 +16730,7 @@ body.is-open-photoviewer {
 .u-ps-5 {
   padding-left: 1.25rem;
 }
-.u-ps-5\.5 {
+.u-ps-px-22 {
   padding-left: 1.375rem;
 }
 .u-ps-6 {
@@ -16535,7 +16739,7 @@ body.is-open-photoviewer {
 .u-ps-7 {
   padding-left: 1.75rem;
 }
-.u-ps-7\.5 {
+.u-ps-px-30 {
   padding-left: 1.875rem;
 }
 .u-ps-8 {
@@ -16613,19 +16817,19 @@ body.is-open-photoviewer {
 .u-gap-1 {
   gap: 0.25rem;
 }
-.u-gap-1\.5 {
+.u-gap-px-6 {
   gap: 0.375rem;
 }
 .u-gap-2 {
   gap: 0.5rem;
 }
-.u-gap-2\.5 {
+.u-gap-px-10 {
   gap: 0.625rem;
 }
 .u-gap-3 {
   gap: 0.75rem;
 }
-.u-gap-3\.5 {
+.u-gap-px-14 {
   gap: 0.875rem;
 }
 .u-gap-4 {
@@ -16634,7 +16838,7 @@ body.is-open-photoviewer {
 .u-gap-5 {
   gap: 1.25rem;
 }
-.u-gap-5\.5 {
+.u-gap-px-22 {
   gap: 1.375rem;
 }
 .u-gap-6 {
@@ -16643,7 +16847,7 @@ body.is-open-photoviewer {
 .u-gap-7 {
   gap: 1.75rem;
 }
-.u-gap-7\.5 {
+.u-gap-px-30 {
   gap: 1.875rem;
 }
 .u-gap-8 {
@@ -16721,19 +16925,19 @@ body.is-open-photoviewer {
 .u-row-gap-1 {
   row-gap: 0.25rem;
 }
-.u-row-gap-1\.5 {
+.u-row-gap-px-6 {
   row-gap: 0.375rem;
 }
 .u-row-gap-2 {
   row-gap: 0.5rem;
 }
-.u-row-gap-2\.5 {
+.u-row-gap-px-10 {
   row-gap: 0.625rem;
 }
 .u-row-gap-3 {
   row-gap: 0.75rem;
 }
-.u-row-gap-3\.5 {
+.u-row-gap-px-14 {
   row-gap: 0.875rem;
 }
 .u-row-gap-4 {
@@ -16742,7 +16946,7 @@ body.is-open-photoviewer {
 .u-row-gap-5 {
   row-gap: 1.25rem;
 }
-.u-row-gap-5\.5 {
+.u-row-gap-px-22 {
   row-gap: 1.375rem;
 }
 .u-row-gap-6 {
@@ -16751,7 +16955,7 @@ body.is-open-photoviewer {
 .u-row-gap-7 {
   row-gap: 1.75rem;
 }
-.u-row-gap-7\.5 {
+.u-row-gap-px-30 {
   row-gap: 1.875rem;
 }
 .u-row-gap-8 {
@@ -16831,7 +17035,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
-.u-column-gap-1\.5 {
+.u-column-gap-px-6 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
 }
@@ -16839,7 +17043,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
-.u-column-gap-2\.5 {
+.u-column-gap-px-10 {
   -moz-column-gap: 0.625rem;
        column-gap: 0.625rem;
 }
@@ -16847,7 +17051,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
-.u-column-gap-3\.5 {
+.u-column-gap-px-14 {
   -moz-column-gap: 0.875rem;
        column-gap: 0.875rem;
 }
@@ -16859,7 +17063,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
 }
-.u-column-gap-5\.5 {
+.u-column-gap-px-22 {
   -moz-column-gap: 1.375rem;
        column-gap: 1.375rem;
 }
@@ -16871,7 +17075,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 1.75rem;
        column-gap: 1.75rem;
 }
-.u-column-gap-7\.5 {
+.u-column-gap-px-30 {
   -moz-column-gap: 1.875rem;
        column-gap: 1.875rem;
 }