ply-css 1.5.0 → 1.6.1

package/dist/css/ply.css

@@ -40,6 +40,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;
@@ -141,9 +142,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;
@@ -257,9 +258,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;
@@ -710,7 +711,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;
 }
@@ -745,7 +746,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%;
@@ -765,21 +766,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 {
@@ -789,7 +790,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;
 }
@@ -1223,7 +1224,7 @@ meter {
 }
 
 .border-radius {
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 
 .req,
@@ -1987,11 +1988,11 @@ meter {
 }
 
 .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 {
@@ -2115,7 +2116,7 @@ meter {
 
 .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;
@@ -2543,7 +2544,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;
 }
@@ -2818,7 +2819,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;
 }
@@ -3650,7 +3651,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;
@@ -3753,7 +3754,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;
@@ -3886,18 +3887,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),
@@ -3919,11 +3920,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;
@@ -3932,7 +3933,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;
@@ -3949,7 +3950,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;
 }
@@ -3994,7 +3995,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;
@@ -4256,7 +4257,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);
@@ -4441,7 +4442,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;
@@ -4508,13 +4509,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;
@@ -5455,23 +5458,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
@@ -5482,7 +5489,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;
@@ -5529,7 +5536,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,
@@ -5998,7 +6005,7 @@ ul.dropdown li.divider {
 }
 .typeahead.active input,
 .livesearch-container.active input {
-  border-radius: 0.25rem 0.25rem 0 0;
+  border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
   border-bottom-color: var(--ply-border-color, #e0e3e5);
 }
 
@@ -6016,7 +6023,7 @@ ul.dropdown li.divider {
   background: var(--ply-bg-surface, #fff);
   border: 1px solid var(--ply-color-input-border, #ccc);
   border-top: none;
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   max-height: 240px;
   overflow-y: auto;
@@ -6078,7 +6085,7 @@ ul.dropdown li.divider {
   min-height: 2.5rem;
   background: var(--ply-color-input-bg, #fff);
   border: 1px solid var(--ply-color-input-border, #ccc);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   cursor: text;
   transition: border-color 0.15s ease;
   align-items: center;
@@ -6088,7 +6095,7 @@ ul.dropdown li.divider {
   box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.3);
 }
 .multiselect.active .multiselect-tags {
-  border-radius: 0.25rem 0.25rem 0 0;
+  border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
   border-bottom-color: var(--ply-border-color, #e0e3e5);
 }
 .multiselect-tags input {
@@ -6117,7 +6124,7 @@ ul.dropdown li.divider {
   padding: 0.125rem 0.375rem;
   background: var(--ply-bg-muted, #e0e3e5);
   color: var(--ply-color-body, #222);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   font-size: 0.875rem;
   line-height: 1.5;
   white-space: nowrap;
@@ -6165,7 +6172,7 @@ ul.dropdown li.divider {
   background: var(--ply-bg-surface, #fff);
   border: 1px solid var(--ply-color-input-border, #ccc);
   border-top: none;
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   max-height: 240px;
   overflow-y: auto;
@@ -6690,7 +6697,7 @@ dialog .dialog-close {
   color: var(--ply-color-secondary);
   font-size: 1.5rem;
   cursor: pointer;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   transition: background-color 0.15s ease;
 }
 dialog .dialog-close:hover {
@@ -7135,22 +7142,22 @@ dialog[open]::backdrop {
 [dir=rtl] .input-groups select:not(:last-child) {
   border-right: initial;
   border-left: none;
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 }
 [dir=rtl] .input-groups input:not(:first-child),
 [dir=rtl] .input-groups textarea:not(:first-child),
 [dir=rtl] .input-groups select:not(:first-child) {
-  border-radius: 0.25rem 0 0 0.25rem;
+  border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
 }
 [dir=rtl] .input-groups .input-prepend {
   border-right: initial;
   border-left: none;
-  border-radius: 0 0.25rem 0.25rem 0;
+  border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 }
 [dir=rtl] .input-groups .input-append {
   border-left: initial;
   border-right: none;
-  border-radius: 0.25rem 0 0 0.25rem;
+  border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
 }
 [dir=rtl] th.sortable {
   padding-right: inherit;