sebnitu / vrembem / 10852487272

94%

main: 100%

push

github

Apply dialog custom property overrides to modal and drawer components (#2018)

This PR primarily refactors how the dialog component's custom properties are used within the context of the modal and drawer components. This removes the need to apply component specific dialog styles and properties for modal and drawer and instead only pass a property map to the CSS override mixin for when default dialog styles need to be changed.

To achieve this, new `$dialog-override` maps have been added to modal and drawer components along with `$inline-dialog-override` and `$modal-dialog-override` for drawer to override dialog styles based on the drawer's mode. These maps are then passed to `css.override("dialog", $map...)` to help give more control over dialog styles without having to create redundant dialog properties.

**Additional Changes**
- Modal and drawer SCSS and custom property variables have been greatly simplified.
- Create core screen variables that are shared between modal and modal drawer styles.
- Create focus-ring property function calls for color and opacity. This returns a custom property with the module, core and css value fallback stack.
- Applied focus-ring styles to the dialog component.
- Update modal and drawer documentation examples.
- Vrembem vite demo markup now includes dialog, modal and drawer examples.

565 of 565 branches covered (100.0%)

Branch coverage included in aggregate %.

2511 of 2511 relevant lines covered (100.0%)

51.07 hits per line