@shohojdhara/atomix 0.3.0 → 0.3.1

package/dist/atomix.css

@@ -464,7 +464,6 @@ summary {
   --atomix-link-decoration: none;
   --atomix-link-hover-color: rgb(85.3674418605, 18.2930232558, 200.2069767442);
   --atomix-link-hover-color-rgb: 85.3674418605, 18.2930232558, 200.2069767442;
-  --atomix-code-color: #ef4444;
   --atomix-highlight-bg: #fef08a;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -475,9 +474,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;
@@ -492,6 +489,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: #fefce8;
+  --atomix-yellow-2: #fef9c3;
+  --atomix-yellow-3: #fef08a;
+  --atomix-yellow-4: #fde047;
+  --atomix-yellow-5: #facc15;
+  --atomix-yellow-6: #eab308;
+  --atomix-yellow-7: #ca8a04;
+  --atomix-yellow-8: #a16207;
+  --atomix-yellow-9: #854d0e;
+  --atomix-yellow-10: #713f12;
+  --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;
@@ -505,6 +632,14 @@ summary {
   --atomix-success: #22c55e;
   --atomix-warning: #eab308;
   --atomix-info: #3b82f6;
+  --atomix-primary-rgb: 124, 58, 237;
+  --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: 234, 179, 8;
+  --atomix-info-rgb: 59, 130, 246;
   --atomix-primary-text-emphasis: #ffffff;
   --atomix-secondary-text-emphasis: #e5e7eb;
   --atomix-tertiary-text-emphasis: #d1d5db;
@@ -563,6 +698,7 @@ summary {
   --atomix-link-color: #b88cef;
   --atomix-link-color-rgb: 184, 140, 239;
   --atomix-link-hover-color: rgb(142.5381679389, 72.8435114504, 229.6564885496);
+  --atomix-link-hover-color-rgb: 142.5381679389, 72.8435114504, 229.6564885496;
   --atomix-code-color: #f87171;
   --atomix-border-color: #374151;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
@@ -1730,7 +1866,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%;
@@ -1837,10 +1973,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;
@@ -1851,6 +1991,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;
@@ -1858,7 +1999,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);
@@ -1914,7 +2054,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);
@@ -1942,7 +2082,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);
@@ -2909,7 +3049,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%;
@@ -2975,6 +3115,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);
 }
@@ -3103,6 +3272,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);
@@ -3201,7 +3395,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 {
@@ -3442,7 +3636,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: "";
@@ -3602,7 +3795,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 {
@@ -5172,6 +5365,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);
 }
@@ -6751,7 +6947,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;
@@ -6797,7 +6993,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;
@@ -7557,7 +7753,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;
@@ -7659,8 +7855,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);
@@ -7811,7 +8011,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);
@@ -8181,7 +8381,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;
@@ -8636,6 +8836,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);
@@ -10513,7 +10717,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;
@@ -10692,7 +10896,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;
@@ -13089,19 +13293,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 {
@@ -13110,7 +13314,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 {
@@ -13119,7 +13323,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 {
@@ -13202,7 +13406,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;
 }
@@ -13210,7 +13414,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;
 }
@@ -13218,7 +13422,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;
 }
@@ -13230,7 +13434,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;
 }
@@ -13242,7 +13446,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;
 }
@@ -13350,7 +13554,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;
 }
@@ -13358,7 +13562,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;
 }
@@ -13366,7 +13570,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;
 }
@@ -13378,7 +13582,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;
 }
@@ -13390,7 +13594,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;
 }
@@ -13496,19 +13700,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 {
@@ -13517,7 +13721,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 {
@@ -13526,7 +13730,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 {
@@ -13607,19 +13811,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 {
@@ -13628,7 +13832,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 {
@@ -13637,7 +13841,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 {
@@ -13718,19 +13922,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 {
@@ -13739,7 +13943,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 {
@@ -13748,7 +13952,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 {
@@ -13829,19 +14033,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 {
@@ -13850,7 +14054,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 {
@@ -13859,7 +14063,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 {
@@ -13940,19 +14144,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 {
@@ -13961,7 +14165,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 {
@@ -13970,7 +14174,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 {
@@ -14050,7 +14254,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;
 }
@@ -14058,7 +14262,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;
 }
@@ -14066,7 +14270,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;
 }
@@ -14078,7 +14282,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;
 }
@@ -14090,7 +14294,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;
 }
@@ -14194,7 +14398,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;
 }
@@ -14202,7 +14406,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;
 }
@@ -14210,7 +14414,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;
 }
@@ -14222,7 +14426,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;
 }
@@ -14234,7 +14438,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;
 }
@@ -14336,19 +14540,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 {
@@ -14357,7 +14561,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 {
@@ -14366,7 +14570,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 {
@@ -14444,19 +14648,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 {
@@ -14465,7 +14669,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 {
@@ -14474,7 +14678,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 {
@@ -14552,19 +14756,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 {
@@ -14573,7 +14777,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 {
@@ -14582,7 +14786,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 {
@@ -14660,19 +14864,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 {
@@ -14681,7 +14885,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 {
@@ -14690,7 +14894,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 {
@@ -14768,19 +14972,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 {
@@ -14789,7 +14993,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 {
@@ -14798,7 +15002,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 {
@@ -14876,19 +15080,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 {
@@ -14897,7 +15101,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 {
@@ -14906,7 +15110,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 {
@@ -14986,7 +15190,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;
 }
@@ -14994,7 +15198,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;
 }
@@ -15002,7 +15206,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;
 }
@@ -15014,7 +15218,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;
 }
@@ -15026,7 +15230,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;
 }