@fluid-theme/core 0.4.3 → 2.1.0

package/src/components/alert.css

@@ -39,6 +39,8 @@
 
   .alert {
     --_alert-color: var(--color-info);
+    --_alert-fill: var(--color-info-fill);
+    --_alert-on: var(--color-info-on);
     --_alert-bg: var(--color-info-subtle);
     --_alert-border: var(--color-info);
 
@@ -46,16 +48,15 @@
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-4) var(--space-5);
-    border-radius: var(--radius-lg);
-    border-inline-start: 3px solid var(--_alert-border);
+    border-radius: var(--radius-card);
+    border-inline-start: var(--border-width-thick) solid var(--_alert-border);
     background: var(--_alert-bg);
     color: var(--color-text);
-    font-size: var(--font-size-sm);
-    line-height: var(--leading-normal);
-
+    font-size: var(--step--1);
+    line-height: 1.5;
     transition:
       opacity var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-settle);
+      translate var(--duration-normal) var(--ease-settle);
   }
 
 
@@ -65,24 +66,32 @@
 
   .alert[data-status="success"] {
     --_alert-color: var(--color-success);
+    --_alert-fill: var(--color-success-fill);
+    --_alert-on: var(--color-success-on);
     --_alert-bg: var(--color-success-subtle);
     --_alert-border: var(--color-success);
   }
 
   .alert[data-status="warning"] {
     --_alert-color: var(--color-warning);
+    --_alert-fill: var(--color-warning-fill);
+    --_alert-on: var(--color-warning-on);
     --_alert-bg: var(--color-warning-subtle);
     --_alert-border: var(--color-warning);
   }
 
   .alert[data-status="error"] {
     --_alert-color: var(--color-error);
+    --_alert-fill: var(--color-error-fill);
+    --_alert-on: var(--color-error-on);
     --_alert-bg: var(--color-error-subtle);
     --_alert-border: var(--color-error);
   }
 
   .alert[data-status="info"] {
     --_alert-color: var(--color-info);
+    --_alert-fill: var(--color-info-fill);
+    --_alert-on: var(--color-info-on);
     --_alert-bg: var(--color-info-subtle);
     --_alert-border: var(--color-info);
   }
@@ -94,8 +103,8 @@
 
   /* Filled: solid background */
   .alert[data-variant="filled"] {
-    background: var(--_alert-color);
-    color: var(--white);
+    background: var(--_alert-fill);
+    color: var(--_alert-on);
     border-inline-start: none;
   }
 
@@ -107,7 +116,7 @@
   .alert[data-variant="outline"] {
     background: transparent;
     border: var(--border-width) solid var(--_alert-border);
-    border-inline-start-width: 3px;
+    border-inline-start-width: var(--border-width-thick);
   }
 
 
@@ -130,7 +139,7 @@
   }
 
   .alert__title {
-    font-weight: var(--weight-semibold);
+    font-weight: calc(700 + var(--_dark-weight));
     color: var(--_alert-color);
     margin-block-end: var(--space-1);
     display: block;
@@ -142,7 +151,7 @@
 
   .alert__close {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: transparent;
 
     position: relative;
     flex-shrink: 0;
@@ -152,7 +161,6 @@
     inline-size: 1.5rem;
     block-size: 1.5rem;
     padding: 0;
-    border-radius: var(--radius-sm);
     font-size: var(--font-size-lg);
     line-height: 1;
     color: var(--color-text-muted);
@@ -174,9 +182,11 @@
   /* Dismissing animation */
   .alert[data-dismissing] {
     opacity: 0;
-    transform: translateX(var(--space-4));
+    translate: var(--space-4);
   }
 
+  .alert[data-dismissing]:dir(rtl) { translate: calc(-1 * var(--space-4)); }
+
 
   /* ========================================
      TOAST CONTAINER
@@ -218,14 +228,14 @@
 
   .toast-container[data-position="top-center"] {
     inset-block-start: 0;
-    inset-inline-start: 50%;
-    translate: -50% 0;
+    inset-inline: 0;
+    margin-inline: auto;
   }
 
   .toast-container[data-position="bottom-center"] {
     inset-block-end: 0;
-    inset-inline-start: 50%;
-    translate: -50% 0;
+    inset-inline: 0;
+    margin-inline: auto;
   }
 
 
@@ -235,18 +245,19 @@
 
   .toast {
     --_toast-accent: var(--color-info);
-
+    --_toast-fill: var(--color-info-fill);
+    --_toast-on: var(--color-info-on);
+    --_toast-bg: var(--color-info-subtle);
+    --_dir: 1;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-4);
-    padding-inline-start: calc(var(--space-4) + 3px);
-    background: var(--color-surface-raised);
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    background: var(--_toast-bg);
+    border-inline-start: var(--border-width-thick) solid var(--_toast-accent);
+    border-radius: var(--radius-card);
     pointer-events: auto;
     inline-size: 100%;
 
@@ -254,22 +265,12 @@
     animation: toast-in var(--duration-normal) var(--ease-settle) both;
   }
 
-  .toast[data-status="success"] { --_toast-accent: var(--color-success); }
-  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); }
-  .toast[data-status="error"]   { --_toast-accent: var(--color-error); }
-  .toast[data-status="info"]    { --_toast-accent: var(--color-info); }
+  .toast[data-status="success"] { --_toast-accent: var(--color-success); --_toast-fill: var(--color-success-fill); --_toast-on: var(--color-success-on); --_toast-bg: var(--color-success-subtle); }
+  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); --_toast-fill: var(--color-warning-fill); --_toast-on: var(--color-warning-on); --_toast-bg: var(--color-warning-subtle); }
+  .toast[data-status="error"]   { --_toast-accent: var(--color-error); --_toast-fill: var(--color-error-fill); --_toast-on: var(--color-error-on); --_toast-bg: var(--color-error-subtle); }
+  .toast[data-status="info"]    { --_toast-accent: var(--color-info); --_toast-fill: var(--color-info-fill); --_toast-on: var(--color-info-on); --_toast-bg: var(--color-info-subtle); }
 
-  /* Accent bar */
-  .toast::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 3px;
-    block-size: 100%;
-    background: var(--_toast-accent);
-    border-radius: var(--radius-full) 0 0 var(--radius-full);
-  }
+  .toast:dir(rtl) { --_dir: -1; }
 
   .toast__icon {
     flex-shrink: 0;
@@ -286,7 +287,7 @@
 
   .toast__content strong {
     display: block;
-    font-weight: var(--weight-semibold);
+    font-weight: calc(700 + var(--_dark-weight));
     margin-block-end: var(--space-1);
   }
 
@@ -298,7 +299,7 @@
 
   .toast__close {
     --_btn-bg: transparent;
-    --_btn-shadow: none;
+    --_btn-bg-hover: transparent;
 
     position: relative;
     flex-shrink: 0;
@@ -308,7 +309,6 @@
     inline-size: 1.5rem;
     block-size: 1.5rem;
     padding: 0;
-    border-radius: var(--radius-sm);
     font-size: var(--font-size-base);
     color: var(--color-text-subtle);
     cursor: pointer;
@@ -336,15 +336,15 @@
     color: var(--_toast-accent);
     background: transparent;
     border: var(--border-width) solid var(--_toast-accent);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-control);
     cursor: pointer;
     text-decoration: none;
     transition: background-color var(--duration-fast) var(--ease-fluid);
   }
 
   .toast__action:hover {
-    background: var(--_toast-accent);
-    color: var(--white);
+    background: var(--_toast-fill);
+    color: var(--_toast-on);
   }
 
   /* Auto-dismiss progress bar */
@@ -373,50 +373,13 @@
      TOAST ANIMATIONS
      ======================================== */
 
+  /* Logical: the toast slides from and to the inline end (:dir sets --_dir). */
   @keyframes toast-in {
-    from {
-      opacity: 0;
-      transform: translateY(-8px) scale(0.96);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
+    from { opacity: 0; translate: calc(var(--space-4) * var(--_dir)) 0; }
   }
 
   @keyframes toast-out {
-    to {
-      opacity: 0;
-      transform: translateX(100%) scale(0.96);
-    }
-  }
-
-
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: no animations */
-  [data-motion="still"] .toast {
-    animation: none;
-  }
-
-  /* Rapids: offset shadow */
-  [data-motion="rapids"] .toast {
-    box-shadow: var(--shadow-offset);
-  }
-
-  [data-motion="rapids"] .alert {
-    border-inline-start-width: 4px;
-  }
-
-  /* Tsunami: asymmetric */
-  [data-motion="tsunami"] .toast {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
-  }
-
-  [data-motion="tsunami"] .alert {
-    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+    to { opacity: 0; translate: calc(100% * var(--_dir)) 0; }
   }
 
 
@@ -437,10 +400,6 @@
      ======================================== */
 
   @media (prefers-reduced-motion: reduce) {
-    .alert {
-      transition: none;
-    }
-
     .toast {
       animation: none;
     }

package/src/components/avatar.css

@@ -39,8 +39,8 @@
     inline-size: var(--_avatar-size);
     block-size: var(--_avatar-size);
     border-radius: var(--radius-full);
-    background: color-mix(in oklch, var(--accent) 20%, var(--color-surface));
-    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 20%, var(--color-surface));
+    color: var(--accent-ink);
     font-weight: var(--weight-semibold);
     font-size: calc(var(--_avatar-size) * 0.4);
     line-height: 1;
@@ -106,7 +106,7 @@
     inline-size: calc(var(--_avatar-size) * 0.3);
     block-size: calc(var(--_avatar-size) * 0.3);
     border-radius: var(--radius-full);
-    border: 2px solid var(--color-background);
+    border: var(--border-width-thick) solid var(--color-background);
     background: var(--color-text-subtle);
   }
 
@@ -144,17 +144,13 @@
 
   .avatar-group .avatar {
     box-shadow: 0 0 0 2px var(--color-background);
-    transition: transform var(--duration-fast) var(--ease-settle);
   }
 
   .avatar-group .avatar + .avatar {
     margin-inline-start: calc(var(--_avatar-size) * -0.3);
   }
 
-  .avatar-group .avatar:hover {
-    z-index: var(--z-raised);
-    transform: scale(1.1);
-  }
+  .avatar-group .avatar:hover { z-index: var(--z-raised); }
 
   /* Overflow counter: +5 more */
   .avatar-group__overflow {
@@ -176,17 +172,5 @@
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Tsunami: asymmetric corners on square */
-  [data-motion="tsunami"] .avatar[data-shape="square"] {
-    border-radius: var(--radius-asymmetric, 0 12px 0 0);
-  }
 
-  /* Rapids: hard shadow on group */
-  [data-motion="rapids"] .avatar-group .avatar {
-    box-shadow: 2px 2px 0 oklch(0 0 0 / 0.1), 0 0 0 2px var(--color-background);
-  }
 }

package/src/components/badge.css

@@ -21,23 +21,21 @@
      BASE BADGE
      ======================================== */
 
+  /* The label voice in a 1px box: square (--radius-control), transparent. */
   .badge {
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);
-    padding: var(--space-1) var(--space-3);
-    font-size: var(--font-size-xs);
-    font-weight: var(--weight-semibold);
-    line-height: var(--leading-tight);
-    letter-spacing: var(--tracking-wide);
+    padding: 0.35em 0.6em;
+    font: calc(600 + var(--_dark-weight)) var(--step--2) / 1.2 var(--font-body);
+    letter-spacing: var(--tracking-caps);
     text-transform: uppercase;
-    border-radius: var(--radius-full);
+    border: var(--border-width) solid currentColor;
+    border-radius: var(--radius-control);
     white-space: nowrap;
     vertical-align: middle;
-
-    /* Default: accent-tinted */
-    color: var(--accent);
-    background: var(--accent-subtle);
+    color: var(--color-text);
+    background: transparent;
   }
 
 
@@ -47,8 +45,9 @@
 
   /* Filled - solid accent background */
   .badge[data-variant="filled"] {
-    color: var(--white);
+    color: var(--on-accent);
     background: var(--accent);
+    border-color: transparent;
   }
 
   /* Outline - border only */
@@ -61,6 +60,7 @@
   .badge[data-variant="muted"] {
     color: var(--color-text-muted);
     background: var(--color-surface);
+    border-color: transparent;
   }
 
 
@@ -69,6 +69,8 @@
      Semantic states for indicators
      ======================================== */
 
+  /* The status colours are text colours (4.5:1 on their own tint in light
+     and dark); filled badges use the status fill and its on-colour. */
   .badge[data-status="good"] {
     color: var(--color-success);
     background: var(--color-success-subtle);
@@ -89,25 +91,24 @@
     background: var(--color-info-subtle);
   }
 
-  /* Status + filled combo */
   .badge[data-status="good"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-success);
+    color: var(--color-success-on);
+    background: var(--color-success-fill);
   }
 
   .badge[data-status="warning"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-warning);
+    color: var(--color-warning-on);
+    background: var(--color-warning-fill);
   }
 
   .badge[data-status="error"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-error);
+    color: var(--color-error-on);
+    background: var(--color-error-fill);
   }
 
   .badge[data-status="info"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-info);
+    color: var(--color-info-on);
+    background: var(--color-info-fill);
   }
 
 
@@ -116,14 +117,13 @@
      ======================================== */
 
   .badge[data-size="sm"] {
-    padding: var(--space-0-5) var(--space-2);
-    font-size: var(--font-size-2xs, 0.6875rem);
-    letter-spacing: var(--tracking-wider);
+    padding: 0.2em 0.45em;
+    font-size: 0.6875rem;
   }
 
   .badge[data-size="lg"] {
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--font-size-sm);
+    padding: 0.5em 0.8em;
+    font-size: var(--step--1);
   }
 
 
@@ -151,32 +151,9 @@
     min-inline-size: 1.5rem;
     justify-content: center;
     padding: var(--space-1);
-    border-radius: var(--radius-full);
     font-variant-numeric: tabular-nums;
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: square badges */
-  [data-motion="still"] .badge {
-    border-radius: 0;
-    letter-spacing: var(--tracking-wider);
-  }
-
-  /* Brutalist: hard edges, bold */
-  [data-motion="brutalist"] .badge {
-    border-radius: 0;
-    text-transform: uppercase;
-    font-weight: var(--weight-bold);
-    border: 2px solid currentColor;
-    background: transparent;
-  }
 
-  /* Tsunami: asymmetric corners */
-  [data-motion="tsunami"] .badge {
-    border-radius: var(--radius-asymmetric, 0 12px 0 0);
-  }
 }