fix: valid state border, focus area on radios (#511)

* Reduce size of border on success state, change focus border on radios

* Fix color of checked checkbox

* Revert "Fix color of checked checkbox"

This reverts commit 36c698f.

* Add Reference images

src/checkbox.scss

@@ -27,7 +27,7 @@ $fd-checkbox-margin-compact: 0.5rem;
   border-radius: var(--sapField_BorderCornerRadius);
   color: var(--sapSelectedColor);
 
-  &::before {
+  &::after {
     font-family: "SAP-icons";
     font-style: normal;
     font-weight: normal;
@@ -36,13 +36,13 @@ $fd-checkbox-margin-compact: 0.5rem;
   }
 
   &:checked {
-    &::before {
+    &::after {
       content: "\e05b";
     }
   }
 
   &:indeterminate {
-    &::before {
+    &::after {
       content: "";
       display: inline-block;
       width: 0.75rem;
@@ -51,21 +51,25 @@ $fd-checkbox-margin-compact: 0.5rem;
     }
   }
 
+  @include fd-form-radio-focus($fd-checkbox-margin);
+
   &--compact {
     height: $fd-checkbox-dimensions-compact;
     width: $fd-checkbox-dimensions-compact;
     margin: $fd-checkbox-margin-compact;
 
-    &::before {
+    &::after {
       font-size: 0.625rem;
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         width: 0.5rem;
         height: 0.5rem;
       }
     }
+
+    @include fd-form-radio-focus($fd-checkbox-margin-compact);
   }
 
   // states
@@ -83,13 +87,13 @@ $fd-checkbox-margin-compact: 0.5rem;
     border: 0.125rem solid var(--sapField_InvalidColor);
 
     &:checked {
-      &::before {
+      &::after {
         color: var(--sapField_InvalidColor);
       }
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         background-color: var(--sapField_InvalidColor);
       }
     }
@@ -106,13 +110,13 @@ $fd-checkbox-margin-compact: 0.5rem;
     border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor);
 
     &:checked {
-      &::before {
+      &::after {
         color: var(--sapField_SuccessColor);
       }
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         background-color: var(--sapField_SuccessColor);
       }
     }
@@ -130,13 +134,13 @@ $fd-checkbox-margin-compact: 0.5rem;
     border: 0.125rem solid var(--sapField_WarningColor);
 
     &:checked {
-      &::before {
+      &::after {
         color: var(--sapField_TextColor);
       }
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         background-color: var(--sapField_TextColor);
       }
     }
@@ -153,13 +157,13 @@ $fd-checkbox-margin-compact: 0.5rem;
     border: 0.125rem solid var(--sapField_InformationColor);
 
     &:checked {
-      &::before {
+      &::after {
         color: var(--sapField_InformationColor);
       }
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         background-color: var(--sapField_InformationColor);
       }
     }
@@ -178,13 +182,13 @@ $fd-checkbox-margin-compact: 0.5rem;
     pointer-events: none;
 
     &:checked {
-      &::before {
+      &::after {
         color: var(--sapContent_NonInteractiveIconColor);
       }
     }
 
     &:indeterminate {
-      &::before {
+      &::after {
         background-color: var(--sapContent_NonInteractiveIconColor);
       }
     }

src/form-label.scss

@@ -31,12 +31,6 @@ $block: #{$fd-namespace}-form-label;
     opacity: 0.4;
   }
 
-  &:focus-within {
-    outline-width: var(--sapContent_FocusWidth);
-    outline-style: var(--sapContent_FocusStyle);
-    outline-color: var(--sapContent_FocusColor);
-  }
-
   &--required,
   &[aria-required="true"] {
     &::after {
@@ -75,10 +69,6 @@ $block: #{$fd-namespace}-form-label;
     display: flex;
     align-items: center;
     cursor: pointer;
-
-    &:focus-within {
-      outline-offset: -0.25rem;
-    }
   }
 
   &--toggle {

src/mixins/_forms.scss

@@ -1,40 +1,43 @@
 // Form Mixins
 @import "./mixins";
+@import "./states";
 
 @mixin fd-form-states {
+
+  $fd-form-border-thin-width: 0.0625rem;
+  $fd-form-border-thick-width: 2 * $fd-form-border-thin-width;
+
   // states
   @include fd-hover() {
     background-color: var(--sapField_Hover_Background);
     border-color: var(--sapField_Hover_BorderColor);
   }
 
-  &.is-invalid {
-    background-color: var(--sapField_InvalidBackground);
-    border-color: var(--sapField_InvalidColor);
-    border-width: 0.125rem;
-
-    @include fd-hover() {
-      background-color: var(--sapField_InvalidBackground);
-      border-color: var(--sapField_InvalidColor);
-    }
-  }
-
   &.is-valid {
     background-color: var(--sapField_SuccessBackground);
     border-color: var(--sapField_SuccessColor);
-    border-width: 0.125rem;
+    border-width: $fd-form-border-thin-width;
 
     @include fd-hover() {
       background-color: var(--sapField_SuccessBackground);
       border-color: var(--sapField_SuccessColor);
     }
   }
 
+  &.is-invalid {
+    background-color: var(--sapField_InvalidBackground);
+    border-color: var(--sapField_InvalidColor);
+
+    @include fd-hover() {
+      background-color: var(--sapField_InvalidBackground);
+      border-color: var(--sapField_InvalidColor);
+    }
+  }
+
   &.is-warning,
   &.is-alert {
     background-color: var(--sapField_WarningBackground);
     border-color: var(--sapField_WarningColor);
-    border-width: 0.125rem;
 
     @include fd-hover() {
       background-color: var(--sapField_WarningBackground);
@@ -45,7 +48,6 @@
   &.is-information {
     background-color: var(--sapField_InformationBackground);
     border-color: var(--sapField_InformationColor);
-    border-width: 0.125rem;
 
     @include fd-hover() {
       background-color: var(--sapField_InformationBackground);
@@ -61,6 +63,18 @@
     outline-style: var(--sapContent_FocusStyle);
   }
 
+  &.is-warning,
+  &.is-alert,
+  &.is-information,
+  &.is-invalid {
+    border-width: $fd-form-border-thick-width;
+
+    @include fd-focus() {
+      box-shadow: none;
+      outline-offset: -0.25rem;
+    }
+  }
+
   @include fd-disabled() {
     pointer-events: none;
     opacity: 0.4;
@@ -120,3 +134,24 @@
   padding-right: $fd-forms-padding;
   @content;
 }
+
+@mixin fd-form-radio-focus($margin) {
+  $fd-radio-label-padding: 0.3125rem;
+  $fd-radio-focus-offset: 0.125rem;
+
+  @include fd-focus() {
+    &::before {
+      content: "";
+      position: absolute;
+      border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+      top: $margin - $fd-radio-focus-offset;
+      left: $margin - $fd-radio-focus-offset;
+      bottom: $margin - $fd-radio-focus-offset;
+      right: $fd-radio-label-padding - $fd-radio-focus-offset;
+      @content;
+    }
+
+    box-shadow: none;
+    outline: none;
+  }
+}

src/radio.scss

@@ -37,6 +37,8 @@ $fd-radio-inner-circle-diameter-compact: 0.375rem;
     background-color: transparent;
   }
 
+  @include fd-form-radio-focus($fd-radio-outer-circle-margin);
+
   &--compact {
     height: $fd-radio-outer-circle-diameter-compact;
     width: $fd-radio-outer-circle-diameter-compact;
@@ -46,6 +48,8 @@ $fd-radio-inner-circle-diameter-compact: 0.375rem;
       width: $fd-radio-inner-circle-diameter-compact;
       height: $fd-radio-inner-circle-diameter-compact;
     }
+
+    @include fd-form-radio-focus($fd-radio-outer-circle-margin-compact);
   }
 
   &:checked {