@kwtv/components 0.2.0 → 0.4.0

package/src/styles/motion.css

@@ -14,225 +14,229 @@
  * Import `@kwtv/tokens/tokens.css` before this file.
  */
 
-/* The default tone is the accent. Rust and Clay used to be the two choices
-   here; Burgundy replaced both, so the alternative tone is Sage instead. */
-.pl-root {
-  --play: var(--accent);
-}
-.pl-root[data-tone="sage"] {
-  --play: var(--primary);
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-/* Hover lift. −5 px, shadow-lg, photo scales slightly. --tilt rotates, never
-   past 6deg, and never on text. */
-.pl-lift {
-  --tilt: 0deg;
-  transition:
-    transform var(--duration-base) var(--ease-standard),
-    box-shadow var(--duration-base) var(--ease-standard);
-}
-.pl-lift:hover,
-.pl-lift:focus-within {
-  transform: translateY(-5px) rotate(var(--tilt));
-  box-shadow: var(--shadow-lg);
-}
-.pl-lift :is(img, .ui-product__img) {
-  transition: transform var(--duration-base) var(--ease-standard);
-}
-.pl-lift:hover :is(img, .ui-product__img) {
-  transform: scale(1.04);
-}
+@layer motion {
+  /* The default tone is the accent. Rust and Clay used to be the two choices
+     here; Burgundy replaced both, so the alternative tone is Sage instead. */
+  .pl-root {
+    --play: var(--accent);
+  }
+  .pl-root[data-tone="sage"] {
+    --play: var(--primary);
+  }
 
-/* Drawn underline. 3 px, left to right, 200 ms. Sage in the hero. */
-.pl-ul {
-  position: relative;
-  text-decoration: none;
-  color: inherit;
-}
-.pl-ul::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  height: 3px;
-  background: var(--play);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform var(--duration-base) var(--ease-standard);
-}
-.pl-ul:hover::after,
-.pl-ul:focus-visible::after {
-  transform: scaleX(1);
-}
-.pl-hero .pl-ul::after {
-  background: var(--sage-text);
-}
+  /* Hover lift. −5 px, shadow-lg, photo scales slightly. --tilt rotates, never
+     past 6deg, and never on text. */
+  .pl-lift {
+    --tilt: 0deg;
+    transition:
+      transform var(--duration-base) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+  }
+  .pl-lift:hover,
+  .pl-lift:focus-within {
+    transform: translateY(-5px) rotate(var(--tilt));
+    box-shadow: var(--shadow-lg);
+  }
+  .pl-lift :is(img, .ui-product__img) {
+    transition: transform var(--duration-base) var(--ease-standard);
+  }
+  .pl-lift:hover :is(img, .ui-product__img) {
+    transform: scale(1.04);
+  }
 
-/* Arrow nudge. +5 px on the parent's hover. */
-.pl-arrow {
-  display: inline-flex;
-  transition: transform var(--duration-fast) var(--ease-standard);
-}
-:hover > .pl-arrow,
-:focus-visible > .pl-arrow {
-  transform: translateX(5px);
-}
+  /* Drawn underline. 3 px, left to right, 200 ms. Sage in the hero. */
+  .pl-ul {
+    position: relative;
+    text-decoration: none;
+    color: inherit;
+  }
+  .pl-ul::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -2px;
+    height: 3px;
+    background: var(--play);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform var(--duration-base) var(--ease-standard);
+  }
+  .pl-ul:hover::after,
+  .pl-ul:focus-visible::after {
+    transform: scaleX(1);
+  }
+  .pl-hero .pl-ul::after {
+    background: var(--sage-text);
+  }
 
-/* Row nudge. +6 px, and a table row gets a 3 px edge. */
-.pl-row {
-  display: block;
-  transition: transform var(--duration-fast) var(--ease-standard);
-}
-.pl-row:hover,
-.pl-row:focus-visible {
-  transform: translateX(6px);
-}
-.pl-tr {
-  transition: box-shadow var(--duration-fast) var(--ease-standard);
-}
-.pl-tr:hover {
-  box-shadow: inset 3px 0 0 var(--play);
-}
+  /* Arrow nudge. +5 px on the parent's hover. */
+  .pl-arrow {
+    display: inline-flex;
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+  :hover > .pl-arrow,
+  :focus-visible > .pl-arrow {
+    transform: translateX(5px);
+  }
 
-/* Entrance and press. Rise is staggered by animation-delay at the call site. */
-.pl-rise {
-  animation: pl-rise var(--duration-slow) var(--ease-enter) both;
-}
-@keyframes pl-rise {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+  /* Row nudge. +6 px, and a table row gets a 3 px edge. */
+  .pl-row {
+    display: block;
+    transition: transform var(--duration-fast) var(--ease-standard);
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  .pl-row:hover,
+  .pl-row:focus-visible {
+    transform: translateX(6px);
   }
-}
-.pl-press {
-  transition: transform var(--duration-fast) var(--ease-standard);
-}
-.pl-press:active {
-  transform: scale(0.97);
-}
-.pl-btn-bounce:hover {
-  animation: pl-wiggle var(--duration-slower) var(--ease-spring);
-}
-@keyframes pl-wiggle {
-  25% {
-    transform: rotate(-2deg);
+  .pl-tr {
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
   }
-  75% {
-    transform: rotate(2deg);
+  .pl-tr:hover {
+    box-shadow: inset 3px 0 0 var(--play);
   }
-}
 
-/* Decorative loops for the composed home-page pieces. All aria-hidden at the
-   call site. */
-@keyframes pl-drift {
-  to {
-    background-position: 28px 28px;
+  /* Entrance and press. Rise is staggered by animation-delay at the call site. */
+  .pl-rise {
+    animation: pl-rise var(--duration-slow) var(--ease-enter) both;
   }
-}
-@keyframes pl-spin {
-  to {
-    transform: rotate(360deg);
+  @keyframes pl-rise {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
-@keyframes pl-bob {
-  50% {
-    transform: translateY(4px);
+  .pl-press {
+    transition: transform var(--duration-fast) var(--ease-standard);
   }
-}
-@keyframes pl-marquee {
-  to {
-    transform: translateX(-50%);
+  .pl-press:active {
+    transform: scale(0.97);
+  }
+  .pl-btn-bounce:hover {
+    animation: pl-wiggle var(--duration-slower) var(--ease-spring);
+  }
+  @keyframes pl-wiggle {
+    25% {
+      transform: rotate(-2deg);
+    }
+    75% {
+      transform: rotate(2deg);
+    }
   }
-}
 
-/* Horizontal category rail. The current item is marked with data-on. */
-.pl-chips {
-  display: flex;
-  gap: var(--space-2);
-  overflow-x: auto;
-  padding: var(--space-0-5, 2px) var(--space-5) var(--space-2);
-  scrollbar-width: none;
-}
-.pl-chips::-webkit-scrollbar {
-  display: none;
-}
-.pl-chip {
-  flex: none;
-  min-height: 44px;
-  padding: var(--space-2) var(--space-3-5, 14px);
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-full);
-  background: var(--surface);
-  color: var(--text);
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-  text-decoration: none;
-  white-space: nowrap;
-}
-.pl-chip:hover {
-  border-color: var(--border-strong);
-  color: var(--text);
-}
-.pl-chip:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
-.pl-chip[data-on="1"] {
-  border-color: var(--sage-xdark);
-  background: var(--sage-xdark);
-  color: var(--ivory-light);
-}
+  /* Decorative loops for the composed home-page pieces. All aria-hidden at the
+     call site. */
+  @keyframes pl-drift {
+    to {
+      background-position: 28px 28px;
+    }
+  }
+  @keyframes pl-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes pl-bob {
+    50% {
+      transform: translateY(4px);
+    }
+  }
+  @keyframes pl-marquee {
+    to {
+      transform: translateX(-50%);
+    }
+  }
 
-/* Mobile product rail. Consumers use a regular grid at wider viewports. */
-.pl-carousel {
-  display: flex;
-  gap: var(--space-3);
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  padding: 0 var(--space-5) var(--space-2);
-}
-.pl-carousel::-webkit-scrollbar {
-  display: none;
-}
-.pl-carousel > * {
-  flex: 0 0 86%;
-  scroll-snap-align: center;
-}
-.pl-carousel:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+  /* Horizontal category rail. The current item is marked with data-on. */
+  .pl-chips {
+    display: flex;
+    gap: var(--space-2);
+    overflow-x: auto;
+    padding: var(--space-0-5, 2px) var(--space-5) var(--space-2);
+    scrollbar-width: none;
+  }
+  .pl-chips::-webkit-scrollbar {
+    display: none;
+  }
+  .pl-chip {
+    flex: none;
+    min-height: 44px;
+    padding: var(--space-2) var(--space-3-5, 14px);
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    background: var(--surface);
+    color: var(--text);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .pl-chip:hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+  .pl-chip:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+  .pl-chip[data-on="1"] {
+    border-color: var(--sage-xdark);
+    background: var(--sage-xdark);
+    color: var(--ivory-light);
+  }
 
-/* The kill switch and the OS setting both stop every loop and transition in
-   the layer, so it degrades to the plain components. */
-.pl-root[data-motion="off"] *,
-.pl-root[data-motion="off"] *::after,
-.pl-root[data-motion="off"] *::before {
-  animation: none !important;
-  transition: none !important;
-}
+  /* Mobile product rail. Consumers use a regular grid at wider viewports. */
+  .pl-carousel {
+    display: flex;
+    gap: var(--space-3);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding: 0 var(--space-5) var(--space-2);
+  }
+  .pl-carousel::-webkit-scrollbar {
+    display: none;
+  }
+  .pl-carousel > * {
+    flex: 0 0 86%;
+    scroll-snap-align: center;
+  }
+  .pl-carousel:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .pl-root *,
-  .pl-root *::after,
-  .pl-root *::before {
+  /* The kill switch and the OS setting both stop every loop and transition in
+     the layer, so it degrades to the plain components. */
+  .pl-root[data-motion="off"] *,
+  .pl-root[data-motion="off"] *::after,
+  .pl-root[data-motion="off"] *::before {
     animation: none !important;
     transition: none !important;
   }
-  .pl-lift:hover,
-  .pl-lift:focus-within {
-    transform: none;
-  }
-  .pl-ul::after {
-    transform: scaleX(1);
+
+  @media (prefers-reduced-motion: reduce) {
+    .pl-root *,
+    .pl-root *::after,
+    .pl-root *::before {
+      animation: none !important;
+      transition: none !important;
+    }
+    .pl-lift:hover,
+    .pl-lift:focus-within {
+      transform: none;
+    }
+    .pl-ul::after {
+      transform: scaleX(1);
+    }
   }
 }