From 15a4d6015982fb478b5566e89129a8b48a89a043 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 11:04:07 -0800
Subject: [PATCH 01/13] wip

---
 .../radio-button-group.scss                   | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
index 62d1727b333..c7b82681359 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
@@ -1,42 +1,58 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-radio-button-group-input-message-spacing-value: Specifies the spacing of the input message.
+ */
+
 :host {
-  @apply flex flex-col;
+  display: flex;
+  flex-direction: column;
 }
 
 :host > .item-wrapper {
-  @apply flex;
+  display: flex;
   max-inline-size: 100vw;
 }
 
 :host([layout="horizontal"]) > .item-wrapper {
-  @apply flex-row flex-wrap;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 :host([layout="horizontal"][scale="s"]) > .item-wrapper {
-  @apply gap-x-4;
+  column-gap: var(--calcite-spacing-xl);
 }
 
 :host([layout="horizontal"][scale="m"]) > .item-wrapper {
-  @apply gap-x-5;
+  column-gap: var(--calcite-spacing-xxl);
 }
 
 :host([layout="horizontal"][scale="l"]) > .item-wrapper {
-  @apply gap-x-6;
+  column-gap: #{$calcite-size-24}; // TODO: need new size token for this size
 }
 
 :host([layout="vertical"]) > .item-wrapper {
-  @apply flex-col;
+  flex-direction: column;
 }
 
 :host([scale="s"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-xxs) * -1);
+  --calcite-input-message-spacing-value: calc(
+    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-xxs)) * -1
+  );
 }
 
 :host([scale="m"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-sm) * -1);
+  --calcite-input-message-spacing-value: calc(
+    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-sm)) * -1
+  );
 }
 
 :host([scale="l"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-md) * -1);
+  --calcite-input-message-spacing-value: calc(
+    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-md)) * -1
+  );
 }
 
 @include form-validation-message();

From 8ddf294404071a373c3b7fbb1d7dbc395519f002 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 11:16:40 -0800
Subject: [PATCH 02/13] story

---
 .../radio-button-group.stories.ts             | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index 64db1644049..eb7f3cdb13b 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -184,3 +184,92 @@ export const validationMessage_TestOnly = (): string => html`
     </calcite-radio-button-group>
   </div>
 `;
+
+export const theming_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 400px;
+      height: 200px;
+      gap: 20px;
+    }
+
+    .themed {
+      --calcite-radio-button-group-input-message-spacing-value: 100px;
+    }
+  </style>
+  <div class="container">
+    <calcite-radio-button-group
+      layout="horizontal"
+      name="validation"
+      required
+      scale="s"
+      status="invalid"
+      class="themed"
+      validation-icon
+      validation-message="Please select an option."
+    >
+      <calcite-label layout="inline" scale="s">
+        <calcite-radio-button value="one" scale="s"></calcite-radio-button>
+        One
+      </calcite-label>
+      <calcite-label layout="inline" scale="s">
+        <calcite-radio-button value="two" scale="s"></calcite-radio-button>
+        Two
+      </calcite-label>
+      <calcite-label layout="inline" scale="s">
+        <calcite-radio-button value="three" scale="s"></calcite-radio-button>
+        Three
+      </calcite-label>
+    </calcite-radio-button-group>
+
+    <calcite-radio-button-group
+      layout="horizontal"
+      name="validation"
+      required
+      class="themed"
+      scale="m"
+      status="invalid"
+      validation-icon
+      validation-message="Please select an option."
+    >
+      <calcite-label layout="inline" scale="m">
+        <calcite-radio-button value="one" scale="m"></calcite-radio-button>
+        One
+      </calcite-label>
+      <calcite-label layout="inline" scale="m">
+        <calcite-radio-button value="two" scale="m"></calcite-radio-button>
+        Two
+      </calcite-label>
+      <calcite-label layout="inline" scale="m">
+        <calcite-radio-button value="three" scale="m"></calcite-radio-button>
+        Three
+      </calcite-label>
+    </calcite-radio-button-group>
+
+    <calcite-radio-button-group
+      layout="horizontal"
+      name="validation"
+      class="themed"
+      required
+      scale="l"
+      status="invalid"
+      validation-icon
+      validation-message="Please select an option."
+    >
+      <calcite-label layout="inline" scale="l">
+        <calcite-radio-button value="one" scale="l"></calcite-radio-button>
+        One
+      </calcite-label>
+      <calcite-label layout="inline" scale="l">
+        <calcite-radio-button value="two" scale="l"></calcite-radio-button>
+        Two
+      </calcite-label>
+      <calcite-label layout="inline" scale="l">
+        <calcite-radio-button value="three" scale="l"></calcite-radio-button>
+        Three
+      </calcite-label>
+    </calcite-radio-button-group>
+  </div>
+`;

From ed0bef631c50e50adeaa036184718eb6a72d67a5 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 12:16:35 -0800
Subject: [PATCH 03/13] feat(radio-button, radio-button-group): add component
 tokens #7180

---
 .../src/assets/styles/includes.scss           |   6 +
 .../radio-button-group.stories.ts             |  13 +-
 .../components/radio-button/radio-button.scss | 125 ++++++++++++------
 .../components/radio-button/radio-button.tsx  |   2 +-
 .../src/components/radio-button/resources.ts  |   1 +
 5 files changed, 102 insertions(+), 45 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 222c67ae839..bc62505a0dc 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -107,6 +107,12 @@
   }
 }
 
+@mixin focusOutset($focusColor) {
+  outline: 2px solid
+    var(#{$focusColor}, var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand))));
+  outline-offset: calc(2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
+}
+
 @mixin xButton() {
   :host([scale="s"]) {
     .x-button {
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index eb7f3cdb13b..370c8072fe1 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -195,7 +195,15 @@ export const theming_TestOnly = (): string => html`
       gap: 20px;
     }
 
-    .themed {
+    calcite-radio-button {
+      --calcite-radio-button-background-color: orange;
+      --calcite-radio-button-border-radius: 50%;
+      --calcite-radio-focus-outline-color: red;
+      --calcite-radio-button-shadow: 0 0 0 2px blue;
+      --calcite-radio-button-size: 20px;
+    }
+
+    calcite-radio-button-group {
       --calcite-radio-button-group-input-message-spacing-value: 100px;
     }
   </style>
@@ -206,7 +214,6 @@ export const theming_TestOnly = (): string => html`
       required
       scale="s"
       status="invalid"
-      class="themed"
       validation-icon
       validation-message="Please select an option."
     >
@@ -228,7 +235,6 @@ export const theming_TestOnly = (): string => html`
       layout="horizontal"
       name="validation"
       required
-      class="themed"
       scale="m"
       status="invalid"
       validation-icon
@@ -251,7 +257,6 @@ export const theming_TestOnly = (): string => html`
     <calcite-radio-button-group
       layout="horizontal"
       name="validation"
-      class="themed"
       required
       scale="l"
       status="invalid"
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index cdce0f2a4ef..5af6daa14db 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -1,92 +1,124 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-radio-button-background-color: Specifies the background color of the component.
+ * @prop --calcite-radio-button-border-radius: Specifies the border radius of the component.
+ * @prop --calcite-radio-focus-outline-color: Specifies the color of the focus outline.
+ * @prop --calcite-radio-button-shadow: Specifies the shadow of the component.
+ * @prop --calcite-radio-button-size: Specifies the size of the component.
+ */
+
 :host {
-  @apply block cursor-pointer;
-  .container {
-    @apply relative outline-none;
-  }
-  .radio {
-    @apply bg-foreground-1 cursor-pointer focus-base rounded-full transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
-  }
+  display: block;
+  cursor: pointer;
 }
 
-:host([hovered]),
-:host(:not([checked])[focused]:not([disabled])) {
-  .radio {
-    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
-  }
+.container {
+  position: relative;
+  outline: 2px solid transparent; // question: would outline:none be better? This is from @apply outline-none.
+  outline-offset: 2px;
 }
 
-:host([focused]) {
-  .radio {
-    @apply focus-outset;
-  }
+.radio {
+  background-color: var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1));
+  cursor: pointer;
+  outline-color: transparent;
+  border-radius: var(--calcite-radio-button-border-radius, var(--calcite-corner-radius-pill));
+  transition:
+    all var(--calcite-animation-timing) ease-in-out 0s,
+    outline 0s,
+    outline-offset 0s;
+  box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 1px var(--calcite-color-border-input));
 }
 
-@include disabled() {
+:host([scale="s"]) .radio {
+  block-size: var(--calcite-radio-button-size, var(--calcite-font-size--2));
+  max-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--2));
+  min-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--2));
+}
+
+:host([scale="m"]) .radio {
+  block-size: var(--calcite-radio-button-size, var(--calcite-font-size--1));
+  max-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--1));
+  min-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--1));
+}
+
+:host([scale="l"]) .radio {
+  block-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+  max-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+  min-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+}
+
+:host([focused]) {
   .radio {
-    @apply opacity-disabled cursor-default;
+    @include focusOutset("--calcite-radio-focus-outline-color");
   }
 }
 
 :host([hovered][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input); // todo
   }
 }
 
-:host([scale="s"]) {
-  --calcite-radio-size: theme("fontSize.n2");
-}
-:host([scale="m"]) {
-  --calcite-radio-size: theme("fontSize.n1");
-}
-:host([scale="l"]) {
-  --calcite-radio-size: theme("fontSize.0");
+:host([hovered]),
+:host(:not([checked])[focused]:not([disabled])) {
+  .radio {
+    box-shadow: inset 0 0 0 2px var(--calcite-color-brand); // todo
+  }
 }
 
-.radio {
-  block-size: var(--calcite-radio-size);
-  max-inline-size: var(--calcite-radio-size);
-  min-inline-size: var(--calcite-radio-size);
+@include disabled() {
+  .radio {
+    opacity: var(--calcite-opacity-disabled);
+    cursor: default;
+  }
 }
 
 :host([scale="s"][checked]),
 :host([hovered][scale="s"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 4px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 4px var(--calcite-color-brand); // todo
   }
 }
+
 :host([scale="s"][focused][checked]:not([disabled])) {
   .radio {
     box-shadow:
       inset 0 0 0 4px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1);
+      0 0 0 2px var(--calcite-color-foreground-1); // todo
   }
 }
+
 :host([scale="m"][checked]),
 :host([hovered][scale="m"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 5px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 5px var(--calcite-color-brand); // todo
   }
 }
+
 :host([scale="m"][focused][checked]:not([disabled])) {
   .radio {
     box-shadow:
       inset 0 0 0 5px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1);
+      0 0 0 2px var(--calcite-color-foreground-1); // todo
   }
 }
+
 :host([scale="l"][checked]),
 :host([hovered][scale="l"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 6px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 6px var(--calcite-color-brand); // todo
   }
 }
+
 :host([scale="l"][focused][checked]:not([disabled])) {
   .radio {
     box-shadow:
       inset 0 0 0 6px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1);
+      0 0 0 2px var(--calcite-color-foreground-1); // todo
   }
 }
 
@@ -95,12 +127,25 @@
   :host([checked][disabled]) {
     .radio::after {
       content: "";
-      inline-size: var(--calcite-radio-size);
-      block-size: var(--calcite-radio-size);
       background-color: windowText;
       display: block;
     }
   }
+
+  :host([checked][scale="s"]) .radio::after {
+    inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--2));
+    block-size: var(--calcite-radio-button-size, var(--calcite-font-size--2));
+  }
+
+  :host([checked][scale="m"]) .radio::after {
+    inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--1));
+    block-size: var(--calcite-radio-button-size, var(--calcite-font-size--1));
+  }
+
+  :host([checked][scale="l"]) .radio::after {
+    inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+    block-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+  }
 }
 
 @include hidden-form-input();
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx
index 1ef57ab1875..33f89f340de 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -515,7 +515,7 @@ export class RadioButton
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref={this.setContainerEl}
           >
-            <div class="radio" />
+            <div class={CSS.radio} />
           </div>
           <HiddenFormInputSlot component={this} />
         </InteractiveContainer>
diff --git a/packages/calcite-components/src/components/radio-button/resources.ts b/packages/calcite-components/src/components/radio-button/resources.ts
index 8ce4e2bdc7b..e3e6f0f6003 100644
--- a/packages/calcite-components/src/components/radio-button/resources.ts
+++ b/packages/calcite-components/src/components/radio-button/resources.ts
@@ -1,3 +1,4 @@
 export const CSS = {
   container: "container",
+  radio: "radio",
 };

From c8438bb0b92dfc0cbead181b58cac4acf8fd84ee Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 12:52:36 -0800
Subject: [PATCH 04/13] stories and vars

---
 .../components/radio-button/radio-button.scss | 28 +++++++++++--------
 .../radio-button/radio-button.stories.ts      | 23 +++++++++++++++
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index 5af6daa14db..b15c1161223 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -59,14 +59,14 @@
 
 :host([hovered][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input); // todo
+    box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 1px var(--calcite-color-border-input));
   }
 }
 
 :host([hovered]),
 :host(:not([checked])[focused]:not([disabled])) {
   .radio {
-    box-shadow: inset 0 0 0 2px var(--calcite-color-brand); // todo
+    box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 2px var(--calcite-color-brand));
   }
 }
 
@@ -80,45 +80,51 @@
 :host([scale="s"][checked]),
 :host([hovered][scale="s"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 4px var(--calcite-color-brand); // todo
+    box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 4px var(--calcite-color-brand));
   }
 }
 
 :host([scale="s"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow:
+    box-shadow: var(
+      --calcite-radio-button-shadow,
       inset 0 0 0 4px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1); // todo
+      0 0 0 2px var(--calcite-color-foreground-1)
+    );
   }
 }
 
 :host([scale="m"][checked]),
 :host([hovered][scale="m"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 5px var(--calcite-color-brand); // todo
+    box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 5px var(--calcite-color-brand));
   }
 }
 
 :host([scale="m"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow:
+    box-shadow: var(
+      --calcite-radio-button-shadow,
       inset 0 0 0 5px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1); // todo
+      0 0 0 2px var(--calcite-color-foreground-1)
+    );
   }
 }
 
 :host([scale="l"][checked]),
 :host([hovered][scale="l"][checked][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 6px var(--calcite-color-brand); // todo
+    box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 6px var(--calcite-color-brand));
   }
 }
 
 :host([scale="l"][focused][checked]:not([disabled])) {
   .radio {
-    box-shadow:
+    box-shadow: var(
+      --calcite-radio-button-shadow,
       inset 0 0 0 6px var(--calcite-color-brand),
-      0 0 0 2px var(--calcite-color-foreground-1); // todo
+      0 0 0 2px var(--calcite-color-foreground-1)
+    );
   }
 }
 
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
index 15e41a6e12c..3f04c8e7ee2 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
@@ -46,3 +46,26 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const disabled_TestOnly = (): string => html`<calcite-radio-button checked disabled></calcite-radio-button>`;
+
+export const theming_TestOnly = (): string =>
+  html`<style>
+      calcite-radio-button {
+        --calcite-radio-button-background-color: orange;
+        --calcite-radio-button-border-radius: 50%;
+        --calcite-radio-focus-outline-color: red;
+        --calcite-radio-button-shadow: 0 0 0 2px blue;
+        --calcite-radio-button-size: 20px;
+      }
+    </style>
+    <div>
+      <calcite-radio-button></calcite-radio-button>
+    </div>
+    <div>
+      <calcite-radio-button checked></calcite-radio-button>
+    </div>
+    <div>
+      <calcite-radio-button checked disabled></calcite-radio-button>
+    </div>
+    <div>
+      <calcite-radio-button checked focused></calcite-radio-button>
+    </div> `;

From a030b7e53fddddeb3683aa999795bba1b0f6bb3c Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 13:17:54 -0800
Subject: [PATCH 05/13] fix var

---
 .../src/components/radio-button/radio-button.scss      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index b15c1161223..e572a98f783 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -46,9 +46,9 @@
 }
 
 :host([scale="l"]) .radio {
-  block-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
-  max-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
-  min-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+  block-size: var(--calcite-radio-button-size, var(--calcite-font-size-0));
+  max-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size-0));
+  min-inline-size: var(--calcite-radio-button-size, var(--calcite-font-size-0));
 }
 
 :host([focused]) {
@@ -149,8 +149,8 @@
   }
 
   :host([checked][scale="l"]) .radio::after {
-    inline-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
-    block-size: var(--calcite-radio-button-size, var(--calcite-font-size--0));
+    inline-size: var(--calcite-radio-button-size, var(--calcite-font-size-0));
+    block-size: var(--calcite-radio-button-size, var(--calcite-font-size-0));
   }
 }
 

From dbf99a803c6c259f23ab9483a801046bcff1f83d Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 13:23:01 -0800
Subject: [PATCH 06/13] stories

---
 .../radio-button-group.stories.ts             |  2 +-
 .../radio-button/radio-button.stories.ts      | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index 370c8072fe1..f07b41d0e86 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -204,7 +204,7 @@ export const theming_TestOnly = (): string => html`
     }
 
     calcite-radio-button-group {
-      --calcite-radio-button-group-input-message-spacing-value: 100px;
+      --calcite-radio-button-group-input-message-spacing-value: 5px;
     }
   </style>
   <div class="container">
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
index 3f04c8e7ee2..d6a5cf68725 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
@@ -57,15 +57,19 @@ export const theming_TestOnly = (): string =>
         --calcite-radio-button-size: 20px;
       }
     </style>
-    <div>
+    <calcite-label>
+      Radio:
       <calcite-radio-button></calcite-radio-button>
-    </div>
-    <div>
+    </calcite-label>
+    <calcite-label>
+      Checked radio:
       <calcite-radio-button checked></calcite-radio-button>
-    </div>
-    <div>
+    </calcite-label>
+    <calcite-label>
+      Checked disabled radio:
       <calcite-radio-button checked disabled></calcite-radio-button>
-    </div>
-    <div>
+    </calcite-label>
+    <calcite-label>
+      Checked focused radio:
       <calcite-radio-button checked focused></calcite-radio-button>
-    </div> `;
+    </calcite-label> `;

From 749321488d1bc3bfb4566b410f29704849e61178 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 13:53:06 -0800
Subject: [PATCH 07/13] cleanup

---
 .../components/radio-button-group/radio-button-group.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
index c7b82681359..c88d6ec150c 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-radio-button-group-input-message-spacing-value: Specifies the spacing of the input message.
+ * @prop --calcite-radio-button-group-input-message-space: Specifies the spacing of the input message.
  */
 
 :host {
@@ -39,19 +39,19 @@
 
 :host([scale="s"]) calcite-input-message {
   --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-xxs)) * -1
+    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-xxs)) * -1
   );
 }
 
 :host([scale="m"]) calcite-input-message {
   --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-sm)) * -1
+    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-sm)) * -1
   );
 }
 
 :host([scale="l"]) calcite-input-message {
   --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-spacing-value, var(--calcite-spacing-md)) * -1
+    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-md)) * -1
   );
 }
 

From 82bd05ec6e8c1890dce7743c83f49b9845f6e6da Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 16:46:05 -0800
Subject: [PATCH 08/13] cleanup

---
 .../src/assets/styles/includes.scss               | 15 +++++++++++----
 .../src/components/radio-button/radio-button.scss |  7 +++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index bc62505a0dc..0f9ddb2b483 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -107,10 +107,17 @@
   }
 }
 
-@mixin focusOutset($focusColor) {
-  outline: 2px solid
-    var(#{$focusColor}, var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand))));
-  outline-offset: calc(2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1)));
+@mixin outlineNone() {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+@mixin focusOutset($outline, $outlineOffset) {
+  outline: var(
+    #{$outline},
+    2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))
+  );
+  outline-offset: var(#{$outlineOffset}, calc(2px * calc(1 - 2 * clamp(0, var(--calcite-offset-invert-focus), 1))));
 }
 
 @mixin xButton() {
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index e572a98f783..137e8ae64b5 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -5,7 +5,7 @@
  *
  * @prop --calcite-radio-button-background-color: Specifies the background color of the component.
  * @prop --calcite-radio-button-border-radius: Specifies the border radius of the component.
- * @prop --calcite-radio-focus-outline-color: Specifies the color of the focus outline.
+ * @prop --calcite-radio-focus: Specifies the focus of the component.
  * @prop --calcite-radio-button-shadow: Specifies the shadow of the component.
  * @prop --calcite-radio-button-size: Specifies the size of the component.
  */
@@ -17,8 +17,7 @@
 
 .container {
   position: relative;
-  outline: 2px solid transparent; // question: would outline:none be better? This is from @apply outline-none.
-  outline-offset: 2px;
+  @include outlineNone();
 }
 
 .radio {
@@ -53,7 +52,7 @@
 
 :host([focused]) {
   .radio {
-    @include focusOutset("--calcite-radio-focus-outline-color");
+    @include focusOutset("--calcite-radio-focus", "--calcite-internal-radio-focus-offset");
   }
 }
 

From 3168dfc5f818d5e19729ddd5fb5c2130bec39069 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 26 Feb 2024 17:47:41 -0800
Subject: [PATCH 09/13] fix story

---
 .../components/radio-button-group/radio-button-group.stories.ts | 2 +-
 .../src/components/radio-button/radio-button.stories.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index f07b41d0e86..289aca99ad7 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -198,7 +198,7 @@ export const theming_TestOnly = (): string => html`
     calcite-radio-button {
       --calcite-radio-button-background-color: orange;
       --calcite-radio-button-border-radius: 50%;
-      --calcite-radio-focus-outline-color: red;
+      --calcite-radio-focus: 2px solid red;
       --calcite-radio-button-shadow: 0 0 0 2px blue;
       --calcite-radio-button-size: 20px;
     }
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
index d6a5cf68725..6f6a4d7fec5 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
@@ -52,7 +52,7 @@ export const theming_TestOnly = (): string =>
       calcite-radio-button {
         --calcite-radio-button-background-color: orange;
         --calcite-radio-button-border-radius: 50%;
-        --calcite-radio-focus-outline-color: red;
+        --calcite-radio-focus: 2px solid red;
         --calcite-radio-button-shadow: 0 0 0 2px blue;
         --calcite-radio-button-size: 20px;
       }

From cce5c3ae9981acecf4734df3ef15ca267521eb47 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 27 Feb 2024 11:09:23 -0800
Subject: [PATCH 10/13] remove var

---
 .../radio-button-group.scss                   | 20 +++----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
index c88d6ec150c..3ba10542d26 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
@@ -1,11 +1,3 @@
-/**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-radio-button-group-input-message-space: Specifies the spacing of the input message.
- */
-
 :host {
   display: flex;
   flex-direction: column;
@@ -38,21 +30,15 @@
 }
 
 :host([scale="s"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-xxs)) * -1
-  );
+  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-xxs) * -1);
 }
 
 :host([scale="m"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-sm)) * -1
-  );
+  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-sm) * -1);
 }
 
 :host([scale="l"]) calcite-input-message {
-  --calcite-input-message-spacing-value: calc(
-    var(--calcite-radio-button-group-input-message-space, var(--calcite-spacing-md)) * -1
-  );
+  --calcite-input-message-spacing-value: calc(var(--calcite-spacing-md) * -1);
 }
 
 @include form-validation-message();

From bedef5b8c6ba22c0f3ab3017121db51942e109fe Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 27 Feb 2024 11:11:01 -0800
Subject: [PATCH 11/13] remove var

---
 .../radio-button-group/radio-button-group.stories.ts          | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index 289aca99ad7..3a35f3ce784 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -202,10 +202,6 @@ export const theming_TestOnly = (): string => html`
       --calcite-radio-button-shadow: 0 0 0 2px blue;
       --calcite-radio-button-size: 20px;
     }
-
-    calcite-radio-button-group {
-      --calcite-radio-button-group-input-message-spacing-value: 5px;
-    }
   </style>
   <div class="container">
     <calcite-radio-button-group

From 8f282db4b97432e346cbea25d6780699149adb25 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 27 Feb 2024 11:11:54 -0800
Subject: [PATCH 12/13] cleanup

---
 .../radio-button-group.stories.ts             | 90 -------------------
 1 file changed, 90 deletions(-)

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index 3a35f3ce784..64db1644049 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -184,93 +184,3 @@ export const validationMessage_TestOnly = (): string => html`
     </calcite-radio-button-group>
   </div>
 `;
-
-export const theming_TestOnly = (): string => html`
-  <style>
-    .container {
-      display: flex;
-      flex-direction: column;
-      width: 400px;
-      height: 200px;
-      gap: 20px;
-    }
-
-    calcite-radio-button {
-      --calcite-radio-button-background-color: orange;
-      --calcite-radio-button-border-radius: 50%;
-      --calcite-radio-focus: 2px solid red;
-      --calcite-radio-button-shadow: 0 0 0 2px blue;
-      --calcite-radio-button-size: 20px;
-    }
-  </style>
-  <div class="container">
-    <calcite-radio-button-group
-      layout="horizontal"
-      name="validation"
-      required
-      scale="s"
-      status="invalid"
-      validation-icon
-      validation-message="Please select an option."
-    >
-      <calcite-label layout="inline" scale="s">
-        <calcite-radio-button value="one" scale="s"></calcite-radio-button>
-        One
-      </calcite-label>
-      <calcite-label layout="inline" scale="s">
-        <calcite-radio-button value="two" scale="s"></calcite-radio-button>
-        Two
-      </calcite-label>
-      <calcite-label layout="inline" scale="s">
-        <calcite-radio-button value="three" scale="s"></calcite-radio-button>
-        Three
-      </calcite-label>
-    </calcite-radio-button-group>
-
-    <calcite-radio-button-group
-      layout="horizontal"
-      name="validation"
-      required
-      scale="m"
-      status="invalid"
-      validation-icon
-      validation-message="Please select an option."
-    >
-      <calcite-label layout="inline" scale="m">
-        <calcite-radio-button value="one" scale="m"></calcite-radio-button>
-        One
-      </calcite-label>
-      <calcite-label layout="inline" scale="m">
-        <calcite-radio-button value="two" scale="m"></calcite-radio-button>
-        Two
-      </calcite-label>
-      <calcite-label layout="inline" scale="m">
-        <calcite-radio-button value="three" scale="m"></calcite-radio-button>
-        Three
-      </calcite-label>
-    </calcite-radio-button-group>
-
-    <calcite-radio-button-group
-      layout="horizontal"
-      name="validation"
-      required
-      scale="l"
-      status="invalid"
-      validation-icon
-      validation-message="Please select an option."
-    >
-      <calcite-label layout="inline" scale="l">
-        <calcite-radio-button value="one" scale="l"></calcite-radio-button>
-        One
-      </calcite-label>
-      <calcite-label layout="inline" scale="l">
-        <calcite-radio-button value="two" scale="l"></calcite-radio-button>
-        Two
-      </calcite-label>
-      <calcite-label layout="inline" scale="l">
-        <calcite-radio-button value="three" scale="l"></calcite-radio-button>
-        Three
-      </calcite-label>
-    </calcite-radio-button-group>
-  </div>
-`;

From aa6d179fe2955b898a0fc19742c9cbb10243cb97 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 28 Feb 2024 17:22:48 -0800
Subject: [PATCH 13/13] ordering

---
 .../src/components/radio-button/radio-button.scss               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index 137e8ae64b5..137ee3f7dcf 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -5,9 +5,9 @@
  *
  * @prop --calcite-radio-button-background-color: Specifies the background color of the component.
  * @prop --calcite-radio-button-border-radius: Specifies the border radius of the component.
- * @prop --calcite-radio-focus: Specifies the focus of the component.
  * @prop --calcite-radio-button-shadow: Specifies the shadow of the component.
  * @prop --calcite-radio-button-size: Specifies the size of the component.
+ * @prop --calcite-radio-focus: Specifies the focus of the component.
  */
 
 :host {