npm - ply-css - Versions diffs - 1.4.0 → 1.5.0 - Mend

ply-css 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CLAUDE.md +1 -1
package/PLY.md +32 -5
package/README.md +2 -2
package/dist/css/ply-core.css +60 -0
package/dist/css/ply-core.min.css +1 -1
package/dist/css/ply-essentials.min.css +1 -1
package/dist/css/ply-helpers.min.css +1 -1
package/dist/css/ply.css +60 -0
package/dist/css/ply.min.css +1 -1
package/dist/css/styles.css +60 -0
package/dist/css/styles.min.css +1 -1
package/llms-full.txt +4 -4
package/llms.txt +2 -2
package/package.json +1 -1
package/ply-classes.json +42 -19
package/src/scss/components/_colors.scss +48 -0

package/llms-full.txt CHANGED Viewed

@@ -1,6 +1,6 @@
 # plycss (ply) — Complete Documentation
-> ply is a ratio-based, AI-ready CSS framework with built-in dark mode, WCAG 2.1 AA accessibility, and a small footprint (~20KB gzipped). 421 utility classes, 60+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step. Install via npm as `plycss` or use the CDN.
+> ply is a ratio-based, AI-ready CSS framework with built-in dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 457 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step. Install via npm as `plycss` or use the CDN.
 ---
@@ -41,7 +41,7 @@ Core bundle (no labels, dropdowns, loaders, print):
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply-core.min.css">
 ```
-Bundles: `ply.min.css` (~20KB gzip, everything), `ply-core.min.css` (~17KB, grid+buttons+forms+nav+alerts+tables+typography+helpers), `ply-essentials.min.css` (~6KB, grid+helpers), `ply-helpers.min.css` (~4KB, helpers only).
+Bundles: `ply.min.css` (~21KB gzip, everything), `ply-core.min.css` (~17KB, grid+buttons+forms+nav+alerts+tables+typography+helpers), `ply-essentials.min.css` (~7KB, grid+helpers), `ply-helpers.min.css` (~5KB, helpers only).
 ---
@@ -262,7 +262,7 @@ Override `--ply-*` custom properties to theme the entire app with one CSS block:
 <html data-theme="brand">
 ```
-Setting any `data-theme` value prevents auto dark mode from interfering. All 60+ `--ply-*` variables are listed in the `customProperties` section of `ply-classes.json`.
+Setting any `data-theme` value prevents auto dark mode from interfering. All 120+ `--ply-*` variables are listed in the `customProperties` section of `ply-classes.json`.
 **Important:** If you override colors, verify 4.5:1 contrast for normal text and 3:1 for large text (18px bold / 24px) and UI components (WCAG 1.4.3).
@@ -799,7 +799,7 @@ ply is built for AI code generation:
 1. **Single-dash class names** read like English — `units-row`, `equal-height`, `padding`, `border-radius`
 2. **No abbreviation guessing** — `padding-lg` not `pl-6`, `margin-top` not `mt-4`
-3. **421 documented classes** in `ply-classes.json` — machine-readable reference
+3. **457 documented classes** in `ply-classes.json` — machine-readable reference
 4. **Semantic HTML first** — auto-styled elements reduce class clutter
 5. **AI-friendly aliases** — `btn-lg`/`btn-big`, `btn-sm`/`btn-small`, `alert`/`tools-alert` all work

package/llms.txt CHANGED Viewed

@@ -1,13 +1,13 @@
 # plycss (ply)
-> ply is a ratio-based, AI-ready CSS framework with dark mode, WCAG 2.1 AA accessibility, and a small footprint (~20KB gzipped). 421 utility classes, 60+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step.
+> ply is a ratio-based, AI-ready CSS framework with dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 457 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step.
 ply is standalone — do not use Tailwind, Bootstrap, or other CSS frameworks alongside it. Class names are single-dash and human-readable: `btn-primary`, `unit-50`, `padding-lg`, `text-secondary`. Install via npm (`plycss`) or CDN.
 ## Documentation
 - [Full AI Reference (PLY.md)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/PLY.md): Complete class reference, usage rules, accessibility patterns, keyboard navigation, custom widget ARIA patterns, and code snippets
-- [Machine-Readable Class Map (ply-classes.json)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/ply-classes.json): All 421 classes, 60+ CSS custom properties, and 13 semantic elements with descriptions, categories, and examples
+- [Machine-Readable Class Map (ply-classes.json)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/ply-classes.json): All 457 classes, 120+ CSS custom properties, and 13 semantic elements with descriptions, categories, and examples
 - [VPAT 2.5 Accessibility Conformance](https://raw.githubusercontent.com/thatgibbyguy/ply/master/docs/VPAT.md): Full WCAG 2.1 Level A and AA conformance report
 ## Snippets

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "ply — A ratio-based, AI-ready CSS framework with dark mode, accessibility, and a small footprint",
   "main": "dist/css/ply.css",
   "style": "dist/css/ply.min.css",

package/ply-classes.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.5.0",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -494,7 +494,7 @@
     },
     "split": {
       "category": "grid",
-      "description": "Remove gutters from child units. Applied to units-row.",
+      "description": "Remove gap between child units. Applied to units-row.",
       "example": "<div class=\"units-row split\">...</div>"
     },
     "centered-content": {
@@ -1451,23 +1451,23 @@
     },
     "gap-xs": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: 0.25rem."
+      "description": "Gap between flex/grid children: 0.25rem. Works on units-row to override the default 1rem gap."
     },
     "gap-sm": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: 0.5rem."
+      "description": "Gap between flex/grid children: 0.5rem. Works on units-row to override the default 1rem gap."
     },
     "gap": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: 0.75rem."
+      "description": "Gap between flex/grid children: 0.75rem. Works on units-row to override the default 1rem gap."
     },
     "gap-lg": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: 1.5rem."
+      "description": "Gap between flex/grid children: 1.5rem. Works on units-row to override the default 1rem gap."
     },
     "gap-xl": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: 2rem."
+      "description": "Gap between flex/grid children: 2rem. Works on units-row to override the default 1rem gap."
     },
     "no-link-style": {
       "category": "helpers",
@@ -2379,7 +2379,7 @@
     },
     "gap-xxl": {
       "category": "helpers",
-      "description": "Gap between flex/grid children: var(--ply-space-xxl, 3rem)."
+      "description": "Gap between flex/grid children: 3rem. Works on units-row to override the default 1rem gap."
     },
     "margin-xxl": {
       "category": "helpers",
@@ -2520,16 +2520,16 @@
       "--ply-bg-yellow-active": "Yellow active. #b28600"
     },
     "palette": {
-      "--ply-blue-1 / -2 / -3": "Blue palette: base, light, pastel",
-      "--ply-red-1 / -2 / -3": "Red palette: base, light, pastel",
-      "--ply-green-1 / -2 / -3": "Green palette: base, light, pastel",
-      "--ply-yellow-1 / -2 / -3": "Yellow palette: base, light, pastel",
-      "--ply-indigo-1 / -2 / -3": "Indigo palette: base, light, pastel",
-      "--ply-purple-1 / -2 / -3": "Purple palette: base, light, pastel",
-      "--ply-pink-1 / -2 / -3": "Pink palette: base, light, pastel",
-      "--ply-orange-1 / -2 / -3": "Orange palette: base, light, pastel",
-      "--ply-teal-1 / -2 / -3": "Teal palette: base, light, pastel",
-      "--ply-cyan-1 / -2 / -3": "Cyan palette: base, light, pastel"
+      "--ply-blue-1 / -2 / -3": "Blue palette: base, darker, darkest",
+      "--ply-red-1 / -2 / -3": "Red palette: base, darker, darkest",
+      "--ply-green-1 / -2 / -3": "Green palette: base, darker, darkest",
+      "--ply-yellow-1 / -2 / -3": "Yellow palette: base, darker, darkest",
+      "--ply-indigo-1 / -2 / -3": "Indigo palette: base, darker, darkest",
+      "--ply-purple-1 / -2 / -3": "Purple palette: base, darker, darkest",
+      "--ply-pink-1 / -2 / -3": "Pink palette: base, darker, darkest",
+      "--ply-orange-1 / -2 / -3": "Orange palette: base, darker, darkest",
+      "--ply-teal-1 / -2 / -3": "Teal palette: base, darker, darkest",
+      "--ply-cyan-1 / -2 / -3": "Cyan palette: base, darker, darkest"
     },
     "spacing": {
       "--ply-space-xs": "Extra-small spacing unit. Default: 0.25rem",
@@ -2538,7 +2538,30 @@
       "--ply-space-lg": "Large spacing unit. Default: 1.5rem",
       "--ply-space-xl": "Extra-large spacing unit. Default: 2rem",
       "--ply-space-xxl": "Extra extra large spacing unit. Default: 3rem"
-    }
+    },
+    "colorSurfaces": {
+      "--ply-blue-surface": "Theme-aware blue pastel background. Light: blue pastel, Dark: dark muted blue. For cards, badges, alerts.",
+      "--ply-blue-border": "Theme-aware blue border. Light: light blue tint, Dark: medium-dark blue. For colored card borders.",
+      "--ply-red-surface": "Theme-aware red pastel background. Light: red pastel, Dark: dark muted red. For cards, badges, alerts.",
+      "--ply-red-border": "Theme-aware red border. Light: light red tint, Dark: medium-dark red. For colored card borders.",
+      "--ply-green-surface": "Theme-aware green pastel background. Light: green pastel, Dark: dark muted green. For cards, badges, alerts.",
+      "--ply-green-border": "Theme-aware green border. Light: light green tint, Dark: medium-dark green. For colored card borders.",
+      "--ply-yellow-surface": "Theme-aware yellow pastel background. Light: yellow pastel, Dark: dark muted yellow. For cards, badges, alerts.",
+      "--ply-yellow-border": "Theme-aware yellow border. Light: light yellow tint, Dark: medium-dark yellow. For colored card borders.",
+      "--ply-indigo-surface": "Theme-aware indigo pastel background. Light: indigo pastel, Dark: dark muted indigo. For cards, badges, alerts.",
+      "--ply-indigo-border": "Theme-aware indigo border. Light: light indigo tint, Dark: medium-dark indigo. For colored card borders.",
+      "--ply-purple-surface": "Theme-aware purple pastel background. Light: purple pastel, Dark: dark muted purple. For cards, badges, alerts.",
+      "--ply-purple-border": "Theme-aware purple border. Light: light purple tint, Dark: medium-dark purple. For colored card borders.",
+      "--ply-pink-surface": "Theme-aware pink pastel background. Light: pink pastel, Dark: dark muted pink. For cards, badges, alerts.",
+      "--ply-pink-border": "Theme-aware pink border. Light: light pink tint, Dark: medium-dark pink. For colored card borders.",
+      "--ply-orange-surface": "Theme-aware orange pastel background. Light: orange pastel, Dark: dark muted orange. For cards, badges, alerts.",
+      "--ply-orange-border": "Theme-aware orange border. Light: light orange tint, Dark: medium-dark orange. For colored card borders.",
+      "--ply-teal-surface": "Theme-aware teal pastel background. Light: teal pastel, Dark: dark muted teal. For cards, badges, alerts.",
+      "--ply-teal-border": "Theme-aware teal border. Light: light teal tint, Dark: medium-dark teal. For colored card borders.",
+      "--ply-cyan-surface": "Theme-aware cyan pastel background. Light: cyan pastel, Dark: dark muted cyan. For cards, badges, alerts.",
+      "--ply-cyan-border": "Theme-aware cyan border. Light: light cyan tint, Dark: medium-dark cyan. For colored card borders."
+    },
+    "totalCustomProperties": 92
   },
   "semanticElements": {
     "dialog": {

package/src/scss/components/_colors.scss CHANGED Viewed

@@ -113,6 +113,30 @@ $btn-secondary-dark-active: #bebebe;
   --ply-bg-yellow-hover: #d2a106;
   --ply-bg-yellow-active: #b28600;
+  // Color surfaces — pastel bg for cards, badges, alerts (theme-aware)
+  --ply-blue-surface: #d3e3fb;
+  --ply-red-surface: #f8d5d8;
+  --ply-green-surface: #d5ecd9;
+  --ply-yellow-surface: #fff4cc;
+  --ply-indigo-surface: #e0e7ff;
+  --ply-purple-surface: #ede9fe;
+  --ply-pink-surface: #fce7f3;
+  --ply-orange-surface: #ffedd5;
+  --ply-teal-surface: #ccfbf1;
+  --ply-cyan-surface: #cffafe;
+  // Color borders — light tint borders for colored cards (theme-aware)
+  --ply-blue-border: #92baf6;
+  --ply-red-border: #ef969d;
+  --ply-green-border: #96cfa1;
+  --ply-yellow-border: #ffe480;
+  --ply-indigo-border: #a5b4fc;
+  --ply-purple-border: #c4b5fd;
+  --ply-pink-border: #f9a8d4;
+  --ply-orange-border: #fdba74;
+  --ply-teal-border: #5eead4;
+  --ply-cyan-border: #67e8f9;
   // Brand palette (WCAG AA — 4.5:1 vs text-inverse per mode)
   --ply-blue-1: #0f62fe;
   --ply-blue-2: #0043ce;
@@ -235,6 +259,30 @@ $btn-secondary-dark-active: #bebebe;
   // Glass
   --ply-bg-glass: rgba(38, 38, 38, 0.25);
+  // Color surfaces — dark muted bg for cards, badges, alerts
+  --ply-blue-surface: #1a2744;
+  --ply-red-surface: #3b1c1e;
+  --ply-green-surface: #1a2e1e;
+  --ply-yellow-surface: #332b10;
+  --ply-indigo-surface: #1e1b4b;
+  --ply-purple-surface: #2e1065;
+  --ply-pink-surface: #3b0a2a;
+  --ply-orange-surface: #331a08;
+  --ply-teal-surface: #132f2e;
+  --ply-cyan-surface: #133040;
+  // Color borders — medium-dark borders for colored cards
+  --ply-blue-border: #1a52a5;
+  --ply-red-border: #b2232f;
+  --ply-green-border: #237f35;
+  --ply-yellow-border: #cca000;
+  --ply-indigo-border: #3730a3;
+  --ply-purple-border: #5b21b6;
+  --ply-pink-border: #9d174d;
+  --ply-orange-border: #c2410c;
+  --ply-teal-border: #0f766e;
+  --ply-cyan-border: #0e7490;
   // Brand backgrounds (dark mode — same as light, saturated for contrast with white text)
   --ply-bg-blue: #0f62fe;
   --ply-bg-blue-hover: #0043ce;