hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Document palette colors #103

Merged
MartinFouilleul merged 1 commits from ilidemi/orca:document-colors into main 2023-09-14 07:42:21 +00:00
Conversation 0 Commits 1 Files Changed 4 +1020 -15
4 changed files with 1020 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
doc/UIColors.md Normal file
View File

@ -0,0 +1,7 @@
# UI Colors
## Dark (default theme)
![Dark theme colors](images/UIDarkPalette.svg)
## Light
![Light theme colors](images/UILightPalette.svg)

500
doc/images/UIDarkPalette.svg Normal file
View File

@ -0,0 +1,500 @@
<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="1200" height="1050"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
text {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"
}
]]>
</style>
<rect x="0" y="0" width="150" height="50" style="fill: #6C090B" />
<text x="5" y="29" style="font-size: 16px; fill: #fff3ef" >red0</text>
<text x="5" y="45" style="font-size: 12px; fill: #fff3ef" >#6C090B</text>
<rect x="0" y="50" width="150" height="50" style="fill: #901110" />
<text x="5" y="79" style="font-size: 16px; fill: #fff3ef" >red1</text>
<text x="5" y="95" style="font-size: 12px; fill: #fff3ef" >#901110</text>
<rect x="0" y="100" width="150" height="50" style="fill: #B42019" />
<text x="5" y="129" style="font-size: 16px; fill: #fff3ef" >red2</text>
<text x="5" y="145" style="font-size: 12px; fill: #fff3ef" >#B42019</text>
<rect x="0" y="150" width="150" height="50" style="fill: #D73324" />
<text x="5" y="179" style="font-size: 16px; fill: #fff3ef" >red3</text>
<text x="5" y="195" style="font-size: 12px; fill: #fff3ef" >#D73324</text>
<rect x="0" y="200" width="150" height="50" style="fill: #FB4932" />
<text x="5" y="229" style="font-size: 16px; fill: #fff3ef" >red4</text>
<text x="5" y="245" style="font-size: 12px; fill: #fff3ef" >#FB4932</text>
<rect x="0" y="250" width="150" height="50" style="fill: #FC725A" />
<text x="5" y="279" style="font-size: 16px; fill: #6c090b" >red5</text>
<text x="5" y="295" style="font-size: 12px; fill: #6c090b" >#FC725A</text>
<rect x="0" y="300" width="150" height="50" style="fill: #FD9983" />
<text x="5" y="329" style="font-size: 16px; fill: #6c090b" >red6</text>
<text x="5" y="345" style="font-size: 12px; fill: #6c090b" >#FD9983</text>
<rect x="0" y="350" width="150" height="50" style="fill: #FDBEAC" />
<text x="5" y="379" style="font-size: 16px; fill: #6c090b" >red7</text>
<text x="5" y="395" style="font-size: 12px; fill: #6c090b" >#FDBEAC</text>
<rect x="0" y="400" width="150" height="50" style="fill: #FEE0D5" />
<text x="5" y="429" style="font-size: 16px; fill: #6c090b" >red8</text>
<text x="5" y="445" style="font-size: 12px; fill: #6c090b" >#FEE0D5</text>
<rect x="0" y="450" width="150" height="50" style="fill: #FFF3EF" />
<text x="5" y="479" style="font-size: 16px; fill: #6c090b" >red9</text>
<text x="5" y="495" style="font-size: 12px; fill: #6c090b" >#FFF3EF</text>
<rect x="150" y="0" width="150" height="50" style="fill: #551F03" />
<text x="155" y="29" style="font-size: 16px; fill: #fff9ed" >orange0</text>
<text x="155" y="45" style="font-size: 12px; fill: #fff9ed" >#551F03</text>
<rect x="150" y="50" width="150" height="50" style="fill: #803506" />
<text x="155" y="79" style="font-size: 16px; fill: #fff9ed" >orange1</text>
<text x="155" y="95" style="font-size: 12px; fill: #fff9ed" >#803506</text>
<rect x="150" y="100" width="150" height="50" style="fill: #AA500A" />
<text x="155" y="129" style="font-size: 16px; fill: #fff9ed" >orange2</text>
<text x="155" y="145" style="font-size: 12px; fill: #fff9ed" >#AA500A</text>
<rect x="150" y="150" width="150" height="50" style="fill: #D56F0F" />
<text x="155" y="179" style="font-size: 16px; fill: #fff9ed" >orange3</text>
<text x="155" y="195" style="font-size: 12px; fill: #fff9ed" >#D56F0F</text>
<rect x="150" y="200" width="150" height="50" style="fill: #FF9214" />
<text x="155" y="229" style="font-size: 16px; fill: #fff9ed" >orange4</text>
<text x="155" y="245" style="font-size: 12px; fill: #fff9ed" >#FF9214</text>
<rect x="150" y="250" width="150" height="50" style="fill: #FFAE43" />
<text x="155" y="279" style="font-size: 16px; fill: #551f03" >orange5</text>
<text x="155" y="295" style="font-size: 12px; fill: #551f03" >#FFAE43</text>
<rect x="150" y="300" width="150" height="50" style="fill: #FFC772" />
<text x="155" y="329" style="font-size: 16px; fill: #551f03" >orange6</text>
<text x="155" y="345" style="font-size: 12px; fill: #551f03" >#FFC772</text>
<rect x="150" y="350" width="150" height="50" style="fill: #FFDDA1" />
<text x="155" y="379" style="font-size: 16px; fill: #551f03" >orange7</text>
<text x="155" y="395" style="font-size: 12px; fill: #551f03" >#FFDDA1</text>
<rect x="150" y="400" width="150" height="50" style="fill: #FFEFD0" />
<text x="155" y="429" style="font-size: 16px; fill: #551f03" >orange8</text>
<text x="155" y="445" style="font-size: 12px; fill: #551f03" >#FFEFD0</text>
<rect x="150" y="450" width="150" height="50" style="fill: #FFF9ED" />
<text x="155" y="479" style="font-size: 16px; fill: #551f03" >orange9</text>
<text x="155" y="495" style="font-size: 12px; fill: #551f03" >#FFF9ED</text>
<rect x="300" y="0" width="150" height="50" style="fill: #512E09" />
<text x="305" y="29" style="font-size: 16px; fill: #fefbed" >amber0</text>
<text x="305" y="45" style="font-size: 12px; fill: #fefbed" >#512E09</text>
<rect x="300" y="50" width="150" height="50" style="fill: #794B0F" />
<text x="305" y="79" style="font-size: 16px; fill: #fefbed" >amber1</text>
<text x="305" y="95" style="font-size: 12px; fill: #fefbed" >#794B0F</text>
<rect x="300" y="100" width="150" height="50" style="fill: #A16B16" />
<text x="305" y="129" style="font-size: 16px; fill: #fefbed" >amber2</text>
<text x="305" y="145" style="font-size: 12px; fill: #fefbed" >#A16B16</text>
<rect x="300" y="150" width="150" height="50" style="fill: #CA8F1E" />
<text x="305" y="179" style="font-size: 16px; fill: #fefbed" >amber3</text>
<text x="305" y="195" style="font-size: 12px; fill: #fefbed" >#CA8F1E</text>
<rect x="300" y="200" width="150" height="50" style="fill: #F2B726" />
<text x="305" y="229" style="font-size: 16px; fill: #fefbed" >amber4</text>
<text x="305" y="245" style="font-size: 12px; fill: #fefbed" >#F2B726</text>
<rect x="300" y="250" width="150" height="50" style="fill: #F5CA50" />
<text x="305" y="279" style="font-size: 16px; fill: #512e09" >amber5</text>
<text x="305" y="295" style="font-size: 12px; fill: #512e09" >#F5CA50</text>
<rect x="300" y="300" width="150" height="50" style="fill: #F7DB7A" />
<text x="305" y="329" style="font-size: 16px; fill: #512e09" >amber6</text>
<text x="305" y="345" style="font-size: 12px; fill: #512e09" >#F7DB7A</text>
<rect x="300" y="350" width="150" height="50" style="fill: #FAEAA6" />
<text x="305" y="379" style="font-size: 16px; fill: #512e09" >amber7</text>
<text x="305" y="395" style="font-size: 12px; fill: #512e09" >#FAEAA6</text>
<rect x="300" y="400" width="150" height="50" style="fill: #FCF6D2" />
<text x="305" y="429" style="font-size: 16px; fill: #512e09" >amber8</text>
<text x="305" y="445" style="font-size: 12px; fill: #512e09" >#FCF6D2</text>
<rect x="300" y="450" width="150" height="50" style="fill: #FEFBED" />
<text x="305" y="479" style="font-size: 16px; fill: #512e09" >amber9</text>
<text x="305" y="495" style="font-size: 12px; fill: #512e09" >#FEFBED</text>
<rect x="450" y="0" width="150" height="50" style="fill: #544903" />
<text x="455" y="29" style="font-size: 16px; fill: #fffeec" >yellow0</text>
<text x="455" y="45" style="font-size: 12px; fill: #fffeec" >#544903</text>
<rect x="450" y="50" width="150" height="50" style="fill: #7E6C06" />
<text x="455" y="79" style="font-size: 16px; fill: #fffeec" >yellow1</text>
<text x="455" y="95" style="font-size: 12px; fill: #fffeec" >#7E6C06</text>
<rect x="450" y="100" width="150" height="50" style="fill: #A88E0A" />
<text x="455" y="129" style="font-size: 16px; fill: #fffeec" >yellow2</text>
<text x="455" y="145" style="font-size: 12px; fill: #fffeec" >#A88E0A</text>
<rect x="450" y="150" width="150" height="50" style="fill: #D2AF0F" />
<text x="455" y="179" style="font-size: 16px; fill: #fffeec" >yellow3</text>
<text x="455" y="195" style="font-size: 12px; fill: #fffeec" >#D2AF0F</text>
<rect x="450" y="200" width="150" height="50" style="fill: #FCCE14" />
<text x="455" y="229" style="font-size: 16px; fill: #fffeec" >yellow4</text>
<text x="455" y="245" style="font-size: 12px; fill: #fffeec" >#FCCE14</text>
<rect x="450" y="250" width="150" height="50" style="fill: #FDDE43" />
<text x="455" y="279" style="font-size: 16px; fill: #544903" >yellow5</text>
<text x="455" y="295" style="font-size: 12px; fill: #544903" >#FDDE43</text>
<rect x="450" y="300" width="150" height="50" style="fill: #FDEB71" />
<text x="455" y="329" style="font-size: 16px; fill: #544903" >yellow6</text>
<text x="455" y="345" style="font-size: 12px; fill: #544903" >#FDEB71</text>
<rect x="450" y="350" width="150" height="50" style="fill: #FEF5A0" />
<text x="455" y="379" style="font-size: 16px; fill: #544903" >yellow7</text>
<text x="455" y="395" style="font-size: 12px; fill: #544903" >#FEF5A0</text>
<rect x="450" y="400" width="150" height="50" style="fill: #FEFBD0" />
<text x="455" y="429" style="font-size: 16px; fill: #544903" >yellow8</text>
<text x="455" y="445" style="font-size: 12px; fill: #544903" >#FEFBD0</text>
<rect x="450" y="450" width="150" height="50" style="fill: #FFFEEC" />
<text x="455" y="479" style="font-size: 16px; fill: #544903" >yellow9</text>
<text x="455" y="495" style="font-size: 12px; fill: #544903" >#FFFEEC</text>
<rect x="600" y="0" width="150" height="50" style="fill: #314603" />
<text x="605" y="29" style="font-size: 16px; fill: #f3fbe9" >lime0</text>
<text x="605" y="45" style="font-size: 12px; fill: #f3fbe9" >#314603</text>
<rect x="600" y="50" width="150" height="50" style="fill: #4B6905" />
<text x="605" y="79" style="font-size: 16px; fill: #f3fbe9" >lime1</text>
<text x="605" y="95" style="font-size: 12px; fill: #f3fbe9" >#4B6905</text>
<rect x="600" y="100" width="150" height="50" style="fill: #678D09" />
<text x="605" y="129" style="font-size: 16px; fill: #f3fbe9" >lime2</text>
<text x="605" y="145" style="font-size: 12px; fill: #f3fbe9" >#678D09</text>
<rect x="600" y="150" width="150" height="50" style="fill: #84B00C" />
<text x="605" y="179" style="font-size: 16px; fill: #f3fbe9" >lime3</text>
<text x="605" y="195" style="font-size: 12px; fill: #f3fbe9" >#84B00C</text>
<rect x="600" y="200" width="150" height="50" style="fill: #A2D311" />
<text x="605" y="229" style="font-size: 16px; fill: #f3fbe9" >lime4</text>
<text x="605" y="245" style="font-size: 12px; fill: #f3fbe9" >#A2D311</text>
<rect x="600" y="250" width="150" height="50" style="fill: #AEDC3A" />
<text x="605" y="279" style="font-size: 16px; fill: #314603" >lime5</text>
<text x="605" y="295" style="font-size: 12px; fill: #314603" >#AEDC3A</text>
<rect x="600" y="300" width="150" height="50" style="fill: #BDE566" />
<text x="605" y="329" style="font-size: 16px; fill: #314603" >lime6</text>
<text x="605" y="345" style="font-size: 12px; fill: #314603" >#BDE566</text>
<rect x="600" y="350" width="150" height="50" style="fill: #CFED96" />
<text x="605" y="379" style="font-size: 16px; fill: #314603" >lime7</text>
<text x="605" y="395" style="font-size: 12px; fill: #314603" >#CFED96</text>
<rect x="600" y="400" width="150" height="50" style="fill: #E5F6C9" />
<text x="605" y="429" style="font-size: 16px; fill: #314603" >lime8</text>
<text x="605" y="445" style="font-size: 12px; fill: #314603" >#E5F6C9</text>
<rect x="600" y="450" width="150" height="50" style="fill: #F3FBE9" />
<text x="605" y="479" style="font-size: 16px; fill: #314603" >lime9</text>
<text x="605" y="495" style="font-size: 12px; fill: #314603" >#F3FBE9</text>
<rect x="750" y="0" width="150" height="50" style="fill: #263D13" />
<text x="755" y="29" style="font-size: 16px; fill: #f3f8ed" >lightGreen0</text>
<text x="755" y="45" style="font-size: 12px; fill: #f3f8ed" >#263D13</text>
<rect x="750" y="50" width="150" height="50" style="fill: #3B5C1D" />
<text x="755" y="79" style="font-size: 16px; fill: #f3f8ed" >lightGreen1</text>
<text x="755" y="95" style="font-size: 12px; fill: #f3f8ed" >#3B5C1D</text>
<rect x="750" y="100" width="150" height="50" style="fill: #517B28" />
<text x="755" y="129" style="font-size: 16px; fill: #f3f8ed" >lightGreen2</text>
<text x="755" y="145" style="font-size: 12px; fill: #f3f8ed" >#517B28</text>
<rect x="750" y="150" width="150" height="50" style="fill: #679934" />
<text x="755" y="179" style="font-size: 16px; fill: #f3f8ed" >lightGreen3</text>
<text x="755" y="195" style="font-size: 12px; fill: #f3f8ed" >#679934</text>
<rect x="750" y="200" width="150" height="50" style="fill: #7FB840" />
<text x="755" y="229" style="font-size: 16px; fill: #f3f8ed" >lightGreen4</text>
<text x="755" y="245" style="font-size: 12px; fill: #f3f8ed" >#7FB840</text>
<rect x="750" y="250" width="150" height="50" style="fill: #97C65F" />
<text x="755" y="279" style="font-size: 16px; fill: #263d13" >lightGreen5</text>
<text x="755" y="295" style="font-size: 12px; fill: #263d13" >#97C65F</text>
<rect x="750" y="300" width="150" height="50" style="fill: #B0D481" />
<text x="755" y="329" style="font-size: 16px; fill: #263d13" >lightGreen6</text>
<text x="755" y="345" style="font-size: 12px; fill: #263d13" >#B0D481</text>
<rect x="750" y="350" width="150" height="50" style="fill: #C9E3A7" />
<text x="755" y="379" style="font-size: 16px; fill: #263d13" >lightGreen7</text>
<text x="755" y="395" style="font-size: 12px; fill: #263d13" >#C9E3A7</text>
<rect x="750" y="400" width="150" height="50" style="fill: #E4F1D1" />
<text x="755" y="429" style="font-size: 16px; fill: #263d13" >lightGreen8</text>
<text x="755" y="445" style="font-size: 12px; fill: #263d13" >#E4F1D1</text>
<rect x="750" y="450" width="150" height="50" style="fill: #F3F8ED" />
<text x="755" y="479" style="font-size: 16px; fill: #263d13" >lightGreen9</text>
<text x="755" y="495" style="font-size: 12px; fill: #263d13" >#F3F8ED</text>
<rect x="900" y="0" width="150" height="50" style="fill: #123C19" />
<text x="905" y="29" style="font-size: 16px; fill: #ecf7ec" >green0</text>
<text x="905" y="45" style="font-size: 12px; fill: #ecf7ec" >#123C19</text>
<rect x="900" y="50" width="150" height="50" style="fill: #1C5A25" />
<text x="905" y="79" style="font-size: 16px; fill: #ecf7ec" >green1</text>
<text x="905" y="95" style="font-size: 12px; fill: #ecf7ec" >#1C5A25</text>
<rect x="900" y="100" width="150" height="50" style="fill: #277731" />
<text x="905" y="129" style="font-size: 16px; fill: #ecf7ec" >green2</text>
<text x="905" y="145" style="font-size: 12px; fill: #ecf7ec" >#277731</text>
<rect x="900" y="150" width="150" height="50" style="fill: #32953D" />
<text x="905" y="179" style="font-size: 16px; fill: #ecf7ec" >green3</text>
<text x="905" y="195" style="font-size: 12px; fill: #ecf7ec" >#32953D</text>
<rect x="900" y="200" width="150" height="50" style="fill: #3EB349" />
<text x="905" y="229" style="font-size: 16px; fill: #ecf7ec" >green4</text>
<text x="905" y="245" style="font-size: 12px; fill: #ecf7ec" >#3EB349</text>
<rect x="900" y="250" width="150" height="50" style="fill: #5DC264" />
<text x="905" y="279" style="font-size: 16px; fill: #123c19" >green5</text>
<text x="905" y="295" style="font-size: 12px; fill: #123c19" >#5DC264</text>
<rect x="900" y="300" width="150" height="50" style="fill: #7FD184" />
<text x="905" y="329" style="font-size: 16px; fill: #123c19" >green6</text>
<text x="905" y="345" style="font-size: 12px; fill: #123c19" >#7FD184</text>
<rect x="900" y="350" width="150" height="50" style="fill: #A6E1A8" />
<text x="905" y="379" style="font-size: 16px; fill: #123c19" >green7</text>
<text x="905" y="395" style="font-size: 12px; fill: #123c19" >#A6E1A8</text>
<rect x="900" y="400" width="150" height="50" style="fill: #D0F0D1" />
<text x="905" y="429" style="font-size: 16px; fill: #123c19" >green8</text>
<text x="905" y="445" style="font-size: 12px; fill: #123c19" >#D0F0D1</text>
<rect x="900" y="450" width="150" height="50" style="fill: #ECF7EC" />
<text x="905" y="479" style="font-size: 16px; fill: #123c19" >green9</text>
<text x="905" y="495" style="font-size: 12px; fill: #123c19" >#ECF7EC</text>
<rect x="1050" y="0" width="150" height="50" style="fill: #023C39" />
<text x="1055" y="29" style="font-size: 16px; fill: #e6f7f4" >teal0</text>
<text x="1055" y="45" style="font-size: 12px; fill: #e6f7f4" >#023C39</text>
<rect x="1050" y="50" width="150" height="50" style="fill: #045A55" />
<text x="1055" y="79" style="font-size: 16px; fill: #e6f7f4" >teal1</text>
<text x="1055" y="95" style="font-size: 12px; fill: #e6f7f4" >#045A55</text>
<rect x="1050" y="100" width="150" height="50" style="fill: #07776F" />
<text x="1055" y="129" style="font-size: 16px; fill: #e6f7f4" >teal2</text>
<text x="1055" y="145" style="font-size: 12px; fill: #e6f7f4" >#07776F</text>
<rect x="1050" y="150" width="150" height="50" style="fill: #0A9588" />
<text x="1055" y="179" style="font-size: 16px; fill: #e6f7f4" >teal3</text>
<text x="1055" y="195" style="font-size: 12px; fill: #e6f7f4" >#0A9588</text>
<rect x="1050" y="200" width="150" height="50" style="fill: #0EB3A1" />
<text x="1055" y="229" style="font-size: 16px; fill: #e6f7f4" >teal4</text>
<text x="1055" y="245" style="font-size: 12px; fill: #e6f7f4" >#0EB3A1</text>
<rect x="1050" y="250" width="150" height="50" style="fill: #33C2B0" />
<text x="1055" y="279" style="font-size: 16px; fill: #023c39" >teal5</text>
<text x="1055" y="295" style="font-size: 12px; fill: #023c39" >#33C2B0</text>
<rect x="1050" y="300" width="150" height="50" style="fill: #5ED1C1" />
<text x="1055" y="329" style="font-size: 16px; fill: #023c39" >teal6</text>
<text x="1055" y="345" style="font-size: 12px; fill: #023c39" >#5ED1C1</text>
<rect x="1050" y="350" width="150" height="50" style="fill: #8EE1D3" />
<text x="1055" y="379" style="font-size: 16px; fill: #023c39" >teal7</text>
<text x="1055" y="395" style="font-size: 12px; fill: #023c39" >#8EE1D3</text>
<rect x="1050" y="400" width="150" height="50" style="fill: #C4F0E8" />
<text x="1055" y="429" style="font-size: 16px; fill: #023c39" >teal8</text>
<text x="1055" y="445" style="font-size: 12px; fill: #023c39" >#C4F0E8</text>
<rect x="1050" y="450" width="150" height="50" style="fill: #E6F7F4" />
<text x="1055" y="479" style="font-size: 16px; fill: #023c39" >teal9</text>
<text x="1055" y="495" style="font-size: 12px; fill: #023c39" >#E6F7F4</text>
<rect x="0" y="500" width="150" height="50" style="fill: #04343D" />
<text x="5" y="529" style="font-size: 16px; fill: #e7f7f8" >cyan0</text>
<text x="5" y="545" style="font-size: 12px; fill: #e7f7f8" >#04343D</text>
<rect x="0" y="550" width="150" height="50" style="fill: #074F5C" />
<text x="5" y="579" style="font-size: 16px; fill: #e7f7f8" >cyan1</text>
<text x="5" y="595" style="font-size: 12px; fill: #e7f7f8" >#074F5C</text>
<rect x="0" y="600" width="150" height="50" style="fill: #0A6C7B" />
<text x="5" y="629" style="font-size: 16px; fill: #e7f7f8" >cyan2</text>
<text x="5" y="645" style="font-size: 12px; fill: #e7f7f8" >#0A6C7B</text>
<rect x="0" y="650" width="150" height="50" style="fill: #0E8999" />
<text x="5" y="679" style="font-size: 16px; fill: #e7f7f8" >cyan3</text>
<text x="5" y="695" style="font-size: 12px; fill: #e7f7f8" >#0E8999</text>
<rect x="0" y="700" width="150" height="50" style="fill: #13A8B8" />
<text x="5" y="729" style="font-size: 16px; fill: #e7f7f8" >cyan4</text>
<text x="5" y="745" style="font-size: 12px; fill: #e7f7f8" >#13A8B8</text>
<rect x="0" y="750" width="150" height="50" style="fill: #38BBC6" />
<text x="5" y="779" style="font-size: 16px; fill: #04343d" >cyan5</text>
<text x="5" y="795" style="font-size: 12px; fill: #04343d" >#38BBC6</text>
<rect x="0" y="800" width="150" height="50" style="fill: #62CDD4" />
<text x="5" y="829" style="font-size: 16px; fill: #04343d" >cyan6</text>
<text x="5" y="845" style="font-size: 12px; fill: #04343d" >#62CDD4</text>
<rect x="0" y="850" width="150" height="50" style="fill: #91DFE3" />
<text x="5" y="879" style="font-size: 16px; fill: #04343d" >cyan7</text>
<text x="5" y="895" style="font-size: 12px; fill: #04343d" >#91DFE3</text>
<rect x="0" y="900" width="150" height="50" style="fill: #C6EFF1" />
<text x="5" y="929" style="font-size: 16px; fill: #04343d" >cyan8</text>
<text x="5" y="945" style="font-size: 12px; fill: #04343d" >#C6EFF1</text>
<rect x="0" y="950" width="150" height="50" style="fill: #E7F7F8" />
<text x="5" y="979" style="font-size: 16px; fill: #04343d" >cyan9</text>
<text x="5" y="995" style="font-size: 12px; fill: #04343d" >#E7F7F8</text>
<rect x="150" y="500" width="150" height="50" style="fill: #003761" />
<text x="155" y="529" style="font-size: 16px; fill: #ebf8fe" >lightBlue0</text>
<text x="155" y="545" style="font-size: 12px; fill: #ebf8fe" >#003761</text>
<rect x="150" y="550" width="150" height="50" style="fill: #004D85" />
<text x="155" y="579" style="font-size: 16px; fill: #ebf8fe" >lightBlue1</text>
<text x="155" y="595" style="font-size: 12px; fill: #ebf8fe" >#004D85</text>
<rect x="150" y="600" width="150" height="50" style="fill: #0366A9" />
<text x="155" y="629" style="font-size: 16px; fill: #ebf8fe" >lightBlue2</text>
<text x="155" y="645" style="font-size: 12px; fill: #ebf8fe" >#0366A9</text>
<rect x="150" y="650" width="150" height="50" style="fill: #0A81CC" />
<text x="155" y="679" style="font-size: 16px; fill: #ebf8fe" >lightBlue3</text>
<text x="155" y="695" style="font-size: 12px; fill: #ebf8fe" >#0A81CC</text>
<rect x="150" y="700" width="150" height="50" style="fill: #139FF0" />
<text x="155" y="729" style="font-size: 16px; fill: #ebf8fe" >lightBlue4</text>
<text x="155" y="745" style="font-size: 12px; fill: #ebf8fe" >#139FF0</text>
<rect x="150" y="750" width="150" height="50" style="fill: #40B4F3" />
<text x="155" y="779" style="font-size: 16px; fill: #003761" >lightBlue5</text>
<text x="155" y="795" style="font-size: 12px; fill: #003761" >#40B4F3</text>
<rect x="150" y="800" width="150" height="50" style="fill: #6EC8F6" />
<text x="155" y="829" style="font-size: 16px; fill: #003761" >lightBlue6</text>
<text x="155" y="845" style="font-size: 12px; fill: #003761" >#6EC8F6</text>
<rect x="150" y="850" width="150" height="50" style="fill: #9DDCF9" />
<text x="155" y="879" style="font-size: 16px; fill: #003761" >lightBlue7</text>
<text x="155" y="895" style="font-size: 12px; fill: #003761" >#9DDCF9</text>
<rect x="150" y="900" width="150" height="50" style="fill: #CEEEFC" />
<text x="155" y="929" style="font-size: 16px; fill: #003761" >lightBlue8</text>
<text x="155" y="945" style="font-size: 12px; fill: #003761" >#CEEEFC</text>
<rect x="150" y="950" width="150" height="50" style="fill: #EBF8FE" />
<text x="155" y="979" style="font-size: 16px; fill: #003761" >lightBlue9</text>
<text x="155" y="995" style="font-size: 12px; fill: #003761" >#EBF8FE</text>
<rect x="300" y="500" width="150" height="50" style="fill: #053170" />
<text x="305" y="529" style="font-size: 16px; fill: #eff8ff" >blue0</text>
<text x="305" y="545" style="font-size: 12px; fill: #eff8ff" >#053170</text>
<rect x="300" y="550" width="150" height="50" style="fill: #0A4694" />
<text x="305" y="579" style="font-size: 16px; fill: #eff8ff" >blue1</text>
<text x="305" y="595" style="font-size: 12px; fill: #eff8ff" >#0A4694</text>
<rect x="300" y="600" width="150" height="50" style="fill: #135CB8" />
<text x="305" y="629" style="font-size: 16px; fill: #eff8ff" >blue2</text>
<text x="305" y="645" style="font-size: 12px; fill: #eff8ff" >#135CB8</text>
<rect x="300" y="650" width="150" height="50" style="fill: #1D75DB" />
<text x="305" y="679" style="font-size: 16px; fill: #eff8ff" >blue3</text>
<text x="305" y="695" style="font-size: 12px; fill: #eff8ff" >#1D75DB</text>
<rect x="300" y="700" width="150" height="50" style="fill: #2990FF" />
<text x="305" y="729" style="font-size: 16px; fill: #eff8ff" >blue4</text>
<text x="305" y="745" style="font-size: 12px; fill: #eff8ff" >#2990FF</text>
<rect x="300" y="750" width="150" height="50" style="fill: #54A9FF" />
<text x="305" y="779" style="font-size: 16px; fill: #053170" >blue5</text>
<text x="305" y="795" style="font-size: 12px; fill: #053170" >#54A9FF</text>
<rect x="300" y="800" width="150" height="50" style="fill: #7FC1FF" />
<text x="305" y="829" style="font-size: 16px; fill: #053170" >blue6</text>
<text x="305" y="845" style="font-size: 12px; fill: #053170" >#7FC1FF</text>
<rect x="300" y="850" width="150" height="50" style="fill: #A9D7FF" />
<text x="305" y="879" style="font-size: 16px; fill: #053170" >blue7</text>
<text x="305" y="895" style="font-size: 12px; fill: #053170" >#A9D7FF</text>
<rect x="300" y="900" width="150" height="50" style="fill: #D4ECFF" />
<text x="305" y="929" style="font-size: 16px; fill: #053170" >blue8</text>
<text x="305" y="945" style="font-size: 12px; fill: #053170" >#D4ECFF</text>
<rect x="300" y="950" width="150" height="50" style="fill: #EFF8FF" />
<text x="305" y="979" style="font-size: 16px; fill: #053170" >blue9</text>
<text x="305" y="995" style="font-size: 12px; fill: #053170" >#EFF8FF</text>
<rect x="450" y="500" width="150" height="50" style="fill: #171E65" />
<text x="455" y="529" style="font-size: 16px; fill: #edeff8" >indigo0</text>
<text x="455" y="545" style="font-size: 12px; fill: #edeff8" >#171E65</text>
<rect x="450" y="550" width="150" height="50" style="fill: #20297A" />
<text x="455" y="579" style="font-size: 16px; fill: #edeff8" >indigo1</text>
<text x="455" y="595" style="font-size: 12px; fill: #edeff8" >#20297A</text>
<rect x="450" y="600" width="150" height="50" style="fill: #29368E" />
<text x="455" y="629" style="font-size: 16px; fill: #edeff8" >indigo2</text>
<text x="455" y="645" style="font-size: 12px; fill: #edeff8" >#29368E</text>
<rect x="450" y="650" width="150" height="50" style="fill: #3444A3" />
<text x="455" y="679" style="font-size: 16px; fill: #edeff8" >indigo3</text>
<text x="455" y="695" style="font-size: 12px; fill: #edeff8" >#3444A3</text>
<rect x="450" y="700" width="150" height="50" style="fill: #4053B7" />
<text x="455" y="729" style="font-size: 16px; fill: #edeff8" >indigo4</text>
<text x="455" y="745" style="font-size: 12px; fill: #edeff8" >#4053B7</text>
<rect x="450" y="750" width="150" height="50" style="fill: #5F71C5" />
<text x="455" y="779" style="font-size: 16px; fill: #171e65" >indigo5</text>
<text x="455" y="795" style="font-size: 12px; fill: #171e65" >#5F71C5</text>
<rect x="450" y="800" width="150" height="50" style="fill: #8191D4" />
<text x="455" y="829" style="font-size: 16px; fill: #171e65" >indigo6</text>
<text x="455" y="845" style="font-size: 12px; fill: #171e65" >#8191D4</text>
<rect x="450" y="850" width="150" height="50" style="fill: #A7B4E2" />
<text x="455" y="879" style="font-size: 16px; fill: #171e65" >indigo7</text>
<text x="455" y="895" style="font-size: 12px; fill: #171e65" >#A7B4E2</text>
<rect x="450" y="900" width="150" height="50" style="fill: #D1D8F1" />
<text x="455" y="929" style="font-size: 16px; fill: #171e65" >indigo8</text>
<text x="455" y="945" style="font-size: 12px; fill: #171e65" >#D1D8F1</text>
<rect x="450" y="950" width="150" height="50" style="fill: #EDEFF8" />
<text x="455" y="979" style="font-size: 16px; fill: #171e65" >indigo9</text>
<text x="455" y="995" style="font-size: 12px; fill: #171e65" >#EDEFF8</text>
<rect x="600" y="500" width="150" height="50" style="fill: #401B77" />
<text x="605" y="529" style="font-size: 16px; fill: #f1eefa" >violet0</text>
<text x="605" y="545" style="font-size: 12px; fill: #f1eefa" >#401B77</text>
<rect x="600" y="550" width="150" height="50" style="fill: #4C248C" />
<text x="605" y="579" style="font-size: 16px; fill: #f1eefa" >violet1</text>
<text x="605" y="595" style="font-size: 12px; fill: #f1eefa" >#4C248C</text>
<rect x="600" y="600" width="150" height="50" style="fill: #582EA0" />
<text x="605" y="629" style="font-size: 16px; fill: #f1eefa" >violet2</text>
<text x="605" y="645" style="font-size: 12px; fill: #f1eefa" >#582EA0</text>
<rect x="600" y="650" width="150" height="50" style="fill: #6439B5" />
<text x="605" y="679" style="font-size: 16px; fill: #f1eefa" >violet3</text>
<text x="605" y="695" style="font-size: 12px; fill: #f1eefa" >#6439B5</text>
<rect x="600" y="700" width="150" height="50" style="fill: #7246C9" />
<text x="605" y="729" style="font-size: 16px; fill: #f1eefa" >violet4</text>
<text x="605" y="745" style="font-size: 12px; fill: #f1eefa" >#7246C9</text>
<rect x="600" y="750" width="150" height="50" style="fill: #8865D4" />
<text x="605" y="779" style="font-size: 16px; fill: #401b77" >violet5</text>
<text x="605" y="795" style="font-size: 12px; fill: #401b77" >#8865D4</text>
<rect x="600" y="800" width="150" height="50" style="fill: #A288DF" />
<text x="605" y="829" style="font-size: 16px; fill: #401b77" >violet6</text>
<text x="605" y="845" style="font-size: 12px; fill: #401b77" >#A288DF</text>
<rect x="600" y="850" width="150" height="50" style="fill: #BEADE9" />
<text x="605" y="879" style="font-size: 16px; fill: #401b77" >violet7</text>
<text x="605" y="895" style="font-size: 12px; fill: #401b77" >#BEADE9</text>
<rect x="600" y="900" width="150" height="50" style="fill: #DDD4F4" />
<text x="605" y="929" style="font-size: 16px; fill: #401b77" >violet8</text>
<text x="605" y="945" style="font-size: 12px; fill: #401b77" >#DDD4F4</text>
<rect x="600" y="950" width="150" height="50" style="fill: #F1EEFA" />
<text x="605" y="979" style="font-size: 16px; fill: #401b77" >violet9</text>
<text x="605" y="995" style="font-size: 12px; fill: #401b77" >#F1EEFA</text>
<rect x="750" y="500" width="150" height="50" style="fill: #4A1061" />
<text x="755" y="529" style="font-size: 16px; fill: #f7ebf7" >purple0</text>
<text x="755" y="545" style="font-size: 12px; fill: #f7ebf7" >#4A1061</text>
<rect x="750" y="550" width="150" height="50" style="fill: #5E1776" />
<text x="755" y="579" style="font-size: 16px; fill: #f7ebf7" >purple1</text>
<text x="755" y="595" style="font-size: 12px; fill: #f7ebf7" >#5E1776</text>
<rect x="750" y="600" width="150" height="50" style="fill: #731F8A" />
<text x="755" y="629" style="font-size: 16px; fill: #f7ebf7" >purple2</text>
<text x="755" y="645" style="font-size: 12px; fill: #f7ebf7" >#731F8A</text>
<rect x="750" y="650" width="150" height="50" style="fill: #89289F" />
<text x="755" y="679" style="font-size: 16px; fill: #f7ebf7" >purple3</text>
<text x="755" y="695" style="font-size: 12px; fill: #f7ebf7" >#89289F</text>
<rect x="750" y="700" width="150" height="50" style="fill: #A033B3" />
<text x="755" y="729" style="font-size: 16px; fill: #f7ebf7" >purple4</text>
<text x="755" y="745" style="font-size: 12px; fill: #f7ebf7" >#A033B3</text>
<rect x="750" y="750" width="150" height="50" style="fill: #B553C2" />
<text x="755" y="779" style="font-size: 16px; fill: #4a1061" >purple5</text>
<text x="755" y="795" style="font-size: 12px; fill: #4a1061" >#B553C2</text>
<rect x="750" y="800" width="150" height="50" style="fill: #CA78D1" />
<text x="755" y="829" style="font-size: 16px; fill: #4a1061" >purple6</text>
<text x="755" y="845" style="font-size: 12px; fill: #4a1061" >#CA78D1</text>
<rect x="750" y="850" width="150" height="50" style="fill: #DDA0E1" />
<text x="755" y="879" style="font-size: 16px; fill: #4a1061" >purple7</text>
<text x="755" y="895" style="font-size: 12px; fill: #4a1061" >#DDA0E1</text>
<rect x="750" y="900" width="150" height="50" style="fill: #EFCEF0" />
<text x="755" y="929" style="font-size: 16px; fill: #4a1061" >purple8</text>
<text x="755" y="945" style="font-size: 12px; fill: #4a1061" >#EFCEF0</text>
<rect x="750" y="950" width="150" height="50" style="fill: #F7EBF7" />
<text x="755" y="979" style="font-size: 16px; fill: #4a1061" >purple9</text>
<text x="755" y="995" style="font-size: 12px; fill: #4a1061" >#F7EBF7</text>
<rect x="900" y="500" width="150" height="50" style="fill: #5C0730" />
<text x="905" y="529" style="font-size: 16px; fill: #fdeef1" >pink0</text>
<text x="905" y="545" style="font-size: 12px; fill: #fdeef1" >#5C0730</text>
<rect x="900" y="550" width="150" height="50" style="fill: #800E41" />
<text x="905" y="579" style="font-size: 16px; fill: #fdeef1" >pink1</text>
<text x="905" y="595" style="font-size: 12px; fill: #fdeef1" >#800E41</text>
<rect x="900" y="600" width="150" height="50" style="fill: #A41751" />
<text x="905" y="629" style="font-size: 16px; fill: #fdeef1" >pink2</text>
<text x="905" y="645" style="font-size: 12px; fill: #fdeef1" >#A41751</text>
<rect x="900" y="650" width="150" height="50" style="fill: #C72261" />
<text x="905" y="679" style="font-size: 16px; fill: #fdeef1" >pink3</text>
<text x="905" y="695" style="font-size: 12px; fill: #fdeef1" >#C72261</text>
<rect x="900" y="700" width="150" height="50" style="fill: #EB2F71" />
<text x="905" y="729" style="font-size: 16px; fill: #fdeef1" >pink4</text>
<text x="905" y="745" style="font-size: 12px; fill: #fdeef1" >#EB2F71</text>
<rect x="900" y="750" width="150" height="50" style="fill: #EF5686" />
<text x="905" y="779" style="font-size: 16px; fill: #5c0730" >pink5</text>
<text x="905" y="795" style="font-size: 12px; fill: #5c0730" >#EF5686</text>
<rect x="900" y="800" width="150" height="50" style="fill: #F37E9F" />
<text x="905" y="829" style="font-size: 16px; fill: #5c0730" >pink6</text>
<text x="905" y="845" style="font-size: 12px; fill: #5c0730" >#F37E9F</text>
<rect x="900" y="850" width="150" height="50" style="fill: #F7A8BC" />
<text x="905" y="879" style="font-size: 16px; fill: #5c0730" >pink7</text>
<text x="905" y="895" style="font-size: 12px; fill: #5c0730" >#F7A8BC</text>
<rect x="900" y="900" width="150" height="50" style="fill: #FBD3DC" />
<text x="905" y="929" style="font-size: 16px; fill: #5c0730" >pink8</text>
<text x="905" y="945" style="font-size: 12px; fill: #5c0730" >#FBD3DC</text>
<rect x="900" y="950" width="150" height="50" style="fill: #FDEEF1" />
<text x="905" y="979" style="font-size: 16px; fill: #5c0730" >pink9</text>
<text x="905" y="995" style="font-size: 12px; fill: #5c0730" >#FDEEF1</text>
<rect x="1050" y="500" width="150" height="50" style="fill: #1C1F23" />
<text x="1055" y="529" style="font-size: 16px; fill: #f9f9f9" >grey0</text>
<text x="1055" y="545" style="font-size: 12px; fill: #f9f9f9" >#1C1F23</text>
<rect x="1050" y="550" width="150" height="50" style="fill: #2E3238" />
<text x="1055" y="579" style="font-size: 16px; fill: #f9f9f9" >grey1</text>
<text x="1055" y="595" style="font-size: 12px; fill: #f9f9f9" >#2E3238</text>
<rect x="1050" y="600" width="150" height="50" style="fill: #41464C" />
<text x="1055" y="629" style="font-size: 16px; fill: #f9f9f9" >grey2</text>
<text x="1055" y="645" style="font-size: 12px; fill: #f9f9f9" >#41464C</text>
<rect x="1050" y="650" width="150" height="50" style="fill: #555B61" />
<text x="1055" y="679" style="font-size: 16px; fill: #f9f9f9" >grey3</text>
<text x="1055" y="695" style="font-size: 12px; fill: #f9f9f9" >#555B61</text>
<rect x="1050" y="700" width="150" height="50" style="fill: #6B7075" />
<text x="1055" y="729" style="font-size: 16px; fill: #f9f9f9" >grey4</text>
<text x="1055" y="745" style="font-size: 12px; fill: #f9f9f9" >#6B7075</text>
<rect x="1050" y="750" width="150" height="50" style="fill: #888D92" />
<text x="1055" y="779" style="font-size: 16px; fill: #1c1f23" >grey5</text>
<text x="1055" y="795" style="font-size: 12px; fill: #1c1f23" >#888D92</text>
<rect x="1050" y="800" width="150" height="50" style="fill: #A7ABB0" />
<text x="1055" y="829" style="font-size: 16px; fill: #1c1f23" >grey6</text>
<text x="1055" y="845" style="font-size: 12px; fill: #1c1f23" >#A7ABB0</text>
<rect x="1050" y="850" width="150" height="50" style="fill: #C6CACD" />
<text x="1055" y="879" style="font-size: 16px; fill: #1c1f23" >grey7</text>
<text x="1055" y="895" style="font-size: 12px; fill: #1c1f23" >#C6CACD</text>
<rect x="1050" y="900" width="150" height="50" style="fill: #E6E8EA" />
<text x="1055" y="929" style="font-size: 16px; fill: #1c1f23" >grey8</text>
<text x="1055" y="945" style="font-size: 12px; fill: #1c1f23" >#E6E8EA</text>
<rect x="1050" y="950" width="150" height="50" style="fill: #F9F9F9" />
<text x="1055" y="979" style="font-size: 16px; fill: #1c1f23" >grey9</text>
<text x="1055" y="995" style="font-size: 12px; fill: #1c1f23" >#F9F9F9</text>
<rect x="0" y="1000" width="600" height="50" style="fill: #FFFFFF" />
<text x="5" y="1029" style="font-size: 16px; fill: #808080" >white</text>
<text x="5" y="1045" style="font-size: 12px; fill: #808080" >#FFFFFF</text>
<rect x="600" y="1000" width="600" height="50" style="fill: #000000" />
<text x="605" y="1029" style="font-size: 16px; fill: #808080" >black</text>
<text x="605" y="1045" style="font-size: 12px; fill: #808080" >#000000</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

500
doc/images/UILightPalette.svg Normal file
View File

@ -0,0 +1,500 @@
<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="1200" height="1050"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
text {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"
}
]]>
</style>
<rect x="0" y="0" width="150" height="50" style="fill: #FEF2ED" />
<text x="5" y="29" style="font-size: 16px; fill: #6a0103" >red0</text>
<text x="5" y="45" style="font-size: 12px; fill: #6a0103" >#FEF2ED</text>
<rect x="0" y="50" width="150" height="50" style="fill: #FEDDD2" />
<text x="5" y="79" style="font-size: 16px; fill: #6a0103" >red1</text>
<text x="5" y="95" style="font-size: 12px; fill: #6a0103" >#FEDDD2</text>
<rect x="0" y="100" width="150" height="50" style="fill: #FDB7A5" />
<text x="5" y="129" style="font-size: 16px; fill: #6a0103" >red2</text>
<text x="5" y="145" style="font-size: 12px; fill: #6a0103" >#FDB7A5</text>
<rect x="0" y="150" width="150" height="50" style="fill: #FB9078" />
<text x="5" y="179" style="font-size: 16px; fill: #6a0103" >red3</text>
<text x="5" y="195" style="font-size: 12px; fill: #6a0103" >#FB9078</text>
<rect x="0" y="200" width="150" height="50" style="fill: #FA664C" />
<text x="5" y="229" style="font-size: 16px; fill: #6a0103" >red4</text>
<text x="5" y="245" style="font-size: 12px; fill: #6a0103" >#FA664C</text>
<rect x="0" y="250" width="150" height="50" style="fill: #F93920" />
<text x="5" y="279" style="font-size: 16px; fill: #fef2ed" >red5</text>
<text x="5" y="295" style="font-size: 12px; fill: #fef2ed" >#F93920</text>
<rect x="0" y="300" width="150" height="50" style="fill: #D52515" />
<text x="5" y="329" style="font-size: 16px; fill: #fef2ed" >red6</text>
<text x="5" y="345" style="font-size: 12px; fill: #fef2ed" >#D52515</text>
<rect x="0" y="350" width="150" height="50" style="fill: #B2140C" />
<text x="5" y="379" style="font-size: 16px; fill: #fef2ed" >red7</text>
<text x="5" y="395" style="font-size: 12px; fill: #fef2ed" >#B2140C</text>
<rect x="0" y="400" width="150" height="50" style="fill: #8E0805" />
<text x="5" y="429" style="font-size: 16px; fill: #fef2ed" >red8</text>
<text x="5" y="445" style="font-size: 12px; fill: #fef2ed" >#8E0805</text>
<rect x="0" y="450" width="150" height="50" style="fill: #6A0103" />
<text x="5" y="479" style="font-size: 16px; fill: #fef2ed" >red9</text>
<text x="5" y="495" style="font-size: 12px; fill: #fef2ed" >#6A0103</text>
<rect x="150" y="0" width="150" height="50" style="fill: #FFF8EA" />
<text x="155" y="29" style="font-size: 16px; fill: #541d00" >orange0</text>
<text x="155" y="45" style="font-size: 12px; fill: #541d00" >#FFF8EA</text>
<rect x="150" y="50" width="150" height="50" style="fill: #FEEECC" />
<text x="155" y="79" style="font-size: 16px; fill: #541d00" >orange1</text>
<text x="155" y="95" style="font-size: 12px; fill: #541d00" >#FEEECC</text>
<rect x="150" y="100" width="150" height="50" style="fill: #FED998" />
<text x="155" y="129" style="font-size: 16px; fill: #541d00" >orange2</text>
<text x="155" y="145" style="font-size: 12px; fill: #541d00" >#FED998</text>
<rect x="150" y="150" width="150" height="50" style="fill: #FDC165" />
<text x="155" y="179" style="font-size: 16px; fill: #541d00" >orange3</text>
<text x="155" y="195" style="font-size: 12px; fill: #541d00" >#FDC165</text>
<rect x="150" y="200" width="150" height="50" style="fill: #FDA633" />
<text x="155" y="229" style="font-size: 16px; fill: #541d00" >orange4</text>
<text x="155" y="245" style="font-size: 12px; fill: #541d00" >#FDA633</text>
<rect x="150" y="250" width="150" height="50" style="fill: #FC8800" />
<text x="155" y="279" style="font-size: 16px; fill: #fff8ea" >orange5</text>
<text x="155" y="295" style="font-size: 12px; fill: #fff8ea" >#FC8800</text>
<rect x="150" y="300" width="150" height="50" style="fill: #D26700" />
<text x="155" y="329" style="font-size: 16px; fill: #fff8ea" >orange6</text>
<text x="155" y="345" style="font-size: 12px; fill: #fff8ea" >#D26700</text>
<rect x="150" y="350" width="150" height="50" style="fill: #A84A00" />
<text x="155" y="379" style="font-size: 16px; fill: #fff8ea" >orange7</text>
<text x="155" y="395" style="font-size: 12px; fill: #fff8ea" >#A84A00</text>
<rect x="150" y="400" width="150" height="50" style="fill: #7E3100" />
<text x="155" y="429" style="font-size: 16px; fill: #fff8ea" >orange8</text>
<text x="155" y="445" style="font-size: 12px; fill: #fff8ea" >#7E3100</text>
<rect x="150" y="450" width="150" height="50" style="fill: #541D00" />
<text x="155" y="479" style="font-size: 16px; fill: #fff8ea" >orange9</text>
<text x="155" y="495" style="font-size: 12px; fill: #fff8ea" >#541D00</text>
<rect x="300" y="0" width="150" height="50" style="fill: #FEFBEB" />
<text x="305" y="29" style="font-size: 16px; fill: #502b03" >amber0</text>
<text x="305" y="45" style="font-size: 12px; fill: #502b03" >#FEFBEB</text>
<rect x="300" y="50" width="150" height="50" style="fill: #FCF5CE" />
<text x="305" y="79" style="font-size: 16px; fill: #502b03" >amber1</text>
<text x="305" y="95" style="font-size: 12px; fill: #502b03" >#FCF5CE</text>
<rect x="300" y="100" width="150" height="50" style="fill: #F9E89E" />
<text x="305" y="129" style="font-size: 16px; fill: #502b03" >amber2</text>
<text x="305" y="145" style="font-size: 12px; fill: #502b03" >#F9E89E</text>
<rect x="300" y="150" width="150" height="50" style="fill: #F6D86F" />
<text x="305" y="179" style="font-size: 16px; fill: #502b03" >amber3</text>
<text x="305" y="195" style="font-size: 12px; fill: #502b03" >#F6D86F</text>
<rect x="300" y="200" width="150" height="50" style="fill: #F3C641" />
<text x="305" y="229" style="font-size: 16px; fill: #502b03" >amber4</text>
<text x="305" y="245" style="font-size: 12px; fill: #502b03" >#F3C641</text>
<rect x="300" y="250" width="150" height="50" style="fill: #F0B114" />
<text x="305" y="279" style="font-size: 16px; fill: #fefbeb" >amber5</text>
<text x="305" y="295" style="font-size: 12px; fill: #fefbeb" >#F0B114</text>
<rect x="300" y="300" width="150" height="50" style="fill: #C88A0F" />
<text x="305" y="329" style="font-size: 16px; fill: #fefbeb" >amber6</text>
<text x="305" y="345" style="font-size: 12px; fill: #fefbeb" >#C88A0F</text>
<rect x="300" y="350" width="150" height="50" style="fill: #A0660A" />
<text x="305" y="379" style="font-size: 16px; fill: #fefbeb" >amber7</text>
<text x="305" y="395" style="font-size: 12px; fill: #fefbeb" >#A0660A</text>
<rect x="300" y="400" width="150" height="50" style="fill: #784606" />
<text x="305" y="429" style="font-size: 16px; fill: #fefbeb" >amber8</text>
<text x="305" y="445" style="font-size: 12px; fill: #fefbeb" >#784606</text>
<rect x="300" y="450" width="150" height="50" style="fill: #502B03" />
<text x="305" y="479" style="font-size: 16px; fill: #fefbeb" >amber9</text>
<text x="305" y="495" style="font-size: 12px; fill: #fefbeb" >#502B03</text>
<rect x="450" y="0" width="150" height="50" style="fill: #FFFDEA" />
<text x="455" y="29" style="font-size: 16px; fill: #534800" >yellow0</text>
<text x="455" y="45" style="font-size: 12px; fill: #534800" >#FFFDEA</text>
<rect x="450" y="50" width="150" height="50" style="fill: #FEFBCB" />
<text x="455" y="79" style="font-size: 16px; fill: #534800" >yellow1</text>
<text x="455" y="95" style="font-size: 12px; fill: #534800" >#FEFBCB</text>
<rect x="450" y="100" width="150" height="50" style="fill: #FDF398" />
<text x="455" y="129" style="font-size: 16px; fill: #534800" >yellow2</text>
<text x="455" y="145" style="font-size: 12px; fill: #534800" >#FDF398</text>
<rect x="450" y="150" width="150" height="50" style="fill: #FCE865" />
<text x="455" y="179" style="font-size: 16px; fill: #534800" >yellow3</text>
<text x="455" y="195" style="font-size: 12px; fill: #534800" >#FCE865</text>
<rect x="450" y="200" width="150" height="50" style="fill: #FBDA32" />
<text x="455" y="229" style="font-size: 16px; fill: #534800" >yellow4</text>
<text x="455" y="245" style="font-size: 12px; fill: #534800" >#FBDA32</text>
<rect x="450" y="250" width="150" height="50" style="fill: #FAC800" />
<text x="455" y="279" style="font-size: 16px; fill: #fffdea" >yellow5</text>
<text x="455" y="295" style="font-size: 12px; fill: #fffdea" >#FAC800</text>
<rect x="450" y="300" width="150" height="50" style="fill: #D0AA00" />
<text x="455" y="329" style="font-size: 16px; fill: #fffdea" >yellow6</text>
<text x="455" y="345" style="font-size: 12px; fill: #fffdea" >#D0AA00</text>
<rect x="450" y="350" width="150" height="50" style="fill: #A78B00" />
<text x="455" y="379" style="font-size: 16px; fill: #fffdea" >yellow7</text>
<text x="455" y="395" style="font-size: 12px; fill: #fffdea" >#A78B00</text>
<rect x="450" y="400" width="150" height="50" style="fill: #7D6A00" />
<text x="455" y="429" style="font-size: 16px; fill: #fffdea" >yellow8</text>
<text x="455" y="445" style="font-size: 12px; fill: #fffdea" >#7D6A00</text>
<rect x="450" y="450" width="150" height="50" style="fill: #534800" />
<text x="455" y="479" style="font-size: 16px; fill: #fffdea" >yellow9</text>
<text x="455" y="495" style="font-size: 12px; fill: #fffdea" >#534800</text>
<rect x="600" y="0" width="150" height="50" style="fill: #F2FAE6" />
<text x="605" y="29" style="font-size: 16px; fill: #2f4600" >lime0</text>
<text x="605" y="45" style="font-size: 12px; fill: #2f4600" >#F2FAE6</text>
<rect x="600" y="50" width="150" height="50" style="fill: #E3F6C5" />
<text x="605" y="79" style="font-size: 16px; fill: #2f4600" >lime1</text>
<text x="605" y="95" style="font-size: 12px; fill: #2f4600" >#E3F6C5</text>
<rect x="600" y="100" width="150" height="50" style="fill: #CBED8E" />
<text x="605" y="129" style="font-size: 16px; fill: #2f4600" >lime2</text>
<text x="605" y="145" style="font-size: 12px; fill: #2f4600" >#CBED8E</text>
<rect x="600" y="150" width="150" height="50" style="fill: #B7E35B" />
<text x="605" y="179" style="font-size: 16px; fill: #2f4600" >lime3</text>
<text x="605" y="195" style="font-size: 12px; fill: #2f4600" >#B7E35B</text>
<rect x="600" y="200" width="150" height="50" style="fill: #A7DA2C" />
<text x="605" y="229" style="font-size: 16px; fill: #2f4600" >lime4</text>
<text x="605" y="245" style="font-size: 12px; fill: #2f4600" >#A7DA2C</text>
<rect x="600" y="250" width="150" height="50" style="fill: #9BD100" />
<text x="605" y="279" style="font-size: 16px; fill: #f2fae6" >lime5</text>
<text x="605" y="295" style="font-size: 12px; fill: #f2fae6" >#9BD100</text>
<rect x="600" y="300" width="150" height="50" style="fill: #7EAE00" />
<text x="605" y="329" style="font-size: 16px; fill: #f2fae6" >lime6</text>
<text x="605" y="345" style="font-size: 12px; fill: #f2fae6" >#7EAE00</text>
<rect x="600" y="350" width="150" height="50" style="fill: #638B00" />
<text x="605" y="379" style="font-size: 16px; fill: #f2fae6" >lime7</text>
<text x="605" y="395" style="font-size: 12px; fill: #f2fae6" >#638B00</text>
<rect x="600" y="400" width="150" height="50" style="fill: #486800" />
<text x="605" y="429" style="font-size: 16px; fill: #f2fae6" >lime8</text>
<text x="605" y="445" style="font-size: 12px; fill: #f2fae6" >#486800</text>
<rect x="600" y="450" width="150" height="50" style="fill: #2F4600" />
<text x="605" y="479" style="font-size: 16px; fill: #f2fae6" >lime9</text>
<text x="605" y="495" style="font-size: 12px; fill: #f2fae6" >#2F4600</text>
<rect x="750" y="0" width="150" height="50" style="fill: #F3F8EC" />
<text x="755" y="29" style="font-size: 16px; fill: #253d12" >lightGreen0</text>
<text x="755" y="45" style="font-size: 12px; fill: #253d12" >#F3F8EC</text>
<rect x="750" y="50" width="150" height="50" style="fill: #E3F0D0" />
<text x="755" y="79" style="font-size: 16px; fill: #253d12" >lightGreen1</text>
<text x="755" y="95" style="font-size: 12px; fill: #253d12" >#E3F0D0</text>
<rect x="750" y="100" width="150" height="50" style="fill: #C8E2A5" />
<text x="755" y="129" style="font-size: 16px; fill: #253d12" >lightGreen2</text>
<text x="755" y="145" style="font-size: 12px; fill: #253d12" >#C8E2A5</text>
<rect x="750" y="150" width="150" height="50" style="fill: #ADD37E" />
<text x="755" y="179" style="font-size: 16px; fill: #253d12" >lightGreen3</text>
<text x="755" y="195" style="font-size: 12px; fill: #253d12" >#ADD37E</text>
<rect x="750" y="200" width="150" height="50" style="fill: #93C55B" />
<text x="755" y="229" style="font-size: 16px; fill: #253d12" >lightGreen4</text>
<text x="755" y="245" style="font-size: 12px; fill: #253d12" >#93C55B</text>
<rect x="750" y="250" width="150" height="50" style="fill: #7BB63C" />
<text x="755" y="279" style="font-size: 16px; fill: #f3f8ec" >lightGreen5</text>
<text x="755" y="295" style="font-size: 12px; fill: #f3f8ec" >#7BB63C</text>
<rect x="750" y="300" width="150" height="50" style="fill: #649830" />
<text x="755" y="329" style="font-size: 16px; fill: #f3f8ec" >lightGreen6</text>
<text x="755" y="345" style="font-size: 12px; fill: #f3f8ec" >#649830</text>
<rect x="750" y="350" width="150" height="50" style="fill: #4E7926" />
<text x="755" y="379" style="font-size: 16px; fill: #f3f8ec" >lightGreen7</text>
<text x="755" y="395" style="font-size: 12px; fill: #f3f8ec" >#4E7926</text>
<rect x="750" y="400" width="150" height="50" style="fill: #395B1B" />
<text x="755" y="429" style="font-size: 16px; fill: #f3f8ec" >lightGreen8</text>
<text x="755" y="445" style="font-size: 12px; fill: #f3f8ec" >#395B1B</text>
<rect x="750" y="450" width="150" height="50" style="fill: #253D12" />
<text x="755" y="479" style="font-size: 16px; fill: #f3f8ec" >lightGreen9</text>
<text x="755" y="495" style="font-size: 12px; fill: #f3f8ec" >#253D12</text>
<rect x="900" y="0" width="150" height="50" style="fill: #ECF7EC" />
<text x="905" y="29" style="font-size: 16px; fill: #113c18" >green0</text>
<text x="905" y="45" style="font-size: 12px; fill: #113c18" >#ECF7EC</text>
<rect x="900" y="50" width="150" height="50" style="fill: #D0F0D1" />
<text x="905" y="79" style="font-size: 16px; fill: #113c18" >green1</text>
<text x="905" y="95" style="font-size: 12px; fill: #113c18" >#D0F0D1</text>
<rect x="900" y="100" width="150" height="50" style="fill: #A4E0A7" />
<text x="905" y="129" style="font-size: 16px; fill: #113c18" >green2</text>
<text x="905" y="145" style="font-size: 12px; fill: #113c18" >#A4E0A7</text>
<rect x="900" y="150" width="150" height="50" style="fill: #7DD182" />
<text x="905" y="179" style="font-size: 16px; fill: #113c18" >green3</text>
<text x="905" y="195" style="font-size: 12px; fill: #113c18" >#7DD182</text>
<rect x="900" y="200" width="150" height="50" style="fill: #5AC262" />
<text x="905" y="229" style="font-size: 16px; fill: #113c18" >green4</text>
<text x="905" y="245" style="font-size: 12px; fill: #113c18" >#5AC262</text>
<rect x="900" y="250" width="150" height="50" style="fill: #3BB346" />
<text x="905" y="279" style="font-size: 16px; fill: #ecf7ec" >green5</text>
<text x="905" y="295" style="font-size: 12px; fill: #ecf7ec" >#3BB346</text>
<rect x="900" y="300" width="150" height="50" style="fill: #30953B" />
<text x="905" y="329" style="font-size: 16px; fill: #ecf7ec" >green6</text>
<text x="905" y="345" style="font-size: 12px; fill: #ecf7ec" >#30953B</text>
<rect x="900" y="350" width="150" height="50" style="fill: #25772F" />
<text x="905" y="379" style="font-size: 16px; fill: #ecf7ec" >green7</text>
<text x="905" y="395" style="font-size: 12px; fill: #ecf7ec" >#25772F</text>
<rect x="900" y="400" width="150" height="50" style="fill: #1B5924" />
<text x="905" y="429" style="font-size: 16px; fill: #ecf7ec" >green8</text>
<text x="905" y="445" style="font-size: 12px; fill: #ecf7ec" >#1B5924</text>
<rect x="900" y="450" width="150" height="50" style="fill: #113C18" />
<text x="905" y="479" style="font-size: 16px; fill: #ecf7ec" >green9</text>
<text x="905" y="495" style="font-size: 12px; fill: #ecf7ec" >#113C18</text>
<rect x="1050" y="0" width="150" height="50" style="fill: #E4F7F4" />
<text x="1055" y="29" style="font-size: 16px; fill: #003c3a" >teal0</text>
<text x="1055" y="45" style="font-size: 12px; fill: #003c3a" >#E4F7F4</text>
<rect x="1050" y="50" width="150" height="50" style="fill: #C0F0E8" />
<text x="1055" y="79" style="font-size: 16px; fill: #003c3a" >teal1</text>
<text x="1055" y="95" style="font-size: 12px; fill: #003c3a" >#C0F0E8</text>
<rect x="1050" y="100" width="150" height="50" style="fill: #87E0D3" />
<text x="1055" y="129" style="font-size: 16px; fill: #003c3a" >teal2</text>
<text x="1055" y="145" style="font-size: 12px; fill: #003c3a" >#87E0D3</text>
<rect x="1050" y="150" width="150" height="50" style="fill: #54D1C1" />
<text x="1055" y="179" style="font-size: 16px; fill: #003c3a" >teal3</text>
<text x="1055" y="195" style="font-size: 12px; fill: #003c3a" >#54D1C1</text>
<rect x="1050" y="200" width="150" height="50" style="fill: #27C2B0" />
<text x="1055" y="229" style="font-size: 16px; fill: #003c3a" >teal4</text>
<text x="1055" y="245" style="font-size: 12px; fill: #003c3a" >#27C2B0</text>
<rect x="1050" y="250" width="150" height="50" style="fill: #00B3A1" />
<text x="1055" y="279" style="font-size: 16px; fill: #e4f7f4" >teal5</text>
<text x="1055" y="295" style="font-size: 12px; fill: #e4f7f4" >#00B3A1</text>
<rect x="1050" y="300" width="150" height="50" style="fill: #009589" />
<text x="1055" y="329" style="font-size: 16px; fill: #e4f7f4" >teal6</text>
<text x="1055" y="345" style="font-size: 12px; fill: #e4f7f4" >#009589</text>
<rect x="1050" y="350" width="150" height="50" style="fill: #00776F" />
<text x="1055" y="379" style="font-size: 16px; fill: #e4f7f4" >teal7</text>
<text x="1055" y="395" style="font-size: 12px; fill: #e4f7f4" >#00776F</text>
<rect x="1050" y="400" width="150" height="50" style="fill: #005955" />
<text x="1055" y="429" style="font-size: 16px; fill: #e4f7f4" >teal8</text>
<text x="1055" y="445" style="font-size: 12px; fill: #e4f7f4" >#005955</text>
<rect x="1050" y="450" width="150" height="50" style="fill: #003C3A" />
<text x="1055" y="479" style="font-size: 16px; fill: #e4f7f4" >teal9</text>
<text x="1055" y="495" style="font-size: 12px; fill: #e4f7f4" >#003C3A</text>
<rect x="0" y="500" width="150" height="50" style="fill: #E5F7F8" />
<text x="5" y="529" style="font-size: 16px; fill: #00323d" >cyan0</text>
<text x="5" y="545" style="font-size: 12px; fill: #00323d" >#E5F7F8</text>
<rect x="0" y="550" width="150" height="50" style="fill: #C2EFF0" />
<text x="5" y="579" style="font-size: 16px; fill: #00323d" >cyan1</text>
<text x="5" y="595" style="font-size: 12px; fill: #00323d" >#C2EFF0</text>
<rect x="0" y="600" width="150" height="50" style="fill: #8ADDE2" />
<text x="5" y="629" style="font-size: 16px; fill: #00323d" >cyan2</text>
<text x="5" y="645" style="font-size: 12px; fill: #00323d" >#8ADDE2</text>
<rect x="0" y="650" width="150" height="50" style="fill: #58CBD3" />
<text x="5" y="679" style="font-size: 16px; fill: #00323d" >cyan3</text>
<text x="5" y="695" style="font-size: 12px; fill: #00323d" >#58CBD3</text>
<rect x="0" y="700" width="150" height="50" style="fill: #2CB8C5" />
<text x="5" y="729" style="font-size: 16px; fill: #00323d" >cyan4</text>
<text x="5" y="745" style="font-size: 12px; fill: #00323d" >#2CB8C5</text>
<rect x="0" y="750" width="150" height="50" style="fill: #05A4B6" />
<text x="5" y="779" style="font-size: 16px; fill: #e5f7f8" >cyan5</text>
<text x="5" y="795" style="font-size: 12px; fill: #e5f7f8" >#05A4B6</text>
<rect x="0" y="800" width="150" height="50" style="fill: #038698" />
<text x="5" y="829" style="font-size: 16px; fill: #e5f7f8" >cyan6</text>
<text x="5" y="845" style="font-size: 12px; fill: #e5f7f8" >#038698</text>
<rect x="0" y="850" width="150" height="50" style="fill: #016979" />
<text x="5" y="879" style="font-size: 16px; fill: #e5f7f8" >cyan7</text>
<text x="5" y="895" style="font-size: 12px; fill: #e5f7f8" >#016979</text>
<rect x="0" y="900" width="150" height="50" style="fill: #004D5B" />
<text x="5" y="929" style="font-size: 16px; fill: #e5f7f8" >cyan8</text>
<text x="5" y="945" style="font-size: 12px; fill: #e5f7f8" >#004D5B</text>
<rect x="0" y="950" width="150" height="50" style="fill: #00323D" />
<text x="5" y="979" style="font-size: 16px; fill: #e5f7f8" >cyan9</text>
<text x="5" y="995" style="font-size: 12px; fill: #e5f7f8" >#00323D</text>
<rect x="150" y="500" width="150" height="50" style="fill: #E9F7FD" />
<text x="155" y="529" style="font-size: 16px; fill: #00355f" >lightBlue0</text>
<text x="155" y="545" style="font-size: 12px; fill: #00355f" >#E9F7FD</text>
<rect x="150" y="550" width="150" height="50" style="fill: #C9ECFC" />
<text x="155" y="579" style="font-size: 16px; fill: #00355f" >lightBlue1</text>
<text x="155" y="595" style="font-size: 12px; fill: #00355f" >#C9ECFC</text>
<rect x="150" y="600" width="150" height="50" style="fill: #95D8F8" />
<text x="155" y="629" style="font-size: 16px; fill: #00355f" >lightBlue2</text>
<text x="155" y="645" style="font-size: 12px; fill: #00355f" >#95D8F8</text>
<rect x="150" y="650" width="150" height="50" style="fill: #62C3F5" />
<text x="155" y="679" style="font-size: 16px; fill: #00355f" >lightBlue3</text>
<text x="155" y="695" style="font-size: 12px; fill: #00355f" >#62C3F5</text>
<rect x="150" y="700" width="150" height="50" style="fill: #30ACF1" />
<text x="155" y="729" style="font-size: 16px; fill: #00355f" >lightBlue4</text>
<text x="155" y="745" style="font-size: 12px; fill: #00355f" >#30ACF1</text>
<rect x="150" y="750" width="150" height="50" style="fill: #0095EE" />
<text x="155" y="779" style="font-size: 16px; fill: #e9f7fd" >lightBlue5</text>
<text x="155" y="795" style="font-size: 12px; fill: #e9f7fd" >#0095EE</text>
<rect x="150" y="800" width="150" height="50" style="fill: #007BCA" />
<text x="155" y="829" style="font-size: 16px; fill: #e9f7fd" >lightBlue6</text>
<text x="155" y="845" style="font-size: 12px; fill: #e9f7fd" >#007BCA</text>
<rect x="150" y="850" width="150" height="50" style="fill: #0063A7" />
<text x="155" y="879" style="font-size: 16px; fill: #e9f7fd" >lightBlue7</text>
<text x="155" y="895" style="font-size: 12px; fill: #e9f7fd" >#0063A7</text>
<rect x="150" y="900" width="150" height="50" style="fill: #004B83" />
<text x="155" y="929" style="font-size: 16px; fill: #e9f7fd" >lightBlue8</text>
<text x="155" y="945" style="font-size: 12px; fill: #e9f7fd" >#004B83</text>
<rect x="150" y="950" width="150" height="50" style="fill: #00355F" />
<text x="155" y="979" style="font-size: 16px; fill: #e9f7fd" >lightBlue9</text>
<text x="155" y="995" style="font-size: 12px; fill: #e9f7fd" >#00355F</text>
<rect x="300" y="500" width="150" height="50" style="fill: #EAF5FF" />
<text x="305" y="529" style="font-size: 16px; fill: #002c6b" >blue0</text>
<text x="305" y="545" style="font-size: 12px; fill: #002c6b" >#EAF5FF</text>
<rect x="300" y="550" width="150" height="50" style="fill: #CBE7FE" />
<text x="305" y="579" style="font-size: 16px; fill: #002c6b" >blue1</text>
<text x="305" y="595" style="font-size: 12px; fill: #002c6b" >#CBE7FE</text>
<rect x="300" y="600" width="150" height="50" style="fill: #98CDFD" />
<text x="305" y="629" style="font-size: 16px; fill: #002c6b" >blue2</text>
<text x="305" y="645" style="font-size: 12px; fill: #002c6b" >#98CDFD</text>
<rect x="300" y="650" width="150" height="50" style="fill: #65B2FC" />
<text x="305" y="679" style="font-size: 16px; fill: #002c6b" >blue3</text>
<text x="305" y="695" style="font-size: 12px; fill: #002c6b" >#65B2FC</text>
<rect x="300" y="700" width="150" height="50" style="fill: #3295FB" />
<text x="305" y="729" style="font-size: 16px; fill: #002c6b" >blue4</text>
<text x="305" y="745" style="font-size: 12px; fill: #002c6b" >#3295FB</text>
<rect x="300" y="750" width="150" height="50" style="fill: #0064FA" />
<text x="305" y="779" style="font-size: 16px; fill: #eaf5ff" >blue5</text>
<text x="305" y="795" style="font-size: 12px; fill: #eaf5ff" >#0064FA</text>
<rect x="300" y="800" width="150" height="50" style="fill: #0062D6" />
<text x="305" y="829" style="font-size: 16px; fill: #eaf5ff" >blue6</text>
<text x="305" y="845" style="font-size: 12px; fill: #eaf5ff" >#0062D6</text>
<rect x="300" y="850" width="150" height="50" style="fill: #004FB3" />
<text x="305" y="879" style="font-size: 16px; fill: #eaf5ff" >blue7</text>
<text x="305" y="895" style="font-size: 12px; fill: #eaf5ff" >#004FB3</text>
<rect x="300" y="900" width="150" height="50" style="fill: #003D8F" />
<text x="305" y="929" style="font-size: 16px; fill: #eaf5ff" >blue8</text>
<text x="305" y="945" style="font-size: 12px; fill: #eaf5ff" >#003D8F</text>
<rect x="300" y="950" width="150" height="50" style="fill: #002C6B" />
<text x="305" y="979" style="font-size: 16px; fill: #eaf5ff" >blue9</text>
<text x="305" y="995" style="font-size: 12px; fill: #eaf5ff" >#002C6B</text>
<rect x="450" y="500" width="150" height="50" style="fill: #ECEFF8" />
<text x="455" y="529" style="font-size: 16px; fill: #171d63" >indigo0</text>
<text x="455" y="545" style="font-size: 12px; fill: #171d63" >#ECEFF8</text>
<rect x="450" y="550" width="150" height="50" style="fill: #D1D8F0" />
<text x="455" y="579" style="font-size: 16px; fill: #171d63" >indigo1</text>
<text x="455" y="595" style="font-size: 12px; fill: #171d63" >#D1D8F0</text>
<rect x="450" y="600" width="150" height="50" style="fill: #A7B3E1" />
<text x="455" y="629" style="font-size: 16px; fill: #171d63" >indigo2</text>
<text x="455" y="645" style="font-size: 12px; fill: #171d63" >#A7B3E1</text>
<rect x="450" y="650" width="150" height="50" style="fill: #8090D3" />
<text x="455" y="679" style="font-size: 16px; fill: #171d63" >indigo3</text>
<text x="455" y="695" style="font-size: 12px; fill: #171d63" >#8090D3</text>
<rect x="450" y="700" width="150" height="50" style="fill: #5E6FC4" />
<text x="455" y="729" style="font-size: 16px; fill: #171d63" >indigo4</text>
<text x="455" y="745" style="font-size: 12px; fill: #171d63" >#5E6FC4</text>
<rect x="450" y="750" width="150" height="50" style="fill: #3F51B5" />
<text x="455" y="779" style="font-size: 16px; fill: #eceff8" >indigo5</text>
<text x="455" y="795" style="font-size: 12px; fill: #eceff8" >#3F51B5</text>
<rect x="450" y="800" width="150" height="50" style="fill: #3342A1" />
<text x="455" y="829" style="font-size: 16px; fill: #eceff8" >indigo6</text>
<text x="455" y="845" style="font-size: 12px; fill: #eceff8" >#3342A1</text>
<rect x="450" y="850" width="150" height="50" style="fill: #28348C" />
<text x="455" y="879" style="font-size: 16px; fill: #eceff8" >indigo7</text>
<text x="455" y="895" style="font-size: 12px; fill: #eceff8" >#28348C</text>
<rect x="450" y="900" width="150" height="50" style="fill: #1F2878" />
<text x="455" y="929" style="font-size: 16px; fill: #eceff8" >indigo8</text>
<text x="455" y="945" style="font-size: 12px; fill: #eceff8" >#1F2878</text>
<rect x="450" y="950" width="150" height="50" style="fill: #171D63" />
<text x="455" y="979" style="font-size: 16px; fill: #eceff8" >indigo9</text>
<text x="455" y="995" style="font-size: 12px; fill: #eceff8" >#171D63</text>
<rect x="600" y="500" width="150" height="50" style="fill: #F3EDF9" />
<text x="605" y="529" style="font-size: 16px; fill: #281475" >violet0</text>
<text x="605" y="545" style="font-size: 12px; fill: #281475" >#F3EDF9</text>
<rect x="600" y="550" width="150" height="50" style="fill: #E2D1F4" />
<text x="605" y="579" style="font-size: 16px; fill: #281475" >violet1</text>
<text x="605" y="595" style="font-size: 12px; fill: #281475" >#E2D1F4</text>
<rect x="600" y="600" width="150" height="50" style="fill: #C4A7E9" />
<text x="605" y="629" style="font-size: 16px; fill: #281475" >violet2</text>
<text x="605" y="645" style="font-size: 12px; fill: #281475" >#C4A7E9</text>
<rect x="600" y="650" width="150" height="50" style="fill: #A67FDD" />
<text x="605" y="679" style="font-size: 16px; fill: #281475" >violet3</text>
<text x="605" y="695" style="font-size: 12px; fill: #281475" >#A67FDD</text>
<rect x="600" y="700" width="150" height="50" style="fill: #885BD2" />
<text x="605" y="729" style="font-size: 16px; fill: #281475" >violet4</text>
<text x="605" y="745" style="font-size: 12px; fill: #281475" >#885BD2</text>
<rect x="600" y="750" width="150" height="50" style="fill: #6A3AC7" />
<text x="605" y="779" style="font-size: 16px; fill: #f3edf9" >violet5</text>
<text x="605" y="795" style="font-size: 12px; fill: #f3edf9" >#6A3AC7</text>
<rect x="600" y="800" width="150" height="50" style="fill: #572FB3" />
<text x="605" y="829" style="font-size: 16px; fill: #f3edf9" >violet6</text>
<text x="605" y="845" style="font-size: 12px; fill: #f3edf9" >#572FB3</text>
<rect x="600" y="850" width="150" height="50" style="fill: #46259E" />
<text x="605" y="879" style="font-size: 16px; fill: #f3edf9" >violet7</text>
<text x="605" y="895" style="font-size: 12px; fill: #f3edf9" >#46259E</text>
<rect x="600" y="900" width="150" height="50" style="fill: #361C8A" />
<text x="605" y="929" style="font-size: 16px; fill: #f3edf9" >violet8</text>
<text x="605" y="945" style="font-size: 12px; fill: #f3edf9" >#361C8A</text>
<rect x="600" y="950" width="150" height="50" style="fill: #281475" />
<text x="605" y="979" style="font-size: 16px; fill: #f3edf9" >violet9</text>
<text x="605" y="995" style="font-size: 12px; fill: #f3edf9" >#281475</text>
<rect x="750" y="500" width="150" height="50" style="fill: #F7E9F7" />
<text x="755" y="529" style="font-size: 16px; fill: #490a61" >purple0</text>
<text x="755" y="545" style="font-size: 12px; fill: #490a61" >#F7E9F7</text>
<rect x="750" y="550" width="150" height="50" style="fill: #EFCAF0" />
<text x="755" y="579" style="font-size: 16px; fill: #490a61" >purple1</text>
<text x="755" y="595" style="font-size: 12px; fill: #490a61" >#EFCAF0</text>
<rect x="750" y="600" width="150" height="50" style="fill: #DD9BE0" />
<text x="755" y="629" style="font-size: 16px; fill: #490a61" >purple2</text>
<text x="755" y="645" style="font-size: 12px; fill: #490a61" >#DD9BE0</text>
<rect x="750" y="650" width="150" height="50" style="fill: #C96FD1" />
<text x="755" y="679" style="font-size: 16px; fill: #490a61" >purple3</text>
<text x="755" y="695" style="font-size: 12px; fill: #490a61" >#C96FD1</text>
<rect x="750" y="700" width="150" height="50" style="fill: #B449C2" />
<text x="755" y="729" style="font-size: 16px; fill: #490a61" >purple4</text>
<text x="755" y="745" style="font-size: 12px; fill: #490a61" >#B449C2</text>
<rect x="750" y="750" width="150" height="50" style="fill: #9E28B3" />
<text x="755" y="779" style="font-size: 16px; fill: #f7e9f7" >purple5</text>
<text x="755" y="795" style="font-size: 12px; fill: #f7e9f7" >#9E28B3</text>
<rect x="750" y="800" width="150" height="50" style="fill: #871E9E" />
<text x="755" y="829" style="font-size: 16px; fill: #f7e9f7" >purple6</text>
<text x="755" y="845" style="font-size: 12px; fill: #f7e9f7" >#871E9E</text>
<rect x="750" y="850" width="150" height="50" style="fill: #71168A" />
<text x="755" y="879" style="font-size: 16px; fill: #f7e9f7" >purple7</text>
<text x="755" y="895" style="font-size: 12px; fill: #f7e9f7" >#71168A</text>
<rect x="750" y="900" width="150" height="50" style="fill: #5C0F75" />
<text x="755" y="929" style="font-size: 16px; fill: #f7e9f7" >purple8</text>
<text x="755" y="945" style="font-size: 12px; fill: #f7e9f7" >#5C0F75</text>
<rect x="750" y="950" width="150" height="50" style="fill: #490A61" />
<text x="755" y="979" style="font-size: 16px; fill: #f7e9f7" >purple9</text>
<text x="755" y="995" style="font-size: 12px; fill: #f7e9f7" >#490A61</text>
<rect x="900" y="500" width="150" height="50" style="fill: #FDECEF" />
<text x="905" y="529" style="font-size: 16px; fill: #5a012b" >pink0</text>
<text x="905" y="545" style="font-size: 12px; fill: #5a012b" >#FDECEF</text>
<rect x="900" y="550" width="150" height="50" style="fill: #FBCFD8" />
<text x="905" y="579" style="font-size: 16px; fill: #5a012b" >pink1</text>
<text x="905" y="595" style="font-size: 12px; fill: #5a012b" >#FBCFD8</text>
<rect x="900" y="600" width="150" height="50" style="fill: #F6A0B5" />
<text x="905" y="629" style="font-size: 16px; fill: #5a012b" >pink2</text>
<text x="905" y="645" style="font-size: 12px; fill: #5a012b" >#F6A0B5</text>
<rect x="900" y="650" width="150" height="50" style="fill: #F27396" />
<text x="905" y="679" style="font-size: 16px; fill: #5a012b" >pink3</text>
<text x="905" y="695" style="font-size: 12px; fill: #5a012b" >#F27396</text>
<rect x="900" y="700" width="150" height="50" style="fill: #ED487B" />
<text x="905" y="729" style="font-size: 16px; fill: #5a012b" >pink4</text>
<text x="905" y="745" style="font-size: 12px; fill: #5a012b" >#ED487B</text>
<rect x="900" y="750" width="150" height="50" style="fill: #E91E63" />
<text x="905" y="779" style="font-size: 16px; fill: #fdecef" >pink5</text>
<text x="905" y="795" style="font-size: 12px; fill: #fdecef" >#E91E63</text>
<rect x="900" y="800" width="150" height="50" style="fill: #C51356" />
<text x="905" y="829" style="font-size: 16px; fill: #fdecef" >pink6</text>
<text x="905" y="845" style="font-size: 12px; fill: #fdecef" >#C51356</text>
<rect x="900" y="850" width="150" height="50" style="fill: #A20B48" />
<text x="905" y="879" style="font-size: 16px; fill: #fdecef" >pink7</text>
<text x="905" y="895" style="font-size: 12px; fill: #fdecef" >#A20B48</text>
<rect x="900" y="900" width="150" height="50" style="fill: #7E053A" />
<text x="905" y="929" style="font-size: 16px; fill: #fdecef" >pink8</text>
<text x="905" y="945" style="font-size: 12px; fill: #fdecef" >#7E053A</text>
<rect x="900" y="950" width="150" height="50" style="fill: #5A012B" />
<text x="905" y="979" style="font-size: 16px; fill: #fdecef" >pink9</text>
<text x="905" y="995" style="font-size: 12px; fill: #fdecef" >#5A012B</text>
<rect x="1050" y="500" width="150" height="50" style="fill: #F9F9F9" />
<text x="1055" y="529" style="font-size: 16px; fill: #1c1f23" >grey0</text>
<text x="1055" y="545" style="font-size: 12px; fill: #1c1f23" >#F9F9F9</text>
<rect x="1050" y="550" width="150" height="50" style="fill: #E6E8EA" />
<text x="1055" y="579" style="font-size: 16px; fill: #1c1f23" >grey1</text>
<text x="1055" y="595" style="font-size: 12px; fill: #1c1f23" >#E6E8EA</text>
<rect x="1050" y="600" width="150" height="50" style="fill: #C6CACD" />
<text x="1055" y="629" style="font-size: 16px; fill: #1c1f23" >grey2</text>
<text x="1055" y="645" style="font-size: 12px; fill: #1c1f23" >#C6CACD</text>
<rect x="1050" y="650" width="150" height="50" style="fill: #A7ABB0" />
<text x="1055" y="679" style="font-size: 16px; fill: #1c1f23" >grey3</text>
<text x="1055" y="695" style="font-size: 12px; fill: #1c1f23" >#A7ABB0</text>
<rect x="1050" y="700" width="150" height="50" style="fill: #888D92" />
<text x="1055" y="729" style="font-size: 16px; fill: #1c1f23" >grey4</text>
<text x="1055" y="745" style="font-size: 12px; fill: #1c1f23" >#888D92</text>
<rect x="1050" y="750" width="150" height="50" style="fill: #6B7075" />
<text x="1055" y="779" style="font-size: 16px; fill: #f9f9f9" >grey5</text>
<text x="1055" y="795" style="font-size: 12px; fill: #f9f9f9" >#6B7075</text>
<rect x="1050" y="800" width="150" height="50" style="fill: #555B61" />
<text x="1055" y="829" style="font-size: 16px; fill: #f9f9f9" >grey6</text>
<text x="1055" y="845" style="font-size: 12px; fill: #f9f9f9" >#555B61</text>
<rect x="1050" y="850" width="150" height="50" style="fill: #41464C" />
<text x="1055" y="879" style="font-size: 16px; fill: #f9f9f9" >grey7</text>
<text x="1055" y="895" style="font-size: 12px; fill: #f9f9f9" >#41464C</text>
<rect x="1050" y="900" width="150" height="50" style="fill: #2E3238" />
<text x="1055" y="929" style="font-size: 16px; fill: #f9f9f9" >grey8</text>
<text x="1055" y="945" style="font-size: 12px; fill: #f9f9f9" >#2E3238</text>
<rect x="1050" y="950" width="150" height="50" style="fill: #1C1F23" />
<text x="1055" y="979" style="font-size: 16px; fill: #f9f9f9" >grey9</text>
<text x="1055" y="995" style="font-size: 12px; fill: #f9f9f9" >#1C1F23</text>
<rect x="0" y="1000" width="600" height="50" style="fill: #FFFFFF" />
<text x="5" y="1029" style="font-size: 16px; fill: #808080" >white</text>
<text x="5" y="1045" style="font-size: 12px; fill: #808080" >#FFFFFF</text>
<rect x="600" y="1000" width="600" height="50" style="fill: #000000" />
<text x="605" y="1029" style="font-size: 16px; fill: #808080" >black</text>
<text x="605" y="1045" style="font-size: 12px; fill: #808080" >#000000</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

28
src/ui/ui.c
View File

@ -3231,33 +3231,30 @@ const oc_ui_edit_command OC_UI_EDIT_COMMANDS_WINDOWS[] = {
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_DELETE,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
{ .key = OC_KEY_DELETE,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): copy
{
.key = OC_KEY_C,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_INSERT,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
{ .key = OC_KEY_INSERT,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): paste
{
.key = OC_KEY_V,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_INSERT,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE }
{ .key = OC_KEY_INSERT,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE }
};
const u32 OC_UI_EDIT_COMMAND_MACOS_COUNT = sizeof(OC_UI_EDIT_COMMANDS_MACOS) / sizeof(oc_ui_edit_command);
@ -3913,6 +3910,7 @@ oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8
//------------------------------------------------------------------------------
// Themes
// doc/UIColors.md has them visualized
//------------------------------------------------------------------------------
oc_ui_palette OC_UI_DARK_PALETTE = {