@shohojdhara/atomix 0.2.9 → 0.3.1

package/dist/themes/applemix.css

@@ -505,7 +505,6 @@ summary {
   --atomix-link-decoration: none;
   --atomix-link-hover-color: rgb(0, 85.4, 178.5);
   --atomix-link-hover-color-rgb: 0, 85.4, 178.5;
-  --atomix-code-color: #ff3b30;
   --atomix-highlight-bg: #ffe066;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -516,9 +515,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;
@@ -533,6 +530,136 @@ summary {
   --atomix-form-valid-border-color: #30d158;
   --atomix-form-invalid-color: #ff3b30;
   --atomix-form-invalid-border-color: #ff3b30;
+  --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: #fff5f5;
+  --atomix-red-2: #ffe3e3;
+  --atomix-red-3: #ffc9c9;
+  --atomix-red-4: #ff9f9f;
+  --atomix-red-5: #ff6b6b;
+  --atomix-red-6: #ff3b30;
+  --atomix-red-7: #d70015;
+  --atomix-red-8: #a50000;
+  --atomix-red-9: #750000;
+  --atomix-red-10: #4a0000;
+  --atomix-green-1: #f0fff4;
+  --atomix-green-2: #dcfce7;
+  --atomix-green-3: #bbf7d0;
+  --atomix-green-4: #86efac;
+  --atomix-green-5: #4ade80;
+  --atomix-green-6: #30d158;
+  --atomix-green-7: #28cd41;
+  --atomix-green-8: #20a934;
+  --atomix-green-9: #198527;
+  --atomix-green-10: #12611a;
+  --atomix-blue-1: #f0f8ff;
+  --atomix-blue-2: #e1f2ff;
+  --atomix-blue-3: #c7e9ff;
+  --atomix-blue-4: #9dd7ff;
+  --atomix-blue-5: #64c7ff;
+  --atomix-blue-6: #007aff;
+  --atomix-blue-7: #0056d6;
+  --atomix-blue-8: #003d99;
+  --atomix-blue-9: #002966;
+  --atomix-blue-10: #001a44;
+  --atomix-yellow-1: #fffbf0;
+  --atomix-yellow-2: #fff3c4;
+  --atomix-yellow-3: #ffe066;
+  --atomix-yellow-4: #ffcc02;
+  --atomix-yellow-5: #ffb000;
+  --atomix-yellow-6: #ff9500;
+  --atomix-yellow-7: #ff8c00;
+  --atomix-yellow-8: #e67300;
+  --atomix-yellow-9: #cc5500;
+  --atomix-yellow-10: #b33c00;
+  --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.47;
+  --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;
@@ -546,6 +673,14 @@ summary {
   --atomix-success: #30d158;
   --atomix-warning: #ff9500;
   --atomix-info: #007aff;
+  --atomix-primary-rgb: 0, 122, 255;
+  --atomix-secondary-rgb: 99, 99, 102;
+  --atomix-light-rgb: 250, 250, 250;
+  --atomix-dark-rgb: 72, 72, 74;
+  --atomix-error-rgb: 255, 59, 48;
+  --atomix-success-rgb: 48, 209, 88;
+  --atomix-warning-rgb: 255, 149, 0;
+  --atomix-info-rgb: 0, 122, 255;
   --atomix-primary-text-emphasis: #ffffff;
   --atomix-secondary-text-emphasis: #e5e5e7;
   --atomix-tertiary-text-emphasis: #d1d1d6;
@@ -604,6 +739,7 @@ summary {
   --atomix-link-color: #9dd7ff;
   --atomix-link-color-rgb: 157, 215, 255;
   --atomix-link-hover-color: rgb(80.5, 183.7755102041, 255);
+  --atomix-link-hover-color-rgb: 80.5, 183.7755102041, 255;
   --atomix-code-color: #ff6b6b;
   --atomix-border-color: #48484a;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
@@ -1783,7 +1919,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%;
@@ -1890,10 +2026,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;
@@ -1904,6 +2044,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;
@@ -1911,7 +2052,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);
@@ -1967,7 +2107,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);
@@ -1995,7 +2135,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);
@@ -2962,7 +3102,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%;
@@ -3028,6 +3168,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);
 }
@@ -3156,6 +3325,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);
@@ -3254,7 +3448,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 {
@@ -3495,7 +3689,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: "";
@@ -3655,7 +3848,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 {
@@ -5225,6 +5418,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);
 }
@@ -6804,7 +7000,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;
@@ -6850,7 +7046,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;
@@ -7610,7 +7806,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;
@@ -7712,8 +7908,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);
@@ -7868,7 +8068,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);
@@ -8238,7 +8438,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;
@@ -8693,6 +8893,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);
@@ -10570,7 +10774,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;
@@ -10749,7 +10953,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;
@@ -13150,19 +13354,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 {
@@ -13171,7 +13375,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 {
@@ -13180,7 +13384,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 {
@@ -13263,7 +13467,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;
 }
@@ -13271,7 +13475,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;
 }
@@ -13279,7 +13483,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;
 }
@@ -13291,7 +13495,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;
 }
@@ -13303,7 +13507,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;
 }
@@ -13411,7 +13615,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;
 }
@@ -13419,7 +13623,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;
 }
@@ -13427,7 +13631,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;
 }
@@ -13439,7 +13643,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;
 }
@@ -13451,7 +13655,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;
 }
@@ -13557,19 +13761,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 {
@@ -13578,7 +13782,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 {
@@ -13587,7 +13791,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 {
@@ -13668,19 +13872,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 {
@@ -13689,7 +13893,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 {
@@ -13698,7 +13902,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 {
@@ -13779,19 +13983,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 {
@@ -13800,7 +14004,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 {
@@ -13809,7 +14013,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 {
@@ -13890,19 +14094,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 {
@@ -13911,7 +14115,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 {
@@ -13920,7 +14124,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 {
@@ -14001,19 +14205,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 {
@@ -14022,7 +14226,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 {
@@ -14031,7 +14235,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 {
@@ -14111,7 +14315,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;
 }
@@ -14119,7 +14323,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;
 }
@@ -14127,7 +14331,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;
 }
@@ -14139,7 +14343,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;
 }
@@ -14151,7 +14355,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;
 }
@@ -14255,7 +14459,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;
 }
@@ -14263,7 +14467,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;
 }
@@ -14271,7 +14475,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;
 }
@@ -14283,7 +14487,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;
 }
@@ -14295,7 +14499,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;
 }
@@ -14397,19 +14601,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 {
@@ -14418,7 +14622,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 {
@@ -14427,7 +14631,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 {
@@ -14505,19 +14709,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 {
@@ -14526,7 +14730,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 {
@@ -14535,7 +14739,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 {
@@ -14613,19 +14817,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 {
@@ -14634,7 +14838,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 {
@@ -14643,7 +14847,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 {
@@ -14721,19 +14925,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 {
@@ -14742,7 +14946,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 {
@@ -14751,7 +14955,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 {
@@ -14829,19 +15033,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 {
@@ -14850,7 +15054,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 {
@@ -14859,7 +15063,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 {
@@ -14937,19 +15141,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 {
@@ -14958,7 +15162,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 {
@@ -14967,7 +15171,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 {
@@ -15047,7 +15251,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;
 }
@@ -15055,7 +15259,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;
 }
@@ -15063,7 +15267,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;
 }
@@ -15075,7 +15279,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;
 }
@@ -15087,7 +15291,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;
 }