chrome/browser/resources/chromeos/cloud_upload/base_setup_page.html

<style>
  :host {
    height: 556px;
    width: 512px;
  }

  .body-wrapper {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 320px;
    padding: 32px;
    width: 512px;
  }

  #content {
    flex-grow: 1;
    max-height: 192px;
    overflow: scroll;
  }

  #dialog:focus-visible {
    outline: none;
  }

  #content.fade-top::before {
    background: linear-gradient(var(--cros-sys-app_base) 0,
                                transparent 100%);
    bottom: 268px;  /* margin + buttons + content margin and height - height */
    content: '';
    height: 20px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #content.fade-top::before {
      background: linear-gradient(var(--cros-bg-color-elevation-3) 0,
                                  transparent 100%);
    }
  }

  #content.fade-bottom::after {
    background: linear-gradient(transparent 0,
                                var(--cros-sys-app_base) 100%);
    bottom: 96px;  /* margin + buttons + content margin */
    content: '';
    height: 20px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #content.fade-bottom::after {
      background: linear-gradient(transparent 0,
                                  var(--cros-bg-color-elevation-3) 100%);
    }
  }

  #header-image {
    background-color: var(--cros-sys-app_base_shaded);
    height: 236px;
    width: 512px;
  }

  ::slotted([slot=header-image]) {
    --cros-sys-illo-color1-1: var(--cros-sys-illo-elevated-color1-1);
    --cros-sys-illo-color1-2: var(--cros-sys-illo-elevated-color1-2);
    --cros-sys-illo-base: var(--cros-sys-illo-elevated-base);
    --cros-sys-illo-secondary: var(--cros-sys-illo-elevated-secondary);


    height: 100%;
    width: 100%;
  }

  ::slotted([slot=title]) {
    color: var(--cros-sys-on_surface);
    font: var(--cros-display-6-font);
  }

  ::slotted([slot=body]) {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-2-font);
    margin-block-start: 16px;
  }

  ::slotted([slot=button-container]) {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  div#footer {
    display: flex;
    margin-block-start: 32px;
  }

  cr-button {
    --active-bg: transparent;
    --active-shadow: none;
    --active-shadow-action: none;
    --bg-action: var(--cros-sys-primary);
    --cr-button-height: 36px;
    --disabled-bg-action:
        var(--cros-sys-disabled_container);
    --disabled-bg: var(--cros-sys-disabled_container);;
    --disabled-text-color: var(--cros-sys-disabled);
    /* Use the default bg color as hover color because we
        rely on hoverBackground layer below.  */
    --hover-bg-action: var(--cros-sys-primary);
    --hover-bg-color: var(--cros-sys-primary_container);
    --ink-color: var(--cros-sys-ripple_primary);
    --ripple-opacity-action: 1;
    --ripple-opacity: 1;
    --text-color-action: var(--cros-sys-on_primary);
    --text-color: var(--cros-sys-on_primary_container);
    border: none;
    border-radius: 18px;
    box-shadow: none;
  }

  cr-button.cancel-button {
    background-color: var(--cros-sys-primary_container);
  }

  cr-button.cancel-button:hover::part(hoverBackground) {
    background-color: var(--cros-sys-hover_on_subtle);
    display: block;
  }

  cr-button.action-button:hover::part(hoverBackground) {
    background-color: var(--cros-sys-hover_on_prominent);
    display: block;
  }

  :host-context(.focus-outline-visible) cr-button:focus {
    outline: 2px solid var(--cros-sys-focus_ring);
    outline-offset: 2px;
  }
</style>

<div id="dialog" role="dialog" tabindex="-1" aria-labelledby="title">
  <div id="header-image">
    <slot name="header-image"></slot>
  </div>
  <div class="body-wrapper">
    <div id="content">
      <slot id="title" name="title"></slot>
      <slot name="body"></slot>
    </div>
    <div id="footer">
      <slot name="button-container"></slot>
    </div>
  </div>
</div>