feat(styles): implemented radio-button styles using tokens

packages/documentation/src/stories/components/forms/radio/radio.docs.mdx

@@ -31,15 +31,6 @@ Our radios use custom icons to indicate checked states.
 
 The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
 
-### Sizing
-
-The size can be changed by simply adding a class:
-
-- Small: `.form-check-sm`
-- Large: default
-
-<Canvas of={RadioStories.Size} />
-
 ### Inline
 
 To render a radio inline, simply add the class `.form-check-inline` to the `.form-check` wrapper element.

packages/documentation/src/stories/components/forms/radio/radio.stories.ts

@@ -74,21 +74,6 @@ const meta: MetaComponent = {
         category: 'States',
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      control: {
-        type: 'select',
-        labels: {
-          'form-check-sm': 'Small',
-          'null': 'Large',
-        },
-      },
-      options: ['form-check-sm', 'null'],
-      table: {
-        category: 'General',
-      },
-    },
     disabled: {
       name: 'Disabled',
       description:
@@ -233,14 +218,6 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
   `;
 }
 
-export const Size: Story = {
-  render,
-  args: {
-    size: 'form-check-sm',
-    checkedRadio: null,
-  },
-};
-
 export const Inline: Story = {
   render: renderInline,
   parameters: {

packages/styles/index.html

@@ -32,5 +32,78 @@ <h1>Styles package playground</h1>
 
     <!-- Place your component markup here -->
     <button class="btn btn-primary">Primary button</button>
+    <div class="form-check">
+      <input
+        type="radio"
+        id="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        class="form-check-input"
+      />
+      <label class="form-check-label" for="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        >Label</label
+      >
+    </div>
+    <div class="form-check radio-button">
+      <input
+        type="radio"
+        id="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        class="form-check-input"
+      />
+      <label class="form-check-label" for="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        >Label</label
+      >
+    </div>
+    <div class="form-check">
+      <input
+        type="radio"
+        id="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        class="form-check-input"
+        disabled=""
+      />
+      <label class="form-check-label" for="151242aa-a074-4a55-a81c-db597c83cdad--default"
+        >Label</label
+      >
+    </div>
+
+    <fieldset>
+      <legend class="">Legend</legend>
+      <div class="form-check form-check-inline">
+        <input
+          name="Inline_ExampleRadio_Group"
+          class="form-check-input"
+          type="radio"
+          id="docs_Inline_ExampleRadio1"
+        />
+        <label class="form-check-label" for="docs_Inline_ExampleRadio1">Label</label>
+      </div>
+      <div class="form-check form-check-inline">
+        <input
+          name="Inline_ExampleRadio_Group"
+          class="form-check-input"
+          type="radio"
+          id="docs_Inline_ExampleRadio2"
+        />
+        <label class="form-check-label" for="docs_Inline_ExampleRadio2">Label</label>
+      </div>
+      <div class="form-check form-check-inline">
+        <input
+          name="Inline_ExampleRadio_Group"
+          class="form-check-input"
+          type="radio"
+          id="docs_Inline_ExampleRadio3"
+          checked="true"
+        />
+        <label class="form-check-label" for="docs_Inline_ExampleRadio3">Label</label>
+      </div>
+      <div class="form-check form-check-inline">
+        <input
+          name="Inline_ExampleRadio_Group"
+          class="form-check-input"
+          type="radio"
+          id="docs_Inline_ExampleRadio4"
+          checked="true"
+        />
+        <label class="form-check-label" for="docs_Inline_ExampleRadio4">Label</label>
+      </div>
+    </fieldset>
   </body>
 </html>

packages/styles/src/components/_form-check.scss

@@ -0,0 +1,158 @@
+@forward './../variables/options';
+
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../variables/components/form-check';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+
+.form-check {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  &-inline {
+    display: inline-flex;
+    vertical-align: top;
+
+    &:not(:last-of-type) {
+      margin-right: form-check.$form-check-inline-margin-right;
+    }
+  }
+
+  &-input,
+  &-label {
+    transition: color #{animation.$transition-base-timing};
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+    }
+  }
+
+  &-input {
+    &:not([disabled]),
+    &:not([disabled]) ~ .form-check-label {
+      cursor: pointer;
+    }
+
+    @include utility-mx.focus-style-none();
+    display: inline-flex;
+    flex: 0 auto;
+    appearance: none;
+    background: transparent;
+
+    @include utility-mx.high-contrast-mode {
+      border-color: FieldText;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+    }
+
+    // Shared disabled styles
+    &[disabled] {
+      &[type='checkbox'],
+      &[type='radio'] {
+        @include utility-mx.high-contrast-mode {
+          border-color: GrayText !important;
+        }
+      }
+    }
+  }
+}
+
+.form-switch {
+  .form-check-input {
+    height: form-check.$form-switch-height;
+    width: form-check.$form-switch-width;
+    border: 0;
+    border-radius: form-check.$form-switch-width;
+    background-image: form-check.$form-switch-background-image;
+    background-size: 2 * form-check.$form-switch-width;
+    background-position-x: 0;
+    transition:
+      background-color animation.$transition-base-timing,
+      background-position animation.$transition-base-timing;
+
+    &::after {
+      max-width: form-check.$form-switch-height;
+      background-color: form-check.$form-switch-color;
+      border: form-check.$form-check-input-border-width solid form-check.$form-switch-border-color;
+      border-radius: 50%;
+      transition: transform animation.$transition-base-timing;
+    }
+
+    &:checked {
+      background-position-x: form-check.$form-switch-width;
+
+      &::after {
+        @include icons-mx.remove-icon;
+        background-color: form-check.$form-switch-color;
+        border-color: form-check.$form-switch-checked-border-color;
+        transform: translateX(2rem);
+      }
+    }
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+      border: form-check.$form-check-input-border-width solid CanvasText;
+
+      &:checked {
+        background-color: SelectedItem !important;
+      }
+
+      &::after,
+      &:checked::after {
+        max-width: calc(
+          form-check.$form-switch-height - (form-check.$form-check-input-border-width * 2)
+        );
+        border-color: Canvas;
+        background-color: CanvasText;
+      }
+    }
+
+    &[disabled] {
+      background: form-check.$form-switch-disabled-bg;
+
+      &::after {
+        border-color: form-check.$form-switch-disabled-border-color;
+      }
+
+      @include utility-mx.high-contrast-mode {
+        &::after {
+          border-color: Field;
+        }
+
+        &:checked {
+          background-color: GrayText !important;
+        }
+      }
+    }
+  }
+
+  &:hover > .form-check-input:not([disabled]) {
+    background-color: rgba(var(--post-contrast-color-rgb), 0.1);
+
+    @include utility-mx.high-contrast-mode {
+      border-color: Highlight;
+    }
+  }
+
+  .form-check-label {
+    padding-top: form-check.$form-switch-label-padding-top;
+
+    &.order-first {
+      flex: 0 auto;
+      padding-inline-end: form-check.$form-switch-column-gap;
+    }
+
+    &:not(.order-first) {
+      padding-inline-start: form-check.$form-switch-column-gap;
+    }
+  }
+}

packages/styles/src/components/_index.scss

@@ -19,6 +19,7 @@
 @use 'datatable';
 @use 'dialog';
 @use 'form-check';
+@use 'radio-button';
 @use 'forms';
 @use 'grid';
 @use 'icons';