Appearance

Changelog ​

All notable changes to remCSS v2 are documented here.

Format follows Keep a Changelog. Versioning follows Semantic Versioning.

v1 (SCSS legacy) is preserved on the legacy branch.

2.0.0 — 2026-05-12 ​

Complete rewrite of remCSS from SCSS to pure CSS, targeting the 2026 web platform.

Framework core ​

  • src/remcss.css — main entry with @layer base, components, utilities order declaration; imports all tokens, base, component and utility layers
  • src/tokens/scale.css — --phi: 1.618033988749895 + --step-n3 through --step-12 computed as calc() chains from 1rem × φ; root font-size 62.5% so 1rem = 10px at the browser default
  • src/tokens/colors.css — full oklch() palette; light-dark() semantic tokens; 12 named families (red → pink) × 6 lightness steps (10/30/50/70/90/95); 3 dynamic palette slots via color-mix()
  • src/tokens/typography.css — fluid clamp() text tokens --text-xs → --text-5xl, font stack, GR-derived line-height tokens
  • src/base/reset.css — modern CSS reset in @layer base; Golden Ratio heading and block margin rhythm
  • src/components/buttons.css — .button with outline/ghost/danger variants, sm/lg sizes, disabled + aria-busy loading state, .button-group
  • src/components/forms.css — .form, .field, .label, .input, .check-group; error state via :has(:invalid:not(:placeholder-shown))
  • src/components/table.css — .table, .table-striped, .table-hover, .table-responsive (container-query card stacking)
  • src/components/grid.css — .grid-auto, .grid-sidebar, .stack, .cluster
  • src/utilities/spacing.css — .m-*, .p-*, .mt-*, .mb-*, .my-*, .mx-*, .pt-*, .pb-*, .py-*, .px-*, .gap-* on steps n3–8
  • src/utilities/flex.css — .flex, .flex-wrap, .flex-col, .items-*, .justify-*, .flex-1/auto/none
  • src/utilities/grid-utils.css — .grid, .cols-2/3/4, .grid-dense
  • src/utilities/colors.css — .text-{name}, .bg-{name}, .border-{name} for accent + 12 named families; semantic aliases; .text-muted
  • scripts/gen-palette.js — CLI tool: node scripts/gen-palette.js coral "oklch(65% 0.19 22)"

Build system ​

  • Vite 8 — library mode; src/index.js → dist/remcss.css; no JS runtime in output
  • Lightning CSS 1.32 — css.transformer: 'lightningcss'; Baseline 2023 browser targets
  • scripts/sync-version.js — npm version lifecycle hook; syncs version into docs/.vitepress/config.js and test/index.html

Tests ​

  • Vitest 4 — tests/unit/no-px.test.js; 19 assertions enforcing zero px in all authored CSS source files
  • Playwright 1.60 — tests/visual/components.spec.js; screenshot comparison for light + dark mode

Docs (VitePress 1.6) ​

  • Full guide site in /docs: Getting Started, Golden Ratio (KaTeX math), CSS Layers, Color System, Fluid Typography, Components, Utilities, Changelog
  • Animated SVG logo (docs/public/logo.svg) — calligraphic wordmark; 6 letter subpaths revealed via stroke-dashoffset SMIL animation (r → e → m → C → S → S, 0.45 s stagger, ease-in-out, total ≈ 3 s)
  • Brand theme in docs/.vitepress/theme/custom.css; brand color oklch(62% 0.22 27) = #ee3533; navbar logo height: 56px, --vp-nav-height: 80px, .curtain offset synced to nav height
  • Footer with GitHub repo link and dstN attribution
  • Vercel deployment config (vercel.json)

Config ​

  • .nvmrc — Node 24 (engines: { node: ">=24.0.0" })
  • .prettierrc — tabs, singleQuote, semi, trailingComma: all
  • package.json — @dstn/remcss, exports: "./dist/remcss.css"