From dad60f3261e489406d3dc52b877a975c8b9e0c1d Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Tue, 21 Nov 2023 16:09:53 -0300
Subject: [PATCH 1/3] fix: fix wrong usage of fg token

---
 packages/components/src/checkbox/checkbox.css | 2 +-
 packages/components/src/menu/menu.css         | 2 +-
 packages/components/src/table/table.css       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/checkbox/checkbox.css b/packages/components/src/checkbox/checkbox.css
index c084e01139..d7aea96755 100644
--- a/packages/components/src/checkbox/checkbox.css
+++ b/packages/components/src/checkbox/checkbox.css
@@ -6,7 +6,7 @@
 
 @layer sl-components {
   [data-sl-checkbox] {
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     width: var(--sl-checkbox-size);
     height: var(--sl-checkbox-size);
     display: flex;
diff --git a/packages/components/src/menu/menu.css b/packages/components/src/menu/menu.css
index 1743044397..1c6fda89b1 100644
--- a/packages/components/src/menu/menu.css
+++ b/packages/components/src/menu/menu.css
@@ -1,7 +1,7 @@
 @layer sl-components {
   [data-sl-menu] {
     background: var(--sl-bg);
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     outline: none;
     border: var(--sl-border);
     border-radius: var(--sl-border-radius-medium);
diff --git a/packages/components/src/table/table.css b/packages/components/src/table/table.css
index a6c6ab243d..21b4d6be55 100644
--- a/packages/components/src/table/table.css
+++ b/packages/components/src/table/table.css
@@ -6,7 +6,7 @@
 
 @layer sl-components {
   [data-sl-table] {
-    color: var(--sl-color-fg);
+    color: var(--sl-fg);
     border-collapse: collapse;
     width: 100%;
     display: grid;
@@ -18,7 +18,7 @@
       overflow: unset;
 
       [data-sl-table-header-cell] {
-        color: var(--sl-color-fg);
+        color: var(--sl-fg);
         position: sticky;
         top: 0;
         z-index: 1;

From 069d1833aeb8d1982f2a8e67c153b0cc9b37f69c Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Tue, 21 Nov 2023 16:54:46 -0300
Subject: [PATCH 2/3] feat(checkbox): adjust spacing and add more stories

---
 .../components/src/checkbox/checkbox-group.tsx   |  5 ++++-
 .../src/checkbox/stories/checkbox.stories.tsx    | 16 ++++++++++++++++
 packages/components/src/field/field.css          |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/checkbox/checkbox-group.tsx b/packages/components/src/checkbox/checkbox-group.tsx
index 6c7ed05ebc..0e3c5768ce 100644
--- a/packages/components/src/checkbox/checkbox-group.tsx
+++ b/packages/components/src/checkbox/checkbox-group.tsx
@@ -20,6 +20,7 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
     } = props
 
     const id = useId(defaultId)
+    const stackGap = direction === 'column' ? '$space-4' : '$space-5'
 
     return (
       <Field
@@ -30,7 +31,9 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
         {...otherProps}
       >
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
-        <Stack direction={direction}>{children}</Stack>
+        <Stack direction={direction} space={stackGap}>
+          {children}
+        </Stack>
         <FieldMessage error={error} helpText={helpText} errorText={errorText} />
       </Field>
     )
diff --git a/packages/components/src/checkbox/stories/checkbox.stories.tsx b/packages/components/src/checkbox/stories/checkbox.stories.tsx
index 9976f4b992..929de654bb 100644
--- a/packages/components/src/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/src/checkbox/stories/checkbox.stories.tsx
@@ -62,6 +62,13 @@ export function AsField() {
       <CheckboxField helpText="By clicking you agree with terms and conditions">
         Terms and conditions
       </CheckboxField>
+      <CheckboxField
+        helpText="By clicking you agree with terms and conditions"
+        errorText="Something wrong"
+        error
+      >
+        Terms and conditions
+      </CheckboxField>
       <CheckboxField defaultChecked disabled>
         Disabled
       </CheckboxField>
@@ -91,6 +98,14 @@ export function Group() {
         <Checkbox>All at once</Checkbox>
         <Checkbox disabled>None</Checkbox>
       </CheckboxGroup>
+      <CheckboxGroup error label="Options" errorText="Bad choice">
+        <Checkbox error>Everything</Checkbox>
+        <Checkbox error>Everywhere</Checkbox>
+        <Checkbox error>All at once</Checkbox>
+        <Checkbox error disabled>
+          None
+        </Checkbox>
+      </CheckboxGroup>
       <CheckboxGroup
         error
         label={
@@ -99,6 +114,7 @@ export function Group() {
             <IconInfoFill />
           </>
         }
+        helpText="Choose one of these"
         errorText="Bad choice"
       >
         <Checkbox error>Everything</Checkbox>
diff --git a/packages/components/src/field/field.css b/packages/components/src/field/field.css
index 42da7e8867..d974d305f1 100644
--- a/packages/components/src/field/field.css
+++ b/packages/components/src/field/field.css
@@ -1,4 +1,5 @@
 @layer sl-components {
+
   [data-sl-field] {
     display: grid;
     grid-template-areas: var(--sl-element-template-areas);
@@ -30,7 +31,7 @@
       --sl-element-template-areas: 'input label' '- message';
       --sl-element-label-color: var(--sl-fg);
       --sl-element-vertical-gap: var(--sl-space-0);
-      --sl-element-horizontal-gap: var(--sl-space-2);
+      --sl-element-vertical-gap: calc(var(--sl-space-05) / 2);
     }
   }
 }

From ec8aabe6b832709d79e383dfe503f50238f32199 Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Tue, 21 Nov 2023 17:04:14 -0300
Subject: [PATCH 3/3] feat(radio): add example with helptext and errortext

---
 packages/components/src/field/field.css             |  3 +--
 .../components/src/radio/stories/radio.stories.tsx  | 13 +++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/field/field.css b/packages/components/src/field/field.css
index d974d305f1..0ecd43a748 100644
--- a/packages/components/src/field/field.css
+++ b/packages/components/src/field/field.css
@@ -1,5 +1,4 @@
 @layer sl-components {
-
   [data-sl-field] {
     display: grid;
     grid-template-areas: var(--sl-element-template-areas);
@@ -30,8 +29,8 @@
     &[data-variant='control'] {
       --sl-element-template-areas: 'input label' '- message';
       --sl-element-label-color: var(--sl-fg);
-      --sl-element-vertical-gap: var(--sl-space-0);
       --sl-element-vertical-gap: calc(var(--sl-space-05) / 2);
+      --sl-element-horizontal-gap: var(--sl-space-2);
     }
   }
 }
diff --git a/packages/components/src/radio/stories/radio.stories.tsx b/packages/components/src/radio/stories/radio.stories.tsx
index 2b52843adb..bb7061a978 100644
--- a/packages/components/src/radio/stories/radio.stories.tsx
+++ b/packages/components/src/radio/stories/radio.stories.tsx
@@ -104,10 +104,23 @@ export function Help() {
         <Radio value="opt4">Another pen</Radio>
       </RadioGroup>
 
+      <RadioGroup
+        label="Optional group"
+        errorText="Something is wrong"
+        helpText="Pen pinapple apple pen"
+      >
+        <Radio value="opt1">Pen</Radio>
+        <Radio value="opt2">Pineapple</Radio>
+        <Radio value="opt3">Apple</Radio>
+        <Radio value="opt4">Another pen</Radio>
+      </RadioGroup>
+
+
       <RadioGroup
         label="Optional group (optional)"
         errorText="Something is wrong"
         helpText="Pen pinapple apple pen"
+        error
       >
         <Radio value="opt1">Pen</Radio>
         <Radio value="opt2">Pineapple</Radio>