@carissa-io/theme-default 0.3.20 → 0.3.21

package/DESIGN.md

@@ -486,6 +486,15 @@ From [components-suggested-prompts](components/components-suggested-prompts): `S
 ## Message actions
 From [components-message-actions](components/components-message-actions): `MessageActions`. Quiet ghost icon buttons (transparent, a `--c-surface` fill on hover, `--c-surface-active` while pressed), 0.25rem apart, 16px icons in the `--c-text` colour (14.23:1 / 13.88:1 or more on the bubbles). Keyboard focus is the Button's `--c-focus` ring on the item that holds the roving focus. A chosen thumb takes `--c-info` (6.15:1 / 7.05:1 on `--c-surface`, 6.70:1 / 7.79:1 on the background) and a copied action `--c-success` (4.60:1 / 10.29:1 on `--c-surface`, 5.02:1 / 11.36:1 on the background; 3.98:1 on `--c-surface-active` in light, which is above the 3:1 an icon needs). Neither state is colour alone: the thumb carries `aria-pressed` and the copied action swaps the copy icon for a check and takes the `Copied` name, which is also announced. The component has no variable for a fill on the chosen thumb, so the visible cue of the chosen thumb is its colour; a filled icon or a background would be a component release.
 
+## Motion
+The motion components read five shared tokens (`$motion-duration-short` 0.25s, `$motion-duration-medium` 0.5s, `$motion-duration-long` 0.9s, `$motion-easing` `cubic-bezier(0.16, 1, 0.3, 1)` and `$motion-stagger` 0.15s), so the character of the motion moves from one place. The easing decelerates: a fast start and a soft landing. They are not interface transitions: those stay on `$transition-duration` (0.2s, `ease`).
+
+## Animate
+From [components-animate](components/components-animate): `Animate`. The entrance lasts the medium token, lands on the shared easing and travels 0.75rem (`rise`) or starts at 96% (`scale`); the `pulse` is a 6% swell. Only opacity and transform move: the block sets no colour, so the text inside keeps the contrast of the palette (17.93:1 / 18.16:1 for `--c-text` on the background) once the entrance has landed, in both modes. The default stays no motion: the page picks one orchestrated moment. Under `prefers-reduced-motion` the element shows its final state at once.
+
+## Sequence
+From [components-sequence](components/components-sequence): `Sequence`. The items come in 0.15s apart (`$motion-stagger`), stacked with 1rem between them; the motion itself is the Animate one, so the block is configured after it. No colour of its own. Under `prefers-reduced-motion` every item is shown at once.
+
 ## Keyboard focus (all controls)
 One rule keeps the controls coherent: **an outlined control thickens its own border from 1px to 2px, black** (text fields,
 select, combobox, date picker, textarea, upload, empty checkbox, off switch, radio, secondary and ghost buttons); **a filled

package/README.md

@@ -123,6 +123,11 @@ change.
 | `$focus-color` | `$black` | focus color |
 | `$focus-width` | `1px` | focus ring width |
 | `$transition-duration` | `0.2s` | color and border transitions |
+| `$motion-duration-short` | `0.25s` | quick entrances and small moves |
+| `$motion-duration-medium` | `0.5s` | the default entrance (`animate`) |
+| `$motion-duration-long` | `0.9s` | counts, reveals and other slow moves |
+| `$motion-easing` | `cubic-bezier(0.16, 1, 0.3, 1)` | the one decelerating easing of the motion components |
+| `$motion-stagger` | `0.15s` | gap between the items of a `sequence` |
 | `$label-font-size` | `0.6875rem` | field label size |
 | `$label-font-weight` | `700` | field label weight |
 | `$label-letter-spacing` | `0.1em` | field label tracking |
@@ -169,7 +174,7 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 
 ## What it configures
 `components-input`, `-button`, `-checkbox`, `-switch`, `-radio-group`, `-slider`, `-popover`, `-listbox`, `-select`,
-`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message`, `-message-list`, `-prompt-input`, `-suggested-prompts` and `-message-actions`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message`, `-message-list`, `-prompt-input`, `-suggested-prompts`, `-message-actions`, `-animate` and `-sequence`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 The checkbox's mixed state (`indeterminate`, from the next `components-checkbox` release, class `c-checkbox--indeterminate`) is the checked box with a 10px dash in `--c-on-primary`; on an older checkbox the rule is simply unused.

package/dist/index.css

@@ -5894,3 +5894,90 @@ button.c-theme-switch:focus-visible {
 .c-message-actions__action--copied {
   color: var(--c-success);
 }
+
+@keyframes c-animate-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes c-animate-rise {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes c-animate-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes c-animate-pulse {
+  0%, 100% {
+    transform: none;
+  }
+  50% {
+    transform: scale(1.06);
+  }
+}
+.c-animate--fade[data-state=active],
+.c-animate--rise[data-state=active],
+.c-animate--scale[data-state=active],
+.c-animate--pulse[data-state=active] {
+  animation-duration: var(--c-animate-duration, 0.5s);
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-delay: var(--c-animate-delay, 0s);
+  animation-fill-mode: both;
+}
+
+.c-animate--fade[data-state=active] {
+  animation-name: c-animate-fade;
+}
+
+.c-animate--rise[data-state=active] {
+  animation-name: c-animate-rise;
+}
+
+.c-animate--scale[data-state=active] {
+  animation-name: c-animate-scale;
+}
+
+.c-animate--pulse[data-state=active] {
+  animation-name: c-animate-pulse;
+}
+
+.c-animate--entrance[data-state=idle] {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-animate,
+  .c-animate[data-state] {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}
+.c-sequence {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.c-sequence[data-running=false] * {
+  animation-play-state: paused;
+}
+
+.c-sequence__item {
+  --c-animate-delay: calc(var(--c-sequence-index, 0) * var(--c-sequence-stagger, 0.15s));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -108,7 +108,9 @@
     "@carissa-io/components-message-list": "^0.1.0",
     "@carissa-io/components-prompt-input": "^0.1.2",
     "@carissa-io/components-suggested-prompts": "^0.1.0",
-    "@carissa-io/components-message-actions": "^0.1.0"
+    "@carissa-io/components-message-actions": "^0.1.0",
+    "@carissa-io/components-animate": "^0.1.0",
+    "@carissa-io/components-sequence": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -335,12 +337,19 @@
     },
     "@carissa-io/components-message-actions": {
       "optional": true
+    },
+    "@carissa-io/components-animate": {
+      "optional": true
+    },
+    "@carissa-io/components-sequence": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@carissa-io/components-accordion": "^0.1.0",
     "@carissa-io/components-ai-label": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
+    "@carissa-io/components-animate": "^0.1.0",
     "@carissa-io/components-async-autocomplete": "^0.1.0",
     "@carissa-io/components-avatar": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
@@ -386,6 +395,7 @@
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-section": "^0.1.0",
     "@carissa-io/components-select": "^0.1.1",
+    "@carissa-io/components-sequence": "^0.1.0",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",

package/scss/_tokens.scss

@@ -30,6 +30,14 @@ $min-height: 2.75rem; // 44px touch target
 $focus-color: $black;
 $focus-width: 1px;
 $transition-duration: 0.2s;
+// Motion tokens shared by every motion component (entrances, counts, sequences), so the character of the motion moves from one
+// place. They are not interface transitions: those stay on $transition-duration above. One decelerating easing: fast start,
+// soft landing.
+$motion-duration-short: 0.25s;
+$motion-duration-medium: 0.5s;
+$motion-duration-long: 0.9s;
+$motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+$motion-stagger: 0.15s; // the gap between the items of a sequence
 $label-font-size: 0.6875rem;
 $label-font-weight: 700;
 $label-letter-spacing: 0.1em;

package/scss/index.scss

@@ -1861,3 +1861,23 @@
     $c-message-actions-pressed-color: $var-info,
     $c-message-actions-copied-color: $var-success
 );
+
+// Animate: the entrance lasts the medium motion token and lands on the shared decelerating easing; the rise travels 0.75rem and
+// the pulse is a 6% swell. It has no colour of its own (opacity and transform only), so both modes follow. The default of the
+// component stays no motion: the page chooses its one orchestrated moment. Under prefers-reduced-motion every element shows its
+// final state at once.
+@use '@carissa-io/components-animate/scss' as animate with (
+    $c-animate-duration: $motion-duration-medium,
+    $c-animate-easing: $motion-easing,
+    $c-animate-distance: 0.75rem,
+    $c-animate-scale-from: 0.96,
+    $c-animate-pulse-scale: 1.06
+);
+
+// Sequence: the items come in $motion-stagger apart (the short token is too slow for a list), stacked with 1rem between them.
+// The motion itself (duration, distance, easing) is the Animate one above, so this block comes after it. No colours.
+@use '@carissa-io/components-sequence/scss' as sequence with (
+    $c-sequence-stagger: $motion-stagger,
+    $c-sequence-direction: column,
+    $c-sequence-gap: 1rem
+);