# st-core.fscss v2: Full Release Notes & Technical Reference
**Pure CSS statistical dashboard components. No JavaScript dependencies. No SVG. No canvas.**
st-core.fscss is a CSS visualization system built on the FSCSS ecosystem. It renders area charts, multi-line charts, stat cards, and dashboard chrome using nothing but `clip-path: polygon()`, `repeating-linear-gradient()`, and CSS custom properties. This post covers the full v2 release: what changed, every mixin the library ships, and how the underlying array-to-polygon math actually works.
MIT licensed. Repo: [github.com/fscss-ttr/st-core.fscss](https://github.com/fscss-ttr/st-core.fscss). Requires FSCSS v1.2.3+.
---
## What's New in v2
v1 charts were locked to exactly 8 fixed data points, mapped onto hardcoded variables `--st-p1` through `--st-p8`. v2 removes that ceiling:
- **Dynamic datasets (`@arr`)** — pass arrays of any length: 5 points, 12, 50+.
- **Automatic X-spacing** — points distribute evenly across `0%` to `100%` based on `array.length`, no manual positioning.
- **Inline normalization** — natural 0–100 values get normalized to CSS percentages directly inside the style calculations.
- **Dual-edge polygon polyline** — line strokes are drawn as a closed top-to-bottom band rather than a hack around `border`, giving precise stroke rendering.
The v1 API (`@st-chart`, 8 named params) is still available for anyone with a genuinely fixed 8-point series who doesn't want to declare an array.
---
## Installation
**Runtime / CDN mode** — for prototyping, drop this in your ``:
```html
```
Then import the module in your `
```
### Multi-line, multi-area with independent series
```css
@arr seriesA[30, 50, 75, 40, 85, 60]
@arr seriesB[10, 25, 45, 20, 55, 30]
@st-chart-fill(.fill-a, seriesA)
@st-chart-line(.line-a, seriesA)
@st-chart-fill(.fill-b, seriesB)
@st-chart-line(.line-b, seriesB)
.chart {
@st-chart-points(seriesA)
position: relative;
height: 220px;
width: 100%;
background: var(--st-bg);
}
.fill-a { @st-chart-points(seriesA) opacity: 0.6; --st-accent: #9d7eff; }
.line-a { @st-chart-points(seriesA) --st-accent: #9d7eff; }
/* .fill-b / .line-b MUST set their own points — otherwise they
inherit .chart's seriesA values and render the wrong data */
.fill-b { @st-chart-points(seriesB) opacity: 0.3; --st-accent: #4fffb0; }
.line-b { @st-chart-points(seriesB) --st-accent: #4fffb0; }
```
```html
```
### Full mobile dashboard frame
```html
TOTAL EXPENSES
$1,326.03
+5.1% vs last week
MonTueWedThuFriSat
```
---
## The One Rule That Ties It Together
| Concern | Who owns it | Depends on `--st-p*`? |
|---|---|---|
| X-position (horizontal spacing) | Computed inline per mixin, from array **length** | No |
| Y-position (vertical value) | `var(--st-p{i})`, written only by `@st-chart-points` | Yes |
| Shape (fill / line / dot) | `@st-chart-fill` / `@st-chart-line` / `@st-chart-dots` | Reads, never writes |
| Values | `@st-chart-points(array)` | Writes, on whichever element calls it |
Every renderer only needs the array to know *how many* points to loop over. The actual values reach the page exclusively through `--st-p1`…`--st-p{n}`, inherited down the DOM like any custom property. That's the entire reason a multi-series chart needs `@st-chart-points(seriesN)` called explicitly on each series' own element: skip it, and that element silently inherits whatever its nearest ancestor last set.
---
## Design Token Reference
| Variable | Default | Usage |
|---|---|---|
| `--st-bg` | `#0e0d14` | Page body background |
| `--st-surface` | `#161422` | Surface / container background |
| `--st-card` | `#1c1a2e` | Card component background |
| `--st-accent` | `#9d7eff` | Primary brand accent |
| `--st-accent-2` | `#c4a8ff` | Secondary accent gradient |
| `--st-green` | `#4fffb0` | Positive delta state |
| `--st-red` | `#ff5e7d` | Negative delta state |
| `--st-text` | `#e8e3ff` | Primary text color |
| `--st-muted` | `#6b6488` | Muted labels / grid stroke |
| `--st-radius-xl` | `40px` | Outer device frame radius |
| `--st-radius-lg` | `16px` | Component card radius |
| `--st-chart-line-width` | `1.5px` | Line stroke thickness |
---
## Performance & SEO
- **Zero hydration overhead** — pure CSS charts need no JS initialization before rendering.
- **Tiny compiled size** — lightweight CSS shapes and variables, around 0.8kb minified.
- **GPU-accelerated transitions** — dataset updates through CSS custom properties run on the browser's compositor thread.
---
MIT licensed, built with [FSCSS](https://fscss.devtem.org). Repo and contributions: [github.com/fscss-ttr/st-core.fscss](https://github.com/fscss-ttr/st-core.fscss).