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

app/javascript/styles/photon.scss

@@ -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;

app/javascript/styles/photon_dark.scss

@@ -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';

app/javascript/styles/photon_light.scss

@@ -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';

config/locales/en.yml

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

config/themes.yml

@@ -2,3 +2,5 @@ default: styles/tootcafe.scss         # via https://github.com/tootcafe/mastodon
 mastodon: styles/application.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