chromium/ash/webui/recorder_app_ui/resources/components/cra/cra-button.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {Button} from 'chrome://resources/cros_components/button/button.js';
import {css} from 'chrome://resources/mwc/lit/index.js';

export class CraButton extends Button {
  static override styles = [
    Button.styles,
    // TODO: b/338544996 - This currently only allows customization if the
    // underlying is md-filled-button.
    // TODO: b/338544996 - This currently only allows customization if the
    // button-style is "primary" (the default value).
    // TODO: b/338544996 - Overriding things this way is pretty unclean since
    // we can't properly fallback to the parent value, so we have to hard-coded
    // the default value from cros-button here. We should submit these
    // customization options to upstream instead.
    css`
      md-filled-button {
        --md-filled-button-container-height: var(
          --cra-button-container-height,
          36px
        );
        --md-filled-button-label-text-font-family: var(
          --cra-button-label-text-font-family,
          var(--cros-button-2-font-family)
        );
        --md-filled-button-label-text-size: var(
          --cra-button-label-text-size,
          var(--cros-button-2-font-size)
        );
        --md-filled-button-label-text-line-height: var(
          --cra-button-label-text-line-height,
          var(--cros-button-2-line-height)
        );
        --md-filled-button-label-text-weight: var(
          --cra-button-label-text-weight,
          var(--cros-button-2-font-weight)
        );
        --md-filled-button-leading-space: var(--cra-button-leading-space, 16px);
        --md-filled-button-trailing-space: var(
          --cra-button-trailing-space,
          16px
        );
      }

      md-filled-button:has(.content-container.has-leading-icon) {
        --md-filled-button-leading-space: var(--cra-button-leading-space, 12px);
      }

      md-filled-button:has(.content-container.has-trailing-icon) {
        --md-filled-button-trailing-space: var(
          --cra-button-trailing-space,
          12px
        );
      }

      :host([button-style="primary"]) md-filled-button {
        --md-filled-button-hover-state-layer-color: var(
          --cra-button-hover-state-layer-color,
          var(--cros-sys-hover_on_prominent)
        );
        --md-filled-button-pressed-state-layer-color: var(
          --cra-button-pressed-state-layer-color,
          var(--cros-sys-ripple_primary)
        );
      }

      .content-container {
        gap: var(--cra-button-icon-gap, 8px);
      }
    `,
  ];
}

window.customElements.define('cra-button', CraButton);

declare global {
  interface HTMLElementTagNameMap {
    'cra-button': CraButton;
  }
}