| 1 |
// `--ext-*` resolves once at the scope root, so setting it here reaches nothing. |
| 2 |
const BAR_SURFACE = { |
| 3 |
main: '--color-design-main', |
| 4 |
text: '--color-design-text', |
| 5 |
}; |
| 6 |
|
| 7 |
// No partner color behind the card, so it has no `--color-*` alias to set. |
| 8 |
const CARD_SURFACE = { |
| 9 |
main: '--ext-notification-card-main', |
| 10 |
text: '--ext-notification-card-text', |
| 11 |
}; |
| 12 |
|
| 13 |
const buttonMap = (main, text) => ({ |
| 14 |
'button-main': main, |
| 15 |
'button-text': text, |
| 16 |
'button-hover-main': '--ext-notification-button-hover-main', |
| 17 |
'button-hover-text': '--ext-notification-button-hover-text', |
| 18 |
}); |
| 19 |
|
| 20 |
const BANNER_BUTTON = buttonMap('--color-banner-main', '--color-banner-text'); |
| 21 |
const DESIGN_BUTTON = buttonMap('--color-design-main', '--color-design-text'); |
| 22 |
|
| 23 |
const variablesFrom = (map, colors) => |
| 24 |
Object.fromEntries( |
| 25 |
Object.entries(colors) |
| 26 |
.filter(([key, value]) => map[key] && typeof value === 'string') |
| 27 |
.map(([key, value]) => [map[key], value]), |
| 28 |
); |
| 29 |
|
| 30 |
export const colorsOf = (notification) => notification?.colors ?? {}; |
| 31 |
|
| 32 |
export const barVariables = (colors) => variablesFrom(BAR_SURFACE, colors); |
| 33 |
|
| 34 |
export const cardVariables = (colors) => variablesFrom(CARD_SURFACE, colors); |
| 35 |
|
| 36 |
export const bannerButtonVariables = (colors) => |
| 37 |
variablesFrom(BANNER_BUTTON, colors); |
| 38 |
|
| 39 |
export const designButtonVariables = (colors) => |
| 40 |
variablesFrom(DESIGN_BUTTON, colors); |
| 41 |
|
| 42 |
export const buttonHoverClasses = (colors) => ({ |
| 43 |
'hover:bg-[var(--ext-notification-button-hover-main)]': Boolean( |
| 44 |
colors['button-hover-main'], |
| 45 |
), |
| 46 |
'hover:text-[var(--ext-notification-button-hover-text)]': Boolean( |
| 47 |
colors['button-hover-text'], |
| 48 |
), |
| 49 |
// A supplied hover color has to land exactly, not dimmed. |
| 50 |
'hover:opacity-90': |
| 51 |
!colors['button-hover-main'] && !colors['button-hover-text'], |
| 52 |
}); |
| 53 |
|
