WorkFlowy inspired theme


#1

Here is my TaskPaper theme based on WorkFlowy style:

The LESS code:

// Base Size

@base-font-size: 15;
@user-font-size: (1.1 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// UI Colors

@tint-color: rgb(70%,84%,99%);
@background-color: rgb(100%,100%,100%);
@selection-color: mix(@tint-color, @background-color, 50%);
@invisibles-color: mix(@tint-color, @background-color, 100%);
@searchbar-background-color: rgb(92%,92%,92%);
@searchbar-error-text-color: rgb(100%,0%,0%);

// Base Text

@font-family: .SF NS Text, Helvetica;
@text-color: rgb(25%,25%,25%);
@text-dimmed-color: mix(@text-color, @background-color, 30%);
@line-height-multiple: 1.15;

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(rgb(0%,0%,0%), @background-color, 55%);
@handle-border-color: mix(rgb(0%,0%,0%), @background-color, 12%);
@handle-border-secondary-color: mix(rgb(0%,0%,0%), @background-color, 25%);

// Guide Lines

@guide-line-color: mix(rgb(0%,0%,0%), @background-color, 8%);
@guide-line-width: floor(1.5 * @ui-scale);

// Elements

window {
  appearance: NSAppearanceNameVibrantLight;
}

sidebar {
  appearance: NSAppearanceNameVibrantLight;
}

searchbar {
  appearance: NSAppearanceNameVibrantLight;
  background-color: @searchbar-background-color;
  color: mix(rgb(10%,10%,10%), @background-color, 90%);
  placeholder-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  secondary-text-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  error-text-color: mix(@searchbar-error-text-color, @background-color, 100%);
}

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: floor(28 * @ui-scale);
  caret-width: floor(2 * @ui-scale);
  caret-color: rgb(8%,54%,79%);
  drop-indicator-color: @tint-color;
  fold-color: @tint-color;
  invisibles-color: @invisibles-color;
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: @guide-line-width;
  top-padding-percent: 0%;
  bottom-padding-percent: 25%;
  typewriter-scroll-percent: 25%;
}

item {
  handle-size: @handle-size;
  handle-border-width: @handle-border-width;
}

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

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

item[expanded] {
  handle-color: @handle-color;
  handle-border-color: @background-color;
}

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

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

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

item[hoisted] {
  line-height-multiple: @line-height-multiple * 2;
  handle-color: none;
  handle-border-color: none;
}

item[mouseOverHandle] {
  handle-size: @handle-size + (1.2 * @ui-scale);
  handle-border-color: @handle-border-secondary-color;
}

item[mouseOverHandle][leaf] {
  handle-border-color: @handle-secondary-color;
}

item[data-type="project"] {
  font-style: normal;
  font-weight: bold;
  paragraph-spacing-before: @ui-scale * 6;
  paragraph-spacing-after: @ui-scale * 4;
}

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

item[data-type="note"] {
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

item[data-done] {
  > run[content] {
      color: @text-dimmed-color;
      text-strikethrough: NSUnderlineStyleSingle;
      text-strikethrough-color: @text-dimmed-color;
    }
  > run[link^="button"] {
      color: @text-dimmed-color;
    }
  > run[tag] {
      color: @text-dimmed-color;
    }

}

run[link] {
  cursor: pointer;
  // color: rgb(10%,63%,85%);
  color: rgb(8%,54%,79%);
  text-decoration: underline;
}

run[link^="button"] {
  color: rgb(0%,0%,0%);
  text-decoration: none;
}

run[link^="filter"] {
  text-decoration: none;
}

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

run[tag="data-na"] {
  color: rgb(99%,48%,17%);
}

TaskPaper Extensions Wiki
#2

I appreciate that it is so easy to share and alter style sheets in TaskPaper. I made some quick tweaks to this Work-Flowy style sheet as I am using it primarily as a replacement for how I have been using nvAlt. That is, not as my main task manager but as a repository of sorts of ideas, links for further research, etc. .

Because of this I wanted a similar background to how I had it in nvAlt, sort of a beige color. I also had to darken the overly light notes text as it was a bit hard to read. I was surprised that when I changed the @base-font-size to a larger value (from 15 to 22), it did not change the actual font size but instead compressed the left text margin - which was good.

// Base Size

@base-font-size: 22;
@user-font-size: (1.12 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// UI Colors

@tint-color: rgb(70%,84%,99%);
@background-color: mix(orange, beige, 15%);
@selection-color: mix(@tint-color, @background-color, 50%);
@invisibles-color: mix(@tint-color, @background-color, 100%);
@searchbar-background-color: rgb(92%,92%,92%);
@searchbar-error-text-color: rgb(100%,0%,0%);

// Base Text

/* @font-family: Helvetica; */
@font-family: .SF NS Text;
@text-color: mix(black,white,90%);
@text-dimmed-color: mix(@text-color, @background-color, 90%);
@line-height-multiple: 1.1;

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(rgb(0%,0%,0%), @background-color, 55%);
@handle-border-color: mix(rgb(0%,0%,0%), @background-color, 12%);
@handle-border-secondary-color: mix(rgb(0%,0%,0%), @background-color, 25%);

// Guide Lines

@guide-line-color: mix(rgb(0%,0%,0%), @background-color, 8%);
@guide-line-width: floor(1.5 * @ui-scale);

// Elements

window {
  appearance: NSAppearanceNameVibrantLight;
}

sidebar {
  appearance: NSAppearanceNameVibrantLight;
}

searchbar {
  appearance: NSAppearanceNameVibrantLight;
  background-color: @searchbar-background-color;
  color: mix(rgb(10%,10%,10%), @background-color, 90%);
  placeholder-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  secondary-text-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  error-text-color: mix(@searchbar-error-text-color, @background-color, 100%);
}

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: floor(28 * @ui-scale);
  caret-width: floor(2 * @ui-scale);
  caret-color: rgb(37%,51%,65%);
  drop-indicator-color: @tint-color;
  invisibles-color: @invisibles-color;
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: @guide-line-width;
  top-padding-percent: 0%;
  bottom-padding-percent: 25%;
  typewriter-scroll-percent: 25%;
}

item {
  handle-size: @handle-size;
  handle-border-width: @handle-border-width;
}

item[expanded] {
  handle-color: @handle-color;
  handle-border-color: @background-color;
}

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

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

item[mouseOverHandle] {
  handle-border-color: @handle-border-secondary-color;
}

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

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

item[hoisted] {
  line-height-multiple: @line-height-multiple * 2;
  handle-color: none;
  handle-border-color: none;
}

item[data-type="project"] {
  font-style: normal;
  font-weight: bold;
  paragraph-spacing-before: 6.0;
  paragraph-spacing-after: 2.0;
}

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

item[data-type="note"] {
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

item[data-done] {
  > run[content] {
      color: @text-dimmed-color;
      text-strikethrough: NSUnderlineStyleSingle;
      text-strikethrough-color: @text-dimmed-color;
    }
  > run[link^="button"] {
      color: @text-dimmed-color;
    }
  > run[tag] {
      color: @text-dimmed-color;
    }

}

run[link] {
  cursor: pointer;
  color: rgb(8%,54%,68%);
  text-decoration: underline;
}

run[link^="button"] {
  color: rgb(0%,0%,0%);
  text-decoration: none;
}

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

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

run[tag="data-na"] {
  color: rgb(99%,52%,14%);
}

run[tag="data-due"] {
  /* color: rgb(43%,57%,81%); */
}


#3

Here is another version of the WorkFlowy-inspired style sheet with a “warm” background and adapted colors:

The LESS code:

// Base Size

@base-font-size: 15;
@user-font-size: (1.1 * $USER_FONT_SIZE);
@ui-scale: @user-font-size / @base-font-size;

// UI Colors

@tint-color: rgb(70%,84%,99%);
@background-color: rgb(99%,98%,96%);
@selection-color: mix(@tint-color, @background-color, 50%);
@invisibles-color: mix(@tint-color, @background-color, 100%);
@searchbar-background-color: rgb(92%,92%,92%);
@searchbar-error-text-color: rgb(100%,0%,0%);

// Base Text

@font-family: .SF NS Text, Helvetica;
@text-color: rgb(25%,25%,25%);
@text-dimmed-color: mix(@text-color, @background-color, 30%);
@line-height-multiple: 1.15;

// Handles

@handle-size: floor(16 * @ui-scale);
@handle-border-width: floor(5 * @ui-scale);
@handle-color: mix(rgb(0%,0%,0%), @background-color, 55%);
@handle-border-color: mix(rgb(0%,0%,0%), @background-color, 12%);
@handle-border-secondary-color: mix(rgb(0%,0%,0%), @background-color, 25%);

// Guide Lines

@guide-line-color: mix(rgb(0%,0%,0%), @background-color, 8%);
@guide-line-width: floor(1.5 * @ui-scale);

// Elements

window {
  appearance: NSAppearanceNameVibrantLight;
}

sidebar {
  appearance: NSAppearanceNameVibrantLight;
}

searchbar {
  appearance: NSAppearanceNameVibrantLight;
  background-color: @searchbar-background-color;
  color: mix(rgb(10%,10%,10%), @background-color, 90%);
  placeholder-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  secondary-text-color: mix(rgb(10%,10%,10%), @background-color, 50%);
  error-text-color: mix(@searchbar-error-text-color, @background-color, 100%);
}

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: floor(28 * @ui-scale);
  caret-width: floor(2 * @ui-scale);
  caret-color: rgb(8%,54%,79%);
  drop-indicator-color: @tint-color;
  fold-color: @tint-color;
  invisibles-color: @invisibles-color;
  selection-background-color: @selection-color;
  guide-line-color: @guide-line-color;
  guide-line-width: @guide-line-width;
  top-padding-percent: 0%;
  bottom-padding-percent: 25%;
  typewriter-scroll-percent: 0%;
}

item {
  handle-size: @handle-size;
  handle-border-width: @handle-border-width;
}

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

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

item[expanded] {
  handle-color: @handle-color;
  handle-border-color: @background-color;
}

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

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

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

item[hoisted] {
  line-height-multiple: @line-height-multiple * 2;
  handle-color: none;
  handle-border-color: none;
}

item[mouseOverHandle] {
  handle-size: @handle-size + (1.2 * @ui-scale);
  handle-border-color: @handle-border-secondary-color;
}

item[mouseOverHandle][leaf] {
  handle-border-color: @handle-secondary-color;
}

item[data-type="project"] {
  font-style: normal;
  font-weight: bold;
  paragraph-spacing-before: @ui-scale * 6;
  paragraph-spacing-after: @ui-scale * 4;
}

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

item[data-type="note"] {
  font-style: normal;
  font-weight: normal;
  color: @text-dimmed-color;
}

item[data-done] {
  > run[content] {
      color: @text-dimmed-color;
      text-strikethrough: NSUnderlineStyleSingle;
      text-strikethrough-color: @text-dimmed-color;
    }
  > run[link^="button"] {
      color: @text-dimmed-color;
    }
  > run[tag] {
      color: @text-dimmed-color;
    }

}

run[link] {
  cursor: pointer;
  color: rgb(8%,54%,79%);
  text-decoration: underline;
}

run[link^="button"] {
  color: rgb(0%,0%,0%);
  text-decoration: none;
}

run[link^="filter"] {
  text-decoration: none;
}

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

run[tag="data-na"] {
  color: rgb(99%,48%,17%);
}

run[tag="data-due"] {
  color: rgb(13%,74%,92%);
}

run[tag="data-wip"] {
  color: rgb(9%,58%,72%);
}

run[tag="data-waiting"] {
  color: rgb(43%,56%,64%);
}

#4

@saf-dimity what does the na tag mean in your workflow? Just curious


#5

I’m guessing that na is short for Next Action.


#6

that makes sense!


#7

Yes, “na” means “Next Action”.