mobile/android/fenix/app/src/main/res/values/colors.xml

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   3    - License, v. 2.0. If a copy of the MPL was not distributed with this
   4    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
   5 <resources xmlns:tools="http://schemas.android.com/tools">
   6     <!-- Design system color variables -->
   7
   8     <!-- Layers -->
   9     <!-- Default Screen, Search, Frontlayer background -->
  10     <color name="fx_mobile_layer_color_1">@color/photonLightGrey20</color>
  11     <!-- Card background, Menu background -->
  12     <color name="fx_mobile_layer_color_2">@color/photonWhite</color>
  13     <!-- App Bar Top, App Bar Bottom, Frontlayer header -->
  14     <color name="fx_mobile_layer_color_3" tools:ignore="UnusedResources">@color/photonLightGrey10</color>
  15     <!-- App Bar Top (edit), Header (edit) -->
  16     <color name="fx_mobile_layer_color_accent">@color/photonInk20</color>
  17     <!-- Selected tab -->
  18     <color name="fx_mobile_layer_color_accent_nonopaque">@color/photonViolet70A12</color>
  19     <color name="fx_mobile_layer_color_scrim" tools:ignore="UnusedResources">@color/photonDarkGrey05A45</color>
  20     <color name="fx_mobile_layer_color_scrim_start">@color/photonDarkGrey90A96</color>
  21     <color name="fx_mobile_layer_color_scrim_end">@color/photonDarkGrey30A96</color>
  22     <!-- Tooltip -->
  23     <color name="fx_mobile_layer_color_gradient_start" tools:ignore="UnusedResources">@color/photonViolet70</color>
  24     <!-- Tooltip -->
  25     <color name="fx_mobile_layer_color_gradient_end" tools:ignore="UnusedResources">@color/photonViolet40</color>
  26
  27     <!-- Action -->
  28     <!-- Primary button, Snackbar, Floating action button, Chip selected -->
  29     <color name="fx_mobile_action_color_primary">@color/photonInk20</color>
  30     <!-- Secondary button, Chip -->
  31     <color name="fx_mobile_action_color_secondary" tools:ignore="UnusedResources">@color/photonLightGrey40</color>
  32     <!-- Checkbox default, Radio button default -->
  33     <color name="fx_mobile_action_color_form_default" tools:ignore="UnusedResources">@color/photonDarkGrey90</color>
  34     <!-- Checkbox selected, Radio button selected -->
  35     <color name="fx_mobile_action_color_form_selected" tools:ignore="UnusedResources">@color/photonInk20</color>
  36     <!-- Switch background OFF, Switch background ON -->
  37     <color name="fx_mobile_action_color_form_surface" tools:ignore="UnusedResources">@color/photonLightGrey50</color>
  38     <!-- Checkbox disabled, Radio disabled -->
  39     <color name="fx_mobile_action_color_form_disabled" tools:ignore="UnusedResources">@color/photonLightGrey50</color>
  40     <!-- Switch thumb ON -->
  41     <color name="fx_mobile_action_color_form_on" tools:ignore="UnusedResources">@color/photonInk20</color>
  42     <!-- Switch thumb OFF -->
  43     <color name="fx_mobile_action_color_form_off" tools:ignore="UnusedResources">@color/photonLightGrey05</color>
  44     <!-- Scroll indicator active -->
  45     <color name="fx_mobile_action_color_indicator_active">@color/photonLightGrey50</color>
  46     <!-- Scroll indicator inactive -->
  47     <color name="fx_mobile_action_color_indicator_inactive">@color/photonLightGrey30</color>
  48
  49     <!-- Text -->
  50     <!-- Primary text -->
  51     <color name="fx_mobile_text_color_primary">@color/photonDarkGrey90</color>
  52     <!-- Secondary text -->
  53     <color name="fx_mobile_text_color_secondary">@color/photonDarkGrey05</color>
  54     <!-- Disabled text -->
  55     <color name="fx_mobile_text_color_disabled" tools:ignore="UnusedResources">@color/photonDarkGrey90A40</color>
  56     <!-- Warning text -->
  57     <color name="fx_mobile_text_color_warning" tools:ignore="UnusedResources">@color/photonRed80</color>
  58     <!-- Small heading, Text link -->
  59     <color name="fx_mobile_text_color_accent">@color/photonViolet70</color>
  60     <!-- Text Inverted/On Color -->
  61     <color name="fx_mobile_text_color_inverted" tools:ignore="UnusedResources">@color/photonWhite</color>
  62
  63     <!-- Icon -->
  64     <!-- Primary icon -->
  65     <color name="fx_mobile_icon_color_primary" tools:ignore="UnusedResources">@color/photonDarkGrey90</color>
  66     <!-- Inactive tab -->
  67     <color name="fx_mobile_icon_color_primary_inactive" tools:ignore="UnusedResources">@color/photonDarkGrey90A60</color>
  68     <!-- Secondary icon -->
  69     <color name="fx_mobile_icon_color_secondary" tools:ignore="UnusedResources">@color/photonDarkGrey05</color>
  70     <!-- Active tab -->
  71     <color name="fx_mobile_icon_color_active" tools:ignore="UnusedResources">@color/photonInk20</color>
  72     <!-- Disabled icon -->
  73     <color name="fx_mobile_icon_color_disabled" tools:ignore="UnusedResources">@color/photonLightGrey70</color>
  74     <!-- Icon inverted (on color) -->
  75     <color name="fx_mobile_icon_color_inverted" tools:ignore="UnusedResources">@color/photonWhite</color>
  76     <!-- Information -->
  77     <color name="fx_mobile_icon_color_information">@color/photonBlue30</color>
  78     <!-- Icon button -->
  79     <color name="fx_mobile_icon_color_button" tools:ignore="UnusedResources">@color/photonInk20</color>
  80     <color name="fx_mobile_icon_color_warning" tools:ignore="UnusedResources">@color/photonRed80</color>
  81     <color name="fx_mobile_icon_color_accent_violet">@color/photonViolet60</color>
  82     <color name="fx_mobile_icon_color_accent_blue">@color/photonBlue60</color>
  83     <color name="fx_mobile_icon_color_accent_pink">@color/photonPink60</color>
  84     <color name="fx_mobile_icon_color_accent_green">@color/photonGreen60</color>
  85     <color name="fx_mobile_icon_color_accent_yellow">@color/photonYellow60</color>
  86     <!-- Reader, ETP Shield -->
  87     <color name="fx_mobile_icon_color_gradient_start">@color/photonViolet50</color>
  88     <!-- Reader, ETP Shield -->
  89     <color name="fx_mobile_icon_color_gradient_end">@color/photonBlue60</color>
  90
  91     <!-- Border -->
  92     <!-- Default, Divider, Dotted -->
  93     <color name="fx_mobile_border_color_default">@color/photonLightGrey30</color>
  94     <!-- Onboarding -->
  95     <color name="fx_mobile_border_color_inverted" tools:ignore="UnusedResources">@color/photonDarkGrey05</color>
  96     <!-- Form parts -->
  97     <color name="fx_mobile_border_color_form_default" tools:ignore="UnusedResources">@color/photonDarkGrey90</color>
  98     <!-- Active tab (Nav), Selected tab, Active form -->
  99     <color name="fx_mobile_border_color_accent">@color/photonInk20</color>
 100     <!-- Form parts -->
 101     <color name="fx_mobile_border_color_disabled" tools:ignore="UnusedResources">@color/photonLightGrey70</color>
 102     <!-- Form parts -->
 103     <color name="fx_mobile_border_color_warning" tools:ignore="UnusedResources">@color/photonRed80</color>
 104
 105     <!-- Private theme color variables -->
 106
 107     <!-- Layers -->
 108     <!-- Default Background, Search Background, Menu Background, App Bar Top, App Bar Bottom, Dialogs -->
 109     <color name="fx_mobile_private_layer_color_1">@color/photonInk50</color>
 110
 111     <!-- Action -->
 112     <!-- Primary Button -->
 113     <color name="fx_mobile_private_action_color_primary" tools:ignore="UnusedResources">@color/photonWhite</color>
 114     <!-- Snackbar -->
 115     <color name="fx_mobile_private_action_color_secondary" tools:ignore="UnusedResources">@color/photonInk50</color>
 116     <!-- Controls ON -->
 117     <color name="fx_mobile_private_action_color_tertiary" tools:ignore="UnusedResources">@color/photonViolet40</color>
 118     <!-- Switch Background OFF -->
 119     <color name="fx_mobile_private_action_color_control" tools:ignore="UnusedResources">@color/photonDarkGrey05</color>
 120     <!-- Switch Background ON -->
 121     <color name="fx_mobile_private_action_color_control_accent" tools:ignore="UnusedResources">@color/photonViolet40A30</color>
 122
 123     <!-- Text -->
 124     <color name="fx_mobile_private_text_color_primary">@color/photonLightGrey05</color>
 125     <color name="fx_mobile_private_text_color_secondary" tools:ignore="UnusedResources">@color/photonLightGrey40</color>
 126     <color name="fx_mobile_private_text_color_tertiary" tools:ignore="UnusedResources">@color/photonViolet40</color>
 127     <color name="fx_mobile_private_text_color_disabled">@color/photonLightGrey05A40</color>
 128     <color name="fx_mobile_private_text_color_accent">@color/photonViolet40</color>
 129     <color name="fx_mobile_private_text_color_warning_light" tools:ignore="UnusedResources">@color/photonRed80</color>
 130     <color name="fx_mobile_private_text_color_warning_dark">@color/photonRed40</color>
 131
 132     <!-- Icon -->
 133     <color name="fx_mobile_private_icon_color_primary" tools:ignore="UnusedResources">@color/photonLightGrey05</color>
 134     <color name="fx_mobile_private_icon_color_secondary" tools:ignore="UnusedResources">@color/photonLightGrey40</color>
 135     <color name="fx_mobile_private_icon_color_disabled" tools:ignore="UnusedResources">@color/photonLightGrey70</color>
 136     <color name="fx_mobile_private_icon_color_inverted" tools:ignore="UnusedResources">@color/photonWhite</color>
 137     <color name="fx_mobile_private_icon_color_notice" tools:ignore="UnusedResources">@color/photonBlue30</color>
 138
 139     <!-- Border -->
 140     <color name="fx_mobile_private_border_color_divider" tools:ignore="UnusedResources">@color/photonDarkGrey05</color>
 141
 142     <!-- Light theme color palette -->
 143     <color name="primary_text_light_theme">@color/photonInk80</color>
 144     <color name="dark_grey_90_gradient_start">@color/photonDarkGrey90</color>
 145     <color name="dark_grey_90_gradient_end">#0015141A</color>
 146
 147     <!-- Tab Tray -->
 148     <color name="tab_tray_item_selected_background_dark_theme">#412E69</color>
 149
 150     <!-- Private theme color palette -->
 151     <color name="secondary_text_private_theme">#A7A2B7</color>
 152     <color name="caption_text_private_theme">@color/photonLightGrey70</color>
 153     <color name="foundation_private_theme">#261E4B</color>
 154     <color name="accent_private_theme">@color/photonViolet50</color>
 155     <color name="accent_high_contrast_private_theme">#AA71FF</color>
 156     <color name="tab_ring_private_theme">#F565FF</color>
 157     <color name="neutral_private_theme">@color/photonGrey20</color>
 158     <color name="neutral_faded_private_theme">#1FFBFBFE</color>
 159     <color name="scrimStart_private_theme">@color/photonInk80A96</color>
 160     <color name="scrimEnd_private_theme">@color/photonDarkGrey90A96</color>
 161     <color name="snackbar_private_theme">@color/photonInk20</color>
 162     <color name="toolbar_start_gradient_private_theme">#7529A7</color>
 163     <color name="toolbar_center_gradient_private_theme">#492E85</color>
 164     <color name="toolbar_end_gradient_private_theme">#383372</color>
 165     <color name="toolbar_divider_color_private_theme">@color/photonDarkGrey10</color>
 166     <color name="sync_disconnected_icon_fill_private_theme">@color/photonYellow70</color>
 167     <color name="sync_disconnected_background_private_theme">#5B5846</color>
 168     <color name="swipe_delete_background_private_theme">@color/photonInk20</color>
 169     <color name="onboarding_illustration_deselected_private_theme">#99FBFBFE</color>
 170     <color name="prompt_login_edit_text_cursor_color_private_theme">@color/photonViolet50</color>
 171
 172     <!-- Tab Tray -->
 173     <color name="tab_tray_item_media_background_private_theme">@color/photonViolet50</color>
 174
 175     <!-- Normal theme colors for light mode -->
 176     <color name="primary_text_normal_theme">@color/primary_text_light_theme</color>
 177     <color name="secondary_text_normal_theme">@color/photonGrey50</color>
 178     <color name="contrast_text_normal_theme">@color/photonLightGrey05</color>
 179     <color name="caption_text_normal_theme">@color/photonLightGrey90</color>
 180     <color name="inset_normal_theme">@color/photonLightGrey30</color>
 181     <color name="accent_normal_theme">@color/photonInk20</color>
 182     <color name="accent_high_contrast_normal_theme">@color/photonInk20</color>
 183     <color name="tab_ring_normal_theme">@color/photonInk20</color>
 184     <color name="neutral_normal_theme">@color/photonGrey30</color>
 185     <color name="neutral_faded_normal_theme">@color/photonGrey20</color>
 186     <color name="destructive_normal_theme">@color/photonRed70</color>
 187     <color name="disabled_normal_theme">#6620123A</color>
 188     <color name="toolbar_divider_color_normal_theme">@color/photonLightGrey50</color>
 189     <color name="fill_link_from_clipboard_normal_theme">@color/photonInk20</color>
 190     <color name="sync_disconnected_icon_fill_normal_theme">@color/photonYellow70</color>
 191     <color name="sync_disconnected_background_normal_theme">#FFFDE2</color>
 192     <color name="swipe_delete_background_normal_theme">@color/photonLightGrey30</color>
 193     <color name="onboarding_illustration_selected_normal_theme">@color/photonViolet70</color>
 194     <color name="onboarding_illustration_deselected_normal_theme">#9915141A</color>
 195     <color name="add_on_private_browsing_exterior_circle_background_normal_theme">@color/photonViolet70</color>
 196     <color name="prompt_login_edit_text_cursor_color_normal_theme">@color/photonInk20</color>
 197     <color name="search_suggestion_indicator_icon_color_normal_theme">@color/photonGreen70</color>
 198     <color name="search_suggestion_indicator_icon_bookmark_color_normal_theme">@color/photonBlue50</color>
 199     <color name="mozac_widget_favicon_border_normal_theme">@color/photonLightGrey30</color>
 200     <color name="recently_used_share_theme">@color/photonLightGrey30</color>
 201
 202     <!-- Tab tray -->
 203     <color name="tab_tray_item_background_normal_theme">@color/photonLightGrey10</color>
 204     <color name="tab_tray_item_selected_background_normal_theme">#E5DFF4</color>
 205     <color name="tab_tray_heading_icon_inactive_normal_theme">@color/photonInk20A48</color>
 206     <color name="tab_tray_heading_icon_menu_normal_theme">@color/accent_normal_theme</color>
 207     <color name="tab_tray_item_thumbnail_background_normal_theme">@color/photonLightGrey10</color>
 208     <color name="tab_tray_item_thumbnail_icon_normal_theme">@color/photonLightGrey60</color>
 209
 210     <!-- Tab History -->
 211     <color name="tab_history_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_normal_theme</color>
 212
 213     <!-- Bookmark buttons -->
 214     <color name="bookmark_favicon_background">#DFDFE3</color>
 215
 216     <!-- Top site colors -->
 217     <color name="top_site_pin_icon_color">@color/photonDarkGrey80</color>
 218     <color name="top_sites_border_color">@color/photonLightGrey30</color>
 219
 220     <!-- Collection icons-->
 221     <array name="collection_icon_colors">
 222         <item>@color/fx_mobile_icon_color_accent_violet</item>
 223         <item>@color/fx_mobile_icon_color_accent_blue</item>
 224         <item>@color/fx_mobile_icon_color_accent_pink</item>
 225         <item>@color/fx_mobile_icon_color_accent_green</item>
 226         <item>@color/fx_mobile_icon_color_accent_yellow</item>
 227     </array>
 228
 229     <!-- Quick action buttons-->
 230     <color name="quick_action_reader_appearance_icon">#482166</color>
 231
 232     <!-- Toggle Colors -->
 233     <color name="toggle_off_knob_dark_theme">@color/photonLightGrey05</color>
 234     <color name="toggle_off_track_dark_theme">@color/photonLightGrey05</color>
 235     <color name="toggle_off_knob_normal_theme">@color/photonGrey10</color>
 236     <color name="toggle_off_track_normal_theme">@color/photonDarkGrey90</color>
 237
 238     <!-- Misc colors applied universally-->
 239     <color name="suggestion_highlight_color">#5C592ACB</color>
 240     <color name="white_color">@color/photonLightGrey05</color>
 241     <color name="neutral_text">@color/white_color</color>
 242     <color name="text_scale_example_text_color">#232749</color>
 243     <color name="sync_error_background_color">#FFF36E</color>
 244     <color name="sync_error_text_color">@color/photonYellow90</color>
 245     <color name="bottom_bar_shadow">#1A000000</color>
 246     <color name="snackbar_error_color">#B52645</color>
 247
 248     <!-- Reader View colors -->
 249     <color name="mozac_feature_readerview_text_color" tools:ignore="UnusedResources">@color/primary_text_light_theme</color>
 250     <color name="mozac_feature_readerview_selected">@color/photonViolet40</color>
 251
 252     <!-- Share UI -->
 253     <color name="default_share_background">#E3E2E3</color>
 254     <color name="device_type_desktop_background">#F091C3</color>
 255     <color name="device_type_mobile_background">#D4C1FA</color>
 256     <color name="device_foreground">@color/photonInk80</color>
 257
 258     <!-- Launcher Icon colors -->
 259     <color name="ic_launcher_background">#FDFDFD</color>
 260
 261     <!-- Button Colors -->
 262     <color name="grey_button_color">@color/photonLightGrey30</color>
 263     <color name="button_text_color">@color/photonInk20</color>
 264
 265     <!-- Search Widget -->
 266     <color name="search_widget_background">@color/white_color</color>
 267     <color name="search_widget_mic_fill_color">@color/photonBlack</color>
 268     <color name="search_widget_text">@color/photonGrey50</color>
 269
 270     <!-- Private Browsing Mode Persistent Notification -->
 271     <color name="pbm_notification_color">@color/photonViolet70</color>
 272
 273     <!-- Static Shortcut Background Color -->
 274     <color name="static_shortcut_background">#F5F5F5</color>
 275
 276     <!-- SearchView Hint Color -->
 277     <color name="search_view_hint_color">@color/photonDarkGrey05</color>
 278
 279     <!-- Tab Counter colors -->
 280     <color name="mozac_ui_tabcounter_default_tint" tools:ignore="UnusedResources">@color/primary_text_light_theme</color>
 281     <color name="mozac_ui_tabcounter_default_text" tools:ignore="UnusedResources">@color/primary_text_light_theme</color>
 282
 283     <!-- App Spinners colors -->
 284     <color name="spinner_selected_item">#1415141A</color>
 285
 286     <!-- Toolbar menu icon colors -->
 287     <color name="toolbar_menu_transparent">@android:color/transparent</color>
 288 </resources>