Update UI widget designs to improve color consistency and add a narrow height mode

This commit is contained in:
Keavon Chambers
2025-09-08 21:48:22 -07:00
parent 485152bf8d
commit 22aa8c1264
41 changed files with 364 additions and 197 deletions
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<circle cx="5.75" cy="5.75" r="5.75" />
</svg>

After

Width:  |  Height:  |  Size: 109 B

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M5.75,1A4.75,4.75,0,1,0,10.5,5.75,4.755,4.755,0,0,0,5.75,1m0-1A5.75,5.75,0,1,1,0,5.75,5.75,5.75,0,0,1,5.75,0z" />
</svg>

After

Width:  |  Height:  |  Size: 192 B

@@ -0,0 +1,54 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<rect x="5" y="2" width="1" height="1" />
<rect x="2" y="3" width="1" height="1" />
<rect x="0" y="3" width="1" height="1" />
<rect x="5" y="6" width="1" height="1" />
<rect x="2" y="7" width="1" height="1" />
<rect x="0" y="7" width="1" height="1" />
<rect x="2" y="9" width="1" height="1" />
<rect x="6" y="3" width="1" height="1" />
<rect x="8" y="3" width="1" height="1" />
<rect x="10" y="3" width="1" height="1" />
<rect x="3" y="4" width="1" height="1" />
<rect x="1" y="4" width="1" height="1" />
<rect x="6" y="7" width="1" height="1" />
<rect x="8" y="7" width="1" height="1" />
<rect x="10" y="7" width="1" height="1" />
<rect x="6" y="9" width="1" height="1" />
<rect x="8" y="9" width="1" height="1" />
<rect x="7" y="8" width="1" height="1" />
<rect x="9" y="8" width="1" height="1" />
<rect x="7" y="10" width="1" height="1" />
<rect x="3" y="8" width="1" height="1" />
<rect x="1" y="8" width="1" height="1" />
<rect x="3" y="10" width="1" height="1" />
<rect x="5" y="8" width="1" height="1" />
<rect x="5" y="10" width="1" height="1" />
<rect x="7" y="2" width="1" height="1" />
<rect x="9" y="2" width="1" height="1" />
<rect x="8" y="1" width="1" height="1" />
<rect x="4" y="3" width="1" height="1" />
<rect x="7" y="6" width="1" height="1" />
<rect x="9" y="6" width="1" height="1" />
<rect x="4" y="7" width="1" height="1" />
<rect x="4" y="9" width="1" height="1" />
<rect x="6" y="1" width="1" height="1" />
<rect x="3" y="2" width="1" height="1" />
<rect x="1" y="2" width="1" height="1" />
<rect x="3" y="0" width="1" height="1" />
<rect x="6" y="5" width="1" height="1" />
<rect x="8" y="5" width="1" height="1" />
<rect x="10" y="5" width="1" height="1" />
<rect x="3" y="6" width="1" height="1" />
<rect x="1" y="6" width="1" height="1" />
<rect x="5" y="0" width="1" height="1" />
<rect x="2" y="1" width="1" height="1" />
<rect x="5" y="4" width="1" height="1" />
<rect x="2" y="5" width="1" height="1" />
<rect x="0" y="5" width="1" height="1" />
<rect x="7" y="0" width="1" height="1" />
<rect x="4" y="1" width="1" height="1" />
<rect x="7" y="4" width="1" height="1" />
<rect x="9" y="4" width="1" height="1" />
<rect x="4" y="5" width="1" height="1" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path d="M0,11V8.5H1V10H2.5v1z" />
<path d="M0,2.5V0H2.5V1H1V2.5z" />
<path d="M9.5,11V10H11V8.5h1V11z" />
<path d="M11,2.5V1H9.5V0H12V2.5z" />
<path d="M5.75,0.75C8.51,0.75 10.75,2.878 10.75,5.5C10.75,8.122 8.51,10.25 5.75,10.25C2.99,10.25 0.75,8.122 0.75,5.5C0.75,2.878 2.99,0.75 5.75,0.75zM2,6L3.333,6L3.5,6.5L3.333,7L2,7L2,8L4,8L4.5,6.5L5,8L6,8L6.571,6.286L7,8L9.5,8L10,6L10,5L8.5,5L8.5,6L9,6L8.75,7L7.75,7L7.5,6L7.833,4L9,4L9,3L6,3L6,5L5.5,6.5L5,5L5,3L2,3L1.5,4.5L2,6zM2.667,4L4,4L4,5L2.667,5L2.5,4.5L2.667,4z" />
</svg>

After

Width:  |  Height:  |  Size: 592 B

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8" />
</svg>

Before

Width:  |  Height:  |  Size: 100 B

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S4.1,1,8,1 M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0L8,0z" />
</svg>

Before

Width:  |  Height:  |  Size: 192 B

@@ -1,23 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<rect x="7" y="1" width="2" height="2" />
<rect x="13" y="4" width="2" height="2" />
<rect x="13" y="7" width="2" height="2" />
<rect x="13" y="10" width="2" height="2" />
<rect x="7" y="13" width="2" height="2" />
<rect x="10" y="13" width="2" height="2" />
<rect x="4" y="13" width="2" height="2" />
<rect x="1" y="10" width="2" height="2" />
<rect x="1" y="7" width="2" height="2" />
<rect x="1" y="4" width="2" height="2" />
<rect x="4" y="1" width="2" height="2" />
<rect x="10" y="10" width="2" height="2" />
<rect x="4" y="10" width="2" height="2" />
<rect x="7" y="10" width="2" height="2" />
<rect x="10" y="7" width="2" height="2" />
<rect x="4" y="7" width="2" height="2" />
<rect x="7" y="7" width="2" height="2" />
<rect x="10" y="4" width="2" height="2" />
<rect x="4" y="4" width="2" height="2" />
<rect x="7" y="4" width="2" height="2" />
<rect x="10" y="1" width="2" height="2" />
</svg>

Before

Width:  |  Height:  |  Size: 987 B