@automattic/charts 3.2.0 → 4.1.0

package/dist/index.css

@@ -1,44 +1,41 @@
 :where(.a8c-charts-scope) {
-  --a8c-charts-color-series-1: var(--a8c-charts-color-series-1-theme, var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9))));
-  --a8c-charts-color-series-2: var(--a8c-charts-color-series-2-theme);
-  --a8c-charts-color-series-3: var(--a8c-charts-color-series-3-theme);
-  --a8c-charts-color-series-4: var(--a8c-charts-color-series-4-theme);
-  --a8c-charts-color-series-5: var(--a8c-charts-color-series-5-theme);
-  --a8c-charts-color-grid: var(--a8c-charts-color-grid-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
-  --a8c-charts-color-axis: var(--a8c-charts-color-axis-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
-  --a8c-charts-color-tick: var(--a8c-charts-color-tick-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
+  --a8c-charts-color-series-1: var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)));
+  --a8c-charts-color-grid: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+  --a8c-charts-color-axis-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+  --a8c-charts-color-tick-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+  --a8c-charts-color-axis-y: none;
+  --a8c-charts-color-tick-y: none;
   --a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
   --a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
   --a8c-charts-color-label-inverse: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
-  --a8c-charts-color-label-on-fill: var(--a8c-charts-color-label-on-fill-theme, #fff);
-  --a8c-charts-color-label-background: var(--a8c-charts-color-label-background-theme, transparent);
-  --a8c-charts-color-label-axis: var(--a8c-charts-color-label-axis-theme, var(--a8c-charts-color-label));
+  --a8c-charts-color-label-background: transparent;
+  --a8c-charts-color-label-axis: var(--a8c-charts-color-label);
   --a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
   --a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);
   --a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak, #cc1818);
   --a8c-charts-color-trend-neutral: var(--wpds-color-foreground-content-neutral-weak, #707070);
-  --a8c-charts-color-background: var(--a8c-charts-color-background-theme, var(--wpds-color-background-surface-neutral-strong, #fff));
+  --a8c-charts-color-background: var(--wpds-color-background-surface-neutral-strong, #fff);
   --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
   --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
   --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
-  --a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
+  --a8c-charts-color-tooltip-surface: #000000d9;
   --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
   --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
-  --a8c-charts-elevation-xs:
-  	0 1px 1px 0 #00000008,
+  --a8c-charts-elevation-xs: 0 1px 1px 0 #00000008,
   	0 1px 2px 0 #00000005,
   	0 3px 3px 0 #00000005,
   	0 4px 4px 0 #00000003;
-  --a8c-charts-elevation-sm:
-  	0 1px 2px 0 #0000000d,
+  --a8c-charts-elevation-sm: 0 1px 2px 0 #0000000d,
   	0 2px 3px 0 #0000000a,
   	0 6px 6px 0 #00000008,
   	0 8px 8px 0 #00000005;
-  --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, 400ms);
-  --a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
+  --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, .4s);
+  --a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1));
   --a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
   --a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
   --a8c-charts-border-radius-leaderboard-bar: 9999px;
+  --a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md, 12px);
+  --a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs, 4px);
 }
 .a8ccharts-04TogW-legend {
   align-self: stretch;
@@ -76,6 +73,10 @@
   text-decoration: line-through;
 }
 
+.a8ccharts-04TogW-legend-item-label {
+  color: var(--a8c-charts-color-label);
+}
+
 .a8ccharts-04TogW-legend-item-text--wrap {
   overflow-wrap: break-word;
   white-space: normal;
@@ -111,7 +112,7 @@
   min-height: 0;
 }
 
-.a8ccharts-fpNVAq-chart-layout__content svg {
+.a8ccharts-fpNVAq-chart-layout__content svg:not(.visx-tooltip svg) {
   display: block;
 }
 .a8ccharts-w3qxlG-center {
@@ -161,6 +162,10 @@
 .a8ccharts-ur9dWW-x-zoom__reset:not(:hover, :active, :focus) {
   background-color: var(--a8c-charts-color-surface);
 }
+.a8ccharts-bIyhgG-xy-plot {
+  isolation: isolate;
+  position: relative;
+}
 .a8ccharts-inuQka-line-chart {
   position: relative;
 }
@@ -253,11 +258,6 @@
   display: flex;
 }
 
-.visx-tooltip-glyph svg {
-  width: 10px;
-  height: 10px;
-}
-
 @keyframes a8ccharts-inuQka-rise {
   from {
     transform: scaleY(0);
@@ -324,6 +324,10 @@
     transform: scaleX(1);
   }
 }
+.a8ccharts-mGEVca-conversion-funnel-chart {
+  position: relative;
+}
+
 .a8ccharts-mGEVca-conversion-funnel-chart--loading {
   opacity: .6;
   pointer-events: none;
@@ -354,6 +358,14 @@
   overflow: hidden;
 }
 
+.a8ccharts-mGEVca-change-indicator--positive {
+  color: var(--a8c-charts-color-trend-up);
+}
+
+.a8ccharts-mGEVca-change-indicator--negative {
+  color: var(--a8c-charts-color-trend-down);
+}
+
 .a8ccharts-mGEVca-funnel-container {
   flex: 1;
   width: 100%;
@@ -393,6 +405,7 @@
 
 .a8ccharts-mGEVca-bar-container {
   border-radius: var(--a8c-charts-border-radius-bar);
+  background-color: var(--a8c-charts-color-surface-secondary);
   cursor: pointer;
   flex: 1;
   position: relative;
@@ -449,6 +462,7 @@
   font-size: var(--wpds-typography-font-size-lg, 15px);
 }
 .a8ccharts-8hS2IW-container {
+  background-color: var(--a8c-charts-color-background, #fff);
   position: relative;
 }
 
@@ -460,6 +474,7 @@
   height: 100%;
   min-height: 0;
   font-size: var(--wpds-typography-font-size-sm, 12px);
+  position: relative;
 }
 
 .a8ccharts-O3YMOW-heatmap-chart--height-capped {
@@ -540,8 +555,29 @@
   background: color-mix(in sRGB, var(--a8c-charts-color-track) 45%, transparent);
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__cell--summary {
+  background: none;
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__col-label--summary, .a8ccharts-O3YMOW-heatmap-chart__cell--summary .a8ccharts-O3YMOW-heatmap-chart__cell-value {
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__grid--compact .a8ccharts-O3YMOW-heatmap-chart__cell--summary .a8ccharts-O3YMOW-heatmap-chart__cell-value {
+  font-size: var(--wpds-typography-font-size-xs, 11px);
+  line-height: 1;
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__gap-start {
+  margin-inline-start: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__gap-end {
+  margin-inline-end: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
-  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
@@ -558,11 +594,15 @@
   color: var(--a8c-charts-color-label-inverse);
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__legend-label {
+  color: var(--a8c-charts-color-label);
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__legend-swatch {
   width: var(--wpds-dimension-size-3xs, 12px);
   height: var(--wpds-dimension-size-3xs, 12px);
   border-radius: var(--a8c-charts-border-radius-cell);
-  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
 }
 .a8ccharts-GovfoW-leaderboardChart {
   transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
@@ -645,6 +685,18 @@
   display: inline-block;
 }
 
+.a8ccharts-GovfoW-deltaValue--down {
+  color: var(--a8c-charts-color-trend-down);
+}
+
+.a8ccharts-GovfoW-deltaValue--neutral {
+  color: var(--a8c-charts-color-trend-neutral);
+}
+
+.a8ccharts-GovfoW-deltaValue--up {
+  color: var(--a8c-charts-color-trend-up);
+}
+
 .a8ccharts-GovfoW-deltaPlaceholder {
   text-align: center;
 }
@@ -744,14 +796,26 @@
     transition: none;
   }
 }
-.a8ccharts-gnszbG-pie-chart {
-  overflow: hidden;
+.a8ccharts-gnszbG-pie-chart__plot {
+  position: relative;
 }
 
 .a8ccharts-gnszbG-pie-chart--responsive {
   width: 100%;
   height: 100%;
 }
+
+.a8ccharts-gnszbG-pie-chart__label-plate {
+  fill: var(--a8c-charts-color-label-background, transparent);
+}
+
+.a8ccharts-gnszbG-pie-chart__label-text {
+  fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
+}
+.a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
+  position: relative;
+}
+
 .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive {
   width: 100%;
   height: 100%;