mnfst 0.5.121 → 0.5.123

package/lib/manifest.chart.css

@@ -0,0 +1,195 @@
+/* Manifest Charts */
+
+:root {
+    /* Chart guidance */
+    --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
+    --color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));
+
+    /* Chart data segments */
+    --color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
+    --color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
+    --color-chart-3: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
+    --color-chart-4: var(--color-amber-400, oklch(82.8% 0.189 84.429));
+    --color-chart-5: var(--color-amber-500, oklch(76.9% 0.188 70.08));
+    --color-chart-6: var(--color-amber-600, oklch(66.6% 0.179 58.318));
+    --color-chart-7: var(--color-orange-400, oklch(75% 0.183 55.934));
+    --color-chart-8: var(--color-orange-500, oklch(70.5% 0.213 47.604));
+    --color-chart-9: var(--color-orange-600, oklch(64.6% 0.222 41.116));
+}
+
+@layer utilities {
+
+    :where([x-chart], .chart):not(.unstyle) {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        width: 100%;
+        position: relative;
+
+        & svg {
+            display: block;
+            width: 100%;
+            overflow: visible
+        }
+
+        /* Grid lines */
+        & svg line {
+            stroke: var(--color-chart-grid);
+            stroke-width: 1;
+            shape-rendering: crispEdges
+        }
+
+        /* Axis labels */
+        & svg text {
+            fill: var(--color-chart-label);
+            font-size: 0.6875rem;
+            font-family: inherit
+        }
+
+        /* Line series */
+        & path.line {
+            stroke: var(--color-chart-color, var(--color-chart-1));
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round
+        }
+
+        /* Area series */
+        & path.area {
+            fill: var(--color-chart-color, var(--color-chart-1));
+            opacity: 0.15
+        }
+
+        /* Points */
+        & circle {
+            fill: var(--color-chart-color, var(--color-chart-1));
+            stroke: var(--color-page, oklch(98.5% 0 0));
+            stroke-width: 1.5;
+            transition: r var(--transition-duration, .1s) ease;
+
+            &:hover {
+                r: 5
+            }
+        }
+
+        & circle.scatter {
+            opacity: 0.85
+        }
+
+        /* Bars */
+        & rect {
+            fill: var(--color-chart-color, var(--color-chart-1));
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
+        /* Candlesticks — wick <line> + body <rect> in a positive/negative <g> */
+        & g.positive,
+        & g.negative {
+            & line {
+                stroke: var(--color-chart-candle);
+                stroke-width: 1.5
+            }
+
+            & rect {
+                fill: var(--color-chart-candle)
+            }
+        }
+
+        & g.positive {
+            --color-chart-candle: var(--color-positive-content, oklch(60% 0.13 150))
+        }
+
+        & g.negative {
+            --color-chart-candle: var(--color-negative-content, oklch(60% 0.18 25))
+        }
+
+        /* Pie / donut slices */
+        & path.slice {
+            fill: var(--color-chart-color, var(--color-chart-1));
+            stroke: var(--color-page, oklch(98.5% 0 0));
+            stroke-width: 2;
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.85
+            }
+        }
+
+        /* Value labels drawn on/above segments */
+        & text.value {
+            fill: var(--color-content-stark, oklch(20.5% 0 0));
+            font-size: 0.6875rem;
+            font-weight: 600;
+            pointer-events: none;
+
+            /* On a filled segment (bar/slice center) — read against the fill */
+            &.inverse {
+                fill: black;
+                paint-order: stroke;
+                stroke: rgba(255, 255, 255, 0.75);
+                stroke-width: 1.5px
+            }
+        }
+
+        /* Legend — <footer> sibling below the SVG; <span> items, <i> swatches */
+        & footer {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            justify-content: center;
+            gap: 0.875rem;
+            margin-top: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--color-content-neutral, oklch(43.9% 0 0));
+
+            &>span {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.375rem
+            }
+
+            & i {
+                width: 0.625rem;
+                height: 0.625rem;
+                border-radius: 2px;
+                background: var(--color-chart-color, var(--color-chart-1))
+            }
+        }
+
+        /* Cursor-following tooltip — chrome comes from manifest.tooltip.css
+           (.tooltip); only the pointer-tracking positioning lives here */
+        & .tooltip {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 50;
+            transform: translate(-50%, calc(-100% - 0.625rem));
+            font-size: 0.75rem;
+            line-height: 1.3;
+            white-space: nowrap;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity .1s ease;
+
+            &.active {
+                opacity: 1
+            }
+        }
+
+        /* Empty / error state */
+        &>small,
+        label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 6rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--color-content-subtle, oklch(55.6% 0 0))
+        }
+    }
+}