@orchidsoftware/charts 0.0.1

package/src/styles.css

@@ -0,0 +1,350 @@
+/* Foundations */
+
+.charts2-host {
+  position: relative;
+}
+
+.charts2-scrollable-heatmap {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.charts2-scrollable-heatmap .charts2-heatmap-chart {
+  max-width: none;
+}
+
+:root {
+  --charts-label-color: #3a3a3c;
+  --charts-secondary-label-color: #6e6e73;
+  --charts-axis-line-color: #e5e5ea;
+  --charts-tooltip-bg: rgb(255 255 255 / 96%);
+  --charts-tooltip-value: #1d1d1f;
+  --charts-focus-ring: #007aff;
+  --charts-mark-separator: #fff;
+  --charts-point-fill: #fff;
+}
+
+/* Chart primitives */
+
+.charts2-chart {
+  display: block;
+  max-width: 100%;
+  overflow: visible;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.charts2-title {
+  font-size: 15px;
+  font-weight: 600;
+  fill: var(--charts-label-color, #3a3a3c);
+}
+
+.charts2-axis {
+  stroke: var(--charts-axis-line-color, #f4f5f6);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-line {
+  stroke-width: var(--charts-stroke-width, 2px);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-grid {
+  fill: none;
+  stroke: var(--charts-axis-line-color, #f4f5f6);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: crispedges;
+}
+
+.charts2-radar {
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-polar-area,
+.charts2-pie-slice,
+.charts2-donut-slice,
+.charts2-percentage-segment {
+  stroke: var(--charts-mark-separator);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-label,
+.charts2-legend,
+.charts2-annotation {
+  font:
+    11px/1.25 -apple-system,
+    BlinkMacSystemFont,
+    "SF Pro Text",
+    "Segoe UI",
+    sans-serif;
+  fill: var(--charts-label-color, #313b44);
+}
+
+.charts2-annotation {
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  opacity: 0.58;
+}
+
+.charts2-direct-value {
+  font:
+    600 15px/1 -apple-system,
+    BlinkMacSystemFont,
+    "SF Pro Display",
+    sans-serif;
+  fill: var(--charts-label-color);
+}
+
+.charts2-marker {
+  stroke: var(--charts-secondary-label-color);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-slice-label {
+  font:
+    600 10px system-ui,
+    sans-serif;
+  pointer-events: none;
+  fill: #fff;
+}
+
+/* Interaction states */
+
+.charts2-mark {
+  cursor: default;
+  outline: none;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+.charts2-selectable-mark {
+  cursor: pointer;
+}
+
+.charts2-x-hit {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-x-hit:hover,
+.charts2-x-hit.is-hovered,
+.charts2-x-hit.is-active {
+  fill: var(--charts-focus-ring);
+  fill-opacity: 0.08;
+
+  /*
+  stroke: var(--charts-focus-ring);
+  stroke-opacity: 0.4;
+   */
+}
+
+.charts2-previewable-mark:hover,
+.charts2-interactive-mark.is-hovered,
+.charts2-visual-mark.is-hovered {
+  filter: brightness(0.96) saturate(1.08);
+}
+
+.charts2-interactive-mark:focus-visible {
+  filter: drop-shadow(0 0 1px var(--charts-tooltip-bg)) drop-shadow(0 0 2px var(--charts-focus-ring));
+}
+
+.charts2-interactive-mark.is-active {
+  filter: brightness(0.92) saturate(1.12) drop-shadow(0 0 2px var(--charts-focus-ring));
+}
+
+.charts2-interactive-mark.is-pressed {
+  opacity: 0.72;
+}
+
+.charts2-point-hit {
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-point-hit:hover,
+.charts2-point-hit.is-hovered,
+.charts2-point-hit.is-active {
+  fill: var(--charts-focus-ring);
+  fill-opacity: 0.08;
+  stroke: currentcolor;
+  stroke-opacity: 0.42;
+}
+
+.charts2-point-halo {
+  pointer-events: none;
+  fill: var(--charts-point-fill);
+  stroke: var(--charts-point-fill);
+  stroke-width: 5;
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-point,
+.charts2-scatter {
+  stroke-width: 3;
+  vector-effect: non-scaling-stroke;
+}
+
+/* Series and family details */
+
+.charts2-legend-group {
+  pointer-events: none;
+}
+
+.charts2-legend-swatch {
+  vector-effect: non-scaling-stroke;
+}
+
+.charts2-line.charts2-series-1 {
+  stroke-dasharray: 8 4;
+}
+
+.charts2-line.charts2-series-2 {
+  stroke-dasharray: 2 3;
+}
+
+.charts2-line.charts2-series-3 {
+  stroke-dasharray: 10 3 2 3;
+}
+
+.charts2-heat-cell {
+  stroke: var(--charts-mark-separator);
+  stroke-width: 1;
+}
+
+.charts2-timesheet-bar {
+  vector-effect: non-scaling-stroke;
+}
+
+/* Tooltip */
+
+.charts2-tooltip {
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(280px, calc(100% - 16px));
+  max-height: min(240px, calc(100% - 8px));
+  padding: 8px 10px;
+  overflow: hidden;
+  font:
+    500 12px/1.3 -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  color: var(--charts-tooltip-value, #1d1d1f);
+  overflow-wrap: anywhere;
+  white-space: normal;
+  pointer-events: none;
+  background: var(--charts-tooltip-bg, rgb(255 255 255 / 96%));
+  border: 1px solid rgb(0 0 0 / 8%);
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
+  transform: translate(-50%, -100%);
+}
+
+.charts2-tooltip[hidden] {
+  display: none;
+}
+
+.charts2-tooltip-heading {
+  margin-bottom: 6px;
+  font-weight: 500;
+  color: var(--charts-secondary-label-color);
+  text-wrap: balance;
+}
+
+.charts2-tooltip-row {
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  gap: 7px;
+  align-items: center;
+  min-width: 160px;
+}
+
+.charts2-tooltip-row + .charts2-tooltip-row {
+  margin-top: 4px;
+}
+
+.charts2-tooltip-row .charts2-series-swatch {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.charts2-tooltip-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.charts2-tooltip-row strong {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Motion and adaptive appearance */
+
+@media (prefers-reduced-motion: no-preference) {
+  .charts2-mark {
+    transition:
+      filter 160ms ease,
+      opacity 160ms ease,
+      transform 160ms ease,
+      stroke-width 160ms ease;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .charts2-mark {
+    transition: none !important;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --charts-label-color: #f2f2f7;
+    --charts-secondary-label-color: #aeaeb2;
+    --charts-axis-line-color: #3a3a3c;
+    --charts-tooltip-bg: rgb(44 44 46 / 96%);
+    --charts-tooltip-value: #fff;
+    --charts-mark-separator: #1c1c1e;
+    --charts-point-fill: #1c1c1e;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --charts-axis-line-color: #8e8e93;
+  }
+
+  .charts2-interactive-mark:focus-visible,
+  .charts2-interactive-mark.is-active {
+    filter: drop-shadow(0 0 3px var(--charts-focus-ring));
+  }
+
+  .charts2-annotation {
+    font-weight: 600;
+  }
+}
+
+@media (forced-colors: active) {
+  .charts2-annotation {
+    fill: CanvasText !important;
+  }
+}