ply-css 1.5.0 → 1.6.0

package/llms-full.txt

@@ -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 (~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.
+> 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). 458 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.
 
 ---
 
@@ -266,6 +266,36 @@ Setting any `data-theme` value prevents auto dark mode from interfering. All 120
 
 **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).
 
+### Third-Party Components & Dark Mode
+
+When integrating third-party components that don't use `--ply-*` variables, map ply's variables to their styling:
+
+```css
+/* Map ply variables to a third-party date picker */
+.third-party-datepicker {
+  background: var(--ply-bg-surface);
+  color: var(--ply-color-body);
+  border-color: var(--ply-border-color);
+}
+.third-party-datepicker .selected {
+  background: var(--ply-btn-default-bg);
+  color: var(--ply-color-text-inverse);
+}
+.third-party-datepicker .header {
+  background: var(--ply-bg-surface-alt);
+  color: var(--ply-color-headings);
+}
+```
+
+Key variables for mapping:
+- Backgrounds: `--ply-bg-body`, `--ply-bg-surface`, `--ply-bg-surface-alt`, `--ply-bg-muted`
+- Text: `--ply-color-body`, `--ply-color-secondary`, `--ply-color-muted`
+- Borders: `--ply-border-color`, `--ply-border-strong`
+- Interactive: `--ply-btn-default-bg`, `--ply-color-link`, `--ply-color-focus`
+- Inverse text: `--ply-color-text-inverse` (white in light, dark in dark)
+
+This ensures third-party components follow ply's theme automatically, including dark mode and custom themes.
+
 ---
 
 ## Navigation — Semantic and Responsive
@@ -454,6 +484,48 @@ Outline buttons in input groups automatically match the input border. Button sca
 
 ---
 
+## Tables
+
+ply auto-styles `<table>` with borders, padding, and readable spacing. No classes needed for a basic table.
+
+| Class | Effect |
+|---|---|
+| `table-bordered` | Borders on all cells |
+| `table-stroked` | Bottom borders only |
+| `table-stripped` | Striped odd rows |
+| `table-hovered` | Row highlight on hover |
+| `table-simple` | Remove borders and left padding |
+| `table-flat` | Remove all borders and padding |
+| `table-container` | Responsive horizontal scroll wrapper |
+| `sortable` | Sort arrows on `<th>` (add to individual headers) |
+| `sort-asc` / `sort-desc` | Active sort direction indicator |
+| `table-filter` | Auto-size selects for filter bars |
+| `table-actions` | Right-aligned toolbar above table |
+
+```html
+<div class="table-container">
+  <table class="table-stripped table-hovered">
+    <thead>
+      <tr>
+        <th class="sortable sort-asc">Name</th>
+        <th class="sortable">Email</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Jane Doe</td><td>jane@example.com</td><td>Admin</td></tr>
+      <tr><td>John Smith</td><td>john@example.com</td><td>Editor</td></tr>
+    </tbody>
+  </table>
+</div>
+```
+
+Tables respond to dark mode automatically — borders, stripe colors, and hover colors adapt via `--ply-color-table-border`, `--ply-color-table-stripped`, and `--ply-color-table-hovered`. Combine classes freely: `table-stripped table-hovered table-bordered` gives striped rows with hover highlights and full borders.
+
+Wrap any table in `<div class="table-container">` to get horizontal scrolling on small screens instead of layout overflow.
+
+---
+
 ## Alerts and Notifications
 
 ```html
@@ -799,7 +871,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. **457 documented classes** in `ply-classes.json` — machine-readable reference
+3. **458 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

@@ -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 (~21KB gzipped). 457 utility classes, 120+ 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). 458 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 457 classes, 120+ 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 458 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

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.5.0",
+  "version": "1.6.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

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.6.0",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -59,7 +59,7 @@
   },
   "themeTemplate": {
     "description": "Copy-paste starting point for custom themes. Replace placeholder values with your design colors. Every ply component respects these variables.",
-    "css": "[data-theme=\"my-theme\"] {\n  /* Background */\n  --ply-bg-body: #___;\n  --ply-bg-surface: #___;\n  --ply-bg-surface-alt: #___;\n  --ply-bg-muted: #___;\n\n  /* Text */\n  --ply-color-body: #___;\n  --ply-color-headings: #___;\n  --ply-color-secondary: #___;\n  --ply-color-muted: #___;\n  --ply-color-placeholder: #___;\n  --ply-color-text-inverse: #___;\n\n  /* Borders */\n  --ply-border-color: #___;\n  --ply-border-strong: #___;\n\n  /* Interactive */\n  --ply-color-accent: #___;\n  --ply-color-focus: #___;\n  --ply-color-link-hover: #___;\n\n  /* Buttons */\n  --ply-btn-default-bg: #___;\n  --ply-btn-default-color: #___;\n  --ply-btn-default-bg-hover: #___;\n  --ply-btn-default-bg-active: #___;\n  --ply-btn-secondary-bg: #___;\n  --ply-btn-secondary-color: #___;\n  --ply-btn-secondary-bg-hover: #___;\n  --ply-btn-secondary-bg-active: #___;\n  --ply-btn-border-radius: 2rem;\n\n  /* Forms */\n  --ply-color-input-bg: #___;\n  --ply-color-input-border: #___;\n\n  /* Navigation */\n  --ply-nav-bg: #___;\n  --ply-nav-color: #___;\n  --ply-nav-border: #___;\n  --ply-nav-hover: #___;\n\n  /* Code */\n  --ply-color-code-bg: #___;\n  --ply-color-code-border: #___;\n\n  /* Tables */\n  --ply-color-table-border: #___;\n  --ply-color-table-stripped: #___;\n\n  /* Elevation */\n  --ply-layer-0: #___;\n  --ply-layer-1: #___;\n  --ply-layer-2: #___;\n  --ply-layer-3: #___;\n  --ply-shadow-1: rgba(0, 0, 0, 0.08);\n  --ply-shadow-2: rgba(0, 0, 0, 0.1);\n  --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n  /* Typography (optional) */\n  --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}"
+    "css": "[data-theme=\"my-theme\"] {\n  /* Background */\n  --ply-bg-body: #___;\n  --ply-bg-surface: #___;\n  --ply-bg-surface-alt: #___;\n  --ply-bg-muted: #___;\n\n  /* Text */\n  --ply-color-body: #___;\n  --ply-color-headings: #___;\n  --ply-color-secondary: #___;\n  --ply-color-muted: #___;\n  --ply-color-placeholder: #___;\n  --ply-color-text-inverse: #___;\n\n  /* Borders */\n  --ply-border-color: #___;\n  --ply-border-strong: #___;\n\n  /* Interactive */\n  --ply-color-accent: #___;\n  --ply-color-focus: #___;\n  --ply-color-link-hover: #___;\n\n  /* Buttons */\n  --ply-btn-default-bg: #___;\n  --ply-btn-default-color: #___;\n  --ply-btn-default-bg-hover: #___;\n  --ply-btn-default-bg-active: #___;\n  --ply-btn-secondary-bg: #___;\n  --ply-btn-secondary-color: #___;\n  --ply-btn-secondary-bg-hover: #___;\n  --ply-btn-secondary-bg-active: #___;\n  --ply-btn-border-radius: 2rem;\n  --ply-btn-font-size: 1em;\n  --ply-btn-gap: 0.5em;\n\n  /* Forms */\n  --ply-color-input-bg: #___;\n  --ply-color-input-border: #___;\n\n  /* Navigation */\n  --ply-nav-bg: #___;\n  --ply-nav-color: #___;\n  --ply-nav-border: #___;\n  --ply-nav-hover: #___;\n\n  /* Code */\n  --ply-color-code-bg: #___;\n  --ply-color-code-border: #___;\n\n  /* Tables */\n  --ply-color-table-border: #___;\n  --ply-color-table-stripped: #___;\n\n  /* Elevation */\n  --ply-layer-0: #___;\n  --ply-layer-1: #___;\n  --ply-layer-2: #___;\n  --ply-layer-3: #___;\n  --ply-shadow-1: rgba(0, 0, 0, 0.08);\n  --ply-shadow-2: rgba(0, 0, 0, 0.1);\n  --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n  /* Typography (optional) */\n  --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}"
   },
   "classes": {
     "units-container": {
@@ -494,7 +494,7 @@
     },
     "split": {
       "category": "grid",
-      "description": "Remove gap between child units. Applied to units-row.",
+      "description": "Remove gap between child units. Applied to units-row. Kept for backwards compatibility — prefer joined.",
       "example": "<div class=\"units-row split\">...</div>"
     },
     "centered-content": {
@@ -1610,6 +1610,11 @@
       "description": "Round the outer corners of a btn-group.",
       "parent": "btn-group"
     },
+    "joined": {
+      "category": "buttons",
+      "description": "Remove gap so children connect as a single visual unit. On btn-group: buttons touch with a 1px divider, connected border-radius on outer edges. On units-row: removes column gutters (alias for split, which is kept for backwards compatibility).",
+      "example": "<div class=\"btn-group joined\"><button class=\"btn\">Left</button><button class=\"btn\">Middle</button><button class=\"btn\">Right</button></div>\n<div class=\"units-row joined\"><div class=\"unit-50\">...</div><div class=\"unit-50\">...</div></div>"
+    },
     "unit-role-right": {
       "category": "grid",
       "description": "Float a grid unit to the right."
@@ -2487,7 +2492,9 @@
     "buttons": {
       "--ply-btn-default-bg": "Primary button background. Controls btn-primary color and link colors. Light: #0353e9, Dark: #78a9ff. Override in custom themes to change primary + links together.",
       "--ply-btn-secondary-bg": "Secondary button background. Controls btn, btn-secondary color. Light: #393939, Dark: #4c4c4c.",
-      "--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4"
+      "--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4",
+      "--ply-btn-font-size": "Button font size. Default: 1em (inherits from context). Override to set a fixed size for all buttons in a theme.",
+      "--ply-btn-gap": "Gap between icon and text inside a button. Default: 0.5em. Applies to all btn variants via inline-flex layout."
     },
     "navigation": {
       "--ply-nav-bg": "Navbar background. Light: #ffffff, Dark: #262626",

package/src/scss/components/_buttons.scss

@@ -12,16 +12,18 @@ input[type="reset"].btn,
 button.btn {
   transition: all 150ms ease-in-out, transform 50ms ease, background 150ms ease-in-out;
 
-  display: inline-block;
+  display: inline-flex;
   vertical-align: top;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ply-btn-gap, 0.5em);
 
   font-family: var(--ply-font-body, #{variables.$font-family-controls});
-  font-size: 1em;
+  font-size: var(--ply-btn-font-size, 1em);
   font-weight: 400;
 
   line-height: variables.$base-line;
 
-  text-align: center;
   text-decoration: none;
   color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
 
@@ -438,6 +440,11 @@ button.btn-white {
     }
   }
 
+  // Joined — no gap between buttons, connected as a single unit
+  &.joined {
+    gap: 0;
+  }
+
   &.rounded {
     .btn,
     .input-search {

package/src/scss/components/_colors.scss

@@ -203,9 +203,9 @@ $btn-secondary-dark-active: #bebebe;
   --ply-border-strong: #6f6f6f;
 
   // Interactive
-  --ply-color-link: var(--ply-btn-default-bg);
+  --ply-color-link: #{$btn-primary-dark};
   --ply-color-link-hover: #{$btn-primary-dark-hover};
-  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+  --ply-color-link-hover: color-mix(in oklch, #{$btn-primary-dark}, white 15%);
   --ply-color-focus: #0f62fe;
 
   // Fields

package/src/scss/components/_grid.scss

@@ -31,6 +31,7 @@
     flex-direction: row-reverse;
   }
 
+  &.joined,
   &.split {
     --units-gap: 0px;
     gap: 0;