@shohojdhara/atomix 0.4.6 → 0.4.8

package/dist/atomix.css

@@ -1896,13 +1896,8 @@ a, a:hover {
 }
 .c-atomix-glass {
   position: relative;
-  --atomix-glass-radius: var(--atomix-radius-md, 16px);
-  --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
-    cubic-bezier(0.22, 1, 0.36, 1);
+  --atomix-glass-transition: all 0.15s ease;
   --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);
   --atomix-glass-base-z-index: 0;
   --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
@@ -1914,10 +1909,12 @@ a, a:hover {
   --_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);
+  position: relative;
 }
 .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
-  position: absolute;
-  inset: 0;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
   pointer-events: none;
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
@@ -1925,8 +1922,6 @@ a, a:hover {
   z-index: var(--_glass-z-hover);
 }
 .c-atomix-glass__base, .c-atomix-glass__overlay {
-  position: absolute;
-  inset: 0;
   pointer-events: none;
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
@@ -2002,25 +1997,26 @@ a, a:hover {
   mix-blend-mode: screen;
   z-index: var(--_glass-z-border-1);
   background: var(--atomix-glass-border-gradient-1, none);
-  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
 }
 .c-atomix-glass__border-2 {
   mix-blend-mode: overlay;
   z-index: var(--_glass-z-border-2);
   background: var(--atomix-glass-border-gradient-2, none);
-  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
 }
 .c-atomix-glass__container {
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
-  position: relative;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
   border-radius: var(--atomix-glass-radius);
   transition: var(--atomix-glass-transition);
+  transform: var(--atomix-glass-transform);
   z-index: var(--_glass-z-container);
 }
 .c-atomix-glass__inner {
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
+  width: 100%;
+  height: 100%;
   position: relative;
   border-radius: var(--atomix-glass-radius);
   padding: var(--atomix-glass-container-padding);
@@ -4231,6 +4227,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;
@@ -4278,21 +4276,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);
@@ -4307,7 +4307,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;
@@ -4319,13 +4319,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 {
@@ -4343,11 +4344,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;
@@ -4355,27 +4356,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;
@@ -4388,7 +4391,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;
@@ -4516,6 +4519,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);
@@ -4572,6 +4577,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);
@@ -4635,6 +4641,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);
@@ -4659,6 +4667,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);
@@ -4716,6 +4726,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);
@@ -4783,6 +4795,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);
@@ -4824,7 +4838,7 @@ a, a:hover {
     opacity: 1;
   }
   .c-chart__treemap-node {
-    stroke-width: 2;
+    stroke-width: 0;
   }
   .c-chart__treemap-node--selected {
     stroke-width: 3;
@@ -4839,7 +4853,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;
@@ -5900,19 +5914,12 @@ a, a:hover {
     transform: translateY(100%);
   }
 }
-.c-edge-panel--glass {
-  position: absolute;
-  z-index: auto;
-  z-index: initial;
-}
 .c-edge-panel--glass .c-edge-panel__container {
   background: transparent;
   box-shadow: none;
   overflow: hidden;
   border: none;
   padding: 0;
-  z-index: auto;
-  z-index: initial;
   will-change: initial;
   transform: none !important;
   border-radius: inherit;
@@ -5954,7 +5961,7 @@ a, a:hover {
 .c-edge-panel--glass .c-edge-panel__backdrop {
   background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 50%, transparent);
   animation: fadeIn 0.3s ease forwards;
-  z-index: 0;
+  z-index: 1;
 }
 .c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
   animation: fadeOut 0.3s ease forwards;
@@ -8037,8 +8044,6 @@ a, a:hover {
   width: 100%;
   height: 100%;
   display: none;
-}
-.c-modal:not(.c-modal--glass) {
   z-index: 1040;
 }
 .c-modal__backdrop {
@@ -8470,7 +8475,11 @@ a, a:hover {
 .c-navbar--glass {
   position: relative;
   background-color: transparent;
-  border-bottom: none;
+}
+@supports (color: color-mix(in lch, red, blue)){
+.c-navbar--glass {
+  background-color: color-mix(in srgb, var(--atomix-navbar-bg) 50%, transparent);
+}
 }
 .c-navbar--fixed-bottom {
   bottom: 0;
@@ -10981,18 +10990,14 @@ a, a:hover {
 .c-tooltip--bottom .c-tooltip__arrow {
   transform: rotate(225deg);
 }
-.c-tooltip--glass {
-  z-index: auto;
-  z-index: initial;
-}
 .c-tooltip--glass .c-tooltip__content {
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
 }
 .c-tooltip--glass .c-tooltip__arrow {
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
-  clip-path: polygon(0 100%, 100% 100%, 100% 0);
-  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
-          backdrop-filter: var(--atomix-glass-container-backdrop);
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
+}
+.c-tooltip--glass .c-tooltip__arrow {
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
 }
 .c-upload {
   --atomix-upload-width: 31.25rem;