fix description/label styles to be consistent

src/shared/components/autocomplete/autocomplete.module.css

@@ -25,7 +25,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .section {

src/shared/components/autocomplete/autocomplete.tsx

@@ -26,6 +26,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
         return (
             <MantineAutocomplete
                 classNames={{
+                    description: styles.description,
                     dropdown: styles.dropdown,
                     input: styles.input,
                     label: styles.label,

src/shared/components/color-input/color-input.module.css

@@ -25,7 +25,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {

src/shared/components/color-input/color-input.tsx

@@ -16,6 +16,7 @@ export const ColorInput = ({
     return (
         <MantineColorInput
             classNames={{
+                description: styles.description,
                 dropdown: styles.dropdown,
                 input: styles.input,
                 label: styles.label,

src/shared/components/date-picker/date-picker.module.css

@@ -17,3 +17,13 @@
 .required {
     color: var(--theme-colors-state-error);
 }
+
+.label {
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}

src/shared/components/date-picker/date-picker.tsx

@@ -26,6 +26,7 @@ export const DateInput = ({
     return (
         <MantineDateInput
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,
@@ -56,6 +57,7 @@ export const DateTimeInput = ({
     return (
         <MantineDateTimeInput
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,

src/shared/components/date-time-picker/date-time-picker.module.css

@@ -17,3 +17,13 @@
 .required {
     color: var(--theme-colors-state-error);
 }
+
+.label {
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}

src/shared/components/date-time-picker/date-time-picker.tsx

@@ -21,6 +21,7 @@ export const DateTimePicker = ({
     return (
         <MantineDateTimePicker
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,

src/shared/components/file-input/file-input.module.css

@@ -35,6 +35,12 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
     font-family: var(--theme-label-font-family);
 }
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}

src/shared/components/file-input/file-input.tsx

@@ -28,6 +28,7 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
         return (
             <MantineFileInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,

src/shared/components/json-input/json-input.module.css

@@ -35,5 +35,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }

src/shared/components/json-input/json-input.tsx

@@ -28,6 +28,7 @@ export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
         return (
             <MantineJsonInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,

src/shared/components/multi-select/multi-select.module.css

@@ -5,7 +5,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {

src/shared/components/multi-select/multi-select.tsx

@@ -12,6 +12,7 @@ export interface MultiSelectProps extends MantineMultiSelectProps {
 }
 
 const defaultClassNames = {
+    description: styles.description,
     dropdown: styles.dropdown,
     input: styles.input,
     label: styles.label,

src/shared/components/number-input/number-input.module.css

@@ -42,5 +42,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }

src/shared/components/number-input/number-input.tsx

@@ -31,6 +31,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             <MantineNumberInput
                 classNames={{
                     control: styles.control,
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,

src/shared/components/password-input/password-input.module.css

@@ -35,5 +35,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }

src/shared/components/password-input/password-input.tsx

@@ -16,6 +16,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         return (
             <MantinePasswordInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,

src/shared/components/select/select.module.css

@@ -25,7 +25,7 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
 }
 
 .dropdown {
@@ -57,3 +57,9 @@
 .option:hover {
     background: lighten(var(--theme-colors-surface), 5%);
 }
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}

src/shared/components/select/select.tsx

@@ -23,6 +23,7 @@ export const Select = ({
         <MantineSelect
             allowDeselect={allowDeselect || clearable}
             classNames={{
+                description: styles.description,
                 dropdown: styles.dropdown,
                 input: styles.input,
                 label: styles.label,

src/shared/components/tags-input/tags-input.module.css

@@ -5,7 +5,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {

src/shared/components/tags-input/tags-input.tsx

@@ -12,6 +12,7 @@ export interface TagsInputProps extends MantineTagsInputProps {
 }
 
 const defaultClassNames = {
+    description: styles.description,
     dropdown: styles.dropdown,
     input: styles.input,
     inputField: styles.inputField,

src/shared/components/text-input/text-input.module.css

@@ -23,7 +23,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .section {

src/shared/components/text-input/text-input.tsx

@@ -28,6 +28,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         return (
             <MantineTextInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,

src/shared/components/textarea/textarea.module.css

@@ -23,7 +23,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .required {

src/shared/components/textarea/textarea.tsx

@@ -25,6 +25,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <MantineTextarea
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,