feat(themes): Photon (dark and light) (#12)

This commit is contained in:
Sorin Davidoi 2017-11-22 17:56:15 +01:00 committed by Nolan Lawson
parent 4370a273b3
commit 5c98479d1a
5 changed files with 134 additions and 0 deletions

View file

@ -0,0 +1,77 @@
// 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;

View file

@ -0,0 +1,24 @@
@import 'photon.scss';
$color1: $photon_grey_90; // darkest
$color2: lighten($photon_blue_50, 20%); // lightest
$color3: lighten($photon_blue_50, 10%); // lighter
$color4: $photon_blue_50; // vibrant
$color5: $photon_white; // white
$color6: $photon_red_50; // error red
$color7: $photon_green_50; // succ green
$color8: $photon_grey_90; // black
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
@import 'application';

View file

@ -0,0 +1,29 @@
@import 'photon.scss';
$color1: $photon_grey_10; // darkest
$color2: lighten($photon_blue_50, 20%); // lightest
$color3: lighten($photon_blue_50, 10%); // lighter
$color4: $photon_blue_50; // vibrant
$color5: $photon_grey_90; // white
$color6: $photon_red_50; // error red
$color7: $photon_green_50; // succ green
$color8: $photon_white; // black
// Avoid making text unreadable
@function lighten ($color, $percentage) {
@return darken($color, $percentage);
}
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
@import 'application';

View file

@ -1615,6 +1615,8 @@ en:
mastodon-light: Mastodon (Light)
win95: "Windows 95"
paris: "Paris mon Amour"
photon_dark: "Photon (Dark)"
photon_light: "Photon (Light)"
time:
formats:
default: "%b %d, %Y, %H:%M"

View file

@ -4,3 +4,5 @@ contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
win95: styles/win95.scss # via https://github.com/cybrespace/mastodon
paris: styles/paris.scss # via https://github.com/ashfurrow/mastodon/pull/1
photon_light: styles/photon_light.scss
photon_dark: styles/photon_dark.scss