feat: add styles to checkbox label

vtex · Jan 28, 2025 · ca9bc19 · ca9bc19
1 parent cab6056
commit ca9bc19
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/components/src/molecules/CheckboxField/CheckboxField.tsx b/packages/components/src/molecules/CheckboxField/CheckboxField.tsx
@@ -52,7 +52,9 @@ const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(
           {...otherProps}
         />
         <div data-fs-checkbox-field-content>
-          <Label htmlFor={id}>{label}</Label>
+          <Label data-fs-checkbox-field-label htmlFor={id}>
+            {label}
+          </Label>
 
           {shouldDisplayError && (
             <span data-fs-checkbox-field-error-message>{error}</span>

diff --git a/packages/ui/src/components/molecules/CheckboxField/styles.scss b/packages/ui/src/components/molecules/CheckboxField/styles.scss
@@ -6,6 +6,12 @@
   // Default properties
   --fs-checkbox-field-gap: var(--fs-spacing-1);
 
+  // Label
+  --fs-checkbox-field-label-color: var(--fs-color-text-light);
+  --fs-checkbox-field-label-size: var(--fs-text-size-1);
+  --fs-checkbox-field-label-weight: var(--fs-text-weight-regular);
+  --fs-checkbox-field-label-line-height: 1.42;
+
   /* Error tokens */
   --fs-checkbox-field-error-message-size: var(--fs-text-size-legend);
   --fs-checkbox-field-error-message-line-height: 1.1;
@@ -25,6 +31,13 @@
     flex-direction: column;
   }
 
+  [data-fs-checkbox-field-label] {
+    color: var(--fs-checkbox-field-label-color);
+    font-size: var(--fs-checkbox-field-label-size);
+    font-weight: var(--fs-checkbox-field-label-weight);
+    line-height: var(--fs-checkbox-field-label-line-height);
+  }
+
   // --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------