Adds options for bar workspace button shape (#582)

* Add option for default workspace indicator radius

Enabling this option allows for the changing of the workspaces indicator
shape into a cornered rectangular/square shape.

This radius value was previously hard-coded for a full round indicator
shape. This change exposes an option in the `settings-dialog` under
Configuration > Bar > Workspaces > Indicator Radius

default value: `1.9rem * 0.6`

{
  "theme.bar.buttons.workspaces.radius": "1.9rem * 0.6"
}

* Adds options for workspace indicator height, width, and active_width

This adds some additional options to allow for further customization to
the default workspace indicators.

Nests the radius from my previous commit into an indicator scoped option:

```ts
theme: {
  bar: {
    workspaces: {
      indicator: {
        radius: opt('1.9rem * 0.6'),
        height: opt('4em'),
        width: opt('4em'),
        active_width: opt('12em'),
      }
    }
  }
}
```

* Apply suggestions from code review

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

src/components/settings/pages/config/bar/index.tsx

@@ -146,6 +146,30 @@ export const BarSettings = (): JSX.Element => {
                     subtitle="Marks the currently active workspace on each monitor."
                     type="boolean"
                 />
+                <Option
+                    opt={options.theme.bar.buttons.workspaces.pill.radius}
+                    title="Pill Radius"
+                    subtitle="Adjust the radius for the default indicator."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.workspaces.pill.height}
+                    title="Pill Height"
+                    subtitle="Adjust the height for the default indicator."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.workspaces.pill.width}
+                    title="Pill Width"
+                    subtitle="Adjust the width for the default indicator."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.buttons.workspaces.pill.active_width}
+                    title="Active Pill Width"
+                    subtitle="Adjust the width for the active default indicator."
+                    type="string"
+                />
                 <Option
                     opt={options.theme.bar.buttons.workspaces.fontSize}
                     title="Indicator Size"

src/options.ts

@@ -207,6 +207,12 @@ const options = mkOptions(CONFIG, {
                     numbered_active_underline_color: opt(colors.pink),
                     spacing: opt('0.5em'),
                     fontSize: opt('1.2em'),
+                    pill: {
+                        radius: opt('1.9rem * 0.6'),
+                        height: opt('4em'),
+                        width: opt('4em'),
+                        active_width: opt('12em'),
+                    },
                 },
                 windowtitle: {
                     background: opt(colors.base2),

src/scss/style/bar/workspace.scss

@@ -1,9 +1,9 @@
 .workspaces {
     label {
         font-size: 0.2em;
-        min-width: 4em;
+        min-width: $bar-buttons-workspaces-pill-width;
-        min-height: 4em;
+        min-height: $bar-buttons-workspaces-pill-height;
-        border-radius: 1.9rem * 0.6;
+        border-radius: $bar-buttons-workspaces-pill-radius;
         transition: 300ms * 0.5;
         background-color: $bar-buttons-workspaces-available;
         color: $bar-buttons-workspaces-available;
@@ -11,15 +11,15 @@
         &.occupied {
             background-color: $bar-buttons-workspaces-occupied;
             color: $bar-buttons-workspaces-occupied;
-            min-width: 4em;
+            min-width: $bar-buttons-workspaces-pill-width;
-            min-height: 4em;
+            min-height: $bar-buttons-workspaces-pill-height;
         }
 
         &.active {
             background-color: $bar-buttons-workspaces-active;
             color: $bar-buttons-workspaces-active;
-            min-width: 12em;
+            min-width: $bar-buttons-workspaces-pill-active_width;
-            min-height: 4em;
+            min-height: $bar-buttons-workspaces-pill-height;
         }
 
         &.workspace-icon {