الأنماط

الميكسنات والأنماط

Override any of the `--hub-toast-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).

Theming with hub-toast-theme

ميكسن	المعاملات	الوصف
Theming
`hub-toast-theme()`	`$accent--hub-toast-accent` `$bg--hub-toast-bg` `$color--hub-toast-color` `$border--hub-toast-border` `$border-width--hub-toast-border-width` `$border-radius--hub-toast-border-radius` `$shadow--hub-toast-shadow` `$min-width--hub-toast-min-width` `$max-width--hub-toast-max-width` `$padding-x--hub-toast-padding-x` `$padding-y--hub-toast-padding-y` `$gap--hub-toast-gap` `$font-size--hub-toast-font-size` `$title-font-size--hub-toast-title-font-size` `$title-font-weight--hub-toast-title-font-weight` `$progress-bg--hub-toast-progress-bg` `$progress-height--hub-toast-progress-height` `$close-opacity--hub-toast-close-opacity` `$close-opacity-hover--hub-toast-close-opacity-hover` `$container-gap--hub-toast-container-gap` `$container-offset--hub-toast-container-offset` `$container-z-index--hub-toast-container-zindex`	One-call theming for `<hub-toast>` notifications

متغيّرات CSS

نسّق كل بكسل عبر 22 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

Toast

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-toast-accent`	`var(--hub-sys-border-color-default, #dee2e6)`	color	لون الحد الأيسر أو الإبراز؛ يُضبط تلقائيًا من عائلة رموز DS للأنواع المدمجة.
`--hub-toast-bg`	`var(--hub-sys-surface-page, #fff)`	color	لون خلفية بطاقة toast.
`--hub-toast-border`	`var(--hub-sys-border-color-default, #dee2e6)`	border	Toast border color (per type → the accent)
`--hub-toast-border-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	استدارة زوايا بطاقة toast.
`--hub-toast-border-width`	`var(--hub-ref-border-width, 1px)`	length	Toast border width
`--hub-toast-close-opacity`	`0.5`	number	Close button opacity
`--hub-toast-close-opacity-hover`	`1`	number	Close button hover opacity
`--hub-toast-color`	`var(--hub-sys-text-primary, #212529)`	color	لون نص جسم toast.
`--hub-toast-container-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	المسافة الرأسية بين رسائل toast المتتالية في الحاوية.
`--hub-toast-container-offset`	`var(--hub-ref-space-3, 1rem)`	length	المسافة من حافة الشاشة إلى الحاوية.
`--hub-toast-container-zindex`	`var(--hub-sys-zindex-toast, 1090)`	number	ترتيب تكديس حاوية toast بالنسبة إلى التراكبات الأخرى.
`--hub-toast-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Toast font size
`--hub-toast-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	المسافة بين رسائل toast المكدّسة في الحاوية.
`--hub-toast-max-width`	`26rem`	length	العرض الأقصى لكل بطاقة toast.
`--hub-toast-min-width`	`18rem`	length	Toast minimum width
`--hub-toast-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	الحشو الأفقي داخل جسم toast.
`--hub-toast-padding-y`	`var(--hub-ref-space-3, 1rem)`	length	الحشو الرأسي داخل جسم toast.
`--hub-toast-progress-bg`	`color-mix(in oklch, var(--hub-toast-accent) 30%, transparent)`	color	لون تعبئة شريط التقدّم.
`--hub-toast-progress-height`	`0.25rem`	length	ارتفاع شريط التقدّم.
`--hub-toast-shadow`	`var(--hub-sys-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	الظل الذي تُلقيه بطاقة toast.
`--hub-toast-title-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	حجم خط عنوان التوست.
`--hub-toast-title-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	وزن خط عنوان التوست.