Radio style updates

This patch represents the stale state from the github PR #63.

I have to find/create a feature request against core for the Drupal.theme.checkbox function and research why Media library needs a non-standard checkbox for its select-all feature.

Reasonable style cs fixes.

Ready for review

@huzooka let me know if there is any problem with the design you might run into. cheers

• +++ b/js/claro.theme.es6.js
  @@ -0,0 +1,21 @@
  +        return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
  

  We should create an issue to add this function into Drupal core, and to change the implementation to use this. We should also add a @todo with a link for that issue for all of these files to remember that we should change these once the theme function has been added to core.

• +++ b/css/src/components/form.css
  @@ -245,4 +234,18 @@ ul.tips li {
  +  #dblog-filter-form .form-actions {
  ...
  +  #edit-cancel {
  ...
  +#diff-inline-form select,
  

  We shouldn't use ids for theming since it is not reliable (ids are uniquified so they might change depending on the context).

@Lauriii

• #21.1
  Issue #3024975: Add Drupal JavaScript theme function for checkbox created and referenced to code. I just added a detailed follow-up #3024996: Remove tableselect.js and media_library.view.js overrides as well.
• #21.2
  Nice catch, I can't really see how I added those back.

Forgot to add the patch.

Accidentally touched the unused css/components/form.css file.

+++ b/js/claro.theme.es6.js
@@ -0,0 +1,21 @@
+  $.extend(
...
+      checkbox() {
+        return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';

We could use a simpler syntax to define the theme function:

Drupal.theme.checkbox = function() {
  return '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
};

Thanks for opening the follow-up!

1. +++ b/css/src/components/form--checkbox-radio--ie.css
   @@ -0,0 +1,138 @@
   +  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   

   Those properties are the same as the ones at line 84. Couldn't the two selectors groups be merged ?

2. +++ b/css/src/components/form--checkbox-radio.css
   @@ -0,0 +1,188 @@
   +  margin-left: 24px; /* LTR */
   +  line-height: 1.5em;
   

   Is it wanted to use both px and rem values too ?

3. +++ b/css/src/components/form--checkbox-radio.css
   @@ -0,0 +1,188 @@
   +  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   

   Same question as for the line 90.

Addressing all of #35.

Looks good! Thank you everyone!

Updated credits