ply-css 1.6.1 → 1.7.1

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). 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.
+> 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, ~5KB with tree-shaking). 458 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step required. Optional tree-shaking via `ply-purge` CLI or PostCSS plugin. Install via npm as `ply-css` or use the CDN.
 
 ---
 
@@ -35,13 +35,13 @@ SCSS source: `src/scss/components/_colors.scss` (full color palette), `_variable
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css">
 ```
 
-Core bundle (no labels, dropdowns, loaders, print):
+Core bundle (no labels, loaders, print):
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply-core.min.css">
 ```
 
-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).
+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). For production, use `ply-purge` to tree-shake unused classes (~5KB gzipped for a typical page). See the Tree-Shaking section below.
 
 ---
 
@@ -493,7 +493,7 @@ ply auto-styles `<table>` with borders, padding, and readable spacing. No classe
 |---|---|
 | `table-bordered` | Borders on all cells |
 | `table-stroked` | Bottom borders only |
-| `table-stripped` | Striped odd rows |
+| `table-striped` | Striped odd rows |
 | `table-hovered` | Row highlight on hover |
 | `table-simple` | Remove borders and left padding |
 | `table-flat` | Remove all borders and padding |
@@ -505,7 +505,7 @@ ply auto-styles `<table>` with borders, padding, and readable spacing. No classe
 
 ```html
 <div class="table-container">
-  <table class="table-stripped table-hovered">
+  <table class="table-striped table-hovered">
     <thead>
       <tr>
         <th class="sortable sort-asc">Name</th>
@@ -521,7 +521,7 @@ ply auto-styles `<table>` with borders, padding, and readable spacing. No classe
 </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.
+Tables respond to dark mode automatically — borders, stripe colors, and hover colors adapt via `--ply-color-table-border`, `--ply-color-table-striped`, and `--ply-color-table-hovered`. Combine classes freely: `table-striped 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.
 
@@ -895,6 +895,38 @@ ply is built for AI code generation:
 
 ---
 
+## Tree-Shaking (Purge Unused CSS)
+
+For production, purge unused ply classes to get ~5KB gzipped (typical single page).
+
+**PostCSS plugin** (recommended for build pipelines):
+
+```js
+// postcss.config.js
+const plyPurge = require('ply-css/purge');
+module.exports = {
+  plugins: [
+    plyPurge({ content: ['./src/**/*.{html,jsx,tsx,vue}'] }),
+  ],
+};
+```
+
+Requires: `npm install -D @fullhuman/postcss-purgecss`
+
+**CLI** (standalone or CI):
+
+```sh
+npx ply-purge --css node_modules/ply-css/dist/css/ply.min.css \
+              --content 'src/**/*.{html,jsx,tsx}' \
+              -o public/ply.css
+```
+
+Requires: `npm install -D purgecss`
+
+The purge tool auto-safelists dynamically-toggled classes (`active`, `sort-asc`, responsive grid variants) so they aren't incorrectly removed. Extend with `--safelist <class>` (CLI) or `safelist` option (PostCSS).
+
+---
+
 ## Anti-Patterns
 
 - **DON'T** use Tailwind, Bootstrap, or other frameworks with ply

package/llms.txt

@@ -1,6 +1,6 @@
 # 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). 458 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, ~5KB with tree-shaking). 458 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step required. Optional tree-shaking via `ply-purge` CLI or PostCSS plugin.
 
 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.
 

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "ply-css",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "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",
+  "bin": {
+    "ply-purge": "bin/ply-purge.js"
+  },
   "files": [
     "dist/",
     "src/scss/",
+    "bin/",
+    "purge.js",
+    "safelist.js",
     "CLAUDE.md",
     "PLY.md",
     "ply-classes.json",
@@ -33,9 +39,19 @@
     "url": "git+https://github.com/thatgibbyguy/ply.git"
   },
   "homepage": "https://github.com/thatgibbyguy/ply",
+  "peerDependencies": {
+    "@fullhuman/postcss-purgecss": ">=6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@fullhuman/postcss-purgecss": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^6.0.0",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.6",
+    "purgecss": "^6.0.0",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "sass": "^1.86.0",
@@ -60,6 +76,7 @@
     "watch": "sass --watch src/scss/styles.scss:dist/css/styles.css src/scss/styles.scss:dist/css/styles.min.css src/scss/ply-essentials.scss:dist/css/ply-essentials.min.css --no-source-map",
     "lint": "stylelint \"src/scss/**/*.scss\"",
     "validate": "node scripts/validate-classes.js snippets/*.html examples/*.html",
+    "purge:demo": "node bin/ply-purge.js --css dist/css/ply.min.css --content 'snippets/*.html' -o dist/css/ply.purged.min.css",
     "prepublishOnly": "npm run build && npm run lint"
   },
   "author": "John Gibby",

package/ply-classes.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.1",
+  "version": "1.7.1",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -34,10 +34,12 @@
       "--ply-color-focus",
       "--ply-color-input-bg",
       "--ply-color-input-border",
+      "--ply-color-error",
+      "--ply-color-success",
       "--ply-color-code-bg",
       "--ply-color-code-border",
       "--ply-color-table-border",
-      "--ply-color-table-stripped",
+      "--ply-color-table-striped",
       "--ply-nav-color",
       "--ply-nav-hover",
       "--ply-layer-0",
@@ -61,7 +63,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  --ply-border-radius: 0.25rem;\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}"
+    "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  --ply-border-radius: 0.25rem;\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  --ply-color-error: #___;\n  --ply-color-success: #___;\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-striped: #___;\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": {
@@ -1563,10 +1565,14 @@
       "category": "tables",
       "description": "Table with bottom borders only on cells."
     },
-    "table-stripped": {
+    "table-striped": {
       "category": "tables",
       "description": "Striped table rows (odd rows get background color). Applied to table element.",
-      "example": "<table class=\"table-stripped\"><tbody><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></tbody></table>"
+      "example": "<table class=\"table-striped\"><tbody><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></tbody></table>"
+    },
+    "table-stripped": {
+      "category": "tables",
+      "description": "Deprecated alias for table-striped. Use table-striped instead."
     },
     "table-hovered": {
       "category": "tables",
@@ -1943,18 +1949,6 @@
       "category": "forms",
       "description": "Autocomplete dropdown container for form inputs."
     },
-    "dropdown": {
-      "category": "helpers",
-      "description": "Positioned absolute dropdown panel. Appears below trigger element."
-    },
-    "caret": {
-      "category": "helpers",
-      "description": "Downward-pointing dropdown arrow indicator."
-    },
-    "caret-up": {
-      "category": "helpers",
-      "description": "Upward-pointing caret. Modifier on caret."
-    },
     "label": {
       "category": "notifications",
       "description": "Inline label/tag. Small, uppercase, bold text with background color."
@@ -2479,9 +2473,11 @@
       "--ply-btn-border-radius": "Button border-radius. Default: 2rem (pill shape). Override for square or rounded buttons."
     },
     "forms": {
-      "--ply-color-field-bg": "Field background. Light: #ffffff, Dark: #262626",
-      "--ply-color-input-border": "Input border. Light: #8d8d8d, Dark: #6f6f6f",
-      "--ply-color-input-bg": "Input background. Light: #ffffff, Dark: #393939"
+      "--ply-color-field-bg": "Field background. Defaults to var(--ply-bg-surface-alt). Override for custom field backgrounds.",
+      "--ply-color-input-border": "Input border. Defaults to var(--ply-border-strong). Override for custom input borders.",
+      "--ply-color-input-bg": "Input background. Defaults to var(--ply-bg-surface-alt). Override for custom input backgrounds.",
+      "--ply-color-error": "Error state color for borders and text. Defaults to var(--ply-red-1). Used by .input-error, .error, .required, and stepper error states.",
+      "--ply-color-success": "Success state color for borders and text. Defaults to var(--ply-green-1). Used by .input-success, .success, and stepper completed states."
     },
     "code": {
       "--ply-color-code-bg": "Inline code background. Light: #f4f4f4, Dark: #333333",
@@ -2489,7 +2485,8 @@
     },
     "tables": {
       "--ply-color-table-border": "Table cell border. Light: #e0e0e0, Dark: #525252",
-      "--ply-color-table-stripped": "Striped row background. Light: #f4f4f4, Dark: #1c1c1c",
+      "--ply-color-table-striped": "Striped row background. Light: #f4f4f4, Dark: #1c1c1c",
+      "--ply-color-table-stripped": "Deprecated alias for --ply-color-table-striped.",
       "--ply-color-table-hovered": "Hovered row background. Light: #e8e8e8, Dark: #333333"
     },
     "buttons": {

package/purge.js

@@ -0,0 +1,81 @@
+/**
+ * ply PostCSS purge plugin — tree-shake unused ply CSS.
+ *
+ * Wraps @fullhuman/postcss-purgecss with ply-specific defaults:
+ * - Safelists dynamically-toggled classes (active, sort-asc, etc.)
+ * - Preserves responsive grid variants that static analysis may miss
+ * - Keeps CSS custom properties (:root), element resets, and @media blocks
+ *
+ * Usage in postcss.config.js:
+ *
+ *   const plyPurge = require('ply-css/purge');
+ *
+ *   module.exports = {
+ *     plugins: [
+ *       plyPurge({ content: ['./src/**\/*.{html,jsx,tsx,vue}'] }),
+ *     ],
+ *   };
+ *
+ * Requires: npm install -D @fullhuman/postcss-purgecss
+ */
+
+"use strict";
+
+const { safelistClasses, safelistPatterns } = require("./safelist");
+
+function plyPurge(options = {}) {
+  const { content, safelist = {}, ...rest } = options;
+
+  if (!content || content.length === 0) {
+    throw new Error(
+      "ply purge: `content` is required. Pass an array of glob patterns " +
+        "pointing to your template/component files.\n" +
+        "Example: plyPurge({ content: ['./src/**/*.{html,jsx,tsx,vue}'] })"
+    );
+  }
+
+  let purgecss;
+  try {
+    purgecss = require("@fullhuman/postcss-purgecss");
+  } catch {
+    throw new Error(
+      "ply purge requires @fullhuman/postcss-purgecss.\n" +
+        "Install it: npm install -D @fullhuman/postcss-purgecss"
+    );
+  }
+
+  const userSafelist = Array.isArray(safelist)
+    ? { standard: safelist }
+    : safelist;
+
+  return purgecss({
+    content,
+    safelist: {
+      standard: [
+        ...safelistClasses,
+        ...(userSafelist.standard || []),
+      ],
+      greedy: [
+        // Preserve all :root, html, body rules (custom properties, resets)
+        /^:root$/,
+        /^html$/,
+        /^body$/,
+        ...(userSafelist.greedy || []),
+      ],
+      deep: [...safelistPatterns, ...(userSafelist.deep || [])],
+    },
+    // ply uses single-dash BEM-ish names; default extractor works well
+    // but we add a custom one to also catch class names in JSX/TSX
+    defaultExtractor: (content) => {
+      // Match class="...", className="...", className={`...`}, and
+      // bare words that look like ply classes
+      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
+      const innerMatches =
+        content.match(/[^<>"'`\s.(){}[\]#,;]+/g) || [];
+      return [...new Set([...broadMatches, ...innerMatches])];
+    },
+    ...rest,
+  });
+}
+
+module.exports = plyPurge;

package/safelist.js

@@ -0,0 +1,43 @@
+/**
+ * ply safelist — classes and patterns that should never be purged.
+ *
+ * These are either toggled dynamically via JavaScript (e.g. `active`, `on`)
+ * or generated via SCSS loops (responsive variants) where static analysis
+ * of content files might miss them.
+ */
+
+"use strict";
+
+const safelistClasses = [
+  // Dynamic state classes (toggled via JS)
+  "active",
+  "on",
+  "open",
+  "accordion-title-opened",
+  "accordion-toggle-opened",
+  "accordion-toggle-closed",
+  "sort-asc",
+  "sort-desc",
+  "btn-active",
+  "btn-disabled",
+  "input-error",
+  "input-success",
+  "input-gray",
+];
+
+const safelistPatterns = [
+  // Responsive grid units: tablet-unit-50, phone-unit-100, etc.
+  /^(tablet|phone|large-phone|small-desktop|large-screen|x-large-screen|forever)-unit-(100|90|88|80|75|70|66|65|62|60|50|40|38|35|33|30|25|20|12|10|auto)$/,
+  // Container query units
+  /^container-(phone|large-phone|tablet|small-desktop)-unit-(100|90|88|80|75|70|66|65|62|60|50|40|38|35|33|30|25|20|12|10|auto)$/,
+  // Responsive width helpers
+  /^(tablet|phone|large-phone|small-desktop)-width-(100|90|80|75|70|66|50|40|33|25|20|10)$/,
+  // Responsive block helpers
+  /^blocks-mobile-(50|33)$/,
+  // Dialog layers
+  /^dialog-layer-[1-3]$/,
+  // Step form states
+  /^step-panel$/,
+];
+
+module.exports = { safelistClasses, safelistPatterns };

package/snippets/custom-theme.html

@@ -57,7 +57,7 @@
 
       /* Tables */
       --ply-color-table-border: #334155;
-      --ply-color-table-stripped: #162032;
+      --ply-color-table-striped: #162032;
       --ply-color-table-hovered: #253349;
 
       /* Buttons */
@@ -121,7 +121,7 @@
 
       /* Tables */
       --ply-color-table-border: #d6d3d1;
-      --ply-color-table-stripped: #faf8f5;
+      --ply-color-table-striped: #faf8f5;
       --ply-color-table-hovered: #f0ebe4;
 
       /* Buttons */
@@ -245,7 +245,7 @@
       </div>
 
       <h2>Available tokens</h2>
-      <table class="table-stripped">
+      <table class="table-striped">
         <thead>
           <tr><th>Token</th><th>Purpose</th></tr>
         </thead>

package/snippets/starter-page.html

@@ -239,7 +239,7 @@
           <div class="unit-100">
             <div class="card">
               <h4>Table</h4>
-              <table class="table-stripped table-hovered">
+              <table class="table-striped table-hovered">
                 <thead>
                   <tr>
                     <th>Feature</th>
@@ -704,7 +704,7 @@
           <div class="unit-100">
             <div class="card">
               <h4>Token reference</h4>
-              <table class="table-stripped">
+              <table class="table-striped">
                 <thead>
                   <tr><th>Token</th><th>Purpose</th></tr>
                 </thead>

package/src/scss/_ply.scss

@@ -27,8 +27,6 @@
 @use 'components/labels';
 @use 'components/themes';
 
-
-@use 'components/dropdown';
 @use 'components/livesearch';
 @use 'components/loader';
 @use 'components/flexible-embed';

package/src/scss/components/_colors.scss

@@ -51,17 +51,20 @@ $btn-secondary-dark-active: #bebebe;
   --ply-color-focus: #0f62fe;
 
   // Fields
-  --ply-color-field-bg: #f4f4f4;
-  --ply-color-input-border: #8d8d8d;
-  --ply-color-input-bg: #f4f4f4;
+  --ply-color-field-bg: var(--ply-bg-surface-alt);
+  --ply-color-input-border: var(--ply-border-strong);
+  --ply-color-input-bg: var(--ply-bg-surface-alt);
+  --ply-color-error: var(--ply-red-1);
+  --ply-color-success: var(--ply-green-1);
 
   // Code
-  --ply-color-code-bg: #f4f4f4;
-  --ply-color-code-border: #e0e0e0;
+  --ply-color-code-bg: var(--ply-bg-surface-alt);
+  --ply-color-code-border: var(--ply-border-color);
 
   // Tables
-  --ply-color-table-border: #e0e0e0;
-  --ply-color-table-stripped: #f4f4f4;
+  --ply-color-table-border: var(--ply-border-color);
+  --ply-color-table-striped: #f4f4f4;
+  --ply-color-table-stripped: var(--ply-color-table-striped); // deprecated alias
   --ply-color-table-hovered: #e8e8e8;
 
   // Accent (brand-neutral — for icons, badges, focus rings. Independent of button color.)
@@ -82,16 +85,16 @@ $btn-secondary-dark-active: #bebebe;
   --ply-btn-border-radius: #{variables.$button-radius};
 
   // Navigation
-  --ply-nav-bg: #ffffff;
-  --ply-nav-color: #161616;
-  --ply-nav-border: #161616;
+  --ply-nav-bg: var(--ply-bg-body);
+  --ply-nav-color: var(--ply-color-body);
+  --ply-nav-border: var(--ply-color-body);
   --ply-nav-hover: #e8e8e8;
   --ply-nav-active-color: #525252;
 
   // Layers (elevation)
-  --ply-layer-0: #ffffff;
-  --ply-layer-1: #f4f4f4;
-  --ply-layer-2: #e0e0e0;
+  --ply-layer-0: var(--ply-bg-body);
+  --ply-layer-1: var(--ply-bg-surface-alt);
+  --ply-layer-2: var(--ply-bg-muted);
   --ply-layer-3: #c6c6c6;
   --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
   --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -209,18 +212,9 @@ $btn-secondary-dark-active: #bebebe;
   --ply-color-link-hover: color-mix(in oklch, #{$btn-primary-dark}, white 15%);
   --ply-color-focus: #0f62fe;
 
-  // Fields
-  --ply-color-field-bg: #262626;
-  --ply-color-input-border: #6f6f6f;
-  --ply-color-input-bg: #262626;
-
-  // Code
-  --ply-color-code-bg: #262626;
-  --ply-color-code-border: #393939;
-
-  // Tables
-  --ply-color-table-border: #393939;
-  --ply-color-table-stripped: #1c1c1c;
+  // Tables (table-striped intentionally differs from surface-alt in dark)
+  --ply-color-table-striped: #1c1c1c;
+  --ply-color-table-stripped: var(--ply-color-table-striped); // deprecated alias
   --ply-color-table-hovered: #353535;
 
   // Accent
@@ -241,17 +235,9 @@ $btn-secondary-dark-active: #bebebe;
   --ply-btn-secondary-color: #161616;
   --ply-btn-ghost-color: #{$btn-primary-dark};
 
-  // Navigation
-  --ply-nav-bg: #161616;
-  --ply-nav-color: #f4f4f4;
-  --ply-nav-border: #f4f4f4;
+  // Navigation (nav-hover and nav-active-color intentionally differ from structural tokens in dark)
   --ply-nav-hover: #353535;
   --ply-nav-active-color: #a8a8a8;
-
-  // Layers (elevation)
-  --ply-layer-0: #161616;
-  --ply-layer-1: #262626;
-  --ply-layer-2: #393939;
   --ply-layer-3: #525252;
   --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2);
   --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -474,7 +460,8 @@ $color-neutral-900: #171717;
 
 // Table Color
 $color-table-border: $border-color;
-$color-table-stripped: #f8f8f8;
+$color-table-striped: #f8f8f8;
+$color-table-stripped: $color-table-striped; // deprecated alias
 $color-table-hovered: #f4f4f4;
 
 // Fieldset

package/src/scss/components/_forms.scss

@@ -184,17 +184,16 @@ input.input-error,
 textarea.input-error,
 select.input-error,
 .input-error {
-  border-color: colors.$color-red;
-  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-red, "red", $space: rgb), color.channel(colors.$color-red, "green", $space: rgb), color.channel(colors.$color-red, "blue", $space: rgb), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
+  border-color: var(--ply-color-error);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ply-color-error) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .2) inset;
 }
 
 input.input-success,
 textarea.input-success,
 select.input-success,
-.input-success  {
-  border-color: colors.$color-green;
-  box-shadow: 0 0 0 2px rgba(color.channel(colors.$color-green, "red", $space: rgb), color.channel(colors.$color-green, "green", $space: rgb), color.channel(colors.$color-green, "blue", $space: rgb), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
-
+.input-success {
+  border-color: var(--ply-color-success);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ply-color-success) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .2) inset;
 }
 
 input.input-gray,

package/src/scss/components/_helpers-core.scss

@@ -219,15 +219,15 @@
 .req,
 .required {
   font-weight: normal;
-  color: var(--ply-red-1);
+  color: var(--ply-color-error);
 }
 
 .error {
-  color: var(--ply-red-1);
+  color: var(--ply-color-error);
 }
 
 .success {
-  color: var(--ply-green-1);
+  color: var(--ply-color-success);
 }
 
 // Typography — Size Utilities

package/src/scss/components/_multi-step-form.scss

@@ -83,8 +83,8 @@
   &.completed {
     &::before {
       border-color: var(--ply-border-color);
-      background: color-mix(in srgb, #{colors.$color-green} 13%, var(--ply-bg-surface, #fff));
-      color: colors.$color-green;
+      background: color-mix(in srgb, var(--ply-color-success) 13%, var(--ply-bg-surface, #fff));
+      color: var(--ply-color-success);
       content: "\2713";
     }
 
@@ -100,14 +100,14 @@
   // Error step — red border and exclamation, transparent background
   &.step-error {
     &::before {
-      border-color: colors.$color-red;
+      border-color: var(--ply-color-error);
       background: transparent;
-      color: colors.$color-red;
+      color: var(--ply-color-error);
       content: "!";
     }
 
     .step-label {
-      color: colors.$color-red;
+      color: var(--ply-color-error);
       font-weight: variables.$font-weight-semibold;
     }
   }

package/src/scss/components/_rtl.scss

@@ -73,17 +73,6 @@
     padding-right: 0;
   }
 
-  // Dropdown positioning
-  .dropdown-menu {
-    left: auto;
-    right: 0;
-  }
-
-  .dropdown-menu-right {
-    right: auto;
-    left: 0;
-  }
-
   // Forms — search icon positioning, select arrow
   .form select {
     background-position: left 0.75em center;

package/src/scss/components/_tables.scss

@@ -23,8 +23,9 @@ table.table-stroked td,
 table.table-stroked th {
   border-bottom: 1px solid var(--ply-color-table-border, colors.$color-table-border);
 }
+table.table-striped tbody tr:nth-child(odd) td,
 table.table-stripped tbody tr:nth-child(odd) td {
-  background: var(--ply-color-table-stripped, colors.$color-table-stripped);
+  background: var(--ply-color-table-striped, var(--ply-color-table-stripped, colors.$color-table-stripped));
 }
 table.table-hovered tbody tr:hover td {
   background-color: var(--ply-color-table-hovered, colors.$color-table-hovered);