@warmio/design 1.7.0 → 1.8.0

package/LICENSES/fluid-functionalism.txt

@@ -0,0 +1,24 @@
+Fluid Functionalism
+https://github.com/mickadesign/fluid-functionalism
+
+MIT License
+
+Copyright (c) 2026 Micka Touillaud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -25,6 +25,11 @@ Package ships `components.css` (token-only styles for the primitives) and `dist/
 
 ## Releases
 
+The next version, `1.8.0`, adds Fluid-derived surface-only Button press feedback.
+The label, hit target, and layout stay fixed. Reduced motion removes surface travel.
+The implementation uses native CSS and adds no JavaScript dependency.
+Upstream attribution is in `LICENSES/fluid-functionalism.txt`.
+
 Bump this `package.json` version for additive tokens (incl. motion/surface), fonts,
 spacing, or primitive changes. Follow the exact sequence in
 [docs/reference/DESIGN_PACKAGE.md](../../docs/reference/DESIGN_PACKAGE.md)

package/components.css

@@ -1,11 +1,13 @@
-/* @warmio/design components.css - token-only, parity with prior Button/Logo contract.
- * Rebuilt from exact UIWarm primitive/button.variants + presentation maps + variant overrides + button-edge recipes.
- * Uses only design tokens + data attrs. No literals where tokens exist.
- * Motion via --motion-* (aliased); reduced-motion zeros non-essentials.
- * All 16 presentations, 6 variants, 4 sizes + full + states produce matching computed geometry/styles.
+/* @warmio/design components.css - Warm Button/Logo recipes.
+ * Colors, typography, geometry, and edges remain Warm-owned.
+ * Surface-only press feedback adapted from Fluid Functionalism (MIT):
+ * https://www.fluidfunctionalism.com/r/base/button.json
+ * Native CSS keeps the published primitive free of a motion runtime.
  */
 
 [data-warm-button] {
+  position: relative;
+  isolation: isolate;
   /* Strip native button chrome when this stylesheet is used without preflight.
    * `appearance` is deliberately left at its UA default (matches the
    * pre-migration PrimitiveButton/buttonVariants recipe, which never applied
@@ -41,6 +43,27 @@
   /* border handled by variant shadows/tokens; no default regression border */
 }
 
+/* Move only the painted surface, never the label or the hit target. Fluid's
+ * fixed 1px-per-edge collapse avoids width-dependent scaling of wide buttons.
+ * Warm gradients and edge shadows stay on this layer at their original bounds. */
+[data-warm-button]::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  background-image: none;
+  background-clip: inherit;
+  box-shadow: none;
+  pointer-events: none;
+  transition-property: var(--button-surface-transition-property);
+  transition-duration:
+    calc(var(--motion-duration-fast) * 1.8), calc(var(--motion-duration-fast) * 0.8),
+    calc(var(--motion-duration-fast) * 1.8);
+  transition-timing-function: var(--button-press-easing);
+}
+
 [data-warm-button]:focus-visible {
   box-shadow: 0 0 0 var(--button-focus-ring)
     color-mix(in oklab, var(--ring) var(--button-mix-50), transparent);
@@ -50,89 +73,102 @@
   width: var(--button-width-full);
 }
 
-/* Active scale + full motion reduce (legacy: active:not-aria-[haspopup]:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100) */
-[data-warm-button]:active:not([aria-haspopup]) {
-  transform: scale(0.97);
+[data-warm-button]:not(:disabled):not([aria-disabled='true']):not(
+  [data-variant='arrow']
+):active::before {
+  inset: var(--button-press-inset);
+  transition-duration: calc(var(--motion-duration-fast) * 0.8);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-warm-button] {
+  [data-warm-button],
+  [data-warm-button]::before {
     transition: none;
   }
-  [data-warm-button]:active:not([aria-haspopup]) {
-    transform: none;
+  [data-warm-button]:not(:disabled):not([aria-disabled='true']):not(
+    [data-variant='arrow']
+  ):active::before {
+    inset: 0;
   }
 }
 
 /* Variants (from cva + overrides + edge; tokens for color/shadow/radius) */
 [data-warm-button][data-variant='default'] {
+  color: var(--button-primary-foreground);
+}
+[data-warm-button][data-variant='default']::before {
   background-color: var(--button-primary-bg);
   background-image: var(--button-primary-gradient);
-  color: var(--button-primary-foreground);
   box-shadow: var(--button-primary-shadow);
   /* no explicit border to avoid regression; shadow provides chrome */
 }
-[data-warm-button][data-variant='default']:hover {
+[data-warm-button][data-variant='default']:hover::before {
   background-color: var(--button-primary-hover);
   background-image: var(--button-primary-gradient-hover);
 }
-[data-warm-button][data-variant='default']:active {
+[data-warm-button][data-variant='default']:active::before {
   background-color: var(--button-primary-active);
 }
 
 [data-warm-button][data-variant='outline'] {
+  border-style: none;
+}
+[data-warm-button][data-variant='outline']::before {
   background-color: var(--background);
   box-shadow: var(--button-outline-shadow);
-  border-style: none;
 }
 [data-warm-button][data-variant='outline']:hover {
-  background-color: var(--muted);
   color: var(--foreground);
 }
-.dark [data-warm-button][data-variant='outline'] {
+[data-warm-button][data-variant='outline']:hover::before {
+  background-color: var(--muted);
+}
+.dark [data-warm-button][data-variant='outline']::before {
   background-color: var(--warm-surface-raised-dark, var(--input));
   box-shadow: var(--button-outline-shadow-inset);
 }
-.dark [data-warm-button][data-variant='outline']:hover {
+.dark [data-warm-button][data-variant='outline']:hover::before {
   background-color: var(--warm-surface-raised-hover-dark, var(--muted));
 }
 [data-warm-button][data-variant='outline']:disabled {
   opacity: 1;
-  background-color: var(--muted);
   color: var(--muted-foreground);
+}
+[data-warm-button][data-variant='outline']:disabled::before {
+  background-color: var(--muted);
   box-shadow: var(--button-outline-shadow);
 }
-.dark [data-warm-button][data-variant='outline']:disabled {
+.dark [data-warm-button][data-variant='outline']:disabled::before {
   background-color: color-mix(in oklab, var(--input) var(--button-mix-20), transparent);
   box-shadow: var(--button-outline-shadow-inset);
 }
 
-[data-warm-button][data-variant='ghost'] {
-  /* `background-color` (not the `background` shorthand): the shorthand
-     implicitly resets `background-clip` to its initial `border-box`,
-     diverging from the base recipe's `padding-box` (origin: `bg-clip-padding`
-     with no resting-state Tailwind `bg-*` utility on ghost). */
+[data-warm-button][data-variant='ghost']::before {
   background-color: transparent;
 }
 [data-warm-button][data-variant='ghost']:hover {
-  background-color: var(--muted);
   color: var(--foreground);
 }
-.dark [data-warm-button][data-variant='ghost']:hover {
+[data-warm-button][data-variant='ghost']:hover::before {
+  background-color: var(--muted);
+}
+.dark [data-warm-button][data-variant='ghost']:hover::before {
   background-color: color-mix(in oklab, var(--muted) var(--button-mix-50), transparent);
 }
 
 [data-warm-button][data-variant='destructive'] {
-  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-10), transparent);
   color: var(--destructive);
 }
-[data-warm-button][data-variant='destructive']:hover {
+[data-warm-button][data-variant='destructive']::before {
+  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-10), transparent);
+}
+[data-warm-button][data-variant='destructive']:hover::before {
   background-color: color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
 }
-.dark [data-warm-button][data-variant='destructive'] {
+.dark [data-warm-button][data-variant='destructive']::before {
   background-color: color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
 }
-.dark [data-warm-button][data-variant='destructive']:hover {
+.dark [data-warm-button][data-variant='destructive']:hover::before {
   background-color: color-mix(in oklab, var(--destructive) var(--button-mix-30), transparent);
 }
 
@@ -148,8 +184,10 @@
      shadow is deliberately NOT `!important`: promptCategory's own
      `shadow-xs` legitimately overrides apple's outline-style shadow (see
      the promptCategory rules above), matching origin exactly. */
-  background-color: var(--apple-button-background) !important;
   color: var(--apple-button-foreground) !important;
+}
+[data-warm-button][data-variant='apple']::before {
+  background-color: var(--apple-button-background) !important;
   box-shadow: var(--button-outline-shadow);
 }
 button[data-warm-button][data-variant='apple'] {
@@ -157,12 +195,14 @@ button[data-warm-button][data-variant='apple'] {
   background-clip: padding-box;
 }
 [data-warm-button][data-variant='apple']:hover {
+  color: var(--apple-button-foreground);
+}
+[data-warm-button][data-variant='apple']:hover::before {
   background-color: color-mix(
     in oklab,
     var(--apple-button-hover) var(--button-mix-90),
     transparent
   );
-  color: var(--apple-button-foreground);
 }
 [data-warm-button][data-variant='arrow'] {
   border-width: 0;
@@ -229,18 +269,6 @@ button[data-warm-button][data-variant='apple'] {
   height: var(--button-size-xs);
   padding: var(--button-padding-y-md);
 }
-[data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size]):active:not(
-  [aria-haspopup]
-) {
-  transform: scale(0.9);
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size]):active:not(
-    [aria-haspopup]
-  ) {
-    transform: none;
-  }
-}
 [data-warm-button][data-presentation='assistantRoundIcon']:not([data-explicit-size]) {
   /* old icon-round 36px */
   width: var(--button-height-icon);
@@ -271,7 +299,6 @@ button[data-warm-button][data-variant='apple'] {
 [data-warm-button][data-presentation='promptCategory']:not([data-explicit-size]) {
   height: var(--button-height-default);
   gap: var(--button-gap);
-  background-color: var(--background);
   padding-left: var(--button-padding-x);
   padding-right: var(--button-padding-x);
   font-size: var(--button-font-size);
@@ -279,11 +306,14 @@ button[data-warm-button][data-variant='apple'] {
   color: var(--foreground);
   transition-property: var(--button-transition-property-colors);
 }
+[data-warm-button][data-presentation='promptCategory']:not([data-explicit-size])::before {
+  background-color: var(--background);
+}
 /* legacy's `getButtonEdgeClassName` applies `shadow-xs!` (Tailwind's `!`
    important modifier) to every `default`-variant promptCategory button
    regardless of explicit/implicit sizing, overriding the default variant's
    own gradient shadow unconditionally; mirror that with `!important` here. */
-[data-warm-button][data-presentation='promptCategory'][data-variant='default'] {
+[data-warm-button][data-presentation='promptCategory'][data-variant='default']::before {
   box-shadow: var(--shadow-xs) !important;
 }
 /* buttonPresentationClasses.promptCategory's own (non-!important) `shadow-xs`
@@ -293,10 +323,10 @@ button[data-warm-button][data-variant='apple'] {
    default is already covered, unconditionally, by the rule above. */
 [data-warm-button][data-presentation='promptCategory']:not([data-explicit-size]):not(
   [data-variant='arrow']
-) {
+)::before {
   box-shadow: var(--shadow-xs) !important;
 }
-[data-warm-button][data-presentation='promptCategory']:hover {
+[data-warm-button][data-presentation='promptCategory']:hover::before {
   background-color: var(--muted);
 }
 [data-warm-button][data-presentation='promptOption']:not([data-explicit-size]) {
@@ -313,9 +343,11 @@ button[data-warm-button][data-variant='apple'] {
   background-clip: border-box;
 }
 [data-warm-button][data-presentation='sidebarIcon']:hover {
-  background-color: var(--sidebar-accent);
   color: var(--sidebar-accent-foreground);
 }
+[data-warm-button][data-presentation='sidebarIcon']:hover::before {
+  background-color: var(--sidebar-accent);
+}
 [data-warm-button][data-presentation='tableHeader']:not([data-explicit-size]) {
   height: auto;
   min-height: 0;
@@ -332,9 +364,11 @@ button[data-warm-button][data-variant='apple'] {
   color: var(--muted-foreground);
 }
 [data-warm-button][data-presentation='tableHeader']:hover {
-  background-color: transparent;
   color: var(--foreground);
 }
+[data-warm-button][data-presentation='tableHeader']:hover::before {
+  background-color: transparent;
+}
 [data-warm-button][data-presentation='touch']:not([data-explicit-size]) {
   min-height: var(--button-min-height-touch);
 }
@@ -352,7 +386,7 @@ button[data-warm-button][data-variant='apple'] {
   font-size: var(--button-font-size);
   font-weight: 400;
 }
-[data-warm-button][data-presentation='threadNew']:hover {
+[data-warm-button][data-presentation='threadNew']:hover::before {
   background-color: var(--muted);
 }
 [data-warm-button][data-presentation='compact']:not([data-explicit-size]) {
@@ -400,9 +434,6 @@ button[data-warm-button][data-variant='apple'] {
   height: auto;
   padding: 0;
   gap: var(--button-gap);
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
   border-radius: 0;
   color: var(--foreground);
   font-size: var(--button-font-size-base);
@@ -416,6 +447,11 @@ button[data-warm-button][data-variant='apple'] {
   line-height: var(--button-line-height-base);
   font-weight: 700;
 }
+[data-warm-button][data-variant='arrow'][data-variant='arrow']::before {
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
 
 /* SVG rules (from cva) */
 [data-warm-button] svg {
@@ -475,9 +511,12 @@ button[data-warm-button][data-variant='apple'] {
 }
 [data-warm-button][data-variant='ghost'][aria-expanded='true'],
 [data-warm-button][data-variant='outline'][aria-expanded='true'] {
-  background-color: var(--muted);
   color: var(--foreground);
 }
+[data-warm-button][data-variant='ghost'][aria-expanded='true']::before,
+[data-warm-button][data-variant='outline'][aria-expanded='true']::before {
+  background-color: var(--muted);
+}
 
 /* Disabled base + variant overrides (keep full shadow/border for some) */
 [data-warm-button]:disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warmio/design",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Warm's public design contract: CSS tokens and Button/Logo primitives.",
   "license": "MIT",
   "type": "module",

package/theme.css

@@ -58,10 +58,10 @@
      SURFACES — From brand-neutral
      Backgrounds, cards, borders - subtle tinted neutrals.
      ══════════════════════════════════════════════════════════════════════════ */
-  --background: oklch(1 0 0);
+  --background: rgba(230, 230, 230, 1);
   --foreground: oklch(0.147 0 0);
-  --card: oklch(1 0 0);
-  --card-gradient-start: oklch(1 0 0);
+  --card: rgba(240, 240, 240, 1);
+  --card-gradient-start: rgba(240, 240, 240, 1);
   --card-foreground: var(--foreground);
   --popover: var(--card);
   --popover-foreground: var(--foreground);
@@ -100,7 +100,7 @@
   /* ══════════════════════════════════════════════════════════════════════════
      SIDEBAR — Transparent to show body texture
      ══════════════════════════════════════════════════════════════════════════ */
-  --sidebar: oklch(0.986 0 0);
+  --sidebar: rgba(230, 230, 230, 1);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
@@ -227,6 +227,8 @@
   --motion-distance-sm: 0.25rem;
   --motion-distance-md: 0.5rem;
   --motion-distance-lg: 1rem;
+  --button-press-inset: 1px;
+  --button-press-easing: cubic-bezier(0.23, 1, 0.32, 1);
 
   /* Aliases keep one scale; legacy names resolve to motion; chart uses slow (nonessential scale) */
   --transition-fast: var(--motion-duration-fast);
@@ -304,6 +306,7 @@
   --logo-letter-spacing: 0.025em;
   --logo-gap: 0.5rem;
   --button-transition-property: color, background-color, box-shadow, border-color, transform;
+  --button-surface-transition-property: inset, background-color, box-shadow;
   --button-transition-property-colors:
     color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
     --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -554,12 +557,12 @@
    ════════════════════════════════════════════════════════════════════════════ */
 .light {
   /* ─── Surfaces (light backgrounds from neutral) ─── */
-  --background: oklch(0.99 0 0);
+  --background: rgba(230, 230, 230, 1);
   --foreground: oklch(0.35 0 0);
-  --card: oklch(0.998 0 0);
-  --card-gradient-start: oklch(1 0 0);
-  --card-foreground: var(--foreground);
+  --card: rgba(240, 240, 240, 1);
+  --card-gradient-start: rgba(240, 240, 240, 1);
   --muted: oklch(0.917 0 0);
+  --sidebar: rgba(230, 230, 230, 1);
   --muted-foreground: oklch(0.532 0 0 / 0.8);
   --border: oklch(0.852 0 0);
 
@@ -796,5 +799,19 @@
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
-  --shadow-card-edge: var(--shadow-border);
+  --shadow-card-edge:
+    var(--shadow-border), inset 0 1px rgba(255, 255, 255, 1), inset 1px 0 rgba(255, 255, 255, 0.5),
+    inset -1px 0 rgba(255, 255, 255, 0.5);
+}
+
+/* Dark cards use an outer highlight instead of the light inset highlight. */
+.dark {
+  --shadow-card-edge:
+    var(--shadow-border), 0 1px rgba(255, 255, 255, 0.2), 1px 0 rgba(255, 255, 255, 0.1),
+    -1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* Dark cards use one simple outer edge highlight. */
+.dark .shadow-card-edge {
+  --tw-shadow: 0 -1px 0 #333;
 }