@shohojdhara/atomix 0.3.0 → 0.3.1

package/dist/themes/boomdevs.css

@@ -838,7 +838,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: #e00000;
   --atomix-highlight-bg: #ffdf99;
   --atomix-border-width: 1px;
   --atomix-border-style: solid;
@@ -849,9 +848,7 @@ summary {
   --atomix-border-radius-lg: 0.75rem;
   --atomix-border-radius-xl: 1rem;
   --atomix-border-radius-xxl: 1.25rem;
-  --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;
@@ -866,6 +863,123 @@ summary {
   --atomix-form-valid-border-color: #009133;
   --atomix-form-invalid-color: #e00000;
   --atomix-form-invalid-border-color: #e00000;
+  --atomix-spacing-0: 0rem;
+  --atomix-spacing-1: 0.25rem;
+  --atomix-spacing-1.5: 0.375rem;
+  --atomix-spacing-2: 0.5rem;
+  --atomix-spacing-2.5: 0.625rem;
+  --atomix-spacing-3: 0.75rem;
+  --atomix-spacing-4: 1rem;
+  --atomix-spacing-5: 1.25rem;
+  --atomix-spacing-6: 1.5rem;
+  --atomix-spacing-7: 1.75rem;
+  --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-red-1: #fce6e6;
+  --atomix-red-2: #f8cccc;
+  --atomix-red-3: #f29999;
+  --atomix-red-4: #ec6666;
+  --atomix-red-5: #e63333;
+  --atomix-red-6: #e00000;
+  --atomix-red-7: #b80000;
+  --atomix-red-8: #910000;
+  --atomix-red-9: #6a0000;
+  --atomix-red-10: #440000;
+  --atomix-green-1: #e6f4ea;
+  --atomix-green-2: #cce9d6;
+  --atomix-green-3: #99d3ad;
+  --atomix-green-4: #66bd85;
+  --atomix-green-5: #33a75c;
+  --atomix-green-6: #009133;
+  --atomix-green-7: #00772a;
+  --atomix-green-8: #005e21;
+  --atomix-green-9: #004418;
+  --atomix-green-10: #002a0f;
+  --atomix-blue-1: #e6f0ff;
+  --atomix-blue-2: #cce0ff;
+  --atomix-blue-3: #99c0ff;
+  --atomix-blue-4: #66a1ff;
+  --atomix-blue-5: #3381ff;
+  --atomix-blue-6: #0061ff;
+  --atomix-blue-7: #004ecf;
+  --atomix-blue-8: #003ca0;
+  --atomix-blue-9: #002c72;
+  --atomix-blue-10: #001c44;
+  --atomix-yellow-1: #fff8e6;
+  --atomix-yellow-2: #ffefcc;
+  --atomix-yellow-3: #ffdf99;
+  --atomix-yellow-4: #ffd066;
+  --atomix-yellow-5: #ffc033;
+  --atomix-yellow-6: #ffb000;
+  --atomix-yellow-7: #d99500;
+  --atomix-yellow-8: #b27a00;
+  --atomix-yellow-9: #8c6000;
+  --atomix-yellow-10: #664500;
+  --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.4, 0, 0.2, 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.4, 0, 0.2, 1);
+  --atomix-transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --atomix-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 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;
@@ -879,6 +993,14 @@ summary {
   --atomix-success: #009133;
   --atomix-warning: #ffb000;
   --atomix-info: #0061ff;
+  --atomix-primary-rgb: 0, 97, 255;
+  --atomix-secondary-rgb: 134, 142, 150;
+  --atomix-light-rgb: 248, 249, 250;
+  --atomix-dark-rgb: 73, 80, 87;
+  --atomix-error-rgb: 224, 0, 0;
+  --atomix-success-rgb: 0, 145, 51;
+  --atomix-warning-rgb: 255, 176, 0;
+  --atomix-info-rgb: 0, 97, 255;
   --atomix-primary-text-emphasis: #ffffff;
   --atomix-secondary-text-emphasis: #e9ecef;
   --atomix-tertiary-text-emphasis: #dee2e6;
@@ -937,6 +1059,7 @@ summary {
   --atomix-link-color: #66a1ff;
   --atomix-link-color-rgb: 102, 161, 255;
   --atomix-link-hover-color: rgb(25.5, 114, 255);
+  --atomix-link-hover-color-rgb: 25.5, 114, 255;
   --atomix-code-color: #e63333;
   --atomix-border-color: #495057;
   --atomix-border-color-translucent: rgba(255, 255, 255, 0.15);
@@ -2125,7 +2248,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%;
@@ -2232,10 +2355,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;
@@ -2246,6 +2373,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;
@@ -2253,7 +2381,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);
@@ -2337,7 +2464,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);
@@ -3370,6 +3497,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);
 }
@@ -3498,6 +3654,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);
@@ -3596,7 +3777,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 {
@@ -5565,6 +5746,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);
 }
@@ -7950,7 +8134,7 @@ a, a:hover {
   --atomix-modal-sub-margin-top: 0.25rem;
   --atomix-modal-sub-color: var(--atomix-gray-7);
   --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-black);
   --atomix-modal-backdrop-opacity: 0.6;
   --atomix-modal-backdrop-blur: 10px;
@@ -8052,8 +8236,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);
@@ -9029,6 +9217,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);