32128ccb91
Angular 19 component library for notifications & communication: - ntf-bell: notification bell with badge count and shake animation - ntf-feed / ntf-feed-item: real-time notification feed with grouping - ntf-center: full notification center with category filter tabs - ntf-inbox / ntf-inbox-item: two-column inbox with search and detail - ntf-comment / ntf-thread: comment threads with replies and reactions - ntf-mention-input: text input with @mention autocomplete - ntf-empty-state: empty state placeholder - ntf-item-def: custom template directive for notification items Includes signal-based services, SCSS design tokens with dark mode, utility functions, and full TypeScript type definitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
144 lines
5.9 KiB
SCSS
144 lines
5.9 KiB
SCSS
:root {
|
|
// Bell
|
|
--ntf-bell-size: 40px;
|
|
--ntf-bell-color: var(--color-text-secondary, #6b7280);
|
|
--ntf-bell-hover-bg: var(--color-bg-hover, #f3f4f6);
|
|
--ntf-badge-bg: var(--color-error-500, #ef4444);
|
|
--ntf-badge-color: #ffffff;
|
|
--ntf-badge-size: 20px;
|
|
|
|
// Feed / Center
|
|
--ntf-feed-bg: var(--color-bg-primary, #ffffff);
|
|
--ntf-feed-border: var(--color-border-primary, #e5e7eb);
|
|
--ntf-feed-radius: var(--radius-container-lg, 1rem);
|
|
--ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
--ntf-feed-width: 420px;
|
|
--ntf-feed-max-height: 480px;
|
|
|
|
// Item
|
|
--ntf-item-bg: var(--color-bg-primary, #ffffff);
|
|
--ntf-item-hover-bg: var(--color-bg-hover, #f9fafb);
|
|
--ntf-item-unread-bg: var(--color-primary-50, #eff6ff);
|
|
--ntf-item-unread-border: var(--color-primary-500, #3b82f6);
|
|
--ntf-item-padding: 1rem;
|
|
--ntf-item-gap: 0.75rem;
|
|
--ntf-item-border: var(--color-border-primary, #e5e7eb);
|
|
--ntf-item-title-color: var(--color-text-primary, #111827);
|
|
--ntf-item-title-font-size: var(--font-size-sm, 0.875rem);
|
|
--ntf-item-title-font-weight: 500;
|
|
--ntf-item-body-color: var(--color-text-secondary, #6b7280);
|
|
--ntf-item-body-font-size: var(--font-size-xs, 0.75rem);
|
|
--ntf-item-time-color: var(--color-text-muted, #9ca3af);
|
|
--ntf-item-time-font-size: var(--font-size-xs, 0.75rem);
|
|
|
|
// Comment / Thread
|
|
--ntf-comment-bg: var(--color-bg-secondary, #f9fafb);
|
|
--ntf-comment-border: var(--color-border-primary, #e5e7eb);
|
|
--ntf-comment-radius: 0.75rem;
|
|
--ntf-comment-padding: 1rem;
|
|
--ntf-comment-author-color: var(--color-text-primary, #111827);
|
|
--ntf-comment-author-font-size: var(--font-size-sm, 0.875rem);
|
|
--ntf-comment-author-font-weight: 600;
|
|
--ntf-comment-content-color: var(--color-text-secondary, #374151);
|
|
--ntf-comment-content-font-size: var(--font-size-sm, 0.875rem);
|
|
--ntf-thread-connector-color: var(--color-border-primary, #e5e7eb);
|
|
--ntf-thread-connector-width: 2px;
|
|
|
|
// Inbox
|
|
--ntf-inbox-item-bg: var(--color-bg-primary, #ffffff);
|
|
--ntf-inbox-item-hover-bg: var(--color-bg-hover, #f9fafb);
|
|
--ntf-inbox-unread-weight: 600;
|
|
--ntf-inbox-star-color: #eab308;
|
|
--ntf-inbox-selected-bg: var(--color-primary-50, #eff6ff);
|
|
|
|
// Mention
|
|
--ntf-mention-bg: var(--color-primary-50, #eff6ff);
|
|
--ntf-mention-color: var(--color-primary-700, #1d4ed8);
|
|
--ntf-mention-popup-bg: var(--color-bg-primary, #ffffff);
|
|
--ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
--ntf-mention-popup-radius: 0.5rem;
|
|
--ntf-mention-popup-max-height: 200px;
|
|
|
|
// Empty state
|
|
--ntf-empty-color: var(--color-text-muted, #9ca3af);
|
|
--ntf-empty-icon-size: 48px;
|
|
|
|
// Transitions
|
|
--ntf-transition: 150ms ease-in-out;
|
|
--ntf-transition-slow: 300ms ease-in-out;
|
|
|
|
// Easing
|
|
--ntf-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--ntf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--ntf-feed-bg: var(--color-bg-primary, #111827);
|
|
--ntf-feed-border: var(--color-border-primary, #1e2536);
|
|
--ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
|
|
--ntf-item-bg: var(--color-bg-primary, #111827);
|
|
--ntf-item-hover-bg: var(--color-bg-hover, #1e2536);
|
|
--ntf-item-unread-bg: rgba(59, 130, 246, 0.1);
|
|
--ntf-item-border: var(--color-border-primary, #1e2536);
|
|
--ntf-item-title-color: var(--color-text-primary, #f9fafb);
|
|
--ntf-item-body-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-item-time-color: var(--color-text-muted, #6b7280);
|
|
|
|
--ntf-comment-bg: var(--color-bg-secondary, #161b26);
|
|
--ntf-comment-border: var(--color-border-primary, #1e2536);
|
|
--ntf-comment-author-color: var(--color-text-primary, #f9fafb);
|
|
--ntf-comment-content-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-thread-connector-color: var(--color-border-primary, #1e2536);
|
|
|
|
--ntf-inbox-item-bg: var(--color-bg-primary, #111827);
|
|
--ntf-inbox-item-hover-bg: var(--color-bg-hover, #1e2536);
|
|
--ntf-inbox-selected-bg: rgba(59, 130, 246, 0.1);
|
|
|
|
--ntf-mention-bg: rgba(59, 130, 246, 0.15);
|
|
--ntf-mention-color: #93bbfd;
|
|
--ntf-mention-popup-bg: var(--color-bg-primary, #111827);
|
|
--ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
|
|
--ntf-bell-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-bell-hover-bg: var(--color-bg-hover, #1e2536);
|
|
|
|
--ntf-empty-color: var(--color-text-muted, #6b7280);
|
|
}
|
|
}
|
|
|
|
[data-mode="dark"] {
|
|
--ntf-feed-bg: var(--color-bg-primary, #111827);
|
|
--ntf-feed-border: var(--color-border-primary, #1e2536);
|
|
--ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
|
|
--ntf-item-bg: var(--color-bg-primary, #111827);
|
|
--ntf-item-hover-bg: var(--color-bg-hover, #1e2536);
|
|
--ntf-item-unread-bg: rgba(59, 130, 246, 0.1);
|
|
--ntf-item-border: var(--color-border-primary, #1e2536);
|
|
--ntf-item-title-color: var(--color-text-primary, #f9fafb);
|
|
--ntf-item-body-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-item-time-color: var(--color-text-muted, #6b7280);
|
|
|
|
--ntf-comment-bg: var(--color-bg-secondary, #161b26);
|
|
--ntf-comment-border: var(--color-border-primary, #1e2536);
|
|
--ntf-comment-author-color: var(--color-text-primary, #f9fafb);
|
|
--ntf-comment-content-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-thread-connector-color: var(--color-border-primary, #1e2536);
|
|
|
|
--ntf-inbox-item-bg: var(--color-bg-primary, #111827);
|
|
--ntf-inbox-item-hover-bg: var(--color-bg-hover, #1e2536);
|
|
--ntf-inbox-selected-bg: rgba(59, 130, 246, 0.1);
|
|
|
|
--ntf-mention-bg: rgba(59, 130, 246, 0.15);
|
|
--ntf-mention-color: #93bbfd;
|
|
--ntf-mention-popup-bg: var(--color-bg-primary, #111827);
|
|
--ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
|
|
--ntf-bell-color: var(--color-text-secondary, #9ca3af);
|
|
--ntf-bell-hover-bg: var(--color-bg-hover, #1e2536);
|
|
|
|
--ntf-empty-color: var(--color-text-muted, #6b7280);
|
|
}
|