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

ply-css 1.5.0 → 1.6.1

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 (29) hide show

package/CLAUDE.md +4 -1
package/PLY.md +67 -9
package/README.md +5 -4
package/dist/css/ply-core.css +45 -38
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 +56 -49
package/dist/css/ply.min.css +1 -1
package/dist/css/styles.css +56 -49
package/dist/css/styles.min.css +1 -1
package/llms-full.txt +76 -3
package/llms.txt +2 -2
package/package.json +1 -1
package/ply-classes.json +18 -8
package/snippets/custom-theme.html +3 -0
package/src/scss/components/_buttons.scss +14 -7
package/src/scss/components/_colors.scss +3 -2
package/src/scss/components/_dialog-patterns.scss +1 -1
package/src/scss/components/_forms.scss +10 -10
package/src/scss/components/_grid.scss +1 -0
package/src/scss/components/_helpers-core.scss +1 -1
package/src/scss/components/_helpers.scss +3 -3
package/src/scss/components/_livesearch.scss +6 -6
package/src/scss/components/_navigation.scss +2 -2
package/src/scss/components/_notifications.scss +2 -2
package/src/scss/components/_reset.scss +7 -7
package/src/scss/components/_rtl.scss +4 -4
package/src/scss/components/_typography.scss +1 -1

package/CLAUDE.md CHANGED Viewed

@@ -28,7 +28,7 @@ ply automatically styles semantic HTML elements — `<nav>`, `<table>`, `<code>`
 8. **Use semantic HTML first** — ply auto-styles `<code>`, `<pre>`, `<kbd>`, `<blockquote>`, `<mark>`, `<table>`, `<details>`, `<dialog>`, `<nav>`, etc. Use native elements before creating custom classes.
 9. **Only use documented ply classes** — Do NOT invent class names. Search `ply-classes.json` to find the right class. See PLY.md for the full prose reference.
 10. **Dark mode is automatic** — Auto dark mode activates only when no `data-theme` attribute is set on `<html>`. Use `data-theme="dark"` for explicit dark mode, `data-theme="light"` for explicit light mode, or any custom value (e.g., `data-theme="warm"`) for a custom theme without dark-mode interference. Use `var(--ply-*)` custom properties for colors (see `customProperties` in the JSON), never hard-code values that break dark mode.
-11. **Icons** — Use [Feather Icons](https://feathericons.com) as the preferred icon library. Any icon library works, but Feather pairs well with ply's aesthetic.
+11. **Icons** — Use [Lucide](https://lucide.dev) as the preferred icon library. Any icon library works, but Lucide pairs well with ply's aesthetic. For icon + text buttons, place the icon before or after the label — the button's built-in `inline-flex` layout with `gap: 0.5em` handles alignment automatically. Use `btn-icon` only for icon-only buttons (no visible text).
 12. **Container queries** — Use `container-query` on a parent element and `container-tablet-unit-*`, `container-phone-unit-*`, etc. for component-level responsive behavior (responds to parent width, not viewport). See PLY.md for details.
 ## Custom Themes
@@ -44,12 +44,15 @@ Create a custom theme by defining a `data-theme` value and overriding `--ply-*`
   --ply-color-body: #1a1a1a;
   --ply-color-headings: #78350f;
   --ply-border-color: #fbbf24;
+  --ply-border-radius: 0.375rem;
   --ply-color-accent: #b45309;
   --ply-btn-default-bg: #b45309;  /* Controls btn-primary + links */
   --ply-btn-default-bg-hover: #92400e;
   --ply-btn-default-bg-active: #7c2d12;
   --ply-btn-secondary-bg: #78350f;
   --ply-btn-border-radius: 0.5rem;
+  --ply-btn-font-size: 0.875rem;   /* button text size */
+  --ply-btn-gap: 0.375rem;         /* icon-to-text gap */
   --ply-nav-bg: #fef3c7;
   --ply-nav-border: #f59e0b;

package/PLY.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # PLY — AI-Ready CSS Framework
-ply is a ratio-based, flexbox CSS framework with dark mode, accessibility defaults, and a small footprint (~21KB gzip full, ~17KB core). 457 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements.
+ply is a ratio-based, flexbox CSS framework with dark mode, accessibility defaults, and a small footprint (~21KB gzip full, ~17KB core). 458 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements.
 **Differentiators:** Small bundle, AI-parseable class system, accessible out of the box, dark mode built-in.
@@ -8,7 +8,7 @@ ply is a ratio-based, flexbox CSS framework with dark mode, accessibility defaul
 **`ply-classes.json`** is the complete searchable reference. Before writing any custom CSS, search it first:
-- **`classes`** — Every ply class (457) with category, description, and usage examples. Search here before inventing a class name or writing a custom style.
+- **`classes`** — Every ply class (458) with category, description, and usage examples. Search here before inventing a class name or writing a custom style.
 - **`customProperties`** — All `--ply-*` CSS variables organized by category (background, text, borders, interactive, forms, code, tables, buttons, navigation, elevation, brand, palette, colorSurfaces, spacing). Each entry includes light and dark mode values. Use these instead of hardcoding colors.
 - **`semanticElements`** — Every HTML element ply auto-styles (`<dialog>`, `<details>`, `<table>`, `<code>`, `<kbd>`, `<mark>`, `<progress>`, `<meter>`, headings, form controls) with styling details and usage tips. Check here before building a custom component.
@@ -27,12 +27,15 @@ Create a custom theme by defining a `data-theme` value and overriding `--ply-*`
   --ply-color-body: #1a1a1a;
   --ply-color-headings: #78350f;
   --ply-border-color: #fbbf24;
+  --ply-border-radius: 0.375rem;
   --ply-color-accent: #b45309;
   --ply-btn-default-bg: #b45309;
   --ply-btn-default-bg-hover: #92400e;
   --ply-btn-default-bg-active: #7c2d12;
   --ply-btn-secondary-bg: #78350f;
   --ply-btn-border-radius: 0.5rem;
+  --ply-btn-font-size: 0.875rem;   /* button text size — default 1em inherits from context */
+  --ply-btn-gap: 0.375rem;         /* icon-to-text gap — default 0.5em */
   --ply-nav-bg: #fef3c7;
   --ply-nav-border: #f59e0b;
@@ -144,15 +147,16 @@ Note: The CDN approach gives you ply's classes and dark mode, but you won't have
 ## Icons
-ply does not include icons. [Feather Icons](https://feathericons.com) is the recommended icon library — it's lightweight, clean, and pairs well with ply's aesthetic. Any icon library works.
+ply does not include icons. [Lucide](https://lucide.dev) is the recommended icon library — it's lightweight, clean, and pairs well with ply's aesthetic. Any icon library works.
 ```html
-<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-<script>feather.replace();</script>
+<!-- CDN -->
+<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
+<script>lucide.createIcons();</script>
 <!-- Usage -->
-<i data-feather="check"></i> Saved
-<button class="btn btn-blue"><i data-feather="send"></i> Send</button>
+<i data-lucide="check"></i> Saved
+<button class="btn btn-primary"><i data-lucide="send"></i> Send</button>
 ```
 ## Dark Mode
@@ -246,7 +250,61 @@ All classes, CSS custom properties, and semantic element styles are documented i
 - **`btn-icon`** — Icon-only button modifier. Equal padding for a square aspect ratio. Always add `aria-label` (no visible text).
 - Combine with `btn-ghost` for toolbar-style icon buttons. Combine with size modifiers (`btn-sm`, `btn-xs`) for smaller icons.
-- For icon + text buttons, use a regular `btn` with an inline SVG — no `btn-icon` needed.
+- **Icon + text buttons** — Place the icon before or after the label text inside a regular `btn`. The button automatically uses `inline-flex` with `align-items: center` and `gap: 0.5em`, so icon and text are vertically centered with consistent spacing. No extra classes needed.
+```html
+<!-- Icon left -->
+<button class="btn btn-primary">
+  <i data-lucide="save"></i> Save
+</button>
+<!-- Icon right -->
+<button class="btn btn-secondary">
+  Next <i data-lucide="arrow-right"></i>
+</button>
+<!-- Icon-only (always include aria-label) -->
+<button class="btn btn-ghost btn-icon" aria-label="Delete">
+  <i data-lucide="trash-2"></i>
+</button>
+<!-- Size variants work the same way -->
+<button class="btn btn-primary btn-sm">
+  <i data-lucide="download"></i> Export
+</button>
+```
+### Button Groups
+Wrap buttons in `.btn-group` for a flex row with consistent gap and connected border-radius on the outer edges.
+- **`btn-group`** — Default: buttons with `0.5rem` gap between them.
+- **`btn-group joined`** — No gap; buttons connect as a single unit with a 1px divider between them. Use for segmented controls, toolbars, and pagination-style groups.
+- **`align-right`** / **`align-left`** / **`align-center`** — Justify the group within its container.
+- **`fill-width`** — Stretch all buttons to share equal width.
+- **`rounded`** — Larger border-radius on the outer edges.
+```html
+<!-- Default: gapped -->
+<div class="btn-group">
+  <button class="btn btn-primary">Save</button>
+  <button class="btn">Cancel</button>
+</div>
+<!-- Joined: connected, no gap -->
+<div class="btn-group joined">
+  <button class="btn">Week</button>
+  <button class="btn btn-primary">Month</button>
+  <button class="btn">Year</button>
+</div>
+<!-- Joined icon toolbar -->
+<div class="btn-group joined">
+  <button class="btn btn-ghost btn-icon" aria-label="Bold"><i data-lucide="bold"></i></button>
+  <button class="btn btn-ghost btn-icon" aria-label="Italic"><i data-lucide="italic"></i></button>
+  <button class="btn btn-ghost btn-icon" aria-label="Underline"><i data-lucide="underline"></i></button>
+</div>
+```
 ## Common Patterns
@@ -298,7 +356,7 @@ See `snippets/responsive-header.html` for a full working example.
 - **`border-top`**, **`border-right`**, **`border-bottom`**, **`border-left`** — Single-side borders.
 - **`border-thick`** — 3px solid border (all sides). Also `border-top-thick`, `border-right-thick`, `border-bottom-thick`, `border-left-thick`.
 - **`no-border`** — Remove all borders. Also `no-border-top`, `no-border-right`, `no-border-bottom`, `no-border-left`.
-- **`border-radius`** — Default border radius. `border-radius-lg` (0.75rem), `border-radius-xl` (1.5rem), `circle` (100%).
+- **`border-radius`** — Uses `var(--ply-border-radius)` (default 0.25rem, themeable). `border-radius-lg`, `border-radius-xl`, `circle` (100%).
 ### Other Common Patterns

package/README.md CHANGED Viewed

@@ -99,6 +99,7 @@ Override `--ply-*` CSS custom properties to create any theme:
   --ply-color-accent: #92400e;     /* Icons, badges, section accents */
   --ply-btn-default-bg: #92400e;   /* Primary button + links */
   --ply-btn-secondary-bg: #78350f; /* Secondary button */
+  --ply-border-radius: 0.375rem;   /* Global border radius */
   --ply-btn-border-radius: 0.5rem; /* Button corner radius */
   --ply-font-body: Palatino, Georgia, serif;
   --ply-font-heading: Palatino, Georgia, serif;
@@ -114,11 +115,11 @@ See `snippets/custom-theme.html` for a full working example.
 ## Icons
-ply doesn't include icons. [Feather Icons](https://feathericons.com) is recommended — lightweight, clean, and pairs well with ply. Any icon library works.
+ply doesn't include icons. [Lucide](https://lucide.dev) is recommended — lightweight, clean, and pairs well with ply. Any icon library works.
 ```html
-<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-<script>feather.replace();</script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
+<script>lucide.createIcons();</script>
 ```
 ## AI Integration
@@ -151,7 +152,7 @@ ply targets ADA Title II (28 CFR Part 35) / WCAG 2.1 AA compliance at the framew
 ## Documentation
-Full interactive docs at [plyCSS.com](https://plycss.com) — browse every class with live examples, search the entire framework, and copy-paste code snippets.
+Full interactive docs at [plycss.com](https://plycss.com) — browse every class with live examples, search the entire framework, and copy-paste code snippets.
 ## Roadmap

package/dist/css/ply-core.css CHANGED Viewed

@@ -44,6 +44,7 @@
   --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), black 15%);
   --ply-btn-secondary-bg-active: #2b2b2b;
   --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), black 25%);
+  --ply-border-radius: 0.25rem;
   --ply-btn-border-radius: 2rem;
   --ply-nav-bg: #ffffff;
   --ply-nav-color: #161616;
@@ -145,9 +146,9 @@
     --ply-color-text-inverse: #161616;
     --ply-border-color: #393939;
     --ply-border-strong: #6f6f6f;
-    --ply-color-link: var(--ply-btn-default-bg);
+    --ply-color-link: #4589ff;
     --ply-color-link-hover: #619bff;
-    --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+    --ply-color-link-hover: color-mix(in oklch, #4589ff, white 15%);
     --ply-color-focus: #0f62fe;
     --ply-color-field-bg: #262626;
     --ply-color-input-border: #6f6f6f;
@@ -261,9 +262,9 @@
   --ply-color-text-inverse: #161616;
   --ply-border-color: #393939;
   --ply-border-strong: #6f6f6f;
-  --ply-color-link: var(--ply-btn-default-bg);
+  --ply-color-link: #4589ff;
   --ply-color-link-hover: #619bff;
-  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+  --ply-color-link-hover: color-mix(in oklch, #4589ff, white 15%);
   --ply-color-focus: #0f62fe;
   --ply-color-field-bg: #262626;
   --ply-color-input-border: #6f6f6f;
@@ -714,7 +715,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;
 }
@@ -749,7 +750,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%;
@@ -769,21 +770,21 @@ 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;
 }
 progress::-webkit-progress-bar {
   background: var(--ply-bg-muted, #e0e0e0);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 progress::-webkit-progress-value {
   background: var(--ply-color-link, #0f62fe);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 progress::-moz-progress-bar {
   background: var(--ply-color-link, #0f62fe);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 meter {
@@ -793,7 +794,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;
 }
@@ -1227,7 +1228,7 @@ meter {
 }
 .border-radius {
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 .req,
@@ -1638,7 +1639,7 @@ pre {
   color: var(--ply-color-body, #222);
   background: var(--ply-color-code-bg, #f4f4f4);
   border: 1px solid var(--ply-color-code-border, #d4d4d4);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   padding: 1rem;
   overflow: auto;
 }
@@ -1913,7 +1914,7 @@ table tfoot td {
 .units-row.reverse-direction, .units-row.right-to-left {
   flex-direction: row-reverse;
 }
-.units-row.split {
+.units-row.joined, .units-row.split {
   --units-gap: 0px;
   gap: 0;
 }
@@ -3225,11 +3226,11 @@ table.table-hovered tbody tr:hover td {
 }
 .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-primary {
@@ -3353,7 +3354,7 @@ table.table-hovered tbody tr:hover td {
 .code {
   border: 1px solid #f0f1f2;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   display: inline-block;
   font-size: 0.8rem;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
@@ -3591,7 +3592,7 @@ table.table-hovered tbody tr:hover td {
 .form input[type=datetime-local],
 .form textarea,
 .form select {
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   display: block;
   width: 100%;
   padding: 0.5em 0.75em;
@@ -3694,7 +3695,7 @@ textarea {
 }
 fieldset {
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background-color: var(--ply-bg-surface);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
@@ -3827,18 +3828,18 @@ select.input-xs {
   min-width: 0;
   display: block !important;
   margin-bottom: 0;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 .input-groups input:not(:last-child),
 .input-groups textarea:not(:last-child),
 .input-groups select:not(:last-child) {
   border-right: none;
-  border-radius: 0.25rem 0 0 0.25rem;
+  border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
 }
 .input-groups input:not(:first-child),
 .input-groups textarea:not(:first-child),
 .input-groups select:not(:first-child) {
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 }
 .input-groups input:not(:first-child, :last-child),
 .input-groups textarea:not(:first-child, :last-child),
@@ -3860,11 +3861,11 @@ select.input-xs {
 }
 .input-groups .input-prepend {
   border-right: none;
-  border-radius: 0.25rem 0 0 0.25rem;
+  border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
 }
 .input-groups .input-append {
   border-left: none;
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 }
 .input-groups .input-append:has(.btn) {
   padding: 0;
@@ -3873,7 +3874,7 @@ select.input-xs {
 .input-groups .input-append .btn {
   display: flex;
   align-items: center;
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
   margin: 0;
   border-left: none;
   white-space: nowrap;
@@ -3890,7 +3891,7 @@ select.input-xs {
 .input-groups .btn-append .btn {
   display: flex;
   align-items: center;
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
   margin: 0;
   white-space: nowrap;
 }
@@ -3935,7 +3936,7 @@ select.select-outlined {
   background-size: 0.75em;
   padding: 0.5em 2.5em 0.5em 0.75em;
   border: 1px solid var(--ply-border-strong, #d4d4d4);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   color: var(--ply-color-body);
   font-size: 1em;
   line-height: 1.5rem;
@@ -4197,7 +4198,7 @@ nav ul {
   display: block;
   padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
-  border-radius: var(--ply-nav-stacked-radius, 0.25rem);
+  border-radius: var(--ply-nav-stacked-radius, var(--ply-border-radius));
 }
 .nav-stacked a {
   color: var(--ply-nav-color);
@@ -4382,7 +4383,7 @@ nav ul {
   height: 2.25rem;
   padding: 0.25rem 0.75rem;
   border: 1px solid var(--ply-border-color);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background: var(--ply-bg-surface, #fff);
   color: var(--ply-color-body);
   text-decoration: none;
@@ -4449,13 +4450,15 @@ input[type=button].btn,
 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, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji);
-  font-size: 1em;
+  font-size: var(--ply-btn-font-size, 1em);
   font-weight: 400;
   line-height: 1.5rem;
-  text-align: center;
   text-decoration: none;
   color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
   -webkit-appearance: none;
@@ -5396,23 +5399,27 @@ button.btn-white.btn-outline.btn-active {
 }
 .btn-single .btn:first-child,
 .btn-group .btn:first-child {
-  border-radius: 0.125rem 0 0 0.125rem;
+  border-radius: calc(var(--ply-border-radius) * 0.5) 0 0 calc(var(--ply-border-radius) * 0.5);
 }
 .btn-single .btn:last-child,
 .btn-group .btn:last-child {
-  border-radius: 0 0.125rem 0.125rem 0;
+  border-radius: 0 calc(var(--ply-border-radius) * 0.5) calc(var(--ply-border-radius) * 0.5) 0;
+}
+.btn-single.joined,
+.btn-group.joined {
+  gap: 0;
 }
 .btn-single.rounded .btn:first-child,
 .btn-single.rounded .input-search:first-child,
 .btn-group.rounded .btn:first-child,
 .btn-group.rounded .input-search:first-child {
-  border-radius: 0.5rem 0 0 0.5rem;
+  border-radius: calc(var(--ply-border-radius) * 2) 0 0 calc(var(--ply-border-radius) * 2);
 }
 .btn-single.rounded .btn:last-child,
 .btn-single.rounded .input-search:last-child,
 .btn-group.rounded .btn:last-child,
 .btn-group.rounded .input-search:last-child {
-  border-radius: 0 0.5rem 0.5rem 0;
+  border-radius: 0 calc(var(--ply-border-radius) * 2) calc(var(--ply-border-radius) * 2) 0;
 }
 /* =Notifications
@@ -5423,7 +5430,7 @@ button.btn-white.btn-outline.btn-active {
   background: var(--ply-bg-surface-alt, #f7f8f8);
   color: var(--ply-color-body, #0f0f0f);
   margin-bottom: 1.5rem;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   border-left: 4px solid #b3b6b7;
   display: flex;
   align-items: flex-start;
@@ -5470,7 +5477,7 @@ button.btn-white.btn-outline.btn-active {
   align-items: center;
   justify-content: center;
   margin: -0.5rem -0.375rem -0.5rem 0;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 .tools-alert .tools-alert-dismiss:hover,
 .tools-alert .alert-dismiss:hover,