/* ========================================================= Market UI v2 — Flash Notifications Variables Path: public/assets/marketv2/components/flash-notifications/variables.css Canonical Contract --------------------------------------------------------- runtime theme context -> component contract -> render tokens القواعد: - يقرأ فقط من --m-context-* - لا يعتمد على tokens من مكوّن آخر - لا يحتوي palette محلية - لا يحتوي business logic - لا يحتوي route logic - يدعم slot-based visual variants بشكل متوافق مع النظام ========================================================= */ :root { /* ===================================================== 1) METRICS — CONTAINER ===================================================== */ --m-flash-container-z-index: 1180; --m-flash-container-top: 18px; --m-flash-container-inline-offset: 18px; --m-flash-container-gap: 12px; --m-flash-container-width: 360px; --m-flash-container-max-width: calc(100vw - 32px); /* ===================================================== 2) METRICS — ITEM ===================================================== */ --m-flash-item-min-height: 64px; --m-flash-item-radius: var(--m-radius-lg, 14px); --m-flash-item-padding-y: 14px; --m-flash-item-padding-x: 14px; --m-flash-item-gap: 12px; --m-flash-item-border-width: 1px; --m-flash-item-accent-width: 4px; --m-flash-item-content-gap: 4px; --m-flash-item-content-padding-inline-end: 2px; --m-flash-item-icon-margin-top: 1px; --m-flash-item-close-margin-top: -2px; --m-flash-item-close-margin-inline-end: -2px; --m-flash-item-progress-inset-inline: 10px; --m-flash-item-progress-inset-block-end: 8px; /* ===================================================== 3) METRICS — TYPOGRAPHY ===================================================== */ --m-flash-title-font-size: 13px; --m-flash-title-line-height: 1.35; --m-flash-title-font-weight: 700; --m-flash-message-font-size: 13px; --m-flash-message-line-height: 1.55; --m-flash-message-font-weight: 500; --m-flash-meta-font-size: 11px; --m-flash-meta-line-height: 1.4; --m-flash-meta-font-weight: 600; /* ===================================================== 4) METRICS — ICON / CLOSE / PROGRESS ===================================================== */ --m-flash-icon-wrap-size: 34px; --m-flash-icon-size: 18px; --m-flash-icon-radius: 999px; --m-flash-close-size: 30px; --m-flash-close-radius: 999px; --m-flash-close-icon-size: 16px; --m-flash-close-focus-ring-shadow: 0 0 0 3px var(--m-context-focus-ring); --m-flash-progress-height: 3px; --m-flash-progress-radius: 999px; --m-flash-progress-track-opacity: 0.18; --m-flash-progress-bar-opacity: 0.95; /* ===================================================== 5) METRICS — MOTION ===================================================== */ --m-flash-backdrop-blur: 10px; --m-flash-transition: 220ms cubic-bezier(.2, .8, .2, 1); --m-flash-enter-duration: 260ms; --m-flash-exit-duration: 220ms; --m-flash-progress-duration-default: 4200ms; /* ===================================================== 6) METRICS — MOBILE ===================================================== */ --m-flash-mobile-container-top: 12px; --m-flash-mobile-container-inset-inline: 12px; --m-flash-mobile-item-min-height: 60px; --m-flash-mobile-item-padding-y: 12px; --m-flash-mobile-item-padding-x: 12px; --m-flash-mobile-item-gap: 10px; --m-flash-mobile-icon-wrap-size: 32px; --m-flash-mobile-close-size: 28px; --m-flash-mobile-progress-inset-inline: 8px; --m-flash-mobile-progress-inset-block-end: 6px; /* ===================================================== 7) IDENTITY BRIDGE — DEFAULT CONTEXT ===================================================== */ --m-flash-identity-surface: var(--m-context-surface); --m-flash-identity-surface-soft: var(--m-context-surface-soft); --m-flash-identity-surface-muted: var(--m-context-surface-muted); --m-flash-identity-surface-raised: var(--m-context-surface-raised); --m-flash-identity-surface-elevated: var(--m-context-surface-elevated); --m-flash-identity-surface-hover: var(--m-context-surface-hover); --m-flash-identity-surface-active: var(--m-context-surface-active); --m-flash-identity-surface-selected: var(--m-context-surface-selected); --m-flash-identity-border: var(--m-context-border); --m-flash-identity-border-subtle: var(--m-context-border-subtle); --m-flash-identity-border-soft: var(--m-context-border-soft); --m-flash-identity-border-strong: var(--m-context-border-strong); --m-flash-identity-border-active: var(--m-context-border-active); --m-flash-identity-focus-ring: var(--m-context-focus-ring); --m-flash-identity-text: var(--m-context-text); --m-flash-identity-text-strong: var(--m-context-text-strong); --m-flash-identity-text-soft: var(--m-context-text-soft); --m-flash-identity-text-muted: var(--m-context-text-muted); --m-flash-identity-text-faint: var(--m-context-text-faint); --m-flash-identity-text-inverse: var(--m-context-text-inverse); --m-flash-identity-accent: var(--m-context-accent-color); --m-flash-identity-accent-hover: var(--m-context-accent-color-hover); --m-flash-identity-accent-active: var(--m-context-accent-color-active); --m-flash-identity-accent-soft: var(--m-context-accent-soft); --m-flash-identity-accent-soft-strong: var(--m-context-accent-soft-strong); --m-flash-identity-accent-text-inverse: var(--m-context-accent-text-inverse); --m-flash-identity-state-hover-bg: var(--m-context-state-hover-bg); --m-flash-identity-state-hover-accent: var(--m-context-state-hover-accent); --m-flash-identity-state-hover-border: var(--m-context-state-hover-border); --m-flash-identity-state-active-bg: var(--m-context-state-active-bg); --m-flash-identity-state-active-accent: var(--m-context-state-active-accent); --m-flash-identity-state-active-border: var(--m-context-state-active-border); --m-flash-identity-state-selected-bg: var(--m-context-state-selected-bg); --m-flash-identity-state-selected-accent: var(--m-context-state-selected-accent); --m-flash-identity-state-selected-border: var(--m-context-state-selected-border); --m-flash-identity-icon-color: var(--m-context-icon); --m-flash-identity-icon-color-hover: var(--m-context-icon-hover); --m-flash-identity-icon-color-active: var(--m-context-icon-active); --m-flash-identity-icon-action-bg: var(--m-context-icon-action-bg); --m-flash-identity-icon-action-bg-hover: var(--m-context-icon-action-bg-hover); --m-flash-identity-icon-action-bg-active: var(--m-context-icon-action-bg-active); --m-flash-identity-shadow: var(--m-context-shadow); --m-flash-identity-shadow-hover: var(--m-context-shadow-hover); --m-flash-identity-shadow-active: var(--m-context-shadow-active); --m-flash-identity-shadow-panel: var(--m-context-shadow-panel); --m-flash-identity-shadow-modal: var(--m-context-shadow-modal); /* ===================================================== 8) IDENTITY BRIDGE — SLOT SEMANTICS success = c5 error = c4 warning = c3 info = c2 ===================================================== */ --m-flash-slot-success-surface: var(--m-slot-c5-surface, var(--m-flash-identity-surface-raised)); --m-flash-slot-success-border: var(--m-slot-c5-border, var(--m-flash-identity-border-soft)); --m-flash-slot-success-accent: var(--m-slot-c5-accent-color, var(--m-flash-identity-accent)); --m-flash-slot-success-accent-soft: var(--m-slot-c5-accent-soft, var(--m-flash-identity-accent-soft)); --m-flash-slot-success-text: var(--m-slot-c5-text, var(--m-flash-identity-text)); --m-flash-slot-success-text-soft: var(--m-slot-c5-text-soft, var(--m-flash-identity-text-soft)); --m-flash-slot-success-icon-color: var(--m-slot-c5-icon-color, var(--m-flash-identity-icon-color)); --m-flash-slot-success-shadow: var(--m-slot-c5-shadow-panel, var(--m-flash-identity-shadow-panel)); --m-flash-slot-error-surface: var(--m-slot-c4-surface, var(--m-flash-identity-surface-raised)); --m-flash-slot-error-border: var(--m-slot-c4-border, var(--m-flash-identity-border-soft)); --m-flash-slot-error-accent: var(--m-slot-c4-accent-color, var(--m-flash-identity-accent)); --m-flash-slot-error-accent-soft: var(--m-slot-c4-accent-soft, var(--m-flash-identity-accent-soft)); --m-flash-slot-error-text: var(--m-slot-c4-text, var(--m-flash-identity-text)); --m-flash-slot-error-text-soft: var(--m-slot-c4-text-soft, var(--m-flash-identity-text-soft)); --m-flash-slot-error-icon-color: var(--m-slot-c4-icon-color, var(--m-flash-identity-icon-color)); --m-flash-slot-error-shadow: var(--m-slot-c4-shadow-panel, var(--m-flash-identity-shadow-panel)); --m-flash-slot-warning-surface: var(--m-slot-c3-surface, var(--m-flash-identity-surface-raised)); --m-flash-slot-warning-border: var(--m-slot-c3-border, var(--m-flash-identity-border-soft)); --m-flash-slot-warning-accent: var(--m-slot-c3-accent-color, var(--m-flash-identity-accent)); --m-flash-slot-warning-accent-soft: var(--m-slot-c3-accent-soft, var(--m-flash-identity-accent-soft)); --m-flash-slot-warning-text: var(--m-slot-c3-text, var(--m-flash-identity-text)); --m-flash-slot-warning-text-soft: var(--m-slot-c3-text-soft, var(--m-flash-identity-text-soft)); --m-flash-slot-warning-icon-color: var(--m-slot-c3-icon-color, var(--m-flash-identity-icon-color)); --m-flash-slot-warning-shadow: var(--m-slot-c3-shadow-panel, var(--m-flash-identity-shadow-panel)); --m-flash-slot-info-surface: var(--m-slot-c2-surface, var(--m-flash-identity-surface-raised)); --m-flash-slot-info-border: var(--m-slot-c2-border, var(--m-flash-identity-border-soft)); --m-flash-slot-info-accent: var(--m-slot-c2-accent-color, var(--m-flash-identity-accent)); --m-flash-slot-info-accent-soft: var(--m-slot-c2-accent-soft, var(--m-flash-identity-accent-soft)); --m-flash-slot-info-text: var(--m-slot-c2-text, var(--m-flash-identity-text)); --m-flash-slot-info-text-soft: var(--m-slot-c2-text-soft, var(--m-flash-identity-text-soft)); --m-flash-slot-info-icon-color: var(--m-slot-c2-icon-color, var(--m-flash-identity-icon-color)); --m-flash-slot-info-shadow: var(--m-slot-c2-shadow-panel, var(--m-flash-identity-shadow-panel)); /* ===================================================== 9) COMPONENT CONTRACT — BASE ===================================================== */ --m-flash-bg: var(--m-flash-identity-surface-raised); --m-flash-border: var(--m-flash-identity-border-soft); --m-flash-text: var(--m-flash-identity-text); --m-flash-title: var(--m-flash-identity-text-strong); --m-flash-message: var(--m-flash-identity-text); --m-flash-meta: var(--m-flash-identity-text-soft); --m-flash-accent: var(--m-flash-identity-accent); --m-flash-icon-bg: var(--m-flash-identity-accent-soft); --m-flash-icon-color: var(--m-flash-identity-icon-color); --m-flash-progress-track: var(--m-flash-identity-accent-soft); --m-flash-progress-bar: var(--m-flash-identity-accent); --m-flash-glow: var(--m-flash-identity-shadow-panel); --m-flash-close-bg: transparent; --m-flash-close-bg-hover: var(--m-flash-identity-surface-hover); --m-flash-close-border: transparent; --m-flash-close-border-hover: var(--m-flash-identity-border-soft); --m-flash-close-color: var(--m-flash-identity-text-soft); --m-flash-close-color-hover: var(--m-flash-identity-text-strong); --m-flash-close-focus-ring: var(--m-flash-close-focus-ring-shadow); --m-flash-shadow: var(--m-flash-identity-shadow-panel); --m-flash-shadow-hover: var(--m-flash-identity-shadow-modal); --m-flash-icon-shadow: none; /* ===================================================== 10) COMPONENT CONTRACT — VISUAL VARIANTS ONLY النص الأساسي يبقى من base contract ===================================================== */ --m-flash-success-bg: var(--m-flash-slot-success-surface); --m-flash-success-border: var(--m-flash-slot-success-border); --m-flash-success-accent: var(--m-flash-slot-success-accent); --m-flash-success-glow: var(--m-flash-slot-success-shadow); --m-flash-success-icon-bg: var(--m-flash-slot-success-accent-soft); --m-flash-success-icon-color: var(--m-flash-slot-success-icon-color); --m-flash-success-progress-track: var(--m-flash-slot-success-accent-soft); --m-flash-success-progress-bar: var(--m-flash-slot-success-accent); --m-flash-error-bg: var(--m-flash-slot-error-surface); --m-flash-error-border: var(--m-flash-slot-error-border); --m-flash-error-accent: var(--m-flash-slot-error-accent); --m-flash-error-glow: var(--m-flash-slot-error-shadow); --m-flash-error-icon-bg: var(--m-flash-slot-error-accent-soft); --m-flash-error-icon-color: var(--m-flash-slot-error-icon-color); --m-flash-error-progress-track: var(--m-flash-slot-error-accent-soft); --m-flash-error-progress-bar: var(--m-flash-slot-error-accent); --m-flash-warning-bg: var(--m-flash-slot-warning-surface); --m-flash-warning-border: var(--m-flash-slot-warning-border); --m-flash-warning-accent: var(--m-flash-slot-warning-accent); --m-flash-warning-glow: var(--m-flash-slot-warning-shadow); --m-flash-warning-icon-bg: var(--m-flash-slot-warning-accent-soft); --m-flash-warning-icon-color: var(--m-flash-slot-warning-icon-color); --m-flash-warning-progress-track: var(--m-flash-slot-warning-accent-soft); --m-flash-warning-progress-bar: var(--m-flash-slot-warning-accent); --m-flash-info-bg: var(--m-flash-slot-info-surface); --m-flash-info-border: var(--m-flash-slot-info-border); --m-flash-info-accent: var(--m-flash-slot-info-accent); --m-flash-info-glow: var(--m-flash-slot-info-shadow); --m-flash-info-icon-bg: var(--m-flash-slot-info-accent-soft); --m-flash-info-icon-color: var(--m-flash-slot-info-icon-color); --m-flash-info-progress-track: var(--m-flash-slot-info-accent-soft); --m-flash-info-progress-bar: var(--m-flash-slot-info-accent); /* ===================================================== 11) RENDER TOKENS ===================================================== */ --flash_notifications_z_index: var(--m-flash-container-z-index); --flash_notifications_top: var(--m-flash-container-top); --flash_notifications_inline_offset: var(--m-flash-container-inline-offset); --flash_notifications_gap: var(--m-flash-container-gap); --flash_notifications_width: var(--m-flash-container-width); --flash_notifications_max_width: var(--m-flash-container-max-width); --flash_notification_min_height: var(--m-flash-item-min-height); --flash_notification_radius: var(--m-flash-item-radius); --flash_notification_padding_y: var(--m-flash-item-padding-y); --flash_notification_padding_x: var(--m-flash-item-padding-x); --flash_notification_gap: var(--m-flash-item-gap); --flash_notification_border_width: var(--m-flash-item-border-width); --flash_notification_accent_width: var(--m-flash-item-accent-width); --flash_notification_content_gap: var(--m-flash-item-content-gap); --flash_notification_content_padding_inline_end: var(--m-flash-item-content-padding-inline-end); --flash_notification_icon_margin_top: var(--m-flash-item-icon-margin-top); --flash_notification_close_margin_top: var(--m-flash-item-close-margin-top); --flash_notification_close_margin_inline_end: var(--m-flash-item-close-margin-inline-end); --flash_notification_close_focus_ring: var(--m-flash-close-focus-ring); --flash_notification_progress_inset_inline: var(--m-flash-item-progress-inset-inline); --flash_notification_progress_inset_block_end: var(--m-flash-item-progress-inset-block-end); --flash_notification_backdrop_blur: var(--m-flash-backdrop-blur); --flash_notification_backdrop_supported: blur(var(--flash_notification_backdrop_blur)); --flash_notification_shadow: var(--m-flash-shadow); --flash_notification_shadow_hover: var(--m-flash-shadow-hover); --flash_notification_transition: var(--m-flash-transition); --flash_notification_title_font_size: var(--m-flash-title-font-size); --flash_notification_title_line_height: var(--m-flash-title-line-height); --flash_notification_title_font_weight: var(--m-flash-title-font-weight); --flash_notification_message_font_size: var(--m-flash-message-font-size); --flash_notification_message_line_height: var(--m-flash-message-line-height); --flash_notification_message_font_weight: var(--m-flash-message-font-weight); --flash_notification_meta_font_size: var(--m-flash-meta-font-size); --flash_notification_meta_line_height: var(--m-flash-meta-line-height); --flash_notification_meta_font_weight: var(--m-flash-meta-font-weight); --flash_notification_icon_wrap_size: var(--m-flash-icon-wrap-size); --flash_notification_icon_size: var(--m-flash-icon-size); --flash_notification_icon_radius: var(--m-flash-icon-radius); --flash_notification_icon_shadow: var(--m-flash-icon-shadow); --flash_notification_close_size: var(--m-flash-close-size); --flash_notification_close_radius: var(--m-flash-close-radius); --flash_notification_close_icon_size: var(--m-flash-close-icon-size); --flash_notification_close_bg: var(--m-flash-close-bg); --flash_notification_close_bg_hover: var(--m-flash-close-bg-hover); --flash_notification_close_border: var(--m-flash-close-border); --flash_notification_close_border_hover: var(--m-flash-close-border-hover); --flash_notification_close_color: var(--m-flash-close-color); --flash_notification_close_color_hover: var(--m-flash-close-color-hover); --flash_notification_progress_height: var(--m-flash-progress-height); --flash_notification_progress_radius: var(--m-flash-progress-radius); --flash_notification_progress_track_opacity: var(--m-flash-progress-track-opacity); --flash_notification_progress_bar_opacity: var(--m-flash-progress-bar-opacity); --flash_notification_bg: var(--m-flash-bg); --flash_notification_border: var(--m-flash-border); --flash_notification_text: var(--m-flash-text); --flash_notification_meta_color: var(--m-flash-meta); --flash_notification_accent_color: var(--m-flash-accent); --flash_notification_glow: var(--m-flash-glow); --flash_notification_icon_bg: var(--m-flash-icon-bg); --flash_notification_icon_color: var(--m-flash-icon-color); --flash_notification_progress_track_color: var(--m-flash-progress-track); --flash_notification_progress_bar_color: var(--m-flash-progress-bar); --flash_success_bg: var(--m-flash-success-bg); --flash_success_border: var(--m-flash-success-border); --flash_success_accent: var(--m-flash-success-accent); --flash_success_glow: var(--m-flash-success-glow); --flash_success_icon_bg: var(--m-flash-success-icon-bg); --flash_success_icon_color: var(--m-flash-success-icon-color); --flash_success_progress_track: var(--m-flash-success-progress-track); --flash_success_progress_bar: var(--m-flash-success-progress-bar); --flash_error_bg: var(--m-flash-error-bg); --flash_error_border: var(--m-flash-error-border); --flash_error_accent: var(--m-flash-error-accent); --flash_error_glow: var(--m-flash-error-glow); --flash_error_icon_bg: var(--m-flash-error-icon-bg); --flash_error_icon_color: var(--m-flash-error-icon-color); --flash_error_progress_track: var(--m-flash-error-progress-track); --flash_error_progress_bar: var(--m-flash-error-progress-bar); --flash_warning_bg: var(--m-flash-warning-bg); --flash_warning_border: var(--m-flash-warning-border); --flash_warning_accent: var(--m-flash-warning-accent); --flash_warning_glow: var(--m-flash-warning-glow); --flash_warning_icon_bg: var(--m-flash-warning-icon-bg); --flash_warning_icon_color: var(--m-flash-warning-icon-color); --flash_warning_progress_track: var(--m-flash-warning-progress-track); --flash_warning_progress_bar: var(--m-flash-warning-progress-bar); --flash_info_bg: var(--m-flash-info-bg); --flash_info_border: var(--m-flash-info-border); --flash_info_accent: var(--m-flash-info-accent); --flash_info_glow: var(--m-flash-info-glow); --flash_info_icon_bg: var(--m-flash-info-icon-bg); --flash_info_icon_color: var(--m-flash-info-icon-color); --flash_info_progress_track: var(--m-flash-info-progress-track); --flash_info_progress_bar: var(--m-flash-info-progress-bar); --flash_notification_enter_duration: var(--m-flash-enter-duration); --flash_notification_exit_duration: var(--m-flash-exit-duration); --flash_notification_progress_duration_default: var(--m-flash-progress-duration-default); --flash_notification_mobile_top: var(--m-flash-mobile-container-top); --flash_notification_mobile_inset_inline: var(--m-flash-mobile-container-inset-inline); --flash_notification_mobile_min_height: var(--m-flash-mobile-item-min-height); --flash_notification_mobile_padding_y: var(--m-flash-mobile-item-padding-y); --flash_notification_mobile_padding_x: var(--m-flash-mobile-item-padding-x); --flash_notification_mobile_gap: var(--m-flash-mobile-item-gap); --flash_notification_mobile_icon_wrap_size: var(--m-flash-mobile-icon-wrap-size); --flash_notification_mobile_close_size: var(--m-flash-mobile-close-size); --flash_notification_mobile_progress_inset_inline: var(--m-flash-mobile-progress-inset-inline); --flash_notification_mobile_progress_inset_block_end: var(--m-flash-mobile-progress-inset-block-end); }