@widgetic/design-system 0.5.23 → 0.5.24

package/dist/utils/overlayMotion.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared overlay motion tokens so BaseModal, bits-ui Dialog, and related surfaces stay in sync.
+ * FilePreview / legacy modals: backdrop fades 200ms with cubicOut; the card scales from 0.95 with the same timing.
+ * Change here when Figma updates overlay motion.
+ */
+import { cubicOut } from 'svelte/easing';
+/** Backdrop scrim + card motion duration (ms). Intentionally 200ms; DS `--duration-base` is 160ms for small UI. */
+export declare const overlayTransitionDurationMs = 200;
+/** Easing for open/close (Svelte transition easing function — matches “cubic out” in the legacy modals). */
+export declare const overlayTransitionEasing: typeof cubicOut;
+/**
+ * Backdrop blur (px) of the scrim behind every modal, dialog, drawer and sheet. It is the Figma effect style
+ * `Overlay/Scrim blur` (a background blur of 3).
+ */
+export declare const overlayBackdropBlurPx = 3;
+/** Content scale at the start of the open transition / end of the close transition. */
+export declare const overlayContentScaleStart = 0.95;
+/**
+ * Tailwind duration class — must be a source literal so Tailwind's scanner emits `duration-[200ms]`.
+ * Kept in sync with `overlayTransitionDurationMs` (see tests/overlayMotionDuration.test.ts).
+ */
+export declare const overlayDurationClass = "duration-[200ms]";
+/**
+ * bits-ui applies `data-[state=open]:animate-in` at specificity 0,2,0 with a 150ms default duration, which beats a
+ * plain `duration-[200ms]` (0,1,0). These state-scoped arbitrary properties match open/closed and win in cascade.
+ * Literal strings — keep in sync with `overlayTransitionDurationMs`.
+ */
+export declare const overlayDialogOpenClosedAnimationDurationClasses: readonly ["data-[state=open]:[animation-duration:200ms]", "data-[state=closed]:[animation-duration:200ms]"];
+/**
+ * The scrim colour: the muted foreground token (neutral 550 in the design system) at 80%. The opacity is part of the colour, not of
+ * the layer, because an element that is itself translucent would not blur what is behind it. Literal so Tailwind's
+ * scanner emits it; `bg-muted-foreground/80` is the Figma scrim (`Foundations / Overlay`).
+ */
+export declare const overlayScrimColorClass = "bg-muted-foreground/80";
+/** Backdrop blur class — matches `overlayBackdropBlurPx`. Literal for the same reason as the colour. */
+export declare const overlayBackdropBlurClass = "backdrop-blur-[3px]";
+/**
+ * The whole scrim: colour and blur. Every surface that dims the page behind a panel (dialogs, modals, drawers, the
+ * navigation drawer) uses these two classes, so the overlay looks the same everywhere. Written out, not joined from the
+ * two constants above, so the scanner of Tailwind finds both classes in this one literal as well.
+ */
+export declare const overlayScrimClasses = "bg-muted-foreground/80 backdrop-blur-[3px]";
+/** Tailwind arbitrary easing approximating Svelte `cubicOut` (ease-out cubic, 1 − (1 − t)³). */
+export declare const overlayEasingClass = "ease-[cubic-bezier(0.33,1,0.68,1)]";
+/** Overlay + panel classes for bits-ui Dialog (aligned with BaseModal motion: fade, 200ms, cubic-out-like, zoom from 0.95). */
+export declare const overlayDialogOverlayClasses: string;
+export declare const overlayDialogContentClasses: string;
+/** Applied with overlay dialog classes so users who prefer reduced motion get instant open/close. */
+export declare const overlayReducedMotionClasses = "motion-reduce:!duration-0 motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none";

package/dist/utils/overlayMotion.js

@@ -0,0 +1,71 @@
+/**
+ * Shared overlay motion tokens so BaseModal, bits-ui Dialog, and related surfaces stay in sync.
+ * FilePreview / legacy modals: backdrop fades 200ms with cubicOut; the card scales from 0.95 with the same timing.
+ * Change here when Figma updates overlay motion.
+ */
+import { cubicOut } from 'svelte/easing';
+/** Backdrop scrim + card motion duration (ms). Intentionally 200ms; DS `--duration-base` is 160ms for small UI. */
+export const overlayTransitionDurationMs = 200;
+/** Easing for open/close (Svelte transition easing function — matches “cubic out” in the legacy modals). */
+export const overlayTransitionEasing = cubicOut;
+/**
+ * Backdrop blur (px) of the scrim behind every modal, dialog, drawer and sheet. It is the Figma effect style
+ * `Overlay/Scrim blur` (a background blur of 3).
+ */
+export const overlayBackdropBlurPx = 3;
+/** Content scale at the start of the open transition / end of the close transition. */
+export const overlayContentScaleStart = 0.95;
+/**
+ * Tailwind duration class — must be a source literal so Tailwind's scanner emits `duration-[200ms]`.
+ * Kept in sync with `overlayTransitionDurationMs` (see tests/overlayMotionDuration.test.ts).
+ */
+export const overlayDurationClass = 'duration-[200ms]';
+/**
+ * bits-ui applies `data-[state=open]:animate-in` at specificity 0,2,0 with a 150ms default duration, which beats a
+ * plain `duration-[200ms]` (0,1,0). These state-scoped arbitrary properties match open/closed and win in cascade.
+ * Literal strings — keep in sync with `overlayTransitionDurationMs`.
+ */
+export const overlayDialogOpenClosedAnimationDurationClasses = [
+    'data-[state=open]:[animation-duration:200ms]',
+    'data-[state=closed]:[animation-duration:200ms]'
+];
+/**
+ * The scrim colour: the muted foreground token (neutral 550 in the design system) at 80%. The opacity is part of the colour, not of
+ * the layer, because an element that is itself translucent would not blur what is behind it. Literal so Tailwind's
+ * scanner emits it; `bg-muted-foreground/80` is the Figma scrim (`Foundations / Overlay`).
+ */
+export const overlayScrimColorClass = 'bg-muted-foreground/80';
+/** Backdrop blur class — matches `overlayBackdropBlurPx`. Literal for the same reason as the colour. */
+export const overlayBackdropBlurClass = 'backdrop-blur-[3px]';
+/**
+ * The whole scrim: colour and blur. Every surface that dims the page behind a panel (dialogs, modals, drawers, the
+ * navigation drawer) uses these two classes, so the overlay looks the same everywhere. Written out, not joined from the
+ * two constants above, so the scanner of Tailwind finds both classes in this one literal as well.
+ */
+export const overlayScrimClasses = 'bg-muted-foreground/80 backdrop-blur-[3px]';
+/** Tailwind arbitrary easing approximating Svelte `cubicOut` (ease-out cubic, 1 − (1 − t)³). */
+export const overlayEasingClass = 'ease-[cubic-bezier(0.33,1,0.68,1)]';
+/** Overlay + panel classes for bits-ui Dialog (aligned with BaseModal motion: fade, 200ms, cubic-out-like, zoom from 0.95). */
+export const overlayDialogOverlayClasses = [
+    overlayScrimClasses,
+    overlayDurationClass,
+    overlayEasingClass,
+    ...overlayDialogOpenClosedAnimationDurationClasses,
+    `data-[state=open]:animate-in`,
+    `data-[state=closed]:animate-out`,
+    `data-[state=closed]:fade-out-0`,
+    `data-[state=open]:fade-in-0`
+].join(' ');
+export const overlayDialogContentClasses = [
+    overlayDurationClass,
+    overlayEasingClass,
+    ...overlayDialogOpenClosedAnimationDurationClasses,
+    `data-[state=open]:animate-in`,
+    `data-[state=closed]:animate-out`,
+    `data-[state=closed]:fade-out-0`,
+    `data-[state=open]:fade-in-0`,
+    `data-[state=closed]:zoom-out-95`,
+    `data-[state=open]:zoom-in-95`
+].join(' ');
+/** Applied with overlay dialog classes so users who prefer reduced motion get instant open/close. */
+export const overlayReducedMotionClasses = 'motion-reduce:!duration-0 motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.23",
+	"version": "0.5.24",
 	"license": "SEE LICENSE IN LICENSE",
 	"type": "module",
 	"svelte": "./dist/index.js",