/* 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 */
/*
* Style Module that defines overrides for cr-elements on ChromeOS. This file
* plumbs semantic colors and fonts into cr-elements.
*
* To get ChromeOS System colors, an element must:
* 1) Have an ancestor element with the "cros" attribute in the <html> tag.
* 2) Import the "cros_color_overrides.css.js" CSS wrapper file in JS/TS.
* 3) Include the "cros-color-overrides" style module in HTML.
*
* To get ChromeOS Jelly colors, an element must:
* 1) Have an ancestor element with the "jelly-enabled" class in the <body> tag.
* 2) Import the "cros_color_overrides.css.js" CSS wrapper file in JS/TS.
* 3) Include the "cros-color-overrides" style module in HTML.
*
* To apply ChromeOS overrides for Chrome Refresh 2023 styles, an element must:
* 1) Have an ancestor element with both the "cros" and "chrome-refresh-2023"
* attributes in the <html> tag.
* 2) Import the "cros_color_overrides.css.js" CSS wrapper file in JS/TS.
* 3) Include the "cros-color-overrides" style module in HTML.
*/
:host-context([cros]) a:not(.item)[href] {
color: var(--cros-link-color);
}
:host-context([cros]) cr-button[has-prefix-icon_],
:host-context([cros]) cr-button[has-suffix-icon_] {
--iron-icon-fill-color: currentColor;
}
:host-context([cros]) cr-radio-button {
--cr-radio-button-checked-color: var(--cros-radio-button-color);
--cr-radio-button-checked-ripple-color:
var(--cros-radio-button-ripple-color);
--cr-radio-button-unchecked-color:
var(--cros-radio-button-color-unchecked);
--cr-radio-button-unchecked-ripple-color:
var(--cros-radio-button-ripple-color-unchecked);
}
:host-context([cros]) cr-toggle {
--cr-toggle-checked-bar-color: var(--cros-switch-track-color-active);
/* |--cros-switch-track-color-active| already includes opacity. */
--cr-toggle-checked-bar-opacity: 100%;
--cr-toggle-checked-button-color: var(--cros-switch-knob-color-active);
--cr-toggle-checked-ripple-color: var(--cros-focus-aura-color);
--cr-toggle-unchecked-bar-color: var(--cros-switch-track-color-inactive);
--cr-toggle-unchecked-button-color: var(--cros-switch-knob-color-inactive);
--cr-toggle-unchecked-ripple-color: var(--cros-ripple-color);
--cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
--cr-toggle-ripple-diameter: 32px;
}
:host-context([cros]):host-context(.focus-outline-visible) cr-toggle:focus {
--cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
}
:host-context([cros]) paper-spinner-lite {
--paper-spinner-color: var(--cros-icon-color-prominent);
}
/** Jelly-specific styles below */
/** General color overrides */
:host-context(body.jelly-enabled) {
/* TODO(b/266837484) --cros-* values will be updated globally. Remove these
definitions after the swap. */
--cros-button-label-color-primary: var(--cros-sys-on_primary);
--cros-link-color: var(--cros-sys-primary);
--cros-separator-color: var(--cros-sys-separator);
--cros-tab-slider-track-color: var(--cros-sys-surface_variant, 80%);
--cr-form-field-label-color: var(--cros-sys-on_surface);
--cr-link-color: var(--cros-sys-primary);
--cr-primary-text-color: var(--cros-sys-on_surface);
--cr-secondary-text-color: var(--cros-sys-on_surface_variant);
}
:host-context([cros][chrome-refresh-2023]) {
--cr-focus-outline-color: var(--cros-sys-focus_ring);
--cr-disabled-opacity: var(--cros-disabled-opacity);
}
/* Button */
:host-context(body.jelly-enabled) cr-button {
/* Default button colors */
--text-color: var(--cros-sys-on_primary_container);
--ink-color: var(--cros-sys-ripple_primary);
--iron-icon-fill-color: currentColor;
--hover-bg-color: var(--cros-sys-hover_on_subtle);
--ripple-opacity: .1;
/* Action button colors */
--bg-action: var(--cros-sys-primary);
--ink-color-action: var(--cros-sys-ripple_primary);
--text-color-action: var(--cros-sys-on_primary);
--hover-bg-action: var(--cros-sys-hover_on_prominent);
--ripple-opacity-action: 1;
/* Disabled button colors */
--disabled-bg: var(--cros-sys-disabled_container);
--disabled-bg-action: var(--cros-sys-disabled_container);
--disabled-text-color: var(--cros-sys-disabled);
background-color: var(--cros-sys-primary_container);
border: none;
}
:host-context(body.jelly-enabled) cr-button:hover::part(hoverBackground) {
background-color: var(--hover-bg-color);
display: block;
}
:host-context(body.jelly-enabled) cr-button:active,
:host-context(body.jelly-enabled) cr-button.action-button:not(:active):hover {
box-shadow: none;
}
:host-context(body.jelly-enabled) cr-button.action-button {
background-color: var(--bg-action);
}
:host-context(body.jelly-enabled)
cr-button.action-button:hover::part(hoverBackground) {
background-color: var(--hover-bg-action);
}
:host-context(body.jelly-enabled) cr-button[disabled] {
background-color: var(--cros-sys-disabled_container);
}
:host-context(body.jelly-enabled):host-context(.focus-outline-visible)
cr-button:focus {
box-shadow: none;
outline: 2px solid var(--cros-sys-focus_ring);
}
/* Checkbox */
:host-context(body.jelly-enabled) cr-checkbox {
--cr-checkbox-checked-box-color: var(--cros-sys-primary);
--cr-checkbox-ripple-checked-color: var(--cros-sys-ripple_primary);
--cr-checkbox-checked-ripple-opacity: 1;
--cr-checkbox-mark-color: var(--cros-sys-inverse_on_surface);
--cr-checkbox-ripple-unchecked-color: var(--cros-sys-ripple_primary);
--cr-checkbox-unchecked-box-color: var(--cros-sys-on_surface);
--cr-checkbox-unchecked-ripple-opacity: 1;
}
:host-context([cros][chrome-refresh-2023]) cr-checkbox {
--cr-checkbox-focus-outline: none;
}
:host-context([cros][chrome-refresh-2023]) cr-checkbox[disabled] {
opacity: var(--cros-disabled-opacity);
}
:host-context([cros][chrome-refresh-2023]):host-context(.focus-outline-visible)
cr-checkbox:focus {
--cr-checkbox-ripple-ring: 2px solid var(--cros-sys-focus_ring);
}
/* Icon button */
:host-context(body.jelly-enabled) cr-icon-button,
:host-context(body.jelly-enabled) cr-link-row::part(icon),
:host-context(body.jelly-enabled) cr-expand-button::part(icon) {
--cr-icon-button-fill-color: var(--cros-sys-secondary);
--cr-icon-button-focus-outline-color: var(--cros-sys-focus_ring);
}
/* Input and Textarea */
:host-context(body.jelly-enabled) cr-input,
:host-context(body.jelly-enabled) cr-search-field::part(searchInput),
:host-context(body.jelly-enabled) cr-searchable-drop-down::part(input),
:host-context(body.jelly-enabled) cr-textarea {
--cr-input-background-color: var(--cros-sys-input_field_on_base);
--cr-input-error-color: var(--cros-sys-error);
--cr-input-focus-color: var(--cros-sys-primary);
--cr-input-placeholder-color: var(--cros-sys-secondary);
}
:host-context([cros][chrome-refresh-2023]) cr-input,
:host-context([cros][chrome-refresh-2023]) cr-search-field::part(searchInput) {
--cr-input-background-color: var(--cros-sys-input_field_on_base);
--cr-input-border: none;
--cr-input-border-bottom: none;
--cr-input-border-radius: 8px;
--cr-input-label-color: var(--cros-sys-on-surface);
--cr-input-padding-start: 16px;
--cr-input-padding-end: 16px;
--cr-input-placeholder-color: var(--cros-sys-secondary);
--cr-input-underline-display: none;
font: var(--cros-body-2-font);
/* Focused state */
--cr-input-focus-color: var(--cros-sys-primary);
--cr-input-focus-label-color: var(--cros-sys-primary);
--cr-input-focus-outline: 2px solid var(--cros-sys-focus_ring);
/* Hover state */
--cr-input-hover-background-color: transparent;
/* Invalid state */
--cr-input-error-color: var(--cros-sys-error);
}
:host-context([cros][chrome-refresh-2023]) cr-input[disabled] {
color: currentColor;
opacity: var(--cros-disabled-opacity);
}
:host-context([cros][chrome-refresh-2023]) cr-input[invalid] {
--cr-input-focus-outline: 2px solid var(--cros-sys-error);
}
/* Toolbar search field */
:host-context([cros][chrome-refresh-2023]) cr-toolbar-search-field {
--cr-toolbar-search-field-hover-background: none;
}
/* md-select */
:host-context([cros][chrome-refresh-2023]) .md-select {
--md-arrow-width: 7px;
--md-select-bg-color: var(--cros-sys-input_field_on_base);
--md-select-focus-shadow-color: transparent;
--md-select-option-bg-color: var(--cros-sys-base_elevated);
--md-select-side-padding: 16px;
--md-select-text-color: var(--cros-sys-on_surface);
border: none;
border-radius: 8px;
font: var(--cros-body-2-font);
height: 36px;
line-height: 36px;
}
:host-context([cros][chrome-refresh-2023]) .md-select:hover {
background-color: var(--md-select-bg-color);
}
:host-context([cros][chrome-refresh-2023]) .md-select[disabled] {
background-color: var(--md-select-bg-color);
border-color: transparent;
color: var(--md-select-text-color);
opacity: var(--cros-disabled-opacity);
}
/* Radio button */
:host-context(body.jelly-enabled),
:host-context(body.jelly-enabled) cr-radio-button {
--cr-radio-button-checked-color: var(--cros-sys-primary);
--cr-radio-button-checked-ripple-color: var(--cros-sys-ripple_primary);
--cr-radio-button-unchecked-color: var(--cros-sys-on_surface);
--cr-radio-button-unchecked-ripple-color:
var(--cros-sys-ripple_neutral_on_subtle);
}
:host-context([cros][chrome-refresh-2023]),
:host-context([cros][chrome-refresh-2023]) cr-radio-button {
--cr-radio-button-checked-color: var(--cros-sys-primary);
--cr-radio-button-checked-ripple-color: var(--cros-sys-ripple_primary);
--cr-radio-button-unchecked-color: var(--cros-sys-on_surface);
--cr-radio-button-unchecked-ripple-color:
var(--cros-sys-ripple_neutral_on_subtle);
--cr-radio-button-ink-size: 40px;
}
:host-context([cros][chrome-refresh-2023]) cr-radio-button[disabled] {
--cr-radio-button-checked-color: var(--cros-sys-disabled);
--cr-radio-button-unchecked-color: var(--cros-sys-disabled);
}
:host-context(body.jelly-enabled) cr-card-radio-button {
--cr-card-background-color: var(--cros-sys-app_base);
--cr-checked-color: var(--cros-sys-primary);
--cr-radio-button-checked-ripple-color: var(--cros-sys-ripple_primary);
--hover-bg-color: var(--cros-sys-hover_on_subtle);
}
/* Search field */
:host-context(body.jelly-enabled) cr-search-field {
--cr-search-field-clear-icon-fill: var(--cros-sys-primary);
--cr-search-field-clear-icon-margin-end: 6px;
--cr-search-field-input-border-bottom: none;
--cr-search-field-input-padding-start: 8px;
--cr-search-field-input-underline-border-radius: 4px;
--cr-search-field-search-icon-display: none;
--cr-search-field-search-icon-fill: var(--cros-sys-primary);
--cr-search-field-search-icon-inline-display: block;
--cr-search-field-search-icon-inline-margin-start: 6px;
border-radius: 4px;
}
:host-context([cros][chrome-refresh-2023]) cr-search-field {
/* Search icon */
--cr-search-field-search-icon-fill: var(--cros-sys-secondary);
--cr-search-field-search-icon-inline-margin-start: 0;
/* Clear icon */
--cr-search-field-clear-icon-fill: var(--cros-sys-secondary);
--cr-search-field-clear-icon-margin-end: 6px;
--cr-search-field-clear-icon-size: 16px;
}
:host-context([cros][chrome-refresh-2023]) cr-search-field::part(searchInput) {
/* Modify the styles defined in "Input and Textarea" above. */
--cr-input-padding-bottom: 10px;
--cr-input-padding-end: 28px;
--cr-input-padding-start: 8px;
--cr-input-padding-top: 10px;
}
/* Slider */
:host-context(body.jelly-enabled) cr-slider {
--cr-slider-active-color: var(--cros-sys-primary);
--cr-slider-container-color: var(--cros-sys-primary_container);
--cr-slider-container-disabled-color: var(--cros-sys-disabled_container);
--cr-slider-disabled-color: var(--cros-sys-disabled);
--cr-slider-knob-active-color: var(--cros-sys-primary);
--cr-slider-knob-disabled-color: var(--cros-sys-disabled);
--cr-slider-marker-active-color: var(--cros-sys-primary_container);
--cr-slider-marker-color: var(--cros-sys-primary);
--cr-slider-marker-disabled-color: var(--cros-sys-disabled);
--cr-slider-ripple-color: var(--cros-sys-hover_on_prominent);
}
:host-context(body.jelly-enabled) cr-slider:not([disabled])::part(knob) {
background-color: var(--cros-sys-primary);
}
:host-context(body.jelly-enabled) cr-slider[disabled]::part(knob) {
border: none;
}
:host-context(body.jelly-enabled) cr-slider::part(label) {
background: var(--cros-sys-primary);
color: var(--cros-sys-on_primary);
}
/* Toggle */
:host-context(body.jelly-enabled) cr-toggle {
--cr-toggle-checked-bar-color: var(--cros-sys-primary_container);
--cr-toggle-checked-bar-opacity: 100%;
--cr-toggle-checked-button-color: var(--cros-sys-primary);
--cr-toggle-checked-ripple-color: var(--cros-sys-hover_on_prominent);
--cr-toggle-unchecked-bar-color: var(--cros-sys-secondary);
--cr-toggle-unchecked-button-color: var(--cros-sys-surface_variant);
--cr-toggle-unchecked-ripple-color: var(--cros-sys-hover_on_prominent);
--cr-toggle-box-shadow: var(--cros-sys-app-elevation-1-shadow);
--cr-toggle-ripple-diameter: 32px;
}
:host-context(body.jelly-enabled):host-context(.focus-outline-visible)
cr-toggle:focus {
--cr-toggle-ripple-ring: 2px solid var(--cros-sys-focus_ring);
}
:host-context([cros][chrome-refresh-2023]) cr-toggle {
--cr-toggle-bar-width: 32px;
--cr-toggle-knob-diameter: 12px;
--cr-toggle-bar-border: none;
/* "On" state */
--cr-toggle-checked-bar-color: var(--cros-sys-primary);
--cr-toggle-checked-button-color: var(--cros-sys-on_primary);
/* "Off" state */
--cr-toggle-unchecked-bar-color: var(--cros-sys-secondary);
--cr-toggle-unchecked-button-color: var(--cros-sys-on_secondary);
/* Hover state */
--color-toggle-button-thumb-on-hover: var(--cros-sys-on_primary);
/* Disabled state */
--cr-toggle-disabled-opacity: var(--cros-disabled-opacity);
}
:host-context([cros][chrome-refresh-2023]):host-context(.focus-outline-visible)
cr-toggle:focus {
--cr-toggle-ripple-ring: none;
}
/* Tooltip */
:host-context(body.jelly-enabled) paper-tooltip {
--paper-tooltip-background: var(--cros-sys-on_surface);
--paper-tooltip-border-radius: 4px;
--paper-tooltip-padding: 5px 8px;
--paper-tooltip-text-color: var(--cros-sys-inverse_on_surface);
}
:host-context(body.jelly-enabled) paper-tooltip::part(tooltip) {
font: var(--cros-annotation-1-font);
}
Codebase Browser
chromium