diff --git a/.changeset/gentle-geckos-swim.md b/.changeset/gentle-geckos-swim.md new file mode 100644 index 0000000000..0bd20c8612 --- /dev/null +++ b/.changeset/gentle-geckos-swim.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Add CSS-modules for users to compose Designsystemet CSS diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx index f94b39b2ab..3c74214475 100644 --- a/apps/storefront/layouts/PageLayout/PageLayout.tsx +++ b/apps/storefront/layouts/PageLayout/PageLayout.tsx @@ -1,3 +1,4 @@ +import paragraph from '@digdir/designsystemet-css/baseline/typography/paragraph.module.css'; import { Heading, Link } from '@digdir/designsystemet-react'; import { ArrowLeftIcon } from '@navikt/aksel-icons'; import { Container } from '@repo/components'; @@ -34,7 +35,9 @@ const PageLayout = ({ content, data }: PageLayoutProps) => { {data.backText} -
+
{data.author &&
{data.author}
}
- {data.date &&
{data.date}
}
diff --git a/packages/css/baseline/ds-reset.css b/packages/css/baseline/ds-reset.css index d37db7fc3e..65b8c4c5e0 100644 --- a/packages/css/baseline/ds-reset.css +++ b/packages/css/baseline/ds-reset.css @@ -2,17 +2,20 @@ /* https://wiki.csswg.org/ideas/mistakes */ -[class^='ds-'], -[class^='ds-']::before, -[class^='ds-']::after { +/* TODO: Can this be moved to the related components? */ +[class~='ds-'], +[class~='ds-']::before, +[class~='ds-']::after { box-sizing: border-box; } /* Inherit fonts for inputs and buttons */ -input[class^='ds-'], -button[class^='ds-'], -textarea[class^='ds-'], -select[class^='ds-'] { + +/* TODO: Can this be moved to the related form element CSS files? */ +input[class~='ds-'], +button[class~='ds-'], +textarea[class~='ds-'], +select[class~='ds-'] { font-family: inherit; font-size: inherit; line-height: inherit; diff --git a/packages/css/baseline/typography/paragraph.css b/packages/css/baseline/typography/paragraph.module.css similarity index 86% rename from packages/css/baseline/typography/paragraph.css rename to packages/css/baseline/typography/paragraph.module.css index 3620a57fd8..cb5d738aa3 100644 --- a/packages/css/baseline/typography/paragraph.css +++ b/packages/css/baseline/typography/paragraph.module.css @@ -1,3 +1,4 @@ +/* TODO: Could these styles be placed in css root like the other files? */ .ds-paragraph { --dsc-bottom-spacing: var(--ds-spacing-5); diff --git a/packages/css/box.css b/packages/css/box.module.css similarity index 100% rename from packages/css/box.css rename to packages/css/box.module.css diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.module.css similarity index 100% rename from packages/css/breadcrumbs.css rename to packages/css/breadcrumbs.module.css diff --git a/packages/css/index.css b/packages/css/index.css index ef900c63f0..34371fdab4 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -6,11 +6,11 @@ @import url('./baseline/ds-reset.css') layer(ds.reset); @import url('./baseline/typography/label.css') layer(ds.base.typography); @import url('./baseline/typography/heading.css') layer(ds.base.typography); -@import url('./baseline/typography/paragraph.css') layer(ds.base.typography); +@import url('./baseline/typography/paragraph.module.css') layer(ds.base.typography); @import url('./baseline/typography/ingress.css') layer(ds.base.typography); @import url('./baseline/typography/error-message.css') layer(ds.base.typography); @import url('./utilities.css') layer(ds.utilities); -@import url('./box.css') layer(ds.components); +@import url('./box.module.css') layer(ds.components); @import url('./button.css') layer(ds.components); @import url('./alert.css') layer(ds.components); @import url('./skiplink.css') layer(ds.components); @@ -42,6 +42,6 @@ @import url('./spinner.css') layer(ds.components); @import url('./table.css') layer(ds.components); @import url('./combobox.css') layer(ds.components); -@import url('./breadcrumbs.css') layer(ds.components); +@import url('./breadcrumbs.module.css') layer(ds.components); @import url('./badge.css') layer(ds.components); @import url('./avatar.css') layer(ds.components); diff --git a/packages/react/package.json b/packages/react/package.json index 1d895abf84..8d7b77a1d7 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -35,6 +35,7 @@ "access": "public" }, "dependencies": { + "@digdir/designsystemet-css": "workspace:^", "@floating-ui/react": "0.26.21", "@navikt/aksel-icons": "^6.14.0", "@radix-ui/react-slot": "^1.1.0", diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 429fbe24e7..c0292b4173 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -1,3 +1,4 @@ +import styles from '@digdir/designsystemet-css/box.module.css'; import { Slot } from '@radix-ui/react-slot'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; @@ -51,10 +52,10 @@ export const Box = forwardRef( ; export const BreadcrumbsItem = forwardRef( ({ className, ...rest }, ref) => ( -
  • +
  • ), ); diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx index cebc8ab45f..423401d4b8 100644 --- a/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx +++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsLink.tsx @@ -1,4 +1,4 @@ -import { useMergeRefs } from '@floating-ui/react'; +import styles from '@digdir/designsystemet-css/breadcrumbs.module.css'; import cl from 'clsx/lite'; import { forwardRef, useRef } from 'react'; @@ -11,7 +11,11 @@ export const BreadcrumbsLink = forwardRef< HTMLAnchorElement, BreadcrumbsLinkProps >(({ className, ...rest }, ref) => ( - + )); BreadcrumbsLink.displayName = 'BreadcrumbsLink'; diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx index 951090b328..81724360a4 100644 --- a/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx +++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsList.tsx @@ -1,3 +1,4 @@ +import styles from '@digdir/designsystemet-css/breadcrumbs.module.css'; import { useMergeRefs } from '@floating-ui/react'; import cl from 'clsx/lite'; import { type HTMLAttributes, forwardRef, useEffect, useRef } from 'react'; @@ -22,7 +23,7 @@ export const BreadcrumbsList = forwardRef< return (
      diff --git a/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx b/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx index 694ae342f3..ec08ae9d94 100644 --- a/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx +++ b/packages/react/src/components/Breadcrumbs/BreadcrumbsNav.tsx @@ -1,3 +1,4 @@ +import styles from '@digdir/designsystemet-css/breadcrumbs.module.css'; import cl from 'clsx/lite'; import { type HTMLAttributes, forwardRef } from 'react'; @@ -13,7 +14,7 @@ export const BreadcrumbsNav = forwardRef(