@12-apps/ui 6.20.0 → 6.22.0

package/src/components/feedback/Dialog/Dialog.look.native.ts

@@ -0,0 +1,159 @@
+import type { ViewStyle } from 'react-native';
+
+import type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';
+import {
+  DIALOG_BACKDROP,
+  DIALOG_BORDER_WIDTH,
+  DIALOG_GLASS,
+  DIALOG_GLOW,
+  DIALOG_MARGIN_UNITS,
+  DIALOG_MAX_WIDTH,
+  DIALOG_PAPER_SHADOW,
+  DIALOG_RADIUS_UNITS,
+} from './Dialog.metrics';
+import { alpha } from '../../../tokens/color';
+import { BLACK, halo } from '../../../tokens/shadow';
+import type { UiTheme } from '../../../tokens/theme';
+
+/**
+ * WHAT THE NATIVE `Dialog` PAINTS — the arithmetic, with no JSX in sight.
+ *
+ * `variantStylesOf` builds one `sx` by spreading base, then the decorations
+ * (`glow`, `pulse`), then the variant's own surface; whichever wrote a property
+ * last wins. The composition here spreads the SAME things in the SAME order, so
+ * `glow` survives on a `default` paper (whose surface declares no shadow) and is
+ * buried by a `glass` one, on both renderers.
+ */
+
+/** The named radius as a length. */
+export function dialogRadius(theme: UiTheme, radius: DialogBorderRadius): number {
+  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);
+}
+
+/** The scrim behind the paper: half-black, or a fifth of it for `glass`. */
+export function dialogBackdrop(glass: boolean): ViewStyle {
+  return {
+    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
+  };
+}
+
+/** The glass surface, shared by `variant="glass"` and the `glass` flag. */
+function glassSurface(theme: UiTheme): ViewStyle {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+    borderWidth: DIALOG_BORDER_WIDTH,
+    borderStyle: 'solid',
+    borderColor: alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha),
+  };
+}
+
+export interface DialogLookArgs {
+  variant: DialogVariant;
+  size: DialogSize;
+  borderRadius: DialogBorderRadius;
+  glass: boolean;
+  glow: boolean;
+  pulse: boolean;
+}
+
+export interface DialogLook {
+  /** Where the paper sits inside the modal, and how far in from the edges. */
+  overlay: ViewStyle;
+  paper: ViewStyle;
+  /** The paper's corner radius, for the pulse ring to follow. */
+  radius: number;
+}
+
+/** The centred paper of `default` and `glass`, before the variant paints over it. */
+function centredOverlay(theme: UiTheme): ViewStyle {
+  return {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // The web gives the PAPER `margin: theme.spacing(2)`; an inset on the
+    // overlay is the same gap and leaves the paper free to be `100%` wide.
+    padding: theme.spacing(DIALOG_MARGIN_UNITS),
+  };
+}
+
+function variantPaper(theme: UiTheme, a: DialogLookArgs, radius: number): ViewStyle {
+  switch (a.variant) {
+    case 'glass':
+      return {
+        ...glassSurface(theme),
+        boxShadow: [
+          {
+            offsetX: 0,
+            offsetY: DIALOG_GLASS.shadow.offsetY,
+            blurRadius: DIALOG_GLASS.shadow.blurRadius,
+            spreadDistance: 0,
+            color: alpha(BLACK, DIALOG_GLASS.shadow.alpha),
+          },
+        ],
+      };
+    case 'fullscreen':
+      return { borderRadius: 0, width: '100%', height: '100%', maxWidth: undefined };
+    case 'drawer':
+      return {
+        // SQUARE, because that is what the web paints. Two things have to fail
+        // for a drawer to have a corner there and both do: the `sx` builds
+        // `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already
+        // returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and
+        // the browser drops it; and that `sx` lands on a plain `Box` INSIDE the
+        // Drawer, whose own Paper MUI renders with `square: true`. Nothing is
+        // left to round the corners. See NATIVE-NOTES.md.
+        borderRadius: 0,
+        width: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+        maxWidth: '100%',
+        height: '100%',
+        maxHeight: undefined,
+      };
+    default:
+      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};
+  }
+}
+
+/** `fullscreen` and `drawer` fill the screen, so neither is inset or centred. */
+function overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {
+  if (variant === 'fullscreen') return { flex: 1 };
+  if (variant === 'drawer') return { flex: 1, alignItems: 'flex-end' };
+  return centredOverlay(theme);
+}
+
+/**
+ * Everything the dialog paints, decided once per render.
+ *
+ * The base carries what MUI's `Paper` gives every dialog — the paper colour and
+ * `shadows[24]` — because React Native has no Paper to inherit them from; a
+ * `glow` or a variant shadow then overrides it exactly as the `sx` does.
+ *
+ * `overflow` clips the paper's children to its corners, as MUI's own
+ * `overflow-y: auto` does — except under `pulse` or `glow`, which have to paint
+ * OUTSIDE the paper and are clipped by the view's own overflow on a device.
+ */
+export function dialogLook(theme: UiTheme, a: DialogLookArgs): DialogLook {
+  const radius = dialogRadius(theme, a.borderRadius);
+
+  const base: ViewStyle = {
+    position: 'relative',
+    borderRadius: radius,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: DIALOG_PAPER_SHADOW,
+    width: '100%',
+    maxWidth: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+    maxHeight: '100%',
+    overflow: a.pulse || a.glow ? 'visible' : 'hidden',
+  };
+
+  return {
+    radius,
+    overlay: overlayFor(theme, a.variant),
+    paper: {
+      ...base,
+      ...(a.glow
+        ? { boxShadow: halo(DIALOG_GLOW.blurRadius, alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)) }
+        : null),
+      ...variantPaper(theme, a, radius),
+    },
+  };
+}

package/src/components/feedback/Dialog/Dialog.metrics.ts

@@ -0,0 +1,140 @@
+import type { DialogBorderRadius, DialogSize } from './Dialog.base';
+import type { UiShadow } from '../../../tokens/shadow';
+
+/**
+ * THE NUMBERS BOTH `Dialog` RENDERERS DRAW WITH.
+ *
+ * `Dialog.styles.ts` / `Dialog.tsx` (MUI) and `Dialog.look.native.ts` /
+ * `Dialog.native.tsx` (React Native) read this one table. Spacing is in
+ * SPACING UNITS wherever the web writes `theme.spacing(n)`; everything else is
+ * px, a ratio or an alpha. Shadows are `UiShadow`s — see `src/tokens/shadow.ts`
+ * for why they have a shape rather than a string.
+ */
+
+/* ── The paper ────────────────────────────────────────────────────────────── */
+
+/** `theme.spacing(n)` per named radius; `lg` is the default. */
+export const DIALOG_RADIUS_UNITS: Record<DialogBorderRadius, number> = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 3,
+};
+
+/** How wide the paper may grow, per size, in px. Also the drawer's fixed width. */
+export const DIALOG_MAX_WIDTH: Record<DialogSize, number> = {
+  xs: 400,
+  sm: 600,
+  md: 800,
+  lg: 1000,
+  xl: 1200,
+};
+
+/** The paper is 90% of the viewport up to its max width, `theme.spacing(2)` clear of the edge. */
+export const DIALOG_WIDTH_PERCENT = 90;
+export const DIALOG_MARGIN_UNITS = 2;
+
+/** The hairline `glass` draws. */
+export const DIALOG_BORDER_WIDTH = 1;
+
+/**
+ * MUI's `theme.shadows[24]` — the elevation a `Dialog`'s Paper paints.
+ *
+ * Restated rather than derived because the web never names it: `MuiDialog`
+ * passes `elevation={24}` to its Paper, and React Native has no Paper to
+ * inherit that from.
+ */
+export const DIALOG_PAPER_SHADOW: readonly UiShadow[] = [
+  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: 'rgba(0, 0, 0, 0.2)' },
+  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: 'rgba(0, 0, 0, 0.14)' },
+  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: 'rgba(0, 0, 0, 0.12)' },
+];
+
+/* ── Variants and decorations ─────────────────────────────────────────────── */
+
+/** `glass`: a 0.1 wash of the paper behind a 20px blur, inside a primary hairline. */
+export const DIALOG_GLASS = {
+  backgroundAlpha: 0.1,
+  blurPx: 20,
+  borderAlpha: 0.2,
+  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 },
+} as const;
+
+/** `gradient`: a faint primary-into-secondary wash at 135°, over a 10px blur. */
+export const DIALOG_GRADIENT = { angleDeg: 135, stopAlpha: 0.1, blurPx: 10 } as const;
+
+/** `glow`: a 40px halo of the primary hue. */
+export const DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 } as const;
+
+/**
+ * `pulse`: a ring of the primary hue that grows 20px out of the paper's edge and
+ * fades, every two seconds. The web draws it as an `::after` box-shadow spread
+ * behind the paper (`z-index: -1`).
+ */
+export const DIALOG_PULSE = {
+  alpha: 0.3,
+  durationMs: 2000,
+  spread: 20,
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: 0.7,
+  zIndex: -1,
+} as const;
+
+/**
+ * The scrim: half-black, or a fifth of it behind an 8px blur for `glass`.
+ *
+ * It paints on BOTH renderers whatever `backdrop` is set to. The web reads that
+ * prop as `BackdropComponent={backdrop ? Backdrop : undefined}`, and `undefined`
+ * is exactly what MUI falls back to `Backdrop` for — so the scrim is there
+ * either way. Native mirrors that rather than inventing a difference; fixing it
+ * is a web change, made once, for both.
+ */
+export const DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 } as const;
+
+/* ── The slots ────────────────────────────────────────────────────────────── */
+
+/** Raw children (no `DialogContent`/`DialogActions`) get this padding, in spacing units. */
+export const DIALOG_BODY_PADDING_UNITS = {
+  horizontal: 3,
+  bottom: 2.5,
+  top: 2.5,
+  /** Tighter under a title, whose own bottom padding is most of the gap. */
+  topUnderTitle: 0.5,
+} as const;
+
+/** A `DialogHeader` given raw `children` is a padded box over a hairline instead. */
+export const DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;
+
+/**
+ * The title row: MUI's `DialogTitle` padding in px, and the bottom the web
+ * overrides in spacing units — tighter when a subtitle follows it.
+ */
+export const DIALOG_TITLE = {
+  padding: { top: 16, horizontal: 24 },
+  paddingBottomUnits: { withSubtitle: 1, plain: 2 },
+  subtitleGapUnits: 0.5,
+} as const;
+
+/**
+ * The close button: MUI's `IconButton` at its default 8px padding around a
+ * 24px glyph, on a circular hover wash.
+ */
+export const DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 } as const;
+
+/** `DialogContent`: `theme.spacing(3)`, tightened by `dense`. */
+export const DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 } as const;
+
+/**
+ * Top padding for a body that sits directly under the title.
+ *
+ * MUI zeroes it there, assuming the title's own bottom padding is the whole
+ * gap. That assumption breaks for a body opening with an outlined field: a
+ * filled field floats its label ABOVE the input's border box, and the body is a
+ * clipping box, so the label gets sliced in half (FUT-544). 12px clears the
+ * shrunk label's 9px overhang and leaves the gap visually tight.
+ */
+export const DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;
+
+/** `DialogActions`: `theme.spacing(2)` around, and one unit between by default. */
+export const DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 } as const;

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+
+import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
+import { dialogBackdrop, dialogLook } from './Dialog.look.native';
+import { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';
+import type { DialogProps } from './Dialog.types.native';
+import {
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  DialogTitledContext,
+  dialogBodyTextStyle,
+} from './DialogParts.native';
+import { PulseRing } from '../../../platform/pulse-ring.native';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { renderTextChildren } from '../../../platform/text-children';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { UiTheme } from '../../../tokens/theme';
+
+// The shared stories import all four names from `./Dialog`, which resolves here
+// under Metro and in the native Storybook; the slots live in their own file to
+// keep this one about the envelope, and are re-exported so that import works.
+export { DialogActions, DialogContent, DialogHeader } from './DialogParts.native';
+
+/**
+ * The dialog body. Consumers that pass raw children (no `DialogContent`) would
+ * render them flush against the paper edges — give them comfortable default
+ * padding; `DialogContent`/`DialogActions` users keep managing their own.
+ *
+ * The web can also catch a slot passed through a COMPONENT boundary, with a
+ * `:has()` selector that asks the DOM one step after React could. React Native
+ * has no such selector, so only the element-type check runs here — see
+ * NATIVE-NOTES.md.
+ */
+const styles = StyleSheet.create({
+  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */
+  rawBody: { flexGrow: 1, flexShrink: 1 },
+});
+
+function bodyOf(theme: UiTheme, children: React.ReactNode, hasTitle: boolean): React.ReactNode {
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;
+  // A `ScrollView`, not a `View`: MUI's paper is `overflow-y: auto`, so
+  // overlong raw children scroll on the web. The native paper is `maxHeight:
+  // '100%'` with its overflow hidden, so a plain wrapper clipped them with no
+  // way to reach the rest. `DialogContent` already gets this treatment; raw
+  // children were the one path that did not.
+  return (
+    <ScrollView
+      style={styles.rawBody}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),
+        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),
+        paddingTop: theme.spacing(top),
+      }}
+    >
+      {renderTextChildren(children, dialogBodyTextStyle(theme))}
+    </ScrollView>
+  );
+}
+
+/**
+ * Whether a `<DialogHeader>` arrived as a CHILD rather than through the `title`
+ * prop.
+ *
+ * The web tightens a body under a title with
+ * `.MuiDialogTitle-root + &.MuiDialogContent-root` — a CSS sibling selector, so
+ * it fires however the title got there. Native reads a context instead, and the
+ * context was set from the `title` prop alone, which is the composition nothing
+ * uses: every story and `Dialog.md` write the header as a child, and those
+ * bodies took the untitled 24px inset where the web gives them 12px.
+ */
+function hasHeaderChild(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === DialogHeader,
+  );
+}
+
+export function Dialog(rawProps: DialogProps): React.JSX.Element {
+  const {
+    children,
+    open,
+    variant,
+    size,
+    title,
+    description,
+    showCloseButton,
+    backdrop: _backdrop,
+    persistent,
+    glass,
+    gradient: _gradient,
+    glow,
+    pulse,
+    borderRadius,
+    onClose,
+    ...others
+  } = withDialogDefaults(rawProps);
+
+  const theme = useUiTheme();
+  const look = dialogLook(theme, { variant, size, borderRadius, glass, glow, pulse });
+  const testID = resolveTestId(others, 'dialog');
+  const { style, ...modalProps } = withoutTestIdProps(others);
+
+  // A persistent dialog refuses both routes out that are not a button: the
+  // backdrop and Escape (which `Modal` routes through `onRequestClose`).
+  const dismiss = persistent ? undefined : onClose;
+
+  return (
+    <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>
+      <View style={look.overlay}>
+        <Pressable
+          aria-hidden
+          tabIndex={-1}
+          testID={`${testID}-backdrop`}
+          onPress={dismiss}
+          style={[StyleSheet.absoluteFill, dialogBackdrop(glass)]}
+        />
+        <View testID={testID} style={[look.paper, style]}>
+          {pulse ? (
+            <PulseRing
+              color={theme.palette.primary.main}
+              radius={look.radius}
+              spread={DIALOG_PULSE.spread}
+              durationMs={DIALOG_PULSE.durationMs}
+              fadeAt={DIALOG_PULSE.fadeAt}
+              opacity={DIALOG_PULSE.alpha}
+              testID={`${testID}-pulse`}
+            />
+          ) : null}
+          <DialogTitledContext.Provider value={Boolean(title) || hasHeaderChild(children)}>
+            {title ? (
+              <DialogHeader
+                title={title}
+                subtitle={description}
+                showCloseButton={showCloseButton}
+                onClose={onClose}
+                dataTestId={testID}
+              />
+            ) : null}
+            {bodyOf(theme, children, Boolean(title))}
+          </DialogTitledContext.Provider>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+Dialog.displayName = 'Dialog';

package/src/components/feedback/Dialog/Dialog.styles.ts

@@ -1,12 +1,28 @@
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 
+import type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';
+import {
+  DIALOG_BACKDROP,
+  DIALOG_BORDER_WIDTH,
+  DIALOG_GLASS,
+  DIALOG_GLOW,
+  DIALOG_GRADIENT,
+  DIALOG_MARGIN_UNITS,
+  DIALOG_MAX_WIDTH,
+  DIALOG_PULSE,
+  DIALOG_RADIUS_UNITS,
+  DIALOG_WIDTH_PERCENT,
+} from './Dialog.metrics';
+import { shadowCss } from '../../../tokens/shadow';
 import { dynamicViewportHeight } from '../../../utils/viewport';
-import type { DialogProps } from './Dialog.types';
 
 /**
  * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):
  * pure helpers so `Dialog.tsx` stays within the size/complexity budget.
+ *
+ * Every number comes from `Dialog.metrics.ts`, which the native renderer reads
+ * too — so a paper cannot be 800px wide on one side and 780 on the other.
  */
 
 // Define pulse animation
@@ -16,7 +32,7 @@ const pulseAnimation = keyframes`
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 20px currentColor;
+    box-shadow: 0 0 0 ${DIALOG_PULSE.spread}px currentColor;
     opacity: 0;
   }
   100% {
@@ -27,9 +43,9 @@ const pulseAnimation = keyframes`
 
 /** Style toggles that shape the dialog paper (extracted so each fn stays small). */
 interface VariantStyleOptions {
-  variant: NonNullable<DialogProps['variant']>;
-  size: NonNullable<DialogProps['size']>;
-  borderRadius: NonNullable<DialogProps['borderRadius']>;
+  variant: DialogVariant;
+  size: DialogSize;
+  borderRadius: DialogBorderRadius;
   glass: boolean;
   gradient: boolean;
   glow: boolean;
@@ -37,33 +53,21 @@ interface VariantStyleOptions {
 }
 
 function borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {
-  switch (borderRadius) {
-    case 'none': return 0;
-    case 'sm': return theme.spacing(0.5);
-    case 'md': return theme.spacing(1);
-    case 'xl': return theme.spacing(3);
-    case 'lg':
-    default: return theme.spacing(2);
-  }
+  const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;
+  // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.
+  return units === 0 ? 0 : theme.spacing(units);
 }
 
 function maxWidthOf(size: VariantStyleOptions['size']): number {
-  switch (size) {
-    case 'xs': return 400;
-    case 'sm': return 600;
-    case 'lg': return 1000;
-    case 'xl': return 1200;
-    case 'md':
-    default: return 800;
-  }
+  return DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md;
 }
 
 function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
   return {
     borderRadius: borderRadiusOf(theme, opts.borderRadius),
     maxWidth: maxWidthOf(opts.size),
-    width: '90vw',
-    margin: theme.spacing(2),
+    width: `${DIALOG_WIDTH_PERCENT}vw`,
+    margin: theme.spacing(DIALOG_MARGIN_UNITS),
     transition: theme.transitions.create(
       ['box-shadow', 'background-color', 'backdrop-filter'],
       { duration: theme.transitions.duration.standard },
@@ -72,7 +76,17 @@ function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
 }
 
 function glowStylesOf(theme: Theme, glow: boolean) {
-  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};
+  return glow
+    ? {
+        boxShadow: shadowCss({
+          offsetX: 0,
+          offsetY: 0,
+          blurRadius: DIALOG_GLOW.blurRadius,
+          spreadDistance: 0,
+          color: alpha(theme.palette.primary.main, DIALOG_GLOW.alpha),
+        }),
+      }
+    : {};
 }
 
 function pulseStylesOf(theme: Theme, pulse: boolean) {
@@ -88,10 +102,10 @@ function pulseStylesOf(theme: Theme, pulse: boolean) {
       bottom: 0,
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
-      opacity: 0.3,
-      animation: `${pulseAnimation} 2s infinite`,
+      opacity: DIALOG_PULSE.alpha,
+      animation: `${pulseAnimation} ${DIALOG_PULSE.durationMs / 1000}s infinite`,
       pointerEvents: 'none' as const,
-      zIndex: -1,
+      zIndex: DIALOG_PULSE.zIndex,
     },
   };
 }
@@ -100,17 +114,19 @@ function pulseStylesOf(theme: Theme, pulse: boolean) {
 function defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {
   const gradientStyles = opts.gradient
     ? {
-        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
-        backdropFilter: 'blur(10px)',
+        background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,
+        backdropFilter: `blur(${DIALOG_GRADIENT.blurPx}px)`,
       }
     : {};
   return {
     ...gradientStyles,
     backgroundColor: opts.glass
-      ? alpha(theme.palette.background.paper, 0.1)
+      ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha)
       : theme.palette.background.paper,
-    backdropFilter: opts.glass ? 'blur(20px)' : 'none',
-    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
+    backdropFilter: opts.glass ? `blur(${DIALOG_GLASS.blurPx}px)` : 'none',
+    border: opts.glass
+      ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`
+      : 'none',
   };
 }
 
@@ -124,10 +140,16 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
       return {
         ...baseStylesOf(theme, opts),
         ...decorations,
-        backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+        backdropFilter: `blur(${DIALOG_GLASS.blurPx}px)`,
+        border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
+        boxShadow: shadowCss({
+          offsetX: 0,
+          offsetY: DIALOG_GLASS.shadow.offsetY,
+          blurRadius: DIALOG_GLASS.shadow.blurRadius,
+          spreadDistance: 0,
+          color: alpha(theme.palette.common.black, DIALOG_GLASS.shadow.alpha),
+        }),
       };
     case 'fullscreen':
       return {
@@ -164,10 +186,10 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
 
 export function backdropSxOf(theme: Theme, glass: boolean) {
   return {
-    backgroundColor: glass
-      ? alpha(theme.palette.common.black, 0.2)
-      : alpha(theme.palette.common.black, 0.5),
-    backdropFilter: glass ? 'blur(8px)' : 'none',
+    backgroundColor: alpha(
+      theme.palette.common.black,
+      glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain,
+    ),
+    backdropFilter: glass ? `blur(${DIALOG_BACKDROP.blurPx}px)` : 'none',
   };
 }
-