78 lines
2.3 KiB
SCSS
78 lines
2.3 KiB
SCSS
|
// http://design.firefox.com/photon/visuals/color.html
|
||
|
|
|
||
|
|
// Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
|
||
|
|
$photon_blue_40: #45a1ff;
|
||
|
|
$photon_blue_50: #0a84ff;
|
||
|
|
$photon_blue_60: #0060df;
|
||
|
|
$photon_blue_70: #003eaa;
|
||
|
|
$photon_blue_80: #002275;
|
||
|
|
$photon_blue_90: #000f40;
|
||
|
|
|
||
|
|
// Firefox Teal is one of our primary colors. We use teal as an attention color.
|
||
|
|
$photon_teal_50: #00feff;
|
||
|
|
$photon_teal_60: #00c8d7;
|
||
|
|
$photon_teal_70: #008ea4;
|
||
|
|
$photon_teal_80: #005a71;
|
||
|
|
$photon_teal_90: #002d3e;
|
||
|
|
|
||
|
|
// Firefox Magenta is one of our primary colors. We currently have no common usage for it.
|
||
|
|
$photon_magenta_50: #ff1ad9;
|
||
|
|
$photon_magenta_60: #ed00b5;
|
||
|
|
$photon_magenta_70: #b5007f;
|
||
|
|
$photon_magenta_80: #7d004f;
|
||
|
|
$photon_magenta_90: #440027;
|
||
|
|
|
||
|
|
// Firefox Green is commonly used to indicate success.
|
||
|
|
$photon_green_50: #30e60b;
|
||
|
|
$photon_green_60: #12bc00;
|
||
|
|
$photon_green_70: #058b00;
|
||
|
|
$photon_green_80: #006504;
|
||
|
|
$photon_green_90: #003706;
|
||
|
|
|
||
|
|
// Firefox Yellow is commonly used for warnings.
|
||
|
|
$photon_yellow_50: #ffe900;
|
||
|
|
$photon_yellow_60: #d7b600;
|
||
|
|
$photon_yellow_70: #a47f00;
|
||
|
|
$photon_yellow_80: #715100;
|
||
|
|
$photon_yellow_90: #3e2800;
|
||
|
|
|
||
|
|
// Firefox Red is commonly used for errors.
|
||
|
|
$photon_red_50: #ff0039;
|
||
|
|
$photon_red_60: #d70022;
|
||
|
|
$photon_red_70: #a4000f;
|
||
|
|
$photon_red_80: #5a0002;
|
||
|
|
$photon_red_90: #3e0200;
|
||
|
|
|
||
|
|
// Firefox Purple is commonly used to indicate privacy.
|
||
|
|
$photon_purple_50: #9400ff;
|
||
|
|
$photon_purple_60: #8000d7;
|
||
|
|
$photon_purple_70: #6200a4;
|
||
|
|
$photon_purple_80: #440071;
|
||
|
|
$photon_purple_90: #25003e;
|
||
|
|
|
||
|
|
// Firefox Orange is only used for branding. Do not use it otherwise.
|
||
|
|
$photon_orange_50: #ff9400;
|
||
|
|
$photon_orange_60: #d76e00;
|
||
|
|
$photon_orange_70: #a44900;
|
||
|
|
$photon_orange_80: #712b00;
|
||
|
|
$photon_orange_90: #3e1300;
|
||
|
|
|
||
|
|
// Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
|
||
|
|
$photon_ink_70: #363959;
|
||
|
|
$photon_ink_80: #202340;
|
||
|
|
$photon_ink_90: #0f1126;
|
||
|
|
|
||
|
|
// Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
|
||
|
|
$photon_grey_10: #f9f9fa;
|
||
|
|
$photon_grey_20: #ededf0;
|
||
|
|
$photon_grey_30: #d7d7db;
|
||
|
|
$photon_grey_40: #b1b1b3;
|
||
|
|
$photon_grey_50: #737373;
|
||
|
|
$photon_grey_60: #4a4a4f;
|
||
|
|
$photon_grey_70: #38383d;
|
||
|
|
$photon_grey_80: #2a2a2e;
|
||
|
|
$photon_grey_90: #0c0c0d;
|
||
|
|
|
||
|
|
// We use white for the background of doorhangers or in-content menus.
|
||
|
|
$photon_white: #ffffff;
|