@manakind/manuia-ui 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Humanity Plus Solutions
+
+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

@@ -0,0 +1,45 @@
+# `@manakind/manuia-ui`
+
+The Manuia-flavored surface of the [Manakind](https://github.com/Humanity-Plus/Manakind)
+design system. Today it re-exports the shared base components from
+`@manakind/ui-core`; Manuia-specific compositions (cards, flows, layouts unique
+to Manuia) will live alongside this barrel as they are built.
+
+Pair it with `@manakind/manuia-tokens`, whose `theme.css` resolves the `--ds-*`
+contract into Manuia's visual style.
+
+## Install
+
+```bash
+npm install @manakind/manuia-ui @manakind/manuia-tokens react react-dom
+```
+
+`react` and `react-dom` (`^19`) are peer dependencies. `@manakind/ui-core` and
+`@manakind/manuia-tokens` are pulled in as exact-pinned dependencies and ship in
+lockstep — upgrade all `@manakind/*` packages together.
+
+## Usage
+
+```tsx
+import '@manakind/manuia-tokens/css/primitives';
+import '@manakind/manuia-tokens/css/semantic';
+import '@manakind/manuia-tokens/css/components';
+import '@manakind/manuia-tokens/css/theme';
+
+// Dark theme. Emitted under `:root.dark, :root[data-theme='dark']`, so these
+// are inert until you set the class or attribute — import them even if dark
+// ships later, or switching it on silently does nothing. All three are needed:
+// `manuia-ui` reads --semantic-* and --component-* directly, not only --ds-*.
+import '@manakind/manuia-tokens/css/semantic-dark';
+import '@manakind/manuia-tokens/css/components-dark';
+import '@manakind/manuia-tokens/css/theme-dark';
+import { Button } from '@manakind/manuia-ui';
+
+export function Continue() {
+  return <Button>Continue</Button>;
+}
+```
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/dist/goal-card/goal-card.css

@@ -0,0 +1,592 @@
+@layer components {
+  .mui-goal-card {
+    position: relative;
+    /*
+     * Deliberately no `height: 100%`. As a grid item that percentage resolves
+     * against a row the item's own content is sizing — circular, and the
+     * browser settles it by leaving the card taller than its row, so cards
+     * overlapped the one below. Grid already stretches items to equal height
+     * via the default `align-items: stretch`, so the declaration bought
+     * nothing and cost the layout.
+     */
+    overflow: hidden;
+    /*
+     * Named so the query below reads against the card and not some ancestor a
+     * product might later make a container. Safe here because the card's width
+     * is set by its grid track, never by its own content — inline-size
+     * containment would otherwise cut the card off from what sizes it.
+     */
+    container: mui-goal-card / inline-size;
+    border-radius: var(--component-goal-card-radius);
+    border-color: var(--mui-tier-accent, var(--ds-card-border));
+    padding: var(--mui-tier-pad, var(--ds-card-padding));
+    box-shadow: var(--mui-tier-shadow, var(--semantic-elevation-resting));
+
+    /*
+     * Matches the product's `backdrop-blur-sm`. It only reads because the
+     * wash gradient below ends in a partly transparent card colour — against
+     * an opaque fill there would be nothing to blur.
+     */
+    backdrop-filter: blur(4px);
+
+    &:hover {
+      box-shadow: var(--mui-tier-shadow-hover, var(--semantic-elevation-raised));
+    }
+
+    &[data-interactive] {
+      transition:
+        box-shadow 300ms cubic-bezier(0, 0, 0.2, 1),
+        border-color 300ms cubic-bezier(0, 0, 0.2, 1),
+        transform 300ms cubic-bezier(0, 0, 0.2, 1);
+
+      &:hover {
+        transform: var(--mui-tier-hover-transform, none);
+      }
+    }
+
+    /*
+     * The tier wash. Only the decorated tiers define `--mui-tier-wash`, so the
+     * fallback resolves to no image on Monthly and Weekly.
+     */
+    background-image: linear-gradient(
+      to bottom right,
+      color-mix(in srgb, var(--mui-tier-wash, transparent) 70%, transparent),
+      color-mix(in srgb, var(--ds-card-bg) 60%, transparent)
+    );
+
+    /*
+     * Header band. Negative margins pull it out to the card edge so its
+     * background and top rule meet the rounded corner, then the padding is
+     * restored inside. `overflow: hidden` on the card clips it to the radius.
+     */
+    & .mui-goal-card__header {
+      margin: calc(-1 * var(--mui-tier-pad, var(--ds-card-padding)))
+        calc(-1 * var(--mui-tier-pad, var(--ds-card-padding))) 0;
+      padding: var(--mui-tier-pad, var(--ds-card-padding));
+      padding-block-end: var(--mui-tier-header-gap, var(--ds-card-gap));
+      background-image: linear-gradient(
+        to right,
+        color-mix(in srgb, var(--mui-tier-badge-bg, transparent) 30%, transparent),
+        color-mix(in srgb, var(--mui-tier-wash, transparent) 20%, transparent),
+        transparent
+      );
+    }
+
+    /* Hairline closing the header, with a diamond on the top tier only. */
+    & .mui-goal-card__divider {
+      display: none;
+      align-items: center;
+      gap: var(--semantic-space-gap);
+
+      &::before,
+      &::after {
+        content: "";
+        flex: 1;
+        height: 1px;
+        background-color: color-mix(in srgb, var(--mui-tier-accent) 20%, transparent);
+      }
+    }
+
+    /* Inset frame, drawn only where a tier sets an inset. */
+    & .mui-goal-card__ornament {
+      display: none;
+      position: absolute;
+      inset: var(--mui-tier-ornament-inset);
+      border: 1px solid color-mix(in srgb, var(--mui-tier-accent) 25%, transparent);
+      border-radius: var(--semantic-radius-surface);
+      pointer-events: none;
+    }
+
+    & .mui-goal-card__corners {
+      display: none;
+      position: absolute;
+      inset: var(--mui-tier-corner-inset);
+      pointer-events: none;
+
+      & > span {
+        position: absolute;
+      }
+
+      & > span:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+
+      & > span:nth-child(2) {
+        top: 0;
+        right: 0;
+      }
+
+      & > span:nth-child(3) {
+        bottom: 0;
+        left: 0;
+      }
+
+      & > span:nth-child(4) {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    &.mui-goal-card--legendary,
+    &.mui-goal-card--epic {
+      & .mui-goal-card__ornament,
+      & .mui-goal-card__corners {
+        display: block;
+      }
+    }
+
+    /* 5 Year: L-shaped corner brackets. */
+    &.mui-goal-card--legendary .mui-goal-card__corners > span {
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: color-mix(in srgb, var(--mui-tier-accent) 30%, transparent);
+      }
+
+      &::before {
+        width: 16px;
+        height: 1.5px;
+      }
+
+      &::after {
+        width: 1.5px;
+        height: 16px;
+      }
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__corners > span:nth-child(1) {
+      &::before,
+      &::after {
+        top: 0;
+        left: 0;
+      }
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__corners > span:nth-child(2) {
+      &::before,
+      &::after {
+        top: 0;
+        right: 0;
+      }
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__corners > span:nth-child(3) {
+      &::before,
+      &::after {
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__corners > span:nth-child(4) {
+      &::before,
+      &::after {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    /* 1 Year: corner dots. */
+    &.mui-goal-card--epic .mui-goal-card__corners > span {
+      width: 4px;
+      height: 4px;
+      border-radius: var(--semantic-radius-pill);
+      background-color: color-mix(in srgb, var(--mui-tier-accent) 30%, transparent);
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__divider,
+    &.mui-goal-card--epic .mui-goal-card__divider {
+      display: flex;
+    }
+
+    &.mui-goal-card--legendary .mui-goal-card__divider {
+      position: relative;
+
+      &::before,
+      &::after {
+        background-color: color-mix(in srgb, var(--mui-tier-accent) 20%, transparent);
+      }
+    }
+
+    &.mui-goal-card--epic .mui-goal-card__divider {
+      &::before,
+      &::after {
+        background-color: color-mix(in srgb, var(--mui-tier-accent) 15%, transparent);
+      }
+    }
+
+    /*
+     * Emblem and timeframe stay together on the left; status sits alone on the
+     * right. `space-between` across all three spread them evenly, which read
+     * as three unrelated chips rather than one cluster plus a status.
+     */
+    /*
+     * The container query below keeps this on one line in the normal case.
+     * `flex-wrap` stays as the fallback for the two cases it cannot cover:
+     * a card given no `statusIcon` (the badge keeps its text rather than
+     * collapsing to a bare colour chip — see the query), and a browser
+     * without container queries. Wrapping to a second line is a mild,
+     * legible degradation; the card is `overflow: hidden`, so without this
+     * the failure mode is a silently clipped status instead.
+     */
+    & .mui-goal-card__meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: var(--semantic-space-gap) var(--semantic-space-gap-relaxed);
+    }
+
+    & .mui-goal-card__meta-start {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--semantic-space-gap);
+      /*
+       * No `min-width: 0`. That let this group shrink past its content, and
+       * because everything inside is `nowrap` the overflow showed up as a
+       * chip running straight through the badge rather than as a reflow.
+       */
+      min-width: auto;
+    }
+
+    & .mui-goal-card__emblem {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--mui-tier-emblem-size);
+      height: var(--mui-tier-emblem-size);
+      border-radius: var(--semantic-radius-pill);
+      color: var(--mui-tier-emblem-icon);
+      /*
+       * Rare has no mid stop; its fallback is the sRGB midpoint, which draws
+       * exactly the two-stop gradient. `in srgb` pins the space so that a
+       * color-mix() stop doesn't switch the gradient to oklab.
+       */
+      background-image: linear-gradient(
+        to bottom right in srgb,
+        var(--mui-tier-emblem-from),
+        var(
+          --mui-tier-emblem-via,
+          color-mix(in srgb, var(--mui-tier-emblem-from), var(--mui-tier-emblem-to))
+        ),
+        var(--mui-tier-emblem-to)
+      );
+      /* Composed in a custom property: declaration-strict-value rejects any comma list on box-shadow. */
+      --mui-tier-emblem-box-shadow:
+        0 0 0 var(--mui-tier-emblem-ring-width)
+        color-mix(
+          in srgb,
+          var(--mui-tier-emblem-ring-color) var(--mui-tier-emblem-ring-alpha),
+          transparent
+        ),
+        var(--mui-tier-emblem-shadow, 0 0 transparent);
+      box-shadow: var(--mui-tier-emblem-box-shadow);
+    }
+
+    /*
+     * Plain labelled metadata, not a component. The pill fill was one of four
+     * on a single card, and the timeframe never needed the emphasis — the
+     * emblem beside it already carries the tier.
+     *
+     * `--mui-tier-badge-text` is still read, so the higher tiers keep tinting
+     * the timeframe; only the fill and its padding are gone.
+     */
+    & .mui-goal-card__type {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--component-goal-card-chip-gap);
+      color: var(--mui-tier-badge-text, var(--semantic-color-text-muted));
+      font-size: var(--component-goal-card-chip-font-size);
+      font-weight: var(--primitives-font-weight-semibold);
+      white-space: nowrap;
+    }
+
+    & .mui-goal-card__categories {
+      margin-block-start: var(--semantic-space-gap);
+    }
+
+    /*
+     * Collapse the status badge to its glyph when the meta row runs out of
+     * room.
+     *
+     * A size query measures the container's CONTENT box, not its border box,
+     * so the card's ~50px of padding is already excluded here — the number
+     * below is how much room the row actually gets, not how wide the card is.
+     * Getting that backwards is what made the first attempt fire at every
+     * width on the goals page.
+     *
+     * Measured across all five tiers with the label forced visible: the
+     * widest pairing is "Quarterly" against "Not Started" at 237px, and both
+     * `GoalType` and `GoalStatus` are closed unions, so nothing longer can
+     * arrive. 16rem (256px) collapses before that with 19px to spare.
+     *
+     * The number has moved twice. It was 16rem against 243px until a `ui-core`
+     * Badge change added ~12px to every status, leaving 1px of headroom — a
+     * threshold that had silently stopped working while every check stayed
+     * green — so it went to 17rem against 255px. The plain status badge (#177)
+     * then dropped the chip's padding and border, bringing the row to 237px.
+     * Re-measure this after any Badge geometry change, and keep the margin
+     * wide enough that normal drift cannot close it.
+     *
+     * The `Statuses` play function is the backstop that makes the margin
+     * safe to reason about rather than something to over-pad: it fails if the
+     * row ever overflows at a width where the label is meant to show.
+     *
+     * `rem` rather than `px` on purpose: the query then moves with the user's
+     * root font size, so someone browsing at 150% collapses the badge at the
+     * width where their text actually stops fitting.
+     *
+     * This mirrors `.ds-badge--compact` in `ui-core` rather than reusing it,
+     * because a container query cannot add a class. The badge is `plain`, so
+     * there is no chip to square up: only the label goes. The badge's
+     * `aria-label` means nothing is lost on the way down — only the visible
+     * text changes, and the accessible name is identical at both widths.
+     *
+     * `:has(.ds-icon)` is load-bearing, not defensive tidiness. `statusIcon`
+     * is optional, and hiding the label unconditionally would leave a card
+     * that passed no glyph showing a bare colour chip — colour as the only
+     * signal, which is the exact thing `BadgeProps`' compact union refuses to
+     * let a consumer write by hand. The CSS path has to refuse it too. Such a
+     * card keeps its text and wraps instead.
+     */
+    @container mui-goal-card (max-width: 16rem) {
+      & .mui-goal-card__meta .ds-badge:has(.ds-icon) .ds-badge__label {
+        display: none;
+      }
+    }
+
+    /*
+     * A heading needn't differ in colour from the body; size and grouping
+     * mark it. Set through the contract key `ui-core`'s title reads, so no
+     * specificity contest with `.ds-card__title` (tokens.md).
+     */
+    & .mui-goal-card__title {
+      --ds-card-text: var(--ds-card-text-muted);
+    }
+
+    & .mui-goal-card__description {
+      margin: 0;
+      color: var(--semantic-color-text-muted);
+      font-size: var(--primitives-font-size-sm);
+      line-height: var(--primitives-line-height-relaxed);
+    }
+
+    & .mui-goal-card__milestones {
+      display: flex;
+      flex-direction: column;
+      gap: var(--semantic-space-gap);
+    }
+
+    & .mui-goal-card__milestone-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--semantic-space-gap-tight);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    & .mui-goal-card__milestone {
+      display: flex;
+      align-items: center;
+      gap: var(--semantic-space-gap);
+      font-size: var(--primitives-font-size-xs);
+      color: var(--semantic-color-text-default);
+    }
+
+    & .mui-goal-card__milestone-marker {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--ds-icon-size-sm);
+      height: var(--ds-icon-size-sm);
+      border: 1px solid var(--semantic-color-border-control);
+      border-radius: var(--semantic-radius-interactive);
+      color: var(--semantic-color-text-inverse);
+    }
+
+    & .mui-goal-card__milestone--done {
+      color: var(--semantic-color-text-muted);
+      text-decoration: line-through;
+
+      & .mui-goal-card__milestone-marker {
+        background-color: var(--semantic-color-action-primary);
+        border-color: var(--semantic-color-action-primary);
+      }
+    }
+
+    & .mui-goal-card__target {
+      margin: 0;
+      color: var(--semantic-color-text-muted);
+      font-size: var(--primitives-font-size-xs);
+    }
+
+    /*
+     * Mirrors the product's `text-small-caps` utility, which labels both the
+     * milestone summary and the target date.
+     */
+    & .mui-goal-card__target-label,
+    & .mui-goal-card__milestones-label {
+      font-weight: var(--primitives-font-weight-semibold);
+      font-size: var(--primitives-font-size-xs);
+      letter-spacing: 0.15em;
+      line-height: var(--primitives-line-height-tight);
+      text-transform: uppercase;
+    }
+
+    /*
+     * Prestige tiers.
+     *
+     * Each modifier only *sets* custom properties; the shared rules above and
+     * below consume them. That keeps one copy of the decoration logic instead
+     * of five near-identical blocks, and makes a tier a list of values.
+     *
+     * Values transcribed from GOAL_LIST_PRESTIGE / GoalPrestigeDecor in the
+     * product. Alpha steps use color-mix against a solid token rather than
+     * adding an alpha variant to the palette for every stop.
+     */
+    &.mui-goal-card--legendary {
+      --mui-tier-pad: var(--component-goal-card-legendary-padding);
+      --mui-tier-header-gap: var(--component-goal-card-legendary-header-gap);
+      --mui-tier-accent: var(--component-goal-card-legendary-accent);
+      --mui-tier-wash: var(--component-goal-card-legendary-wash);
+      --mui-tier-badge-bg: var(--component-goal-card-legendary-badge-bg);
+      --mui-tier-badge-text: var(--component-goal-card-legendary-badge-text);
+      --mui-tier-emblem-from: var(--component-goal-card-legendary-emblem-from);
+      --mui-tier-emblem-via: var(--component-goal-card-legendary-emblem-via);
+      --mui-tier-emblem-to: var(--component-goal-card-legendary-emblem-to);
+      --mui-tier-emblem-icon: var(--component-goal-card-legendary-emblem-icon);
+      --mui-tier-emblem-size: var(--component-goal-card-legendary-emblem-size);
+      --mui-tier-emblem-ring-color: var(--mui-tier-accent);
+      --mui-tier-emblem-ring-width: 2px;
+      --mui-tier-emblem-ring-alpha: 50%;
+      --mui-tier-emblem-shadow: var(--component-goal-card-legendary-emblem-shadow);
+      --mui-tier-hover-transform: scale(1.02);
+      --mui-tier-shadow: var(--component-goal-card-legendary-shadow);
+      --mui-tier-shadow-hover: var(--component-goal-card-legendary-shadow-hover);
+      --mui-tier-ornament-inset: var(--component-goal-card-legendary-ornament-inset);
+      --mui-tier-corner-inset: var(--component-goal-card-legendary-corner-inset);
+
+      border-width: 2px;
+
+      & .mui-goal-card__header {
+        border-top: 4px solid var(--mui-tier-accent);
+      }
+
+      & .mui-goal-card__title {
+        font-size: var(--primitives-font-size-2xl);
+        font-weight: var(--primitives-font-weight-regular);
+      }
+    }
+
+    &.mui-goal-card--epic {
+      --mui-tier-pad: var(--component-goal-card-epic-padding);
+      --mui-tier-header-gap: var(--component-goal-card-epic-header-gap);
+      --mui-tier-accent: var(--component-goal-card-epic-accent);
+      --mui-tier-wash: var(--component-goal-card-epic-wash);
+      --mui-tier-badge-bg: var(--component-goal-card-epic-badge-bg);
+      --mui-tier-badge-text: var(--component-goal-card-epic-badge-text);
+      --mui-tier-emblem-from: var(--component-goal-card-epic-emblem-from);
+      --mui-tier-emblem-via: var(--component-goal-card-epic-emblem-via);
+      --mui-tier-emblem-to: var(--component-goal-card-epic-emblem-to);
+      --mui-tier-emblem-icon: var(--component-goal-card-epic-emblem-icon);
+      --mui-tier-emblem-size: var(--component-goal-card-epic-emblem-size);
+      --mui-tier-emblem-ring-color: var(--mui-tier-accent);
+      --mui-tier-emblem-ring-width: 1px;
+      --mui-tier-emblem-ring-alpha: 40%;
+      --mui-tier-emblem-shadow: var(--component-goal-card-epic-emblem-shadow);
+      --mui-tier-hover-transform: scale(1.015);
+      --mui-tier-shadow: var(--component-goal-card-epic-shadow);
+      --mui-tier-shadow-hover: var(--component-goal-card-epic-shadow-hover);
+      --mui-tier-ornament-inset: var(--component-goal-card-epic-ornament-inset);
+      --mui-tier-corner-inset: var(--component-goal-card-epic-corner-inset);
+
+      border-width: 2px;
+
+      & .mui-goal-card__header {
+        border-top: 3px solid var(--mui-tier-accent);
+      }
+
+      & .mui-goal-card__title {
+        font-size: var(--primitives-font-size-xl);
+        font-weight: var(--primitives-font-weight-regular);
+      }
+    }
+
+    &.mui-goal-card--rare {
+      --mui-tier-pad: var(--component-goal-card-rare-padding);
+      --mui-tier-header-gap: var(--component-goal-card-rare-header-gap);
+      --mui-tier-accent: var(--component-goal-card-rare-accent);
+      --mui-tier-wash: var(--component-goal-card-rare-wash);
+      --mui-tier-badge-bg: var(--component-goal-card-rare-badge-bg);
+      --mui-tier-badge-text: var(--component-goal-card-rare-badge-text);
+      --mui-tier-emblem-from: var(--component-goal-card-rare-emblem-from);
+      --mui-tier-emblem-to: var(--component-goal-card-rare-emblem-to);
+      --mui-tier-emblem-icon: var(--component-goal-card-rare-emblem-icon);
+      --mui-tier-emblem-size: var(--component-goal-card-rare-emblem-size);
+      --mui-tier-emblem-ring-color: var(--component-goal-card-rare-emblem-ring-color);
+      --mui-tier-emblem-ring-width: 1px;
+      --mui-tier-emblem-ring-alpha: 40%;
+      --mui-tier-hover-transform: translateY(-2px);
+      --mui-tier-shadow: var(--component-goal-card-rare-shadow);
+      --mui-tier-shadow-hover: var(--component-goal-card-rare-shadow-hover);
+
+      border-width: 1.5px;
+
+      /* Rare and below get a left rule rather than a top band. */
+      & .mui-goal-card__header {
+        border-inline-start: 3px solid var(--mui-tier-accent);
+      }
+
+      & .mui-goal-card__title {
+        font-size: var(--primitives-font-size-lg);
+        font-weight: var(--primitives-font-weight-regular);
+      }
+    }
+
+    &.mui-goal-card--common {
+      --mui-tier-pad: var(--component-goal-card-common-padding);
+      --mui-tier-header-gap: var(--component-goal-card-common-header-gap);
+      --mui-tier-accent: var(--component-goal-card-common-accent);
+      --mui-tier-badge-bg: var(--component-goal-card-common-badge-bg);
+      --mui-tier-badge-text: var(--component-goal-card-common-badge-text);
+      --mui-tier-shadow: var(--component-goal-card-common-shadow);
+      --mui-tier-shadow-hover: var(--component-goal-card-common-shadow-hover);
+
+      & .mui-goal-card__header {
+        border-inline-start: 2px solid var(--mui-tier-accent);
+      }
+
+      & .mui-goal-card__title {
+        font-size: var(--primitives-font-size-md);
+        font-weight: var(--primitives-font-weight-regular);
+      }
+    }
+
+    &.mui-goal-card--plain {
+      --mui-tier-pad: var(--component-goal-card-plain-padding);
+      --mui-tier-header-gap: var(--component-goal-card-plain-header-gap);
+      --mui-tier-shadow: var(--component-goal-card-plain-shadow);
+      --mui-tier-shadow-hover: var(--component-goal-card-plain-shadow-hover);
+
+      & .mui-goal-card__title {
+        font-size: var(--primitives-font-size-md);
+        font-weight: var(--primitives-font-weight-regular);
+      }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mui-goal-card[data-interactive] {
+    transition: box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+
+    &:hover {
+      transform: none;
+    }
+  }
+}