@automattic/charts 4.11.1 → 4.13.0

package/dist/index.css

@@ -348,6 +348,25 @@
     transform: scaleX(1);
   }
 }
+.a8ccharts-gx1_AW-selected-ring__far, .a8ccharts-gx1_AW-selected-ring__edge {
+  fill: none;
+}
+
+.a8ccharts-gx1_AW-selected-ring__far {
+  stroke-width: calc(4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
+.a8ccharts-gx1_AW-selected-ring__edge {
+  stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
+.a8ccharts-gx1_AW-selected-ring__contrast {
+  stroke: var(--a8c-charts-color-background, #fff);
+}
+
+.a8ccharts-gx1_AW-selected-ring__focus {
+  stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+}
 .a8ccharts-mGEVca-conversion-funnel-chart {
   position: relative;
 }
@@ -402,14 +421,18 @@
   height: 100%;
 }
 
-.a8ccharts-mGEVca-funnel-step--animated {
-  transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
+.a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-step-text, .a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-funnel-bar, .a8ccharts-mGEVca-funnel-step--animated .a8ccharts-mGEVca-bar-container {
+  transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1)), background-color var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
 }
 
-.a8ccharts-mGEVca-funnel-step--blurred {
+.a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-step-text, .a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-funnel-bar {
   opacity: .3;
 }
 
+.a8ccharts-mGEVca-funnel-step--blurred .a8ccharts-mGEVca-bar-container {
+  background-color: color-mix(in sRGB, var(--a8c-charts-color-surface-secondary) 30%, transparent);
+}
+
 .a8ccharts-mGEVca-step-label {
   color: var(--a8c-charts-color-label-secondary);
   font-size: var(--wpds-typography-font-size-sm, 12px);
@@ -462,20 +485,16 @@
   }
 }
 
-.a8ccharts-mGEVca-tooltip-title {
+.a8ccharts-mGEVca-tooltip-title, .a8ccharts-mGEVca-tooltip-label, .a8ccharts-mGEVca-tooltip-value {
   color: var(--a8c-charts-color-label);
   font-size: var(--wpds-typography-font-size-sm, 12px);
   font-style: normal;
   font-weight: var(--wpds-typography-font-weight-default, 400);
-  line-height: var(--wpds-typography-line-height-xs, 16px);
+  line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 
-.a8ccharts-mGEVca-tooltip-content {
-  color: var(--a8c-charts-color-label);
-  font-size: var(--wpds-typography-font-size-md, 13px);
-  font-style: normal;
+.a8ccharts-mGEVca-tooltip-value {
   font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-  line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 
 .a8ccharts-mGEVca-empty-state {
@@ -746,6 +765,10 @@
   padding-left: var(--wpds-dimension-padding-sm, 8px);
 }
 
+.a8ccharts-GovfoW-barWithLabelContainer.a8ccharts-GovfoW-is-overlay .a8ccharts-GovfoW-barTrack {
+  align-self: stretch;
+}
+
 .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar {
   height: 100%;
   min-height: 6px;
@@ -760,6 +783,14 @@
   animation: a8ccharts-GovfoW-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
 }
 
+.a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--negative, [dir="rtl"] .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--animated {
+  transform-origin: 100%;
+}
+
+[dir="rtl"] .a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-bar--negative {
+  transform-origin: 0;
+}
+
 @keyframes a8ccharts-GovfoW-stretch {
   from {
     transform: scaleX(0);
@@ -770,9 +801,25 @@
   }
 }
 
+.a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack {
+  display: grid;
+}
+
+.a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack .a8ccharts-GovfoW-bar {
+  grid-column: 2;
+  justify-self: start;
+}
+
+.a8ccharts-GovfoW-barWithLabelContainer .a8ccharts-GovfoW-barTrack .a8ccharts-GovfoW-bar--negative {
+  grid-column: 1;
+  justify-self: end;
+}
+
 .a8ccharts-GovfoW-valueContainer {
-  justify-content: flex-end;
-  align-items: center;
+  grid-column: 2 / -1;
+  grid-template-columns: subgrid;
+  place-items: center end;
+  display: grid;
 }
 
 .a8ccharts-GovfoW-deltaValue {
@@ -932,19 +979,6 @@
     transition: none;
   }
 }
-.a8ccharts-V2HDKq-selected-ring__contrast, .a8ccharts-V2HDKq-selected-ring__focus {
-  fill: none;
-}
-
-.a8ccharts-V2HDKq-selected-ring__contrast {
-  stroke: var(--a8c-charts-color-background, #fff);
-  stroke-width: calc(4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
-}
-
-.a8ccharts-V2HDKq-selected-ring__focus {
-  stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
-}
 .a8ccharts-gnszbG-pie-chart {
   isolation: isolate;
 }