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

.changeset/dirty-squids-hunt.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated radio-button styles with Design Tokens.

.changeset/slimy-singers-wonder.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Removed unnecessary classes from radio-button markup.

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

@@ -2,6 +2,7 @@ import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { useArgs } from '@storybook/preview-api';
 import { html, nothing, TemplateResult } from 'lit';
 import { MetaComponent } from '@root/types';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -74,21 +75,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:
@@ -124,12 +110,13 @@ function render(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
   const id = context.id ?? `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
-  const classes = ['form-check-input', args.validation].filter(c => c && c !== 'null').join(' ');
+  const classes = args.validation !== 'null' ? `is-${args.validation}` : undefined;
+
   const groupClasses = ['form-check', args.size].filter(c => c && c !== 'null').join(' ');
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
+    ? html` <label for="${id}">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
@@ -140,7 +127,7 @@ function render(args: Args, context: StoryContext) {
   const control = html`
     <input
       id="${id}"
-      class="${classes}"
+      class="${ifDefined(classes)}"
       type="radio"
       ?checked="${args.checked}"
       .checked="${args.checked}"
@@ -233,14 +220,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/src/components/_form-check.scss

@@ -0,0 +1,71 @@
+@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;
+@use '../tokens/helpers';
+@use '../functions/tokens';
+
+.form-check {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: fit-content;
+  border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+
+  &-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;
+        }
+      }
+    }
+  }
+}

packages/styles/src/components/_index.scss

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