From 5c98479d1ab89798f1801568ad19a9e8713731d9 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Wed, 22 Nov 2017 17:56:15 +0100 Subject: [PATCH] feat(themes): Photon (dark and light) (#12) --- app/javascript/styles/photon.scss | 77 +++++++++++++++++++++++++ app/javascript/styles/photon_dark.scss | 24 ++++++++ app/javascript/styles/photon_light.scss | 29 ++++++++++ config/locales/en.yml | 2 + config/themes.yml | 2 + 5 files changed, 134 insertions(+) create mode 100644 app/javascript/styles/photon.scss create mode 100644 app/javascript/styles/photon_dark.scss create mode 100644 app/javascript/styles/photon_light.scss diff --git a/app/javascript/styles/photon.scss b/app/javascript/styles/photon.scss new file mode 100644 index 000000000..d90ced87f --- /dev/null +++ b/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; diff --git a/app/javascript/styles/photon_dark.scss b/app/javascript/styles/photon_dark.scss new file mode 100644 index 000000000..35734093b --- /dev/null +++ b/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'; diff --git a/app/javascript/styles/photon_light.scss b/app/javascript/styles/photon_light.scss new file mode 100644 index 000000000..5a915e05e --- /dev/null +++ b/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'; diff --git a/config/locales/en.yml b/config/locales/en.yml index 9e2a1d524..70cb24039 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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" diff --git a/config/themes.yml b/config/themes.yml index 73ae31df6..578b8af7b 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -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