[design] improve form select arrow

Author: zombieFox

src/css/form.css

@@ -22,13 +22,13 @@ select{
 linear-gradient(45deg, transparent 60%,rgb(var(--form-label)) 60%),
 linear-gradient(135deg,rgb(var(--form-label)) 40%, transparent 40%);
 background-position:
-calc(100%-calc(var(--form-arrow-size) *4)) 50%,
-calc(100%-calc(var(--form-arrow-size) *3)) 50%;
+calc(100%-2em) 50%,
+calc(100%-1.5em) 50%;
 background-size:
-var(--form-arrow-size) calc(var(--form-arrow-size) *0.75),
-var(--form-arrow-size) calc(var(--form-arrow-size) *0.75);
+0.5em0.375em,
+0.5em0.375em;
 background-repeat: no-repeat;
-padding:0calc(var(--form-arrow-size)*8) 01em;
+padding:0calc(0.5em*8) 01em;
 margin:001em0;
 color:rgb(var(--form-label));
 font-size:1em;

src/css/variables.css

@@ -148,7 +148,6 @@
 --form-grid-border-checked:var(--theme-accent);
 --form-grid-border-disabled:var(--theme-gray-04);
 --form-dropdown-background:var(--theme-gray-02);
---form-arrow-size:calc(var(--theme-root-font-size) *0.5);
 --form-hover-ring:000var(--layout-line-width) rgb(var(--theme-gray-06));
 --form-focus-ring:000var(--layout-line-width) rgb(var(--theme-gray-10)),000calc(var(--layout-line-width) *2) rgba(var(--theme-gray-10),0.25);
 --form-focus-ring-accent:000var(--layout-line-width) rgb(var(--theme-accent)),000calc(var(--layout-line-width) *2) rgba(var(--theme-accent),0.25);