colibri.vim/swatch.html at master · archseer/colibri.vim · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML>
<head>
  <meta charset="utf-8">
  <title>colibri.vim</title>
  <style type="text/css">
    .c1 { background-color: #FFFFFF }
    .c8 { background-color: #ebeafa }
    .c2 { background-color: #a4a0e8 }
    .c3 { background-color: #281733 }
    .c4 { background-color: #3b224c }
    .c4.alt { background-color: #311D40 }
    .c5 { background-color: #452859 }
    .c6 { background-color: #dbbfef }
    .c7 { background-color: #5a5977 }

    .error { background-color: #f47868 }
    .warning { background-color: #ffcd1c }

    .highlight { background-color: #802F00 }

    .g1 { background-color: #FFF }
    .g2 { background-color: #ccc }
    .g3 { background-color: #9FF28F }
    .g3.alt.alt1 { background-color: #81CECF}
    .g3.alt.alt2 { background-color: #7FB998}
    .g3.alt.alt3 { background-color: #5fe7b7}
    .g4 { background-color: #dbbfef }
    .g5 { background-color: #ECCDBA }
    .g6 { background-color: #697C81 }
    .g7 { background-color: #E8DCA0 }
    .g8 { background-color: #EFBA5D }

    .diff1 { background: #35BF86 }
    .diff2 { background: #F22C86 }
    .diff3 { background: #69A0F3 }
    .diff3 { background: #6F44F0 }
    .diff4 { background: #3B0FBF }

    body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin: 1rem }

    .logo {
      margin: 0 auto 1rem;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iQmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0zNS43LDI5LjRjMC4xLTAuOSwwLjItNC4xLTEuMS03LjFjOS4yLTguNiw1LjItMTQuOCw1LTE1LjFjLTAuMS0wLjItMC4zLTAuMy0wLjUtMC4zICAgYy0wLjIsMC0wLjQsMC4xLTAuNiwwLjJMMjUuMiwxOS4yYy0xLjktMS44LTQuOS0xLjgtNi43LDAuMWwtMi42LDIuNkg4LjZjLTAuNCwwLTAuOCwwLjMtMC44LDAuOGMwLDAuNCwwLjMsMC44LDAuOCwwLjhoNy42ICAgYzAuMSwwLDAuMiwwLDAuMy0wLjFjMC4xLDAsMC4yLTAuMSwwLjItMC4ybDAuOS0wLjlsMS45LTEuOWMxLjMtMS4zLDMuNC0xLjMsNC43LDBjMCwwLDAuMSwwLjEsMC4xLDAuMWMwLDAsMC4xLDAuMSwwLjIsMC4yICAgYzAsMCwwLjEsMC4xLDAuMSwwLjFjMCwwLDAsMCwwLjEsMC4xYzAsMCwwLjEsMC4xLDAuMSwwLjFDMjQuOSwyMSwyNSwyMSwyNS4yLDIxYzAuMSwwLDAuMSwwLDAuMiwwYzAsMCwwLDAsMCwwICAgYzAuMSwwLDAuMSwwLDAuMi0wLjFjMCwwLDAuMSwwLDAuMS0wLjFMMzguOCw4LjljMC43LDEuOSwxLjMsNy4yLTcuMiwxNC4xYy0wLjMsMC4zLTAuNCwwLjctMC4xLDEuMWMwLjIsMC4yLDAuNCwwLjMsMC42LDAuMyAgIGMwLjIsMCwwLjMtMC4xLDAuNS0wLjJjMC4zLTAuMywwLjYtMC41LDAuOS0wLjhjMS4xLDMsMC43LDYuMSwwLjcsNi4xYzAsMCwwLDAuMSwwLDAuMWMwLDAsMCwwLjEsMCwwLjFjMCwwLjEsMCwwLjEsMC4xLDAuMiAgIGMwLDAsMCwwLjEsMCwwLjFsMy42LDUuNWwtNy43LDUuMWwwLjMtNi44YzAuNCwwLDEtMC4xLDEuNS0wLjNjMC40LTAuMSwwLjYtMC42LDAuNS0xYy0wLjEtMC40LTAuNi0wLjYtMS0wLjUgICBjLTAuOSwwLjMtMS43LDAuMS0xLjcsMC4xYzAsMC0wLjEsMC0wLjEsMGMtMS40LTAuMi0yLjYtMS4zLTMuMy0xLjljLTEuNi0xLjYtMy40LTQtMy40LTRjMCwwLTAuMSwwLTAuMS0wLjFjMCwwLTAuMS0wLjEtMC4xLTAuMSAgIGMwLDAtMC4xLDAtMC4xLTAuMWMwLDAtMC4xLDAtMC4xLDBjLTAuMSwwLTAuMSwwLTAuMiwwYzAsMC0wLjEsMC0wLjEsMGMtMSwwLjEtMS45LTAuMi0yLjctMC44YzAsMC0wLjEtMC4xLTAuMS0wLjFsLTEtMSAgIGMtMC4zLTAuMy0wLjgtMC4zLTEuMSwwYy0wLjMsMC4zLTAuMywwLjgsMCwxLjFsMS4yLDEuMmMwLjEsMC4xLDAuMSwwLjEsMC4yLDAuMWMwLjksMC43LDEuOSwxLjEsMy4xLDEuMWMwLjEsMCwwLjIsMCwwLjIsMCAgIGMwLjUsMC43LDEuOSwyLjUsMy4zLDMuOGMwLjcsMC43LDIsMS45LDMuNiwyLjJsLTAuNCw4LjRjMCwwLjMsMC4xLDAuNSwwLjQsMC43YzAuMSwwLjEsMC4yLDAuMSwwLjQsMC4xYzAuMSwwLDAuMywwLDAuNC0wLjEgICBsOS42LTYuM2MwLjItMC4xLDAuMy0wLjMsMC4zLTAuNXMwLTAuNC0wLjEtMC42TDM1LjcsMjkuNHoiLz48Y2lyY2xlIGN4PSIyMS42IiBjeT0iMjIuNSIgcj0iMS4xIi8+PC9nPjwvc3ZnPg==");
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 50%;
      height: 100%;
      height: 200px;
      max-width: 430px;
      width: 100%;
    }
    .title { font-weight: 400; text-align: center; font-size: 2rem; margin: 2rem }
    .title a { color: inherit }
    h1 { font-weight: 300 }
    section { display: flex; width: 100%; height: 200px; }
    section > div {
      flex: 2;
      color: rgba(0,0,0,.35);
      padding: 1rem;
    }
    .alt { flex: 1; margin: 1.5rem 1rem }
    div span { font-size: .75rem; display: block; opacity: .75 }
    .invert { color: rgba(255,255,255,.35)}
  </style>
</head>
<body>

  <div class="title">
    <a href="https://github.com/archSeer/colibri.vim/graphs/traffic">
      <div class="logo"></div>
      colibri.vim
    </a>
  </div>

  <h1>Shades</h1>
  <section class="shades">
    <div class="c1">white<span>fg1</span></div>
    <div class="c8">white lilac<span>fg???</span></div>
    <div class="c6">lilac<span>fg3</span></div>
    <div class="c2">lavender<span>fg2</span></div>
    <div class="c7 invert">comet<span>lineNr</span></div>
    <div class="c5 invert">bossanova<span>bg1</span></div>
    <div class="c4 invert">midnight<span>bg2</span></div>
    <div class="c3 invert">revolver<span>bg3</span></div>
  </section>

  <h1>Syntax</h1>
  <section class="syntax">
    <div class="g1">white<span>booleans, functions, builtins, properties</span></div>
    <div class="g2">silver<span>strings</span></div>
    <div class="g6">sirocco<span>comments</span></div>
  </section>
  <section class="syntax">
    <div class="g3">mint (complement 1)<span>keywords</span></div>
    <div class="g4">lilac (complement 2)<span>constants</span></div>
    <div class="g5">almond<span>keywords</span></div>
    <div class="g7">chamois<span>numbers</span></div>
    <div class="g8">honey<span>special</span></div>
  </section>

  <h1>Warnings</h1>
  <section class="warnings">
    <div class="error">apricot<span>error</span></div>
    <div class="warning">lightning<span>warning</span></div>
    <div class="diff3">delta<span>info</span></div>
  </section>

  <h1>Highlight</h1>
  <section class="highlight">
    <div class="highlight">cedar</div>
  </section>

  <h1>Diff</h1>
  <section class="diff">
    <div class="diff1">plus<span>add</span></div>
    <div class="diff2">minus<span>remove</span></div>
    <div class="diff3">delta<span>change</span></div>
    <div class="diff4"></div>
  </section>

  <h1>Alternatives (sandbox)</h1>
  <section class="alts">
    <div class="g3">mint</div>
    <div class="g3 alt alt1">sinbad</div>
    <div class="g3 alt alt2">tree</div>
    <div class="g3 alt alt3">turqoise</div>
  </section>
</body>