@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/styles/charts.css

@@ -0,0 +1,264 @@
+/* charts — component CSS owned by the charts group. Tokens only. */
+
+/* ------------------------------------------------------------------ */
+/* Chart frame                                                         */
+/* ------------------------------------------------------------------ */
+
+.vui-chart {
+  --chart-tick-size: 11px;
+  --chart-area-opacity: 0.45;
+  --hm-gap: 3px;
+}
+[data-density="compact"] .vui-chart {
+  --chart-tick-size: 10px;
+  --hm-gap: 2px;
+}
+[data-material="glass"] .vui-chart {
+  --chart-area-opacity: 0.35;
+}
+
+/* Axis ticks: Recharts writes font-size as an SVG attribute; CSS wins and follows density. */
+.vui-chart .recharts-cartesian-axis-tick-value,
+.vui-chart .recharts-label {
+  font-family: var(--font-sans);
+  font-size: var(--chart-tick-size);
+  font-variant-numeric: tabular-nums;
+}
+.vui-chart stop[data-top] {
+  stop-opacity: var(--chart-area-opacity);
+}
+
+/* Keyboard focus on the plot (Recharts accessibility layer). */
+.vui-chart .recharts-wrapper:focus,
+.vui-chart .recharts-surface:focus {
+  outline: none;
+}
+.vui-chart .recharts-wrapper:focus-visible,
+.vui-chart .recharts-surface:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 3px;
+  border-radius: calc(var(--radius) - 4px);
+}
+.vui-chart .recharts-sector:focus,
+.vui-chart .recharts-rectangle:focus {
+  outline: none;
+}
+
+/* Tooltip: opaque, never blurred — it re-renders on every pointer move (glass budget). */
+.vui-chart-tooltip {
+  background: var(--chart-tooltip);
+  border: 1px solid var(--popover-border);
+  box-shadow: var(--popover-shadow);
+  color: var(--fg);
+}
+
+.vui-chart-value-label {
+  fill: var(--fg-muted);
+  font-size: var(--chart-tick-size);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.vui-chart-end-label {
+  font-size: 11.5px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+}
+.vui-chart-axis-title {
+  fill: var(--fg-subtle);
+  font-size: var(--chart-tick-size);
+}
+
+/* ------------------------------------------------------------------ */
+/* States                                                              */
+/* ------------------------------------------------------------------ */
+
+.vui-chart-skeleton-wave {
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C40 50 70 30 110 40 S180 78 220 58 S300 14 340 26 S390 44 400 36 V100 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C40 50 70 30 110 40 S180 78 220 58 S300 14 340 26 S390 44 400 36 V100 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+}
+.vui-chart-skeleton-line {
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C40 52 70 32 110 42 S180 80 220 60 S300 16 340 28 S390 46 400 38' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C40 52 70 32 110 42 S180 80 220 60 S300 16 340 28 S390 46 400 38' fill='none' stroke='black' stroke-width='5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+}
+.vui-chart-skeleton-ring {
+  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
+  mask: radial-gradient(circle, transparent 57%, #000 58%);
+}
+.vui-chart-skeleton-grid {
+  background: var(--skeleton);
+  -webkit-mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px), repeating-linear-gradient(#000 0 11px, transparent 11px 14px);
+  -webkit-mask-composite: source-in;
+  mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px), repeating-linear-gradient(#000 0 11px, transparent 11px 14px);
+  mask-composite: intersect;
+}
+.vui-chart-refresh-bar {
+  animation: ui-indeterminate 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.vui-chart-empty-grid {
+  background: repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), var(--chart-grid) calc(25% - 1px) 25%);
+  -webkit-mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
+  mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Bar list                                                            */
+/* ------------------------------------------------------------------ */
+
+.vui-bar-list-bar {
+  transition: inline-size 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+[data-material="glass"] .vui-bar-list-bar.bg-accent-soft {
+  background: color-mix(in oklch, var(--accent-base) 28%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Funnel                                                              */
+/* ------------------------------------------------------------------ */
+
+.vui-funnel-list {
+  display: grid;
+  gap: 0.875rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.vui-funnel-step {
+  display: grid;
+  gap: 0.375rem;
+  min-width: 0;
+}
+.vui-funnel-value {
+  font-size: 13px;
+}
+.vui-funnel-track {
+  position: relative;
+  block-size: 1.5rem;
+  border-radius: calc(var(--radius) - 6px);
+  background: color-mix(in oklch, var(--track) 45%, transparent);
+}
+.vui-funnel[data-size="sm"] .vui-funnel-track {
+  block-size: 1rem;
+}
+.vui-funnel-fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: calc(var(--p) * 1%);
+  border-radius: inherit;
+  transition: inline-size 500ms cubic-bezier(0.2, 0.8, 0.2, 1), block-size 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.vui-funnel-marker {
+  position: absolute;
+  inset-block: -3px;
+  inset-inline-start: calc(var(--p) * 1% - 1px);
+  inline-size: 2px;
+  border-radius: 1px;
+  background: var(--fg);
+  opacity: 0.7;
+}
+.vui-funnel-step:has(:focus-visible) .vui-funnel-fill,
+.vui-funnel-step:hover .vui-funnel-fill {
+  filter: brightness(1.06) saturate(1.05);
+}
+
+/* Columns in a wide container; rows otherwise (the same markup). */
+@container (min-width: 36rem) {
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-list {
+    grid-template-columns: repeat(var(--funnel-n), minmax(0, 1fr));
+    gap: 0.625rem;
+    align-items: start;
+  }
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+  }
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-value {
+    order: -1;
+    font-size: 20px;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+  }
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-track {
+    block-size: 9rem;
+  }
+  .vui-funnel[data-orientation="horizontal"][data-size="sm"] .vui-funnel-track {
+    block-size: 6rem;
+  }
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-fill {
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: calc(var(--p) * 1%);
+  }
+  .vui-funnel[data-orientation="horizontal"] .vui-funnel-marker {
+    inset-block: auto calc(var(--p) * 1% - 1px);
+    inset-inline: -3px;
+    inline-size: auto;
+    block-size: 2px;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Gauge                                                               */
+/* ------------------------------------------------------------------ */
+
+.vui-gauge-value {
+  transition: stroke-dasharray 600ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke 200ms;
+}
+/* RTL: mirror the arc only (text is HTML on top). The ring is pre-rotated, so it flips on y. */
+[dir="rtl"] .vui-gauge-arc {
+  scale: -1 1;
+}
+[dir="rtl"] .vui-gauge-arc[data-ring] {
+  scale: 1 -1;
+}
+
+/* ------------------------------------------------------------------ */
+/* Heatmap                                                             */
+/* ------------------------------------------------------------------ */
+
+.vui-heatmap-cell {
+  display: block;
+  aspect-ratio: 1;
+  min-inline-size: 0;
+  border-radius: calc(var(--radius) / 4);
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fg) 4%, transparent);
+  transition: box-shadow 120ms;
+}
+.vui-heatmap-cell[data-empty] {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.vui-heatmap-cell[data-placeholder] {
+  visibility: hidden;
+}
+.vui-heatmap-cell[data-today] {
+  box-shadow: 0 0 0 1.5px var(--fg);
+}
+.vui-heatmap-cell[role="gridcell"]:hover {
+  box-shadow: inset 0 0 0 1.5px var(--field-border-hover);
+}
+/* Glass: the lightest step would vanish into a translucent card. */
+[data-material="glass"] .vui-heatmap[data-scale="sequential"] [data-step="0"] {
+  background: var(--track) !important;
+}
+.vui-heatmap-swatch {
+  display: inline-block;
+  inline-size: 10px;
+  block-size: 10px;
+  border-radius: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vui-chart-refresh-bar {
+    animation: none;
+    inline-size: 100%;
+    opacity: 0.6;
+  }
+  .vui-gauge-value,
+  .vui-funnel-fill,
+  .vui-bar-list-bar {
+    transition: none;
+  }
+}