diff --git a/packages/css/index.css b/packages/css/index.css index 81a8086c2a..7e99a4ae6b 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -3,3 +3,4 @@ @import url('./react-css-modules.css'); @import url('./utils.css'); @import url('./alert.css'); +@import url('./ingress.css'); diff --git a/packages/css/ingress.css b/packages/css/ingress.css new file mode 100644 index 0000000000..07f85edcf6 --- /dev/null +++ b/packages/css/ingress.css @@ -0,0 +1,40 @@ +@layer fds.ingress { + .fds-ingress { + --fdsc-bottom-spacing: var(--fds-spacing-5); + + margin: 0; + color: var(--fds-semantic-text-neutral-default); + } + + .fds-ingress--spacing { + margin-bottom: var(--fdsc-bottom-spacing); + } + + .fds-ingress--medium { + --fdsc-bottom-spacing: var(--fds-spacing-5); + + font: var(--fds-typography-ingress-medium); + font-family: inherit; + } + + .fds-ingress--large { + --fdsc-bottom-spacing: var(--fds-spacing-6); + + font: var(--fds-typography-ingress-large); + font-family: inherit; + } + + .fds-ingress--small { + --fdsc-bottom-spacing: var(--fds-spacing-7); + + font: var(--fds-typography-ingress-small); + font-family: inherit; + } + + .fds-ingress--xsmall { + --fdsc-bottom-spacing: var(--fds-spacing-8); + + font: var(--fds-typography-ingress-xsmall); + font-family: inherit; + } +} diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index f90a612c9f..ec1d997e94 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -444,26 +444,6 @@ } } -@layer fds.ingress { - .fds-ingress-ingress-9b33da65 { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - margin: 0; - color: var(--fds-semantic-text-neutral-default); - } - - .fds-ingress-ingress-9b33da65.fds-ingress-spacing-9b33da65 { - margin-bottom: var(--fdsc-bottom-spacing); - } - - .fds-ingress-ingress-9b33da65.fds-ingress-medium-9b33da65 { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - font: var(--fds-typography-ingress-medium); - font-family: inherit; - } -} - @layer fds.label { .fds-label-label-e0249167 { --fdsc-bottom-spacing: var(--fds-spacing-1); diff --git a/packages/react/src/components/Typography/Ingress/Ingress.module.css b/packages/react/src/components/Typography/Ingress/Ingress.module.css deleted file mode 100644 index 0cd4348204..0000000000 --- a/packages/react/src/components/Typography/Ingress/Ingress.module.css +++ /dev/null @@ -1,19 +0,0 @@ -@layer fds.ingress { - .ingress { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - margin: 0; - color: var(--fds-semantic-text-neutral-default); - } - - .ingress.spacing { - margin-bottom: var(--fdsc-bottom-spacing); - } - - .ingress.medium { - --fdsc-bottom-spacing: var(--fds-spacing-5); - - font: var(--fds-typography-ingress-medium); - font-family: inherit; - } -} diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx index 62d8f54e6b..2910fea9d4 100644 --- a/packages/react/src/components/Typography/Ingress/Ingress.tsx +++ b/packages/react/src/components/Typography/Ingress/Ingress.tsx @@ -5,11 +5,11 @@ import { Slot } from '@radix-ui/react-slot'; import type { OverridableComponent } from '../../../types/OverridableComponent'; -import classes from './Ingress.module.css'; - export type IngressProps = { - /** Changes text sizing */ - size?: 'medium'; + /** Changes text sizing + * @default 'medium' + */ + size?: 'large' | 'medium' | 'small' | 'xsmall'; /** Adds margin-bottom */ spacing?: boolean; /** @@ -32,10 +32,10 @@ export const Ingress: OverridableComponent = ( classes.formField, textareaProps.disabled && classes.disabled, readOnly && classes.readonly, + hasError && classes.error, className, )} >