fix(ui-dialog): allow consumers to override inherited border-radius

The dialog forced `border-radius: inherit` via an inline style so that content like Menu
and DateInput could inherit a wrapping View's radius. Inline styles (and an equivalent
emotion `css` rule) cannot be overridden by a consumer's own `css` prop, so components
like Modal could not set their own border-radius.

Wrap the `inherit` rule in an `@layer` cascade layer instead. Unlayered consumer styles
always win over layered ones regardless of specificity or source order, so an explicit
border-radius from Modal takes effect while the inherit fallback still applies when no
radius is provided.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: HerrTopi

packages/ui-dialog/src/Dialog/index.tsx

@@ -23,6 +23,7 @@
  */
 
 import { Component } from 'react'
+import { css } from '@emotion/react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
 import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils'
@@ -173,7 +174,11 @@ class Dialog extends Component<DialogProps> {
           role === 'dialog' && this.props.shouldContainFocus ? true : undefined
         }
         className={this.props.className} // TODO in V2 remove className, there is no usage of it.
-        style={{ borderRadius: 'inherit' }} // ensure the dialog inherits border radius from View
+        css={css`
+          @layer dialogBase {
+            & { border-radius: inherit; }
+          }
+        `} //making sure it inherits from containers if nothing is specified from outside and use the outside specifiers if they are present, e.g.:modal
         ref={this.getRef}
       >
         {this.props.children}