@shohojdhara/atomix 0.2.9 → 0.3.1

package/dist/themes/mashroom.css

@@ -493,7 +493,6 @@ summary {
   --atomix-link-decoration: none;
   --atomix-link-hover-color: var(--atomix-primary-7);
   --atomix-link-hover-color-rgb: var(--atomix-primary-7);
-  --atomix-code-color: #ff2085;
   --atomix-highlight-bg: #ffffb0;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -504,9 +503,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;
@@ -521,6 +518,136 @@ summary {
   --atomix-form-valid-border-color: #00d984;
   --atomix-form-invalid-color: #ff2085;
   --atomix-form-invalid-border-color: #ff2085;
+  --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: #fff0f5;
+  --atomix-red-2: #ffe0eb;
+  --atomix-red-3: #ffc0d5;
+  --atomix-red-4: #ff90ba;
+  --atomix-red-5: #ff609f;
+  --atomix-red-6: #ff2085;
+  --atomix-red-7: #d9006f;
+  --atomix-red-8: #b3005b;
+  --atomix-red-9: #8c0047;
+  --atomix-red-10: #660033;
+  --atomix-green-1: #f0fff8;
+  --atomix-green-2: #d0ffeb;
+  --atomix-green-3: #a0ffd4;
+  --atomix-green-4: #50ffbb;
+  --atomix-green-5: #00ff9d;
+  --atomix-green-6: #00d984;
+  --atomix-green-7: #00b36b;
+  --atomix-green-8: #008c52;
+  --atomix-green-9: #006638;
+  --atomix-green-10: #004020;
+  --atomix-blue-1: #f0ffff;
+  --atomix-blue-2: #d0f8ff;
+  --atomix-blue-3: #90e8ff;
+  --atomix-blue-4: #40d0ff;
+  --atomix-blue-5: #00b4ff;
+  --atomix-blue-6: #008cff;
+  --atomix-blue-7: #0066cc;
+  --atomix-blue-8: #004499;
+  --atomix-blue-9: #003366;
+  --atomix-blue-10: #001f3d;
+  --atomix-yellow-1: #fffff0;
+  --atomix-yellow-2: #ffffd8;
+  --atomix-yellow-3: #ffffb0;
+  --atomix-yellow-4: #ffff6a;
+  --atomix-yellow-5: #ffdd20;
+  --atomix-yellow-6: #ffbb00;
+  --atomix-yellow-7: #cc9900;
+  --atomix-yellow-8: #997700;
+  --atomix-yellow-9: #665500;
+  --atomix-yellow-10: #332c00;
+  --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.6;
+  --atomix-line-height-sm: 1.4;
+  --atomix-line-height-lg: 1.8;
+  --atomix-font-size-xl: 1.5rem;
+  --atomix-font-size-2xl: 2rem;
+  --atomix-display-1: 4.5rem;
+  --atomix-letter-spacing-h1: -1.5px;
+  --atomix-letter-spacing-h2: -1px;
+  --atomix-letter-spacing-h3: -0.75px;
+  --atomix-letter-spacing-h4: -0.5px;
+  --atomix-letter-spacing-h5: -0.25px;
+  --atomix-letter-spacing-h6: 0px;
+  --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;
@@ -534,6 +661,14 @@ summary {
   --atomix-success: #00d984;
   --atomix-warning: #ffbb00;
   --atomix-info: #008cff;
+  --atomix-primary-rgb: 157, 0, 255;
+  --atomix-secondary-rgb: 75, 85, 99;
+  --atomix-light-rgb: 249, 250, 251;
+  --atomix-dark-rgb: 55, 65, 81;
+  --atomix-error-rgb: 255, 32, 133;
+  --atomix-success-rgb: 0, 217, 132;
+  --atomix-warning-rgb: 255, 187, 0;
+  --atomix-info-rgb: 0, 140, 255;
   --atomix-primary-text-emphasis: #ffffff;
   --atomix-secondary-text-emphasis: #e5e7eb;
   --atomix-tertiary-text-emphasis: #d1d5db;
@@ -592,6 +727,7 @@ summary {
   --atomix-link-color: var(--atomix-primary-4);
   --atomix-link-color-rgb: var(--atomix-primary-4);
   --atomix-link-hover-color: rgb(179.688976378, 51.5, 255);
+  --atomix-link-hover-color-rgb: 179.688976378, 51.5, 255;
   --atomix-code-color: #ff609f;
   --atomix-border-color: var(--atomix-gray-5);
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
@@ -16273,7 +16409,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%;
@@ -16380,10 +16516,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;
@@ -16394,6 +16534,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;
@@ -16401,7 +16542,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);
@@ -16485,7 +16625,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);
@@ -17518,6 +17658,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:hover {
   background-color: var(--atomix-card-bg-hover);
 }
@@ -17649,6 +17818,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);
@@ -17747,7 +17941,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 {
@@ -17988,7 +18182,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: "";
@@ -18148,7 +18341,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 {
@@ -19718,6 +19911,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);
 }
@@ -22205,8 +22401,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);
@@ -23182,6 +23382,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);
@@ -27639,19 +27843,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 {
@@ -27660,7 +27864,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 {
@@ -27669,7 +27873,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 {
@@ -27752,7 +27956,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;
 }
@@ -27760,7 +27964,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;
 }
@@ -27768,7 +27972,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;
 }
@@ -27780,7 +27984,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;
 }
@@ -27792,7 +27996,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;
 }
@@ -27900,7 +28104,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;
 }
@@ -27908,7 +28112,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;
 }
@@ -27916,7 +28120,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;
 }
@@ -27928,7 +28132,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;
 }
@@ -27940,7 +28144,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;
 }
@@ -28046,19 +28250,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 {
@@ -28067,7 +28271,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 {
@@ -28076,7 +28280,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 {
@@ -28157,19 +28361,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 {
@@ -28178,7 +28382,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 {
@@ -28187,7 +28391,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 {
@@ -28268,19 +28472,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 {
@@ -28289,7 +28493,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 {
@@ -28298,7 +28502,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 {
@@ -28379,19 +28583,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 {
@@ -28400,7 +28604,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 {
@@ -28409,7 +28613,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 {
@@ -28490,19 +28694,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 {
@@ -28511,7 +28715,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 {
@@ -28520,7 +28724,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 {
@@ -28600,7 +28804,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;
 }
@@ -28608,7 +28812,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;
 }
@@ -28616,7 +28820,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;
 }
@@ -28628,7 +28832,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;
 }
@@ -28640,7 +28844,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;
 }
@@ -28744,7 +28948,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;
 }
@@ -28752,7 +28956,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;
 }
@@ -28760,7 +28964,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;
 }
@@ -28772,7 +28976,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;
 }
@@ -28784,7 +28988,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;
 }
@@ -28886,19 +29090,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 {
@@ -28907,7 +29111,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 {
@@ -28916,7 +29120,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 {
@@ -28994,19 +29198,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 {
@@ -29015,7 +29219,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 {
@@ -29024,7 +29228,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 {
@@ -29102,19 +29306,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 {
@@ -29123,7 +29327,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 {
@@ -29132,7 +29336,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 {
@@ -29210,19 +29414,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 {
@@ -29231,7 +29435,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 {
@@ -29240,7 +29444,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 {
@@ -29318,19 +29522,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 {
@@ -29339,7 +29543,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 {
@@ -29348,7 +29552,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 {
@@ -29426,19 +29630,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 {
@@ -29447,7 +29651,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 {
@@ -29456,7 +29660,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 {
@@ -29536,7 +29740,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;
 }
@@ -29544,7 +29748,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;
 }
@@ -29552,7 +29756,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;
 }
@@ -29564,7 +29768,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;
 }
@@ -29576,7 +29780,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;
 }