Merge branch 'feature/ghi-#43-theme-setting-to-darken-focused-form-co…

…lors' into develop

lib/main.coffee

@@ -4,15 +4,27 @@ module.exports =
   activate: (state) ->
     atom.config.observe 'nord-atom-ui.tabSizing', (noFullWidth) ->
       setTabSizing(noFullWidth)
+    atom.config.observe 'nord-atom-ui.darkerFormFocusEffect', (noSnowLight) ->
+      setFormFocusEffect(noSnowLight)
 
   deactivate: ->
     unsetTabSizing()
+    unsetFormFocusEffect()
+
+setFormFocusEffect = (noSnowLight) ->
+  if (noSnowLight)
+    root.setAttribute('theme-nord-atom-ui-form-focus-effect', "nosnowlight")
+  else
+    unsetFormFocusEffect()
 
 setTabSizing = (noFullWidth) ->
   if (noFullWidth)
     unsetTabSizing()
   else
     root.setAttribute('theme-nord-atom-ui-tabsizing', "nofullwidth")
 
+unsetFormFocusEffect = ->
+  root.removeAttribute('theme-nord-atom-ui-form-focus-effect')
+
 unsetTabSizing = ->
   root.removeAttribute('theme-nord-atom-ui-tabsizing')

package.json

@@ -27,6 +27,12 @@
     "atom": ">=1.0.0 <2.0.0"
   },
   "configSchema": {
+    "darkerFormFocusEffect": {
+      "title": "Darker Form-Focusing Effect",
+      "description": "Use darker colors for focused forms instead of the snow-inspired light effect.",
+      "type": "boolean",
+      "default": false
+    },
     "tabSizing": {
       "title": "Full-Width Tab Sizing",
       "description": "In full width mode, tabs will fill the whole tab bar.",

spec/darker-form-focusing-effect-spec.coffee

@@ -0,0 +1,10 @@
+describe "Nord Atom UI theme", ->
+  beforeEach ->
+    waitsForPromise ->
+      atom.packages.activatePackage('nord-atom-ui')
+
+  it "allows to use darker colors for focused forms to be set via theme settings", ->
+    expect(document.documentElement.getAttribute('theme-nord-atom-ui-form-focus-effect')).toBe null
+
+    atom.config.set('nord-atom-ui.darkerFormFocusEffect', true)
+    expect(document.documentElement.getAttribute('theme-nord-atom-ui-form-focus-effect')).toBe 'nosnowlight'

styles/ui-theme-settings.less

@@ -7,20 +7,51 @@ author     Arctic Ice Studio                               +
 email      [email protected]                 +
 copyright  Copyright (C) 2016                              +
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-[Index]
-  > Variables
-  > User Interface
-      Full-Width Tab Sizing
 */
 /*+-----------+
-  + Variables +
-  +-----------+*/
++ Variables +
++-----------+*/
+@theme-setting-formfocuseffect: ~'theme-@{ui-theme-name}-form-focus-effect';
 @theme-setting-tabsizing: ~'theme-@{ui-theme-name}-tabsizing';
 
+@theme-setting-formfocuseffect-background-color: @nord3;
+@theme-setting-formfocuseffect-border-color: @nord3;
+@theme-setting-formfocuseffect-text-selection-color: @nord1;
+
+
+
 /*+----------------+
-  + User Interface +
-  +----------------+*/
++ User Interface +
++----------------+*/
+/*+--- Darker Form-Focusing Effect ---+*/
+[@{theme-setting-formfocuseffect}="nosnowlight"] {
+  .theme-setting-formfocuseffect-nosnowlight();
+}
+
+.theme-setting-formfocuseffect-nosnowlight() {
+  .find-and-replace,
+  .settings-view {
+    atom-text-editor[mini].is-focused,
+    atom-text-editor[mini].is-focused::shadow {
+      border: 1px solid @theme-setting-formfocuseffect-border-color;
+      background-color: @theme-setting-formfocuseffect-background-color;
+
+      .text,
+      .source {
+        color: @text-color;
+
+        .regexp {
+          color: @text-color;
+        }
+      }
+
+      .highlights .region {
+        background-color: @theme-setting-formfocuseffect-text-selection-color;
+      }
+    }
+  }
+}
+
 /*+--- Full Width Tab Sizing ---+*/
 [@{theme-setting-tabsizing}="nofullwidth"] {
   .theme-setting-tabsizing-nofullwidth();
@@ -29,11 +60,11 @@ copyright  Copyright (C) 2016                              +
 .theme-setting-tabsizing-nofullwidth() {
   .tab-bar {
     width: auto;
-
+    
     .tab {
       width: inherit;
     }
-
+    
     .tab.active,
     .tab:hover.active {
       width: inherit;

styles/ui-variables.less

@@ -98,8 +98,8 @@ copyright  Copyright (C) 2016                              +
 @input-background-color: @nord1;
 @input-border-color: @text-color;
 @input-border-color-active: @input-background-color-active;
-@input-background-color-active: @nord3;//@text-color;
-@input-text-color-active: @text-color;//@base-background-color;
+@input-background-color-active: @text-color;
+@input-text-color-active: @base-background-color;
 
 /*+--- Overlay ---+*/
 @overlay-background-color: @tool-panel-background-color;