diff --git a/.storybook/image-snapshots/expected/components_forms_Label_Default.png b/.storybook/image-snapshots/expected/components_forms_Label_Default.png index 1b67264e7..89036018a 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Label_Default.png and b/.storybook/image-snapshots/expected/components_forms_Label_Default.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png b/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png index 55bdad6e1..6b4053ef6 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png and b/.storybook/image-snapshots/expected/components_forms_Message_Error Message.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png b/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png index 64679fd0e..105bfd65c 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png and b/.storybook/image-snapshots/expected/components_forms_Message_Note Message.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png b/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png index d21b5c86a..880cb5085 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png and b/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Validation.png differ diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx index e1ca74a29..586365f5a 100644 --- a/src/components/forms/Checkbox/Checkbox.tsx +++ b/src/components/forms/Checkbox/Checkbox.tsx @@ -110,6 +110,7 @@ const getLabelStyles = css` min-height: ${getRemToggleSize}; line-height: ${getRemToggleSize}; margin-left: ${({ theme }) => `-${getRemToggleSize({ theme })}`}; + font-weight: var(--sscds-font-weight-body-default); `; const CheckboxLabel = styled(Label)<{ isDisabled: boolean }>` diff --git a/src/components/forms/Label/Label.tsx b/src/components/forms/Label/Label.tsx index 657d58c8e..91d079d8e 100644 --- a/src/components/forms/Label/Label.tsx +++ b/src/components/forms/Label/Label.tsx @@ -2,16 +2,14 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react'; import styled from 'styled-components'; import cls from 'classnames'; -import { SpaceSizes } from '../../../theme'; -import { getSpace } from '../../../utils'; import { CLX_COMPONENT } from '../../../theme/constants'; -import { Text } from '../../Text'; +import ElementLabel from '../../ElementLabel/ElementLabel'; -const LabelRoot = styled(Text)` +const LabelRoot = styled(ElementLabel)` display: block; - padding-top: ${getSpace(SpaceSizes.xs)}; - padding-bottom: ${getSpace(SpaceSizes.xs)}; - cursor: 'inherit'; + padding-inline: var(--sscds-space-1x); + padding-block-end: var(--sscds-space-2x); + cursor: inherit; > * { margin: 0; @@ -23,10 +21,12 @@ const Label = ({ htmlFor, className, ...props -}: ComponentPropsWithoutRef<'label'> & { children: ReactNode }) => ( +}: Omit, 'color'> & { + children: ReactNode; +}) => ( diff --git a/src/components/forms/Message/Message.tsx b/src/components/forms/Message/Message.tsx index 66251b1c6..71faafd5e 100644 --- a/src/components/forms/Message/Message.tsx +++ b/src/components/forms/Message/Message.tsx @@ -1,16 +1,13 @@ import styled from 'styled-components'; -import { SpaceSizes } from '../../../theme'; -import { getSpace } from '../../../utils'; import { Paragraph } from '../../Paragraph'; -import { TextSizes } from '../../Text/Text.enums'; import { MessageVariants } from './Message.enums'; import { MessageProps } from './Message.types'; import { CLX_COMPONENT } from '../../../theme/constants'; const MessageContainer = styled.div` - padding-top: ${getSpace(SpaceSizes.sm)}; - padding-bottom: ${getSpace(SpaceSizes.sm)}; + padding-inline: var(--sscds-space-1x); + padding-block-start: var(--sscds-space-1x); > * { margin: 0; @@ -22,9 +19,7 @@ const Message = ({ variant = MessageVariants.note, }: MessageProps) => ( - - {children} - + {children} ); diff --git a/src/components/forms/Radio/Radio.tsx b/src/components/forms/Radio/Radio.tsx index ba2c3cb74..e20123377 100644 --- a/src/components/forms/Radio/Radio.tsx +++ b/src/components/forms/Radio/Radio.tsx @@ -21,6 +21,7 @@ const RadioLabel = styled(Label)< margin-bottom: 0; padding-top: 0; padding-bottom: 0; + font-weight: var(--sscds-font-weight-body-default); ${({ theme, hasLabel }) => { const toggleSize = getFormStyle('toggleSize')({ theme });