styles.less

// tool-bar
.tool-bar {
  @toolbar-size: 32px;
  align-items: center;

  & {
    width: @toolbar-size;
  }

  &:hover .tool-bar-btn.window-ctrl {
    background-position: 50% 50%;
  }

  &::after {
    width: 100%;
  }

  button.tool-bar-btn {
    // reset
    & {
      border-radius: 0;
      margin: 0;
      border: 0;
    }

    // window controls
    &.window-ctrl {
      width: 13px;
      height: 13px;
      margin: 10px auto;
      border-radius: 50%;
      background: currentColor;
      cursor: default;
      border: 1px solid rgba(0,0,0,0.2);
      background-size: 9px 9px;
      background-position: -100px 50%;
      background-repeat: no-repeat;

      &:focus,
      &:hover {
        border-color: rgba(0,0,0,0.2);
      }

      &::before {
        display: none;
      }

      // window controls colors
      &.red {
        background-color: #fc5753;
        background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 18 18.5 L 13.6 23 L 27 36.5 L 40.5 50 L 27 63.5 L 13.5 77 L 18.3 81.7 L 23 86.5 L 36.5 73 L 50 59.5 L 63.5 73 L 77 86.5 L 81.7 81.7 L 86.5 77 L 73 63.5 L 59.5 50 L 73 36.5 L 86.5 23 L 81.7 18.3 L 77 13.5 L 63.5 27 L 50 40.5 L 36.7 27.2 C 29.4 20 23.2 14 22.9 14 C 22.7 14 20.4 16 18 18.5 Z" fill="rgba(0,0,0,0.6)"/></svg>');
        &:active {
          background-color: darken(#fc5753, 25);
        }
      }

      &.green {
        background-color: #fdbc40;
        background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 1 50 L 1 57.5 L 50 57.5 L 99 57.5 L 99 50 L 99 42.5 L 50 42.5 L 1 42.5 L 1 50 Z" fill="rgba(0,0,0,0.6)"/></svg>');
        &:active {
          background-color: darken(#fdbc40, 25);
        }
      }

      &.yellow {
        background-color: #33c748;
        background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 58.5 40.7 C 74.3 56.8 87.6 70.2 88.1 70.3 C 88.7 70.5 88.9 58.7 88.8 41.3 L 88.5 12 L 59.1 11.7 L 29.8 11.5 L 58.5 40.7 Z" fill="rgba(0,0,0,0.6)"/><path d="M 11.2 59.2 L 11.5 88 L 40.4 88.3 L 69.2 88.5 L 41 59.8 C 25.5 43.9 12.4 30.8 11.9 30.7 C 11.3 30.5 11.1 41.6 11.2 59.2 Z" fill="rgba(0,0,0,0.6)"/></svg>');
        &:active {
          background-color: darken(#33c748, 25);
        }
      }
    }

    // dimensions
    & {
      width: 100%;
      height: @toolbar-size;
    }

    // cursor
    &::after {
      cursor: pointer;
    }

    // Disabled
    &.disabled {
      opacity: .5;
    }

    // Hover
    &:hover:not(.disabled) {
      opacity: 1;
    }
  }
}

toolbar.cson

[
  {
    "type": "button",
    "callback": "window:close",
    "icon": "x",
    "className": "window-ctrl, red"
  },
  {
    "type": "button",
    "callback": "application:minimize",
    "icon": "dash",
    "className": "window-ctrl, green"
  },
  {
    "type": "button",
    "callback": "window:toggle-full-screen",
    "icon": "screen-full",
    "className": "window-ctrl, yellow"
  },
  {
    "type": "spacer"
  }
// ...
]