TaskPaper Cobalt Theme

theme.less

// See http://guide.taskpaper.com/creating_themes.html to get started.

// Cobalt Atom Colors
// General colors
@syntax-text-color: #FFFFFF;
@syntax-cursor-color: #ffc600;
@syntax-selection-color: #0050a4;
@syntax-background-color: #193549;

// Guide colors
@syntax-wrap-guide-color: #3b5364;
@syntax-indent-guide-color: #3b5364;
@syntax-invisible-character-color: #3b5364;

// For find and replace markers
@syntax-result-marker-color: #ffc600;
@syntax-result-marker-color-selected: #FFFFFF;

// Gutter colors
@syntax-gutter-text-color: #FFFFFF;
@syntax-gutter-text-color-selected: #ffc600;
@syntax-gutter-background-color: #193549;
@syntax-gutter-background-color-selected: #1f4662;

// For git diff info. i.e. in the gutter
// These are static and were not extracted from your textmate theme
@syntax-color-renamed: #96CBFE;
@syntax-color-added: #A8FF60;
@syntax-color-modified: #E9C062;
@syntax-color-removed: #CC6666;

// Cobalt Official Colors
@cobalt-yellow: #ffc600;
@cobalt-orange: #ff9d00;
@cobalt-mint: #2affdf;
@cobalt-blue: #193549;
@cobalt-off-blue: #0d3a58; // (use on variable bgs)
@cobalt-dusty-blue: #35434d;
@cobalt-dark-blue: #15232d;
@cobalt-pink: #fb94ff;
@cobalt-light-blue: #9effff;

// Other Colors
@cobalt-custom-pinkish-1: #ff628c;
@cobalt-custom-pinkish-2: #ff5e8a;
@cobalt-custom-pinkish-3: #fe4377;

// UI Colors
@tint-color: @cobalt-light-blue;
@selection-color: @syntax-selection-color;
@invisibles-color: @syntax-invisible-character-color;
@drop-indicator-color: @syntax-color-modified;
@caret-color: @syntax-cursor-color;
@text-color: @syntax-text-color;
@background-color: @syntax-background-color;
@link-color: @cobalt-light-blue;
@text-strikethrough-color: @syntax-text-color;
@guide-line-color: @syntax-invisible-character-color;
@handle-color: @syntax-invisible-character-color;
@tag-color: @syntax-cursor-color;
@message-color: mix(@text-color, @background-color, 50%);
@handle-border-color: mix(@tint-color, @background-color, 20%);
@handle-border-color: @syntax-color-renamed;
@button-color: @syntax-color-renamed;
@note-color: darken(@text-color, 15%);
@note-link-color: lighten(@link-color, 5%);
@note-background-color: @background-color;

// Special tag colors
@tag-color-today: @cobalt-pink;
@tag-color-next: @cobalt-mint;
@tag-color-flag: @cobalt-orange;
@tag-content-color-flag: @cobalt-orange;
@done-color: @text-color;
@done-text-strikethrough-color: @text-strikethrough-color;
@tag-color-priority-high: @cobalt-custom-pinkish-2;
@tag-color-priority-low: @syntax-color-renamed;
@tag-content-color-priority-high: @cobalt-custom-pinkish-2;
@tag-content-color-priority-low: @syntax-color-renamed;

// UI Scale
@base-font-size: 16;
@user-font-size: $USER_FONT_SIZE;
@ui-scale: @user-font-size / @base-font-size;

@font-family: Avenir;
@line-height-multiple: 1.2;

editor {
  color: @text-color;
  ui-scale: @ui-scale;
  font-size: @user-font-size;
  font-family: @font-family;
  background-color: @background-color;
  line-height-multiple: @line-height-multiple;
  item-indent: 20 * @ui-scale;
  caret-width: floor(2 * @ui-scale);
  caret-color: @caret-color;
  drop-indicator-color: @drop-indicator-color;
  invisibles-color: @invisibles-color;
  folded-items-label: "¶—¶";
  filtered-items-label: "¶—¶";
  item-handle-size: floor(7 * @ui-scale);
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: floor(1 * @ui-scale);
  message-color: @message-color;
}

sidebar {
  search-item-prefix: ":: ";
}

item {
  handle-color: none;
  handle-border-color: @handle-border-color;
  handle-border-width: floor(1 * @ui-scale);
}

item[collapsed] {
  handle-color: @tint-color;
  handle-border-color: none;
}

item[filtered] {
  handle-color: @handle-color;
  handle-border-color: none;
}

item[empty] {
  handle-color: none;
  handle-border-color: none;
}

item[data-type="note"] {
  > run[content] {
    font-style: normal;
    color: @note-color;
    background-color: @note-background-color;
  }
  > run[link] {
    color: @note-link-color;
    font-style: normal;
  }
}

item[data-type="task"] {
  font-style: normal;
}

item[data-type="project"] {
  font-weight: bold;
  line-height-multiple: 1.5;
}

item[data-done] {
  > run[content] {
    text-strikethrough: NSUnderlineStyleSingle;
    text-strikethrough-color: @text-strikethrough-color;
  }
}

run[link] {
  cursor: pointer;
  color: @link-color;
}

run[link^="button"] {
  color: @button-color
}

run[link^="filter"] {
  color: @text-color;
}

run[tag] {
  font-size: @user-font-size;
  font-style: normal;
  font-weight: normal;
  color: @tag-color;
}

// Special tags

item[data-today], run[tag=data-today], item[data-urgent], run[tag=data-urgent] {
  color: @tag-color-today;
}

run[tag=data-today], run[tag=data-urgent] {
	font-weight: bold;
}

run[tag=data-flag] {
  color: @tag-color-flag;
  font-weight: bold;
}

item[data-flag] > run[content] {
  color: @tag-content-color-flag;
}

item[data-done], run[tag=data-done] {
  color: @done-color;
  > run[content] {
    text-strikethrough: NSUnderlineStyleSingle;
  	text-strikethrough-color: @done-text-strikethrough-color;
  }
}

item[data-next], run[tag=data-next] {
	color: @tag-color-next;
}

item[data-priority] {
  // Just the tag values (between the parentheses).
  > run[tagvalue=high], > run[tagvalue="1"] {
    color: @tag-color-priority-high;
    font-weight: bold;
  }
  > run[tagvalue=low], > run[tagvalue="5"] {
    color: @tag-color-priority-low;
  }
}

item[data-priority=high], item[data-priority="1"] {
  // The entire item with the relevant tag.
  color: @tag-content-color-priority-high;
}

item[data-priority=low] > run[content], item[data-priority="5"] > run[content] {
  color: @tag-content-color-priority-low;
}

sidebar {
  search-item-prefix: "🔍 ";
}