Skip to content

fix(ui): restore stack animations and shadow tokens #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yyyyaaa merged 3 commits into from
Aug 10, 2026
Merged

fix(ui): restore stack animations and shadow tokens #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d45d5c
fix(ui): restore stack enter and exit transitions
yyyyaaa Aug 10, 2026
ff2744a
fix(ui): restore elevation shadow tokens
yyyyaaa Aug 10, 2026
1d18e3e
fix(blocks): build workspace packages before dev
yyyyaaa Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ pnpm --filter blocks test
pnpm --filter blocks build:pages
```

The development command builds the local package outputs before Next.js starts,
so it also works from a fresh worktree.

`src/lib/base-primitives.ts`, `src/lib/billing-blocks.ts`, and
`src/lib/feature-packs.ts` are the documentation catalogs. `pnpm gen:check`
regenerates (or checks) generated UI demo source used by the docs app.
Expand Down
2 changes: 1 addition & 1 deletion apps/blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"build:registry": "pnpm --workspace-root build:registry",
"check:generated": "pnpm gen:check",
"check:selections": "tsx scripts/check-mutation-selections.ts",
"predev": "pnpm gen:check",
"predev": "pnpm --workspace-root build:packages && pnpm gen:check",
"prebuild": "pnpm gen:check",
"dev": "next dev --turbopack --port 3005",
"build": "next build",
Expand Down
34 changes: 17 additions & 17 deletions packages/ui/registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"name": "constructive-theme",
"type": "registry:theme",
"title": "Constructive Theme",
"description": "Constructive design system theme \u2014 OKLCH colors, z-index layers, shadow utilities, and animations.",
"description": "Constructive design system theme — OKLCH colors, z-index layers, shadow utilities, and animations.",
"cssVars": {
"theme": {
"--color-background": "var(--background)",
Expand Down Expand Up @@ -102,14 +102,14 @@
"radius": "0.5rem",
"shadow-border": "0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 1px -0.5px rgb(35 35 35 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.04), 0 2px 4px -1px rgb(35 35 35 / 0.03)",
"shadow-border-hover": "0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.08), 0 2px 4px -2px rgb(35 35 35 / 0.06), 0 4px 8px -2px rgb(35 35 35 / 0.04), 0 8px 16px -4px rgb(35 35 35 / 0.03)",
"shadow-2xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-sm": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-md": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-lg": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-2xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-2xs": "0 1px rgb(0 0 0 / 0.05)",
"shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
"shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
"z-layer-portal-root": "9999",
"z-layer-floating": "1000",
"z-layer-modal-backdrop": "2000",
Expand Down Expand Up @@ -162,14 +162,14 @@
"radius": "0.5rem",
"shadow-border": "0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 1px -0.5px rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.10)",
"shadow-border-hover": "0 0 0 1px oklch(1 0 0 / 0.13), 0 1px 2px -1px rgb(0 0 0 / 0.30), 0 2px 4px -2px rgb(0 0 0 / 0.20), 0 4px 8px -2px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.10)",
"shadow-2xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-xs": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-sm": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-md": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-lg": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-2xl": "0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)",
"shadow-2xs": "0 1px rgb(0 0 0 / 0.2)",
"shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.25)",
"shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25)",
"shadow": "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25)",
"shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
"shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)",
"shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.35)",
"shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.55)",
"z-layer-portal-root": "9999",
"z-layer-floating": "1000",
"z-layer-modal-backdrop": "2000",
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/stack/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export {
export {
DEFAULT_ANIMATION_CONFIG,
createCardVariants,
createEnterTransition,
createExitTransition,
createOffsetTransition,
backdropVariants,
snapBackSpring,
Expand Down
33 changes: 33 additions & 0 deletions packages/ui/src/components/stack/stack-animations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,39 @@ export function createOffsetTransition(_config: AnimationConfig = {}): Transitio
};
}

/**
* Enter transition for card slide-in (x: 100% → offset).
* Tween + snappy ease — distinct from offset springs used after settle.
*/
export function createEnterTransition(config: AnimationConfig = {}): Transition {
const { duration, enterEase } = {
...DEFAULT_ANIMATION_CONFIG,
...config,
};

return {
type: 'tween',
duration,
ease: enterEase as [number, number, number, number],
};
}

/**
* Exit transition for card slide-out (offset → x: 100%).
*/
export function createExitTransition(config: AnimationConfig = {}): Transition {
const { duration, exitEase } = {
...DEFAULT_ANIMATION_CONFIG,
...config,
};

return {
type: 'tween',
duration,
ease: exitEase as [number, number, number, number],
};
}

// =============================================================================
// Backdrop Variants
// =============================================================================
Expand Down
44 changes: 31 additions & 13 deletions packages/ui/src/components/stack/stack-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@ import { motion, useReducedMotion } from 'motion/react';

import { cn } from '../../lib/utils';

import { createOffsetTransition, peekHoverSpring, peekDragSpring, lastCardExitTransition } from './stack-animations';
import {
createEnterTransition,
createExitTransition,
createOffsetTransition,
peekHoverSpring,
peekDragSpring,
} from './stack-animations';
import { CardReadyProvider, useCardInjectedProps, useStackContext } from './stack-context';
import { StackHeader } from './stack-header';
import type { AnimationConfig, CardSpec, CardStackApi, GestureConfig, PeekGestureConfig } from './stack.types';
Expand All @@ -16,6 +22,7 @@ import type { StackGestureBind } from './use-stack-gestures';

/** Default hover expansion in pixels */
const DEFAULT_HOVER_EXPANSION = 48;
const reducedMotionTransition = { duration: 0 } as const;

export type StackCardProps = {
/** The card specification */
Expand Down Expand Up @@ -131,8 +138,10 @@ function StackCardInner({
// Card width
const cardWidth = isMobile ? '100%' : normalizeWidth(card.width, config.defaultWidth);

// Animation transition
// Animation transitions: enter/exit tweens, offset spring after settle
const offsetTransition = createOffsetTransition(animation);
const enterTransition = createEnterTransition(animation);
const exitTransition = createExitTransition(animation);

// Close handler
const handleClose = useCallback(() => {
Expand Down Expand Up @@ -216,18 +225,27 @@ function StackCardInner({
// Last card fades out as it slides for smoother exit when backdrop is also fading
const exitOpacity = prefersReducedMotion ? 0 : (isLastCard ? 0 : 1);

// Choose transition based on interaction state
let activeTransition = offsetTransition;
if (peekGestures.isDragging || peekDragOffset > 0) {
activeTransition = peekDragSpring;
} else if (isPeekHovered) {
activeTransition = peekHoverSpring;
// Enter uses snappy tween until first settle; then spring for offset/peek.
// Peek/drag always win while interacting.
let activeTransition = prefersReducedMotion
? reducedMotionTransition
: isAnimationComplete
? offsetTransition
: enterTransition;
if (!prefersReducedMotion) {
if (peekGestures.isDragging || peekDragOffset > 0) {
activeTransition = peekDragSpring;
} else if (isPeekHovered) {
activeTransition = peekHoverSpring;
}
}

// Build exit animation object - last card uses tween for smooth fade, others use spring
const exitAnimation = isLastCard && !prefersReducedMotion
? { x: exitX, opacity: exitOpacity, transition: lastCardExitTransition }
: { x: exitX, opacity: exitOpacity };
// Exit always honors the configured tween; reduced motion settles immediately.
const exitAnimation = {
x: exitX,
opacity: exitOpacity,
transition: prefersReducedMotion ? reducedMotionTransition : exitTransition,
};

return (
<motion.div
Expand All @@ -236,7 +254,7 @@ function StackCardInner({
data-card-index={index}
data-is-top={isTopCard}
data-offset={baseOffset}
initial={{ x: initialX, opacity: prefersReducedMotion ? 0 : 1 }}
initial={{ x: initialX, opacity: 1 }}
animate={{ x: animateX, opacity: 1 }}
exit={exitAnimation}
transition={activeTransition}
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/stack/stack-viewport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,9 @@ export function CardStackViewport({

const content = (
<div data-slot="stack-viewport" className={cn('pointer-events-none fixed inset-0', className)}>
<AnimatePresence initial={false} mode="popLayout" onExitComplete={handleExitComplete}>
{/* initial must stay true: viewport unmounts when empty, so first open remounts
AnimatePresence with cards already present. initial={false} skips enter. */}
<AnimatePresence mode="popLayout" onExitComplete={handleExitComplete}>
{/* Backdrop - only when cards exist and first card wants it */}
{shouldShowBackdrop && hasCards && renderBackdropNode(resolvedBackdrop.config)}

Expand Down
32 changes: 16 additions & 16 deletions packages/ui/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,14 @@
--radius: 0.5rem;
--shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 1px -0.5px rgb(35 35 35 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.04), 0 2px 4px -1px rgb(35 35 35 / 0.03);
--shadow-border-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.08), 0 2px 4px -2px rgb(35 35 35 / 0.06), 0 4px 8px -2px rgb(35 35 35 / 0.04), 0 8px 16px -4px rgb(35 35 35 / 0.03);
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--z-layer-portal-root: 9999;
--z-layer-floating: 1000;
--z-layer-modal-backdrop: 2000;
Expand Down Expand Up @@ -112,14 +112,14 @@
--radius: 0.5rem;
--shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 1px -0.5px rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.10);
--shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13), 0 1px 2px -1px rgb(0 0 0 / 0.30), 0 2px 4px -2px rgb(0 0 0 / 0.20), 0 4px 8px -2px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.10);
--shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
--shadow-2xs: 0 1px rgb(0 0 0 / 0.2);
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.35);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.55);
}

@theme inline {
Expand Down
34 changes: 22 additions & 12 deletions packages/ui/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,27 @@ const sharedTypographyAndShape = {
radius: '0.5rem',
} as const;

const transparentShadow = '0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0)';
/** Elevation shadows — were fully transparent (`/ 0`), so shadow-* utilities did nothing. */
const lightElevationShadows = {
'shadow-2xs': '0 1px rgb(0 0 0 / 0.05)',
'shadow-xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'shadow-sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
shadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'shadow-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'shadow-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
'shadow-xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'shadow-2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
} as const;

const sharedShadows = {
'shadow-2xs': transparentShadow,
'shadow-xs': transparentShadow,
'shadow-sm': `${transparentShadow}, 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)`,
shadow: `${transparentShadow}, 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0)`,
'shadow-md': `${transparentShadow}, 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0)`,
'shadow-lg': `${transparentShadow}, 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0)`,
'shadow-xl': `${transparentShadow}, 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0)`,
'shadow-2xl': transparentShadow,
const darkElevationShadows = {
'shadow-2xs': '0 1px rgb(0 0 0 / 0.2)',
'shadow-xs': '0 1px 2px 0 rgb(0 0 0 / 0.25)',
'shadow-sm': '0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25)',
shadow: '0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25)',
'shadow-md': '0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3)',
'shadow-lg': '0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)',
'shadow-xl': '0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.35)',
'shadow-2xl': '0 25px 50px -12px rgb(0 0 0 / 0.55)',
} as const;

export const constructiveTheme = {
Expand Down Expand Up @@ -85,7 +95,7 @@ export const constructiveTheme = {
'0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 1px -0.5px rgb(35 35 35 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.04), 0 2px 4px -1px rgb(35 35 35 / 0.03)',
'shadow-border-hover':
'0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px rgb(35 35 35 / 0.08), 0 2px 4px -2px rgb(35 35 35 / 0.06), 0 4px 8px -2px rgb(35 35 35 / 0.04), 0 8px 16px -4px rgb(35 35 35 / 0.03)',
...sharedShadows,
...lightElevationShadows,
},
dark: {
background: 'oklch(0.21 0.006 285.885)',
Expand Down Expand Up @@ -131,7 +141,7 @@ export const constructiveTheme = {
'0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 1px -0.5px rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.10)',
'shadow-border-hover':
'0 0 0 1px oklch(1 0 0 / 0.13), 0 1px 2px -1px rgb(0 0 0 / 0.30), 0 2px 4px -2px rgb(0 0 0 / 0.20), 0 4px 8px -2px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.10)',
...sharedShadows,
...darkElevationShadows,
},
tailwind: {
'--color-background': 'var(--background)',
Expand Down
Loading
Loading