/* Copyright 2020 The Chromium Authors
* Use of this source code is governed by a BSD_style license that can be
* found in the LICENSE file. */
/*
* Chrome OS semantic colors.
*
* Colors that are used across all Chrome OS WebUIS and System Web Apps should
* be semantically represented here.
*/
{
options: {
CSS: {
prefix: 'cros',
preblend: true,
},
proto: {
field_name: 'cros_colors',
field_id: 2,
},
ColorMappings: {
set_name: 'LegacySemantic'
},
},
colors: {
/* =========================================================================
* Core colors.
* =======================================================================*/
color_primary: {
light: "$google_grey_900",
dark: "$google_grey_200",
generate_per_mode: true,
generate_inverted: true,
},
color_secondary: {
light: "$google_grey_700",
dark: "$google_grey_400",
generate_per_mode: true,
},
color_disabled: {
light: "$google_grey_600",
dark: "$google_grey_500",
generate_per_mode: true,
},
color_prominent: {
light: "$google_blue_600",
dark: "$google_blue_300",
debug: "$google_red_600",
generate_per_mode: true,
generate_inverted: true,
},
color_alert: {
light: "$google_red_600",
dark: "$google_red_300",
generate_inverted: true,
},
color_warning: {
light: "$google_yellow_900",
dark: "$google_yellow_300",
generate_per_mode: true,
generate_inverted: true,
},
color_positive: {
light: "$google_green_700",
dark: "$google_green_300",
},
color_selection: {
light: "$google_blue_700",
dark: "$google_blue_200",
debug: "$google_red_700",
generate_per_mode: true,
},
/*
* Background colors.
*/
bg_color: {
light: "$white",
dark: "$google_grey_900",
generate_per_mode: true,
},
bg_color_elevation_1: {
light: "$white",
dark: "blend(rgba($white.rgb, 0.04), $google_grey_900)",
},
bg_color_elevation_2: {
light: "$white",
dark: "blend(rgba($white.rgb, 0.06), $google_grey_900)",
generate_inverted: true,
},
bg_color_elevation_3: {
light: "$white",
dark: "blend(rgba($white.rgb, 0.08), $google_grey_900)",
},
bg_color_elevation_4: {
light: "$white",
dark: "blend(rgba($white.rgb, 0.1), $google_grey_900)",
},
bg_color_elevation_5: {
light: "$white",
dark: "blend(rgba($white.rgb, 0.12), $google_grey_900)",
},
bg_color_dropped_elevation_1: {
light: "$google_grey_50",
dark: "blend(rgba($black.rgb, 0.2), $google_grey_900)",
},
bg_color_dropped_elevation_2: {
light: "$google_grey_200",
dark: "$black",
},
/*
* Text colors.
*/
text_color_primary: {
light: "$color_primary_light",
dark: "$color_primary_dark",
debug: "$google_green_400",
generate_inverted: true,
},
text_color_secondary: {
light: "$color_secondary_light",
dark: "$color_secondary_dark",
debug: "$google_green_400",
generate_per_mode: true,
},
text_color_disabled: "$color_disabled",
text_color_prominent: "$color_prominent",
text_color_selection: "$color_selection",
text_color_positive: "$color_positive",
text_color_warning: "$color_warning",
text_color_alert: "$color_alert",
text_highlight_color: {
light: "rgba($google_blue_600.rgb, 0.3)",
dark: "rgba($google_blue_400.rgb, 0.3)",
},
/*
* Icon colors.
*/
icon_color_primary: {
light: "$color_primary_light",
dark: "$color_primary_dark",
debug: "#ff00ff",
generate_inverted: true,
},
icon_color_secondary: {
light: "$color_secondary_light",
dark: "$color_secondary_dark",
debug: "#00ffff",
generate_per_mode: true,
},
icon_color_disabled: "$color_disabled",
icon_color_prominent: "$color_prominent",
icon_color_selection: "$color_selection",
icon_color_positive: "$color_positive",
icon_color_warning: "$color_warning",
icon_color_alert: "$color_alert",
icon_color_red: {
light: "$google_red_600",
dark: "$google_red_300",
},
icon_color_blue: {
light: "$google_blue_600",
dark: "$google_blue_300",
},
icon_color_green: {
light: "$google_green_600",
dark: "$google_green_300",
},
icon_color_yellow: {
light: "$google_yellow_600",
dark: "$google_yellow_300",
},
/*
* App shield colors.
*/
app_shield_color: {
light: "rgb($google_grey_300.rgb)",
dark: "rgb($black.rgb)",
},
app_shield_80: {
light: "rgba($google_grey_300.rgb, 0.8)",
dark: "rgba($black.rgb, 0.8)",
},
app_shield_60: {
light: "rgba($google_grey_300.rgb, 0.6)",
dark: "rgba($black.rgb, 0.6)",
},
app_shield_40: {
light: "rgba($google_grey_300.rgb, 0.4)",
dark: "rgba($black.rgb, 0.4)",
generate_per_mode: true,
},
app_shield_20: {
light: "rgba($google_grey_300.rgb, 0.2)",
dark: "rgba($black.rgb, 0.2)",
},
/*
* Other foundational colors.
*/
focus_ring_color: {
light: "$color_prominent_light",
dark: "$color_prominent_dark",
generate_per_mode: true,
},
focus_ring_color_inactive: "$icon_color_secondary",
focus_aura_color: "rgba($color_prominent.rgb, 0.24)",
separator_color: {
light: "rgba($black.rgb, 0.14)",
dark: "rgba($white.rgb, 0.14)",
},
shadow_color_key: {
light: "rgba($google_grey_800.rgb, 0.3)",
dark: "rgba($black.rgb, 0.3)",
},
shadow_color_ambient: {
light: "rgba($google_grey_800.rgb, 0.15)",
dark: "rgba($black.rgb, 0.15)",
},
link_color: "$color_prominent",
highlight_color: {
light: "$google_blue_50",
dark: "rgba($google_blue_300.rgb, 0.3)",
debug: "rgba($google_red_300.rgb, 0.3)",
},
highlight_color_error: {
light: "$google_red_50",
dark: "rgba($color_alert.rgb, 0.3)",
},
highlight_color_hover: {
light: "rgba($google_grey_700.rgb, 0.2)",
dark: "rgba($white.rgb, 0.2)",
generate_per_mode: true,
},
highlight_color_focus: {
light: "rgba($black.rgb, $ripple_opacity)",
dark: "rgba($white.rgb, $ripple_opacity)",
},
highlight_color_green: {
light: "rgb($google_green_50.rgb)",
dark: "rgba($google_green_300.rgb, 0.3)",
},
highlight_color_red: {
light: "rgb($google_red_50.rgb)",
dark: "rgba($google_red_600.rgb, 0.3)",
},
highlight_color_yellow: {
light: "rgb($google_yellow_50.rgb)",
dark: "rgba($google_yellow_600.rgb, 0.3)",
},
ripple_color: {
light: "rgba($black.rgb, $ripple_opacity)",
dark: "rgba($white.rgb, $ripple_opacity)",
generate_per_mode: true,
},
ripple_color_prominent: {
light: "rgba($color_prominent.rgb, $ripple_opacity)",
dark: "rgba($color_prominent.rgb, $ripple_opacity)",
},
/* =========================================================================
* Component colors.
* =======================================================================*/
toolbar_search_bg_color: {
light: "$google_grey_100",
dark: "rgba($white.rgb, 0.1)",
},
menu_item_bg_color_focus: "$highlight_color_focus",
menu_item_ripple_color: "$ripple_color",
radio_button_color: "$color_prominent",
radio_button_ripple_color: "rgba($radio_button_color.rgb, .2)",
radio_button_color_unchecked: "$google_grey_700",
radio_button_ripple_color_unchecked: "rgba($google_grey_600.rgb, .15)",
/* button-primary */
button_background_color_primary: "$color_prominent",
button_label_color_primary: {
light: "$white",
dark: "$google_grey_900",
},
button_ripple_color_primary: { light: "$white", dark: "$black" },
/* button-primary:hover */
button_background_color_primary_hover: "rgba($black.rgb, 0.08)",
/* the _preblended variant can be used directly as hover background color
because it's already blended on top of the background color, the above
_hover variable is still required because it's being used on google3 side */
button_background_color_primary_hover_preblended:
"blend($button_background_color_primary_hover, $button_background_color_primary)",
/* button-primary:active */
button_active_shadow_color_ambient_primary: {
light: "rgba($google_blue_500.rgb, 0.15)",
dark: "rgba($google_blue_400.rgb, 0.15)"
},
button_active_shadow_color_key_primary: {
light: "rgba($google_blue_500.rgb, 0.3)",
dark: "rgba($google_blue_400.rgb, 0.3)"
},
/* button-primary[disabled] */
button_background_color_primary_disabled: {
light: "$google_grey_100",
dark: "$google_grey_800",
},
button_label_color_primary_disabled: {
light: "$google_grey_600",
dark: "$google_grey_500",
},
/* button-secondary */
button_label_color_secondary: "$color_prominent",
button_stroke_color_secondary: {
light: "$google_grey_300",
dark: "$google_grey_700",
},
button_ripple_color_secondary: "$color_prominent",
/* button-secondary:hover */
button_stroke_color_secondary_hover: {
light: "$google_blue_100",
dark: "rgba($google_blue_300.rgb, 0.32)"
},
button_background_color_secondary_hover: {
light: "rgba($google_blue_500.rgb, 0.04)",
dark: "rgba($google_blue_300.rgb, 0.08)",
},
/* button-secondary:active */
button_active_shadow_color_ambient_secondary: {
light: "rgba($google_grey_500.rgb, 0.15)",
dark: "rgba($google_grey_600.rgb, 0.15)"
},
button_active_shadow_color_key_secondary: {
light: "rgba($google_grey_500.rgb, 0.3)",
dark: "rgba($google_grey_600.rgb, 0.3)"
},
/* button-secondary[disabled] */
button_label_color_secondary_disabled: {
light: "$google_grey_600",
dark: "$google_grey_500",
},
button_stroke_color_secondary_disabled: {
light: "$google_grey_100",
dark: "$google_grey_800",
},
/* button-icon */
button_icon_color_primary: {
light: "$white",
dark: "$google_grey_900",
},
button_icon_color_primary_disabled: {
light: "$google_grey_600",
dark: "$google_grey_500",
},
button_icon_color_secondary: {
light: "$google_blue_600",
dark: "$google_blue_300",
},
button_icon_color_secondary_disabled: {
light: "$google_grey_200",
dark: "$google_grey_900",
},
/* icon-button */
icon_button_background_color: {
light: "blend(rgba($white.rgb, 0.32), rgba($google_grey_200.rgb, 0.8))",
dark: "blend(rgba($black.rgb, 0.16), rgba($google_grey_800.rgb, 0.8))",
},
/* when icon button is pressed, we layer the $ripple_color on top of the
hover color (which is also $ripple_color) */
icon_button_pressed_color: "blend($ripple_color, $ripple_color)",
/* menu */
menu_label_color: {
light: "$google_grey_900",
dark: "$google_grey_200",
},
menu_icon_color: {
light: "$google_grey_900",
dark: "$google_grey_200",
},
menu_shortcut_color: {
light: "$google_grey_700",
dark: "$google_grey_500",
},
menu_item_background_hover: "$ripple_color",
/* nudge */
nudge_label_color: "$button_label_color_primary",
nudge_icon_color: "$button_icon_color_primary",
nudge_background_color: "$color_prominent",
/* scroll bar */
app_scrollbar_color_hover: {
light: "$google_grey_600",
dark: "$google_grey_400",
},
app_scrollbar_color:
"rgba($app_scrollbar_color_hover.rgb, $disabled_opacity)",
/* slider */
slider_color_active: "$color_prominent",
slider_color_inactive: "$color_secondary",
slider_label_background_color: "$color_prominent",
slider_label_text_color: {
light: "$white",
dark: "$google_grey_900",
},
slider_track_color_active: "rgba($slider_color_active.rgb, $second_tone_opacity)",
slider_track_color_inactive: "rgba($slider_color_inactive.rgb, $second_tone_opacity)",
/* switch */
switch_knob_color_active: "$color_prominent",
switch_knob_color_inactive: {
light: "$white",
dark: "$google_grey_400",
},
switch_track_color_active: "$slider_track_color_active",
switch_track_color_inactive: "$slider_track_color_inactive",
/* tab */
tab_label_color_active: {
light: "$google_blue_600",
dark: "$google_blue_300",
},
tab_label_color_inactive: {
light: "$google_grey_600",
dark: "$google_grey_500",
},
tab_icon_color_active: {
light: "$google_blue_600",
dark: "$google_blue_300",
},
tab_icon_color_inactive: {
light: "$google_grey_600",
dark: "$google_grey_500",
},
tab_slider_track_color: {
light: "rgba($black.rgb, 0.06)",
dark: "rgba($white.rgb, 0.1)",
},
/* textfield */
textfield_background_color: {
light: "$google_grey_100",
dark: "rgba($black.rgb, 0.3)",
},
textfield_label_color: {
light: "$google_grey_700",
dark: "rgba($white.rgb, 0.6)",
},
textfield_input_color: "$color_primary",
/* textfield:focus */
textfield_cursor_color_focus: "$color_prominent",
textfield_label_color_focus: "$color_prominent",
/* textfield[error] */
textfield_label_color_error: {
light: "$google_red_600",
dark: "$google_red_300",
},
textfield_underline_color_error: "$color_alert",
textfield_cursor_color_error: "$color_alert",
/* textfield[disabled] */
textfield_background_color_disabled: {
light: "rgba($google_grey_100.rgb, 0.38)",
dark: "rgba($black.rgb, 0.11)",
},
textfield_label_color_disabled: {
light: "rgba($google_grey_700.rgb, 0.38)",
dark: "rgba($black.rgb, 0.23)",
},
textfield_input_color_disabled: {
light: "rgba($google_grey_900.rgb, 0.38)",
dark: "rgba($white.rgb, 0.33)",
},
/* tooltip */
tooltip_background_color: {
light:"rgba($google_grey_900.rgb, 0.8)",
dark:"rgba($white.rgb, 0.8)",
},
tooltip_icon_color: "$color_primary_inverted",
tooltip_label_color: {
light:"$google_grey_100",
dark:"$google_grey_900",
},
tooltip_link_color: "$color_prominent_inverted",
/* shortcut */
shortcut_background_color: {
light:"$google_grey_200",
dark:"$google_grey_900",
},
shortcut_background_gradient_color: {
light:"rgba($white.rgb, 0)",
dark:"rgba($white.rgb, 0.12)"
},
/* dialog */
dialog_title_background_color: {
light:"$google_grey_100",
dark:"$google_grey_900",
},
/* TODO(crbug.com/1284178) waiting for UX input to see how to combine
this variable together with `dialog_title_background_color` */
dialog_title_bar_color: {
light: "blend($highlight_color_hover_light, $bg_color_light)",
dark: "blend($highlight_color_hover_dark, $bg_color_dark)",
generate_per_mode: true,
},
/* toast */
/* Toast colors are inverted for contrast. */
toast_background_color: "$bg_color_elevation_2_inverted",
toast_button_color: "$color_prominent_inverted",
toast_text_color: "$color_primary_inverted",
toast_icon_color: "$color_primary_inverted",
toast_icon_color_warning: "$color_warning_inverted",
toast_icon_color_error: "$color_alert_inverted",
/* Drag selection box */
selection_outline: {
light: "rgba($black.rgb, 0.1)",
dark: "rgba($white.rgb, 0.12)",
},
/* color palette swatch */
swatch_border: {
light: "rgba($google_grey_900.rgb, 0.5)",
dark: "rgba($white.rgb, 0.38)",
},
/* Taken from go/ea-asset-palette. */
illustration_color_1: {
light: "$google_blue_500",
dark: "$google_blue_400",
},
illustration_color_2: {
light: "$google_green_500",
dark: "$google_green_400",
},
illustration_color_3: {
light: "$google_yellow_500",
dark: "$google_yellow_400",
},
illustration_color_4: "$google_red_500",
illustration_color_5: {
light: "#ee5ffa", /* magenta_400 */
dark: "#f882ff", /* magenta_300 */
},
illustration_color_6: {
light: "#30e2ea", /* electric_400 */
dark: "#5ef1f2", /* electric_300 */
},
illustration_base_color: {
light: "$white",
dark: "$google_grey_900",
},
illustration_secondary_color: {
light: "$google_grey_200",
dark: "blend(rgba($google_grey_200.rgb, 0.3), $illustration_base_color)",
},
illustration_color_1_shade_1: {
light: "$google_blue_300",
dark: "blend(rgba($google_blue_600.rgb, 0.3), $illustration_base_color)",
},
illustration_color_1_shade_2: {
light: "$google_blue_100",
dark: "blend(rgba($google_blue_300.rgb, 0.3), $illustration_base_color)",
},
/* Elevated variants of dark mode colors for illustrations. These are only
used in dark mode, and so do not need a light mode variant. */
illustration_elevation_color_1_shade_1: {
light: "$illustration_color_1_shade_1",
dark: "blend(rgba($google_blue_600.rgb, 0.4), $illustration_elevation_base_color)",
},
illustration_elevation_color_1_shade_2: {
light: "$illustration_color_1_shade_2",
dark: "blend(rgba($google_blue_300.rgb, 0.4), $illustration_elevation_base_color)",
},
illustration_elevation_base_color: {
light: "$illustration_base_color",
dark: "#323336",
},
illustration_elevation_secondary_color: {
light: "$illustration_secondary_color",
dark: "$google_grey_700",
},
/* Preview colors for color correction settings. */
color_preview_red: "$google_red_600",
color_preview_orange: "$google_orange_600",
color_preview_yellow: "$google_yellow_600",
color_preview_green: "$google_green_600",
color_preview_cyan: "$google_cyan_600",
color_preview_blue: "$google_blue_600",
color_preview_purple: "$google_purple_600",
color_preview_grey: "$google_grey_600",
},
opacities: {
disabled_opacity: 0.38,
button_primary_ripple_opacity: { light: 0.32, dark: 0.16 },
button_secondary_ripple_opacity: { light: 0.1, dark: 0.16 },
ripple_opacity: { light: 0.06, dark: 0.08},
second_tone_opacity: 0.3,
},
}
Codebase Browser
chromium