chromium/ash/webui/common/resources/personalization/cros_button_style.css

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

/* #css_wrapper_metadata_start
 * #type=style
 * #scheme=relative
 * #css_wrapper_metadata_end */

cr-button {
  border-color: var(--cros-button-stroke-color-secondary);
  border-radius: 16px;
}

/* TODO: After Jelly launches, most of the cr-button colors can be removed. */
cr-button.primary {
  background-color: var(--cros-button-background-color-primary);
  border: 0;
  --text-color: var(--cros-button-label-color-primary);
  --ink-color: var(--cros-button-ripple-color-primary);
  --hover-bg-color: var(--cros-button-background-color-primary-hover-preblended);
  --disabled-bg: var(--cros-button-background-color-primary-disabled);
  --disabled-text-color: var(--cros-button-label-color-primary-disabled);
}

cr-button.primary:active {
  box-shadow: none;
}

cr-button.primary:hover {
  background-color: var(--cros-button-background-color-primary-hover-preblended);
}

cr-button.secondary {
  background-color: var(--cros-button-background-color-secondary);
  border: 1px solid var(--cros-button-stroke-color-secondary);
  --text-color: var(--cros-button-label-color-secondary);
  --border-color: var(--cros-button-stroke-color-secondary);
  --ink-color: var(--cros-button-ripple-color-secondary);
  --hover-border-color: var(--cros-button-stroke-color-secondary-hover);
  --hover-bg-color: var(--cros-button-background-color-secondary-hover);
  --disabled-text-color: var(--cros-button-label-color-secondary-disabled);
  --disabled-border-color: var(--cros-button-stroke-color-secondary-disabled);
}

cr-button.secondary:hover {
  background-color: var(--cros-button-background-color-secondary-hover);
}

cr-icon-button:focus-visible,
cr-button:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--cros-sys-focus_ring, rgba(var(--cros-focus-ring-color-rgb), 0.8));
}

cr-icon-button:hover,
cr-button:hover {
  background-color: var(--cros-ripple-color);
  box-shadow: none;
}

cr-button[aria-pressed=true],
cr-button[aria-selected=true] {
  background-color: var(--cros-sys-highlight_shape, var(--cros-highlight-color));
  border: none;
}

iron-icon {
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
}

cr-icon-button {
  --cr-icon-button-fill-color: var(--cros-menu-icon-color);
}