Permalink
Browse files

2.0

  • Loading branch information...
1 parent 736a34a commit 252aaf7f2abd84a2c77cccc8a408790875696d79 @simurai committed Sep 5, 2016
View
@@ -2,5 +2,10 @@
// DuoTone syntax theme
@import (reference) "styles/syntax-variables";
+@import "styles/settings";
@import 'styles/editor';
-@import 'styles/languages/_index';
+@import 'styles/palette';
+
+// This imports the language styles from the duotone-syntax npm package
+// If you test locally, make sure to first run `apm install`
+@import 'node_modules/duotone-syntax/styles/languages/_index';
View
@@ -0,0 +1,87 @@
+chroma = require 'chroma-js'
+
+root = document.documentElement
+uno = ''
+duo = ''
+
+module.exports =
+ activate: (state) ->
+
+ # Change Preset
+ atom.config.observe 'duotone-dark-syntax.preset', (newValue) ->
+ root.classList.remove('theme-duotone-dark-syntax--custom-colors')
+ switch newValue
+ when "Dark Sky"
+ uno = 'hsl(250, 58%, 72%)'
+ duo = 'hsl( 30, 99%, 78%)'
+ when "Dark Sea"
+ uno = 'hsl(212, 48%, 60%)'
+ duo = 'hsl(160, 99%, 70%)'
+ when "Dark Space"
+ uno = 'hsl(240, 66%, 77%)'
+ duo = 'hsl( 20, 99%, 66%)'
+ when "Dark Forest"
+ uno = 'hsl(120, 28%, 70%)'
+ duo = 'hsl( 70, 99%, 76%)'
+ when "Dark Earth"
+ uno = 'hsl(24, 40%, 60%)'
+ duo = 'hsl(42, 99%, 70%)'
+ when "Custom"
+ root.classList.add('theme-duotone-dark-syntax--custom-colors')
+ uno = atom.config.get('duotone-dark-syntax.unoColor').toHexString()
+ duo = atom.config.get('duotone-dark-syntax.duoColor').toHexString()
+ setColors()
+
+ # Change Uno
+ atom.config.onDidChange 'duotone-dark-syntax.unoColor', ({newValue, oldValue}) ->
+ uno = newValue.toHexString()
+ setColors()
+
+ # Change Duo
+ atom.config.onDidChange 'duotone-dark-syntax.duoColor', ({newValue, oldValue}) ->
+ duo = newValue.toHexString()
+ setColors()
+
+ deactivate: ->
+ root.classList.remove('theme-duotone-dark-syntax--custom-colors')
+ unsetColors()
+
+# Apply Colors -----------------------
+setColors = ->
+ unsetColors() # prevents adding endless properties
+
+ # Color limits
+ _high = chroma.mix('hsl(0,0%,100%)', uno, 0.5);
+ _mid = uno
+ _low = chroma.mix('hsl(0,0%,25%)', uno, 0.25);
+
+ # Color scales
+ _scaleUno = chroma.scale([ _high, _mid, _low]).colors(5)
+ _scaleDuo = chroma.scale([ duo, _low]).padding([0, 0.33]).colors(3)
+
+ root.style.setProperty('--uno-1', _scaleUno[0])
+ root.style.setProperty('--uno-2', _scaleUno[1])
+ root.style.setProperty('--uno-3', _scaleUno[2])
+ root.style.setProperty('--uno-4', _scaleUno[3])
+ root.style.setProperty('--uno-5', _scaleUno[4])
+
+ root.style.setProperty('--duo-1', _scaleDuo[0])
+ root.style.setProperty('--duo-2', _scaleDuo[1])
+ root.style.setProperty('--duo-3', _scaleDuo[2])
+
+ root.style.setProperty('--accent', duo)
+
+
+# Unset Colors -----------------------
+unsetColors = ->
+ root.style.removeProperty('--uno-1')
+ root.style.removeProperty('--uno-2')
+ root.style.removeProperty('--uno-3')
+ root.style.removeProperty('--uno-4')
+ root.style.removeProperty('--uno-5')
+
+ root.style.removeProperty('--duo-1')
+ root.style.removeProperty('--duo-2')
+ root.style.removeProperty('--duo-3')
+
+ root.style.removeProperty('--accent')
View
@@ -12,7 +12,38 @@
],
"repository": "https://github.com/simurai/duotone-dark-syntax",
"license": "MIT",
+ "main": "lib/duotone",
"engines": {
- "atom": ">1.0.0"
+ "atom": ">1.9.0"
+ },
+ "dependencies": {
+ "duotone-syntax": "2.0.0",
+ "chroma-js": "1.1.1"
+ },
+ "configSchema": {
+ "preset": {
+ "title": "Color palette",
+ "description": "Choose one of the presets.",
+ "order": 1,
+ "type": [
+ "string"
+ ],
+ "enum": ["Dark Sky", "Dark Sea", "Dark Space", "Dark Forest", "Dark Earth", "Custom"],
+ "default": "Dark Sky"
+ },
+ "unoColor": {
+ "title": "Uno",
+ "description": "Customize the main color",
+ "order": 2,
+ "type": "color",
+ "default": "#6A6E8B"
+ },
+ "duoColor": {
+ "title": "Duo",
+ "description": "Customize the accent color",
+ "order": 3,
+ "type": "color",
+ "default": "#DA8FFF"
+ }
}
}
View
@@ -1,30 +1,12 @@
-// DuoTone dark 01
+// DuoTone dark
-// Hues -----------------------------------
-@syntax-uno: 250;
-@syntax-duo: 30;
+@syntax-hue: 250;
-
-// Language colors -----------------------------------
-
-// Uno hue
-@uno-1: hsl(@syntax-uno, 100%, 96%);
-@uno-2: hsl(@syntax-uno, 98%, 86%);
-@uno-3: hsl(@syntax-uno, 96%, 78%);
-@uno-4: hsl(@syntax-uno, 12%, 46%);
-
-// Duo hue
-@duo-1: hsl(@syntax-duo, 100%, 80%);
-@duo-2: hsl(@syntax-duo, 72%, 62%);
-@duo-3: hsl(@syntax-duo, 6%, 46%);
-
-
-// Base colors -----------------------------------
-@syntax-fg: @uno-2;
-@syntax-bg: hsl(@syntax-uno, 14%, 18%);
-@syntax-accent: hsl(@syntax-duo, 100%, 66%);
+@syntax-fg: hsl(@syntax-hue, 66%, 80%);
+@syntax-bg: hsl(@syntax-hue, 12%, 18%);
+@syntax-accent: hsl(@syntax-hue, 100%, 72%);
@syntax-guide: lighten(@syntax-bg, 10%);
@syntax-selection: lighten(@syntax-bg, 12%);
@syntax-selection-gutter: lighten(@syntax-bg, 3%);
-@syntax-cursor-line: fade(@syntax-selection, 26%); // needs to be semi-transparent to show serach results
+@syntax-cursor-line: fade(@syntax-selection, 26%); // needs to be semi-transparent to show search results
View
@@ -15,7 +15,7 @@ atom-text-editor,
}
.cursor {
- border-color: @syntax-cursor-color;
+ border-color: var(--accent);
border-left-width: 2px;
}
@@ -24,7 +24,7 @@ atom-text-editor,
}
.bracket-matcher .region {
- border-bottom: 1px solid @syntax-accent;
+ border-bottom: 1px solid var(--accent);
}
.invisible-character {
@@ -86,10 +86,6 @@ atom-text-editor,
.icon-right {
color: @syntax-text-color;
}
-
- .icon-right {
- color: @syntax-text-color;
- }
}
}
@@ -1,78 +0,0 @@
-// Language syntax highlighting
-
-.uno-1 { color: @uno-1; } // .... Strong
-.uno-2 { color: @uno-2; } // ... |
-.uno-3 { color: @uno-3; } // .. v
-.uno-4 { color: @uno-4; } // . Weak
-
-.duo-1 { color: @duo-1; } // .... Strong
-.duo-2 { color: @duo-2; } // ... |
-.duo-3 { color: @duo-3; } // . Weak
-
-
-// Mixins -----------------------------------
-.punctuation-mixin(@color:@uno-4) {
- .punctuation,
- .bracket,
- .brace {
- color: @color;
- }
- .string .punctuation {
- .duo-3();
- }
-}
-
-
-// Uno hue -----------------------------------
-
-// this basically matches everything without a specific scope
-// so we put it first
-.meta {
- .uno-4();
-}
-
-.html.elements,
-.entity,
-.tag,
-.function-call {
- .uno-1();
-}
-
-.variable,
-.attribute-name,
-.character.escape {
- .uno-2();
-}
-
-.support {
- .uno-3();
-}
-
-
-// Duo hue -----------------------------------
-.string,
-.constant,
-.storage.type {
- .duo-1();
-}
-
-.keyword,
-.storage {
- .duo-2();
-}
-
-
-// Punctuation -----------------------------------
-.punctuation-mixin();
-
-
-// Comments -----------------------------------
-.comment {
- .uno-4();
- font-style: italic;
-}
-
-
-// Text styles -----------------------------------
-.bold { font-weight: bold; }
-.italic { font-style: italic; }
@@ -1,28 +0,0 @@
-
-// Base
-@import '_base';
-
-// All languages
-@import 'c';
-@import 'clojure';
-@import 'coffee';
-@import 'cs';
-@import 'css';
-@import 'gfm';
-@import 'haskell';
-@import 'html';
-@import 'jade';
-@import 'java';
-@import 'javascript';
-@import 'json';
-@import 'less';
-@import 'mediawiki';
-@import 'php';
-@import 'python';
-@import 'sass';
-@import 'scss';
-@import 'slim';
-@import 'stylus';
-@import 'tex';
-@import 'text';
-@import 'yaml';
@@ -1,10 +0,0 @@
-.c {
- .parens,
- .block {
- .uno-2();
- .punctuation-mixin();
- }
- .comment {
- .duo-3();
- }
-}
@@ -1,14 +0,0 @@
-.source.clojure {
- .expression {
- .duo-1();
- .punctuation {
- .uno-4();
- }
- }
- .symbol {
- .uno-2();
- }
- .vector {
- .uno-3();
- }
-}
@@ -1,7 +0,0 @@
-// Coffee
-
-.coffee {
- &.source {
- .uno-3();
- }
-}
@@ -1,8 +0,0 @@
-.source.cs {
- .meta {
- .uno-3();
- }
- .method {
- .uno-2();
- }
-}
@@ -1,19 +0,0 @@
-// CSS
-
-.css {
- &.source {
- .uno-4();
- }
- &.at-rule {
- .uno-1();
- .keyword.punctuation {
- color: inherit;
- }
- }
- &.attribute-name {
- &.id,
- &.class {
- .uno-1();
- }
- }
-}
Oops, something went wrong.

0 comments on commit 252aaf7

Please sign in to comment.