ply-css 1.6.0 → 1.7.0

package/dist/css/ply-core.css

@@ -25,13 +25,16 @@
   --ply-color-link-hover: #0347c6;
   --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), black 15%);
   --ply-color-focus: #0f62fe;
-  --ply-color-field-bg: #f4f4f4;
-  --ply-color-input-border: #8d8d8d;
-  --ply-color-input-bg: #f4f4f4;
-  --ply-color-code-bg: #f4f4f4;
-  --ply-color-code-border: #e0e0e0;
-  --ply-color-table-border: #e0e0e0;
-  --ply-color-table-stripped: #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);
+  --ply-color-code-bg: var(--ply-bg-surface-alt);
+  --ply-color-code-border: var(--ply-border-color);
+  --ply-color-table-border: var(--ply-border-color);
+  --ply-color-table-striped: #f4f4f4;
+  --ply-color-table-stripped: var(--ply-color-table-striped);
   --ply-color-table-hovered: #e8e8e8;
   --ply-color-accent: #0353e9;
   --ply-btn-default-bg: #0353e9;
@@ -44,15 +47,16 @@
   --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;
-  --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;
-  --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);
@@ -149,13 +153,8 @@
     --ply-color-link-hover: #619bff;
     --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;
-    --ply-color-input-bg: #262626;
-    --ply-color-code-bg: #262626;
-    --ply-color-code-border: #393939;
-    --ply-color-table-border: #393939;
-    --ply-color-table-stripped: #1c1c1c;
+    --ply-color-table-striped: #1c1c1c;
+    --ply-color-table-stripped: var(--ply-color-table-striped);
     --ply-color-table-hovered: #353535;
     --ply-color-accent: #4589ff;
     --ply-btn-default-bg: #0f62fe;
@@ -171,14 +170,8 @@
     --ply-btn-default-color: #fff;
     --ply-btn-secondary-color: #161616;
     --ply-btn-ghost-color: #4589ff;
-    --ply-nav-bg: #161616;
-    --ply-nav-color: #f4f4f4;
-    --ply-nav-border: #f4f4f4;
     --ply-nav-hover: #353535;
     --ply-nav-active-color: #a8a8a8;
-    --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);
@@ -265,13 +258,8 @@
   --ply-color-link-hover: #619bff;
   --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;
-  --ply-color-input-bg: #262626;
-  --ply-color-code-bg: #262626;
-  --ply-color-code-border: #393939;
-  --ply-color-table-border: #393939;
-  --ply-color-table-stripped: #1c1c1c;
+  --ply-color-table-striped: #1c1c1c;
+  --ply-color-table-stripped: var(--ply-color-table-striped);
   --ply-color-table-hovered: #353535;
   --ply-color-accent: #4589ff;
   --ply-btn-default-bg: #0f62fe;
@@ -287,14 +275,8 @@
   --ply-btn-default-color: #fff;
   --ply-btn-secondary-color: #161616;
   --ply-btn-ghost-color: #4589ff;
-  --ply-nav-bg: #161616;
-  --ply-nav-color: #f4f4f4;
-  --ply-nav-border: #f4f4f4;
   --ply-nav-hover: #353535;
   --ply-nav-active-color: #a8a8a8;
-  --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);
@@ -714,7 +696,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 +731,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 +751,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 +775,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,21 +1209,21 @@ meter {
 }
 
 .border-radius {
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
 }
 
 .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);
 }
 
 .text-xs {
@@ -1638,7 +1620,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;
 }
@@ -2586,8 +2568,9 @@ table.table-stroked th {
   border-bottom: 1px solid var(--ply-color-table-border, #ccc);
 }
 
+table.table-striped tbody tr:nth-child(odd) td,
 table.table-stripped tbody tr:nth-child(odd) td {
-  background: var(--ply-color-table-stripped, #f8f8f8);
+  background: var(--ply-color-table-striped, var(--ply-color-table-stripped, #f8f8f8));
 }
 
 table.table-hovered tbody tr:hover td {
@@ -3225,11 +3208,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 +3336,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 +3574,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 +3677,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;
@@ -3715,16 +3698,16 @@ input.input-error,
 textarea.input-error,
 select.input-error,
 .input-error {
-  border-color: #de2c3b;
-  box-shadow: 0 0 0 2px rgba(222, 44, 59, 0.3), 0 1px 2px rgba(0, 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, 0.2) inset;
 }
 
 input.input-success,
 textarea.input-success,
 select.input-success,
 .input-success {
-  border-color: #1a7a32;
-  box-shadow: 0 0 0 2px rgba(26, 122, 50, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
+  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, 0.2) inset;
 }
 
 input.input-gray,
@@ -3827,18 +3810,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 +3843,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 +3856,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 +3873,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 +3918,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 +4180,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 +4365,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;
@@ -5398,11 +5381,11 @@ 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 {
@@ -5412,13 +5395,13 @@ button.btn-white.btn-outline.btn-active {
 .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
@@ -5429,7 +5412,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;
@@ -5476,7 +5459,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,