ply-css 1.4.1 → 1.6.0

package/dist/css/styles.css

@@ -69,6 +69,26 @@
   --ply-bg-yellow: #f1c21b;
   --ply-bg-yellow-hover: #d2a106;
   --ply-bg-yellow-active: #b28600;
+  --ply-blue-surface: #d3e3fb;
+  --ply-red-surface: #f8d5d8;
+  --ply-green-surface: #d5ecd9;
+  --ply-yellow-surface: #fff4cc;
+  --ply-indigo-surface: #e0e7ff;
+  --ply-purple-surface: #ede9fe;
+  --ply-pink-surface: #fce7f3;
+  --ply-orange-surface: #ffedd5;
+  --ply-teal-surface: #ccfbf1;
+  --ply-cyan-surface: #cffafe;
+  --ply-blue-border: #92baf6;
+  --ply-red-border: #ef969d;
+  --ply-green-border: #96cfa1;
+  --ply-yellow-border: #ffe480;
+  --ply-indigo-border: #a5b4fc;
+  --ply-purple-border: #c4b5fd;
+  --ply-pink-border: #f9a8d4;
+  --ply-orange-border: #fdba74;
+  --ply-teal-border: #5eead4;
+  --ply-cyan-border: #67e8f9;
   --ply-blue-1: #0f62fe;
   --ply-blue-2: #0043ce;
   --ply-blue-3: #002d9c;
@@ -124,9 +144,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;
@@ -163,6 +183,26 @@
     --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3);
     --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.4);
     --ply-bg-glass: rgba(38, 38, 38, 0.25);
+    --ply-blue-surface: #1a2744;
+    --ply-red-surface: #3b1c1e;
+    --ply-green-surface: #1a2e1e;
+    --ply-yellow-surface: #332b10;
+    --ply-indigo-surface: #1e1b4b;
+    --ply-purple-surface: #2e1065;
+    --ply-pink-surface: #3b0a2a;
+    --ply-orange-surface: #331a08;
+    --ply-teal-surface: #132f2e;
+    --ply-cyan-surface: #133040;
+    --ply-blue-border: #1a52a5;
+    --ply-red-border: #b2232f;
+    --ply-green-border: #237f35;
+    --ply-yellow-border: #cca000;
+    --ply-indigo-border: #3730a3;
+    --ply-purple-border: #5b21b6;
+    --ply-pink-border: #9d174d;
+    --ply-orange-border: #c2410c;
+    --ply-teal-border: #0f766e;
+    --ply-cyan-border: #0e7490;
     --ply-bg-blue: #0f62fe;
     --ply-bg-blue-hover: #0043ce;
     --ply-bg-blue-active: #002d9c;
@@ -220,9 +260,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;
@@ -259,6 +299,26 @@
   --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3);
   --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.4);
   --ply-bg-glass: rgba(38, 38, 38, 0.25);
+  --ply-blue-surface: #1a2744;
+  --ply-red-surface: #3b1c1e;
+  --ply-green-surface: #1a2e1e;
+  --ply-yellow-surface: #332b10;
+  --ply-indigo-surface: #1e1b4b;
+  --ply-purple-surface: #2e1065;
+  --ply-pink-surface: #3b0a2a;
+  --ply-orange-surface: #331a08;
+  --ply-teal-surface: #132f2e;
+  --ply-cyan-surface: #133040;
+  --ply-blue-border: #1a52a5;
+  --ply-red-border: #b2232f;
+  --ply-green-border: #237f35;
+  --ply-yellow-border: #cca000;
+  --ply-indigo-border: #3730a3;
+  --ply-purple-border: #5b21b6;
+  --ply-pink-border: #9d174d;
+  --ply-orange-border: #c2410c;
+  --ply-teal-border: #0f766e;
+  --ply-cyan-border: #0e7490;
   --ply-bg-blue: #0f62fe;
   --ply-bg-blue-hover: #0043ce;
   --ply-bg-blue-active: #002d9c;
@@ -2761,7 +2821,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;
 }
@@ -4451,13 +4511,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;
@@ -5404,6 +5466,10 @@ button.btn-white.btn-outline.btn-active {
 .btn-group .btn:last-child {
   border-radius: 0 0.125rem 0.125rem 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,