#4173: notification.scss

site/_sass/uikit/theme/notification.scss

Path: site/_sass/uikit/theme/notification.scss · Lines: 44 · Hooks: 8

Purpose: Themes alert/toast notifications — colored banners for cookie consent, form validation, build status. 4 semantic color hooks (primary=blue, success=green, warning=yellow, danger=red) + container/message/close hooks. Cookie consent banner depends on this.

Source: GitHub

44 lines · 0 code · 24 comments · 20 blank
CommitMessage
ac75fabf3Github pages migrated to Asciidoc
// 4 semantic variant hooks — each gets dedicated theming
// @mixin hook-notification-primary(){}   // Blue/info
// @mixin hook-notification-success(){}   // Green/success
// @mixin hook-notification-warning(){}   // Yellow/warning
// @mixin hook-notification-danger(){}    // Red/error

Four semantic hooks — more than most components — because color IS the primary differentiator for notifications. Each variant needs independent styling (background, icon, border). Colors cascade from global variables ($global-primary-background$notification-primary-background) — changing the global palette automatically updates notifications.

#4173: notification.scss

Path: site/_sass/uikit/theme/notification.scss · Lines: 44 · Hooks: 8

Purpose: Themes alert/toast notifications — colored banners for cookie consent, form validation, build status. 4 semantic color hooks (primary=blue, success=green, warning=yellow, danger=red) + container/message/close hooks. Cookie consent banner depends on this.

Source: GitHub

CommitMessage
ac75fabf3Github pages migrated to Asciidoc
// 4 semantic variant hooks — each gets dedicated theming
// @mixin hook-notification-primary(){}   // Blue/info
// @mixin hook-notification-success(){}   // Green/success
// @mixin hook-notification-warning(){}   // Yellow/warning
// @mixin hook-notification-danger(){}    // Red/error

Four semantic hooks — more than most components — because color IS the primary differentiator for notifications. Each variant needs independent styling (background, icon, border). Colors cascade from global variables ($global-primary-background$notification-primary-background) — changing the global palette automatically updates notifications.