blob: c74e6ddbb2419401024e3b98029755510b367039 [file] [log] [blame]
/* Copyright 2020 The Chromium Authors. All rights reserved.
* 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',
},
proto: {
field_name: 'cros_colors',
field_id: 2,
},
},
colors: {
/*
* Core colors.
*/
text_color_primary: {
light: "$google_grey_900",
dark: "$google_grey_200",
},
text_color_secondary: {
light: "$google_grey_700",
dark: "$google_grey_500",
},
text_color_alert: {
light: "$google_red_600",
dark: "$google_red_300",
},
text_color_warning: {
light: "$google_yellow_600",
dark: "$google_yellow_300",
},
text_color_positive: {
light: "$google_green_600",
dark: "$google_green_300",
},
bg_color: {
light: "$white",
dark: "$google_grey_900",
},
icon_color_primary: {
light: "$google_grey_700",
dark: "$google_grey_200",
},
icon_color_alert: {
light: "$google_red_600",
dark: "$google_red_300",
},
icon_color_warning: {
light: "$google_yellow_600",
dark: "$google_yellow_300",
},
icon_color_positive: {
light: "$google_green_600",
dark: "$google_green_300",
},
icon_color_prominent: {
light: "$google_blue_600",
dark: "$google_blue_300",
},
icon_color_secondary: {
light: "$google_grey_500",
dark: "$google_grey_500",
},
/*
* Component colors.
*/
toolbar_bg_color: "$white",
toolbar_search_bg_color: "$google_grey_100",
// TODO(crbug/1122767): Rename menu_button_* to app sidebar menu items.
menu_button_bg_color_active: "$google_blue_50",
menu_button_bg_color_hover: "$google_grey_100",
menu_button_outline_color_focused: "$google_blue_600",
menu_item_bg_color_focus: {
light: "rgba($black_rgb, 0.06)",
dark: "rgba($white_rgb, 0.08)",
},
menu_item_ripple_color: {
light: "rgba($black_rgb, 0.06)",
dark: "rgba($white_rgb, 0.08)",
},
toggle_color: "$icon_color_prominent",
toggle_bg_color_inactive: "$google_grey_400",
toggle_button_color_inactive: "$white",
toggle_ripple_color: "rgba($toggle_color_rgb, .2)",
toggle_ripple_color_inactive: "rgba($google_grey_600_rgb, .15)",
radio_button_color: "$icon_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)",
separator_color: "rgba($black_rgb, 0.12)",
link_color: "$google_blue_700",
/* button-primary */
button_background_color_primary: "$icon_color_prominent",
button_label_color_primary: {
light: "$google_grey_200",
dark: "$google_grey_900",
},
/* button-primary:hover */
/* TODO(calamity): Generate a linear-gradient() to use for compositing
backgrounds */
button_background_color_primary_hover_overlay: {
light: "rgba($white_rgb, 0.08)",
dark: "rgba($black_rgb, 0.08)",
},
/* 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: "$icon_color_prominent",
button_stroke_color_secondary: {
light: "$google_grey_300",
dark: "$google_grey_700",
},
/* button-secondary:hover */
button_background_color_secondary_hover:
"rgba($icon_color_prominent_rgb, 0.04)",
/* 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",
},
/* 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: {
light: "$google_grey_900",
dark: "rgba($white_rgb, 0.87)",
},
/* textfield:focus */
textfield_label_color_focus: "$icon_color_prominent",
/* textfield[error] */
textfield_label_color_error: {
light: "$google_red_600",
dark: "$google_red_300",
},
/* 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)",
},
/*
* One_offs.
*
* List your project's one_off colors below here. If a semantic color comes
* up repeatedly, consider speaking to UX about pulling out a common
* variable above.
*/
/* OS Settings */
error_color: "$google_red_700",
success_color: "$google_green_700",
search_page_question_icon_color: "$google_grey_600",
app_management_permission_icon_color: "$google_grey_600",
user_icon_color_secondary: "rgb(210, 210, 212)",
},
}