| /* 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', |
| }, |
| }, |
| 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", |
| }, |
| |
| bg_color: { |
| light: "#ffffff", |
| dark: "$google_grey_900", |
| }, |
| |
| icon_color_primary: { |
| light: "$google_grey_700", |
| dark: "$google_grey_200", |
| }, |
| |
| 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: "#ffffff", |
| toolbar_search_bg_color: "$google_grey_100", |
| |
| menu_button_bg_color_active: "$google_blue_50", |
| menu_button_bg_color_hover: "$google_grey_100", |
| menu_button_outline_color_focused: "$google_blue_600", |
| |
| toggle_color: "$icon_color_prominent", |
| toggle_bg_color_inactive: "$google_grey_400", |
| toggle_button_color_inactive: "#ffffff", |
| 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(0, 0, 0, 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(255, 255, 255, 0.08)", |
| dark: "rgba(0, 0, 0, 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(0, 0, 0, 0.3)", |
| }, |
| textfield_label_color: { |
| light: "$google_grey_700", |
| dark: "rgba(255, 255, 255, 0.6)", |
| }, |
| textfield_input_color: { |
| light: "$google_grey_900", |
| dark: "rgba(255, 255, 255, 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(0, 0, 0, 0.11)", |
| }, |
| textfield_label_color_disabled: { |
| light: "rgba($google_grey_700_rgb, 0.38)", |
| dark: "rgba(0, 0, 0, 0.23)", |
| }, |
| textfield_input_color_disabled: { |
| light: "rgba($google_grey_900_rgb, 0.38)", |
| dark: "rgba(255, 255, 255, 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_500", |
| app_management_permission_icon_color: "$google_grey_600", |
| |
| user_icon_color_secondary: "rgb(210, 210, 212)", |
| }, |
| } |