ply-css 1.6.0 → 1.6.1

package/llms-full.txt

@@ -246,6 +246,7 @@ Override `--ply-*` custom properties to theme the entire app with one CSS block:
   --ply-color-body: #1a1a1a;
   --ply-color-headings: #78350f;
   --ply-border-color: #fbbf24;
+  --ply-border-radius: 0.375rem;
   --ply-btn-default-bg: #b45309;
   --ply-btn-default-bg-hover: #92400e;
   --ply-btn-default-bg-active: #7c2d12;
@@ -290,7 +291,7 @@ When integrating third-party components that don't use `--ply-*` variables, map
 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`
+- Borders: `--ply-border-color`, `--ply-border-strong`, `--ply-border-radius`
 - Interactive: `--ply-btn-default-bg`, `--ply-color-link`, `--ply-color-focus`
 - Inverse text: `--ply-color-text-inverse` (white in light, dark in dark)
 
@@ -399,7 +400,7 @@ Always include: `<meta name="viewport" content="width=device-width, initial-scal
 - `padding-xs` (0.25rem), `padding-sm` (0.5rem), `padding` (default), `padding-lg` (1.5rem), `padding-xl` (2rem)
 - `margin-bottom`, `margin-top-lg`, `margin-xl` — directional + size variants
 - `border` — 1px solid using `--ply-border-color` (theme-aware)
-- `border-radius` (default), `border-radius-lg` (0.75rem), `border-radius-xl` (1.5rem)
+- `border-radius` — uses `var(--ply-border-radius)` (default 0.25rem, themeable). `border-radius-lg`, `border-radius-xl`
 
 Equal-height cards in a row:
 

package/package.json

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

package/ply-classes.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -14,6 +14,7 @@
       "--ply-color-headings",
       "--ply-color-secondary",
       "--ply-border-color",
+      "--ply-border-radius",
       "--ply-btn-default-bg",
       "--ply-btn-secondary-bg",
       "--ply-color-accent",
@@ -54,12 +55,13 @@
       "--ply-btn-secondary-bg-active",
       "--ply-color-link-hover",
       "--ply-color-accent",
+      "--ply-border-radius",
       "--ply-btn-border-radius"
     ]
   },
   "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  --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\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": {
@@ -1497,7 +1499,7 @@
     },
     "border-radius": {
       "category": "helpers",
-      "description": "Apply default border-radius."
+      "description": "Apply border-radius using var(--ply-border-radius). Default 0.25rem, themeable."
     },
     "color-black": {
       "category": "helpers",
@@ -1753,11 +1755,11 @@
     },
     "border-radius-lg": {
       "category": "helpers",
-      "description": "Large border radius (0.75rem)."
+      "description": "Large border radius (3x --ply-border-radius)."
     },
     "border-radius-xl": {
       "category": "helpers",
-      "description": "Extra large border radius (1.5rem)."
+      "description": "Extra large border radius (6x --ply-border-radius)."
     },
     "spinning": {
       "category": "helpers",
@@ -2466,7 +2468,8 @@
     },
     "borders": {
       "--ply-border-color": "Standard border. Light: #e0e0e0, Dark: #525252",
-      "--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f"
+      "--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f",
+      "--ply-border-radius": "Global border-radius for inputs, cards, dialogs, details, notifications, and other components. Default: 0.25rem. Override to change the overall shape language (e.g., 0 for sharp, 0.5rem for softer)."
     },
     "interactive": {
       "--ply-color-accent": "Brand accent color for icons, badges, and section accents. Independent of button color and focus rings. Light: #0353e9, Dark: #4589ff. Override in custom themes without affecting buttons.",

package/snippets/custom-theme.html

@@ -39,6 +39,7 @@
       /* Borders */
       --ply-border-color: #334155;
       --ply-border-strong: #475569;
+      --ply-border-radius: 0.5rem;
 
       /* Interactive */
       --ply-color-link: #60a5fa;
@@ -102,6 +103,7 @@
       /* Borders */
       --ply-border-color: #d6d3d1;
       --ply-border-strong: #a8a29e;
+      --ply-border-radius: 0.375rem;
 
       /* Interactive */
       --ply-color-link: #b45309;
@@ -259,6 +261,7 @@
           <tr><td><code>--ply-color-text-inverse</code></td><td>Text on dark buttons</td></tr>
           <tr><td><code>--ply-border-color</code></td><td>Default borders</td></tr>
           <tr><td><code>--ply-border-strong</code></td><td>Prominent borders</td></tr>
+          <tr><td><code>--ply-border-radius</code></td><td>Global border radius (inputs, cards, dialogs)</td></tr>
           <tr><td><code>--ply-color-link</code></td><td>Link color</td></tr>
           <tr><td><code>--ply-color-link-hover</code></td><td>Link hover</td></tr>
           <tr><td><code>--ply-color-focus</code></td><td>Focus ring</td></tr>

package/src/scss/components/_buttons.scss

@@ -433,10 +433,10 @@ button.btn-white {
     border-radius: 0;
 
     &:first-child {
-      border-radius: (variables.$border-radius * 0.5) 0 0 (variables.$border-radius * 0.5);
+      border-radius: calc(var(--ply-border-radius) * 0.5) 0 0 calc(var(--ply-border-radius) * 0.5);
     }
     &:last-child {
-      border-radius: 0 (variables.$border-radius * 0.5) (variables.$border-radius * 0.5) 0;
+      border-radius: 0 calc(var(--ply-border-radius) * 0.5) calc(var(--ply-border-radius) * 0.5) 0;
     }
   }
 
@@ -449,10 +449,10 @@ button.btn-white {
     .btn,
     .input-search {
       &:first-child {
-        border-radius: (variables.$border-radius * 2) 0 0 (variables.$border-radius * 2);
+        border-radius: calc(var(--ply-border-radius) * 2) 0 0 calc(var(--ply-border-radius) * 2);
       }
       &:last-child {
-        border-radius: 0 (variables.$border-radius * 2) (variables.$border-radius * 2) 0;
+        border-radius: 0 calc(var(--ply-border-radius) * 2) calc(var(--ply-border-radius) * 2) 0;
       }
     }
   }

package/src/scss/components/_colors.scss

@@ -78,6 +78,7 @@ $btn-secondary-dark-active: #bebebe;
   --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), black 15%);
   --ply-btn-secondary-bg-active: #{$btn-secondary-light-active};
   --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), black 25%);
+  --ply-border-radius: #{variables.$border-radius};
   --ply-btn-border-radius: #{variables.$button-radius};
 
   // Navigation

package/src/scss/components/_dialog-patterns.scss

@@ -61,7 +61,7 @@ dialog {
     color: var(--ply-color-secondary);
     font-size: variables.$font-size-xl;
     cursor: pointer;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     transition: background-color 0.15s ease;
 
     &:hover {

package/src/scss/components/_forms.scss

@@ -71,7 +71,7 @@
   input[type="datetime-local"],
   textarea,
   select {
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     display: block;
     width: 100%;
     padding: 0.5em 0.75em;
@@ -161,7 +161,7 @@ textarea {
 
 // Fieldset
 fieldset {
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
 
   background-color: var(--ply-bg-surface);
   padding: variables.$base-line;
@@ -308,7 +308,7 @@ select.input-xs {
     min-width: 0;
     display: block !important;
     margin-bottom: 0;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
   }
 
   // Zero out joining edges
@@ -316,13 +316,13 @@ select.input-xs {
   textarea:not(:last-child),
   select:not(:last-child) {
     border-right: none;
-    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
   }
 
   input:not(:first-child),
   textarea:not(:first-child),
   select:not(:first-child) {
-    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
   }
 
   // Middle element (both prepend and append)
@@ -348,12 +348,12 @@ select.input-xs {
 
   .input-prepend {
     border-right: none;
-    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
   }
 
   .input-append {
     border-left: none;
-    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 
     &:has(.btn) {
       padding: 0;
@@ -363,7 +363,7 @@ select.input-xs {
     .btn {
       display: flex;
       align-items: center;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
       margin: 0;
       border-left: none;
       white-space: nowrap;
@@ -383,7 +383,7 @@ select.input-xs {
     .btn {
       display: flex;
       align-items: center;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
       margin: 0;
       white-space: nowrap;
 
@@ -428,7 +428,7 @@ select.select-outlined {
   background-size: 0.75em;
   padding: 0.5em 2.5em 0.5em 0.75em;
   border: 1px solid var(--ply-border-strong, colors.$color-neutral-300);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   color: var(--ply-color-body);
   font-size: 1em;
   line-height: variables.$base-line;

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

@@ -211,7 +211,7 @@
 }
 
 .border-radius {
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
 }
 
 // UX Helpers

package/src/scss/components/_helpers.scss

@@ -276,11 +276,11 @@ $width-breakpoints: (
 }
 
 .border-radius-lg {
-  border-radius: 0.75rem;
+  border-radius: calc(var(--ply-border-radius) * 3);
 }
 
 .border-radius-xl {
-  border-radius: 1.5rem;
+  border-radius: calc(var(--ply-border-radius) * 6);
 }
 
 // Text color helpers (theme-compatible)
@@ -386,7 +386,7 @@ $width-breakpoints: (
 
 .code {
   border: 1px solid colors.$color-gray-light;
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   display: inline-block;
   font-size: .8rem;
   font-family: variables.$font-family-code;

package/src/scss/components/_livesearch.scss

@@ -16,7 +16,7 @@
   }
 
   &.active input {
-    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
     border-bottom-color: var(--ply-border-color, colors.$color-gray);
   }
 }
@@ -35,7 +35,7 @@
   background: var(--ply-bg-surface, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
   border-top: none;
-  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
   max-height: 240px;
   overflow-y: auto;
@@ -98,7 +98,7 @@
   min-height: 2.5rem;
   background: var(--ply-color-input-bg, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   cursor: text;
   transition: border-color 0.15s ease;
   align-items: center;
@@ -109,7 +109,7 @@
   }
 
   .multiselect.active & {
-    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
     border-bottom-color: var(--ply-border-color, colors.$color-gray);
   }
 
@@ -138,7 +138,7 @@
   padding: 0.125rem 0.375rem;
   background: var(--ply-bg-muted, colors.$color-gray);
   color: var(--ply-color-body, colors.$color-body);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   font-size: variables.$font-size-sm;
   line-height: 1.5;
   white-space: nowrap;
@@ -191,7 +191,7 @@
   background: var(--ply-bg-surface, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
   border-top: none;
-  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
   max-height: 240px;
   overflow-y: auto;

package/src/scss/components/_navigation.scss

@@ -291,7 +291,7 @@ nav {
     display: block;
     padding: 0.25rem 0.75rem;
     font-size: variables.$font-size-sm;
-    border-radius: var(--ply-nav-stacked-radius, 0.25rem);
+    border-radius: var(--ply-nav-stacked-radius, var(--ply-border-radius));
   }
 
   & a {
@@ -505,7 +505,7 @@ nav {
     height: variables.$base-line * 1.5;
     padding: variables.$grid-gutter-width * 0.5 variables.$padding;
     border: 1px solid var(--ply-border-color);
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     background: var(--ply-bg-surface, #fff);
     color: var(--ply-color-body);
     text-decoration: none;

package/src/scss/components/_notifications.scss

@@ -19,7 +19,7 @@ $alert-colors: (
   background: var(--ply-bg-surface-alt, colors.$color-gray-pastel);
   color: var(--ply-color-body, colors.$color-black);
   margin-bottom: variables.$base-line;
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   border-left: 4px solid colors.$color-gray-dark;
   display: flex;
   align-items: flex-start;
@@ -63,7 +63,7 @@ $alert-colors: (
     align-items: center;
     justify-content: center;
     margin: -0.5rem -0.375rem -0.5rem 0;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
 
     &:hover {
       opacity: 1;

package/src/scss/components/_reset.scss

@@ -265,7 +265,7 @@ img {
 /* Native <details>/<summary> — Swiss/Modernist accordion */
 details {
   border: 1px solid var(--ply-border-color, #e0e0e0);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   padding: 0.75rem 1rem;
   margin-bottom: 1.5rem;
 }
@@ -303,7 +303,7 @@ details[open] > summary {
 /* Native <dialog> — modal styling */
 dialog {
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   padding: 1.5rem;
   max-width: 32rem;
   width: 90%;
@@ -322,23 +322,23 @@ progress {
   width: 100%;
   height: 0.5rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background: var(--ply-bg-muted, #e0e0e0);
   margin-bottom: 1.5rem;
 
   &::-webkit-progress-bar {
     background: var(--ply-bg-muted, #e0e0e0);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 
   &::-webkit-progress-value {
     background: var(--ply-color-link, #0f62fe);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 
   &::-moz-progress-bar {
     background: var(--ply-color-link, #0f62fe);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 }
 
@@ -347,7 +347,7 @@ meter {
   width: 100%;
   height: 0.5rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background: var(--ply-bg-muted, #e0e0e0);
   margin-bottom: 1.5rem;
 }

package/src/scss/components/_rtl.scss

@@ -104,25 +104,25 @@
     select:not(:last-child) {
       border-right: initial;
       border-left: none;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
     }
 
     input:not(:first-child),
     textarea:not(:first-child),
     select:not(:first-child) {
-      border-radius: variables.$border-radius 0 0 variables.$border-radius;
+      border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
     }
 
     .input-prepend {
       border-right: initial;
       border-left: none;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
     }
 
     .input-append {
       border-left: initial;
       border-right: none;
-      border-radius: variables.$border-radius 0 0 variables.$border-radius;
+      border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
     }
   }
 

package/src/scss/components/_typography.scss

@@ -284,7 +284,7 @@ pre {
   color: var(--ply-color-body, colors.$color-body);
   background: var(--ply-color-code-bg, colors.$color-code-background);
   border: 1px solid var(--ply-color-code-border, colors.$color-code-border);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   padding: 1rem;
   overflow: auto;
 }