@kwtv/components 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/components",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "UNLICENSED",
   "type": "module",
   "description": "KWTV UI components for Astro, with React islands. Built on the KWTV design tokens.",
@@ -34,6 +34,6 @@
     }
   },
   "dependencies": {
-    "@kwtv/tokens": "^0.1.2"
+    "@kwtv/tokens": "^0.2.0"
   }
 }

package/src/astro/DotGrid.astro

@@ -1,5 +1,8 @@
 ---
-/** Decorative drifting dot field used behind short hero copy. */
+/** Decorative drifting dot field used behind short hero copy.
+ * Override --dotgrid-color and --dotgrid-opacity for a different backing surface;
+ * verify the brightest moving dot against the copy, not only the flat surface.
+ */
 interface Props {
   compact?: boolean;
   class?: string;
@@ -29,9 +32,9 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
   .pl-dotgrid__dots {
     position: absolute;
     inset: 0;
-    background-image: radial-gradient(var(--sage-light) 1.4px, transparent 1.6px);
+    background-image: radial-gradient(var(--dotgrid-color, var(--sage-light)) 1.4px, transparent 1.6px);
     background-size: 28px 28px;
-    opacity: 0.7;
+    opacity: var(--dotgrid-opacity, var(--dotgrid-theme-opacity, .7));
     animation: pl-drift 6s linear infinite;
   }
 
@@ -54,6 +57,12 @@ const classes = ["pl-dotgrid", compact && "pl-dotgrid--compact", className]
     font-size: var(--text-base);
   }
 
+  /* Explicit themes win over OS preference, as in the token cascade. */
+  :global([data-theme="dark"]) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme])) .pl-dotgrid { --dotgrid-theme-opacity: .2; }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .pl-dotgrid__dots {
       animation: none;

package/src/astro/Footer.astro

@@ -52,8 +52,8 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     grid-template-columns: 1.5fr 1fr 1.3fr;
     gap: var(--space-10);
     padding: var(--space-10);
-    background: var(--sage-xdark);
-    color: var(--ivory-light);
+    background: var(--surface-inverse);
+    color: var(--surface-inverse-fg);
   }
 
   .ui-footer__brandblock {
@@ -71,13 +71,13 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
   }
   .ui-footer__brand :global(span) {
     font-weight: var(--weight-regular);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
 
   .ui-footer__addr {
     font-size: var(--text-sm);
     line-height: var(--leading-sm);
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
   }
   .ui-footer__addr :global(a) {
     color: inherit;
@@ -101,9 +101,9 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     flex-wrap: wrap;
     margin-top: var(--space-4);
     padding-top: var(--space-5);
-    border-top: 1px solid var(--sage-text);
+    border-top: 1px solid var(--surface-inverse-border);
     font-size: var(--text-xs);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
 
   .ui-footer__policies {
@@ -112,7 +112,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     gap: var(--space-4);
   }
   .ui-footer__bar :global(a) {
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -156,7 +156,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
     order: 1;
     font-size: var(--text-lg);
     font-weight: var(--weight-regular);
-    color: var(--sage-light);
+    color: var(--surface-inverse-muted);
   }
   .ui-footer--mobile.ui-footer--site .ui-footer__addr {
     order: 2;
@@ -178,7 +178,7 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
   .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
     width: 48px;
     height: 48px;
-    border: 1px solid var(--sage-text);
+    border: 1px solid var(--surface-inverse-border);
     border-radius: var(--radius-full);
   }
   .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {

package/src/astro/Marquee.astro

@@ -38,11 +38,11 @@ const { items, divider = "✦", class: className } = Astro.props;
 
 <style>
   .ui-marquee {
-    background: var(--sage-xdark);
-    color: var(--ivory-light);
+    background: var(--surface-banner);
+    color: var(--surface-inverse-fg);
     overflow: hidden;
     padding-block: var(--space-3);
-    border-block: 1px solid var(--sage-text);
+    border-block: 1px solid var(--surface-inverse-border);
     transform: rotate(-1.2deg) scale(1.02);
   }
   .ui-marquee__track {

package/src/astro/Newsletter.astro

@@ -69,21 +69,21 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
     min-width: 0;
     min-height: 48px;
     padding: 0 var(--space-4);
-    background: var(--ivory-xlight);
-    border: 1px solid transparent;
+    background: var(--surface-light);
+    border: 1px solid var(--border-strong-light);
     border-radius: var(--radius-md);
     font-family: var(--font-sans);
     font-size: var(--text-sm);
-    color: var(--text);
+    color: var(--text-light);
   }
   .ui-news__input::placeholder {
-    color: var(--text-muted);
+    color: var(--text-muted-light);
   }
   .ui-news__input:focus-visible,
   .ui-news__input.is-focus {
-    outline: 2px solid var(--ivory-xlight);
+    outline: 2px solid var(--focus);
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 4px var(--focus-outer);
   }
 
   .ui-news__btn {
@@ -105,9 +105,9 @@ const classes = ["ui-news", stacked && "ui-news--stacked", className]
     background: var(--sage-xlight);
   }
   .ui-news__btn:focus-visible {
-    outline: 2px solid var(--ivory-xlight);
+    outline: 2px solid var(--focus);
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 4px var(--focus-outer);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/astro/Sticker.astro

@@ -14,7 +14,7 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
 
 <span class={classes} aria-hidden="true" {...rest}>
   <svg class="pl-sticker__disc" viewBox="0 0 112 112">
-    <circle cx="56" cy="56" r="52" fill="var(--sage-xdark)"></circle>
+    <circle cx="56" cy="56" r="52" fill="var(--surface-inverse)"></circle>
     <circle class="pl-sticker__ring" cx="56" cy="56" r="47" fill="none" stroke="var(--sage-light)" stroke-width="1.5" stroke-dasharray="5 7"></circle>
   </svg>
   <span class="pl-sticker__content">
@@ -58,7 +58,7 @@ const classes = ["pl-sticker", `pl-sticker--${size}`, className]
     align-items: center;
     justify-content: center;
     gap: var(--space-1);
-    color: var(--ivory-light);
+    color: var(--surface-inverse-fg);
     text-align: center;
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);

package/src/astro/TextField.astro

@@ -144,7 +144,7 @@ const charCount = count && maxlength ? `${String(value).length} / ${maxlength}`
     min-height: 40px;
     padding: var(--space-2) var(--space-3);
     background: var(--surface);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-strong);
     border-radius: var(--radius-md);
     font-family: var(--font-sans);
     font-size: var(--text-sm);

package/src/react/NewsCarousel.css

@@ -97,7 +97,7 @@
   padding: 0;
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--border);
+  background: var(--border-strong);
   cursor: pointer;
   transition:
     width var(--duration-base) var(--ease-enter),
@@ -107,7 +107,7 @@
 
 .pl-news-dot[data-on] {
   width: 22px;
-  background: var(--sage-xdark);
+  background: var(--primary);
 }
 
 .pl-news-dot:focus-visible {

package/src/react/Select.css

@@ -46,7 +46,7 @@
   min-height: 40px;
   padding: 0 var(--space-3);
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-strong);
   border-radius: var(--radius-md);
   color: var(--text);
   font-family: var(--font-sans);