| /* 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, |
| }, |
| } |