diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css b/packages/css/error-message.css similarity index 74% rename from packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css rename to packages/css/error-message.css index b96ac79f28..55ad8c127e 100644 --- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css +++ b/packages/css/error-message.css @@ -1,40 +1,40 @@ -@layer fds.errormessage { - .errorMessage { +@layer fds.typography.error-message { + .fds-error-message { --fdsc-bottom-spacing: var(--fds-spacing-5); margin: 0; } - .errorMessage.error { + .fds-error-message--error { color: var(--fds-semantic-text-danger-default); } - .errorMessage.spacing { + .fds-error-message--spacing { margin-bottom: var(--fdsc-bottom-spacing); } - .errorMessage.large { + .fds-error-message--large { --fdsc-bottom-spacing: var(--fds-spacing-5); font: var(--fds-typography-error_message-large); font-family: inherit; } - .errorMessage.medium { + .fds-error-message--medium { --fdsc-bottom-spacing: var(--fds-spacing-5); font: var(--fds-typography-error_message-medium); font-family: inherit; } - .errorMessage.small { + .fds-error-message--small { --fdsc-bottom-spacing: var(--fds-spacing-4); font: var(--fds-typography-error_message-small); font-family: inherit; } - .errorMessage.xsmall { + .fds-error-message--xsmall { --fdsc-bottom-spacing: var(--fds-spacing-3); font: var(--fds-typography-error_message-xsmall); diff --git a/packages/css/index.css b/packages/css/index.css index 529fc2735f..c9fd3c35a4 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -13,6 +13,7 @@ @import url('./accordion.css'); @import url('./switch.css'); @import url('./checkbox.css'); +@import url('./error-message.css'); @import url('./label.css'); @import url('./heading.css'); @import url('./paragraph.css'); diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index 3ad0eccd2f..4dcb7373bb 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -1,47 +1,3 @@ -@layer fds.errormessage { - .fds-errormessage-errorMessage-6fddd5b1 { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - margin: 0; - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-error-6fddd5b1 { - color: var(--fds-semantic-text-danger-default); - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-spacing-6fddd5b1 { - margin-bottom: var(--fdsc-bottom-spacing); - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-large-6fddd5b1 { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - font: var(--fds-typography-error_message-large); - font-family: inherit; - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-medium-6fddd5b1 { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - font: var(--fds-typography-error_message-medium); - font-family: inherit; - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-small-6fddd5b1 { - --fdsc-bottom-spacing: var(--fds-spacing-4); - - font: var(--fds-typography-error_message-small); - font-family: inherit; - } - - .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-xsmall-6fddd5b1 { - --fdsc-bottom-spacing: var(--fds-spacing-3); - - font: var(--fds-typography-error_message-xsmall); - font-family: inherit; - } -} - @layer fds.popover { .fds-popover-popover-16833383 { --border: 1px solid; diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx index 868d75cbb8..127ca61ece 100644 --- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx +++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx @@ -3,8 +3,6 @@ import { forwardRef } from 'react'; import cl from 'clsx'; import { Slot } from '@radix-ui/react-slot'; -import classes from './ErrorMessage.module.css'; - export type ErrorMessageProps = { /** Changes text sizing */ size?: 'xsmall' | 'small' | 'medium' | 'large'; @@ -31,12 +29,10 @@ export const ErrorMessage = forwardRef(