v1.6.1 — Themeable border-radius, docs updates

ply v1.6.1

New Features

Themeable border-radius (--ply-border-radius)

A new --ply-border-radius CSS custom property controls the global border-radius across all components. Default value is 0.25rem. Override it in any custom theme to change the shape language of the entire UI:

[data-theme="sharp"] { --ply-border-radius: 0; }
[data-theme="soft"]  { --ply-border-radius: 0.5rem; }

Components updated: inputs, fieldsets, selects, <details>, <dialog>, <progress>, <meter>, notifications, livesearch/typeahead, multiselect, input groups (prepend/append), btn-group edges, nav dropdowns, <pre> blocks, and all .border-radius / .border-radius-lg / .border-radius-xl helper classes.

The .border-radius-lg and .border-radius-xl classes now scale relative to the base value (3x and 6x respectively) instead of using fixed sizes.

--ply-btn-border-radius continues to control button border-radius independently (default 2rem pill shape).

Documentation Updates

• VPAT — Updated product version to v1.6.0, added Lighthouse audit scores (95–96/100), corrected dark mode link color contrast values (#0353e9 light, #4589ff dark), updated custom properties count to 120+
• llms.txt — Corrected class count (458) and custom properties count (120+)
• llms-full.txt — Added --ply-border-radius to theme example, key variables list, and border-radius class descriptions
• ply-classes.json — Added --ply-border-radius to themeMinimal, themeRecommended, themeTemplate, and customProperties.borders. Updated border-radius, border-radius-lg, border-radius-xl class descriptions
• PLY.md / CLAUDE.md / README.md — Theme examples updated with --ply-border-radius
• snippets/custom-theme.html — Both theme blocks and reference table updated
• Docs site — colors.astro warm theme example and utilities.astro border-radius descriptions updated

v1.5.0

ply v1.5.0

New Features

Theme-Aware Color Surfaces & Borders

20 new CSS custom properties for building colored cards, badges, and alerts that work in both light and dark mode. Available for all 10 palette colors: blue, red, green, yellow, indigo, purple, pink, orange, teal, cyan.

Variable	Light Mode	Dark Mode
--ply-{color}-surface	Pastel background	Dark muted background
--ply-{color}-border	Light tint border	Medium dark border

Usage:

.card-info {
  background: var(--ply-blue-surface);
  border: 1px solid var(--ply-blue-border);
  color: var(--ply-blue-1);
}

Pair with existing --ply-{color}-1 through -3 palette variables for text. Surface values are pastel in light mode and dark muted in dark mode, so contrast is maintained automatically.

New properties added to _colors.scss:

• --ply-blue-surface, --ply-red-surface, --ply-green-surface, --ply-yellow-surface, --ply-indigo-surface, --ply-purple-surface, --ply-pink-surface, --ply-orange-surface, --ply-teal-surface, --ply-cyan-surface
• --ply-blue-border, --ply-red-border, --ply-green-border, --ply-yellow-border, --ply-indigo-border, --ply-purple-border, --ply-pink-border, --ply-orange-border, --ply-teal-border, --ply-cyan-border

Documentation

• Added "Color Surfaces" section to PLY.md with variable reference table and code examples
• Added colorSurfaces category to ply-classes.json with all 20 new properties
• Updated custom property count from "60+" to "120+" across all docs (llms.txt, llms-full.txt, CLAUDE.md, VPAT.md, README.md)
• Fixed bundle size from "~20KB" to "~21KB" in llms.txt and llms-full.txt
• Added color palette, color surfaces, and Sass palette documentation to the docs site colors page

v1.4.1

ply v1.4.1

Documentation updates

• Updated ply-classes.json: split class description now says "Remove gap" instead of "Remove gutters"
• Updated ply-classes.json: All gap helper descriptions (gap-xs through gap-xxl) now note they work on units-row to override the default 1rem gap
• Updated release skill to include a documentation review step before writing release notes

v1.4.0

ply v1.4.0

Grid refactored to CSS gap

The units-row grid system has been refactored from the traditional negative-margin/padding gutter technique to native CSS gap. This is the main change in this release.

What changed

• units-row now uses gap: 1rem instead of margin: 0 -0.5rem for column spacing
• [class*='unit-'] no longer has padding: 0 0.5rem — spacing is handled entirely by gap
• max-width removed from all unit classes — flex-basis with calc() handles sizing, flex-shrink handles overflow
• .split simplified to --units-gap: 0px; gap: 0 instead of zeroing out child padding
• Unit flex-basis values now use calc(percentage - var(--units-gap) * factor) to account for gap space, ensuring units always fit their row without wrapping

Gap helpers now work on units-row

Gap helper classes (gap-xs, gap-sm, gap, gap-lg, gap-xl, gap-xxl) now set the --units-gap CSS custom property, which the unit calc() formulas reference. This means you can customize column spacing:

<div class="units-row gap-lg">
  <div class="unit-50">…</div>
  <div class="unit-50">…</div>
</div>

The units automatically adjust their width to accommodate the new gap size.

Affected files

• src/scss/components/_grid.scss — core grid refactor
• src/scss/components/_helpers.scss — gap utilities updated to set --units-gap
• src/scss/components/_container-queries.scss — container-scoped units updated to use gap-aware calc()

Migration

No markup changes required. Existing units-row layouts work identically — the visual spacing (1rem between columns) is preserved. The only behavioral difference: gap helpers now compose with units-row instead of causing overflow.

v1.3.2

ply v1.3.2

Documentation & Metadata

llms.txt / llms-full.txt — package name corrected

llms.txt and llms-full.txt were still referencing the old plygrid package name. Both files now correctly reference ply-css throughout — install commands, @use paths, and CDN links.

Snippets — CDN URLs updated

Three snippet files had stale CDN links pointing to plygrid@1. Updated to ply-css@1:

• snippets/accessible-drag-and-drop.html
• snippets/responsive-header.html
• snippets/starter-page.html (also updated the inline install example)

Docs site — llms.txt listed on AI Agents page

Added a "Discovery" section to /docs/ai-agents on the marketing site linking to plycss.com/llms.txt and plycss.com/llms-full.txt with a brief explanation of what each file is for.

---

No framework CSS changes. No breaking changes.

v1.3.0

ply v1.3.0

Breaking changes

Package renamed from plygrid to plycss

The npm package is now published as plycss. Update your dependency:

npm install plycss

Update any Sass imports:

/* Before */
@use "plygrid/src/scss/ply" as *;
@use "plygrid/src/scss/components/colors" as colors;

/* After */
@use "plycss/src/scss/ply" as *;
@use "plycss/src/scss/components/colors" as colors;

Update any CDN links:

<!-- Before -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plygrid@1/dist/css/ply.min.css">

<!-- After -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plycss@1/dist/css/ply.min.css">

The plygrid package is deprecated and will no longer receive updates. All future releases will be published to plycss.

---

Bug fixes

.success text color — WCAG AA contrast fix (_colors.scss)

$color-green was darkened from #2c9f42 to #1a7a32. The previous value produced approximately 3.2:1 contrast on white — below the WCAG AA minimum of 4.5:1 for normal-weight text. The new value achieves 4.87:1 and passes AA.

Affected: .success, label success variant, multi-step form success state, and valid input borders/focus rings.

Remove incorrect var(--ply-btn-default-bg) fallbacks (_buttons.scss)

Removed the hardcoded #0f62fe fallback from all var(--ply-btn-default-bg, #0f62fe) calls in .btn-primary, .btn-ghost, and .btn-primary-outline. The fallback baked in the light-mode primary blue, which fails WCAG AA contrast (4.14:1) against dark mode backgrounds (#161616). Since --ply-btn-default-bg is always defined in :root for both light and dark modes, no fallback is needed — and an incorrect one is worse than none.

Commits

• fb18005 v1.3.0 — Rename to ply-css, WCAG AA green contrast fix, remove incorrect btn fallbacks
• ce57bd3 v1.3.0 — Rename to @plycss/ply, WCAG AA green contrast fix, remove incorrect btn fallbacks
• cac8a62 v1.3.0 — Rename to plycss, WCAG AA green contrast fix, remove incorrect btn fallbacks
• 4e6be23 update submodule — v1.2.3

npm install ply-css@1.3.0

v1.2.3

ply v1.2.3

DRY refactor, core utility promotion, and accessibility improvements. Smaller bundle despite more classes.

Bug Fixes

• --ply-bg-glass missing from explicit dark mode — The glass background variable was only set in prefers-color-scheme: dark, not in [data-theme="dark"]. Now both paths use a shared @mixin dark-theme.
• .padding-left was doubled — Previously set to $padding * 2 instead of matching the other padding directions. Now uses var(--ply-space-md, 0.75rem) like .padding-top, .padding-right, and .padding-bottom.

Improvements

Button primary color update

• Light mode primary buttons shifted from #0f62fe to #0353e9 (with adjusted hover/active states)
• Dark mode primary buttons shifted from #0f62fe to #4589ff for better contrast on dark backgrounds (hover #619bff, active #73a6ff)

Core bundle promotion

Many utility classes moved from _helpers.scss (full bundle only) into _helpers-core.scss, available in all bundles including ply-core.min.css:

• Position: .full-screen, .fixed, .absolute, .relative, .static, .sticky
• Display: .display-flex, .display-block, .display-inline-block, .display-grid, .display-none
• Spacing: .margin-*, .padding-*, scale classes (-xs through -xxl), resets (.no-margin, .no-padding, .no-spacing)
• Borders: .border, .border-top, .border-bottom, .no-border
• Width: .width-* classes generated from $width-scale map
• Typography: .text-xs through .text-5xl, .font-normal/medium/semibold/bold, .leading-*, alignment, .bold, .italic, .uppercase, .nowrap
• Colors: .bg-white, .bg-surface, .bg-black, .color-black, .color-white
• UI helpers: .group/.clearfix, .hide, .sr-only, .hide-on-desktop, .hide-on-mobile, .flat-list, .border-radius, .req/.required, .error, .success

Themeable spacing

Margin and padding utility classes now use CSS custom properties (var(--ply-space-md), var(--ply-space-lg)) instead of Sass variables, making them overridable in custom themes.

Expanded high-contrast mode

Additional variables overridden for prefers-contrast: more: --ply-color-code-bg, --ply-color-code-border, --ply-color-focus, --ply-shadow-1/2/3 (set to none), --ply-layer-1/2/3.

DRY source refactoring

Repetitive SCSS replaced with Sass maps, @each loops, and mixins — no change to compiled output:

• Colors — Dark theme variables extracted to @mixin dark-theme; high-contrast overrides to @mixin high-contrast-light and @mixin high-contrast-dark
• Cursors — 28 cursor classes generated from $cursor-map + @each loop
• Notifications — Alert color variants generated from $alert-colors map
• Helpers — Opacity scale classes generated from $opacity-scale map

Removed obsolete vendor prefixes

• -khtml-user-select: none and -ms-user-select: none from accordion
• -ms-overflow-style: none from responsive navigation

New utility

• .bg-surface — Alias for .bg-white, maps to var(--ply-bg-surface)

Documentation

• Added Borders subsection to PLY.md documenting border, border-radius, and circle classes

Stats

• Bundle size: 20KB → 18.5KB gzip
• Core bundle: 16KB → 15KB gzip
• Classes: 423 → 457
• Custom properties: 60+ → 100+

v1.2.2

ply v1.2.2

Bug fix release addressing regressions introduced in v1.2.0.

Bug Fixes

• .padding-left — was applying double padding ($padding * 2), now uses $padding consistent with other directional padding classes
• .blocks-* — added margin: 0 reset to prevent unexpected list margins on .blocks-2 through .blocks-6
• .units-row — split into its own dedicated rule block; previously shared selector with [class*='unit-'] which caused specificity issues
• Toast messages (.message, .tools-message) — simplified to minimal fixed-position toast; removed unused colored variants (-black, -blue, -red, -green, -yellow) and display: none default

Improvements

• Primary button colors — updated fallback from #0353e9 to #0f62fe across light and dark modes for consistency; hover/active states updated accordingly
• .flex-wrap — new utility class for flex-wrap: wrap
• --ply-nav-stacked-radius — new custom property for stacked nav item border-radius (defaults to 0.25rem)

Commits

• 0344f7c v1.2.2 — Bug fixes for v1.2.0 regressions
• fd2daf0 update submodule — v1.2.1

npm install plygrid@1.2.2

v1.2.1

ply v1.2.1

Patch release to sync ply-classes.json version with package.json.

Changes

• ply-classes.json version synced from 1.0.10 → 1.2.1
• No functional CSS changes

Commits

• • 74fc53a v1.2.1 — Sync ply-classes.json version
• 10f1cce update submodule — v1.2.0

npm install plygrid@1.2.1

v1.2.0

ply v1.2.0

Breaking Changes

All legacy class aliases have been removed. If your markup uses any of the following, update to the canonical form:

Removed	Use instead
display--flex, display--block, etc.	display-flex, display-block
navbar--centered, navbar--thick, etc.	navbar-centered, navbar-thick
border-top--thick, border--thick, etc.	border-top-thick, border-thick
top-margin, left-margin, etc.	margin-top, margin-left
top-padding, left-padding, etc.	padding-top, padding-left
top-margin-extra, margin-top--extra, etc.	margin-top-extra
top-padding-extra, padding-top--extra, etc.	padding-top-extra
padding-xs-top, padding-sm-left, etc.	padding-top-xs, padding-left-sm
btn-big, btn-small, btn-smaller	btn-lg, btn-sm, btn-xs
input-big, input-small, input-smaller	input-lg, input-sm, input-xs
background-white, background-black	bg-white, bg-black
text-centered	text-center
capitalized	uppercase

Spacing Scale

The spacing scale is now consistent and fully themeable via CSS custom properties:

Token	Default
--ply-space-xs	0.25rem
--ply-space-sm	0.5rem
--ply-space-md	0.75rem
--ply-space-lg	1.5rem
--ply-space-xl	2rem (was 3rem)
--ply-space-xxl	3rem (new)

All margin-*, padding-*, and gap-* scale classes now use var(--ply-space-*) with hardcoded fallbacks — override them in a custom theme and every spacing utility responds.

New xxl tier across all spacing utilities: gap-xxl, margin-xxl, margin-top-xxl, margin-right-xxl, margin-bottom-xxl, margin-left-xxl, padding-xxl, padding-top-xxl, padding-right-xxl, padding-bottom-xxl, padding-left-xxl.

Sass Loops

Width, responsive-width, and height utilities are now generated from a shared $width-scale map in _variables.scss. The grid's responsive unit scale uses the same map. One source of truth, ~340 fewer hand-typed lines.

Placeholder Selectors Removed

All 248 %placeholder selectors have been stripped. The 3 that were actually used (%cursor-pointer, %border-radius, %cursor-not-allowed) were inlined at their call sites. Compiled CSS output is functionally identical — no placeholder artifacts remain in source.

CLAUDE.md Included in Package

CLAUDE.md now ships with the npm package, giving AI agents the full class reference and usage rules when working in projects that install ply.