poe-svelte-ui-lib 1.31.2 → 1.31.3

package/dist/Graph/Graph.svelte

@@ -301,26 +301,35 @@
     drawAllGraphs()
   }
 
+  /* Прозрачность линий сетки — общая с PeriodChart (border-(--faint-color)/40) */
+  const GRID_ALPHA = 0.4
+
   const drawAllGraphs = () => {
     if (!ctx) return
     ctx.clearRect(0, 0, width, height)
 
     const { padding, graphWidth, graphHeight, minX, timeSpan, yMin, yMax, getX, getY } = computeGeometry()
 
-    /* Сетка X */
-    ctx.strokeStyle = "#777"
-    ctx.fillStyle = "#777"
-    ctx.lineWidth = 0.5
+    /* Сетка в стиле PeriodChart: пунктир цветом --faint-color темы, подписи тем же цветом без прозрачности */
+    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#8b93a1"
+    ctx.strokeStyle = gridColor
+    ctx.fillStyle = gridColor
+    ctx.lineWidth = 1
+    ctx.setLineDash([3, 3])
     ctx.font = "10px monospace"
+
+    /* Сетка X */
     ctx.textAlign = "center"
 
     for (let i = 0; i <= 10; i++) {
       const t = minX + (i / 10) * timeSpan
       const x = getX(t)
+      ctx.globalAlpha = GRID_ALPHA
       ctx.beginPath()
       ctx.moveTo(x, padding.top)
       ctx.lineTo(x, height - padding.bottom)
       ctx.stroke()
+      ctx.globalAlpha = 1
       ctx.textBaseline = "top"
       ctx.fillText(formatAxisLabel(t, timeSpan), x, height - padding.bottom + 2)
     }
@@ -332,12 +341,15 @@
     for (let i = 0; i <= ySteps; i++) {
       const yVal = yMax - (i * (yMax - yMin)) / ySteps
       const y = getY(yVal)
+      ctx.globalAlpha = GRID_ALPHA
       ctx.beginPath()
       ctx.moveTo(padding.left, y)
       ctx.lineTo(width - padding.right, y)
       ctx.stroke()
+      ctx.globalAlpha = 1
       ctx.fillText(yVal.toFixed(1), padding.left - 5, y)
     }
+    ctx.setLineDash([])
 
     /* Отрисовка графиков */
     ctx.lineWidth = 2

package/dist/PeriodChart/PeriodChart.svelte

@@ -119,9 +119,7 @@
           <div class="relative flex h-40 w-full items-end gap-1">
             {#each axis.ticks as tick}
               <div
-                class="pointer-events-none absolute inset-x-0 border-t {tick === 0
-                  ? 'border-(--hairline-color)'
-                  : 'border-dashed border-(--hairline-color)/60'}"
+                class="pointer-events-none absolute inset-x-0 border-t {tick === 0 ? 'border-(--faint-color)/60' : 'border-dashed border-(--faint-color)/40'}"
                 style="bottom: {(tick / axis.top) * 100}%"
               ></div>
             {/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.31.2",
+  "version": "1.31.3",
   "license": "MIT",
   "type": "module",
   "scripts": {