.eps-collapse { &__title { cursor: pointer; padding: spacing(5) 0; display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; color: inherit; &:focus { outline: none; } } &__icon { transition: all 150ms; transform: rotate(getValueByDirection( 0deg, 180deg )); } &__content { margin-top: spacing(10); display: none; } &[data-open] &__content { display: block; } &[data-open] &__icon { transform: rotate(90deg); } } // `--ext-*` resolves once at the scope root, so setting it here reaches nothing. const BAR_SURFACE = { main: '--color-design-main', text: '--color-design-text', }; // No partner color behind the card, so it has no `--color-*` alias to set. const CARD_SURFACE = { main: '--ext-notification-card-main', text: '--ext-notification-card-text', }; const buttonMap = (main, text) => ({ 'button-main': main, 'button-text': text, 'button-hover-main': '--ext-notification-button-hover-main', 'button-hover-text': '--ext-notification-button-hover-text', }); const BANNER_BUTTON = buttonMap('--color-banner-main', '--color-banner-text'); const DESIGN_BUTTON = buttonMap('--color-design-main', '--color-design-text'); const variablesFrom = (map, colors) => Object.fromEntries( Object.entries(colors) .filter(([key, value]) => map[key] && typeof value === 'string') .map(([key, value]) => [map[key], value]), ); export const colorsOf = (notification) => notification?.colors ?? {}; export const barVariables = (colors) => variablesFrom(BAR_SURFACE, colors); export const cardVariables = (colors) => variablesFrom(CARD_SURFACE, colors); export const bannerButtonVariables = (colors) => variablesFrom(BANNER_BUTTON, colors); export const designButtonVariables = (colors) => variablesFrom(DESIGN_BUTTON, colors); export const buttonHoverClasses = (colors) => ({ 'hover:bg-[var(--ext-notification-button-hover-main)]': Boolean( colors['button-hover-main'], ), 'hover:text-[var(--ext-notification-button-hover-text)]': Boolean( colors['button-hover-text'], ), // A supplied hover color has to land exactly, not dimmed. 'hover:opacity-90': !colors['button-hover-main'] && !colors['button-hover-text'], }); Page not found | Balloon and Paper

Let us create memorable moments

Let us create memorable moments for you

0 items

This is somewhat embarrassing, isn’t it?

It looks like nothing was found at this location. Maybe try a search?