npm - ply-css - Versions diffs - 1.4.1 → 1.6.0 - Mend

ply-css 1.4.1 → 1.6.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 (18) hide show

package/CLAUDE.md +4 -2
package/PLY.md +96 -12
package/README.md +6 -6
package/dist/css/ply-core.css +74 -8
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 +74 -8
package/dist/css/ply.min.css +1 -1
package/dist/css/styles.css +74 -8
package/dist/css/styles.min.css +1 -1
package/llms-full.txt +76 -4
package/llms.txt +2 -2
package/package.json +1 -1
package/ply-classes.json +45 -15
package/src/scss/components/_buttons.scss +10 -3
package/src/scss/components/_colors.scss +50 -2
package/src/scss/components/_grid.scss +1 -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). 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.
 ---
@@ -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,10 +262,40 @@ 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).
+### 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. **421 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 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). 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 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 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.4.1",
+  "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 CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.1",
+  "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",
@@ -2520,16 +2527,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 +2545,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/_buttons.scss CHANGED Viewed

@@ -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 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;
@@ -179,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
@@ -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;

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

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