@kwtv/components 0.2.0 → 0.4.0

package/src/react/Toast.css

@@ -1,140 +1,144 @@
 /* Toast. All values from the design-system tokens. */
 
-.ui-toast-region {
-  position: fixed;
-  z-index: var(--z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-4);
-  /* Shrink-wrap to the toasts instead of covering a whole corner, so the empty
-     area never overlays or blocks clicks on the page behind it. */
-  width: max-content;
-  max-width: 100vw;
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-.ui-toast-region--bottom-right {
-  right: 0;
-  bottom: 0;
-  align-items: flex-end;
-}
+@layer components {
+  .ui-toast-region {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    /* Shrink-wrap to the toasts instead of covering a whole corner, so the empty
+       area never overlays or blocks clicks on the page behind it. */
+    width: max-content;
+    max-width: 100vw;
+  }
 
-.ui-toast-region--bottom-center {
-  left: 50%;
-  bottom: 0;
-  transform: translateX(-50%);
-  align-items: center;
-}
+  .ui-toast-region--bottom-right {
+    right: 0;
+    bottom: 0;
+    align-items: flex-end;
+  }
 
-/* A light card lifted off the page by its shadow. Dark text keeps every word
-   at full contrast; the tone shows in a coloured icon, not the surface. */
-.ui-toast {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  width: 100%;
-  max-width: 380px;
-  padding: var(--space-4);
-  /* ivory-light, not ivory-base: ivory-base (#C9C2B1) is dark enough that the
-     undo link drops to 3.79 on it, the very contrast problem this redesign
-     fixes. ivory-light keeps a warm card distinct from the page and clears AA
-     for the link (5.65) and everything on it. */
-  background: var(--surface-hover);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
-  color: var(--text);
-  pointer-events: auto;
-  animation: ui-toast-in var(--duration-base) var(--ease-enter);
-}
+  .ui-toast-region--bottom-center {
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    align-items: center;
+  }
 
-.ui-toast__icon {
-  display: inline-flex;
-  flex: none;
-  margin-top: 1px;
-}
+  /* A light card lifted off the page by its shadow. Dark text keeps every word
+     at full contrast; the tone shows in a coloured icon, not the surface. */
+  .ui-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    width: 100%;
+    max-width: 380px;
+    padding: var(--space-4);
+    /* ivory-light, not ivory-base: ivory-base (#C9C2B1) is dark enough that the
+       undo link drops to 3.79 on it, the very contrast problem this redesign
+       fixes. ivory-light keeps a warm card distinct from the page and clears AA
+       for the link (5.65) and everything on it. */
+    background: var(--surface-hover);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text);
+    pointer-events: auto;
+    animation: ui-toast-in var(--duration-base) var(--ease-enter);
+  }
 
-/* One coloured icon per tone. The status roles already clear 4.5:1 on the
-   light surface, so the glyph carries the meaning without tinting the card. */
-.ui-toast--success .ui-toast__icon {
-  color: var(--success);
-}
-.ui-toast--danger .ui-toast__icon {
-  color: var(--danger);
-}
-.ui-toast--warning .ui-toast__icon {
-  color: var(--warning);
-}
-.ui-toast--info .ui-toast__icon {
-  color: var(--primary);
-}
+  .ui-toast__icon {
+    display: inline-flex;
+    flex: none;
+    margin-top: 1px;
+  }
 
-.ui-toast__msg {
-  flex: 1;
-}
+  /* One coloured icon per tone. The status roles already clear 4.5:1 on the
+     light surface, so the glyph carries the meaning without tinting the card. */
+  .ui-toast--success .ui-toast__icon {
+    color: var(--success);
+  }
+  .ui-toast--danger .ui-toast__icon {
+    color: var(--danger);
+  }
+  .ui-toast--warning .ui-toast__icon {
+    color: var(--warning);
+  }
+  .ui-toast--info .ui-toast__icon {
+    color: var(--primary);
+  }
 
-.ui-toast__action {
-  display: inline-block;
-  margin-top: var(--space-1);
-  background: none;
-  border: 0;
-  padding: 0;
-  font: inherit;
-  font-weight: var(--weight-semibold);
-  color: var(--link);
-  text-decoration: underline;
-  cursor: pointer;
-}
-.ui-toast__action:hover {
-  color: var(--link-hover);
-}
-.ui-toast__action:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
+  .ui-toast__msg {
+    flex: 1;
+  }
 
-.ui-toast__x {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin: -2px -2px 0 0;
-  background: none;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-}
-.ui-toast__x:hover {
-  color: var(--text);
-  background: var(--surface-hover);
-}
-.ui-toast__x:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+  .ui-toast__action {
+    display: inline-block;
+    margin-top: var(--space-1);
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    font-weight: var(--weight-semibold);
+    color: var(--link);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .ui-toast__action:hover {
+    color: var(--link-hover);
+  }
+  .ui-toast__action:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
 
-/* The SVG in the close button is decorative. Let clicks and the cursor fall
-   through to the button, so its pointer cursor always shows. */
-.ui-toast__x svg,
-.ui-toast__action svg {
-  pointer-events: none;
-}
+  .ui-toast__x {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: -2px -2px 0 0;
+    background: none;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .ui-toast__x:hover {
+    color: var(--text);
+    background: var(--surface-hover);
+  }
+  .ui-toast__x:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
 
-@keyframes ui-toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
+  /* The SVG in the close button is decorative. Let clicks and the cursor fall
+     through to the button, so its pointer cursor always shows. */
+  .ui-toast__x svg,
+  .ui-toast__action svg {
+    pointer-events: none;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ui-toast {
-    animation: none;
+  @keyframes ui-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-toast {
+      animation: none;
+    }
   }
 }

package/src/react/Toast.tsx

@@ -71,20 +71,54 @@ export function Toast({
     >
       <span className="ui-toast__icon" aria-hidden="true">
         {tone === "success" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <path d="M5 13l4 4L19 7" />
           </svg>
         ) : tone === "warning" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
             <path d="M12 4l8.5 15h-17L12 4zM12 10v4M12 16.5v.5" />
           </svg>
         ) : tone === "info" ? (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
             <circle cx="12" cy="12" r="9" />
             <path d="M12 11v5M12 8v.5" />
           </svg>
         ) : (
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          >
             <circle cx="12" cy="12" r="9" />
             <path d="M12 8v4.5M12 16v.5" />
           </svg>

package/src/styles/base.css

@@ -7,33 +7,37 @@
  * `@kwtv/tokens/tokens.css` before this file.
  */
 
-/* Screen-reader-only, still announced. */
-.ui-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-/* The two-tone focus ring. An outer halo keeps the ring visible on mid-tone
-   fills where a single colour would disappear. SC 2.4.7 and 2.4.11. */
-.ui-focus-ring:focus-visible,
-.ui-focus-ring.ui-focus-ring--pinned {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-  box-shadow: 0 0 0 4px var(--focus-outer);
-}
+@layer base {
+  /* Screen-reader-only, still announced. */
+  .ui-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* The two-tone focus ring. An outer halo keeps the ring visible on mid-tone
+     fills where a single colour would disappear. SC 2.4.7 and 2.4.11. */
+  .ui-focus-ring:focus-visible,
+  .ui-focus-ring.ui-focus-ring--pinned {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
 
-/* Touch-target floor. Labelled rows and small controls hold 32 px, icon-only
-   controls hold 44 px, the mobile primary action holds 48 px. The lever is the
-   label or the row, not the native control inside it. */
-@media (max-width: 700px), (pointer: coarse) {
-  .ui-touch :where(button, a, label, [role="button"]):not(.ui-touch--exempt) {
-    min-height: 32px;
+  /* Touch-target floor. Labelled rows and small controls hold 32 px, icon-only
+     controls hold 44 px, the mobile primary action holds 48 px. The lever is the
+     label or the row, not the native control inside it. */
+  @media (max-width: 700px), (pointer: coarse) {
+    .ui-touch :where(button, a, label, [role="button"]):not(.ui-touch--exempt) {
+      min-height: 32px;
+    }
   }
 }