SelectButton visuals

components/lib/selectbutton/style/SelectButtonStyle.js

@@ -6,11 +6,12 @@ const theme = ({ dt }) => `
     user-select: none;
     vertical-align: bottom;
     outline-color: transparent;
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('selectbutton.border.radius')};
 }
 
 .p-selectbutton .p-togglebutton {
     border-radius: 0;
+    border-width: 1px 1px 1px 0;
 }
 
 .p-selectbutton .p-togglebutton:focus-visible {
@@ -19,13 +20,14 @@ const theme = ({ dt }) => `
 }
 
 .p-selectbutton .p-togglebutton:first-child {
-    border-top-left-radius: ${dt('border.radius.md')};
-    border-bottom-left-radius: ${dt('border.radius.md')};
+    border-left-width: 1px;
+    border-top-left-radius: ${dt('selectbutton.border.radius')};
+    border-bottom-left-radius: ${dt('selectbutton.border.radius')};
 }
 
 .p-selectbutton .p-togglebutton:last-child {
-    border-top-right-radius: ${dt('border.radius.md')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-top-right-radius: ${dt('selectbutton.border.radius')};
+    border-bottom-right-radius: ${dt('selectbutton.border.radius')};
 }
 
 .p-selectbutton.p-invalid {

components/lib/themes/aura/selectbutton/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        borderRadius: '{form.field.border.radius}'
+    },
     colorScheme: {
         light: {
             root: {

components/lib/themes/lara/selectbutton/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        borderRadius: '{form.field.border.radius}'
+    },
     colorScheme: {
         light: {
             root: {

components/lib/themes/lara/togglebutton/index.js

@@ -10,7 +10,7 @@ export default {
         hoverColor: '{form.field.color}',
         checkedBackground: '{highlight.background}',
         checkedColor: '{highlight.color}',
-        checkedBorderColor: '{highlight.focus.background}',
+        checkedBorderColor: '{form.field.border.color}',
         disabledBackground: '{form.field.disabled.background}',
         disabledBorderColor: '{form.field.disabled.background}',
         disabledColor: '{form.field.disabled.color}',

components/lib/themes/nora/selectbutton/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        borderRadius: '{form.field.border.radius}'
+    },
     colorScheme: {
         light: {
             root: {

components/lib/themes/nora/togglebutton/index.js

@@ -10,7 +10,7 @@ export default {
         hoverColor: '{form.field.color}',
         checkedBackground: '{highlight.background}',
         checkedColor: '{highlight.color}',
-        checkedBorderColor: '{highlight.focus.background}',
+        checkedBorderColor: '{form.field.border.color}',
         disabledBackground: '{form.field.disabled.background}',
         disabledBorderColor: '{form.field.disabled.background}',
         disabledColor: '{form.field.disabled.color}',