@shohojdhara/atomix 0.4.5 → 0.4.7

package/dist/atomix.css

@@ -1898,19 +1898,22 @@ a, a:hover {
   position: relative;
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
+  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
+    cubic-bezier(0.22, 1, 0.36, 1);
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
-  --_glass-z-background: 0;
-  --_glass-z-filter: 1;
-  --_glass-z-effect: 2;
-  --_glass-z-hover: 3;
-  --_glass-z-overlay-highlight: 4;
-  --_glass-z-border-1: 5;
-  --_glass-z-border-2: 6;
-  --_glass-z-content: 7;
+  --atomix-glass-base-z-index: 0;
+  --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
+  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
+  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
+  --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
+  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
+  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
+  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
 }
 .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
   position: absolute;
@@ -1936,17 +1939,17 @@ a, a:hover {
   background: var(--atomix-glass-hover-1-gradient, none);
 }
 .c-atomix-glass__hover-1 {
-  transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
+  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
   opacity: var(--atomix-glass-hover-1-opacity, 0);
   background: var(--atomix-glass-hover-1-gradient, none);
 }
 .c-atomix-glass__hover-2 {
-  transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
+  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
   opacity: var(--atomix-glass-hover-2-opacity, 0);
   background: var(--atomix-glass-hover-2-gradient, none);
 }
 .c-atomix-glass__hover-3 {
-  transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
+  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   opacity: var(--atomix-glass-hover-3-opacity, 0);
   background: var(--atomix-glass-hover-3-gradient, none);
 }
@@ -1969,6 +1972,8 @@ a, a:hover {
   transition: var(--atomix-glass-transition);
   mix-blend-mode: screen;
   z-index: var(--_glass-z-overlay-highlight);
+  opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
+  background: var(--atomix-glass-overlay-highlight-bg, none);
 }
 .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
   padding: var(--atomix-glass-border-width);
@@ -2011,12 +2016,15 @@ a, a:hover {
   position: relative;
   border-radius: var(--atomix-glass-radius);
   transition: var(--atomix-glass-transition);
+  z-index: var(--_glass-z-container);
 }
 .c-atomix-glass__inner {
   width: var(--atomix-glass-container-width);
   height: var(--atomix-glass-container-height);
   position: relative;
   border-radius: var(--atomix-glass-radius);
+  padding: var(--atomix-glass-container-padding);
+  box-shadow: var(--atomix-glass-container-box-shadow);
 }
 .c-atomix-glass__filter {
   position: absolute;
@@ -2034,12 +2042,18 @@ a, a:hover {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border-radius: var(--atomix-glass-radius);
+  border-radius: var(--atomix-glass-container-radius);
+  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
+          backdrop-filter: var(--atomix-glass-container-backdrop);
 }
 .c-atomix-glass__filter-shadow {
   position: absolute;
   inset: var(--atomix-glass-border-width);
   pointer-events: none;
+  border-radius: var(--atomix-glass-container-radius);
+  box-shadow: var(--atomix-glass-container-shadow);
+  opacity: var(--atomix-glass-container-shadow-opacity);
+  background: var(--atomix-glass-container-bg);
 }
 .c-atomix-glass__content {
   position: relative;
@@ -2047,9 +2061,14 @@ a, a:hover {
   height: var(--atomix-glass-container-height);
   border-radius: var(--atomix-glass-radius);
   z-index: var(--_glass-z-content);
+  text-shadow: var(--atomix-glass-container-text-shadow);
 }
 .c-atomix-glass__background-layer {
-  position: absolute;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
   pointer-events: none;
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
@@ -4212,6 +4231,8 @@ a, a:hover {
 .c-chart__data-point {
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__data-point:hover {
   opacity: 0.8;
@@ -4259,21 +4280,23 @@ a, a:hover {
   opacity: 0.5;
 }
 .c-chart__treemap-node {
-  stroke: var(--atomix-border-color);
-  stroke-width: 1;
+  stroke: transparent;
+  stroke-width: 0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__treemap-node:hover {
   transform: scale(1.02);
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
-  stroke-width: 1.5;
+  stroke-width: 0;
 }
 .c-chart__treemap-node--hovered {
   transform: scale(1.02);
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
-  stroke-width: 1.5;
+  stroke-width: 0;
 }
 .c-chart__treemap-node--selected {
   stroke: var(--atomix-primary-border-subtle);
@@ -4288,7 +4311,7 @@ a, a:hover {
 .c-chart__treemap-label {
   font-size: 0.875rem;
   font-weight: 500;
-  fill: var(--atomix-text-primary);
+  fill: var(--atomix-invert-text-emphasis);
   text-anchor: middle;
   dominant-baseline: middle;
   pointer-events: none;
@@ -4300,13 +4323,14 @@ a, a:hover {
 .c-chart__funnel-segment {
   stroke: var(--atomix-border-color);
   stroke-width: 1;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
 }
 .c-chart__funnel-segment:hover {
-  opacity: 0.9;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
+  opacity: 1;
+  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.175)) brightness(1.1);
   stroke-width: 1.5;
 }
 .c-chart__funnel-segment:focus-visible {
@@ -4324,11 +4348,11 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 .c-chart__funnel-conversion {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 700;
   fill: var(--atomix-secondary-text-emphasis);
   text-anchor: middle;
   dominant-baseline: middle;
@@ -4336,27 +4360,29 @@ a, a:hover {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  opacity: 0.8;
+  opacity: 0.9;
+  letter-spacing: 0.05em;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
 }
 .c-chart__heatmap-cell {
-  stroke: var(--atomix-border-color);
-  stroke-width: 1;
+  stroke: transparent;
+  stroke-width: 0;
   rx: 0.25rem;
   ry: 0.25rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__heatmap-cell:hover {
   transform: scale(1.05);
-  transform-origin: center;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
   stroke-width: 2;
   z-index: 10;
 }
 .c-chart__heatmap-cell--hovered {
   transform: scale(1.05);
-  transform-origin: center;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
   stroke-width: 2;
   z-index: 10;
@@ -4369,7 +4395,7 @@ a, a:hover {
 .c-chart__heatmap-label {
   font-size: 0.75rem;
   font-weight: 400;
-  fill: var(--atomix-text-primary);
+  fill: var(--atomix-invert-text-emphasis);
   text-anchor: middle;
   dominant-baseline: middle;
   pointer-events: none;
@@ -4497,6 +4523,8 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__area-point:hover {
   transform: scale(1.2);
@@ -4553,6 +4581,7 @@ a, a:hover {
   cursor: pointer;
   shape-rendering: geometricPrecision;
   transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__donut-slice:hover {
   transform: scale(1.02);
@@ -4616,6 +4645,8 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__scatter-point:hover {
   transform: scale(1.2);
@@ -4640,6 +4671,8 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__bubble:hover {
   transform: scale(1.1);
@@ -4697,6 +4730,8 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__radar-point:hover {
   transform: scale(1.3);
@@ -4764,6 +4799,8 @@ a, a:hover {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   shape-rendering: geometricPrecision;
+  transform-origin: center;
+  transform-box: fill-box;
 }
 .c-chart__waterfall-cumulative-point:hover {
   transform: scale(1.3);
@@ -4805,7 +4842,7 @@ a, a:hover {
     opacity: 1;
   }
   .c-chart__treemap-node {
-    stroke-width: 2;
+    stroke-width: 0;
   }
   .c-chart__treemap-node--selected {
     stroke-width: 3;
@@ -4820,7 +4857,7 @@ a, a:hover {
     outline-width: calc(var(--atomix-border-width) * 3);
   }
   .c-chart__heatmap-cell {
-    stroke-width: 2;
+    stroke-width: 0;
   }
   .c-chart__heatmap-cell--hovered {
     stroke-width: 3;