refactor(notice,banner,toast): DLT-3296 decouple CSS and fix specificity violations

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Refactor

📖 Jira Ticket

DLT-3296

📖 Description

Decouple CSS for notice, banner, and toast. Replace cross-component descendant selectors with CSS custom property inheritance. Fix specificity violations.

What changed:

• notice.less no longer references banner or toast (removed .d-banner & overrides)
• banner.less and toast.less no longer target .d-notice__* children via descendant selectors
• Truncate modifier specificity reduced from (0,4,0) to (0,1,0) via :where()
• display: flex / align-items: start moved from shared rule to .d-notice individual rule
• Hardcoded 1px in banner.less replaced with var(--dt-size-border-100)
• Redundant .d-notice__message font override in banner.less removed

What did NOT change:

• No visual changes
• No breaking changes for CSS-only or Vue consumers
• No class names, HTML structure, or Vue component API changes

💡 Context

notice.less had .d-banner & overrides baked into notice child selectors — notice knew about its consumers. banner.less and toast.less reached into notice's children via descendant selectors, inflating specificity to (0,2,0). The truncate modifier hit (0,4,0). Coupling ran in both directions, making all three files fragile to changes in the others.

The fix extends the custom property inheritance pattern already used for colors (e.g. --notice-color-background) to also cover spacing, direction, and alignment overrides. Each file now owns only its own styles.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[coderabbitai]

Walkthrough

Refactored notice-based components (banner, notice, toast) to parameterize layout styling via CSS variables instead of fixed nested selectors. Moved flex display properties to dedicated rules and made margins, gaps, and alignment values configurable across components.

Changes

Cohort / File(s)	Summary
Banner component packages/dialtone-css/lib/build/less/components/banner.less	Added CSS variables (--notice-icon-gap, --notice-actions-align, --notice-icon-block-offset, --notice-content-direction, --notice-content-gap, --notice-content-align) to enable layout customization. Updated border declaration from fixed 1px to var(--dt-size-border-100) solid.
Notice component packages/dialtone-css/lib/build/less/components/notice.less	Converted fixed layout styles to variable-driven rules. Made flex direction, gaps, and alignment configurable for .d-notice__content and .d-notice__actions. Replaced fixed icon margins with variables. Updated truncate styling to use descendant selectors and :where(...) pseudo-class.
Toast components packages/dialtone-css/lib/build/less/components/toast.less	Added --notice-actions-button-offset CSS variable to .d-toast__dialog and .d-toast-alternate__dialog, replacing inline button margin rules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

no-visual-test

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch banner-notice-toast-style-refactor

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dialtone-css/lib/build/less/components/notice.less`:
- Around line 55-59: The CSS change alters cascade-driven layout and truncation
by introducing/using CSS vars (--notice-content-direction, --notice-content-gap,
--notice-content-align) and an align-self: center rule that affects
notice/banner/toast; add automated coverage: create visual-regression
(screenshot) tests and a unit/style snapshot test for the notice, banner and
toast components that assert layout/flow and truncation under different var
values and fallbacks (including tests that set --notice-content-direction to
row/column, override --notice-content-gap, and confirm align-self behavior), and
include test cases covering the other edited blocks referenced (lines ~69-73,
~86-88, ~188-197) so the cross-component behavior is validated before merge.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 982d7995-aacf-4aa9-82dd-3b8c89488183

📥 Commits

Reviewing files that changed from the base of the PR and between edd98b2 and 67d3423.

📒 Files selected for processing (3)

• packages/dialtone-css/lib/build/less/components/banner.less
• packages/dialtone-css/lib/build/less/components/notice.less
• packages/dialtone-css/lib/build/less/components/toast.less

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1194/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1194/