diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css index 6df4583086..c96da2206b 100644 --- a/apps/storefront/components/Banner/Banner.module.css +++ b/apps/storefront/components/Banner/Banner.module.css @@ -27,7 +27,7 @@ display: flex; align-items: center; margin-bottom: var(--fds-spacing-3); - font: var(--fds-typography-heading-xlarge); + font: var(--fds-typography-heading-large); } .title > span { @@ -37,7 +37,7 @@ .desc { padding-right: var(--fds-spacing-7); margin-bottom: 0; - font: var(--fds-typography-ingress-medium); + font: var(--fds-typography-ingress-small); } .shapes { diff --git a/apps/storefront/components/Blog/Card/BlogCard.module.css b/apps/storefront/components/Blog/Card/BlogCard.module.css index 839d958a65..6b106aa707 100644 --- a/apps/storefront/components/Blog/Card/BlogCard.module.css +++ b/apps/storefront/components/Blog/Card/BlogCard.module.css @@ -5,7 +5,7 @@ @media screen and (min-width: 1024px) { .card[data-featured='true'] .media { - padding-bottom: 0 !important; + padding-bottom: 0; } .card[data-featured='true'] { @@ -18,22 +18,22 @@ flex-wrap: wrap; flex-direction: column; justify-content: center; - padding: var(--fds-spacing-8) var(--fds-spacing-10) !important; + padding: var(--fds-spacing-8) var(--fds-spacing-10); } .card[data-featured='true'] .heading { - padding-top: 0 !important; + padding-top: 0; } .card[data-featured='true'] .footer { - padding-bottom: 0 !important; + padding-bottom: 0; } } .meta { display: flex; gap: var(--fds-spacing-2); - color: var(--fds-semantic-text-neutral-subtle) !important; + color: var(--fds-semantic-text-neutral-subtle); } .metaSquare { diff --git a/apps/storefront/components/Blog/Contributors/Contributors.module.css b/apps/storefront/components/Blog/Contributors/Contributors.module.css index f3aab93a22..87c5a535e0 100644 --- a/apps/storefront/components/Blog/Contributors/Contributors.module.css +++ b/apps/storefront/components/Blog/Contributors/Contributors.module.css @@ -47,7 +47,7 @@ text-wrap: nowrap; justify-content: center; gap: var(--fds-spacing-3); - color: var(--fds-semantic-text-neutral-subtle) !important; + color: var(--fds-semantic-text-neutral-subtle); } .metaSquare { diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css index 9232c731f9..7464b2cf5c 100644 --- a/apps/storefront/components/ComponentCard/ComponentCard.module.css +++ b/apps/storefront/components/ComponentCard/ComponentCard.module.css @@ -15,7 +15,7 @@ } .title { - margin-top: var(--fds-spacing-3) !important; + margin-top: var(--fds-spacing-3); text-decoration: underline; text-underline-offset: 7px; } diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx index 96290bab43..1549cd5b4d 100644 --- a/apps/storefront/components/Header/Header.tsx +++ b/apps/storefront/components/Header/Header.tsx @@ -116,6 +116,7 @@ const Header = () => { href='https://github.com/digdir/designsystemet' target='_blank' className={cl(classes.linkIcon, classes.github)} + title='Designsystemets GitHub-repositorium' > @@ -125,6 +126,7 @@ const Header = () => { href='https://www.figma.com/@designsystemet' target='_blank' className={cl(classes.linkIcon, classes.figma)} + title='Designsystemets Figma-prosjekt' > diff --git a/apps/storefront/components/ImageSection/ImageSection.module.css b/apps/storefront/components/ImageSection/ImageSection.module.css index f11a4d2521..ce81dbda27 100644 --- a/apps/storefront/components/ImageSection/ImageSection.module.css +++ b/apps/storefront/components/ImageSection/ImageSection.module.css @@ -37,7 +37,7 @@ } .title { - font: var(--fds-typography-heading-large); + font: var(--fds-typography-heading-medium); margin-bottom: var(--fds-spacing-4); } @@ -69,7 +69,7 @@ border-radius: 4px; cursor: pointer; transition: 0.1s all; - color: var(--fds-semantic-text-neutral-default) !important; + color: var(--fds-semantic-text-neutral-default); text-decoration: none; } diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx index ee08379f20..01fe18aad4 100644 --- a/apps/storefront/components/Section/Section.tsx +++ b/apps/storefront/components/Section/Section.tsx @@ -1,6 +1,7 @@ import type * as React from 'react'; import cl from 'clsx'; import Image from 'next/image'; +import { Heading } from '@digdir/designsystemet-react'; import { Container } from '../Container/Container'; @@ -23,7 +24,14 @@ const Section = ({
- {title &&

{title}

} + {title && ( + + {title} + + )} {detail && ( ; const BannerHeading = ({ ...props }: BannerHeadingProps) => { return ( ); diff --git a/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css b/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css index 058e1b5a52..c5b3de5fa0 100644 --- a/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css +++ b/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css @@ -6,5 +6,5 @@ justify-content: center; align-items: center; background-color: #cfeaff; - font-family: 'Inter', sans-serif !important; + font-family: 'Inter', sans-serif; } diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.module.css b/apps/storefront/components/Tokens/TokenList/TokenList.module.css index 3b6ce73b8b..4979dc392f 100644 --- a/apps/storefront/components/Tokens/TokenList/TokenList.module.css +++ b/apps/storefront/components/Tokens/TokenList/TokenList.module.css @@ -78,9 +78,9 @@ .title { font-weight: 500; - font-size: 16px !important; - margin-top: -3px !important; - margin-bottom: 3px !important; + font-size: 16px; + margin-top: -3px; + margin-bottom: 3px; display: flex; align-items: center; } diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css index 40d214ce6a..550e9ef89f 100644 --- a/apps/storefront/globals.css +++ b/apps/storefront/globals.css @@ -1,5 +1,7 @@ @import url('https://altinncdn.no/fonts/inter/inter.css'); +@layer normalize, fds; + :root { --color-beta: #d6d4ff; --color-text-on_inverted-subtle: #dbdbdb; @@ -22,7 +24,9 @@ body { * { box-sizing: border-box; - font-feature-settings: 'cv05' 1; + + /* Still need important here, since we are using `font:` outside of a layer */ + font-feature-settings: 'cv05' 1 !important; } h1, @@ -52,3 +56,186 @@ h6 { .greyBackground { background: var(--fds-semantic-background-subtle); } + +@layer normalize { + html { + line-height: 1.15; /* 1 */ + } + + body { + margin: 0; + } + + main { + display: block; + } + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + pre { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + a { + background-color: transparent; + } + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + b, + strong { + font-weight: bolder; + } + + code, + kbd, + samp { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + small { + font-size: 80%; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + img { + border-style: none; + } + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + button, + input { + /* 1 */ + overflow: visible; + } + + button, + select { + /* 1 */ + text-transform: none; + } + + button, + [type='button'], + [type='reset'], + [type='submit'] { + appearance: button; + } + + button::-moz-focus-inner, + [type='button']::-moz-focus-inner, + [type='reset']::-moz-focus-inner, + [type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; + } + + button:-moz-focusring, + [type='button']:-moz-focusring, + [type='reset']:-moz-focusring, + [type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; + } + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + progress { + vertical-align: baseline; + } + + textarea { + overflow: auto; + } + + [type='checkbox'], + [type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + height: auto; + } + + [type='search'] { + appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + [type='search']::-webkit-search-decoration { + appearance: none; + } + + ::-webkit-file-upload-button { + appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + details { + display: block; + } + + summary { + display: list-item; + } + + template { + display: none; + } + + [hidden] { + display: none; + } +} diff --git a/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css b/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css index e4d8a268f5..2f78468cee 100644 --- a/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css +++ b/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css @@ -22,15 +22,15 @@ } .ingress { - margin: 0 auto !important; + margin: 0 auto; } .meta { display: flex; justify-content: center; - margin-top: var(--fds-spacing-1) !important; + margin-top: var(--fds-spacing-1); gap: var(--fds-spacing-3); - color: var(--fds-semantic-text-neutral-subtle) !important; + color: var(--fds-semantic-text-neutral-subtle); } .metaSquare { diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css index 2692a28a96..2e36db1c34 100644 --- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css +++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css @@ -38,7 +38,6 @@ .title { margin-bottom: 0; - font: var(--fds-typography-heading-xlarge); } .date { diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css index 9bbbb12983..d8ec46b1b5 100644 --- a/apps/storefront/layouts/PageLayout/PageLayout.module.css +++ b/apps/storefront/layouts/PageLayout/PageLayout.module.css @@ -17,7 +17,6 @@ .title { margin-bottom: 0; text-align: center; - font: var(--fds-typography-heading-xlarge); } .backBtn { @@ -26,7 +25,7 @@ } .backBtn:visited { - color: inherit !important; + color: inherit; } .backBtn svg { diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx index 67479844d7..7b244e5ea6 100644 --- a/apps/storefront/layouts/PageLayout/PageLayout.tsx +++ b/apps/storefront/layouts/PageLayout/PageLayout.tsx @@ -1,6 +1,6 @@ import type * as React from 'react'; import NextLink from 'next/link'; -import { Link } from '@digdir/designsystemet-react'; +import { Heading, Link } from '@digdir/designsystemet-react'; import { ArrowLeftIcon } from '@navikt/aksel-icons'; import { Container, MdxContent } from '../../components'; @@ -22,10 +22,7 @@ type PageLayoutData = { const PageLayout = ({ content, data }: PageLayoutProps) => { return ( -
+
@@ -45,17 +42,17 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
- - {data.author && ( -
{data.author}
- )} - + {data.author &&
{data.author}
} - - - {data.date &&
{data.date}
} - + {data.date &&
{data.date}
}
-

{data.title}

+ + {data.title} +
diff --git a/apps/storefront/package.json b/apps/storefront/package.json index 9503adb3c4..f3098f1875 100644 --- a/apps/storefront/package.json +++ b/apps/storefront/package.json @@ -21,7 +21,6 @@ "hastscript": "^8.0.0", "mdx-embed": "^1.1.2", "next": "^14.0.4", - "normalize.css": "^8.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-element-to-jsx-string": "^15.0.0", diff --git a/apps/storefront/pages/_app.tsx b/apps/storefront/pages/_app.tsx index b02eb3853f..972eab5ed0 100644 --- a/apps/storefront/pages/_app.tsx +++ b/apps/storefront/pages/_app.tsx @@ -1,8 +1,7 @@ -import 'normalize.css/normalize.css'; +import '../globals.css'; import '@digdir/designsystemet-theme/brand/digdir/tokens.css'; import '@digdir/designsystemet-css'; -import '../globals.css'; import type { AppProps } from 'next/app'; import { Analytics } from '@vercel/analytics/react'; import { SkipLink } from '@digdir/designsystemet-react'; diff --git a/packages/get-started.mdx b/packages/get-started.mdx index ad746b926a..697fd87a33 100644 --- a/packages/get-started.mdx +++ b/packages/get-started.mdx @@ -30,7 +30,7 @@ Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/ Legg til `` taggen i ``, og sett `font-family` til `Inter` i din globale css fil. -`font-feature-settings` legger til en hale på små `L`'er og må settes med `!important` flagget. +`font-feature-settings` legger til en hale på små `L`'er. #### HTML diff --git a/yarn.lock b/yarn.lock index 918b895750..7fb8774041 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19580,7 +19580,6 @@ __metadata: hastscript: "npm:^8.0.0" mdx-embed: "npm:^1.1.2" next: "npm:^14.0.4" - normalize.css: "npm:^8.0.1" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" react-element-to-jsx-string: "npm:^15.0.0"