ply-css 1.6.0 → 1.7.0

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;
@@ -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,
@@ -308,7 +307,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 +315,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 +347,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 +362,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 +382,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 +427,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
@@ -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/_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/_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/_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/_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);

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;
 }