From d3c3abeb4efd0a198927bc3901457810c8ebc997 Mon Sep 17 00:00:00 2001 From: kmb32123 Date: Tue, 9 Sep 2014 18:25:25 -0500 Subject: [PATCH] Added Solarized light and dark theme. - Themes share the common solarized.less base. n branch master --- public/res/constants.js | 4 +- public/res/styles/solarized.less | 145 +++++++++++++++++++++++++ public/res/themes/solarized-dark.less | 11 ++ public/res/themes/solarized-light.less | 10 ++ 4 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 public/res/styles/solarized.less create mode 100644 public/res/themes/solarized-dark.less create mode 100644 public/res/themes/solarized-light.less diff --git a/public/res/constants.js b/public/res/constants.js index 24cae103..0b9a55e5 100644 --- a/public/res/constants.js +++ b/public/res/constants.js @@ -75,7 +75,9 @@ define([], function() { "default": "Default", "gray": "Gray", "night": "Night", - "school": "School" + "school": "School", + "solarized-light": "Solarized Light", + "solarized-dark": "Solarized Dark" }; return constants; diff --git a/public/res/styles/solarized.less b/public/res/styles/solarized.less new file mode 100644 index 00000000..6813eaf0 --- /dev/null +++ b/public/res/styles/solarized.less @@ -0,0 +1,145 @@ +@import "main.less"; + +/* Solarized color palette */ +@base02: #073642; +@base01: #586e75; +@base03: #002b36; +@base00: #657b83; +@base0: #839496; +@base1: #93a1a1; +@base2: #eee8d5; +@base3: #fdf6e3; +@yellow: #b58900; +@orange: #cb4b16; +@red: #dc322f; +@magenta: #d33682; +@violet: #6c71c4; +@blue: #268bd2; +@cyan: #2aa198; +@green: #859900; + +/* Aliases */ +@emphasized-content: @A1; +@primary-content: @A0; +@secondary-content: @A01; +@background-highlights: @A02; +@background: @A03; + +/* Colors */ +@logo-yellow: @yellow; +@logo-blue: @blue; +@logo-orange: @orange; +@logo-green: @green; +@primary: @primary-content; +@secondary: @A01; +@tertiary: @blue; +@primary-desaturated: @primary; +@secondary-desaturated: @secondary; +@red-color: @red; + +// Navbar +@primary-bg: @background-highlights; +@primary-border-color: @background-highlights; + +// Navbar buttons +@btn-success-color: @A1; +@btn-success-bg: @transparent; +@btn-success-border: @transparent; +@btn-success-hover-color: @transparent; +@btn-success-hover-bg: @blue; + +// Buttons over preview +@btn-info-color: @secondary-content; +@btn-info-bg: @transparent; +@btn-info-border: @transparent; +@btn-info-hover-color: @background; +@btn-info-hover-border: @transparent; +@btn-info-hover-bg: @blue; + +// Preview and menus +@secondary-bg-dark: @background; +@secondary-bg: @background; +@secondary-bg-light: @background; +@secondary-bg-lighter: @background-highlights; +@secondary-color: @A01; +@secondary-color-dark: @A00; +@secondary-color-darker: @A0; +@secondary-color-darkest: @A1; +@secondary-border-color: @secondary; +@secondary-border-color-light: @secondary; +@secondary-border-color-lighter: @secondary; + +// Editor +@tertiary-bg: @A03; +@tertiary-color-lighter: @A02; +@tertiary-color-light: @A01; +@tertiary-color: @A00; +@tertiary-color-dark: @A0; +@tertiary-color-darker: @A1; + +// Panel buttons +@panel-button-bg-color: @background-highlights; +@panel-border-color: @transparent; + +@error-border: @red; +@disabled-color: mix(@secondary-color, @input-bg, 33%); +@folder-color: @primary-content; +@jgrowl-bg-color: @background; + +/* Bootstrap */ +@body-bg: @background; +@text-color: @primary-content; +@link-color: @yellow; +@link-hover-color: @orange; +@input-bg: @background; +@input-border: @secondary-content; +@blockquote-border-color: @cyan; +@blockquote-bg: @background-highlights; +@code-color: @primary-content; +@code-bg: @background-highlights; +@hr-border: @secondary-content; +@navbar-default-bg: @background-highlights; +@nav-link-hover-bg: @green; +@nav-disabled-link-color: @disabled-color; +@nav-disabled-link-hover-color: @disabled-color; +@nav-tabs-border-color: @transparent; +@nav-tabs-link-hover-border-color: @transparent; +@dropdown-bg: @background; +@dropdown-border: @secondary-border-color; +@dropdown-link-color: @secondary-color-darkest; +@dropdown-link-hover-color: @red; +@dropdown-link-hover-bg: @btn-default-hover-bg; +@dropdown-header-color: @secondary-color; +@dropdown-link-disabled-color: @disabled-color; +@dropdown-divider-bg: @dropdown-border; +@list-group-link-color: @A1; +@list-group-bg: @secondary-bg-light; +@list-group-border: @transparent; +@list-group-active-color: @green; +@list-group-active-bg: @primary-bg; +@list-group-active-border: @secondary; +@list-group-hover-bg: @background-highlights; +@list-group-hover-border-color: @transparent; +@input-color: @secondary-color-darkest; +@input-color-placeholder: @disabled-color; +@gray-lighter: @body-bg; +@modal-header-border-color: @transparent; +@modal-content-bg: @secondary-bg-lighter; +@modal-content-border-color: @transparent; +@modal-footer-border-color: @transparent; +@modal-content-separator-color: @secondary-content; +@modal-backdrop-bg: @background; +@close-color: @secondary-color-darkest; +@popover-bg: @secondary-bg; +@popover-border-color: @transparent; +@popover-arrow-color: @secondary-bg; +@popover-arrow-outer-color: @secondary-border-color; +@popover-title-bg: @transparent; +@label-warning-bg: @transparent; +@state-warning-text: @primary-content; +@state-warning-bg: @transparent; +@state-warning-border: @yellow; +@label-danger-bg: @transparent; +@state-danger-text: @primary-content; +@state-danger-bg: @transparent; +@state-danger-border: @red; \ No newline at end of file diff --git a/public/res/themes/solarized-dark.less b/public/res/themes/solarized-dark.less new file mode 100644 index 00000000..ef7a083b --- /dev/null +++ b/public/res/themes/solarized-dark.less @@ -0,0 +1,11 @@ +@import "../styles/solarized.less"; + +//To be overriden in light/dark +@A03: @base03; +@A02: @base02; +@A01: @base01; +@A00: @base00; +@A0: @base0; +@A1: @base1; +@A2: @base2; +@A3: @base3; \ No newline at end of file diff --git a/public/res/themes/solarized-light.less b/public/res/themes/solarized-light.less new file mode 100644 index 00000000..056556a9 --- /dev/null +++ b/public/res/themes/solarized-light.less @@ -0,0 +1,10 @@ +@import "../styles/solarized.less"; + +@A03: @base3; +@A02: @base2; +@A01: @base1; +@A00: @base0; +@A0: @base00; +@A1: @base01; +@A2: @base02; +@A3: @base03; \ No newline at end of file