├── views
├── schedule.html
├── import.html
├── about.html
├── settings.css
├── paths.html
├── settings.html
└── settings.js
├── theme
├── default.css
├── monokai-dark-soda.css
├── railscasts.css
├── obsidian.css
├── visual-studio.css
├── delkos.css
├── nando.css
├── delkoseclipse.css
├── visual-studio-ex.css
├── zamiere.css
├── hammsidian.css
├── light-table.css
├── lightdelkos.css
├── peacock.css
├── dracula.css
├── aquaman.css
├── Earth.css
├── pixie.css
├── visual-studio-2012.css
└── NightLion.css
├── .jshintrc
├── package.json
├── codeMirrorAddons.js
├── LICENSE
├── ColorProcessor.js
├── reset.css
├── main.js
├── SettingsManager.js
├── ThemeManager.js
├── lib
├── ko.factory.js
├── spromise.js
└── tinycolor.js
├── mirror-style
├── variables.mustache
├── main.js
└── template.less
├── MenuManager.js
└── README.md
/views/schedule.html:
--------------------------------------------------------------------------------
1 |
Schedule content
2 |
--------------------------------------------------------------------------------
/theme/default.css:
--------------------------------------------------------------------------------
1 | .cm-s-default .CodeMirror-lines {
2 | }
3 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "undef":true,
3 | "unused":true,
4 | "curly":true,
5 | "indent":4,
6 | "devel":true,
7 | "laxcasebreak":true,
8 | "globals":{
9 | "require": true,
10 | "define": true,
11 | "$": true,
12 | "window": true,
13 | "_": true,
14 | "brackets": true,
15 | "CodeMirror": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/views/import.html:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Themes",
3 | "name": "themes",
4 | "description": "CodeMirror and custom themes in Brackets",
5 | "version": "2.0.6",
6 | "author": "Miguel Castillo",
7 | "email": "manchagnu@gmail.com",
8 | "homepage": "https://github.com/MiguelCastillo/Brackets-Themes",
9 | "keywords": ["themes"],
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/MiguelCastillo/Brackets-Themes.git"
13 | },
14 | "engines": {
15 | "brackets": ">=0.43.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/views/about.html:
--------------------------------------------------------------------------------
1 |
2 | Version:
3 |
4 |
5 | Author:
6 |
7 |
8 | Email:
9 |
10 |
11 | Twitter:
12 | @manchagnu
13 |
14 | Homepage:
15 |
16 |
17 |
--------------------------------------------------------------------------------
/views/settings.css:
--------------------------------------------------------------------------------
1 | .themeSettings * {
2 | /*
3 | -moz-box-sizing: border-box;
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | */
7 | }
8 |
9 | .themeSettings td {
10 | padding: 2px;
11 | }
12 |
13 | .themeSettings .modal-body {
14 | min-height: 300px;
15 | max-height: 300px;
16 | padding: 4px;
17 | }
18 |
19 | .themeSettings .row {
20 | margin: 0px;
21 | }
22 |
23 | .themeSettings .paths-header {
24 | height: 24px;
25 | }
26 |
27 | .themeSettings .label {
28 | padding: 4px !important;
29 | }
30 |
31 |
32 | .themeSettings .imported-themes {
33 | padding-top: 4px;
34 | }
35 |
36 | .themeSettings .imported-themes .status:after {
37 | padding-left: 1em;
38 | content: "success";
39 | color: green;
40 | }
41 |
42 | .themeSettings .imported-themes .error:after {
43 | content: "failed";
44 | color: red;
45 | }
46 |
--------------------------------------------------------------------------------
/views/paths.html:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Remove
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/codeMirrorAddons.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var spromise = require("lib/spromise");
12 |
13 | function initAddons(CodeMirror) {
14 | // Set some default value for codemirror...
15 | CodeMirror.defaults.highlightSelectionMatches = true;
16 | CodeMirror.defaults.styleSelectedText = true;
17 | }
18 |
19 | function init() {
20 | /**
21 | * This is where it all starts to load up...
22 | */
23 | return spromise(function(resolve) {
24 | brackets.getModule([
25 | "thirdparty/CodeMirror/lib/codemirror",
26 | "thirdparty/CodeMirror/addon/selection/mark-selection",
27 | "thirdparty/CodeMirror/addon/search/match-highlighter"
28 | ], resolve);
29 | }).done(initAddons);
30 | }
31 |
32 | return {
33 | ready: init().done
34 | };
35 | });
36 |
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2013 Miguel Castillo.
2 |
3 | Licensed under MIT
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a
6 | copy of this software and associated documentation files (the "Software"),
7 | to deal in the Software without restriction, including without limitation
8 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
9 | and/or sell copies of the Software, and to permit persons to whom the
10 | Software is furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
21 | DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/views/settings.html:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/ColorProcessor.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var tinycolor = require("lib/tinycolor");
12 |
13 |
14 | function getColor(content, expression) {
15 | var color = expression.exec(content);
16 | if (color) {
17 | color = color[1];
18 | }
19 |
20 | return color;
21 | }
22 |
23 |
24 | function getBackgroundColor(content) {
25 | //http://regex101.com/r/yI2wL5/5
26 | return getColor(content, /\.CodeMirror\s*\{[\s\S]*?(?:background(?:-color)?\s*:\s*([^;\s}]+))/gmi);
27 | }
28 |
29 |
30 | function getFontColor(content) {
31 | //http://regex101.com/r/gQ4yO9/1
32 | return getColor(content, /\.CodeMirror\s*\{[\s\S]*?(?:color\s*:\s*([^;\s}]+))/gmi);
33 | }
34 |
35 |
36 | function getMatchingBracketColor(content) {
37 | //http://regex101.com/r/gQ4yO9/2
38 | return getColor(content, /\.CodeMirror-matchingbracket\s*\{[\s\S]*?(?:color\s*:+\s*([^;\s}]+))/gmi);
39 | }
40 |
41 |
42 | function isDark(content) {
43 | var backgroundColor = getBackgroundColor(content);
44 | return backgroundColor ? tinycolor(backgroundColor).isDark() : false;
45 | }
46 |
47 |
48 | return {
49 | getBackgroundColor: getBackgroundColor,
50 | getFontColor: getFontColor,
51 | getMatchingBracketColor: getMatchingBracketColor,
52 | isDark: isDark
53 | };
54 | });
55 |
--------------------------------------------------------------------------------
/reset.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Dark themes
3 | * aquaman, dracula, hammsidian, light-table, monakai-dark-soda, nando, nightlion, obsidian, pixie, ralicasts, zamiere,
4 | * 3024-night, ambiance, base16-dark, blackboard, cobalt, erlang-dark, lesser-dark, mbo, midnight, monakai, night, paraiso-dark
5 | * pastel-on-dark, rubyblue, the-matrix, tomorrow-night-eighties, twilight, vibrant-ink, xq-dark
6 | */
7 |
8 |
9 | .CodeMirror:not(.cm-s-default) .CodeMirror-scroll {
10 | background-color: transparent;
11 | }
12 |
13 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline-background,
14 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline .CodeMirror-gutter-elt {
15 | background-color: transparent !important;
16 | }
17 |
18 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline-background {
19 | outline: 1px solid rgba(255, 255, 255, 0.5);
20 | }
21 |
22 | .CodeMirror:not(.cm-s-default) .CodeMirror-matchingtag {
23 | background: transparent;
24 | }
25 |
26 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline .CodeMirror-gutter-elt {
27 | z-index: 5;
28 | }
29 |
30 |
31 | /**
32 | * Overrides for CodeMirror themes.
33 | */
34 |
35 | .dark #editor-holder div.CodeMirror-cursor ,
36 | .dark #editor-holder div.CodeMirror-secondarycursor {
37 | border-left: 1px solid #dedede;
38 | }
39 |
40 | .dark #editor-holder .CodeMirror-focused .CodeMirror-selected {
41 | background: blue;
42 | opacity: 0.2;
43 | }
44 |
45 | .dark #editor-holder .CodeMirror-matchingbracket,
46 | .dark #editor-holder .CodeMirror-matchingtag {
47 | background-color: #2e5c00 !important;
48 | color: #ddd !important;
49 | }
50 |
--------------------------------------------------------------------------------
/theme/monokai-dark-soda.css:
--------------------------------------------------------------------------------
1 | .cm-s-monokai-dark-soda.CodeMirror {
2 | background-color: #242424;
3 | color: #fff;
4 | }
5 |
6 | .CodeMirror .CodeMirror-cursor {
7 | border-left: 1px solid #f8f8f0;
8 | z-index: 3;
9 | }
10 |
11 | .CodeMirror-selected {
12 | background: rgba(0, 100, 125, 0.5);
13 | }
14 |
15 | .cm-s-monokai-dark-soda .cm-keyword {color: #ff007f;}
16 | .cm-s-monokai-dark-soda .cm-atom {color: #c48cff;}
17 | .cm-s-monokai-dark-soda .cm-number {color: #c48cff;}
18 | .cm-s-monokai-dark-soda .cm-def {color: #fd963f;}
19 | .cm-s-monokai-dark-soda .cm-variable {color: #fff;}
20 | .cm-s-monokai-dark-soda .cm-variable-2 {color: #c48cff;}
21 | .cm-s-monokai-dark-soda .cm-property {color: #52e3f6;}
22 | .cm-s-monokai-dark-soda .cm-operator {color: #ff007f;}
23 | .cm-s-monokai-dark-soda .cm-comment {color: #8c8c8c;}
24 | .cm-s-monokai-dark-soda .cm-string {color: #ece47e;}
25 | .cm-s-monokai-dark-soda .cm-string-2 {color: #ece47e;}
26 | .cm-s-monokai-dark-soda .cm-meta {color: #a7ec21;}
27 | .cm-s-monokai-dark-soda .cm-qualifier {color: #a7ec21;}
28 | .cm-s-monokai-dark-soda .cm-bracket {color: #f9faf4;}
29 | .cm-s-monokai-dark-soda .cm-tag {color: #ff007f;}
30 | .cm-s-monokai-dark-soda .cm-attribute {color: #a7ec21;}
31 |
32 | .cm-s-monokai-dark-soda .cm-matchhighlight:not(.CodeMirror-selectedtext) {
33 | background-color: #616161;
34 | color: white;
35 | }
36 |
37 | .cm-s-monokai-dark-soda .cm-matchhighlight {
38 | background-color: #00CCFF;
39 | color: #242424;
40 | }
41 |
42 | .CodeMirror .CodeMirror-matchingbracket {
43 | color: #a7ec21;
44 | font-weight: bold;
45 | }
46 |
47 | .CodeMirror .CodeMirror-gutters {
48 | background-color: #242424;
49 | }
50 |
51 | .CodeMirror .CodeMirror-searching {
52 | color: #242424;
53 | background-color: #ffe69d !important;
54 | }
55 |
56 | .CodeMirror-activeline .CodeMirror-gutter-elt {
57 | color: #eeeeee;
58 | }
59 |
--------------------------------------------------------------------------------
/theme/railscasts.css:
--------------------------------------------------------------------------------
1 | .cm-s-railscasts.CodeMirror
2 | {
3 | background-color: #232323;
4 | color: #E0E2E4;
5 | }
6 |
7 | .cm-s-railscasts.CodeMirror .CodeMirror-lines pre
8 | {
9 | z-index: 3;
10 | }
11 |
12 | .cm-s-railscasts.CodeMirror .CodeMirror-gutters
13 | {
14 | background-color: #293134;
15 | }
16 |
17 | .cm-s-railscasts.CodeMirror .CodeMirror-linenumber
18 | {
19 | background-color: #1F1F1F;
20 | color: #81969A;
21 | }
22 |
23 | .cm-s-railscasts.CodeMirror .CodeMirror-matchingbracket
24 | {
25 | color: #dedede;
26 | outline: 1px solid #dedede;
27 | }
28 |
29 | .cm-s-railscasts.CodeMirror .CodeMirror-linebackground,
30 | .cm-s-railscasts.CodeMirror .CodeMirror-activeline
31 | {
32 | background-color: #2F393C;
33 | }
34 |
35 | .cm-s-railscasts.CodeMirror .cm-atom { color: #678CB1; }
36 | .cm-s-railscasts.CodeMirror .cm-qualifier { color: #678CB1; }
37 | .cm-s-railscasts.CodeMirror .cm-keyword { color: #EC7600; }
38 | .cm-s-railscasts.CodeMirror .cm-comment { color: #BC9458 }
39 | .cm-s-railscasts.CodeMirror .cm-string {color: #93C763;}
40 | .cm-s-railscasts.CodeMirror .cm-string-2 {color: #93C763;}
41 | .cm-s-railscasts.CodeMirror .cm-variable { color: #E0E2E4; }
42 | .cm-s-railscasts.CodeMirror .cm-variable-2 { color: #E0E2E4; }
43 | .cm-s-railscasts.CodeMirror .cm-tag { color: #678CB1; }
44 | .cm-s-railscasts.CodeMirror .cm-attribute { color: #678CB1; }
45 | .cm-s-railscasts.CodeMirror .cm-property { color: #E0E2E4; }
46 | .cm-s-railscasts.CodeMirror .cm-number { color: #FFCD22; }
47 |
48 | .cm-s-railscasts.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext)
49 | {
50 | background-color: #616161;
51 | color: white;
52 | }
53 |
54 | .cm-s-railscasts.CodeMirror .CodeMirror-selectedtext
55 | {
56 | background-color: #804000;
57 | }
58 |
59 | .cm-s-railscasts.CodeMirror .CodeMirror-selected
60 | {
61 | background: transparent;
62 | }
63 |
64 | .cm-s-railscasts.CodeMirror-focused .CodeMirror-selected
65 | {
66 | background: transparent;
67 | }
68 |
69 | .cm-s-railscasts.CodeMirror .CodeMirror-cursor
70 | {
71 | z-index: 5;
72 | border-left: 1px solid white;
73 | }
74 |
--------------------------------------------------------------------------------
/theme/obsidian.css:
--------------------------------------------------------------------------------
1 | .cm-s-obsidian.CodeMirror
2 | {
3 | font-family: monaco;
4 | background-color: #293134;
5 | color: #E0E2E4;
6 | }
7 |
8 | .cm-s-obsidian.CodeMirror .CodeMirror-lines pre
9 | {
10 | z-index: 3;
11 | }
12 |
13 | .cm-s-obsidian.CodeMirror .CodeMirror-gutters
14 | {
15 | background-color: #293134;
16 | }
17 |
18 | .cm-s-obsidian.CodeMirror .CodeMirror-linenumber
19 | {
20 | background-color: #293134;
21 | color: #81969A;
22 | }
23 |
24 | .cm-s-obsidian.CodeMirror .CodeMirror-matchingbracket
25 | {
26 | color: #dedede;
27 | outline: 1px solid #dedede;
28 | }
29 |
30 | .cm-s-obsidian.CodeMirror .CodeMirror-linebackground,
31 | .cm-s-obsidian.CodeMirror .CodeMirror-activeline
32 | {
33 | background-color: #2F393C;
34 | }
35 |
36 |
37 | .cm-s-obsidian.CodeMirror .cm-atom { color: #EC7600; }
38 | .cm-s-obsidian.CodeMirror .cm-qualifier { color: #678CB1; }
39 |
40 | /*CodeMirror does not add notation for css... Which would be really nice. */
41 | /*.cm-s-obsidian.CodeMirror .cm-property { color: red; }*/
42 |
43 | .cm-s-obsidian.CodeMirror .cm-keyword { color: #93C763; }
44 | .cm-s-obsidian.CodeMirror .cm-comment { color: #7D8C93; }
45 | .cm-s-obsidian.CodeMirror .cm-string {color: #EC7600;}
46 | .cm-s-obsidian.CodeMirror .cm-string-2 {color: #EC7600;}
47 | .cm-s-obsidian.CodeMirror .cm-variable { color: #E0E2E4; }
48 | .cm-s-obsidian.CodeMirror .cm-variable-2 { color: #E0E2E4; }
49 | .cm-s-obsidian.CodeMirror .cm-tag { color: #678CB1; }
50 | .cm-s-obsidian.CodeMirror .cm-attribute { color: #678CB1; }
51 | .cm-s-obsidian.CodeMirror .cm-property { color: #E0E2E4; }
52 | .cm-s-obsidian.CodeMirror .cm-number { color: #FFCD22; }
53 |
54 | .cm-s-obsidian.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext)
55 | {
56 | background-color: #616161;
57 | color: white;
58 | }
59 |
60 | .cm-s-obsidian.CodeMirror .CodeMirror-selectedtext
61 | {
62 | background-color: #804000;
63 | }
64 |
65 | .cm-s-obsidian.CodeMirror .CodeMirror-selected
66 | {
67 | background: transparent;
68 | }
69 |
70 | .cm-s-obsidian.CodeMirror-focused .CodeMirror-selected
71 | {
72 | background: transparent;
73 | }
74 |
75 | .cm-s-obsidian.CodeMirror .CodeMirror-cursor
76 | {
77 | z-index: 5;
78 | border-left: 1px solid white;
79 | }
80 |
81 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var EditorManager = brackets.getModule("editor/EditorManager"),
12 | ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
13 | AppInit = brackets.getModule("utils/AppInit");
14 |
15 | // Load up reset.css to override brackground settings from brackets because
16 | // they make the themes look really bad.
17 | ExtensionUtils.loadStyleSheet(module, "reset.css");
18 | ExtensionUtils.loadStyleSheet(module, "views/settings.css");
19 |
20 |
21 | function init(SettingsManager, ThemeManager, MenuManager, codeMirrorAddons) {
22 | function initMenu() {
23 | var paths = SettingsManager.getValue("paths");
24 |
25 | paths.forEach(function(path) {
26 | ThemeManager.loadDirectory(path.path).done(function() {
27 | var themes = Array.prototype.slice.call(arguments);
28 | if (themes.length) {
29 | MenuManager.loadThemes(themes, path.path);
30 | }
31 | });
32 | });
33 | }
34 |
35 |
36 | function setDocumentType(evt, doc) {
37 | if (!doc) {
38 | return;
39 | }
40 |
41 | var cm = doc._codeMirror;
42 | var mode = cm && cm.getDoc().getMode();
43 | var docType = mode && (mode.helperType || mode.name);
44 | $(cm.display.wrapper).attr("doctype", docType || cm.options.mode);
45 | }
46 |
47 |
48 | function initAll() {
49 | MenuManager.init();
50 | initMenu();
51 | }
52 |
53 |
54 | $(SettingsManager).on("imported", initMenu);
55 | codeMirrorAddons.ready(initAll);
56 |
57 | $(EditorManager).on("activeEditorChange.themes", setDocumentType);
58 | setDocumentType(null, EditorManager.getActiveEditor());
59 | }
60 |
61 |
62 | // Init when app is ready
63 | AppInit.htmlReady(function () {
64 | require(["SettingsManager","ThemeManager","MenuManager","codeMirrorAddons"], init);
65 | });
66 | });
67 |
68 |
--------------------------------------------------------------------------------
/theme/visual-studio.css:
--------------------------------------------------------------------------------
1 | .cm-s-visual-studio.CodeMirror
2 | {
3 | background-color: #fefefe;
4 | color:black;
5 | }
6 |
7 | .cm-s-visual-studio.CodeMirror .CodeMirror-gutters
8 | {
9 | background-color: #fefefe;
10 | }
11 |
12 | .cm-s-visual-studio.CodeMirror .CodeMirror-linenumber
13 | {
14 | color: #0E97A1;
15 | background-color: #fefefe;
16 | }
17 |
18 | .cm-s-visual-studio.CodeMirror .CodeMirror-matchingbracket
19 | {
20 | color: black;
21 | background-color: #dedede;
22 | }
23 |
24 | .cm-s-visual-studio.CodeMirror .CodeMirror-linebackground
25 | {
26 | outline: 2px solid #dddddd;
27 | }
28 |
29 | .cm-s-visual-studio .CodeMirror-activeline-background,
30 | .cm-s-visual-studio .CodeMirror-activeline .CodeMirror-gutter-elt
31 | {
32 | background: transparent !important;
33 | }
34 |
35 | .cm-s-visual-studio .CodeMirror-activeline-background
36 | {
37 | outline: 2px solid #dddddd;
38 | }
39 |
40 | .cm-s-visual-studio.CodeMirror .cm-matchhighlight
41 | {
42 | background-color: yellow;
43 | }
44 |
45 | .cm-s-visual-studio.CodeMirror .CodeMirror-selectedtext
46 | {
47 | background-color: #ADD6FF;
48 | }
49 |
50 | .cm-s-visual-studio.CodeMirror .CodeMirror-selected,
51 | .cm-s-visual-studio.CodeMirror-focused .CodeMirror-selected
52 | {
53 | background: transparent;
54 | }
55 |
56 |
57 | .cm-s-visual-studio.CodeMirror .cm-atom { color: blue; }
58 | .cm-s-visual-studio.CodeMirror .cm-qualifier { color: #800000; }
59 |
60 | /*CodeMirror does not add notation for css... Which would be really nice. */
61 | /*.cm-s-visual-studio.CodeMirror .cm-property { color: red; }*/
62 |
63 |
64 | .cm-s-visual-studio.CodeMirror .cm-def { color: black; }
65 | .cm-s-visual-studio.CodeMirror .cm-keyword { color: blue; }
66 | .cm-s-visual-studio.CodeMirror .cm-comment { color: green; }
67 | .cm-s-visual-studio.CodeMirror .cm-string {color: #800000;}
68 | .cm-s-visual-studio.CodeMirror .cm-string-2 {color: #800000;}
69 | .cm-s-visual-studio.CodeMirror .cm-variable { color: black; }
70 | .cm-s-visual-studio.CodeMirror .cm-variable-2 { color: black; }
71 | .cm-s-visual-studio.CodeMirror .cm-tag { color: #800000; }
72 | .cm-s-visual-studio.CodeMirror .cm-attribute { color: red; }
73 | .cm-s-visual-studio.CodeMirror .cm-property { color: black; }
74 |
75 | .CodeMirror[doctype=less] .cm-property,
76 | .CodeMirror[doctype=css] .cm-property {
77 | color: red !important;
78 | }
79 |
--------------------------------------------------------------------------------
/theme/delkos.css:
--------------------------------------------------------------------------------
1 | /* Delkos theme by David Sánchez i Gregori
2 | * Licensed under BSD-License
3 | */
4 | .cm-s-delkos.CodeMirror {background: #262626; color: #f8f8f8;}
5 | .cm-s-delkos div.CodeMirror-selected {
6 | background-color: #484848;
7 | }
8 | .cm-s-delkos .CodeMirror-gutters {background: #222; border-right: 0pt;}
9 | .cm-s-delkos .CodeMirror-cursor {
10 | border-left: 1pt solid rgb(255, 255, 255) !important;
11 | }
12 |
13 | .cm-s-delkos .CodeMirror-activeline .CodeMirror-gutter-elt {
14 | color: #eeeeee;
15 | }
16 |
17 | .cm-s-delkos span.cm-comment {color: #95927e;text-shadow: 0 0 2pt #000;}
18 | .cm-s-delkos span.cm-atom {color: #ccaaff;text-shadow: 0 0 2pt #c000aa;}
19 | .cm-s-delkos span.cm-number {color: #ff7272;text-shadow: 0 0 2pt #aa0000;}
20 | .cm-s-delkos span.cm-property, .cm-s-delkos span.cm-attribute {color: #c7e58a;}
21 | .cm-s-delkos span.cm-keyword {
22 | color: #91c0ff;
23 | text-shadow: 0 0 1pt #052148;
24 | }
25 |
26 | .cm-s-delkos span.cm-string {
27 | color: #ffa2ea;
28 | text-shadow: 0 0 4pt #f01662;
29 | }
30 |
31 | .cm-s-delkos span.cm-variable {color: #aaeaaa;text-shadow: 0 0 2pt #327232;}
32 | .cm-s-delkos span.cm-variable-2 {color: #64eaff;text-shadow: 0 0 4pt #0092ff;}
33 |
34 | .cm-s-delkos span.cm-def{color: #ffd800;text-shadow: 0 0 .25em rgba(206, 143, 0, 0.79);}
35 | .cm-s-delkos span.cm-bracket{color: #f8f8f8;text-shadow: 0 0 2pt #CAEAFF;}
36 |
37 | .cm-s-delkos span.cm-tag {color: #ff61bc;text-shadow: 0 0 2pt #b22878;}
38 |
39 | .cm-s-delkos span.cm-link {color: #ae81ff;}
40 | .cm-s-delkos span.cm-error {background: #ff3292; color: #f8f8f0;}
41 |
42 | .cm-s-delkos .CodeMirror-activeline-background {background-color: rgba(0, 0, 0, 0.1) !important;}
43 |
44 |
45 | .cm-s-delkos .cm-tag.cm-bracket.CodeMirror-matchingtag,
46 | .cm-s-delkos .CodeMirror-matchingbracket {
47 | color: white !important;
48 | box-shadow: 0 0 1em #0AE0FF;
49 | border-radius:0.5em;
50 | border:1pt solid #00ACF0;
51 | background-color: #0AE0FF;
52 | -webkit-animation: hilightMB 2s alternate ease-in-out infinite;
53 | }
54 | @-webkit-keyframes hilightMB {
55 | 0%
56 | {
57 | background-color:#FF0AE0;
58 | border:1pt solid #F000AC;
59 | box-shadow: 0 0 1em #FF0AE0;
60 | }
61 |
62 | 50%
63 | {
64 | background-color: transparent;
65 | border:1pt solid transparent;
66 | box-shadow: 0 0 1em transparent;
67 | }
68 |
69 | 100%
70 | {
71 | background-color:#0AE0FF;
72 | border:1pt solid #00ACF0;
73 | box-shadow: 0 0 1em #0AE0FF;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/theme/nando.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Héctor Fernando Hurtado
3 | * @version 2013-05-27
4 | */
5 |
6 | .cm-s-nando.CodeMirror {
7 | background: rgb(30,30,30); /* Old browsers */
8 | background: -moz-linear-gradient(top, rgba(30,30,30,1) 0%, black 100%); /* FF3.6+ */
9 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,30,30,1)), color-stop(100%,black)); /* Chrome,Safari4+ */
10 | background: -webkit-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* Chrome10+,Safari5.1+ */
11 | background: -o-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* Opera 11.10+ */
12 | background: -ms-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* IE10+ */
13 | background: linear-gradient(to bottom, rgba(30,30,30,1) 0%,black 100%); /* W3C */
14 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#353535',GradientType=0 ); /* IE6-9 */
15 |
16 | color: #fbffa0;
17 | }
18 | .cm-s-nando div.CodeMirror-selected {background: #075601 !important;}
19 | .cm-s-nando .CodeMirror-activeline-background { background: #222 !important; }
20 |
21 | .cm-s-nando .CodeMirror-gutters { background: rgb( 30, 30, 30 ); border-right:1px solid #f4f4f4; }
22 |
23 | .cm-s-nando span.cm-meta {color: #c1c1c1;}
24 | .cm-s-nando span.cm-keyword { line-height: 1em; font-weight: bold; color: #aaffb4; }
25 | .cm-s-nando span.cm-atom {color: #f4f4f4;}
26 | .cm-s-nando span.cm-number {color: #f4f4f4;}
27 | .cm-s-nando span.cm-def {color: #e7adff;}
28 | .cm-s-nando span.cm-variable {color: #f4f4f4;}
29 | .cm-s-nando span.cm-variable-2 {color: #f4f4f4;}
30 | .cm-s-nando span.cm-variable-3 {color: #f4f4f4;}
31 | .cm-s-nando span.cm-property {color: #c1c1c1;}
32 | .cm-s-nando span.cm-operator {color: #f4f4f4;}
33 | .cm-s-nando span.cm-comment {color: #c1c1c1;}
34 | .cm-s-nando span.cm-string {color: #c1c1c1;}
35 | .cm-s-nando span.cm-string-2 {color: #c1c1c1;}
36 | .cm-s-nando span.cm-error {color: #ff7a7a;}
37 | .cm-s-nando span.cm-qualifier {color: #adf6ff;}
38 | .cm-s-nando span.cm-builtin {color: #f4f4f4;}
39 | .cm-s-nando span.cm-bracket {color: #f4f4f4;}
40 | .cm-s-nando span.cm-tag {color: #aaffb4;}
41 | .cm-s-nando span.cm-attribute {color: #adf6ff;}
42 | .cm-s-nando span.cm-link {color: #a9d7f9;}
43 |
44 | .cm-s-nando .CodeMirror-cursor { border-left: 1px solid white !important; }
45 |
46 | .cm-s-nando .CodeMirror-linenumber { color: #f4f4f4; }
47 | div.CodeMirror span.CodeMirror-matchingbracket { color: #f4f4f4; }
48 |
49 | .cm-s-nando .CodeMirror-matchingbracket {
50 | /* outline:1px solid grey; */
51 | font-weight: bold;
52 | color: #adf6ff !important;
53 | }
54 |
--------------------------------------------------------------------------------
/SettingsManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
12 | FileUtils = brackets.getModule("file/FileUtils"),
13 | ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
14 | ExtensionLoader = brackets.getModule("utils/ExtensionLoader"),
15 | ViewCommandHandlers = brackets.getModule("view/ViewCommandHandlers"),
16 | SettingsDialog = require("views/settings");
17 |
18 | var prefs = PreferencesManager.getExtensionPrefs("themes-brackets-extension");
19 |
20 | var cm_path = FileUtils.getNativeBracketsDirectoryPath() + "/thirdparty/CodeMirror/theme",
21 | user_path = ExtensionUtils.getModulePath(module, "theme"),
22 | custom_path = user_path.substr(0, ExtensionLoader.getUserExtensionPath().lastIndexOf('/')) + "/themes";
23 |
24 | var defaults = {
25 | paths: [{path:custom_path}, {path:user_path}, {path:cm_path}]
26 | };
27 |
28 |
29 | function openDialog() {
30 | SettingsDialog.open(exports);
31 | }
32 |
33 | function closeDialog() {
34 | SettingsDialog.close();
35 | }
36 |
37 | function getValue(name) {
38 | return prefs.get(name);
39 | }
40 |
41 | function setValue(name, value) {
42 | prefs.set(name, value);
43 | $(exports).trigger("change", arguments);
44 | $(exports).trigger("change:" + arguments[0], [arguments[1]]);
45 | }
46 |
47 | function getAll() {
48 | var result = {};
49 | Object.keys(defaults).forEach(function(value) {
50 | result[value] = prefs.get(value);
51 | });
52 | return result;
53 | }
54 |
55 | function reset() {
56 | prefs.set("paths", defaults.paths);
57 | }
58 |
59 | function getPreferences() {
60 | return prefs;
61 | }
62 |
63 |
64 | // Define all default values
65 | prefs.definePreference("paths", "array", defaults.paths);
66 |
67 |
68 | $(SettingsDialog).on("imported", function(evt, imported) {
69 | $(exports).triggerHandler("imported", [imported]);
70 | });
71 |
72 |
73 | exports.defaults = defaults;
74 | exports.reset = reset;
75 | exports.openDialog = openDialog;
76 | exports.closeDialog = closeDialog;
77 | exports.getValue = getValue;
78 | exports.setValue = setValue;
79 | exports.getAll = getAll;
80 | exports.customPath = custom_path;
81 | exports.getPreferences = getPreferences;
82 | });
83 |
--------------------------------------------------------------------------------
/theme/delkoseclipse.css:
--------------------------------------------------------------------------------
1 | /* delkoseclipse theme by David Sánchez i Gregori
2 | * Licensed under BSD-License
3 | */
4 | .cm-s-delkoseclipse.CodeMirror {background: #FCFCFC; color: #484848;text-shadow: 0 0 2pt #eAeAeA;}
5 | .cm-s-delkoseclipse div.CodeMirror-selected {
6 | background-color: #EAEDEF;
7 | }
8 | .cm-s-delkoseclipse .CodeMirror-gutters {background: #F0F0F0; border-right: 0pt;}
9 | .cm-s-delkoseclipse .CodeMirror-cursor {
10 | border-left: 1pt solid rgba(88, 14, 111, 0.75) !important;
11 | border-right: 1pt solid rgba(98, 20, 116, 0.25) !important;
12 | }
13 |
14 | .cm-s-delkoseclipse .CodeMirror-activeline .CodeMirror-gutter-elt {
15 | color: #058;
16 | }
17 |
18 | .cm-s-delkoseclipse span.cm-comment {color: #9a9a9a;}
19 | .cm-s-delkoseclipse span.cm-atom {color: #7d4dd3;text-shadow: 0 0 2pt #fdddfc;}
20 | .cm-s-delkoseclipse span.cm-number {color: #f33;text-shadow: 0 0 2pt #ffe4e4;}
21 | .cm-s-delkoseclipse span.cm-property {color: #81b700;text-shadow: 0 0 2pt #cff4b4}
22 | .cm-s-delkoseclipse span.cm-attribute {color: #00a07c;text-shadow: 0 0 2pt #93ebd0}
23 |
24 | .cm-s-delkoseclipse span.cm-keyword {
25 | color: #034c9a;
26 | text-shadow: 0 0 3pt #c7d6e5;
27 | }
28 |
29 | .cm-s-delkoseclipse span.cm-string {
30 | color: #f268ed;
31 | text-shadow: 0 0 4pt #ffd6f6;
32 | }
33 |
34 | .cm-s-delkoseclipse span.cm-variable {color: #327232;text-shadow: 0 0 2pt #e6ffe6;}
35 | .cm-s-delkoseclipse span.cm-variable-2 {color: #44a8ce;text-shadow: 0 0 4pt #cbddef;}
36 |
37 | .cm-s-delkoseclipse span.cm-def{color: #c19700;text-shadow: 0 0 2pt #edd4af;}
38 | .cm-s-delkoseclipse span.cm-bracket{color: #7491a5;text-shadow: 0 0 2pt #daf1ff;}
39 |
40 | .cm-s-delkoseclipse span.cm-tag {color: #b22878;text-shadow: 0 0 2pt #ffc9ea;}
41 |
42 | .cm-s-delkoseclipse span.cm-link {color: #8d5ac1;text-shadow: 0 0 2pt #f3e8ff;}
43 | .cm-s-delkoseclipse span.cm-error {background: #ff3292; color: #f8f8f0;}
44 |
45 | .cm-s-delkoseclipse .CodeMirror-activeline-background {background-color: rgba(0, 0, 0, 0.1) !important;}
46 |
47 | .cm-s-delkoseclipse .CodeMirror-matchingbracket {
48 | color: black !important;
49 | box-shadow: 0 0 1em #0AE0FF;
50 | border-radius:0.25em;
51 | border:1pt solid #00ACF0;
52 | background-color: #c1f5ff;
53 | -webkit-animation: hilightMB 2s alternate ease-in-out infinite;
54 | }
55 | @-webkit-keyframes hilightMB {
56 | 0%
57 | {
58 | background-color:#ffccf7;
59 | border:1pt solid #F000AC;
60 | box-shadow: 0 0 1em #FF0AE0;
61 | }
62 |
63 | 50%
64 | {
65 | background-color: transparent;
66 | border:1pt solid transparent;
67 | box-shadow: 0 0 1em transparent;
68 | }
69 |
70 | 100%
71 | {
72 | background-color:#d1f6ff;
73 | border:1pt solid #00ACF0;
74 | box-shadow: 0 0 1em #0AE0FF;
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/theme/visual-studio-ex.css:
--------------------------------------------------------------------------------
1 | #sidebar{
2 | background:#f6f6f6;
3 | text-shadow:none;
4 | }
5 |
6 | #working-set-header,
7 | #open-files-container{ /* Working files */
8 | background:#f0f0f0;
9 | }
10 |
11 | #project-files-header,
12 | #working-set-header{/* "working files" header and folder header*/
13 | color:#777!important;
14 | }
15 |
16 | #project-dropdown-toggle:hover{ /* Open url when hover */
17 | color:#555!important;
18 | background:#e8e8e8;
19 | }
20 |
21 | .jstree-brackets li a,
22 | .jstree-brackets li .extension,
23 | .jstree-brackets li a.jstree-clicked, /* Files, folder and extensions */
24 | #open-files-container li a,
25 | #open-files-container li .extension,
26 | #open-files-container li a.jstree-clicked{ /* Files, folder and extensions in "working fiels"*/
27 | color:#222!important;
28 | }
29 |
30 | .sidebar-selection{ /* Selected file or folder */
31 | background:#cccedb;
32 | }
33 |
34 | .sidebar-selection-triangle{ /* ^ the cool arrow */
35 | background:transparent;
36 | }
37 |
38 | .sidebar-selection-triangle.triangle-visible::before{
39 | border-left:12px solid #cccedb;
40 | }
41 |
42 | #main-toolbar{ /* Toolbar to the right */
43 | background:#f6f6f6;
44 | }
45 |
46 | #status-bar{ /* Bottom status bar */
47 | background:#f6f6f6;
48 | border-top:1px solid #d4d4d4;
49 | }
50 |
51 | #status-indicators,
52 | #status-info{ /* Status bar text */
53 | background:transparent;
54 | }
55 |
56 | .CodeMirror-scroll{
57 | background-color: #fefefe;
58 | color:black;
59 | }
60 |
61 | .CodeMirror .CodeMirror-lines pre{
62 | z-index: 3;
63 | }
64 |
65 | .CodeMirror .CodeMirror-gutters{
66 | background-color: #fefefe;
67 | }
68 |
69 | .CodeMirror .CodeMirror-linenumber{
70 | color: #0E97A1;
71 | background-color: #fefefe;
72 | }
73 |
74 | .CodeMirror .CodeMirror-matchingbracket{
75 | color: black;
76 | background-color: #dedede;
77 | }
78 |
79 | .CodeMirror .CodeMirror-linebackground{
80 | outline: 2px solid #dddddd;
81 | z-index: 3;
82 | }
83 |
84 |
85 | .CodeMirror span.cm-atom { color: blue; }
86 | .CodeMirror span.cm-qualifier, .CodeMirror span.cm-builtin { color: #800000; }
87 |
88 | .CodeMirror span.cm-keyword { color: blue; }
89 | .CodeMirror span.cm-comment { color: green; }
90 | .CodeMirror span.cm-string {color: #800000;}
91 | .CodeMirror span.cm-string-2 {color: #800000;}
92 | .CodeMirror span.cm-variable { color: black; }
93 | .CodeMirror span.cm-variable-2 { color: black; }
94 | .CodeMirror span.cm-tag { color: #800000; }
95 | .CodeMirror span.cm-attribute { color: red; }
96 | .CodeMirror span.cm-property { color: black; }
97 |
98 | .CodeMirror span.cm-matchhighlight{
99 | background-color: yellow;
100 | }
101 |
102 | .CodeMirror .CodeMirror-selectedtext{
103 | background-color: #ADD6FF;
104 | }
105 |
106 | .CodeMirror .CodeMirror-selected{
107 | background: transparent;
108 | }
109 |
110 | .CodeMirror-focused .CodeMirror-selected{
111 | background: transparent;
112 | }
113 |
114 |
--------------------------------------------------------------------------------
/theme/zamiere.css:
--------------------------------------------------------------------------------
1 | .panel {
2 | background:#3C3F41;
3 | }
4 |
5 | #status-bar,
6 | #status-indicators {
7 | background:#242424;
8 | color:#ccc;
9 | }
10 |
11 | #status-info {
12 | color:#ccc;
13 | }
14 |
15 | #open-files-container,
16 | #working-set-header,
17 | #project-files-header {
18 | color:#aaa;
19 | background:#565A5D;
20 | }
21 |
22 | .jstree-brackets li.jstree-closed > a,
23 | .jstree-brackets li.jstree-open > a {
24 | color:#ccc;
25 | }
26 |
27 | #open-files-container .extension,
28 | .jstree-brackets li .extension {
29 | color:#aaa;
30 | }
31 |
32 | .cm-s-zamiere.CodeMirror {
33 | background-color:#202020;
34 | color:#fff;
35 | }
36 |
37 | .cm-s-zamiere.CodeMirror div.CodeMirror-cursor {
38 | border-left:1px solid #f8f8f0;
39 | z-index:3;
40 | }
41 |
42 | .cm-s-zamiere .CodeMirror-selected {
43 | background:#676767;
44 | opacity:.5;
45 | }
46 |
47 | .cm-s-zamiere .cm-keyword {color:#FFCC33;}
48 | .cm-s-zamiere .cm-atom {color:#99CC66;}
49 | .cm-s-zamiere .cm-number {color:#99CC66;}
50 | .cm-s-zamiere .cm-def {color:#A9D158;}
51 | .cm-s-zamiere .cm-variable {color:#34A2D9;}
52 | .cm-s-zamiere .cm-variable-2 {color:#3399CC;}
53 | .cm-s-zamiere .cm-property {color:#DAD6CD;}
54 | .cm-s-zamiere .cm-operator {color:#FFCC33;}
55 | .cm-s-zamiere .cm-comment {color:#747166;}
56 | .cm-s-zamiere .cm-string {color:#A9D158;}
57 | .cm-s-zamiere .cm-string-2 {color:#A9D158;}
58 | .cm-s-zamiere .cm-meta {color:#FFCC33;}
59 | .cm-s-zamiere .cm-qualifier {color:#FFCC33;}
60 | .cm-s-zamiere .cm-bracket {color:#FFFFFF;}
61 | .cm-s-zamiere .cm-tag {color:#FFCC33;}
62 | .cm-s-zamiere .cm-attribute {color:#FFCC33;}
63 |
64 | .cm-s-zamiere.CodeMirror span.CodeMirror-matchingbracket {
65 | color:#00CCFF;
66 | text-shadow:0 0 3px #00CCFF;
67 | }
68 |
69 | .cm-s-zamiere .cm-matchhighlight {
70 | box-shadow:0 0 5px #00CCFF;
71 | background-color: #00CCFF;
72 | color: black;
73 | border-radius:2px;
74 | }
75 |
76 | .cm-s-zamiere .CodeMirror-searching {
77 | color:#000;
78 | }
79 |
80 | .cm-s-zamiere .cm-matchhighlight:not(.CodeMirror-selectedtext) {
81 | background-color: rgba(0, 204, 255, 0.4);
82 | box-shadow:0 0 5px #00CCFF;
83 | color:#ccc;
84 | border-radius:2px;
85 | }
86 |
87 | .cm-s-zamiere .CodeMirror-activeline-background {
88 | background:hsla(0,0%,0%,0.5)!important;
89 | margin:-1px -10px;
90 | }
91 |
92 | .cm-s-zamiere .CodeMirror-activeline .CodeMirror-gutter-elt {
93 | color: #eeeeee;
94 | }
95 |
96 | .cm-s-zamiere div.CodeMirror-gutter {
97 | color:#ccc;
98 | }
99 |
100 | .cm-s-zamiere div.CodeMirror-gutters {
101 | background-color:#101010;
102 | box-shadow:0 0 10px hsla(0,0%,0%,.8);
103 | border-right:0;
104 | }
105 |
106 | .cm-s-zamiere span.CodeMirror-widget {
107 | margin:-3px 0px;
108 | display:inline-block;
109 | }
110 | .cm-s-zamiere span.CodeMirror-foldmarker {
111 | display:inline-table;
112 | background:#ccc;
113 | border:0;
114 | color:#000;
115 | border-radius:3px;
116 | font-size:20px;
117 | margin:3px;
118 | padding:0px 5px;
119 | height:15px;
120 | line-height:15px;
121 | overflow:hidden;
122 | white-space:nowrap;
123 | }
124 |
125 | #status-overwrite {
126 | color:white;
127 | }
128 |
--------------------------------------------------------------------------------
/ThemeManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var _ = brackets.getModule("thirdparty/lodash"),
12 | FileSystem = brackets.getModule("filesystem/FileSystem"),
13 | FileUtils = brackets.getModule("file/FileUtils"),
14 | _ThemeManager = brackets.getModule("view/ThemeManager"),
15 | SettingsManager = require("SettingsManager"),
16 | ColorProcessor = require("ColorProcessor"),
17 | validExtensions = ["css", "less"];
18 |
19 |
20 | /**
21 | * @private
22 | * Verifies that the file passed in is a valid theme file type.
23 | *
24 | * @param {File} file is object to verify if it is a valid theme file type
25 | * @return {boolean} to confirm if the file is a valid theme file type
26 | */
27 | function isFileTypeValid(file) {
28 | return file.isFile &&
29 | validExtensions.indexOf(FileUtils.getFileExtension(file.name)) !== -1;
30 | }
31 |
32 |
33 | /**
34 | * Load css/less files from a directory to be treated as themes
35 | *
36 | * @param {string} path where theme files are to be loaded from
37 | * @return {$.Deferred} promise object resolved with the themes to be loaded from the directory
38 | */
39 | function loadDirectory(path) {
40 | var result = new $.Deferred();
41 |
42 | if (!path) {
43 | return result.reject({
44 | path: path,
45 | error: "Path not defined"
46 | });
47 | }
48 |
49 | function getDirectoryContent(err, entries) {
50 | var i, files = [];
51 | entries = entries || [];
52 |
53 | for (i = 0; i < entries.length; i++) {
54 | if (isFileTypeValid(entries[i])) {
55 | files.push(entries[i].name);
56 | }
57 | }
58 |
59 | if (err) {
60 | result.reject({
61 | path: path,
62 | error: err
63 | });
64 | }
65 | else {
66 | result.resolve({
67 | files: files,
68 | path: path
69 | });
70 | }
71 | }
72 |
73 | function loadThemesFiles(themes) {
74 | // Iterate through each name in the themes and make them theme objects
75 | var deferred = _.map(themes.files, function (themeFile) {
76 | return _ThemeManager.loadFile(themes.path + "/" + themeFile).done(function(theme) {
77 | theme.file.read(function( err, content /*, stat*/ ) {
78 | if (!err) {
79 | theme.dark = ColorProcessor.isDark(content);
80 | }
81 | });
82 | });
83 | });
84 |
85 | return $.when.apply(undefined, deferred);
86 | }
87 |
88 | FileSystem.getDirectoryForPath(path).getContents(getDirectoryContent);
89 | return result.then(loadThemesFiles).done(function() {
90 | setTimeout(function() {
91 | _ThemeManager.refresh(true);
92 | }, 0);
93 | });
94 | }
95 |
96 |
97 | exports.loadDirectory = loadDirectory;
98 | });
99 |
--------------------------------------------------------------------------------
/theme/hammsidian.css:
--------------------------------------------------------------------------------
1 | .cm-s-hammsidian.CodeMirror
2 | {
3 | font-family: consolas !important;
4 | background-color: #293134;
5 | color: #E0E2E4;
6 | font-size: 16px !important;
7 | }
8 |
9 | .cm-s-hammsidian.CodeMirror .CodeMirror-lines pre
10 | {
11 | z-index: 3;
12 | }
13 |
14 | .cm-s-hammsidian.CodeMirror .CodeMirror-gutters
15 | {
16 | background-color: #293134;
17 | }
18 |
19 | .cm-s-hammsidian.CodeMirror .CodeMirror-linenumber
20 | {
21 | background-color: #293134;
22 | color: #81969A;
23 | }
24 |
25 | .cm-s-hammsidian.CodeMirror .CodeMirror-matchingbracket
26 | {
27 | color: #dedede;
28 | outline: 1px solid #dedede;
29 | }
30 |
31 | .cm-s-hammsidian.CodeMirror .CodeMirror-linebackground,
32 | .cm-s-hammsidian.CodeMirror .CodeMirror-activeline
33 | {
34 | background-color: #2F393C;
35 | }
36 |
37 |
38 | .cm-s-hammsidian.CodeMirror .cm-atom { color: #EC7600; }
39 | .cm-s-hammsidian.CodeMirror .cm-qualifier { color: #678CB1; }
40 |
41 | /*CodeMirror does not add notation for css... Which would be really nice. */
42 | /*.cm-s-hammsidian.CodeMirror .cm-property { color: red; }*/
43 |
44 | .cm-s-hammsidian.CodeMirror .cm-keyword { color: #93C763; }
45 | .cm-s-hammsidian.CodeMirror .cm-comment { color: #7D8C93; }
46 | .cm-s-hammsidian.CodeMirror .cm-string {color: #EC7600;}
47 | .cm-s-hammsidian.CodeMirror .cm-string-2 {color: #EC7600;}
48 | .cm-s-hammsidian.CodeMirror .cm-variable { color: #E0E2E4; }
49 | /*.cm-s-hammsidian.CodeMirror .cm-variable-2 { color: #EC7600; }*/
50 | .cm-s-hammsidian.CodeMirror .cm-tag { color: rgb(147,199,99); }
51 | .cm-s-hammsidian.CodeMirror .cm-attribute { color: #678CB1; }
52 | .cm-s-hammsidian.CodeMirror .cm-property { color: rgb(140,140,180); }
53 | .cm-s-hammsidian.CodeMirror .cm-number { color: #FF9E3D;}
54 |
55 | /*.cm-s-hammsidian.CodeMirror .cm-meta { color: #EC7600; }*/
56 | .cm-s-hammsidian.CodeMirror .cm-error { color: #EC7600; }
57 |
58 | .cm-s-hammsidian.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext)
59 | {
60 | background-color: #616161;
61 | color: white;
62 | }
63 |
64 | .CodeMirror-gutters {
65 | border-right: 1px solid #444;
66 | }
67 |
68 | .CodeMirror-foldmarker {
69 | padding-right:5px;
70 | padding-left:5px;
71 | background:#4d4d4d;
72 | border:1px solid #ddd;
73 | margin-right:3px;
74 | margin-left:3px;
75 | border-radius:3px;
76 | color:#fff;
77 | cursor:pointer;
78 | }
79 |
80 | .cm-s-hammsidian.CodeMirror .CodeMirror-selectedtext
81 | {
82 | background-color: #804000;
83 | }
84 |
85 | .cm-s-hammsidian.CodeMirror .CodeMirror-selected
86 | {
87 | background: transparent;
88 | }
89 |
90 | .cm-s-hammsidian.CodeMirror-focused .CodeMirror-selected
91 | {
92 | background: transparent;
93 | }
94 |
95 | .cm-s-hammsidian.CodeMirror .CodeMirror-cursor
96 | {
97 | z-index: 5;
98 | border-left: 1px solid white;
99 | }
100 |
101 | #status-bar {
102 | border-top:1px solid #484b4d;
103 | background:#3c3f41;
104 |
105 | }
106 |
107 | #status-bar #status-info {
108 | color:#f7c741;
109 |
110 | }
111 |
112 | #status-bar #status-indicators{
113 | background:#3c3f41;
114 |
115 | }
116 |
117 | #status-bar #status-indicators #status-language {
118 | color:#ed8d47;
119 | }
120 |
121 |
122 | #status-bar #status-indicators #status-indent {
123 | color:#4bd278;
124 | }
125 |
126 | #status-overwrite {
127 | color:#4BD278;
128 | }
129 |
--------------------------------------------------------------------------------
/theme/light-table.css:
--------------------------------------------------------------------------------
1 | .cm-s-light-table.CodeMirror {
2 | background-color: #202020;
3 | color:#ccc;
4 | padding-left: 8px;
5 | }
6 | .cm-s-light-table .CodeMirror-sizer{
7 | padding-bottom: 90px;
8 | }
9 |
10 | .cm-s-light-table .CodeMirror-scroll{
11 | border-color: #202020;
12 | }
13 | .cm-s-light-table ::-webkit-scrollbar {
14 | width: 10px;
15 | }
16 | .cm-s-light-table ::-webkit-scrollbar-track {
17 | background: transparent;
18 | }
19 | .cm-s-light-table ::-webkit-scrollbar-thumb {
20 | background: rgba(255,255,255,.2);
21 | border-radius: 5px;
22 | }
23 | .cm-s-light-table ::-webkit-scrollbar-thumb:hover{
24 | background: rgba(255,255,255,.3);
25 | }
26 | .cm-s-light-table ::-webkit-scrollbar-thumb:active{
27 | background: rgba(255,255,255,.4);
28 | }
29 |
30 | .cm-s-light-table.CodeMirror .inline-widget{
31 | background: #272727;
32 | color: #ccc;
33 | }
34 | .cm-s-light-table.CodeMirror .inline-widget h1,
35 | .cm-s-light-table.CodeMirror .inline-widget h2,
36 | .cm-s-light-table.CodeMirror .inline-widget h3{
37 | color: #ccc;
38 | }
39 | .cm-s-light-table.CodeMirror .inline-widget p,
40 | .cm-s-light-table.CodeMirror .inline-widget dt,
41 | .cm-s-light-table.CodeMirror .inline-widget li,
42 | .cm-s-light-table.CodeMirror .inline-widget code{
43 | color: #fff;
44 | }
45 | .cm-s-light-table.CodeMirror .CodeMirror-gutters {
46 | border-color: #202020;
47 | background: #202020;
48 | }
49 | .cm-s-light-table.CodeMirror .CodeMirror-linenumbers {
50 | background-color: #202020;
51 | }
52 | .cm-s-light-table.CodeMirror .CodeMirror-linenumber {
53 | color: #99997a;
54 | padding-left: 15px;
55 | }
56 | .cm-s-light-table.CodeMirror .CodeMirror-activeline,
57 | .cm-s-light-table.CodeMirror.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt{
58 | background: rgba(255,255,255,.1);
59 | }
60 | .cm-s-light-table.CodeMirror pre{
61 | /*padding between line number & content*/
62 | padding: 0 8px;
63 | }
64 |
65 | .cm-s-light-table.CodeMirror .CodeMirror-cursor {
66 | border-left: 1px solid #ffffff;
67 | }
68 | .cm-s-light-table.CodeMirror .CodeMirror-selected {
69 | background: rgba(255,255,255,.2);
70 | }
71 |
72 | .cm-s-light-table.CodeMirror .CodeMirror-matchingbracket {
73 | border-bottom: 1px solid #33ffff;
74 | color: #ccc19b;
75 | }
76 | .cm-s-light-table.CodeMirror .CodeMirror-unmatchingbracket {
77 | border-bottom: 1px solid #cb3233;
78 | color: #cb3233;
79 | }
80 |
81 |
82 | .cm-s-light-table.CodeMirror .cm-comment {
83 | color: #968879;
84 | }
85 | .cm-s-light-table.CodeMirror .cm-property {
86 | color: #aaaaaa;
87 | }
88 | .cm-s-light-table.CodeMirror .cm-qualifier {
89 | color: #aaeeab;
90 | }
91 | .cm-s-light-table.CodeMirror .cm-tag {
92 | color: #7ac1ff;
93 | }
94 | .cm-s-light-table.CodeMirror .cm-def {
95 | color: #aaccff;
96 | }
97 | .cm-s-light-table.CodeMirror .cm-number {
98 | color: #ccccab;
99 | }
100 | .cm-s-light-table.CodeMirror .cm-atom {
101 | color: #cc9dc7;
102 | }
103 | .cm-s-light-table.CodeMirror .cm-keyword{
104 | color: #aacd80;
105 | }
106 | .cm-s-light-table.CodeMirror .cm-string{
107 | color: #aadddd;
108 | }
109 | .cm-s-light-table.CodeMirror .cm-string-2{
110 | color: #7ad1dd;
111 | }
112 | .cm-s-light-table.CodeMirror .cm-variable {
113 | color: #ccc19b;
114 | }
115 | .cm-s-light-table.CodeMirror .cm-variable-2 {
116 | color: #aaccff;
117 | }
118 | .cm-s-light-table.CodeMirror .cm-attribute {
119 | color: #83e1b2;
120 | }
--------------------------------------------------------------------------------
/lib/ko.factory.js:
--------------------------------------------------------------------------------
1 | /**
2 | * koFactory Copyright (c) 2014 Miguel Castillo.
3 | * Licensed under MIT
4 | *
5 | * https://github.com/MiguelCastillo/koFactory
6 | */
7 |
8 | define(function() {
9 | "use strict";
10 |
11 |
12 | function factory(data, target, settings) {
13 | return factory.serialize( data, target, settings );
14 | }
15 |
16 |
17 | factory.primitiveTypes = {
18 | "undefined": true,
19 | "boolean": true,
20 | "number": true,
21 | "string": true
22 | };
23 |
24 |
25 | factory.getType = function(data) {
26 | if (data instanceof Array) {
27 | return "array";
28 | }
29 |
30 | var typeOf = typeof data;
31 | if (factory.primitiveTypes.hasOwnProperty(typeOf)) {
32 | return "primitive";
33 | }
34 | else if (typeOf === "object") {
35 | return "object";
36 | }
37 |
38 | throw "Invalid data type";
39 | };
40 |
41 |
42 | factory.array = function (data, target, settings) {
43 | var i = 0,
44 | length = data.length,
45 | type = false,
46 | update = factory.ko.isObservable(target);
47 |
48 | settings = settings || {};
49 |
50 | if (length) {
51 | // We only need to get the type once; items in an
52 | // arrays are of the same data type.
53 | type = factory.getType(data[0]);
54 | }
55 |
56 | for (; i < length; i++) {
57 | data[i] = factory[type](data[i]);
58 | }
59 |
60 | if (update === true) {
61 | target(data);
62 | return target;
63 | }
64 |
65 | return factory.ko.observableArray(data);
66 | };
67 |
68 |
69 | factory.primitive = function(data, target, settings) {
70 | var update = factory.ko.isObservable(target);
71 | if (update === true) {
72 | target(data);
73 | return target;
74 | }
75 |
76 | return factory.ko.observable(data);
77 | };
78 |
79 |
80 | factory.object = function(data, target, settings) {
81 | target = target || {};
82 | settings = settings || {};
83 | var type, item, value, update = false;
84 |
85 | for (var i in data) {
86 | // If i isn't a property of data, then we will continue on to the next property
87 | if (data.hasOwnProperty(i) === false) {
88 | continue;
89 | }
90 |
91 | update = target.hasOwnProperty(i);
92 | item = data[i];
93 | type = factory.getType(item);
94 | value = factory[type](item, target[i], settings[i]);
95 |
96 | if (update === false) {
97 | target[i] = value;
98 | }
99 | }
100 |
101 | return target;
102 | };
103 |
104 |
105 | /**
106 | * @param data - is the new data that will either generate a new view model
107 | * or will be merged into target.
108 | * @param target - optional object where data will be copied into.
109 | */
110 | factory.serialize = function(data, target, settings) {
111 | var type = factory.getType(data);
112 | return factory[type](data, target, settings);
113 | };
114 |
115 |
116 | factory.deserialize = function(data) {
117 | return factory.ko.toJS(data);
118 | };
119 |
120 |
121 | factory.bind = function(el, viewModel) {
122 | if (factory.$) {
123 | factory.$(el).each(function(index, iel) {
124 | factory.ko.applyBindings(viewModel, iel);
125 | });
126 | }
127 | else {
128 | factory.ko.applyBindings(viewModel, el);
129 | }
130 | };
131 |
132 |
133 | factory.unbind = function(el) {
134 | if (factory.$) {
135 | factory.$(el).each(function(index, iel) {
136 | factory.ko.cleanNode(iel);
137 | });
138 | }
139 | else {
140 | factory.ko.cleanNode(el);
141 | }
142 | };
143 |
144 | return factory;
145 | });
146 |
--------------------------------------------------------------------------------
/theme/lightdelkos.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Light lightdelkos theme by David Sánchez i Gregori
3 | * Licensed under BSD License
4 | */
5 |
6 | .cm-s-lightdelkos.CodeMirror {
7 | background: #EEE;
8 | color: #222;
9 | }
10 | .cm-s-lightdelkos div.CodeMirror-selected {
11 | background-color: #def !important;
12 | }
13 | .cm-s-lightdelkos .CodeMirror-gutters {
14 | background: #222;
15 | border-right: 0pt;
16 | }
17 | .cm-s-lightdelkos .CodeMirror-cursor {
18 | border-left: 1pt solid rgb(0, 0, 0) !important;
19 | }
20 | .cm-s-lightdelkos span.cm-comment {
21 | color: #afafaf;
22 | text-shadow: 0 0 2pt #FFF;
23 | }
24 | .cm-s-lightdelkos span.cm-atom {
25 | color: #410c76;
26 | background-color: #ede1f2;
27 | text-shadow: 0 0 2pt #fadcff;
28 | border-bottom: 1pt solid #9600f4;
29 | }
30 | .cm-s-lightdelkos span.cm-number {
31 | color: #f00;
32 | text-shadow: 0 0 1pt #b75;
33 | }
34 |
35 | .cm-s-lightdelkos span.cm-attribute {
36 | color: #199;
37 | background-color: #dfeee9;
38 | text-shadow: 0 0 2pt #fff;
39 | border-bottom: 1pt solid #68ddbd;
40 | }
41 |
42 |
43 | .cm-s-lightdelkos span.cm-property {
44 | color: #0c658d;
45 | text-shadow: 0 0 2pt #fff;
46 | background-color: #e0eaf0;
47 | border-bottom: 1pt solid #0086c4;
48 | }
49 |
50 | .cm-s-lightdelkos span.cm-keyword {
51 | color: #0d98fd;
52 | text-shadow: 0 0 2pt #fff;
53 | background-color: #ddeefb;
54 | border-bottom: 1pt solid #5cc5e6;
55 | -webkit-animation: hilightKey 2s alternate ease-in-out infinite;
56 | }
57 | .cm-s-lightdelkos span.cm-string {
58 | color: #f016ad;
59 | text-shadow: 0 0 4pt #fff0fa;
60 | background-color: #edddee;
61 | border-bottom: 1pt solid #ffb6e3;
62 | }
63 | .cm-s-lightdelkos span.cm-variable {
64 | color: #2f5d2f;
65 | background-color: #dfeedf;
66 | text-shadow: 0 0 2pt #fff;
67 | border-bottom: 1pt solid #a9cca9;
68 | }
69 | .cm-s-lightdelkos span.cm-variable-2 {
70 | color: #0092ff;
71 | text-shadow: 0 0 2pt #fff;
72 | background-color: #d1e2eb;
73 | border-bottom: 1pt solid #0092ff;
74 | }
75 | .cm-s-lightdelkos span.cm-def {
76 | color: #9a8c00;
77 | background-color: #f5f5ce;
78 | text-shadow: 0 0 1pt #ffffef;
79 | border-bottom: 1pt solid #e8c731;
80 | }
81 | .cm-s-lightdelkos span.cm-bracket {
82 | color: #111;
83 | text-shadow: 0 0 1pt #d8edfc;
84 | }
85 | .cm-s-lightdelkos span.cm-tag {
86 | color: #965d05;
87 | text-shadow: 0 0 1pt #fff;
88 | background-color: #f5f2e5;
89 | border-bottom: 1pt solid #e0a624;
90 | }
91 | .cm-s-lightdelkos span.cm-link {
92 | color: #ae81ff;
93 | }
94 | .cm-s-lightdelkos span.cm-error {
95 | background: #ff3292;
96 | color: #feedff;
97 | }
98 | .cm-s-lightdelkos .CodeMirror-activeline-background {
99 | background-color: rgba(0, 0, 0, 0.025) !important;
100 | z-index: 999;
101 | }
102 | .cm-s-lightdelkos .CodeMirror-matchingbracket {
103 | color: black !important;
104 | border: 1pt solid #cdd;
105 | background-color: #fff;
106 | -webkit-animation: hilightMB 1s alternate infinite;
107 | }
108 | @-webkit-keyframes hilightMB {
109 | 0%
110 | {
111 | background-color:#FFF;
112 | color:#888;
113 | }
114 |
115 | 50%
116 | {
117 | background-color: #eee;
118 | color: black;
119 | }
120 |
121 | 100%
122 | {
123 | background-color:#ddd;
124 | color: #000;
125 | }
126 | }
127 |
128 |
129 | @-webkit-keyframes hilightKey {
130 | 0%
131 | {
132 | border-bottom: 1pt solid #4dd6ff;
133 | background-color: #ddeefb;
134 | }
135 |
136 | 50%
137 | {
138 | border-bottom: 1pt solid #00a1f8;
139 | background-color: #dfeefa;
140 | }
141 |
142 | 100%
143 | {
144 | border-bottom: 1pt solid #4dd6ff;
145 | background-color: #ddeefb;
146 | }
147 | }
--------------------------------------------------------------------------------
/mirror-style/variables.mustache:
--------------------------------------------------------------------------------
1 | @themeName: <%=name %>;
2 |
3 | @plainTextBackground: <%= PlainText.background %>;
4 | @plainTextColor: <%= PlainText.color %>;
5 |
6 | .documentBackground() when not(iscolor(@plainTextBackground)) {
7 | @backgroundColor: #e8e8e8;
8 | }
9 |
10 | .documentBackground() when (iscolor(@plainTextBackground)) {
11 | @backgroundColor: @plainTextBackground;
12 | }
13 |
14 | .documentFontColor() when not (iscolor(@plainTextColor)) {
15 | .documentBackground();
16 | @fontColor: contrast(@backgroundColor);
17 | }
18 |
19 | .documentFontColor() when (iscolor(@plainTextColor)) {
20 | @fontColor: @plainTextColor;
21 | }
22 |
23 |
24 | @guttersBackground: <%= LineNumbers.background %>;
25 | @linenumberColor: <%= LineNumbers.color %>;
26 |
27 | @keywordColor: <%= Keyword.color %>;
28 | @numberColor: <%= Number.color %>;
29 |
30 | @variableColor: <%= PlainText.color %>;
31 | @variable2Color: <%= PlainText.color %>;
32 | @variable3Color: <%= PlainText.color %>;
33 |
34 | @propertyColor: <%= Identifier.color %>;
35 | @operatorColor: <%= Operator.color %>;
36 |
37 | @atomColor: <%= Keyword.color %>;
38 |
39 | @commentColor: <%= Comment.color %>;
40 | @commentBackground: <%= Comment.background %>;
41 |
42 | @stringColor: <%= String.color %>;
43 | @string2Color: <%= StringCVerbatim.color %>;
44 | @definitionColor: <%= Identifier.color %>;
45 | @metaColor: <%= XMLAttribute.color %>;
46 | @qualifierColor: <%= CSSSelector.color %>;
47 | @tagColor: <%= HTMLElementName.color %>;
48 |
49 | @builtingColor: <%= Keyword.color %>;
50 | @attributeColor: <%= HTMLAttribute.color %>;
51 | @linkColor: <%= urlformat.color %>;
52 |
53 | @selectedTextBackground: <%= SelectedText.background %>;
54 | @selectedTextOpacity: .3;
55 |
56 | @matchHightlightBackground: <%= BraceMatchingRectangle.background %>;
57 | @matchHightlightColor: <%= XAMLDelimiter.color %>;
58 |
59 | @matchingBracketColor: <%= outliningverticalrule.color %>;
60 | @nonmatchingBracketColor: <%= outliningcollapsehintadornment.color %>;
61 |
62 |
63 | // CSS definitions
64 | //
65 | //
66 | //
67 | //
68 | //
69 | //
70 | //
71 | //
72 | @cssCommentColor: <%= CSSComment.color %>;
73 | @cssCommentBackground: <%= CSSComment.background %>;
74 | @cssKeywordColor: <%= CSSKeyword.color %>;
75 | @cssPropertyColor: <%= CSSPropertyName.color %>;
76 | @cssAtomColor: <%= CSSPropertyValue.color %>;
77 | @cssStringColor: <%= CSSStringValue.color %>;
78 | @cssNumberColor: <%= CSSStringValue.color %>;
79 | @cssQualifierColor: <%= CSSSelector.color %>;
80 | @cssMetaColor: <%= CSSSelector.color %>;
81 | @cssTagColor: <%= CSSSelector.color %>;
82 |
83 |
84 | // HTML definitions
85 | //
86 | //
87 | //
88 | //
89 | //
90 | //
91 | //
92 | //
93 | //
94 | //
95 | @htmlAttributeColor: <%= HTMLAttribute.color %>;
96 | @htmlAttributeValueColor: <%= HTMLAttributeValue.color %>;
97 | @htmlCommentColor: <%= HTMLComment.color %>;
98 | @htmlCommentBackground: <%= HTMLComment.background %>;
99 | @htmlElementNameColor: <%= HTMLElementName.color %>;
100 | @htmlEntityColor: <%= HTMLEntity.color %>;
101 | @htmlOperatorColor: <%= HTMLOperator.color %>;
102 | @htmlOperatorBackground: <%= HTMLOperator.background %>;
103 | @htmlTagDelimiterColor: <%= HTMLTagDelimiter.color %>;
104 |
105 |
--------------------------------------------------------------------------------
/mirror-style/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themse Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | *
6 | * Parts are extracted from mirror-style https://github.com/bradgearon/mirror-style
7 | * Thanks Brad!!!
8 | */
9 |
10 |
11 | define(function(require) {
12 |
13 | var _ = brackets.getModule("thirdparty/lodash");
14 | var FileSystem = brackets.getModule("filesystem/FileSystem");
15 | var mustacheTmpl = require("text!mirror-style/variables.mustache"),
16 | lessTmpl = require("text!mirror-style/template.less");
17 |
18 |
19 | function cleanup (name) {
20 | return name
21 | .replace(/\s+\w?/g, function(match) {
22 | return match.replace(/\s*/, "").toUpperCase();
23 | })
24 | .replace(/\W/g, "");
25 | }
26 |
27 |
28 | // From mirror-style
29 | function splitColor (color) {
30 | var colorProps = {};
31 | // AA BB GG RR (VS reverses BB && RR bits...)
32 | var split = color.match(/0x([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/) || [];
33 | var opacity;
34 |
35 | // Get rid of regex match.
36 | split.shift();
37 |
38 | // We should have four channels... But, we only care whether or not the 'alpha'
39 | // channel is 2. If it is 2, then we skip the color.
40 | if (split.length === 4) {
41 | opacity = Number(split[0]);
42 | colorProps.color = [split[3], split[2], split[1]];
43 | colorProps.rgba = [parseInt(split[3], 16), parseInt(split[2], 16), parseInt(split[1], 16)];
44 | colorProps.inherit = opacity === 2;
45 | }
46 |
47 | return colorProps;
48 | }
49 |
50 |
51 | function colorString(input) {
52 | if (input.inherit) {
53 | return "inherit";
54 | }
55 |
56 | var func = input.rgba.length === 3 ? 'rgb' : 'rgba';
57 | return func + '(' + input.rgba.join(',') + ')';
58 | }
59 |
60 |
61 | // From mirror-style
62 | function readItem (item) {
63 | var backgroundValues = splitColor(item.attr('background'));
64 | var foregroundValues = splitColor(item.attr('foreground'));
65 |
66 | return {
67 | color: colorString(foregroundValues),
68 | background: colorString(backgroundValues),
69 | bold: item.attr('boldfont') === 'Yes' ? true : false
70 | };
71 | }
72 |
73 |
74 | // Small bits from mirror-style
75 | function parse (themeName, content) {
76 | var deferred = $.Deferred(),
77 | $content = $(content),
78 | props = {};
79 | var lessParser, currentLessTmpl;
80 |
81 | $('Items > Item', $content).each(function (i, item) {
82 | var $item = $(item),
83 | name = $item.attr('name'),
84 | prop = readItem($item);
85 |
86 | if ($item.length && (prop.color || prop.background)) {
87 | props[ cleanup(name) ] = prop;
88 | }
89 | });
90 |
91 | props.name = themeName;
92 | lessParser = new (less.Parser)();
93 |
94 | try {
95 | currentLessTmpl = _.template(mustacheTmpl, props) + lessTmpl;
96 | lessParser.parse(currentLessTmpl, function (e, tree) {
97 | deferred.resolve({
98 | name: themeName,
99 | fileName: themeName + ".css",
100 | content: tree.toCSS()
101 | });
102 | });
103 | }
104 | catch(ex) {
105 | deferred.reject(ex);
106 | }
107 |
108 | return deferred.promise();
109 | }
110 |
111 |
112 | function loadFile(fileName) {
113 | var file = FileSystem.getFileForPath (fileName);
114 | var deferred = $.Deferred();
115 |
116 | try {
117 | file.read(function(err, content) {
118 | if (err) {
119 | deferred.reject(err);
120 | return;
121 | }
122 |
123 | var themeName = fileName.split("/").pop().split(".").shift();
124 | parse(themeName, content)
125 | .done(deferred.resolve)
126 | .fail(deferred.reject);
127 | });
128 | }
129 | catch(ex) {
130 | deferred.reject(ex);
131 | }
132 |
133 | return deferred.promise();
134 | }
135 |
136 |
137 | return {
138 | "importFile": loadFile
139 | };
140 |
141 | });
142 |
--------------------------------------------------------------------------------
/theme/peacock.css:
--------------------------------------------------------------------------------
1 | /*
2 | Theme: Peacock
3 | tmTheme: Dayle Rees
4 | CodeMirror CSS: Paweł Chętkowski
5 | */
6 | /*Main area*/
7 | .CodeMirror{
8 | background:#2b2a27;
9 | color:#ede0ce;
10 | font-size: 14px;
11 | }/*Main coding area, without line count.*/
12 |
13 | .CodeMirror div.CodeMirror-cursor {border-left: 1px solid #ede0ce; z-index: 3;}
14 |
15 | /*Brackets is based on webkit, so you can use scrollbar styling. Example below contains 8px width, grey scrollbar for the main area. You can use it with other section, just remember about z-indexes or things like 'selected' with overlap your scrollbar.*/
16 | .CodeMirror .CodeMirror-vscrollbar{ width: 14px; bottom:8px !important;} /*Scrollbar vertical. These values MUST be the same as height/width of scrollbars*/
17 | .CodeMirror .CodeMirror-hscrollbar{ height:14px; right:8px !important;} /*Scrollbar horizontal. These values MUST be the same as height/width of scrollbars*/
18 | .CodeMirror ::-webkit-scrollbar { width: 8px; height:8px;} /* The width of vertical scrollbars and height of horizontal scrollbars*/
19 | .CodeMirror-scrollbar-filler {height:8px !important; width:8px !important; background:none;} /* Corner where scrollbars meet. Width and height MUST be the same as that of scrollbars. Background should be the same as that of the scrollbar track*/
20 | .CodeMirror-gutter-filler{ height:8px !important;background:none;} /* Linenumber area left of horizontal scrollbar. Height MUST be the same as width/height of scrollbars */
21 | .CodeMirror ::-webkit-scrollbar-track {background: none;} /* The track that scrollbars run in */
22 | .CodeMirror ::-webkit-scrollbar-thumb {background: #403c37;} /* The scrollbar thumb */
23 |
24 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background:#2b2a27; border-right:1px solid #403c37;}/*Left vertical bar with line count*/
25 |
26 | /*Syntax elements & action*/
27 | .CodeMirror .cm-atom{color:#BCD42A;} /*Atribbute value ex. #f00 in color:#f00;*/
28 | .CodeMirror .cm-number{color:#BCD42A;} /*Numbers*/
29 | .CodeMirror .cm-property{color:#FF5D38;} /*Property ex. color in color:#f00;*/
30 | .CodeMirror .cm-comment{color:#7A7267;} /*Comment*/
31 | .CodeMirror .cm-string{color:#BCD42A;} /*String elements ex. "description" in name="description" - including quotation*/
32 | .CodeMirror .cm-qualifier{color:#FF5D38; opacity: 0.75;} /*Final qualifier like css class ex.: .cm-qualifier*/
33 | .CodeMirror .cm-tag{color:#26A6A6;} /*Tags ex. ul or */
34 | .CodeMirror .cm-attribute{color:#FF5D38;} /*Attribute ex. rel, href, name*/
35 | .CodeMirror .cm-keyword {color:#26A6A6;} /*Element call ex. array, class, public function, if, elseif, !important*/
36 | .CodeMirror-selected{background:rgba(255,255,255,0.1) !important;} /*Selected lines - may need !important*/
37 | .CodeMirror-gutter-elt{background:#2b2a27 !important;}
38 | .CodeMirror-activeline-background{background:rgba(255,255,255,0.1) !important;} /*Active line - may need !important*/
39 | .CodeMirror .CodeMirror-matchingtag{background:none; text-decoration: none; border-bottom: 1px solid #FF5D38;} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/
40 | div.CodeMirror span.CodeMirror-matchingbracket{background:none; text-decoration: none; border-bottom: 1px solid #FF5D38;} /*Matching brackets, open/close*/
41 |
42 |
43 | /*Status bar - bottom*/
44 | #status-bar{background:#2b2a27; color:#ede0ce; border-top:1px solid #403c37;}/*Bottom status bar*/
45 |
46 | /*Modal windows like context-menu, quick-view or hint container*/
47 | /*#context-menu-bar .dropdown-menu{background:#565656} /*Dropdown menu, available under right-click - may need !important*/
48 | /*#context-menu-bar .dropdown-menu a{color:rgb(247, 239, 229);} /*Single option, treat it like ex. background*/
49 | /*#context-menu-bar .dropdown-menu a:hover{background:#403c37;}
50 |
51 | /*#codehint-menu-bar .dropdown-menu{background:#565656;} /*Code hint menu, dropdown visible when writing code.*/
52 | /*#codehint-menu-bar .dropdown-menu li a{color:#ede0ce;} /*Code hint menu option, dropdown visible when writing code. Treat like */
53 | /*#codehint-menu-bar .dropdown-menu li a:hover {background:#403c37;} /*Code hint menu option, dropdown visible when writing code. Treat like */
54 |
55 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/
56 |
57 | .cm-s-peacock.CodeMirror .inline-widget{
58 | background: #403c37;
59 | color: #ccc;
60 | }
61 | .cm-s-peacock.CodeMirror .inline-widget h1,
62 | .cm-s-peacock.CodeMirror .inline-widget h2,
63 | .cm-s-peacock.CodeMirror .inline-widget h3{
64 | color: #ccc;
65 | }
66 | .cm-s-peacock.CodeMirror .inline-widget p,
67 | .cm-s-peacock.CodeMirror .inline-widget dt,
68 | .cm-s-peacock.CodeMirror .inline-widget li,
69 | .cm-s-peacock.CodeMirror .inline-widget code{
70 | color: #fff;
71 | }
72 |
73 | .CodeMirror pre {padding: 0 15px 0 5px;}
74 |
--------------------------------------------------------------------------------
/theme/dracula.css:
--------------------------------------------------------------------------------
1 | .cm-s-dracula.CodeMirror { background: #282a36 !important; color: #EEE; }
2 |
3 | .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #FFF !important; }
4 | .CodeMirror-selected { background: #3a3d4e !important; color: #eee !important; }
5 | .CodeMirror-lines{ line-height: 14px !important; }
6 |
7 | .cm-s-dracula .cm-keyword { color: #8be9fd !important; font-style: italic; }
8 |
9 | .cm-s-dracula .cm-js-atom { color: #FFF5B4 !important; }
10 | .cm-s-dracula .cm-css-atom { color: #bd93f9 !important; }
11 |
12 | .cm-s-dracula .cm-js-number {color: #bd93f9 !important; }
13 | .cm-s-dracula .cm-css-number {color: #bd93f9 !important; }
14 |
15 | .cm-s-dracula .cm-js-def { color: #8be9fd !important; }
16 | .cm-s-dracula .cm-css-def { color: #bd93f9 !important; }
17 |
18 | .cm-s-dracula .cm-js-variable { color: #ccc !important; }
19 | .cm-s-dracula .cm-js-variable-2 { color: #ccc !important; }
20 | .cm-s-dracula .cm-css-variable { color: #50fa7b !important; }
21 | .cm-s-dracula .cm-css-variable-2 { color: #50fa7b !important; }
22 |
23 | .cm-s-dracula .cm-js-property { color: #50fa7b !important; }
24 | .cm-s-dracula .cm-css-property { color: #6AEDFF !important;}
25 |
26 | .cm-s-dracula .cm-js-operator { color: #bd93f9 !important;}
27 | .cm-s-dracula .cm-css-operator { color: #ccc !important; }
28 |
29 | .cm-s-dracula .cm-js-comment { color: #6272a4 !important; font-style: normal; }
30 | .cm-s-dracula .cm-css-comment { color: #6272a4 !important; font-style: italic; }
31 | .cm-s-dracula .cm-xml-comment { color: #6272a4 !important; font-style: normal !important; }
32 |
33 | .cm-s-dracula .cm-js-string { color: #f1fa8c !important; }
34 | .cm-s-dracula .cm-js-string-2 { color: #f1fa8c !important; }
35 | .cm-s-dracula .cm-css-string { color: #f1fa8c !important;}
36 | .cm-s-dracula .cm-css-string-2 { color: #8be9fd !important; }
37 |
38 | .cm-s-dracula .cm-js-meta { color: #8be9fd !important; }
39 | .cm-s-dracula .cm-css-meta { color: #6AEDFF !important;}
40 |
41 | .cm-s-dracula .cm-qualifier { color: #50fa7b !important; }
42 |
43 | .cm-s-dracula .cm-js-tag { color: #8be9fd !important; }
44 | .cm-s-dracula .cm-css-tag { color: #ff79c6 !important; }
45 | .cm-s-dracula .cm-xml-tag { color: #ff79c6 !important; }
46 |
47 | .cm-s-dracula .cm-js-attribute { color: #50fa7b !important; }
48 | .cm-s-dracula .cm-xml-attribute { color: #ff79c6 !important; }
49 |
50 | div.CodeMirror span.CodeMirror-matchingbracket { border: 1px solid #15CA1A !important; border-radius: 4px; color: #ccc !important;}
51 |
52 | div.CodeMirror span.cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext { background-color: #3a3d4e !important;}
53 |
54 | /* */
55 | .cm-execution-line { background-color: rgba(137,245,162,.2) !important; outline: 1px solid #181818 !important;}
56 | .cm-js-hr { color: #AEAEAE !important; }
57 | .cm-js-link { color: #8be9fd !important; }
58 | .CodeMirror-linenumber { border-right: none !important;}
59 | .cm-xml-error { color: #bf4c4c !important; }
60 | .cm-xml-string { color: #f1fa8c !important; }
61 | .cm-xml-link { color: #f1fa8c !important; }
62 | .cm-comment { color: #6272a4 !important; font-style: normal !important; }
63 | .cm-error { color: #bf4c4c !important; }
64 | .cm-string { color: #f1fa8c !important; }
65 | .cm-tag { color: #ff79c6 !important; }
66 | .cm-attribute { color: #50fa7b !important; }
67 | .cm-link { color: #f1fa8c !important; }
68 |
69 |
70 | /*--GLOBAL EDITOR STYLES--*/
71 | .cm-breakpoint .CodeMirror-gutter-elt { color: #000 !important; font-weight: 700 !important;}
72 | .CodeMirror-cursor { border-left: 1px solid #FFF !important; }
73 | .cm-error { background: #9D1E15 !important; border-radius: 2px !important; color: #eee !important;}
74 | .CodeMirror-gutter-elt { color: #888 !important;}
75 | .CodeMirror-gutters {background: #282828 !important; border-right: 2px solid #2b2b2b !important; }
76 | .CodeMirror-selected { background: #3a3d4e !important; color: #eee !important; }
77 | .CodeMirror-nonmatchingbracket { border: 1px solid #db0404 !important; border-radius: 4px; color: #ccc !important;}
78 | .cm-search-highlight-start:before { border-color: #94a3dd !important;}
79 | .cm-search-highlight-end:before { border-color: #94a3dd !important;}
80 | .cm-search-highlight:before { border-color: #94a3dd !important; padding: 2px !important;}
81 | .cm-line-with-selection .cm-column-with-selection.cm-search-highlight:before { background-color: #94a3dd !important; border-radius: 2px !important;}
82 | span.cm-token-highlight { background-color: transparent !important; padding: 0px !important;}
83 | span.cm-token-highlight:before { border-color: #94a3dd !important; }
84 | .cm-line-with-selection span.cm-column-with-selection { color: #000 !important; background-color: #94a3dd !important; }
85 | .cm-whitespace:before { color: #555 !important;}
86 | .cm-tab:before { border-bottom: 1px solid #555 !important;}
87 |
88 | .cm-highlight {
89 | -webkit-animation: "fadeout-revised" 3s 0s !important;
90 | }
91 |
92 | .cm-highlight *:not(.CodeMirror-linenumber){
93 | color: #000 !important;
94 | }
95 |
96 | .CodeMirror .webkit-html-warning-message{
97 | color: #411f07 !important;
98 | }
99 |
--------------------------------------------------------------------------------
/MenuManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function (require, exports, module) {
9 | "use strict";
10 |
11 | var _ = brackets.getModule("thirdparty/lodash"),
12 | Menus = brackets.getModule("command/Menus"),
13 | CommandManager = brackets.getModule("command/CommandManager"),
14 | PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
15 | prefs = PreferencesManager.getExtensionPrefs("themes"),
16 | SettingsManager = require("SettingsManager");
17 |
18 | var menu = Menus.addMenu("Themes", "editortheme", Menus.BEFORE, Menus.AppMenuBar.HELP_MENU),
19 | SETTINGS_COMMAND_ID = "theme.settings",
20 | allCommands = {},
21 | loadedThemes = {},
22 | currentTheme = prefs.get("theme");
23 |
24 | // Register menu event...
25 | CommandManager.register("Settings", SETTINGS_COMMAND_ID, SettingsManager.openDialog);
26 |
27 |
28 | // Load in the settings menu
29 | function init() {
30 | // Add theme menu item
31 | menu.addMenuItem(SETTINGS_COMMAND_ID);
32 |
33 | prefs.on("change", "theme", function() {
34 | var theme = prefs.get("theme");
35 | if (currentTheme !== theme) {
36 | syncMenuSelection(false, currentTheme);
37 | syncMenuSelection(true, theme);
38 | currentTheme = theme;
39 | }
40 | });
41 | }
42 |
43 |
44 | function registerCommand(theme) {
45 | // Create the command id used by the menu
46 | var THEME_COMMAND_ID = "theme." + theme.name;
47 |
48 | var command = {
49 | id: THEME_COMMAND_ID,
50 | name: theme.name,
51 | fn: function() {
52 | prefs.set("theme", theme.name);
53 | }
54 | };
55 |
56 | // Register menu event...
57 | CommandManager.register(theme.displayName, THEME_COMMAND_ID, command.fn);
58 | return command;
59 | }
60 |
61 |
62 | /**
63 | * Create theme objects and add them to the global themes container.
64 | */
65 | function loadThemes(themes, group) {
66 | var addDivider = !allCommands[group];
67 | var commands = allCommands[group] || (allCommands[group] = {});
68 | var lastEntry = commands[_.keys(commands)[0]];
69 |
70 | currentTheme = prefs.get("theme");
71 |
72 | // Filter out themes that have already been loaded
73 | themes = _.filter(themes, function(theme) {
74 | return !loadedThemes[theme.name];
75 | });
76 |
77 | if (themes.length !== 0 && addDivider) {
78 | menu.addMenuDivider();
79 | }
80 |
81 | /*
82 | * Really wish we could add menu items relative to dividers
83 | * https://github.com/adobe/brackets/issues/8240
84 | */
85 | /*
86 | var divider;
87 | if (themes.length !== 0 && addDivider) {
88 | if (settingsManager.customPath === group) {
89 | divider = menu.addMenuDivider(Menus.AFTER, SETTINGS_COMMAND_ID);
90 | lastEntry = {
91 | id: divider.dividerId
92 | };
93 | }
94 | else {
95 | divider = menu.addMenuDivider();
96 | lastEntry = {
97 | id: divider.dividerId
98 | };
99 | }
100 | }
101 | */
102 |
103 | //
104 | // Iterate through each name in the themes and make them theme objects
105 | //
106 | _.each(themes, function (theme) {
107 | // Create the command id used by the menu
108 | var command = registerCommand(theme);
109 |
110 | if (lastEntry) {
111 | // Add theme menu item
112 | if (theme.name > lastEntry.name || !lastEntry.name) {
113 | menu.addMenuItem(command.id, "", Menus.AFTER, lastEntry.id);
114 | }
115 | else {
116 | menu.addMenuItem(command.id, "", Menus.BEFORE, lastEntry.id);
117 | }
118 | }
119 | else {
120 | // Add theme menu item
121 | menu.addMenuItem(command.id);
122 | }
123 |
124 | commands[theme.name] = command;
125 |
126 | // Keep track of last menu entry to make sure we have the right place for
127 | // the next menu item
128 | lastEntry = command;
129 |
130 | // Make sure to init the menu entry when loading the themes.
131 | if (currentTheme === theme.name) {
132 | syncMenuSelection(true, theme.name);
133 | }
134 | });
135 | }
136 |
137 |
138 | function syncMenuSelection(val, theme) {
139 | var command = CommandManager.get("theme." + theme);
140 | if (command) {
141 | command.setChecked(val);
142 | }
143 | }
144 |
145 |
146 | function clear() {
147 | Menus.removeMenu("editortheme");
148 | loadedThemes = {};
149 | }
150 |
151 |
152 | exports.init = init;
153 | exports.loadThemes = loadThemes;
154 | exports.clear = clear;
155 | });
156 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Brackets-Themes
2 | ===============
3 |
4 | Set CodeMirror and Custom themes in Brackets.
5 |
6 |
7 | Features
8 | ===============
9 |
10 | * Automatic loading of CodeMirror's themes shipped with Brackets.
11 | * Enjoy a variety of custom themes created by other users like yourself! For custom themes 101 primer, please read below.
12 | * Import themes from http://studiostyl.es/.
13 | * Configure font size and font type.
14 | * Disable scrollbars defined in themes. Good if you just want to use the default scrollbars.
15 | * Support for LESS files!
16 | * Auto reload themes upon saving changes made to theme files.
17 | * Configure custom folders to load themes from. This is good if you want to have a folder to hold your custom themes that you want to persist after Brackets/Themes updates. Read this issue if you want to see why sometimes you need this feature.
18 | * Doctype specific styling. See below for an example.
19 | * Auto detection of dark themes so that Brackets can do its dark theme specific styling.
20 |
21 |
22 | Screenshot
23 | ===============
24 | Visual Studio
25 | 
26 |
27 | Monokai Dark Soda
28 | 
29 |
30 | Dracula
31 | 
32 |
33 | Solarized
34 | 
35 |
36 | Delkos
37 | 
38 |
39 | Obsidian
40 | 
41 |
42 | Zamiere
43 | 
44 |
45 |
46 | Doctype styling
47 | ===============
48 |
49 | Themes will add a doctype to the codemirror instance so that you can easily craft css rules to style different document types.
50 |
51 | ``` css
52 | .CodeMirror[doctype=javascript] .cm-property {
53 | color: brown !important;
54 | }
55 |
56 | .CodeMirror[doctype=less] .cm-property,
57 | .CodeMirror[doctype=css] .cm-property {
58 | color: red !important;
59 | }
60 | ```
61 |
62 |
63 | Custom themes 101 guide
64 | ===============
65 |
66 | Custom themes are codemirror's themes, so you will need to be familiar with codemirror's theme guidelines. I provide a set of steps to get you started below, but for more details please navigate to http://codemirror.net/doc/manual.html and search for "theme".
67 |
68 | Codemirror's themes are css files. Important requirement is that the file name has to match your css class definition. E.g. If your theme file is called "default", then your primary css class name needs to be "default". Codemirror's guidelines require that the actual css class name starts with ".cm-s-", so your fully qualified css class name will be ".cm-s-default".
69 |
70 | To get you started, you could use the already existing custom theme "default.css". Let's do the following.
71 |
72 | - Open the custom theme directory. Navigate to your themes manager directory (extensions directory/themes) and you will find custom themes in the "theme" directory. Brackets provides a quick way of accessing your extensions directory... Help > Show Extensions Folder.
73 | - Copy and paste the file "default.css" and rename it to "my-theme.css".
74 | - Open "my-theme.css" and replace "default" with "my-theme", which should end up looking like ".cm-s-my-theme". You will also have a second class ".CodeMirror", just leave it there and the net result will look like ".cm-s-my-theme.CodeMirror".
75 | - In "my-theme.css", change "background-color: #F8F8F8;" to "backgound-color: red;".
76 | - Relaunch brackets, open a JavaScript file and you should see the document with a red background.
77 |
78 | For details on what can be customized, please navigate to http://codemirror.net/doc/manual.html and search for "Customized Styling". As you will notice, the documentation isn't exhautive but they suggest you use "codemirror.css" as a reference. Give it a try, it is pretty straight forward.
79 |
80 | If you have a cool theme you created and want to share, please send it my way and I will gladly add it to the custom themes.
81 |
82 |
83 | FAQ
84 | ===============
85 |
86 | * Why disabling/enabling the scrollbars don't always take effect?
87 | - This due to the fact that CodeMirror builds "fake" scrollbars that only get created when the document is loaded. So toggling the scrollbars with the document open might not take effect as expected. To get around this behavior, reopen the document or restart Brackets.
88 |
89 | * How can I use Themes with Edge Code?
90 | - You can install using this URL `https://github.com/MiguelCastillo/Brackets-Themes/archive/v1.0.4.zip`
91 |
92 |
93 | How to
94 | ===============
95 |
96 | * Set a theme? Find the Themes menu and make a selection.
97 | 
98 |
99 | Credit
100 | ==============
101 | Corey Gwin: Monokai Dark Soda
102 | Kulcsár Kázmér: Zamiere
103 | Diego Alvarez: Aquaman
104 | Felipe K. de Mello: Dracula
105 | Fernando Hurtado: Nando
106 | Jordan Hess: Pixie
107 | John Hamm: Hammsidian
108 | Christopher Kelly (scriptmunkee) for additions to reset.css
109 |
110 | Contact me
111 | ===============
112 |
113 | If you have any issues or want to just drop in a line, you can use my personal email at manchagnu@gmail.com
114 |
115 | License
116 | ===============
117 |
118 | Licensed under MIT
119 |
--------------------------------------------------------------------------------
/theme/aquaman.css:
--------------------------------------------------------------------------------
1 |
2 | /* Made with love by @DiegoAlvarezA */
3 |
4 | #main-toolbar {
5 | background:#3c3f41;
6 | }
7 |
8 | #sidebar #working-set-header ,
9 | #sidebar #open-files-container ul li.selected a ,
10 | #sidebar #open-files-container ul li a:hover,
11 | #sidebar #project-files-header,
12 | #sidebar #project-files-header #project-dropdown-toggle {
13 | color:#f8cb4f;
14 | }
15 |
16 |
17 | #sidebar #open-files-container {
18 | color:#fafafa;
19 | }
20 |
21 |
22 | #sidebar #open-files-container ul li a span.extension,
23 | #sidebar #project-files-container ul li a span.extension {
24 | color:#fce8b1
25 | }
26 |
27 |
28 | #sidebar #project-files-container ul li a {
29 | color:#fafafa;
30 | -webkit-transition:all 0.1s ease-in-out;
31 | }
32 |
33 | #sidebar #project-files-container ul li a.jstree-hovered {
34 | color:#f8cb4f;
35 | -webkit-transform:translateX(5px);
36 | }
37 |
38 |
39 |
40 | .cm-s-aquaman.CodeMirror{
41 | background:#242424;
42 | color:#e0e0e0;
43 | }
44 |
45 | .cm-s-aquaman .CodeMirror-gutters {
46 | background-color: #242424;
47 | border-right:0;
48 | }
49 |
50 | .cm-s-aquaman .CodeMirror-activeline .CodeMirror-gutter-elt {
51 | color: #eeeeee;
52 | }
53 |
54 | .cm-s-aquaman .CodeMirror-hscrollbar{
55 | bottom: 2px;
56 | border-color: #202020;
57 | }
58 |
59 | .cm-s-aquaman .CodeMirror-vscrollbar{
60 | right: 2px;
61 | border-color: #202020;
62 | }
63 |
64 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar {
65 | height: 10px;
66 | }
67 |
68 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar {
69 | width: 10px;
70 | }
71 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-track ,
72 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-track {
73 | background: transparent;
74 | }
75 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb ,
76 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
77 | background: #3c3f41;
78 |
79 | }
80 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover ,
81 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
82 | background: #dd8440;
83 | }
84 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:active ,
85 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:active{
86 | background: #4bd278;
87 | }
88 |
89 | .cm-s-aquaman .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
90 | background-color: transparent;
91 | }
92 |
93 |
94 | .cm-s-aquaman .cm-keyword {color: #f6bf28;}
95 | .cm-s-aquaman .cm-number {color: #f8cb4f;}
96 | .cm-s-aquaman .cm-variable {color: #dd8440;}
97 | .cm-s-aquaman .cm-variable-2 {color: #f8cb4f;}
98 | .cm-s-aquaman .cm-variable-3 {color: #f8cb4f;}
99 | .cm-s-aquaman .cm-property {color: #fcc6a0;}
100 | .cm-s-aquaman .cm-operator {color: #e0e0e0;}
101 | .cm-s-aquaman .cm-atom {color: #f8cb4f;}
102 | .cm-s-aquaman .cm-comment {color: #4b4b4b; /* background:#d6d6d6; */}
103 | .cm-s-aquaman .cm-comment:hover {color: #242424; background:#d6d6d6;}
104 | .cm-s-aquaman .cm-string {color: #f8cb4f;}
105 | .cm-s-aquaman .cm-string-2 {color: #f8cb4f;}
106 | .cm-s-aquaman .cm-def {color: #41cf70;}
107 | .cm-s-aquaman .cm-meta {color: #f8cb4f;}
108 | .cm-s-aquaman .cm-qualifier {color: #41cf70;}
109 | .cm-s-aquaman .cm-tag {color: #dd8440;}
110 | .cm-s-aquaman .cm-builtin {color: #45cf5e;}
111 | .cm-s-aquaman .cm-attribute {color: #45cf5e;}
112 | .cm-s-aquaman .cm-link {color: #dd8440;}
113 |
114 |
115 | .cm-s-aquaman .CodeMirror-selected {
116 | background: #dd8440!important;
117 | opacity:0.2;
118 |
119 | }
120 |
121 |
122 | .cm-s-aquaman .cm-matchhighlight {
123 | background: #dd8440;
124 | color:#2c2c2c!important;
125 | border-radius:0px;
126 |
127 | }
128 |
129 |
130 | .cm-s-aquaman .CodeMirror-matchingtag {
131 | color: #4bd164 !important;
132 | text-decoration:underline;
133 |
134 | }
135 |
136 | .cm-s-aquaman span.CodeMirror-searching {
137 | background: #4bd278;
138 | color:#2c2c2c !important;
139 | border-radius:0px;
140 | }
141 |
142 |
143 | .cm-s-aquaman .cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext {
144 | background: #dd8440 ;
145 | color:#2c2c2c !important;
146 | border-radius:0px;
147 | }
148 |
149 |
150 | .cm-s-aquaman span.CodeMirror-matchingbracket {
151 | color: #f7c741 !important;
152 | background:transparent;
153 | font-weight: bold;
154 | backface-visibility: hidden;
155 |
156 | }
157 |
158 | .cm-s-aquaman span.CodeMirror-nonmatchingbracket {
159 | color: #f7c741 !important;
160 | backface-visibility: hidden;
161 |
162 | }
163 |
164 |
165 | .cm-s-aquaman div.CodeMirror-cursor ,
166 | .cm-s-aquaman div.CodeMirror-secondarycursor {
167 | border-left: 2px solid #ff8833;
168 | z-index:5;
169 | }
170 |
171 |
172 | #status-bar {
173 | border-top:1px solid #484b4d;
174 | background:#3c3f41;
175 |
176 | }
177 |
178 | #status-bar #status-info {
179 | color:#f7c741;
180 |
181 | }
182 |
183 | #status-bar #status-indicators{
184 | background:#3c3f41;
185 |
186 | }
187 |
188 | #status-bar #status-indicators #status-language {
189 | color:#dd8440;
190 | }
191 |
192 |
193 | #status-bar #status-indicators #status-indent {
194 | color:#41cf70;
195 | }
196 |
197 | #status-indicators #status-overwrite {
198 | color: #ddd;
199 | }
200 |
201 | #context-menu-bar .dropdown-menu a{color:#3c3f41}
202 | #context-menu-bar .dropdown-menu a:hover{background:#f8cb4f}
203 |
204 |
205 | .inline-widget .CodeMirror-gutter {
206 | background: #242424 !important;
207 |
208 | }
209 |
210 | .inline-editor-header{
211 | box-shadow: inset 0 0 5px #1f1f1f;
212 | background:#242424;
213 | height:30px;
214 | width:100%;
215 | }
216 |
217 |
218 | .inline-editor-header a.filename span.line-number{
219 | color:#e0e0e0 !important;
220 | }
221 |
222 |
223 | .inline-editor-header a.filename {
224 | color:#f8cb4f !important;
225 | }
226 |
227 |
228 | .inline-widget .color-editor ul.swatches li span.value{color:#525252}
229 |
230 |
231 |
232 |
--------------------------------------------------------------------------------
/theme/Earth.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Theme Earth Copyright (c) 2014 "Denisov21".
3 | * v 2.5.0
4 | * Licensed under MIT
5 | *
6 | */
7 |
8 | /*Main area*/
9 | .CodeMirror, .CodeMirror .CodeMirror-scroll {background: #2b2a27; color: #34a84f;}
10 |
11 | /************** Cursor e OVR cursor **************/
12 | .CodeMirror-cursor {border-left: 1px solid #ede0ce;}
13 | .CodeMirror .CodeMirror-overwrite .CodeMirror-cursor {border-left: none; border-bottom: 2px solid #ede0ce;}
14 |
15 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background:#2b2a27; border-right:1px solid #000;}/*Left vertical bar with line count*/
16 |
17 | /*Syntax elements & action*/
18 | .cm-atom, .cm-link{color:#BCD42A;} /*Attribute value ex. #f00 in color:#f00; Link;*/
19 | .cm-def{color: inherit;} /*variable definition*/
20 | .cm-number{color:#BCD42A;} /*Numbers*/
21 | .cm-variable{color: inherit;} /*Variable name ex. class Variable_name */
22 | .cm-variable-2{color: #FF5D38;} /*Variable declaration ex. $variable */
23 | .cm-variable-3{color: #5C5C5C;}
24 | .cm-property{color:#FF5D38;} /*Property ex. color in color:#f00;*/
25 | .cm-operator{color: inherit;} /*Operators ex. dots (:) between property and atom value */
26 | .cm-comment{color:#c18c23;} /*Comment*/
27 | .cm-string{color:#BCD42A;} /*String elements ex. "description" in name="description" - including quotation*/
28 | .cm-meta{color: #00ffce; } /*Meta elements like ex.: */
29 | .cm-qualifier{color:#BCD42A; /*opacity 0.75;*/ font-weight: bolder;} /*Final qualifier like css class ex.: .cm-qualifier*/
30 | .cm-builtin{color:#00a8c6; font-weight: bolder;} /*Final qualifier like css id ex.: #context-menu-bar*/
31 | .cm-tag{color:#26A6A6;} /*Tags ex. ul or */
32 | .cm-attribute{color:#FF5D38;} /*Attribute ex. rel, href, name*/
33 | .cm-keyword {color:#26A6A6;} /*Element call ex. array, class, public function, if, elseif, !important*/
34 | .cm-matchingtag{background-color:#2b2a27 ;}
35 | .cm-error{ font-style: italic; border-bottom: 2px dotted #ff3292; }
36 | .cm-header{color: #BCD42A; font-weight: bolder;} /*Element in md file ex. # title*/
37 | .CodeMirror-selected{background-color: rgb(224,240,250); background-color: rgba(224, 240, 250, 0.2) !important;} /*Selected lines - may need !important*/
38 | .CodeMirror-activeline-background{background:rgb(255,255,255); background:rgba(255, 255, 255, 0.1) !important; border-bottom: 1px solid #ed900e; border-top: 1px solid #ed900e;} /*Active line - may need !important*/
39 | .CodeMirror-matchingtag{background:none; text-decoration:underline; font-weight: bold; color: #38b2ff !important;} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/
40 | .CodeMirror-matchingbracket{background-color:#f00; font-weight: bold;} /*Matching brackets, open/close*/
41 | .cm-attribute{color: #FF5D38; } /*class in file md*/
42 | .CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {color: #f00; background-color: transparent !important;}
43 |
44 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/
45 |
46 | .CodeMirror .inline-widget{background: #6a6560; color: #ccc;}
47 |
48 | /********* Quick Documentation - Ctrl + K - CSS*********/
49 | .inline-widget .css-prop-defn { color: white !important; }
50 | .inline-widget .css-prop-defn h1 { color: #FF5D38 !important; }
51 | .inline-widget .css-prop-defn dt { color: #48adff !important; }
52 | .inline-widget .css-prop-defn b { color: #37ad3e !important; }
53 | .inline-widget .css-prop-defn code { color: #ea7e06 !important; }
54 | .inline-widget .css-prop-defn .divider-holder.no-focus .divider { border-color: #5C5C5C; } /* Stripe in the middle */
55 |
56 | .CodeMirror .CodeMirror-linenumber {padding-right: 5px; padding-left: 1px; color: #00A8C6;}
57 |
58 | /************** Layouts die mehrere bereiche abdecken **************/
59 | /******* all scrollbars -
60 | * for individual design for the scrollbars in difrent areas use fowllowing id's and classes:
61 | * #caniuse(extension canIUse), .CodeMirror(working area), #sidebar, #problems-panel(code lint menu),
62 | * #codehint-menu-bar, #search-files-results *******/
63 |
64 | /* Scrollbar gutter for the sidebar*/
65 | #sidebar ::-webkit-scrollbar-track { background-color: transparent; }
66 |
67 | /* Schrollbar ::-webkit-scrollbar" in the main area */
68 | ::-webkit-scrollbar {width: 11px !important; height: 11px !important;}
69 |
70 | .CodeMirror-scrollbar-filler {height: 11px !important;width: 11px !important; background: #5C5C5C;}
71 |
72 |
73 | .CodeMirror-vscrollbar{bottom: 11px !important; top: 11px ;border-right: thin solid #999;}
74 |
75 | .CodeMirror .CodeMirror-hscrollbar{ height: 11px; right: 11px !important;}
76 |
77 | /* Scrollbar gutter - Scrollbar rinne */
78 | ::-webkit-scrollbar-track {background-color: #5C5C5C;}
79 |
80 | /* Scroll object - "background-color" dont work use border to change color*/
81 | ::-webkit-scrollbar-thumb {border: 6px solid #2b2a27; border-radius: 2px;}
82 |
83 | ::-webkit-scrollbar-thumb:hover { border: 6px solid #1C2020; }
84 | ::-webkit-scrollbar-thumb:active { border: 6px solid #101010; }
85 |
86 | /* the "x" to close, shout work for all avalibal classes */
87 | .close {color: #2b2a27 !important; opacity: 0.5; }
88 | .close:hover { opacity: 1; }
89 |
90 | /*************************************** Main area***************************************/
91 |
92 |
93 | /* Show Whitespace (https://github.com/DennisKehrig/brackets-show-whitespace)*/
94 | .CodeMirror .cm-dk-whitespace-space::before,
95 | .CodeMirror .cm-dk-whitespace-tab::before,
96 | .CodeMirror .cm-dk-whitespace-leading-space::before,
97 | .CodeMirror .cm-dk-whitespace-leading-tab::before,
98 | .CodeMirror .cm-dk-whitespace-trailing-space::before,
99 | .CodeMirror .cm-dk-whitespace-trailing-tab::before {
100 | background-color: #00a8c6 !important;
101 | }
102 |
103 | /* Code Folding (https://github.com/thehogfather/brackets-code-folding) and Brackets 1.3 (Code Folding)*/
104 | .CodeMirror-foldgutter,
105 | .CodeMirror-foldgutter-blank,
106 | .CodeMirror-foldgutter-folded,
107 | .CodeMirror-foldgutter-open,
108 |
109 | .CodeMirror-foldgutter-folded:after{
110 | color: #00a8c6;
111 | }
112 |
113 | .CodeMirror-foldgutter-open:after {/*content: "\25bd";*/ color: #f00;}
114 | .CodeMirror-foldmarker {background-color: #00A8C6; border-color: #5C5C5C; color: #ede0ce; padding: 0 10px;}
115 |
116 |
117 | /* New Class for Brackets 0.43 (searching)*/
118 |
119 | .CodeMirror-searching {background-color: #38b2ff; border-bottom: 2px solid #FF5D38; font-weight: bolder;}
120 | .searching-current-match {background-color: #ede0ce;}
121 | .quick-view-highlight{background-color: rgb(56, 178, 255); background-color: rgba(56, 178, 255, 0.26);border-bottom: 1px solid #FF5D38; }
122 |
123 |
--------------------------------------------------------------------------------
/mirror-style/template.less:
--------------------------------------------------------------------------------
1 | .CodeMirror {
2 | .documentBackground();
3 | .documentFontColor();
4 | background: @backgroundColor;
5 | color: @fontColor;
6 | }
7 |
8 | .CodeMirror-gutters {
9 | background-color: @guttersBackground;
10 | border-right: 0;
11 | }
12 |
13 | .CodeMirror-focused .CodeMirror-linenumber,
14 | .CodeMirror-linenumber {
15 | color: @linenumberColor;
16 | border-right: 0;
17 | }
18 |
19 | .cm-keyword {
20 | color: @keywordColor;
21 | }
22 |
23 | .cm-number {
24 | color: @numberColor;
25 | }
26 |
27 | .cm-variable {
28 | color: @variableColor;
29 | }
30 |
31 | .cm-variable-2 {
32 | color: @variable2Color;
33 | }
34 |
35 | .cm-variable-3 {
36 | color: @variable3Color;
37 | }
38 |
39 | .cm-property {
40 | color: @propertyColor;
41 | }
42 |
43 | .cm-operator {
44 | color: @operatorColor;
45 | }
46 |
47 | .cm-atom {
48 | color: @atomColor;
49 | }
50 |
51 | .cm-comment {
52 | color: @commentColor;
53 | background: @commentBackground;
54 | }
55 |
56 | .cm-string {
57 | color: @stringColor;
58 | }
59 |
60 | .cm-string-2 {
61 | color: @string2Color;
62 | }
63 |
64 | .cm-def {
65 | color: @definitionColor;
66 | }
67 |
68 | .cm-meta {
69 | color: @metaColor;
70 | }
71 |
72 | .cm-qualifier {
73 | color: @qualifierColor;
74 | }
75 |
76 | .cm-tag {
77 | color: @tagColor;
78 | }
79 |
80 | .cm-builtin {
81 | color: @builtingColor;
82 | }
83 |
84 | .cm-attribute {
85 | color: @attributeColor;
86 | }
87 |
88 | .cm-link {
89 | color: @linkColor;
90 | }
91 |
92 |
93 | .doctype-css {
94 | //@cssCommentColor: <%= CSSComment.color %>;
95 | //@cssCommentBackground: <%= CSSComment.background %>;
96 | //@cssKeywordColor: <%= CSSKeyword.color %>;
97 | //@cssPropertyColor: <%= CSSPropertyName.color %>;
98 | //@cssAtomColor: <%= CSSPropertyValue.color %>;
99 | //@cssQualifierColor: <%= CSSSelector.color %>;
100 | //@cssStringColor: <%= CSSStringValue.color %>;
101 | //@cssNumberColor: <%= CSSStringValue.color %>;
102 | //@cssMetaColor: <%= CSSSelector.color %>;
103 | //@cssTagColor: <%= CSSSelector.color %>;
104 |
105 |
106 | .cm-keyword {
107 | color: @cssKeywordColor;
108 | }
109 |
110 | .cm-number {
111 | color: @cssNumberColor;
112 | }
113 |
114 | .cm-property {
115 | color: @cssPropertyColor;
116 | }
117 |
118 | .cm-atom {
119 | color: @cssAtomColor;
120 | }
121 |
122 | .cm-comment {
123 | color: @cssCommentColor;
124 | background: @cssCommentBackground;
125 | }
126 |
127 | .cm-string {
128 | color: @cssStringColor;
129 | }
130 |
131 | .cm-meta {
132 | color: @cssMetaColor;
133 | }
134 |
135 | .cm-qualifier {
136 | color: @cssQualifierColor;
137 | }
138 |
139 | .cm-tag {
140 | color: @cssTagColor;
141 | }
142 | }
143 |
144 | .doctype-less:extend(.doctype-css all) {
145 | }
146 |
147 | .doctype-html {
148 | // HTML definitions
149 | //
150 | //@htmlAttributeColor: <%= HTMLAttribute.color %>;
151 | //@htmlAttributeValueColor: <%= HTMLAttributeValue.color %>;
152 | //@htmlCommentColor: <%= HTMLComment.color %>;
153 | //@htmlCommentBackground: <%= HTMLComment.background %>;
154 | //@htmlElementNameColor: <%= HTMLElementName.color %>;
155 | //@htmlEntityColor: <%= HTMLEntity.color %>;
156 | //@htmlOperatorColor: <%= HTMLOperator.color %>;
157 | //@htmlOperatorBackground: <%= HTMLOperator.background %>;
158 | //@htmlTagDelimiterColor: <%= HTMLTagDelimeter.color %>;
159 |
160 | .cm-tag {
161 | color: @htmlElementNameColor;
162 | }
163 |
164 | .cm-comment {
165 | color: @htmlCommentColor;
166 | background-color: @htmlCommentBackground;
167 | }
168 |
169 | .cm-bracket {
170 | color: @htmlTagDelimiterColor;
171 | }
172 |
173 | .cm-string {
174 | color: @htmlAttributeValueColor;
175 | }
176 |
177 | .cm-attribute {
178 | color: @htmlAttributeColor;
179 | }
180 | }
181 |
182 | .doctype-htmlmixed:extend(.doctype-html all) {
183 | }
184 |
185 | .CodeMirror-selected {
186 | background: @selectedTextBackground !important;
187 | opacity: @selectedTextOpacity;
188 | }
189 |
190 | .cm-matchhighlight {
191 | background: @matchHightlightBackground;
192 | color: @matchHightlightColor !important;
193 | border-radius: 0px;
194 | }
195 |
196 | .CodeMirror-matchingtag {
197 | .documentBackground();
198 | background-color: darken(@backgroundColor, 10%) !important;
199 | }
200 |
201 | .CodeMirror-searching {
202 | background: #4bd278;
203 | color: #2c2c2c !important;
204 | border-radius: 0px;
205 | }
206 |
207 | .cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext {
208 | background: #dd8440;
209 | color: #2c2c2c !important;
210 | border-radius: 0px;
211 | }
212 |
213 | .CodeMirror-matchingbracket {
214 | color: @matchingBracketColor !important;
215 | background: transparent;
216 | font-weight: bold;
217 | backface-visibility: hidden;
218 | }
219 |
220 | .CodeMirror-nonmatchingbracket {
221 | color: @nonmatchingBracketColor !important;
222 | backface-visibility: hidden;
223 | }
224 |
225 | .CodeMirror-cursor,
226 | .CodeMirror-secondarycursor {
227 | .documentBackground();
228 | border-left: 1px solid contrast(@backgroundColor) !important;
229 | }
230 |
231 | #status-bar {
232 | .documentBackground();
233 | .documentFontColor();
234 |
235 | background: @backgroundColor;
236 |
237 | #status-info {
238 | color: lighten(@fontColor, 10%);
239 | }
240 |
241 | #status-indicators {
242 | background: @backgroundColor;
243 | color: @fontColor;
244 | }
245 |
246 | #status-overwrite {
247 | background: @backgroundColor;
248 | color: @fontColor;
249 | }
250 |
251 | #status-language {
252 | }
253 |
254 | #status-indent {
255 | }
256 | }
257 |
258 | #context-menu-bar {
259 | .dropdown-menu a {
260 | color: #3c3f41
261 | }
262 |
263 | .dropdown-menu a:hover {
264 | background: #f8cb4f
265 | }
266 | }
267 |
268 | .inline-widget .CodeMirror-gutter {
269 | background: #242424 !important;
270 |
271 | .color-editor ul.swatches li span.value {
272 | color: #525252
273 | }
274 | }
275 |
276 | .inline-editor-header {
277 | box-shadow: inset 0 0 5px #1f1f1f;
278 | background: #242424;
279 | height: 30px;
280 | width: 100%;
281 |
282 | a.filename span.line-number {
283 | color: #e0e0e0 !important;
284 | }
285 |
286 | a.filename {
287 | color: #f8cb4f !important;
288 | }
289 | }
290 |
--------------------------------------------------------------------------------
/views/settings.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo.
3 | *
4 | * Licensed under MIT
5 | */
6 |
7 |
8 | define(function(require, exports, module) {
9 | "use strict";
10 |
11 | var _ = brackets.getModule("thirdparty/lodash");
12 | var Dialogs = brackets.getModule("widgets/Dialogs"),
13 | DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"),
14 | FileSystem = brackets.getModule("filesystem/FileSystem"),
15 | StringUtils = brackets.getModule("utils/StringUtils"),
16 | Strings = brackets.getModule("strings"),
17 | ko = require("lib/knockout-3.0.0"),
18 | koFactory = require("lib/ko.factory"),
19 | importer = require("mirror-style/main"),
20 | packageInfo = JSON.parse(require("text!package.json")),
21 | tmpl = {
22 | "main": require("text!views/settings.html"),
23 | "paths": require("text!views/paths.html"),
24 | "import": require("text!views/import.html"),
25 | "schedule": require("text!views/schedule.html"),
26 | "about": require("text!views/about.html")
27 | };
28 |
29 | // Make sure koFactory get a reference to ko...
30 | koFactory.ko = ko;
31 | koFactory.$ = $;
32 |
33 | // Setup all the templates so that we can easily render them with Mustache
34 | var $settings = $(tmpl.main).addClass("themeSettings");
35 | $("#pathsSettings", $settings).html(tmpl.paths);
36 | $("#importSettings", $settings).html(tmpl.import);
37 | $("#scheduleSettings", $settings).html(tmpl.schedule);
38 | $("#aboutSettings", $settings).html(tmpl.about);
39 |
40 |
41 | function openDialog(path, openFile, title) {
42 | var result = $.Deferred();
43 | title = openFile ? Strings.OPEN_FILE : Strings.CHOOSE_FOLDER;
44 |
45 | FileSystem.showOpenDialog(false, !openFile, title, path, null, function (err, files) {
46 | var errorMessage;
47 |
48 | if (!err) {
49 | // If length == 0, user canceled the dialog; length should never be > 1
50 | if (files.length > 0) {
51 | result.resolve(files[0]);
52 | }
53 | else {
54 | result.reject("User canceled");
55 | }
56 | }
57 | else {
58 | errorMessage = openFile ? "Error opening file " + path : "Error opening directory " + path;
59 | result.reject(errorMessage);
60 | Dialogs.showModalDialog(
61 | DefaultDialogs.DIALOG_ID_ERROR,
62 | errorMessage,
63 | StringUtils.format(Strings.OPEN_DIALOG_ERROR, err)
64 | );
65 | }
66 | });
67 |
68 | return result.promise();
69 | }
70 |
71 |
72 | function getViewModel(settingsManager) {
73 | function defaults() {
74 | var settings = settingsManager.getAll();
75 | return $.extend(true, {}, {settings: settings, package: packageInfo, imported: []});
76 | }
77 |
78 | var viewModel = koFactory.serialize(defaults());
79 |
80 | viewModel.reset = function() {
81 | settingsManager.reset();
82 | koFactory.serialize(defaults(), viewModel);
83 | };
84 |
85 | viewModel.addPath = function() {
86 | openDialog("").done(function(newpath) {
87 | viewModel.settings.paths.push(koFactory({path:newpath}));
88 | });
89 | };
90 |
91 | viewModel.removePath = function() {
92 | viewModel.settings.paths.remove(this);
93 | };
94 |
95 | viewModel.editPath = function() {
96 | openDialog(this.path()).done(function(newpath) {
97 | this.path(newpath);
98 | }.bind(this));
99 | };
100 |
101 | viewModel.importStudioStyle = function() {
102 | // This is really important. If the default folder to place custom themes
103 | // does not exist, then we need to create one so that we have a place to
104 | // put these default themes to prevent them from being deleted when updates
105 | // take place.
106 | var directory = FileSystem.getDirectoryForPath(settingsManager.customPath);
107 | directory.exists(function(err, exists) {
108 | if (!err && !exists) {
109 | directory.create();
110 | }
111 | });
112 |
113 | function importTheme(themeFile) {
114 | return importer.importFile(themeFile).fail(function(err) {
115 | viewModel.imported.push({fileName: themeFile, err: !!err});
116 | console.log("Failure importing theme", themeFile, "- " + err);
117 | });
118 | }
119 |
120 | function saveTheme(theme) {
121 | var fileName = settingsManager.customPath + "/" + theme.fileName;
122 | var file = FileSystem.getFileForPath (fileName);
123 |
124 | file.write(theme.content, {}, function(err) {
125 | viewModel.imported.push({fileName: theme.fileName, err: !!err});
126 |
127 | if (err) {
128 | console.log("Failure importing theme", theme.fileName, "- " + err);
129 | }
130 | });
131 | }
132 |
133 | openDialog("", true)
134 | .then(importTheme)
135 | .then(saveTheme);
136 | };
137 |
138 | return viewModel;
139 | }
140 |
141 |
142 | function open(settings) {
143 | var viewModel = getViewModel(settings);
144 | var $template = $settings.clone();
145 |
146 | $template.find("[data-toggle=tab].default").tab("show");
147 | koFactory.bind($template, viewModel);
148 |
149 | Dialogs.showModalDialogUsingTemplate($template).done(function( id ) {
150 | if (id === "save") {
151 | var model = koFactory.deserialize(viewModel);
152 | var newSettings = model.settings;
153 | var settingsValues = settings.getAll();
154 |
155 | var imported = _.filter(model.imported, function(item) {
156 | return !item.err;
157 | });
158 |
159 | for (var i in newSettings) {
160 | if (settingsValues.hasOwnProperty(i)) {
161 | settings.setValue(i, newSettings[i]);
162 | }
163 | }
164 |
165 | if (imported.length) {
166 | $(settings).triggerHandler("imported", [imported]);
167 | }
168 | }
169 | });
170 | }
171 |
172 |
173 | exports.open = open;
174 | });
175 |
176 |
--------------------------------------------------------------------------------
/theme/pixie.css:
--------------------------------------------------------------------------------
1 | .panel {
2 | background:#2b2b2b;
3 | }
4 |
5 | #main-toolbar,
6 | #status-bar,
7 | #status-indicators {
8 | background:#242424;
9 | color:#ccc;
10 | }
11 |
12 | /*#sidebar {
13 | position: inherit !important;
14 | }
15 | #working-set-header {
16 | display: none !important;
17 | }
18 | #open-files-container {
19 | width: 100% !important;
20 | position: absolute !important;
21 | z-index: 10 !important;
22 | max-height: auto !important;
23 | height: auto !important;
24 | overflow: hidden !important;
25 | }
26 | #open-files-container li {
27 | float: left;
28 | }*/
29 |
30 | #status-info {
31 | color:#ccc;
32 | }
33 |
34 | #open-files-container,
35 | #working-set-header {
36 | color:#aaa;
37 | background:#111;
38 | }
39 | #project-files-header {
40 | color:#aaa;
41 | background:#222;
42 | }
43 | .recent-folder,
44 | #open-folder-link {
45 | color:#ddd;
46 | }
47 | #project-dropdown.dropdown-menu a.selected {
48 | background: #0081c2;
49 | }
50 | .dropdown-menu {
51 | background: #333;
52 | color: #aaa;
53 | }
54 | .dropdown-menu .divider {
55 | background: #222;
56 | border-bottom: 1px solid #444;
57 | }
58 | .sidebar-selection {
59 | background: #1a1a1a;
60 | }
61 | .sidebar-selection-triangle {
62 | display: none !important;
63 | }
64 |
65 | .jstree-brackets li.jstree-closed > a,
66 | .jstree-brackets li.jstree-open > a {
67 | color:#ccc;
68 | }
69 |
70 | #open-files-container .extension,
71 | .jstree-brackets li .extension {
72 | color:#aaa;
73 | }
74 |
75 | .cm-s-pixie.CodeMirror {
76 | background-color:#202020;
77 | color:#fff;
78 | }
79 |
80 | .cm-s-pixie.CodeMirror div.CodeMirror-cursor {
81 | border-left:1px solid #f8f8f0;
82 | z-index:3;
83 | }
84 |
85 | .cm-s-pixie .CodeMirror-selected {
86 | background:#3d3d3d;
87 | opacity:.5;
88 | }
89 |
90 | .cm-s-pixie .CodeMirror-activeline .CodeMirror-gutter-elt {
91 | color: #eeeeee;
92 | }
93 |
94 | .cm-s-pixie .cm-keyword {color:#CC7833;}
95 | .cm-s-pixie .cm-atom {color:#A5C261;}
96 | .cm-s-pixie .cm-number {color:#A5C261;}
97 | .cm-s-pixie .cm-def {color:#A0BD2D;}
98 | .cm-s-pixie .cm-variable {color:#FFCC33;}
99 | .cm-s-pixie .cm-variable-2 {color:#DA4939;}
100 | .cm-s-pixie .cm-property {color:#DAD6CD;}
101 | .cm-s-pixie .cm-operator {color:#34A2D9;}
102 | .cm-s-pixie .cm-comment {color:#BC9458;}
103 | .cm-s-pixie .cm-string {color:#A0BD2D;}
104 | .cm-s-pixie .cm-string-2 {color:#A5C261;}
105 | .cm-s-pixie .cm-meta {color:#CC7833;}
106 | .cm-s-pixie .cm-qualifier {color:#FFCC33;}
107 | .cm-s-pixie .cm-bracket {color:#FF3333;}
108 | .cm-s-pixie .cm-tag {color:#E8BF6A;}
109 | .cm-s-pixie .cm-attribute {color:#FFCC33;}
110 | .cm-s-pixie .cm-builtin {color:#CC7833;}
111 |
112 | .cm-s-pixie .cm-matchhighlight {
113 | background:#00CCFF;
114 | box-shadow:0 0 5px #00CCFF;
115 | color:#000;
116 | border-radius:2px;
117 | }
118 |
119 | .cm-s-pixie.CodeMirror span.CodeMirror-nonmatchingbracket {
120 | color:#FF3333;
121 | text-shadow: none;
122 | border-bottom: 1px solid #FF3333;
123 | }
124 |
125 | .cm-s-pixie.CodeMirror span.CodeMirror-matchingbracket {
126 | color:#DAD6CD;
127 | text-shadow: none;
128 | border-bottom: 1px solid #DAD6CD;
129 | }
130 |
131 | .cm-s-pixie.CodeMirror span.cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext {
132 | background-color:#FFCC33;
133 | color:#000;
134 | border:0;
135 | box-shadow:0 0 5px #FFCC33;
136 | border-radius:2px;
137 | }
138 |
139 | .cm-s-pixie.CodeMirror span.CodeMirror-matchingtag {
140 | color: #E8BF6A !important;
141 | background-color: #222222 !important;
142 | }
143 |
144 | .cm-s-pixie.CodeMirror span.CodeMirror-searching {
145 | background-color:#00CCFF;
146 | box-shadow:0 0 5px #00CCFF;
147 | color:#000;
148 | border-radius:2px;
149 | }
150 |
151 | .cm-s-pixie .CodeMirror-activeline-background {
152 | background:hsla(0,0%,0%,0.5)!important;
153 | margin:-1px -10px;
154 | }
155 |
156 | .cm-s-pixie div.CodeMirror-gutter {
157 | color:#ccc;
158 | }
159 |
160 | .cm-s-pixie div.CodeMirror-gutters {
161 | background-color:#333435;
162 | box-shadow:0 0 10px hsla(0,0%,0%,.8);
163 | padding:0 15px 20px 10px;
164 | border-right:0;
165 | }
166 |
167 | .cm-s-pixie span.CodeMirror-widget {
168 | margin:-3px 0px;
169 | display:inline-block;
170 | }
171 | .cm-s-pixie span.CodeMirror-foldmarker {
172 | display:inline-table;
173 | background:#ccc;
174 | border:0;
175 | color:#000;
176 | border-radius:3px;
177 | font-size:20px;
178 | margin:3px;
179 | padding:0px 5px;
180 | height:15px;
181 | line-height:15px;
182 | overflow:hidden;
183 | white-space:nowrap;
184 | }
185 |
186 | /* Let's get this party started */
187 | ::-webkit-scrollbar {
188 | -webkit-appearance: none;
189 | width: 12px;
190 | }
191 |
192 | /* Track */
193 | ::-webkit-scrollbar-track {
194 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
195 | -webkit-border-radius: 10px;
196 | border-radius: 10px;
197 | background-color: #1a1a1a;
198 | }
199 |
200 | /* Handle */
201 | ::-webkit-scrollbar-thumb {
202 | -webkit-border-radius: 10px;
203 | border-radius: 10px;
204 | background: rgba(100,100,100,1);
205 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
206 | }
207 | ::-webkit-scrollbar-thumb:window-inactive {
208 | background: rgba(55,55,55,0.9);
209 | }
210 |
211 | .extension-manager-dialog .modal-header,
212 | .extension-manager-dialog .modal-footer {
213 | background: #222;
214 | }
215 | .extension-manager-dialog .modal-body {
216 | background: #1a1a1a;
217 | }
218 | .extension-manager-dialog .modal-footer {
219 | border-color: #1a1a1a;
220 | }
221 | .extension-manager-dialog .modal-header .nav-tabs > li > a {
222 | color: #eee;
223 | }
224 | .extension-manager-dialog .modal-header .nav-tabs > .active > a,
225 | .extension-manager-dialog .modal-header .nav-tabs > .active > a:hover {
226 | background: #333;
227 | border-color: #1a1a1a #1a1a1a transparent #1a1a1a;
228 | }
229 | .table-striped tbody tr:nth-child(odd) td,
230 | .table-striped tbody tr:nth-child(odd) th {
231 | background: #333;
232 | color: #eee;
233 | }
234 | .table-striped tbody tr:nth-child(even) td,
235 | .table-striped tbody tr:nth-child(even) th {
236 | background: #2a2a2a;
237 | color: #eee;
238 | }
239 | body.platform-win .extension-manager-dialog .modal-body .extension-list .ext-name,
240 | body.platform-win .extension-manager-dialog .modal-body .extension-list .ext-desc {
241 | color: #eee;
242 | }
243 | .extension-manager-dialog .modal-header .nav-tabs {
244 | border-color: #1a1a1a;
245 | }
246 | .extension-manager-dialog .modal-body .info-message {
247 | background: #1a1a1a;
248 | color: #888;
249 | }
250 | #project-dropdown-toggle {
251 | width: auto;
252 | }
253 | #devdocs-viewer-iframe ._header {
254 | background-color: #222;
255 | }
256 | .toolbar .nav .dropdown-menu li a,
257 | .context-menu .dropdown-menu li a,
258 | .codehint-menu .dropdown-menu li a {
259 | color: #bbb;
260 | }
261 | .toolbar .nav .dropdown-menu li a:hover,
262 | .context-menu .dropdown-menu li a:hover,
263 | .codehint-menu .dropdown-menu li a:hover,
264 | .toolbar .nav .dropdown-menu li a.highlight,
265 | .context-menu .dropdown-menu li a.highlight,
266 | .codehint-menu .dropdown-menu li a.highlight {
267 | color: #eee;
268 | background: #0081c2;
269 | }
270 |
271 | #status-overwrite {
272 | color:white;
273 | }
274 |
--------------------------------------------------------------------------------
/theme/visual-studio-2012.css:
--------------------------------------------------------------------------------
1 | /* Main UI */
2 | *:focus {
3 | outline: none !important;
4 | box-shadow: none !important;
5 | }
6 |
7 | #sidebar{
8 | background:#D6DBE9;
9 | text-shadow:none;
10 | }
11 |
12 | #working-set-header {
13 | background:#D6DBE9;
14 | border-bottom: 4px solid #293955;
15 | color: #60728C;
16 | text-shadow: none;
17 |
18 | }
19 | #open-files-container{ /* Working files */
20 | background: #293955;
21 | color: #fff;
22 | }
23 |
24 | #project-files-header {/* "working files" header and folder header*/
25 | color:#777!important;
26 | }
27 |
28 | #working-set-option-btn, #project-dropdown-toggle, #main-toolbar a, .btn {
29 | color:#60728C;
30 | }
31 | #working-set-option-btn {background-color:#D6DBE9;}
32 | .btn {
33 | color:#000;
34 | border: 1px solid #ACACAC;
35 | border-radius: 0px;
36 | box-shadow: none;
37 | text-shadow: none;
38 | }
39 | .btn.primary {
40 | border-color: #E5C365;
41 | }
42 | .btn.active {
43 | background: none;
44 | background-color:#FFF0D0 !important;
45 | border-color: #E5C365;
46 | color: #E5C365 !important;
47 | }
48 | .btn:not([disabled]):hover {
49 | background: none;
50 | }
51 | #working-set-option-btn:hover, #project-dropdown-toggle:hover, #main-toolbar a:hover { /* Open url when hover */
52 | color:#000;
53 | background-color:#FFF0D0 !important;
54 | border: 1px solid #E5C365;
55 | border-radius: 0px;
56 | }
57 | .btn:not([disabled]):hover
58 | {
59 | color:#000;
60 | background-color:#FFF0D0;
61 | border: 1px solid #E5C365;
62 | border-radius: 0px;
63 | }
64 | .status-language .btn:hover {background-color: #293955;}
65 |
66 | input {
67 | border: 1px solid #ACACAC;
68 | background-color: #f0f0f0;
69 | border-radius: 0px;
70 | }
71 | input:focus {
72 | border: 1px solid #E5C365;
73 | }
74 |
75 | #main-toolbar a {
76 | margin-left: 2px;
77 | margin-top: 6px;
78 | margin-bottom: -1px;
79 | border: 1px solid transparent;
80 | }
81 |
82 | #project-files-container {
83 | padding-top: 5px;
84 | background: #293955;
85 | }
86 |
87 | .jstree-brackets li a, /* Files, folder */
88 | #open-files-container li a,
89 | #open-files-container li a.jstree-clicked { /* Files, folder in "working fiels"*/
90 | color:#fff;
91 | }
92 | .jstree-brackets li a .extension,
93 | #open-files-container li a .extension,
94 | .jstree-brackets li.selected a .extension,
95 | .jstree-brackets li a.jstree-clicked .extension,
96 | #open-files-container li.selected a .extension
97 | {
98 | color: #ADACAC;
99 | }
100 | .jstree-brackets li.selected a,
101 | .jstree-brackets li a.jstree-clicked, /* Files, folder */
102 | #open-files-container li.selected a,
103 | #open-files-container li.selected a.jstree-clicked { /* Files, folder in "working fiels"*/
104 | color:#000;
105 | }
106 |
107 | .sidebar-selection{ /* Selected file or folder */
108 | background:#A78B51;
109 | margin-left:0px;
110 | }
111 |
112 | .sidebar-selection-triangle{ /* ^ the cool arrow */
113 | background:transparent;
114 | }
115 |
116 | .sidebar-selection-triangle.triangle-visible::before{
117 | border-left:12px solid #FFF0D0;
118 | display:none;
119 | }
120 |
121 | #main-toolbar{ /* Toolbar to the right */
122 | background:#D6DBE9;
123 | }
124 |
125 | #status-bar{ /* Bottom status bar */
126 | background:#293955;
127 | }
128 |
129 | #status-indicators,
130 | #status-info{ /* Status bar text */
131 | background:transparent;
132 | color: #fff;
133 | }
134 |
135 | /* Context menu */
136 | .dropdown-menu {
137 | background-color: red;
138 | border: 1px solid #9ba7b7 !important;
139 | border-radius: none !important;
140 | background: linear-gradient(to bottom, #e9ecee 0%, #d0d7e2 100%) !important;
141 | }
142 | .dropdown-menu .divider {
143 | border: none !important;
144 | background-color: #bec3cb;
145 | }
146 | .dropdown-menu a {
147 | color: #3f3f3f;
148 | border: 1px solid transparent;
149 | margin: 1px 4px !important;
150 | padding-top: 2px !important;
151 | padding-bottom: 2px !important;
152 | }
153 | .dropdown-menu a:hover, .dropdown-menu a.highlight {
154 | color:#000;
155 | background-color:#FFF0D0 !important;
156 | border: 1px solid #E5C365;
157 | margin: 1px 4px !important;
158 | border-radius: 0px;
159 | }
160 |
161 | /* Code Editor */
162 | .cm-s-visual-studio-2012.CodeMirror
163 | {
164 | border-left: 2px solid #FFF0D0;
165 | background-color: #fefefe;
166 | color:black;
167 | font-family: consolas !important;
168 | }
169 |
170 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-gutters
171 | {
172 | background-color: #fefefe;
173 | }
174 |
175 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-linenumber
176 | {
177 | color: #BAC1D6;
178 | background-color: #fefefe;
179 | font-family: consolas !important;
180 | }
181 |
182 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-matchingbracket
183 | {
184 | color: black;
185 | background-color: #dedede;
186 | }
187 |
188 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-linebackground
189 | {
190 | outline: 2px solid #dddddd;
191 | z-index: 3;
192 | }
193 |
194 | .cm-s-visual-studio-2012 .CodeMirror-activeline-background,
195 | .cm-s-visual-studio-2012 .CodeMirror-activeline .CodeMirror-gutter-elt
196 | {
197 | background: transparent !important;
198 | }
199 |
200 | .cm-s-visual-studio-2012 .CodeMirror-activeline-background
201 | {
202 | outline: 2px solid #dddddd;
203 | }
204 |
205 | .cm-s-visual-studio-2012 .CodeMirror-activeline .CodeMirror-gutter-elt
206 | {
207 | outline: 0px;
208 | }
209 |
210 |
211 | .cm-s-visual-studio-2012.CodeMirror .cm-matchhighlight
212 | {
213 | background-color: yellow;
214 | }
215 |
216 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-selectedtext
217 | {
218 | background-color: #ADD6FF;
219 | }
220 |
221 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-selected,
222 | .cm-s-visual-studio-2012.CodeMirror-focused .CodeMirror-selected
223 | {
224 | background: #dedede;
225 | }
226 |
227 |
228 | .cm-s-visual-studio-2012.CodeMirror .cm-atom,
229 | .cm-s-visual-studio-2012.CodeMirror .cm-qualifier,
230 | .cm-s-visual-studio-2012.CodeMirror .cm-def,
231 | .cm-s-visual-studio-2012.CodeMirror .cm-keyword {
232 | color: #0000FF;
233 | }
234 |
235 | /* css */
236 | /* css selectors */
237 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-qualifier /* .class */ { color: #800000; }
238 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-builtin /* #id */ { color: #ff0000; }
239 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-tag /* tag */ { color: #8063d4; }
240 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-variable-3 /* :pseudo */ { color: #af552b; }
241 |
242 |
243 | /* css values */
244 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-number { color: #2B91AF; }
245 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-keyword /* !important */ { color: #FF0000; }
246 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-variable /* other value, like font name */ { color: #3399ff; }
247 |
248 | /*CodeMirror does not add notation for css... Which would be really nice. */
249 | /*.cm-s-visual-studio-2012.CodeMirror .cm-property { color: red; }*/
250 |
251 | .cm-s-visual-studio-2012.CodeMirror .cm-comment { color: green; }
252 | .cm-s-visual-studio-2012.CodeMirror .cm-string {color: #800000;}
253 | .cm-s-visual-studio-2012.CodeMirror .cm-string-2 {color: #800000;}
254 | .cm-s-visual-studio-2012.CodeMirror .cm-variable { color: black; }
255 | .cm-s-visual-studio-2012.CodeMirror .cm-variable-2 { color: #2B91AF; }
256 | .cm-s-visual-studio-2012.CodeMirror .cm-tag { color: #800000; }
257 | .cm-s-visual-studio-2012.CodeMirror .cm-attribute { color: red; }
258 | .cm-s-visual-studio-2012.CodeMirror .cm-property { color: black; }
259 |
260 | #status-overwrite { color:white; }
261 |
--------------------------------------------------------------------------------
/theme/NightLion.css:
--------------------------------------------------------------------------------
1 | /*
2 | BearTheme is bare theme for styling Adobe Brackets (Code Mirror) editor. Some elements need be overwritien, if you find comment with "may need !important", give it a try.
3 | Good luck, have fun!
4 | */
5 |
6 | /*Sidebar*/
7 |
8 | #sidebar{} /*General sidebar style*/
9 | #sidebar #working-set-header{} /*"Working files" header*/
10 | #sidebar #open-files-container{} /*Working files style*/
11 | #sidebar #open-files-container ul li.selected a{} /*Selected working file*/
12 | #sidebar #open-files-container ul li.selected a span.extension{} /*Selected working file's extension*/
13 | #sidebar #open-files-container ul li .file-status-icon{} /*Icon next to a file, dot, X etc.*/
14 |
15 |
16 | /*Project file header*/
17 | #sidebar #project-files-header{} /*Browser header, path select, search, X etc.*/
18 | #sidebar #project-files-header #project-dropdown-toggle{} /*Path select toggle*/
19 | #sidebar #project-files-header #project-dropdown-toggle #project-title{} /*Currently selected project title*/
20 | #sidebar #project-files-header #project-dropdown-toggle .dropdown-arrow{} /*Select toggle arrow - SVG image*/
21 | #sidebar #project-files-header #closeAllFolders{} /*Close all icon*/
22 | #sidebar #project-files-header #search-files-button{} /*Search file icon*/
23 |
24 |
25 | /*Project files container*/
26 | #sidebar #project-files-container{} /*Project files - WITHOUT header*/
27 | #sidebar #project-files-container .jstree-icon{} /*Icon next to files (left side), like close/open arrow for parent element*/
28 | #sidebar #project-files-container li.jstree-closed{} /*Closed tree element*/
29 | #sidebar #project-files-container li.jstree-open{} /*Open tree element*/
30 | #sidebar #project-files-container ul li a{} /*Project container file*/
31 | #sidebar #project-files-container ul li a.jstree-hovered{} /*Project container file hovered*/
32 | #sidebar #project-files-container ul li a span.extension{} /*Project container file's extension*/
33 |
34 |
35 | /*Main area*/
36 | .CodeMirror{background-color: #1a1a1a; color: #777; }/*Main coding area, without line count.*/
37 | .CodeMirror-lines{}/*Code lines, syntax coloring has higher priority then .CodeMirror-lines*/
38 |
39 | .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #b4b4b4; z-index: 3;} /*Cursor stling*/
40 | .CodeMirror div.CodeMirror-secondarycursor {} /* Shown when moving in bi-directional text - from CM docs*/
41 |
42 | /*Brackets is based on webkit, so you can use scrollbar styling. Example below contains 8px width, grey scrollbar for the main area. You can use it with other section, just remember about z-indexes or things like 'selected' with overlap your scrollbar.*/
43 | .CodeMirror .CodeMirror-vscrollbar{ width: 8px; bottom:8px !important;} /*Scrollbar vertical. These values MUST be the same as height/width of scrollbars*/
44 | .CodeMirror .CodeMirror-hscrollbar{ height:8px; right:8px !important;} /*Scrollbar horizontal. These values MUST be the same as height/width of scrollbars*/
45 |
46 | .CodeMirror ::-webkit-scrollbar { width: 12px; height:12px;} /* The width of vertical scrollbars and height of horizontal scrollbars*/
47 | .CodeMirror ::-webkit-scrollbar-track {background-color: #333 !important;} /* The track that scrollbars run in */
48 | .CodeMirror ::-webkit-scrollbar-thumb {background-color: #a5a4a4 !important; border-radius: 4px} /* The scrollbar thumb */
49 |
50 | .CodeMirror-scrollbar-filler {height:8px !important; width:8px !important; background:none;} /* Corner where scrollbars meet. Width and height MUST be the same as that of scrollbars. Background should be the same as that of the scrollbar track*/
51 | .CodeMirror-gutter-filler{ height:8px !important;} /* Linenumber area left of horizontal scrollbar. Height MUST be the same as width/height of scrollbars */
52 |
53 | .CodeMirror-activeline .CodeMirror-gutter-elt { color: #eeeeee; }
54 |
55 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background-color: #545454; color:#ffffff;}/*Left vertical bar with line count*/
56 | .CodeMirror-gutter{color:#ffffff;} /*Left bar with line count - it will affect global line count, BUT line count in inline editor won't be changed.*/
57 | .CodeMirror-linenumbers{color:#ffffff;} /*Line count bar only, without "gutter"*/
58 | .CodeMirror-foldgutter{color:#ffffff;} /*It's exactly .CodeMirror-gutter{} without .CodeMirror-linenumbers{}.*/
59 |
60 |
61 | /*Syntax elements & action*/
62 | .CodeMirror .cm-atom{color: #40D5B9 ;} /*Atribbute value ex. #f00 in color:#f00;*/
63 | .CodeMirror .cm-def{color: #F995E0 ;} /*variable definition*/
64 | .CodeMirror .cm-number{ color: #76B8EB;} /*Numbers*/
65 | .CodeMirror .cm-variable{ color: #e6e6e6;} /*Variable name ex. class Variable_name */
66 | .CodeMirror .cm-variable-2{color: #76B8EB ;} /*Variable declaration ex. $variable */
67 | .CodeMirror .cm-property{color: #e6e6e6;} /*Property ex. color in color:#f00;*/
68 | .CodeMirror .cm-operator{color: #666666;} /*Operators ex. dots (:) between property and atom value */
69 | .CodeMirror .cm-comment{color: #4F6B85;} /*Comment*/
70 | .CodeMirror .cm-string{color: #40D5B9 ;} /*String elements ex. "description" in name="description" - including quotation*/
71 | .CodeMirror .cm-meta{color: #9E9E9E;} /*Meta elements like ex.: */
72 | .CodeMirror .cm-qualifier{color: #40D5B9;} /*Final qualifier like css class ex.: .cm-qualifier*/
73 | .CodeMirror .cm-tag{color: #999 ;} /*Tags ex. ul or */
74 | .CodeMirror .cm-attribute{color: #76B8EB ;} /*Attribute ex. rel, href, name*/
75 | .CodeMirror .cm-keyword {color: #e6e6e6;} /*Element call ex. array, class, public function, if, elseif, !important*/
76 | .CodeMirror .cm-matchingtag{color: #FFD37F;}
77 |
78 | .CodeMirror .CodeMirror-matchingtag{} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/
79 | div.CodeMirror span.CodeMirror-matchingbracket{} /*Matching brackets, open/close*/
80 |
81 | .CodeMirror-selected{background-color: #2D3F4F; color: #000000 !important;} /*Selected lines - may need !important*/
82 | .CodeMirror-activeline-background{;} /*Active line - may need !important*/
83 | .CodeMirror-gutter-elt{} /*Active line, line count section*/
84 | div.CodeMirror span.CodeMirror-searching{background-color: #ffffff !important;} /*Search result highlight- may need !important*/
85 |
86 |
87 | /*Status bar - bottom*/
88 | #status-bar{}/*Bottom status bar*/
89 | #status-bar #status-info{}/*Line & column info*/
90 | #status-bar #status-indicators{}/*Second part of the status bar*/
91 | #status-bar #status-indicators{} #status-indent{} /*Indent status info*/
92 | #status-bar #status-indicators{} #status-language{} /*Language info*/
93 | #status-bar #status-indicators{} #fileSizeInfo{} /*File size*/
94 | #status-bar #status-indicators{} #filePathInfo{} /*File path*/
95 |
96 | /*Status bar - ex. debug area*/
97 | #problems-panel{} /*Bottom error panel main wrapper*/
98 | #problems-panel .toolbar{} /*Error panel toolbar with title and X*/
99 | #problems-panel .toolbar .title{} /*Error panel toolbar title eg. "JSLint Errors"*/
100 | #problems-panel .toolbar .close{} /*X to close error panel*/
101 | #problems-panel .toolbar .table-container{} /*Table container with errors*/
102 | #problems-panel .table .tbody{} /*Table with errors - additional classes for look: table-striped table-condensed row-highlight, fimilar for people working with Boostrap*/
103 | #problems-panel .table .tbody tr{} /*Single row containing line number, "error" message and code info*/
104 | #problems-panel .table .tbody tr td.line-number{} /*Line number for error row*/
105 | /*There are no separated classes for error and code excerpt, the only hint I can give is: error is second child and excerpt is 3rd chaild of tr.*/
106 |
107 | /*Right toolbar - live preview, extensions*/
108 | #main-toolbar{} /*Whole toolbar*/
109 | #main-toolbar .buttons{} /*Buttons group*/
110 |
111 |
112 | /*Modal windows like context-menu, quick-view or hint container*/
113 | #context-menu-bar .dropdown-menu{} /*Dropdown menu, available under right-click - may need !important*/
114 | #context-menu-bar .dropdown-menu a{} /*Single option, treat it like ex. background*/
115 | #context-menu-bar .dropdown-menu a:hover{} /*Single option, treat it like ex. background - hover state. RGBA is not working!*/
116 |
117 | /*If you need different dropdown style for different sections, use IDs below.*/
118 | #context-menu-bar #project-context-menu .dropdown-menu{} /*Dropdown menu for project files section*/
119 | #context-menu-bar #editor-context-menu .dropdown-menu{} /*Dropdown menu for editor section*/
120 | #context-menu-bar #inline-editor-context-menu .dropdown-menu{} /*Dropdown menu for inline editor like Quick Edit*/
121 | /*--back to general--*/
122 |
123 | #codehint-menu-bar .dropdown-menu{} /*Code hint menu, dropdown visible when writing code.*/
124 | #codehint-menu-bar .dropdown-menu li a{} /*Code hint menu option, dropdown visible when writing code. Treat like */
125 | #codehint-menu-bar .dropdown-menu li a span.code-hint-item{} /*Single hint in dropdown menu, automaticlly puts already typed text into */
126 |
127 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/
128 | .inline-widget{} /*Inline widget wrap, won't affect line count bar*/
129 | .inline-text-editor{} /*Whole editing area - without active rule*/
130 | .inline-text-editor .CodeMirror-lines{}/*Code lines in inline editor, syntax coloring has higher priority then .CodeMirror-lines*/
131 | .inline-editor-header{} /*Inline text editor header, includes info about inline editor file*/
132 | .inline-editor-header a.filename{} /*Filename visible in inline editor - may need !important*/
133 | .inline-editor-header a.filename span.line-number{} /*Line number next to filename - may need !important*/
134 | .inline-editor-header button.btn{} /*Button responsible for "New rule"*/
135 |
136 | /*Global rules apply to inline editor scroll, just use .inline-widget class to target only bar options of this area. Example below.*/
137 | .inline-widget .CodeMirror-gutter{} /*Inline editor "gutter", won't affect line count in inline editor*/
138 | .inline-widget .CodeMirror-linenumbers{} /*Inline editor line numbers bar - no "gutter"*/
139 |
140 | .inline-widget .related-container{} /*Related container with similar rules*/
141 | .inline-widget .related-container .selection {} /*Currently selected style rule*/
142 | .inline-widget .related-container ul li.selected {} /*Currently selected style rule from related container - text*/
143 | .inline-widget .related-container .related ul li{} /*List element with rule*/
144 | .inline-widget .related-container .related ul li .related-file{} /*File information for rule*/
145 |
146 | /*Inline widget - extended color picker*/
147 | .inline-widget .color-editor{} /*Extended color editor area*/
148 |
149 | .inline-widget .color-editor .sliders .color-selection-field{} /*Color selection square - big one*/
150 | .inline-widget .color-editor .hue-slider{} /*Hue slider*/
151 | .inline-widget .color-editor .opacity-slider{} /*Opacity slider*/
152 |
153 | .inline-widget .color-editor input.color-value{} /*Input for color value*/
154 | .inline-widget .color-editor ul.button-bar{} /*Buttons for RGBa, HEX, HSLA*/
155 | .inline-widget .color-editor ul.button-bar li a{} /*Single buttons */
156 | .inline-widget .color-editor ul.button-bar li a.rgba{} /*RGBa button*/
157 | .inline-widget .color-editor ul.button-bar li a.hex{} /*HEX button*/
158 | .inline-widget .color-editor ul.button-bar li a.hsla{} /*HSLA button*/
159 |
160 | .inline-widget .color-editor .large-swatches{} /*Big swatches with currently picked and original color*/
161 | .inline-widget .color-editor .large-swatches .current-color{} /*Current color swatch*/
162 | .inline-widget .color-editor .large-swatches .original-color{} /*Original color swatch*/
163 |
164 | .inline-widget .color-editor ul.swatches{} /*Small swatches with color suggestions*/
165 | .inline-widget .color-editor ul.swatches li .swatch-bg{} /*Swatch sample*/
166 | .inline-widget .color-editor ul.swatches li span.value{} /*Swatch label with color value*/
167 |
--------------------------------------------------------------------------------
/lib/spromise.js:
--------------------------------------------------------------------------------
1 | /**
2 | * spromise Copyright (c) 2014 Miguel Castillo.
3 | * Licensed under MIT
4 | *
5 | * https://github.com/MiguelCastillo/spromise
6 | */
7 |
8 |
9 | (function (root, factory) {
10 | if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
11 | // CommonJS support
12 | module.exports = factory();
13 | }
14 | else if (typeof define === 'function' && define.amd) {
15 | // Do AMD support
16 | define(factory);
17 | } else {
18 | // Non AMD loading
19 | root.spromise = factory();
20 | }
21 | }(this, function () {
22 |
23 |
24 | /**
25 | * almond 0.2.6 Copyright (c) 2011-2012, The Dojo Foundation All Rights Reserved.
26 | * Available via the MIT or new BSD license.
27 | * see: http://github.com/jrburke/almond for details
28 | */
29 | //Going sloppy to avoid 'use strict' string cost, but strict practices should
30 | //be followed.
31 | /*jslint sloppy: true */
32 | /*global setTimeout: false */
33 |
34 | var requirejs, require, define;
35 | (function (undef) {
36 | var main, req, makeMap, handlers,
37 | defined = {},
38 | waiting = {},
39 | config = {},
40 | defining = {},
41 | hasOwn = Object.prototype.hasOwnProperty,
42 | aps = [].slice;
43 |
44 | function hasProp(obj, prop) {
45 | return hasOwn.call(obj, prop);
46 | }
47 |
48 | /**
49 | * Given a relative module name, like ./something, normalize it to
50 | * a real name that can be mapped to a path.
51 | * @param {String} name the relative name
52 | * @param {String} baseName a real name that the name arg is relative
53 | * to.
54 | * @returns {String} normalized name
55 | */
56 | function normalize(name, baseName) {
57 | var nameParts, nameSegment, mapValue, foundMap,
58 | foundI, foundStarMap, starI, i, j, part,
59 | baseParts = baseName && baseName.split("/"),
60 | map = config.map,
61 | starMap = (map && map['*']) || {};
62 |
63 | //Adjust any relative paths.
64 | if (name && name.charAt(0) === ".") {
65 | //If have a base name, try to normalize against it,
66 | //otherwise, assume it is a top-level require that will
67 | //be relative to baseUrl in the end.
68 | if (baseName) {
69 | //Convert baseName to array, and lop off the last part,
70 | //so that . matches that "directory" and not name of the baseName's
71 | //module. For instance, baseName of "one/two/three", maps to
72 | //"one/two/three.js", but we want the directory, "one/two" for
73 | //this normalization.
74 | baseParts = baseParts.slice(0, baseParts.length - 1);
75 |
76 | name = baseParts.concat(name.split("/"));
77 |
78 | //start trimDots
79 | for (i = 0; i < name.length; i += 1) {
80 | part = name[i];
81 | if (part === ".") {
82 | name.splice(i, 1);
83 | i -= 1;
84 | } else if (part === "..") {
85 | if (i === 1 && (name[2] === '..' || name[0] === '..')) {
86 | //End of the line. Keep at least one non-dot
87 | //path segment at the front so it can be mapped
88 | //correctly to disk. Otherwise, there is likely
89 | //no path mapping for a path starting with '..'.
90 | //This can still fail, but catches the most reasonable
91 | //uses of ..
92 | break;
93 | } else if (i > 0) {
94 | name.splice(i - 1, 2);
95 | i -= 2;
96 | }
97 | }
98 | }
99 | //end trimDots
100 |
101 | name = name.join("/");
102 | } else if (name.indexOf('./') === 0) {
103 | // No baseName, so this is ID is resolved relative
104 | // to baseUrl, pull off the leading dot.
105 | name = name.substring(2);
106 | }
107 | }
108 |
109 | //Apply map config if available.
110 | if ((baseParts || starMap) && map) {
111 | nameParts = name.split('/');
112 |
113 | for (i = nameParts.length; i > 0; i -= 1) {
114 | nameSegment = nameParts.slice(0, i).join("/");
115 |
116 | if (baseParts) {
117 | //Find the longest baseName segment match in the config.
118 | //So, do joins on the biggest to smallest lengths of baseParts.
119 | for (j = baseParts.length; j > 0; j -= 1) {
120 | mapValue = map[baseParts.slice(0, j).join('/')];
121 |
122 | //baseName segment has config, find if it has one for
123 | //this name.
124 | if (mapValue) {
125 | mapValue = mapValue[nameSegment];
126 | if (mapValue) {
127 | //Match, update name to the new value.
128 | foundMap = mapValue;
129 | foundI = i;
130 | break;
131 | }
132 | }
133 | }
134 | }
135 |
136 | if (foundMap) {
137 | break;
138 | }
139 |
140 | //Check for a star map match, but just hold on to it,
141 | //if there is a shorter segment match later in a matching
142 | //config, then favor over this star map.
143 | if (!foundStarMap && starMap && starMap[nameSegment]) {
144 | foundStarMap = starMap[nameSegment];
145 | starI = i;
146 | }
147 | }
148 |
149 | if (!foundMap && foundStarMap) {
150 | foundMap = foundStarMap;
151 | foundI = starI;
152 | }
153 |
154 | if (foundMap) {
155 | nameParts.splice(0, foundI, foundMap);
156 | name = nameParts.join('/');
157 | }
158 | }
159 |
160 | return name;
161 | }
162 |
163 | function makeRequire(relName, forceSync) {
164 | return function () {
165 | //A version of a require function that passes a moduleName
166 | //value for items that may need to
167 | //look up paths relative to the moduleName
168 | return req.apply(undef, aps.call(arguments, 0).concat([relName, forceSync]));
169 | };
170 | }
171 |
172 | function makeNormalize(relName) {
173 | return function (name) {
174 | return normalize(name, relName);
175 | };
176 | }
177 |
178 | function makeLoad(depName) {
179 | return function (value) {
180 | defined[depName] = value;
181 | };
182 | }
183 |
184 | function callDep(name) {
185 | if (hasProp(waiting, name)) {
186 | var args = waiting[name];
187 | delete waiting[name];
188 | defining[name] = true;
189 | main.apply(undef, args);
190 | }
191 |
192 | if (!hasProp(defined, name) && !hasProp(defining, name)) {
193 | throw new Error('No ' + name);
194 | }
195 | return defined[name];
196 | }
197 |
198 | //Turns a plugin!resource to [plugin, resource]
199 | //with the plugin being undefined if the name
200 | //did not have a plugin prefix.
201 | function splitPrefix(name) {
202 | var prefix,
203 | index = name ? name.indexOf('!') : -1;
204 | if (index > -1) {
205 | prefix = name.substring(0, index);
206 | name = name.substring(index + 1, name.length);
207 | }
208 | return [prefix, name];
209 | }
210 |
211 | /**
212 | * Makes a name map, normalizing the name, and using a plugin
213 | * for normalization if necessary. Grabs a ref to plugin
214 | * too, as an optimization.
215 | */
216 | makeMap = function (name, relName) {
217 | var plugin,
218 | parts = splitPrefix(name),
219 | prefix = parts[0];
220 |
221 | name = parts[1];
222 |
223 | if (prefix) {
224 | prefix = normalize(prefix, relName);
225 | plugin = callDep(prefix);
226 | }
227 |
228 | //Normalize according
229 | if (prefix) {
230 | if (plugin && plugin.normalize) {
231 | name = plugin.normalize(name, makeNormalize(relName));
232 | } else {
233 | name = normalize(name, relName);
234 | }
235 | } else {
236 | name = normalize(name, relName);
237 | parts = splitPrefix(name);
238 | prefix = parts[0];
239 | name = parts[1];
240 | if (prefix) {
241 | plugin = callDep(prefix);
242 | }
243 | }
244 |
245 | //Using ridiculous property names for space reasons
246 | return {
247 | f: prefix ? prefix + '!' + name : name, //fullName
248 | n: name,
249 | pr: prefix,
250 | p: plugin
251 | };
252 | };
253 |
254 | function makeConfig(name) {
255 | return function () {
256 | return (config && config.config && config.config[name]) || {};
257 | };
258 | }
259 |
260 | handlers = {
261 | require: function (name) {
262 | return makeRequire(name);
263 | },
264 | exports: function (name) {
265 | var e = defined[name];
266 | if (typeof e !== 'undefined') {
267 | return e;
268 | } else {
269 | return (defined[name] = {});
270 | }
271 | },
272 | module: function (name) {
273 | return {
274 | id: name,
275 | uri: '',
276 | exports: defined[name],
277 | config: makeConfig(name)
278 | };
279 | }
280 | };
281 |
282 | main = function (name, deps, callback, relName) {
283 | var cjsModule, depName, ret, map, i,
284 | args = [],
285 | usingExports;
286 |
287 | //Use name if no relName
288 | relName = relName || name;
289 |
290 | //Call the callback to define the module, if necessary.
291 | if (typeof callback === 'function') {
292 |
293 | //Pull out the defined dependencies and pass the ordered
294 | //values to the callback.
295 | //Default to [require, exports, module] if no deps
296 | deps = !deps.length && callback.length ? ['require', 'exports', 'module'] : deps;
297 | for (i = 0; i < deps.length; i += 1) {
298 | map = makeMap(deps[i], relName);
299 | depName = map.f;
300 |
301 | //Fast path CommonJS standard dependencies.
302 | if (depName === "require") {
303 | args[i] = handlers.require(name);
304 | } else if (depName === "exports") {
305 | //CommonJS module spec 1.1
306 | args[i] = handlers.exports(name);
307 | usingExports = true;
308 | } else if (depName === "module") {
309 | //CommonJS module spec 1.1
310 | cjsModule = args[i] = handlers.module(name);
311 | } else if (hasProp(defined, depName) ||
312 | hasProp(waiting, depName) ||
313 | hasProp(defining, depName)) {
314 | args[i] = callDep(depName);
315 | } else if (map.p) {
316 | map.p.load(map.n, makeRequire(relName, true), makeLoad(depName), {});
317 | args[i] = defined[depName];
318 | } else {
319 | throw new Error(name + ' missing ' + depName);
320 | }
321 | }
322 |
323 | ret = callback.apply(defined[name], args);
324 |
325 | if (name) {
326 | //If setting exports via "module" is in play,
327 | //favor that over return value and exports. After that,
328 | //favor a non-undefined return value over exports use.
329 | if (cjsModule && cjsModule.exports !== undef &&
330 | cjsModule.exports !== defined[name]) {
331 | defined[name] = cjsModule.exports;
332 | } else if (ret !== undef || !usingExports) {
333 | //Use the return value from the function.
334 | defined[name] = ret;
335 | }
336 | }
337 | } else if (name) {
338 | //May just be an object definition for the module. Only
339 | //worry about defining if have a module name.
340 | defined[name] = callback;
341 | }
342 | };
343 |
344 | requirejs = require = req = function (deps, callback, relName, forceSync, alt) {
345 | if (typeof deps === "string") {
346 | if (handlers[deps]) {
347 | //callback in this case is really relName
348 | return handlers[deps](callback);
349 | }
350 | //Just return the module wanted. In this scenario, the
351 | //deps arg is the module name, and second arg (if passed)
352 | //is just the relName.
353 | //Normalize module name, if it contains . or ..
354 | return callDep(makeMap(deps, callback).f);
355 | } else if (!deps.splice) {
356 | //deps is a config object, not an array.
357 | config = deps;
358 | if (callback.splice) {
359 | //callback is an array, which means it is a dependency list.
360 | //Adjust args if there are dependencies
361 | deps = callback;
362 | callback = relName;
363 | relName = null;
364 | } else {
365 | deps = undef;
366 | }
367 | }
368 |
369 | //Support require(['a'])
370 | callback = callback || function () {};
371 |
372 | //If relName is a function, it is an errback handler,
373 | //so remove it.
374 | if (typeof relName === 'function') {
375 | relName = forceSync;
376 | forceSync = alt;
377 | }
378 |
379 | //Simulate async callback;
380 | if (forceSync) {
381 | main(undef, deps, callback, relName);
382 | } else {
383 | //Using a non-zero value because of concern for what old browsers
384 | //do, and latest browsers "upgrade" to 4 if lower value is used:
385 | //http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-settimeout:
386 | //If want a value immediately, use require('id') instead -- something
387 | //that works in almond on the global level, but not guaranteed and
388 | //unlikely to work in other AMD implementations.
389 | setTimeout(function () {
390 | main(undef, deps, callback, relName);
391 | }, 4);
392 | }
393 |
394 | return req;
395 | };
396 |
397 | /**
398 | * Just drops the config on the floor, but returns req in case
399 | * the config return value is used.
400 | */
401 | req.config = function (cfg) {
402 | config = cfg;
403 | if (config.deps) {
404 | req(config.deps, config.callback);
405 | }
406 | return req;
407 | };
408 |
409 | /**
410 | * Expose module registry for debugging and tooling
411 | */
412 | requirejs._defined = defined;
413 |
414 | define = function (name, deps, callback) {
415 |
416 | //This module may not have dependencies
417 | if (!deps.splice) {
418 | //deps is not an array, so probably means
419 | //an object literal or factory function for
420 | //the value. Adjust args.
421 | callback = deps;
422 | deps = [];
423 | }
424 |
425 | if (!hasProp(defined, name) && !hasProp(waiting, name)) {
426 | waiting[name] = [name, deps, callback];
427 | }
428 | };
429 |
430 | define.amd = {
431 | jQuery: true
432 | };
433 | }());
434 |
435 | define("lib/js/almond", function(){});
436 |
437 | /**
438 | * spromise Copyright (c) 2014 Miguel Castillo.
439 | * Licensed under MIT
440 | */
441 |
442 |
443 | define( 'src/async',[],function() {
444 | var _self = this;
445 |
446 | var nextTick;
447 | if ( _self.setImmediate ) {
448 | nextTick = _self.setImmediate;
449 | }
450 | else if ( _self.process && typeof _self.process.nextTick === "function" ) {
451 | nextTick = _self.process.nextTick;
452 | }
453 | else {
454 | nextTick = function(cb) {
455 | _self.setTimeout(cb, 0);
456 | };
457 | }
458 |
459 | return nextTick;
460 | });
461 |
462 | /**
463 | * spromise Copyright (c) 2014 Miguel Castillo.
464 | * Licensed under MIT
465 | */
466 |
467 |
468 | define('src/promise',[
469 | "src/async"
470 | ], function (Async) {
471 |
472 |
473 | var states = {
474 | "pending": 0,
475 | "always": 1,
476 | "resolved": 2,
477 | "rejected": 3,
478 | "notify": 4
479 | };
480 |
481 | var strStates = [
482 | "pending",
483 | "",
484 | "resolved",
485 | "rejected",
486 | ""
487 | ];
488 |
489 |
490 | /**
491 | * Small Promise
492 | */
493 | function Promise(resolver, options) {
494 | if ( this instanceof Promise === false ) {
495 | return new Promise(resolver, options);
496 | }
497 |
498 | var target = this;
499 | var stateManager = new StateManager(target, options || {});
500 |
501 | /**
502 | * callback registration (then, done, fail, always) must be synchrounous so
503 | * that the callbacks can be registered in the order they come in.
504 | */
505 |
506 | function then(onResolved, onRejected) {
507 | return stateManager.then(onResolved, onRejected);
508 | }
509 |
510 | // Setup a way to verify an spromise object
511 | then.constructor = Promise;
512 | then.stateManager = stateManager;
513 |
514 | function done(cb) {
515 | stateManager.enqueue(states.resolved, cb);
516 | return target.promise;
517 | }
518 |
519 | function fail(cb) {
520 | stateManager.enqueue(states.rejected, cb);
521 | return target.promise;
522 | }
523 |
524 | function always(cb) {
525 | stateManager.enqueue(states.always, cb);
526 | return target.promise;
527 | }
528 |
529 | function notify(cb) {
530 | stateManager.enqueue(states.notify, cb);
531 | return target.promise;
532 | }
533 |
534 | function state() {
535 | return strStates[stateManager.state];
536 | }
537 |
538 | function resolve() {
539 | stateManager.transition(states.resolved, this, arguments);
540 | return target;
541 | }
542 |
543 | function reject() {
544 | stateManager.transition(states.rejected, this, arguments);
545 | return target;
546 | }
547 |
548 | target.always = always;
549 | target.done = done;
550 | target.fail = fail;
551 | target.notify = notify;
552 | target.resolve = resolve;
553 | target.reject = reject;
554 | target.then = then;
555 | target.state = state;
556 | target.promise = {
557 | always: always,
558 | done: done,
559 | fail: fail,
560 | notify: notify,
561 | then: then,
562 | state: state
563 | };
564 |
565 | // Interface to allow to post pone calling the resolver as long as its not needed
566 | if ( typeof(resolver) === "function" ) {
567 | resolver.call(target, target.resolve, target.reject);
568 | }
569 | }
570 |
571 | /**
572 | * Interface to play nice with libraries like when and q.
573 | */
574 | Promise.defer = function () {
575 | return new Promise();
576 | };
577 |
578 | /**
579 | * Interface to create a promise and link it to a thenable object. The assumption is that
580 | * the object passed in is a thenable. If it isn't, there is no check so an exption might
581 | * be going your way.
582 | */
583 | Promise.thenable = function (thenable) {
584 | return new Promise(thenable.then);
585 | };
586 |
587 | /**
588 | * Create a promise that's already rejected
589 | */
590 | Promise.rejected = function () {
591 | return new Promise(null, {
592 | context: this,
593 | value: arguments,
594 | state: states.rejected
595 | });
596 | };
597 |
598 | /**
599 | * Create a promise that's already resolved
600 | */
601 | Promise.resolved = function () {
602 | return new Promise(null, {
603 | context: this,
604 | value: arguments,
605 | state: states.resolved
606 | });
607 | };
608 |
609 |
610 | /**
611 | * StateManager is the state manager for a promise
612 | */
613 | function StateManager(promise, options) {
614 | // Initial state is pending
615 | this.state = states.pending;
616 |
617 | // If a state is passed in, then we go ahead and initialize the state manager with it
618 | if (options.state) {
619 | this.transition(options.state, options.context, options.value);
620 | }
621 | }
622 |
623 | // Queue will figure out if the promise is pending/resolved/rejected and do the appropriate
624 | // action with the callback based on that.
625 | StateManager.prototype.enqueue = function (state, cb, sync) {
626 | var _self = this,
627 | _state = _self.state;
628 |
629 | if (!_state) {
630 | (this.queue || (this.queue = [])).push({
631 | state: state,
632 | cb: cb
633 | });
634 | }
635 |
636 | // If resolved, then lets try to execute the queue
637 | else if (_state === state || states.always === state) {
638 | if ( sync ) {
639 | cb.apply(_self.context, _self.value);
640 | }
641 | else {
642 | Async(function queuecb() {
643 | cb.apply(_self.context, _self.value);
644 | });
645 | }
646 | }
647 |
648 | // Do proper notify events
649 | else if (states.notify === state) {
650 | if ( sync ) {
651 | cb.call(_self.context, _self.state, _self.value);
652 | }
653 | else {
654 | Async(function queuecb() {
655 | cb.call(_self.context, _self.state, _self.value);
656 | });
657 | }
658 | }
659 | };
660 |
661 | // Sets the state of the promise and call the callbacks as appropriate
662 | StateManager.prototype.transition = function (state, context, value, sync) {
663 | if (this.state) {
664 | return;
665 | }
666 |
667 | this.state = state;
668 | this.context = context;
669 | this.value = value;
670 |
671 | // Process queue if anything is waiting to be notified
672 | if (this.queue) {
673 | var queue = this.queue,
674 | length = queue.length,
675 | i = 0,
676 | item;
677 |
678 | this.queue = null;
679 |
680 | for ( ; i < length; i++ ) {
681 | item = queue[i];
682 | this.enqueue(item.state, item.cb, sync);
683 | }
684 | }
685 | };
686 |
687 | // Links together the resolution of promise1 to promise2
688 | StateManager.prototype.then = function (onResolved, onRejected) {
689 | var resolution;
690 | onResolved = typeof (onResolved) === "function" ? onResolved : null;
691 | onRejected = typeof (onRejected) === "function" ? onRejected : null;
692 |
693 | if ((!onResolved && this.state === states.resolved) ||
694 | (!onRejected && this.state === states.rejected)) {
695 | return new Promise(null, this);
696 | }
697 |
698 | resolution = new Resolution(new Promise());
699 | this.enqueue( states.notify, resolution.notify(onResolved, onRejected) );
700 | return resolution.promise;
701 | };
702 |
703 |
704 | /**
705 | * Thenable resolution
706 | */
707 | function Resolution(promise) {
708 | this.promise = promise;
709 | }
710 |
711 | // Notify when a promise has change state.
712 | Resolution.prototype.notify = function(onResolved, onRejected) {
713 | var _self = this;
714 | return function notify(state, value) {
715 | var handler = (onResolved || onRejected) && (state === states.resolved ? (onResolved || onRejected) : (onRejected || onResolved));
716 | try {
717 | _self.context = this;
718 | _self.finalize(state, handler ? [handler.apply(this, value)] : value);
719 | }
720 | catch(ex) {
721 | _self.promise.reject.call(_self.context, ex);
722 | }
723 | };
724 | };
725 |
726 | // Promise.chain DRYs onresolved and onrejected operations. Handler is onResolved or onRejected
727 | // This chain is partcularly used when dealing with external promises where we just just have to
728 | // resolve the result
729 | Resolution.prototype.chain = function (state) {
730 | var _self = this;
731 | return function resolve() {
732 | try {
733 | // Handler can only be called once!
734 | if ( !_self.resolved ) {
735 | _self.resolved = true;
736 | _self.context = this;
737 | _self.finalize(state, arguments);
738 | }
739 | }
740 | catch(ex) {
741 | _self.promise.reject.call(_self.context, ex);
742 | }
743 | };
744 | };
745 |
746 | // Routine to resolve a thenable. Data is in the form of an arguments object (array)
747 | Resolution.prototype.finalize = function (state, data) {
748 | var input = data[0],
749 | then = (input && input.then),
750 | promise = this.promise,
751 | context = this.context,
752 | resolution, thenableType;
753 |
754 | // 2.3.1
755 | if (input === this.promise) {
756 | throw new TypeError("Resolution input must not be the promise being resolved");
757 | }
758 |
759 | // 2.3.2
760 | // Shortcut if the incoming promise is an instance of SPromise
761 | if (then && then.constructor === Promise) {
762 | return then.stateManager.enqueue(states.notify, this.notify(), true);
763 | }
764 |
765 | // 2.3.3
766 | // If thenable is function or object, then try to resolve using that.
767 | thenableType = then && (typeof (then) === "function" && typeof (input));
768 | if (thenableType === "function" || thenableType === "object") {
769 | try {
770 | resolution = new Resolution(promise);
771 | then.call(input, resolution.chain(states.resolved), resolution.chain(states.rejected));
772 | }
773 | catch (ex) {
774 | if (!resolution.resolved) {
775 | promise.reject.call(context, ex);
776 | }
777 | }
778 | }
779 |
780 | // 2.3.4
781 | // Just resolve the promise
782 | else {
783 | promise.then.stateManager.transition(state, context, data);
784 | }
785 | };
786 |
787 | // Expose enums for the states
788 | Promise.states = states;
789 | return Promise;
790 | });
791 |
792 | /**
793 | * spromise Copyright (c) 2014 Miguel Castillo.
794 | * Licensed under MIT
795 | */
796 |
797 |
798 | define('src/when',[
799 | "src/promise",
800 | "src/async"
801 | ], function(Promise, Async) {
802 |
803 |
804 | function _result(input, args, context) {
805 | if (typeof(input) === "function") {
806 | return input.apply(context, args||[]);
807 | }
808 | return input;
809 | }
810 |
811 | /**
812 | * Interface to allow multiple promises to be synchronized
813 | */
814 | function When( ) {
815 | // The input is the queue of items that need to be resolved.
816 | var queue = Array.prototype.slice.call(arguments),
817 | promise = Promise.defer(),
818 | context = this,
819 | i, item, remaining, queueLength;
820 |
821 | if ( !queue.length ) {
822 | return promise.resolve(null);
823 | }
824 |
825 | //
826 | // Check everytime a new resolved promise occurs if we are done processing all
827 | // the dependent promises. If they are all done, then resolve the when promise
828 | //
829 | function checkPending() {
830 | if ( remaining ) {
831 | remaining--;
832 | }
833 |
834 | if ( !remaining ) {
835 | promise.resolve.apply(context, queue);
836 | }
837 | }
838 |
839 | // Wrap the resolution to keep track of the proper index in the closure
840 | function resolve( index ) {
841 | return function() {
842 | // We will replace the item in the queue with result to make
843 | // it easy to send all the data into the resolve interface.
844 | queue[index] = arguments.length === 1 ? arguments[0] : arguments;
845 | checkPending();
846 | };
847 | }
848 |
849 | function reject() {
850 | promise.reject.apply(this, arguments);
851 | }
852 |
853 | function processQueue() {
854 | queueLength = remaining = queue.length;
855 | for ( i = 0; i < queueLength; i++ ) {
856 | item = queue[i];
857 |
858 | if ( item && typeof item.then === "function" ) {
859 | item.then(resolve(i), reject);
860 | }
861 | else {
862 | queue[i] = _result(item);
863 | checkPending();
864 | }
865 | }
866 | }
867 |
868 | // Process the promises and callbacks
869 | Async(processQueue);
870 | return promise;
871 | }
872 |
873 | return When;
874 | });
875 |
876 |
877 | /**
878 | * spromise Copyright (c) 2014 Miguel Castillo.
879 | * Licensed under MIT
880 | */
881 |
882 |
883 | define('src/spromise',[
884 | "src/promise",
885 | "src/async",
886 | "src/when"
887 | ], function(promise, async, when) {
888 | promise.when = when;
889 | promise.async = async;
890 | return promise;
891 | });
892 |
893 | return require("src/spromise");
894 | }));
895 |
--------------------------------------------------------------------------------
/lib/tinycolor.js:
--------------------------------------------------------------------------------
1 | // TinyColor v1.0.0
2 | // https://github.com/bgrins/TinyColor
3 | // Brian Grinstead, MIT License
4 |
5 | (function() {
6 |
7 | var trimLeft = /^[\s,#]+/,
8 | trimRight = /\s+$/,
9 | tinyCounter = 0,
10 | math = Math,
11 | mathRound = math.round,
12 | mathMin = math.min,
13 | mathMax = math.max,
14 | mathRandom = math.random;
15 |
16 | var tinycolor = function tinycolor (color, opts) {
17 |
18 | color = (color) ? color : '';
19 | opts = opts || { };
20 |
21 | // If input is already a tinycolor, return itself
22 | if (color instanceof tinycolor) {
23 | return color;
24 | }
25 | // If we are called as a function, call using new instead
26 | if (!(this instanceof tinycolor)) {
27 | return new tinycolor(color, opts);
28 | }
29 |
30 | var rgb = inputToRGB(color);
31 | this._r = rgb.r,
32 | this._g = rgb.g,
33 | this._b = rgb.b,
34 | this._a = rgb.a,
35 | this._roundA = mathRound(100*this._a) / 100,
36 | this._format = opts.format || rgb.format;
37 | this._gradientType = opts.gradientType;
38 |
39 | // Don't let the range of [0,255] come back in [0,1].
40 | // Potentially lose a little bit of precision here, but will fix issues where
41 | // .5 gets interpreted as half of the total, instead of half of 1
42 | // If it was supposed to be 128, this was already taken care of by `inputToRgb`
43 | if (this._r < 1) { this._r = mathRound(this._r); }
44 | if (this._g < 1) { this._g = mathRound(this._g); }
45 | if (this._b < 1) { this._b = mathRound(this._b); }
46 |
47 | this._ok = rgb.ok;
48 | this._tc_id = tinyCounter++;
49 | };
50 |
51 | tinycolor.prototype = {
52 | isDark: function() {
53 | return this.getBrightness() < 128;
54 | },
55 | isLight: function() {
56 | return !this.isDark();
57 | },
58 | isValid: function() {
59 | return this._ok;
60 | },
61 | getFormat: function() {
62 | return this._format;
63 | },
64 | getAlpha: function() {
65 | return this._a;
66 | },
67 | getBrightness: function() {
68 | var rgb = this.toRgb();
69 | return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
70 | },
71 | setAlpha: function(value) {
72 | this._a = boundAlpha(value);
73 | this._roundA = mathRound(100*this._a) / 100;
74 | return this;
75 | },
76 | toHsv: function() {
77 | var hsv = rgbToHsv(this._r, this._g, this._b);
78 | return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
79 | },
80 | toHsvString: function() {
81 | var hsv = rgbToHsv(this._r, this._g, this._b);
82 | var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
83 | return (this._a == 1) ?
84 | "hsv(" + h + ", " + s + "%, " + v + "%)" :
85 | "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
86 | },
87 | toHsl: function() {
88 | var hsl = rgbToHsl(this._r, this._g, this._b);
89 | return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
90 | },
91 | toHslString: function() {
92 | var hsl = rgbToHsl(this._r, this._g, this._b);
93 | var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
94 | return (this._a == 1) ?
95 | "hsl(" + h + ", " + s + "%, " + l + "%)" :
96 | "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
97 | },
98 | toHex: function(allow3Char) {
99 | return rgbToHex(this._r, this._g, this._b, allow3Char);
100 | },
101 | toHexString: function(allow3Char) {
102 | return '#' + this.toHex(allow3Char);
103 | },
104 | toHex8: function() {
105 | return rgbaToHex(this._r, this._g, this._b, this._a);
106 | },
107 | toHex8String: function() {
108 | return '#' + this.toHex8();
109 | },
110 | toRgb: function() {
111 | return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
112 | },
113 | toRgbString: function() {
114 | return (this._a == 1) ?
115 | "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
116 | "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
117 | },
118 | toPercentageRgb: function() {
119 | return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
120 | },
121 | toPercentageRgbString: function() {
122 | return (this._a == 1) ?
123 | "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
124 | "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
125 | },
126 | toName: function() {
127 | if (this._a === 0) {
128 | return "transparent";
129 | }
130 |
131 | if (this._a < 1) {
132 | return false;
133 | }
134 |
135 | return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
136 | },
137 | toFilter: function(secondColor) {
138 | var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a);
139 | var secondHex8String = hex8String;
140 | var gradientType = this._gradientType ? "GradientType = 1, " : "";
141 |
142 | if (secondColor) {
143 | var s = tinycolor(secondColor);
144 | secondHex8String = s.toHex8String();
145 | }
146 |
147 | return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
148 | },
149 | toString: function(format) {
150 | var formatSet = !!format;
151 | format = format || this._format;
152 |
153 | var formattedString = false;
154 | var hasAlpha = this._a < 1 && this._a >= 0;
155 | var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
156 |
157 | if (needsAlphaFormat) {
158 | // Special case for "transparent", all other non-alpha formats
159 | // will return rgba when there is transparency.
160 | if (format === "name" && this._a === 0) {
161 | return this.toName();
162 | }
163 | return this.toRgbString();
164 | }
165 | if (format === "rgb") {
166 | formattedString = this.toRgbString();
167 | }
168 | if (format === "prgb") {
169 | formattedString = this.toPercentageRgbString();
170 | }
171 | if (format === "hex" || format === "hex6") {
172 | formattedString = this.toHexString();
173 | }
174 | if (format === "hex3") {
175 | formattedString = this.toHexString(true);
176 | }
177 | if (format === "hex8") {
178 | formattedString = this.toHex8String();
179 | }
180 | if (format === "name") {
181 | formattedString = this.toName();
182 | }
183 | if (format === "hsl") {
184 | formattedString = this.toHslString();
185 | }
186 | if (format === "hsv") {
187 | formattedString = this.toHsvString();
188 | }
189 |
190 | return formattedString || this.toHexString();
191 | },
192 |
193 | _applyModification: function(fn, args) {
194 | var color = fn.apply(null, [this].concat([].slice.call(args)));
195 | this._r = color._r;
196 | this._g = color._g;
197 | this._b = color._b;
198 | this.setAlpha(color._a);
199 | return this;
200 | },
201 | lighten: function() {
202 | return this._applyModification(lighten, arguments);
203 | },
204 | brighten: function() {
205 | return this._applyModification(brighten, arguments);
206 | },
207 | darken: function() {
208 | return this._applyModification(darken, arguments);
209 | },
210 | desaturate: function() {
211 | return this._applyModification(desaturate, arguments);
212 | },
213 | saturate: function() {
214 | return this._applyModification(saturate, arguments);
215 | },
216 | greyscale: function() {
217 | return this._applyModification(greyscale, arguments);
218 | },
219 | spin: function() {
220 | return this._applyModification(spin, arguments);
221 | },
222 |
223 | _applyCombination: function(fn, args) {
224 | return fn.apply(null, [this].concat([].slice.call(args)));
225 | },
226 | analogous: function() {
227 | return this._applyCombination(analogous, arguments);
228 | },
229 | complement: function() {
230 | return this._applyCombination(complement, arguments);
231 | },
232 | monochromatic: function() {
233 | return this._applyCombination(monochromatic, arguments);
234 | },
235 | splitcomplement: function() {
236 | return this._applyCombination(splitcomplement, arguments);
237 | },
238 | triad: function() {
239 | return this._applyCombination(triad, arguments);
240 | },
241 | tetrad: function() {
242 | return this._applyCombination(tetrad, arguments);
243 | }
244 | };
245 |
246 | // If input is an object, force 1 into "1.0" to handle ratios properly
247 | // String input requires "1.0" as input, so 1 will be treated as 1
248 | tinycolor.fromRatio = function(color, opts) {
249 | if (typeof color == "object") {
250 | var newColor = {};
251 | for (var i in color) {
252 | if (color.hasOwnProperty(i)) {
253 | if (i === "a") {
254 | newColor[i] = color[i];
255 | }
256 | else {
257 | newColor[i] = convertToPercentage(color[i]);
258 | }
259 | }
260 | }
261 | color = newColor;
262 | }
263 |
264 | return tinycolor(color, opts);
265 | };
266 |
267 | // Given a string or object, convert that input to RGB
268 | // Possible string inputs:
269 | //
270 | // "red"
271 | // "#f00" or "f00"
272 | // "#ff0000" or "ff0000"
273 | // "#ff000000" or "ff000000"
274 | // "rgb 255 0 0" or "rgb (255, 0, 0)"
275 | // "rgb 1.0 0 0" or "rgb (1, 0, 0)"
276 | // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
277 | // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
278 | // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
279 | // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
280 | // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
281 | //
282 | function inputToRGB(color) {
283 |
284 | var rgb = { r: 0, g: 0, b: 0 };
285 | var a = 1;
286 | var ok = false;
287 | var format = false;
288 |
289 | if (typeof color == "string") {
290 | color = stringInputToObject(color);
291 | }
292 |
293 | if (typeof color == "object") {
294 | if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
295 | rgb = rgbToRgb(color.r, color.g, color.b);
296 | ok = true;
297 | format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
298 | }
299 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) {
300 | color.s = convertToPercentage(color.s);
301 | color.v = convertToPercentage(color.v);
302 | rgb = hsvToRgb(color.h, color.s, color.v);
303 | ok = true;
304 | format = "hsv";
305 | }
306 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) {
307 | color.s = convertToPercentage(color.s);
308 | color.l = convertToPercentage(color.l);
309 | rgb = hslToRgb(color.h, color.s, color.l);
310 | ok = true;
311 | format = "hsl";
312 | }
313 |
314 | if (color.hasOwnProperty("a")) {
315 | a = color.a;
316 | }
317 | }
318 |
319 | a = boundAlpha(a);
320 |
321 | return {
322 | ok: ok,
323 | format: color.format || format,
324 | r: mathMin(255, mathMax(rgb.r, 0)),
325 | g: mathMin(255, mathMax(rgb.g, 0)),
326 | b: mathMin(255, mathMax(rgb.b, 0)),
327 | a: a
328 | };
329 | }
330 |
331 |
332 | // Conversion Functions
333 | // --------------------
334 |
335 | // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
336 | //
337 |
338 | // `rgbToRgb`
339 | // Handle bounds / percentage checking to conform to CSS color spec
340 | //
341 | // *Assumes:* r, g, b in [0, 255] or [0, 1]
342 | // *Returns:* { r, g, b } in [0, 255]
343 | function rgbToRgb(r, g, b){
344 | return {
345 | r: bound01(r, 255) * 255,
346 | g: bound01(g, 255) * 255,
347 | b: bound01(b, 255) * 255
348 | };
349 | }
350 |
351 | // `rgbToHsl`
352 | // Converts an RGB color value to HSL.
353 | // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
354 | // *Returns:* { h, s, l } in [0,1]
355 | function rgbToHsl(r, g, b) {
356 |
357 | r = bound01(r, 255);
358 | g = bound01(g, 255);
359 | b = bound01(b, 255);
360 |
361 | var max = mathMax(r, g, b), min = mathMin(r, g, b);
362 | var h, s, l = (max + min) / 2;
363 |
364 | if(max == min) {
365 | h = s = 0; // achromatic
366 | }
367 | else {
368 | var d = max - min;
369 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
370 | switch(max) {
371 | case r: h = (g - b) / d + (g < b ? 6 : 0); break;
372 | case g: h = (b - r) / d + 2; break;
373 | case b: h = (r - g) / d + 4; break;
374 | }
375 |
376 | h /= 6;
377 | }
378 |
379 | return { h: h, s: s, l: l };
380 | }
381 |
382 | // `hslToRgb`
383 | // Converts an HSL color value to RGB.
384 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
385 | // *Returns:* { r, g, b } in the set [0, 255]
386 | function hslToRgb(h, s, l) {
387 | var r, g, b;
388 |
389 | h = bound01(h, 360);
390 | s = bound01(s, 100);
391 | l = bound01(l, 100);
392 |
393 | function hue2rgb(p, q, t) {
394 | if(t < 0) t += 1;
395 | if(t > 1) t -= 1;
396 | if(t < 1/6) return p + (q - p) * 6 * t;
397 | if(t < 1/2) return q;
398 | if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
399 | return p;
400 | }
401 |
402 | if(s === 0) {
403 | r = g = b = l; // achromatic
404 | }
405 | else {
406 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
407 | var p = 2 * l - q;
408 | r = hue2rgb(p, q, h + 1/3);
409 | g = hue2rgb(p, q, h);
410 | b = hue2rgb(p, q, h - 1/3);
411 | }
412 |
413 | return { r: r * 255, g: g * 255, b: b * 255 };
414 | }
415 |
416 | // `rgbToHsv`
417 | // Converts an RGB color value to HSV
418 | // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
419 | // *Returns:* { h, s, v } in [0,1]
420 | function rgbToHsv(r, g, b) {
421 |
422 | r = bound01(r, 255);
423 | g = bound01(g, 255);
424 | b = bound01(b, 255);
425 |
426 | var max = mathMax(r, g, b), min = mathMin(r, g, b);
427 | var h, s, v = max;
428 |
429 | var d = max - min;
430 | s = max === 0 ? 0 : d / max;
431 |
432 | if(max == min) {
433 | h = 0; // achromatic
434 | }
435 | else {
436 | switch(max) {
437 | case r: h = (g - b) / d + (g < b ? 6 : 0); break;
438 | case g: h = (b - r) / d + 2; break;
439 | case b: h = (r - g) / d + 4; break;
440 | }
441 | h /= 6;
442 | }
443 | return { h: h, s: s, v: v };
444 | }
445 |
446 | // `hsvToRgb`
447 | // Converts an HSV color value to RGB.
448 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
449 | // *Returns:* { r, g, b } in the set [0, 255]
450 | function hsvToRgb(h, s, v) {
451 |
452 | h = bound01(h, 360) * 6;
453 | s = bound01(s, 100);
454 | v = bound01(v, 100);
455 |
456 | var i = math.floor(h),
457 | f = h - i,
458 | p = v * (1 - s),
459 | q = v * (1 - f * s),
460 | t = v * (1 - (1 - f) * s),
461 | mod = i % 6,
462 | r = [v, q, p, p, t, v][mod],
463 | g = [t, v, v, q, p, p][mod],
464 | b = [p, p, t, v, v, q][mod];
465 |
466 | return { r: r * 255, g: g * 255, b: b * 255 };
467 | }
468 |
469 | // `rgbToHex`
470 | // Converts an RGB color to hex
471 | // Assumes r, g, and b are contained in the set [0, 255]
472 | // Returns a 3 or 6 character hex
473 | function rgbToHex(r, g, b, allow3Char) {
474 |
475 | var hex = [
476 | pad2(mathRound(r).toString(16)),
477 | pad2(mathRound(g).toString(16)),
478 | pad2(mathRound(b).toString(16))
479 | ];
480 |
481 | // Return a 3 character hex if possible
482 | if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
483 | return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
484 | }
485 |
486 | return hex.join("");
487 | }
488 | // `rgbaToHex`
489 | // Converts an RGBA color plus alpha transparency to hex
490 | // Assumes r, g, b and a are contained in the set [0, 255]
491 | // Returns an 8 character hex
492 | function rgbaToHex(r, g, b, a) {
493 |
494 | var hex = [
495 | pad2(convertDecimalToHex(a)),
496 | pad2(mathRound(r).toString(16)),
497 | pad2(mathRound(g).toString(16)),
498 | pad2(mathRound(b).toString(16))
499 | ];
500 |
501 | return hex.join("");
502 | }
503 |
504 | // `equals`
505 | // Can be called with any tinycolor input
506 | tinycolor.equals = function (color1, color2) {
507 | if (!color1 || !color2) { return false; }
508 | return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
509 | };
510 | tinycolor.random = function() {
511 | return tinycolor.fromRatio({
512 | r: mathRandom(),
513 | g: mathRandom(),
514 | b: mathRandom()
515 | });
516 | };
517 |
518 |
519 | // Modification Functions
520 | // ----------------------
521 | // Thanks to less.js for some of the basics here
522 | //
523 |
524 | function desaturate(color, amount) {
525 | amount = (amount === 0) ? 0 : (amount || 10);
526 | var hsl = tinycolor(color).toHsl();
527 | hsl.s -= amount / 100;
528 | hsl.s = clamp01(hsl.s);
529 | return tinycolor(hsl);
530 | }
531 |
532 | function saturate(color, amount) {
533 | amount = (amount === 0) ? 0 : (amount || 10);
534 | var hsl = tinycolor(color).toHsl();
535 | hsl.s += amount / 100;
536 | hsl.s = clamp01(hsl.s);
537 | return tinycolor(hsl);
538 | }
539 |
540 | function greyscale(color) {
541 | return tinycolor(color).desaturate(100);
542 | }
543 |
544 | function lighten (color, amount) {
545 | amount = (amount === 0) ? 0 : (amount || 10);
546 | var hsl = tinycolor(color).toHsl();
547 | hsl.l += amount / 100;
548 | hsl.l = clamp01(hsl.l);
549 | return tinycolor(hsl);
550 | }
551 |
552 | function brighten(color, amount) {
553 | amount = (amount === 0) ? 0 : (amount || 10);
554 | var rgb = tinycolor(color).toRgb();
555 | rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
556 | rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
557 | rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
558 | return tinycolor(rgb);
559 | }
560 |
561 | function darken (color, amount) {
562 | amount = (amount === 0) ? 0 : (amount || 10);
563 | var hsl = tinycolor(color).toHsl();
564 | hsl.l -= amount / 100;
565 | hsl.l = clamp01(hsl.l);
566 | return tinycolor(hsl);
567 | }
568 |
569 | // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
570 | // Values outside of this range will be wrapped into this range.
571 | function spin(color, amount) {
572 | var hsl = tinycolor(color).toHsl();
573 | var hue = (mathRound(hsl.h) + amount) % 360;
574 | hsl.h = hue < 0 ? 360 + hue : hue;
575 | return tinycolor(hsl);
576 | }
577 |
578 | // Combination Functions
579 | // ---------------------
580 | // Thanks to jQuery xColor for some of the ideas behind these
581 | //
582 |
583 | function complement(color) {
584 | var hsl = tinycolor(color).toHsl();
585 | hsl.h = (hsl.h + 180) % 360;
586 | return tinycolor(hsl);
587 | }
588 |
589 | function triad(color) {
590 | var hsl = tinycolor(color).toHsl();
591 | var h = hsl.h;
592 | return [
593 | tinycolor(color),
594 | tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
595 | tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
596 | ];
597 | }
598 |
599 | function tetrad(color) {
600 | var hsl = tinycolor(color).toHsl();
601 | var h = hsl.h;
602 | return [
603 | tinycolor(color),
604 | tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
605 | tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
606 | tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
607 | ];
608 | }
609 |
610 | function splitcomplement(color) {
611 | var hsl = tinycolor(color).toHsl();
612 | var h = hsl.h;
613 | return [
614 | tinycolor(color),
615 | tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
616 | tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
617 | ];
618 | }
619 |
620 | function analogous(color, results, slices) {
621 | results = results || 6;
622 | slices = slices || 30;
623 |
624 | var hsl = tinycolor(color).toHsl();
625 | var part = 360 / slices;
626 | var ret = [tinycolor(color)];
627 |
628 | for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
629 | hsl.h = (hsl.h + part) % 360;
630 | ret.push(tinycolor(hsl));
631 | }
632 | return ret;
633 | }
634 |
635 | function monochromatic(color, results) {
636 | results = results || 6;
637 | var hsv = tinycolor(color).toHsv();
638 | var h = hsv.h, s = hsv.s, v = hsv.v;
639 | var ret = [];
640 | var modification = 1 / results;
641 |
642 | while (results--) {
643 | ret.push(tinycolor({ h: h, s: s, v: v}));
644 | v = (v + modification) % 1;
645 | }
646 |
647 | return ret;
648 | }
649 |
650 | // Utility Functions
651 | // ---------------------
652 |
653 | tinycolor.mix = function(color1, color2, amount) {
654 | amount = (amount === 0) ? 0 : (amount || 50);
655 |
656 | var rgb1 = tinycolor(color1).toRgb();
657 | var rgb2 = tinycolor(color2).toRgb();
658 |
659 | var p = amount / 100;
660 | var w = p * 2 - 1;
661 | var a = rgb2.a - rgb1.a;
662 |
663 | var w1;
664 |
665 | if (w * a == -1) {
666 | w1 = w;
667 | } else {
668 | w1 = (w + a) / (1 + w * a);
669 | }
670 |
671 | w1 = (w1 + 1) / 2;
672 |
673 | var w2 = 1 - w1;
674 |
675 | var rgba = {
676 | r: rgb2.r * w1 + rgb1.r * w2,
677 | g: rgb2.g * w1 + rgb1.g * w2,
678 | b: rgb2.b * w1 + rgb1.b * w2,
679 | a: rgb2.a * p + rgb1.a * (1 - p)
680 | };
681 |
682 | return tinycolor(rgba);
683 | };
684 |
685 |
686 | // Readability Functions
687 | // ---------------------
688 | //
689 |
690 | // `readability`
691 | // Analyze the 2 colors and returns an object with the following properties:
692 | // `brightness`: difference in brightness between the two colors
693 | // `color`: difference in color/hue between the two colors
694 | tinycolor.readability = function(color1, color2) {
695 | var c1 = tinycolor(color1);
696 | var c2 = tinycolor(color2);
697 | var rgb1 = c1.toRgb();
698 | var rgb2 = c2.toRgb();
699 | var brightnessA = c1.getBrightness();
700 | var brightnessB = c2.getBrightness();
701 | var colorDiff = (
702 | Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) +
703 | Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) +
704 | Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b)
705 | );
706 |
707 | return {
708 | brightness: Math.abs(brightnessA - brightnessB),
709 | color: colorDiff
710 | };
711 | };
712 |
713 | // `readable`
714 | // http://www.w3.org/TR/AERT#color-contrast
715 | // Ensure that foreground and background color combinations provide sufficient contrast.
716 | // *Example*
717 | // tinycolor.isReadable("#000", "#111") => false
718 | tinycolor.isReadable = function(color1, color2) {
719 | var readability = tinycolor.readability(color1, color2);
720 | return readability.brightness > 125 && readability.color > 500;
721 | };
722 |
723 | // `mostReadable`
724 | // Given a base color and a list of possible foreground or background
725 | // colors for that base, returns the most readable color.
726 | // *Example*
727 | // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000"
728 | tinycolor.mostReadable = function(baseColor, colorList) {
729 | var bestColor = null;
730 | var bestScore = 0;
731 | var bestIsReadable = false;
732 | for (var i=0; i < colorList.length; i++) {
733 |
734 | // We normalize both around the "acceptable" breaking point,
735 | // but rank brightness constrast higher than hue.
736 |
737 | var readability = tinycolor.readability(baseColor, colorList[i]);
738 | var readable = readability.brightness > 125 && readability.color > 500;
739 | var score = 3 * (readability.brightness / 125) + (readability.color / 500);
740 |
741 | if ((readable && ! bestIsReadable) ||
742 | (readable && bestIsReadable && score > bestScore) ||
743 | ((! readable) && (! bestIsReadable) && score > bestScore)) {
744 | bestIsReadable = readable;
745 | bestScore = score;
746 | bestColor = tinycolor(colorList[i]);
747 | }
748 | }
749 | return bestColor;
750 | };
751 |
752 |
753 | // Big List of Colors
754 | // ------------------
755 | //
756 | var names = tinycolor.names = {
757 | aliceblue: "f0f8ff",
758 | antiquewhite: "faebd7",
759 | aqua: "0ff",
760 | aquamarine: "7fffd4",
761 | azure: "f0ffff",
762 | beige: "f5f5dc",
763 | bisque: "ffe4c4",
764 | black: "000",
765 | blanchedalmond: "ffebcd",
766 | blue: "00f",
767 | blueviolet: "8a2be2",
768 | brown: "a52a2a",
769 | burlywood: "deb887",
770 | burntsienna: "ea7e5d",
771 | cadetblue: "5f9ea0",
772 | chartreuse: "7fff00",
773 | chocolate: "d2691e",
774 | coral: "ff7f50",
775 | cornflowerblue: "6495ed",
776 | cornsilk: "fff8dc",
777 | crimson: "dc143c",
778 | cyan: "0ff",
779 | darkblue: "00008b",
780 | darkcyan: "008b8b",
781 | darkgoldenrod: "b8860b",
782 | darkgray: "a9a9a9",
783 | darkgreen: "006400",
784 | darkgrey: "a9a9a9",
785 | darkkhaki: "bdb76b",
786 | darkmagenta: "8b008b",
787 | darkolivegreen: "556b2f",
788 | darkorange: "ff8c00",
789 | darkorchid: "9932cc",
790 | darkred: "8b0000",
791 | darksalmon: "e9967a",
792 | darkseagreen: "8fbc8f",
793 | darkslateblue: "483d8b",
794 | darkslategray: "2f4f4f",
795 | darkslategrey: "2f4f4f",
796 | darkturquoise: "00ced1",
797 | darkviolet: "9400d3",
798 | deeppink: "ff1493",
799 | deepskyblue: "00bfff",
800 | dimgray: "696969",
801 | dimgrey: "696969",
802 | dodgerblue: "1e90ff",
803 | firebrick: "b22222",
804 | floralwhite: "fffaf0",
805 | forestgreen: "228b22",
806 | fuchsia: "f0f",
807 | gainsboro: "dcdcdc",
808 | ghostwhite: "f8f8ff",
809 | gold: "ffd700",
810 | goldenrod: "daa520",
811 | gray: "808080",
812 | green: "008000",
813 | greenyellow: "adff2f",
814 | grey: "808080",
815 | honeydew: "f0fff0",
816 | hotpink: "ff69b4",
817 | indianred: "cd5c5c",
818 | indigo: "4b0082",
819 | ivory: "fffff0",
820 | khaki: "f0e68c",
821 | lavender: "e6e6fa",
822 | lavenderblush: "fff0f5",
823 | lawngreen: "7cfc00",
824 | lemonchiffon: "fffacd",
825 | lightblue: "add8e6",
826 | lightcoral: "f08080",
827 | lightcyan: "e0ffff",
828 | lightgoldenrodyellow: "fafad2",
829 | lightgray: "d3d3d3",
830 | lightgreen: "90ee90",
831 | lightgrey: "d3d3d3",
832 | lightpink: "ffb6c1",
833 | lightsalmon: "ffa07a",
834 | lightseagreen: "20b2aa",
835 | lightskyblue: "87cefa",
836 | lightslategray: "789",
837 | lightslategrey: "789",
838 | lightsteelblue: "b0c4de",
839 | lightyellow: "ffffe0",
840 | lime: "0f0",
841 | limegreen: "32cd32",
842 | linen: "faf0e6",
843 | magenta: "f0f",
844 | maroon: "800000",
845 | mediumaquamarine: "66cdaa",
846 | mediumblue: "0000cd",
847 | mediumorchid: "ba55d3",
848 | mediumpurple: "9370db",
849 | mediumseagreen: "3cb371",
850 | mediumslateblue: "7b68ee",
851 | mediumspringgreen: "00fa9a",
852 | mediumturquoise: "48d1cc",
853 | mediumvioletred: "c71585",
854 | midnightblue: "191970",
855 | mintcream: "f5fffa",
856 | mistyrose: "ffe4e1",
857 | moccasin: "ffe4b5",
858 | navajowhite: "ffdead",
859 | navy: "000080",
860 | oldlace: "fdf5e6",
861 | olive: "808000",
862 | olivedrab: "6b8e23",
863 | orange: "ffa500",
864 | orangered: "ff4500",
865 | orchid: "da70d6",
866 | palegoldenrod: "eee8aa",
867 | palegreen: "98fb98",
868 | paleturquoise: "afeeee",
869 | palevioletred: "db7093",
870 | papayawhip: "ffefd5",
871 | peachpuff: "ffdab9",
872 | peru: "cd853f",
873 | pink: "ffc0cb",
874 | plum: "dda0dd",
875 | powderblue: "b0e0e6",
876 | purple: "800080",
877 | red: "f00",
878 | rosybrown: "bc8f8f",
879 | royalblue: "4169e1",
880 | saddlebrown: "8b4513",
881 | salmon: "fa8072",
882 | sandybrown: "f4a460",
883 | seagreen: "2e8b57",
884 | seashell: "fff5ee",
885 | sienna: "a0522d",
886 | silver: "c0c0c0",
887 | skyblue: "87ceeb",
888 | slateblue: "6a5acd",
889 | slategray: "708090",
890 | slategrey: "708090",
891 | snow: "fffafa",
892 | springgreen: "00ff7f",
893 | steelblue: "4682b4",
894 | tan: "d2b48c",
895 | teal: "008080",
896 | thistle: "d8bfd8",
897 | tomato: "ff6347",
898 | turquoise: "40e0d0",
899 | violet: "ee82ee",
900 | wheat: "f5deb3",
901 | white: "fff",
902 | whitesmoke: "f5f5f5",
903 | yellow: "ff0",
904 | yellowgreen: "9acd32"
905 | };
906 |
907 | // Make it easy to access colors via `hexNames[hex]`
908 | var hexNames = tinycolor.hexNames = flip(names);
909 |
910 |
911 | // Utilities
912 | // ---------
913 |
914 | // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
915 | function flip(o) {
916 | var flipped = { };
917 | for (var i in o) {
918 | if (o.hasOwnProperty(i)) {
919 | flipped[o[i]] = i;
920 | }
921 | }
922 | return flipped;
923 | }
924 |
925 | // Return a valid alpha value [0,1] with all invalid values being set to 1
926 | function boundAlpha(a) {
927 | a = parseFloat(a);
928 |
929 | if (isNaN(a) || a < 0 || a > 1) {
930 | a = 1;
931 | }
932 |
933 | return a;
934 | }
935 |
936 | // Take input from [0, n] and return it as [0, 1]
937 | function bound01(n, max) {
938 | if (isOnePointZero(n)) { n = "100%"; }
939 |
940 | var processPercent = isPercentage(n);
941 | n = mathMin(max, mathMax(0, parseFloat(n)));
942 |
943 | // Automatically convert percentage into number
944 | if (processPercent) {
945 | n = parseInt(n * max, 10) / 100;
946 | }
947 |
948 | // Handle floating point rounding errors
949 | if ((math.abs(n - max) < 0.000001)) {
950 | return 1;
951 | }
952 |
953 | // Convert into [0, 1] range if it isn't already
954 | return (n % max) / parseFloat(max);
955 | }
956 |
957 | // Force a number between 0 and 1
958 | function clamp01(val) {
959 | return mathMin(1, mathMax(0, val));
960 | }
961 |
962 | // Parse a base-16 hex value into a base-10 integer
963 | function parseIntFromHex(val) {
964 | return parseInt(val, 16);
965 | }
966 |
967 | // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
968 | //
969 | function isOnePointZero(n) {
970 | return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
971 | }
972 |
973 | // Check to see if string passed in is a percentage
974 | function isPercentage(n) {
975 | return typeof n === "string" && n.indexOf('%') != -1;
976 | }
977 |
978 | // Force a hex value to have 2 characters
979 | function pad2(c) {
980 | return c.length == 1 ? '0' + c : '' + c;
981 | }
982 |
983 | // Replace a decimal with it's percentage value
984 | function convertToPercentage(n) {
985 | if (n <= 1) {
986 | n = (n * 100) + "%";
987 | }
988 |
989 | return n;
990 | }
991 |
992 | // Converts a decimal to a hex value
993 | function convertDecimalToHex(d) {
994 | return Math.round(parseFloat(d) * 255).toString(16);
995 | }
996 | // Converts a hex value to a decimal
997 | function convertHexToDecimal(h) {
998 | return (parseIntFromHex(h) / 255);
999 | }
1000 |
1001 | var matchers = (function() {
1002 |
1003 | //
1004 | var CSS_INTEGER = "[-\\+]?\\d+%?";
1005 |
1006 | //
1007 | var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
1008 |
1009 | // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
1010 | var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
1011 |
1012 | // Actual matching.
1013 | // Parentheses and commas are optional, but not required.
1014 | // Whitespace can take the place of commas or opening paren
1015 | var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
1016 | var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
1017 |
1018 | return {
1019 | rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
1020 | rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
1021 | hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
1022 | hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
1023 | hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
1024 | hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
1025 | hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
1026 | hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
1027 | };
1028 | })();
1029 |
1030 | // `stringInputToObject`
1031 | // Permissive string parsing. Take in a number of formats, and output an object
1032 | // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
1033 | function stringInputToObject(color) {
1034 |
1035 | color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
1036 | var named = false;
1037 | if (names[color]) {
1038 | color = names[color];
1039 | named = true;
1040 | }
1041 | else if (color == 'transparent') {
1042 | return { r: 0, g: 0, b: 0, a: 0, format: "name" };
1043 | }
1044 |
1045 | // Try to match string input using regular expressions.
1046 | // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
1047 | // Just return an object and let the conversion functions handle that.
1048 | // This way the result will be the same whether the tinycolor is initialized with string or object.
1049 | var match;
1050 | if ((match = matchers.rgb.exec(color))) {
1051 | return { r: match[1], g: match[2], b: match[3] };
1052 | }
1053 | if ((match = matchers.rgba.exec(color))) {
1054 | return { r: match[1], g: match[2], b: match[3], a: match[4] };
1055 | }
1056 | if ((match = matchers.hsl.exec(color))) {
1057 | return { h: match[1], s: match[2], l: match[3] };
1058 | }
1059 | if ((match = matchers.hsla.exec(color))) {
1060 | return { h: match[1], s: match[2], l: match[3], a: match[4] };
1061 | }
1062 | if ((match = matchers.hsv.exec(color))) {
1063 | return { h: match[1], s: match[2], v: match[3] };
1064 | }
1065 | if ((match = matchers.hex8.exec(color))) {
1066 | return {
1067 | a: convertHexToDecimal(match[1]),
1068 | r: parseIntFromHex(match[2]),
1069 | g: parseIntFromHex(match[3]),
1070 | b: parseIntFromHex(match[4]),
1071 | format: named ? "name" : "hex8"
1072 | };
1073 | }
1074 | if ((match = matchers.hex6.exec(color))) {
1075 | return {
1076 | r: parseIntFromHex(match[1]),
1077 | g: parseIntFromHex(match[2]),
1078 | b: parseIntFromHex(match[3]),
1079 | format: named ? "name" : "hex"
1080 | };
1081 | }
1082 | if ((match = matchers.hex3.exec(color))) {
1083 | return {
1084 | r: parseIntFromHex(match[1] + '' + match[1]),
1085 | g: parseIntFromHex(match[2] + '' + match[2]),
1086 | b: parseIntFromHex(match[3] + '' + match[3]),
1087 | format: named ? "name" : "hex"
1088 | };
1089 | }
1090 |
1091 | return false;
1092 | }
1093 |
1094 | // Node: Export function
1095 | if (typeof module !== "undefined" && module.exports) {
1096 | module.exports = tinycolor;
1097 | }
1098 | // AMD/requirejs: Define the module
1099 | else if (typeof define === 'function' && define.amd) {
1100 | define(function () {return tinycolor;});
1101 | }
1102 | // Browser: Expose to window
1103 | else {
1104 | window.tinycolor = tinycolor;
1105 | }
1106 |
1107 | })();
--------------------------------------------------------------------------------