@dillingerstaffing/strand-svelte 0.5.1 → 0.6.0

package/dist/css/strand-ui.css

@@ -13,34 +13,45 @@
   justify-content: space-between;
   width: 100%;
   padding: var(--strand-space-6);
-  padding-left: var(--strand-space-5);
   border-radius: var(--strand-radius-md);
-  border-left: 4px solid transparent;
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
+  background: var(--strand-surface-recessed);
 }
 
-/* ── Status variants ── */
+/* ── Status variants (neutral background, status color on prefix only) ── */
 .strand-alert--info {
-  background: var(--strand-blue-glow);
-  border-left-color: var(--strand-blue-primary);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--success {
-  background: rgba(34, 197, 94, 0.08);
-  border-left-color: var(--strand-green-positive);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-left-color: var(--strand-amber-caution);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--error {
-  background: rgba(239, 68, 68, 0.08);
-  border-left-color: var(--strand-red-alert);
+  background: var(--strand-surface-recessed);
+}
+
+/* ── Status prefix ── */
+.strand-alert__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
+.strand-alert--info .strand-alert__status { color: var(--strand-blue-primary); }
+.strand-alert--success .strand-alert__status { color: var(--strand-teal-vital); }
+.strand-alert--warning .strand-alert__status { color: var(--strand-amber-caution); }
+.strand-alert--error .strand-alert__status { color: var(--strand-red-alert); }
+
 /* ── Content ── */
 .strand-alert__content {
   flex: 1;
@@ -53,8 +64,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-4);
   padding: 0;
   border: none;
@@ -676,7 +687,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -919,10 +930,12 @@
 
 /* ── Label ── */
 .strand-form-field__label {
-  font-family: var(--strand-font-sans);
-  font-size: var(--strand-text-sm);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
   font-weight: var(--strand-weight-medium);
-  color: var(--strand-gray-700);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
   line-height: var(--strand-leading-snug);
 }
 
@@ -2121,7 +2134,7 @@
 .strand-tabs [role="tablist"] {
   display: flex;
   gap: var(--strand-space-1);
-  border-bottom: 1px solid var(--strand-gray-400);
+  border-bottom: 1px solid var(--strand-gray-200);
 }
 
 /* ── Tab button ── */
@@ -2195,7 +2208,7 @@
 }
 
 .strand-tag--solid.strand-tag--teal {
-  background: rgba(20, 184, 166, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-teal-tint);
 }
 
@@ -2205,12 +2218,12 @@
 }
 
 .strand-tag--solid.strand-tag--amber {
-  background: rgba(245, 158, 11, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--solid.strand-tag--red {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-red-tint);
 }
 
@@ -2383,7 +2396,6 @@
   padding: var(--strand-space-4) var(--strand-space-5);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-lg);
-  border-left: 4px solid transparent;
   box-shadow: var(--strand-elevation-3);
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
@@ -2391,22 +2403,21 @@
   animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
 }
 
-/* ── Status accents ── */
-.strand-toast--info {
-  border-left-color: var(--strand-blue-primary);
-}
-
-.strand-toast--success {
-  border-left-color: var(--strand-green-positive);
-}
-
-.strand-toast--warning {
-  border-left-color: var(--strand-amber-caution);
+/* ── Status prefix ── */
+.strand-toast__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
-.strand-toast--error {
-  border-left-color: var(--strand-red-alert);
-}
+.strand-toast--info .strand-toast__status { color: var(--strand-blue-primary); }
+.strand-toast--success .strand-toast__status { color: var(--strand-teal-vital); }
+.strand-toast--warning .strand-toast__status { color: var(--strand-amber-caution); }
+.strand-toast--error .strand-toast__status { color: var(--strand-red-alert); }
 
 /* ── Message ── */
 .strand-toast__message {
@@ -2421,8 +2432,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-3);
   padding: 0;
   border: none;