[components] Various UI tweaks

packages/@sanity/components/src/fieldsets/DefaultFieldset.css

@@ -8,25 +8,25 @@
 .fieldWrapper {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  grid-gap: var(--large-padding) var(--medium-padding);
+  grid-gap: 2rem var(--medium-padding);
 }
 
 .fieldset {
   margin: 0;
   padding: 0;
   border: none;
-  /* user agent sets min-width this to --webkit-min-content */
   min-width: 0;
 }
 
 .header {
   display: flex;
   align-items: center;
-  margin-bottom: var(--small-padding);
+  padding-bottom: var(--small-padding);
 }
 
 .headerMain {
   flex-grow: 1;
+  padding: var(--extra-small-padding) 0;
 }
 
 .headerStatus {
@@ -142,7 +142,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  margin: 0;
+  margin: -1px 0 0;
   padding: 0;
   user-select: none;
   cursor: default;

packages/@sanity/components/src/fieldsets/FieldStatus.css

@@ -1,21 +1,22 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  margin-left: auto;
-  flex: 1 0 auto;
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
   min-height: var(--avatar-height);
-  max-width: 125px;
-  width: 100%;
-  padding-left: var(--small-padding);
-}
+  width: 77px;
+  margin-left: var(--small-padding);
 
-.root[data-position='top'] {
-  align-self: flex-start;
-}
+  @nest &[data-max-avatars='1'] {
+    max-width: 23px;
+  }
+
+  @nest &[data-position='top'] {
+    align-self: flex-start;
+  }
 
-.root[data-position='bottom'] {
-  align-self: flex-end;
+  @nest &[data-position='bottom'] {
+    align-self: flex-end;
+  }
 }

packages/@sanity/components/src/fieldsets/FieldStatus.tsx

@@ -4,12 +4,13 @@ import styles from './FieldStatus.css'
 
 interface FieldStatusProps {
   children?: React.ReactNode
+  maxAvatars?: number
   position?: 'top' | 'bottom'
 }
 
-export default function FieldStatus({position = 'bottom', children}: FieldStatusProps) {
+export default function FieldStatus({children, maxAvatars, position = 'bottom'}: FieldStatusProps) {
   return (
-    <div className={styles.root} data-position={position}>
+    <div className={styles.root} data-max-avatars={maxAvatars} data-position={position}>
       {children}
     </div>
   )

packages/@sanity/components/src/formfields/DefaultFormField.css

@@ -38,32 +38,27 @@
   }
 }
 
-.title {
+.header {
   display: flex;
   align-items: center;
+  padding-bottom: var(--small-padding);
 }
 
-.description {
-  composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
-  margin-top: var(--extra-small-padding);  
-
-  /* @nest .inline & {
-    font-size: var(--font-size-tiny);
-  } */
-
-  /* @nest .label + & {
-    margin-top: calc(var(--small-padding) / 4);
-  } */
+.headerMain {
+  flex: 1;
+  min-width: 0;
+  padding: var(--extra-small-padding) 0;
 }
 
-.header {
+.title {
   display: flex;
   align-items: center;
-  padding: 0 0 var(--small-padding);
+  margin-top: -1px;
 }
 
-.headerMain {
-  flex-grow: 1;
+.description {
+  composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
+  margin-top: var(--extra-small-padding);
 }
 
 .validationStatus {

packages/@sanity/components/src/radiobutton/RadioButtonDefault.css

@@ -29,28 +29,25 @@
 }
 
 .radio {
-  flex-shrink: 0;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: var(--radio-button-size);
   width: var(--radio-button-size);
-  border: 1px solid var(--radio-off-color);
-  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px var(--radio-off-color);
+  border-radius: calc(var(--radio-button-size) / 2);
   margin-right: var(--small-padding);
-  line-height: 1;
 
   @nest &::after {
     position: absolute;
     content: '';
-    height: 100%;
-    width: 100%;
+    height: 9px;
+    width: 9px;
     box-sizing: border-box;
     background: var(--text-color);
-    border-radius: 50%;
+    border-radius: 4.5px;
     opacity: 0;
-    transform: scale(0.4);
   }
 }
 
@@ -73,7 +70,6 @@
 
 .input:checked + .radio::after {
   opacity: 1;
-  transform: scale(0.55);
 }
 
 .input:disabled + .radio {

packages/@sanity/components/src/radiobutton/RadioButtonDefault.tsx

@@ -26,7 +26,7 @@ export default function RadioButton({
 
   const handleChange = useCallback(() => {
     if (onChange) onChange(item)
-  }, [onChange])
+  }, [item, onChange])
 
   return (
     <div className={styles.root}>

packages/@sanity/components/src/selects/RadioSelect.css

@@ -1,15 +1,23 @@
 @import 'part:@sanity/base/theme/variables-style';
 
+:root {
+  --radio-select-padding-narrow: calc(var(--medium-padding) - var(--extra-small-padding));
+}
+
 .root {
   display: flex;
   border: var(--input-border-size) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
-  padding: var(--medium-padding) var(--medium-padding) 0;
+  padding: var(--radio-select-padding-narrow) var(--radio-select-padding-narrow) 0;
+
+  @media (--screen-medium) {
+    padding: var(--medium-padding) var(--medium-padding) 0;
+  }
 }
 
 .vertical {
   @nest & .item + .item {
-    margin-top: 0.5em;
+    margin-top: var(--small-padding);
   }
 }
 
@@ -21,6 +29,11 @@
 }
 
 .item {
-  margin-right: var(--medium-padding);
-  margin-bottom: var(--medium-padding);
+  margin-right: var(--radio-select-padding-narrow);
+  margin-bottom: var(--radio-select-padding-narrow);
+
+  @media (--screen-medium) {
+    margin-right: var(--medium-padding);
+    margin-bottom: var(--medium-padding);
+  }
 }

packages/@sanity/components/src/toggles/Checkbox.css

@@ -3,7 +3,7 @@
 :root {
   --checkbox-off-color: var(--gray-light);
   --checkbox-color: var(--brand-primary);
-  --checkbox-button-size: 1em;
+  --checkbox-button-size: calc(17 / 16 * 1rem);
   --checkbox-top-offset: 0;
   --checkbox-focus-color: var(--brand-primary);
   --checkbox-disabled-border: var(--input-bg-disabled);
@@ -36,15 +36,14 @@
   justify-content: center;
   height: var(--checkbox-button-size);
   width: var(--checkbox-button-size);
-  border: 1px solid var(--checkbox-off-color);
+  box-shadow: inset 0 0 0 1px var(--checkbox-off-color);
+  /* border: 1px solid var(--checkbox-off-color); */
   border-radius: 3px;
-  margin-top: 1px;
-  line-height: 1;
 
   @nest & .mark {
     position: absolute;
-    top: calc((100% - var(--checkbox-button-size)) / 2);
-    left: calc((100% - var(--checkbox-button-size)) / 2);
+    top: 0;
+    left: 0;
     opacity: 0;
     flex: 1;
     height: var(--checkbox-button-size);

packages/@sanity/components/src/toggles/Switch.css

@@ -6,20 +6,19 @@
   --focus-color: var(--brand-primary);
 
   /* Thumb */
-  --thumb-size: 1rem;
+  --thumb-size: calc(15 / 16 * 1rem);
   --thumb-color: var(--switch-color);
   --thumb-off-color: var(--white);
   --thumb-on-color: var(--white);
   --thumb-disabled-color: var(--input-color-disabled);
-  --thumb-offset: 4px;
+  --thumb-offset: calc(4 / 16 * 1rem);
   /* Track */
-  --track-height: 1.5rem;
-  --track-width: 2.5rem;
+  --track-height: calc(23 / 16 * 1rem);
+  --track-width: calc(39 / 16 * 1rem);
   --track-disabled-color: var(--input-bg-disabled);
   --track-color: var(--gray-light);
   --track-off-color: var(--gray);
   --track-on-color: var(--state-success-color);
-
 }
 
 .root {
@@ -48,17 +47,16 @@
   height: var(--track-height);
   width: var(--track-width);
   border-radius: var(--track-height);
-  border: 2px solid transparent;
 }
 
 .thumb {
   background: var(--thumb-off-color);
   position: absolute;
   left: var(--thumb-offset);
-  top: calc((100% - var(--thumb-size)) / 2);
+  top: var(--thumb-offset);
   height: var(--thumb-size);
   width: var(--thumb-size);
-  border-radius: 50%;
+  border-radius: calc(var(--thumb-size) / 2);
   cursor: default;
   composes: animation-default from 'part:@sanity/base/theme/animation-style';
   transform-origin: left;
@@ -72,14 +70,13 @@
   top: 0;
   height: var(--track-height);
   width: var(--track-width);
-  border-radius: var(--track-height);
+  border-radius: calc(var(--track-height) / 2);
   cursor: default;
-  border: 1px solid var(--white);
   box-sizing: border-box;
 }
 
 .input:focus + .switchWrapper {
-  border-color: var(--focus-color);
+  box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px var(--focus-color);
 }
 
 .input:checked + .switchWrapper {
@@ -101,13 +98,13 @@
   @nest & .thumb {
     background: var(--thumb-disabled-color);
     cursor: auto;
-    opacity: 0.8;
+    opacity: 0.75;
   }
 
   @nest & .track {
     background: var(--track-disabled-color);
     cursor: default;
-    border: 1px solid var(--gray-light);
+    box-shadow: 0 0 0 1px var(--gray-light);
   }
 }
 

packages/@sanity/components/src/toggles/Switch.tsx

@@ -58,6 +58,7 @@ export default React.forwardRef(function Switch(
         <div className={styles.track} />
         <div className={styles.thumb} />
       </div>
+
       {label && (
         <div className={sharedStyles.label}>
           <div className={sharedStyles.titleWrapper}>

packages/@sanity/components/src/toggles/shared.css

@@ -10,6 +10,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
+  margin-top: -1px;
   margin-left: var(--small-padding);
 }