astro-component-kit 0.4.0 → 0.5.0

package/src/components/lib/charts/AreaChart.astro

@@ -48,9 +48,9 @@ const chartConfig = {
 
 <style>
   .premium-chart-card {
-    background: rgba(255, 255, 255, 0.03);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 24px);
     padding: var(--sp-6, 24px);
     overflow: hidden;
@@ -102,7 +102,7 @@ const chartConfig = {
   :global(.apexcharts-tooltip) {
     background: rgba(15, 23, 42, 0.9) !important;
     backdrop-filter: blur(8px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1) !important;
     border-radius: 12px !important;
     color: #fff !important;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
@@ -175,7 +175,7 @@ const chartConfig = {
         },
         grid: {
           show: config.showGrid,
-          borderColor: 'rgba(255, 255, 255, 0.05)',
+          borderColor: 'rgb(var(--ink-rgb, 255 255 255) / 0.05)',
           strokeDashArray: 4,
         },
         legend: {

package/src/components/lib/charts/BarChart.astro

@@ -51,9 +51,9 @@ const chartConfig = {
 
 <style>
   .premium-chart-card {
-    background: rgba(255, 255, 255, 0.03);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 24px);
     padding: var(--sp-6, 24px);
     width: 100%;
@@ -158,7 +158,7 @@ const chartConfig = {
           labels: { style: { colors: '#64748b', fontSize: '12px' } },
         },
         grid: {
-          borderColor: 'rgba(255, 255, 255, 0.05)',
+          borderColor: 'rgb(var(--ink-rgb, 255 255 255) / 0.05)',
           strokeDashArray: 4,
         },
         legend: {

package/src/components/lib/charts/ChartFrame.astro

@@ -133,14 +133,14 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
     font-family: var(--font-sans, system-ui, sans-serif);
   }
   .cf--glass {
-    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.045), rgb(var(--ink-rgb, 255 255 255) / 0.015));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
   }
   .cf--solid {
     background: var(--chart-surface, #0d0d0f);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
   .cf--ghost {
     background: transparent;
@@ -231,12 +231,12 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
 
   /* ── Shared mark vocabulary for every chart ───────────── */
   .cf :global(.cf-grid) {
-    stroke: var(--chart-grid, rgba(255, 255, 255, 0.07));
+    stroke: var(--chart-grid, rgb(var(--ink-rgb, 255 255 255) / 0.07));
     stroke-width: 1;
     shape-rendering: crispEdges;
   }
   .cf :global(.cf-axis) {
-    stroke: var(--chart-axis, rgba(255, 255, 255, 0.18));
+    stroke: var(--chart-axis, rgb(var(--ink-rgb, 255 255 255) / 0.18));
     stroke-width: 1;
     shape-rendering: crispEdges;
   }
@@ -272,7 +272,7 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
     outline: none;
   }
   .cf :global(.cf-cross) {
-    stroke: rgba(255, 255, 255, 0.35);
+    stroke: rgb(var(--ink-rgb, 255 255 255) / 0.35);
     stroke-width: 1;
     opacity: 0;
     pointer-events: none;
@@ -283,7 +283,7 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
     opacity: 1;
   }
   .cf :global(.cf-hit:focus-visible) {
-    fill: rgba(255, 255, 255, 0.04);
+    fill: rgb(var(--ink-rgb, 255 255 255) / 0.04);
   }
 
   /* ── Tooltip ─────────────────────────────────────────── */
@@ -301,8 +301,8 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
     max-width: 16rem;
     padding: 0.55rem 0.7rem;
     border-radius: var(--r-sm, 8px);
-    background: rgba(12, 12, 14, 0.94);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgb(var(--paper-rgb, 12 12 14) / 0.96);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
     font-size: 0.75rem;
     color: var(--c-text-1, #fff);
@@ -359,7 +359,7 @@ const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
   .cf__data td {
     padding: 0.4rem 0.6rem;
     text-align: right;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     white-space: nowrap;
   }
   .cf__data th:first-child { text-align: left; }

package/src/components/lib/charts/DonutChart.astro

@@ -48,9 +48,9 @@ const chartConfig = {
 
 <style>
   .premium-chart-card {
-    background: rgba(255, 255, 255, 0.03);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 24px);
     padding: var(--sp-6, 24px);
     width: 100%;

package/src/components/lib/charts/DumbbellChart.astro

@@ -82,7 +82,7 @@ const fmt = (v: number) => formatValue(v, prefix, suffix);
           data-tip-title={it.label} data-tip={`${ca}::${aLabel}: ${fmt(it.a)}|${cb}::${bLabel}: ${fmt(it.b)}|Δ ${fmt(it.b - it.a)}`}>
           <rect x={m.l} y={cy - rowH / 2} width={W - m.l - m.r} height={rowH} fill="transparent" />
           <text class="cf-label" x={m.l - 10} y={cy + 4} text-anchor="end">{it.label}</text>
-          <line x1={x(it.a)} x2={x(it.b)} y1={cy} y2={cy} stroke="rgba(255,255,255,0.22)" stroke-width="4" stroke-linecap="round" />
+          <line x1={x(it.a)} x2={x(it.b)} y1={cy} y2={cy} stroke="rgb(var(--ink-rgb, 255 255 255) / 0.22)" stroke-width="4" stroke-linecap="round" />
           <circle cx={x(it.a)} cy={cy} r="7" fill={ca} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
           <circle cx={x(it.b)} cy={cy} r="7" fill={cb} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
         </g>

package/src/components/lib/charts/ForecastLineChart.astro

@@ -97,7 +97,7 @@ const fmt = (v: number) => formatValue(v, prefix, suffix);
     ))}
     {categories.map((c, i) => <text class="cf-label" x={x(i)} y={H - 8} text-anchor="middle">{c}</text>)}
 
-    <rect x={anchor[0]} y={m.t} width={W - m.r - anchor[0]} height={H - m.t - m.b} fill="rgba(255,255,255,0.025)" aria-hidden="true" />
+    <rect x={anchor[0]} y={m.t} width={W - m.r - anchor[0]} height={H - m.t - m.b} fill="rgb(var(--ink-rgb, 255 255 255) / 0.025)" aria-hidden="true" />
     <line class="cf-axis" x1={anchor[0]} x2={anchor[0]} y1={m.t} y2={H - m.b} />
     <text class="cf-label" x={anchor[0] + 6} y={m.t + 10}>Today</text>
 

package/src/components/lib/charts/GaugeChart.astro

@@ -64,7 +64,7 @@ const fmt = (v: number) => formatValue(v, prefix, suffix);
 >
   <div class="gc" role="meter" aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} aria-label={`${title}: ${fmt(value)} ${label}, ${(pct * 100).toFixed(0)}%`}>
     <svg viewBox={`0 0 ${W} ${H}`} aria-hidden="true">
-      <path d={arcStroke(cx, cy, r, a0, a1)} fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="18" stroke-linecap="round" />
+      <path d={arcStroke(cx, cy, r, a0, a1)} fill="none" stroke="rgb(var(--ink-rgb, 255 255 255) / 0.07)" stroke-width="18" stroke-linecap="round" />
       {pct > 0 && <path class="gc__arc" d={arcStroke(cx, cy, r, a0, a0 + Math.PI * pct)} fill="none" stroke={color} stroke-width="18" stroke-linecap="round" />}
       <text class="cf-label" x={cx - r} y={H - 2} text-anchor="middle">0</text>
       <text class="cf-label" x={cx + r} y={H - 2} text-anchor="middle">{fmt(max)}</text>

package/src/components/lib/charts/HeatmapChart.astro

@@ -117,7 +117,7 @@ const fill = (v: number) => `color-mix(in srgb, ${color} ${Math.round(12 + t(v)
   }
   .hm__cell:hover { transform: scale(1.06); }
   .hm__cell:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 1px; }
-  .hm__v { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
+  .hm__v { font-size: 0.6875rem; color: rgb(var(--ink-rgb, 255 255 255) / 0.7); font-variant-numeric: tabular-nums; }
   .hm__v--strong { color: #fff; font-weight: 650; }
   .hm__scale {
     display: flex;

package/src/components/lib/charts/HorizontalBarChart.astro

@@ -104,7 +104,7 @@ const fmt = (v: number) => formatValue(v, prefix, suffix);
   }
   .hb__row:hover,
   .hb__row:focus-visible {
-    background: rgba(255, 255, 255, 0.04);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
   }
   .hb__row:focus-visible {
     outline: 2px solid var(--c-primary-light, #d4a017);
@@ -120,7 +120,7 @@ const fmt = (v: number) => formatValue(v, prefix, suffix);
   .hb__track {
     height: 10px;
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
     overflow: hidden;
   }
   .hb__bar {

package/src/components/lib/charts/KpiStatTile.astro

@@ -75,13 +75,13 @@ const good = invert ? !up : up;
     transition: border-color 0.25s ease, transform 0.25s ease;
   }
   .kpi--glass {
-    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.05), rgb(var(--ink-rgb, 255 255 255) / 0.015));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
     backdrop-filter: blur(14px);
   }
-  .kpi--solid { background: var(--chart-surface, #0d0d0f); border: 1px solid rgba(255, 255, 255, 0.08); }
+  .kpi--solid { background: var(--chart-surface, #0d0d0f); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); }
   .kpi--ghost { background: transparent; border: 1px solid transparent; padding-inline: 0; }
-  .kpi--glass:hover, .kpi--solid:hover { border-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
+  .kpi--glass:hover, .kpi--solid:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.16); transform: translateY(-2px); }
   .kpi--sm { --kpi-pad: var(--sp-4, 1rem); --kpi-val: 1.5rem; }
   .kpi--lg { --kpi-pad: var(--sp-8, 2rem); --kpi-val: 2.5rem; }
   .kpi__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }

package/src/components/lib/charts/LinearProgressGauge.astro

@@ -18,7 +18,7 @@ const {
     { label: 'SSR Execution', value: 45, color: '#d4a017' },
     { label: 'Asset Caching', value: 25, color: '#38bdf8' },
     { label: 'Edge Worker', value: 15, color: '#a855f7' },
-    { label: 'Free Headroom', value: 15, color: 'rgba(255,255,255,0.1)' },
+    { label: 'Free Headroom', value: 15, color: 'rgb(var(--ink-rgb, 255 255 255) / 0.1)' },
   ],
   total = '100%',
 } = Astro.props;
@@ -64,9 +64,9 @@ const totalSum = segments.reduce((acc, s) => acc + s.value, 0) || 100;
     width: 100%;
     max-width: 440px;
     padding: var(--sp-6, 1.5rem);
-    background: rgba(255, 255, 255, 0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 20px);
     font-family: var(--font-sans, system-ui, sans-serif);
   }
@@ -94,7 +94,7 @@ const totalSum = segments.reduce((acc, s) => acc + s.value, 0) || 100;
     height: 10px;
     border-radius: var(--r-full, 9999px);
     overflow: hidden;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
   }
 

package/src/components/lib/charts/MetricDeltaTable.astro

@@ -101,16 +101,16 @@ const fmt = (v: number) => formatValue(v, prefix, suffix, false);
   .md__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
   .md__table th, .md__table td {
     padding: 0.7rem 0.6rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     text-align: left;
     vertical-align: middle;
   }
   .md__table thead th { font-size: 0.6875rem; font-weight: 600; color: var(--c-text-3, #8a8a8a); text-transform: uppercase; letter-spacing: 0.04em; }
   .md__table tbody tr { transition: background 0.2s ease; }
-  .md__table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
+  .md__table tbody tr:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.03); }
   .md__table tbody th { font-weight: 500; min-width: 9rem; }
   .md__label { display: block; color: var(--c-text-1, #fff); margin-bottom: 0.35rem; }
-  .md__bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
+  .md__bar { display: block; height: 4px; border-radius: 2px; background: rgb(var(--ink-rgb, 255 255 255) / 0.05); overflow: hidden; }
   .md__bar span { display: block; height: 100%; border-radius: 2px; }
   .md__num { text-align: right !important; white-space: nowrap; color: var(--c-text-2, #a3a3a3); }
   .md__strong { color: var(--c-text-1, #fff); font-weight: 650; }

package/src/components/lib/charts/RadarMetricChart.astro

@@ -112,9 +112,9 @@ const dataPoints = data
     flex-direction: column;
     align-items: center;
     padding: var(--sp-6, 1.5rem);
-    background: rgba(255, 255, 255, 0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 24px);
     width: 100%;
     max-width: fit-content;
@@ -136,12 +136,12 @@ const dataPoints = data
 
   .radar-web {
     fill: none;
-    stroke: rgba(255, 255, 255, 0.08);
+    stroke: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     stroke-width: 1;
   }
 
   .radar-spoke {
-    stroke: rgba(255, 255, 255, 0.08);
+    stroke: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     stroke-width: 1;
   }
 

package/src/components/lib/charts/RadialBarChart.astro

@@ -67,7 +67,7 @@ const rings = items.slice(0, 8).map((it, i) => {
       {rings.map((r) => (
         <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${r.label}: ${Math.round(r.pct * 100)}%`}
           data-tip-title={r.label} data-tip={`${r.color}::${r.value}${r.max ? ` / ${r.max}` : '%'}`}>
-          <path d={arcStroke(cx, cy, r.r, start, start + sweepRad)} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width={stroke} stroke-linecap="round" />
+          <path d={arcStroke(cx, cy, r.r, start, start + sweepRad)} fill="none" stroke="rgb(var(--ink-rgb, 255 255 255) / 0.06)" stroke-width={stroke} stroke-linecap="round" />
           {r.pct > 0 && (
             <path class="rb__arc" d={arcStroke(cx, cy, r.r, start, start + sweepRad * r.pct)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" />
           )}

package/src/components/lib/charts/RetentionCohortTable.astro

@@ -114,10 +114,10 @@ const avg = cols.map((_, i) => {
     padding: 0.55rem 0.4rem;
     text-align: center;
     border-radius: 4px;
-    color: rgba(255, 255, 255, 0.78);
+    color: rgb(var(--ink-rgb, 255 255 255) / 0.78);
   }
   .rc__cell[data-strong] { color: #fff; font-weight: 650; }
-  .rc__empty { background: rgba(255, 255, 255, 0.02); border-radius: 4px; }
+  .rc__empty { background: rgb(var(--ink-rgb, 255 255 255) / 0.02); border-radius: 4px; }
   .rc__avg { text-align: center; color: var(--c-text-1, #fff); font-weight: 600; padding-top: 0.5rem; }
   .sr-only {
     position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

package/src/components/lib/charts/TreemapChart.astro

@@ -84,7 +84,7 @@ const GAP = 2;
           {showLabel && (
             <>
               <text x={r.x + 10} y={r.y + 20} fill="#fff" font-size="12" font-weight="650">{it.label}</text>
-              <text x={r.x + 10} y={r.y + 36} fill="rgba(255,255,255,0.8)" font-size="11">{fmt(it.value)}</text>
+              <text x={r.x + 10} y={r.y + 36} fill="rgb(var(--ink-rgb, 255 255 255) / 0.8)" font-size="11">{fmt(it.value)}</text>
             </>
           )}
         </g>