Lerna versionbump [ci skip]

- @navikt/ds-css@0.5.1 - @navikt/ds-react@0.5.1 - @navikt/ds-tokens@0.3.1
Vnext: Nytt Typo-oppsett(#1079 )
2026-10-13 09:12:03 +00:00 · 2021-06-02 09:19:08 +00:00 · 2021-06-02 11:04:12 +02:00 · 2021-05-28 11:23:29 +00:00 · 2021-05-28 13:08:14 +02:00 · 2021-05-26 13:27:17 +02:00
56 changed files with 806 additions and 465 deletions
@@ -51,12 +51,6 @@
  align-items: center;
 }

-.navds-accordion__button .navds-accordion__heading {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
-}
-
 .navds-accordion__button:hover .navds-accordion__heading {
  text-decoration: underline;
  color: var(--navds-color-text-link);
@@ -8,8 +8,6 @@
  grid-auto-flow: column;
  column-gap: 0.75rem;
  justify-content: start;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
 }

 .navds-alert--small {
@@ -3,12 +3,9 @@
  cursor: pointer;
  background-color: var(--navds-color-background);
  color: var(--navds-color-action-default);
-  font: inherit;
  margin: 0;
  text-align: center;
  text-decoration: none;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
  border-color: var(--navds-color-action-default);
  border-radius: 2px;
  border-style: solid;
@@ -13,4 +13,5 @@
@import "modal.css";
@import "popover.css";
@import "tag.css";
+@import "panel.css";
@import "typography.css";
@@ -29,9 +29,6 @@
  text-decoration: none;
  margin: 0;
  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
 }

 .navds-header__title > span > a {
@@ -58,15 +55,6 @@
  align-items: center;
 }

-.navds-header__name {
+.navds-header__name.navds-body-short {
  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.4.1",
+  "version": "0.5.1",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.2.1",
+    "@navikt/ds-tokens": "^0.3.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--navds-color-white);
+  display: block;
+  padding: 1rem;
+  border-radius: var(--navds-border-radius);
+}
+
+.navds-panel--border {
+  border: var(--navds-border-default);
+}
@@ -3,8 +3,6 @@
  border: var(--navds-border-default);
  background-color: var(--navds-color-tag-info-background);
  border-color: var(--navds-color-tag-info-border);
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
  display: inline-block;

  /* Padding calculated based on 16px font for 24px tall tag */
@@ -1,63 +1,148 @@
-/*
- * Heading
- */
-.navds-heading {
+/* Title */
+.navds-title {
  font-weight: var(--navds-font-weight-bold);
-  line-height: calc(1em + 0.25rem);
+  margin: 0;
 }

-.navds-heading--xxl {
-  font-size: var(--navds-font-size-heading-xxl);
+.navds-title--2xl {
+  font-size: var(--navds-font-size-title-2xl);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-2xl);
 }

-.navds-heading--xl {
-  font-size: var(--navds-font-size-heading-xl);
+.navds-title--2xl.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-s);
 }

-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
+.navds-title--xl {
+  font-size: var(--navds-font-size-title-xl);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-xl);
 }

-.navds-heading--medium {
-  font-size: var(--navds-font-size-heading-medium);
+.navds-title--xl.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-xs);
 }

-.navds-heading--small {
-  font-size: var(--navds-font-size-heading-small);
+.navds-title--l {
+  font-size: var(--navds-font-size-title-l);
+  letter-spacing: -0.004em;
+  line-height: var(--navds-font-line-height-l);
 }

-/*
- * Text
- */
-.navds-text--large {
-  font-size: var(--navds-font-size-large);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--l.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-2xs);
 }

-.navds-text--medium {
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
+.navds-title--m {
+  font-size: var(--navds-font-size-title-m);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-m);
 }

-.navds-text--small {
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+.navds-title--m.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-2xs);
 }

-.navds-text--xs {
-  font-size: var(--navds-font-size-xs);
+.navds-title--s {
+  font-size: var(--navds-font-size-title-s);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-s);
+}
+
+.navds-title--s.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-2xs);
+}
+
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xl);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-s);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-3xl);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-s);
+  margin: 0;
+}
+
+.navds-body-short {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-xs);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-l);
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-2xs);
+}
+
+.navds-body--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
  line-height: var(--navds-font-line-height-xs);
 }

-/*
- * Article typography
- */
-.navds-article__lead {
-  font-size: var(--navds-font-size-article-lead);
-  line-height: var(--navds-font-line-height-large);
+.navds-body-long.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-m);
 }

-.navds-article__paragraph {
-  font-size: var(--navds-font-size-article-paragraph);
-  line-height: var(--navds-font-line-height-medium);
+.navds-body-short.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-3xs);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-xs);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-2xs);
+}
+
+.navds-label--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-2xs);
+}
+
+.navds-label--s.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-3xs);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--navds-font-size-s);
+  letter-spacing: 0.004em;
+  line-height: var(--navds-font-line-height-2xs);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-3xs);
+}
+
+.navds-detail--s {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--s.navds-typo--spacing {
+  margin-bottom: var(--navds-font-spacing-3xs);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.4.2",
+  "version": "0.5.1",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Heading } from "../index";
+import { Title } from "../index";
 import { ActiveAnchorProvider } from "./ActiveAnchorStore";
 import cl from "classnames";

@@ -21,13 +21,9 @@ const AccordionAnchorMenu = forwardRef<
    {...rest}
  >
    {title && (
-      <Heading
-        level={2}
-        size="medium"
-        className="navds-accordion-anchor-menu__title"
-      >
+      <Title level={2} size="m" className="navds-accordion-anchor-menu__title">
        {title}
-      </Heading>
+      </Title>
    )}
    <ActiveAnchorProvider>
      <BaseAccordionMenu aria-label={title || "Meny"}>
@@ -78,7 +78,9 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
          onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
          {...rest}
        >
-          <span className="navds-accordion__heading">{heading}</span>
+          <span className="navds-accordion__heading navds-title navds-title--s">
+            {heading}
+          </span>
          <Expand
            className={cl(
              "navds-accordion__chevron",
@@ -50,7 +50,9 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        className,
        "navds-alert",
        `navds-alert--${variant}`,
-        `navds-alert--${size}`
+        `navds-alert--${size}`,
+        "navds-body-long",
+        "navds-body--s"
      )}
      {...rest}
    >
@@ -35,7 +35,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
        className,
        "navds-button",
        `navds-button--${variant}`,
-        `navds-button--${size}`
+        `navds-button--${size}`,
+        "navds-body-short"
      )}
      {...rest}
    />
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ContentContainer } from "../index";
-import { Text } from "../../index";
+import { BodyLong } from "../../index";
 import "./style.css";
 import { useEffect } from "react";

@@ -41,7 +41,7 @@ export default {
 export const All = () => {
  return (
    <ContentContainer className={"navds-story-content-container"}>
-      <Text size="medium">-- Innhold --</Text>
+      <BodyLong size="m">-- Innhold --</BodyLong>
    </ContentContainer>
  );
 };
@@ -34,12 +34,13 @@ export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
+export { Panel, PanelProps } from "./panel/index";
 export {
-  Heading,
-  HeadingProps,
-  Lead,
-  Paragraph,
-  Text,
-  TextProps,
+  Title,
+  Ingress,
+  BodyLong,
+  BodyShort,
+  Label,
+  Detail,
 } from "./typography/index";
 export { OverridableComponent } from "./util/index";
@@ -22,7 +22,7 @@ const InternalHeaderTitle = forwardRef<HTMLElement, InternalHeaderTitleProps>(
    createElement(element, {
      ...rest,
      ref,
-      className: cl("navds-header__title", className),
+      className: cl("navds-header__title", "navds-label", className),
      children: <span>{children}</span>,
    })
 );
@@ -20,8 +20,10 @@ export interface InternalHeaderUserProps
 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
  ({ className, name, ident, ...rest }, ref) => (
    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name">{name}</span>
-      <span className="navds-header__ident">{ident}</span>
+      <span className="navds-header__name navds-body-short navds-body--s">
+        {name}
+      </span>
+      <span className="navds-detail navds-detail--s">{ident}</span>
    </div>
  )
 );
@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { Children, forwardRef, HTMLAttributes, useEffect } from "react";
-import { ContentContainer, Heading } from "../../index";
+import { ContentContainer, Title } from "../../index";

 const cls = (className, columns) =>
  cl(
@@ -35,13 +35,13 @@ const ProductPageLayout = forwardRef<HTMLDivElement, ProductPageLayoutProps>(
          <ContentContainer>
            <div className={cls(className, columns)} {...rest}>
              <div className={cl("navds-layout__header-content")}>
-                <Heading
-                  size={"xxl"}
+                <Title
+                  size="2xl"
                  className={cl("navds-layout__header-title")}
                  level={1}
                >
                  {title}
-                </Heading>
+                </Title>
              </div>
            </div>
          </ContentContainer>
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { forwardRef, ReactNode } from "react";
 import cl from "classnames";
-import { Heading, CopyToClipboard } from "../../";
+import { Title, CopyToClipboard } from "../../";
 import { Attachment } from "@navikt/ds-icons";

 export interface ProductPagePanelProps
@@ -50,9 +50,9 @@ const ProductPagePanel = forwardRef<HTMLDivElement, ProductPagePanelProps>(
          />
        </div>
        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
-        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
+        <Title size={"xl"} className={"navds-layout__panel-title"} level={2}>
          {title}
-        </Heading>
+        </Title>

        <CopyToClipboard
          className="navds-layout__panel-copy"
@@ -1,12 +1,5 @@
 import * as React from "react";
-import {
-  Button,
-  Cell,
-  Grid,
-  Heading,
-  Link,
-  Paragraph,
-} from "../../../../index";
+import { Button, Cell, Grid, Title, Link, BodyLong } from "../../../../index";

 export const Main = ({ title = true }) => (
  <>
@@ -19,30 +12,30 @@ export const Main = ({ title = true }) => (
 export const MainOne = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"leo-quis"}>
+      <Title level={1} size={"xl"} id={"leo-quis"}>
        Leo quis
-      </Heading>
+      </Title>
    )}
-    <Paragraph>
+    <BodyLong>
      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
      eget interdum nibh
-    </Paragraph>
+    </BodyLong>
  </div>
 );

 export const MainTwo = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"proin-accumsan"}>
+      <Title level={1} size={"xl"} id={"proin-accumsan"}>
        Proin accumsan
-      </Heading>
+      </Title>
    )}
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    </Paragraph>
+    </BodyLong>
    <Grid className={"section"}>
      <Cell xs={6}>
        <Link href={"#"}>Ea voluptate</Link>
@@ -51,17 +44,17 @@ export const MainTwo = ({ title = true }) => (
        <Link href={"#"}>Quis autem</Link>
      </Cell>
    </Grid>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
      consectetur, adipisci velit, sed quia non numquam eius modi tempora.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"nulla-pariatur"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"nulla-pariatur"}>
      Nulla pariatur?
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
      imperdiet erat. Morbi sodales bibendum volutpat.
-    </Paragraph>
+    </BodyLong>
    <table className={"section tabell tabell--stripet"}>
      <thead>
        <tr>
@@ -92,18 +85,18 @@ export const MainTwo = ({ title = true }) => (
        </tr>
      </tbody>
    </table>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
      commodo tortor.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"luctus-justo"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"luctus-justo"}>
      Luctus justo
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
+    </BodyLong>
    <Button>Søk ...</Button>
  </div>
 );
@@ -111,30 +104,30 @@ export const MainTwo = ({ title = true }) => (
 export const MainThree = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"maecenas-in-pretium"}>
+      <Title level={1} size={"xl"} id={"maecenas-in-pretium"}>
        Maecenas in pretium
-      </Heading>
+      </Title>
    )}
-    <Paragraph>
+    <BodyLong>
      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
      eget interdum nibh
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
      convallis turpis.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
      feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
      consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
      porttitor magna sapien id enim.
-    </Paragraph>
+    </BodyLong>
  </div>
 );
@@ -0,0 +1,36 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Adds a border to the panel
+   * @default false
+   */
+  border?: boolean;
+}
+
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ children, className, border = false, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-panel", className, {
+          "navds-panel--border": border,
+        })}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Panel;
@@ -0,0 +1,2 @@
+export { default as Panel } from "./Panel";
+export * from "./Panel";
@@ -0,0 +1,38 @@
+import React from "react";
+import { Panel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/panel",
+  component: Panel,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Panel</h1>
+      <Panel>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+      <h2>With border</h2>
+      <Panel border>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    </div>
+  );
+};
@@ -21,7 +21,13 @@ const Tag = forwardRef<HTMLSpanElement, TagProps>(
    return (
      <span
        ref={ref}
-        className={cl("navds-tag", className, `navds-tag--${variant}`)}
+        className={cl(
+          "navds-tag",
+          className,
+          "navds-detail",
+          "navds-detail--s",
+          `navds-tag--${variant}`
+        )}
        {...rest}
      >
        {children}
@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface BodyLongProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const BodyLong: OverridableComponent<BodyLongProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-body-long", {
+        "navds-body--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default BodyLong;
@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface BodyShortProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const BodyShort: OverridableComponent<BodyShortProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-body-short", {
+        "navds-body--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default BodyShort;
@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface DetailProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Detail: OverridableComponent<DetailProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-detail", {
+        "navds-detail--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Detail;
@@ -1,26 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  level: 1 | 2 | 3 | 4 | 5 | 6;
-  size: "xxl" | "xl" | "large" | "medium" | "small";
-  children: React.ReactNode;
-}
-
-const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  ({ level, size, className, children, ...rest }, ref) => {
-    let HeadingTag = `h${level}` as React.ElementType;
-
-    return (
-      <HeadingTag
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-heading", `navds-heading--${size}`)}
-      >
-        {children}
-      </HeadingTag>
-    );
-  }
-);
-
-export default Heading;
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface IngressProps {
+  props: {
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Ingress: OverridableComponent<IngressProps> = forwardRef(
+  ({ className, spacing, component: Component = "p", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-ingress", {
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Ingress;
@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface LabelProps {
+  props: {
+    /**
+     * M: 18px, S: 16px
+     * @default "m"
+     */
+    size?: "m" | "s";
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "p";
+}
+
+const Label: OverridableComponent<LabelProps> = forwardRef(
+  (
+    { className, size = "m", spacing, component: Component = "p", ...rest },
+    ref
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(className, "navds-label", {
+        "navds-label--s": size === "s",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
+);
+
+export default Label;
@@ -1,11 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-const Lead = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...rest }, ref) => (
-  <p {...rest} ref={ref} className={cl(className, "navds-article__lead")} />
-));
-
-export default Lead;
@@ -1,15 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-const Paragraph = forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...rest }, ref) => (
-  <p
-    {...rest}
-    ref={ref}
-    className={cl(className, "navds-article__paragraph")}
-  />
-));
-
-export default Paragraph;
@@ -1,21 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
-  size: "large" | "medium" | "small" | "xs";
-  children: React.ReactNode;
-}
-
-const Text = forwardRef<HTMLSpanElement, TextProps>(
-  ({ size, className, children, ...rest }, ref) => (
-    <span
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-text", `navds-text--${size}`)}
-    >
-      {children}
-    </span>
-  )
-);
-
-export default Text;
@@ -0,0 +1,49 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  props: {
+    /**
+     * Heading level
+     */
+    level: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sizes from largest "2xl" to smallest "s"
+     */
+    size: "2xl" | "xl" | "l" | "m" | "s";
+    /**
+     * Heading to render
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling on element
+     */
+    className?: string;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
+  } & React.HTMLAttributes<HTMLParagraphElement>;
+  defaultComponent: "h1";
+}
+
+const Title: OverridableComponent<TitleProps> = forwardRef(
+  ({ level, size, spacing, className, children, component, ...rest }, ref) => {
+    let HeadingTag = component ?? (`h${level}` as React.ElementType);
+
+    return (
+      <HeadingTag
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-title", `navds-title--${size}`, {
+          "navds-typo--spacing": !!spacing,
+        })}
+      >
+        {children}
+      </HeadingTag>
+    );
+  }
+);
+
+export default Title;
@@ -1,8 +1,6 @@
-export { default as Heading } from "./Heading";
-export * from "./Heading";
-export { default as Text } from "./Text";
-export * from "./Text";
-export { default as Paragraph } from "./Paragraph";
-export * from "./Paragraph";
-export { default as Lead } from "./Lead";
-export * from "./Lead";
+export { default as Title } from "./Title";
+export { default as Ingress } from "./Ingress";
+export { default as BodyLong } from "./BodyLong";
+export { default as BodyShort } from "./BodyShort";
+export { default as Detail } from "./Detail";
+export { default as Label } from "./Label";
@@ -0,0 +1,3 @@
+.typo-story > div:nth-child(even) {
+  background: var(--navds-color-gray-20);
+}
@@ -1,116 +1,137 @@
 import React from "react";
-import { Heading, Text, Paragraph, Lead } from "../index";
+import { Title, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
+import "./index.css";

 export default {
  title: "ds-react/typography",
-  component: Heading,
+  component: BodyLong,
 };

-export const heading = () => {
-  return (
+export const TypoMedSpacing = () => <TypoMal spacing={true} />;
+export const TypoUtenSpacing = () => <TypoMal spacing={false} />;
+
+const TypoMal = ({ ...rest }) => {
+  const lorem = (text) => (
    <>
-      <Heading level={1} size="xxl">
-        xxl
-      </Heading>
-      <Heading level={2} size="xl">
-        xl
-      </Heading>
-      <Heading level={3} size="large">
-        large
-      </Heading>
-      <Heading level={4} size="medium">
-        medium
-      </Heading>
-      <Heading level={5} size="small">
-        small
-      </Heading>
+      {text} <br /> Veniam consequat cillum pariatur officia duis aute labore
+      anim labore. Pariatur ad duis do nulla.
    </>
  );
-};
-
-export const text = () => {
  return (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <Text size="large">large</Text>
-      <Text size="medium">medium</Text>
-      <Text size="small">small</Text>
-      <Text size="xs">xs</Text>
+    <div
+      className="typo-story"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div>
+        <Title {...rest} level={1} size="2xl">
+          {lorem("Title 2xl")}
+        </Title>
+        <Title {...rest} level={2} size="xl">
+          {lorem("Title xl")}
+        </Title>
+        <Title {...rest} level={3} size="l">
+          {lorem("Title l")}
+        </Title>
+        <Title {...rest} level={4} size="m">
+          {lorem("Title m")}
+        </Title>
+        <Title {...rest} level={5} size="s">
+          {lorem("Title s")}
+        </Title>
+      </div>
+      <div>
+        <Ingress {...rest}>{lorem("Ingress")}</Ingress>
+      </div>
+      <div>
+        <BodyLong {...rest}>{lorem("BodyLong")}</BodyLong>
+        <BodyLong {...rest} size="s">
+          {lorem("BodyLong small")}
+        </BodyLong>
+      </div>
+      <div>
+        <BodyShort component="span" {...rest} {...rest}>
+          {lorem("BodyShort")}
+        </BodyShort>
+        <BodyShort {...rest} size="s">
+          {lorem("BodyShort small")}
+        </BodyShort>
+      </div>
+      <div>
+        <Label {...rest}>{lorem("Label")}</Label>
+        <Label {...rest} size="s">
+          {lorem("Label small")}
+        </Label>
+      </div>
+      <div>
+        <Detail {...rest}>{lorem("Detail")}</Detail>
+        <Detail {...rest} size="s">
+          {lorem("Detail small")}
+        </Detail>
+      </div>
    </div>
  );
 };

-export const article = () => {
+export const SideInnholdEksempel = () => {
  return (
-    <article>
-      <Heading level={1} size="xxl">
-        Uføretrygd
-      </Heading>
-      <Lead>
-        Uføretrygd kan være aktuelt for deg som har varig nedsatt inntektsevne
-        på grunn av sykdom eller skade.
-      </Lead>
-      <Paragraph>
-        Uføretrygden erstatter den delen av inntektsevnen du har tapt på grunn
-        av varig sykdom eller skade.
-      </Paragraph>
-      <Paragraph>
-        Om du har rett til 100 prosent uføretrygd eller gradert (delvis)
-        uføretrygd, er avhengig av inntektsevnen din. Har du mulighet til å
-        jobbe for eksempel 40 prosent, kan du ha rett til 60 prosent uføretrygd.{" "}
-      </Paragraph>
-      <p>
-        Anim duis aliqua ad culpa amet ad. Anim deserunt veniam laborum commodo
-        in excepteur reprehenderit. Sunt occaecat velit fugiat qui Lorem officia
-        reprehenderit elit cillum occaecat. Lorem laborum adipisicing non qui
-        consectetur do minim nostrud adipisicing qui. Sint et dolore commodo
-        cillum elit magna reprehenderit labore consequat reprehenderit magna
-        consequat qui. Ullamco eu sunt cupidatat laborum. Velit eu ex culpa
-        voluptate proident tempor deserunt. Do pariatur consequat incididunt ad
-        ut velit. Ea nisi eiusmod aliquip laboris nulla in ipsum amet sunt
-        magna. Laboris pariatur nisi in culpa adipisicing sit esse esse. Ullamco
-        dolore mollit minim dolor reprehenderit. Velit ipsum proident nostrud
-        laborum non. Sunt consequat aute quis minim reprehenderit ipsum sunt
-        ipsum.
-      </p>
-      <Heading level={2} size="xl">
-        Hvem kan få uføretrygd?
-      </Heading>
-      <Paragraph>
-        For å ha rett til å få uføretrygd må du som hovedregel oppfylle disse
-        vilkårene:
-      </Paragraph>
-      <ul>
-        <li>Du må være mellom 18 og 67 år.</li>
-        <li>
-          Du må ha vært medlem av folketrygden i de siste tre årene før du ble
-          syk.
-        </li>
-        <li>
-          Sykdom og/eller skade må være hovedårsaken til at inntektsevnen din er
-          nedsatt.
-        </li>
-        <li>
-          Hensiktsmessig behandling og arbeidsrettede tiltak må være
-          gjennomført.
-        </li>
-        <li>
-          Inntektsevnen din må være varig nedsatt med minst 50 prosent på grunn
-          av sykdom og/eller skade.
-        </li>
-      </ul>
-      <Paragraph>
-        Mottar du{" "}
-        <a href="https://www.nav.no/no/person/arbeid/arbeidsavklaringspenger/arbeidsavklaringspenger-aap">
-          arbeidsavklaringspenger
-        </a>{" "}
-        på søknadstidspunktet er det tilstrekkelig at inntektsevnen din er varig
-        nedsatt med minst 40 prosent. Skyldes uførheten en godkjent{" "}
-        <a href="https://www.nav.no/no/person/arbeid/yrkesskade-og-yrkessykdom">
-          yrkesskade eller yrkessykdom
-        </a>
-        , er det tilstrekkelig at inntektsevnen din er varig nedsatt med minst
-        30 prosent.
-      </Paragraph>
-    </article>
+    <div style={{ maxWidth: 600 }}>
+      <Title level={1} size="2xl" spacing>
+        Title lvl 1 2xl
+      </Title>
+      <BodyLong spacing>
+        BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
+        proident. Nostrud consectetur dolore eu nostrud aliqua. Adipisicing
+        labore aliqua qui velit amet ea amet do. Magna anim velit et incididunt.
+        Lorem ad pariatur pariatur quis magna cupidatat. Exercitation officia
+        occaecat occaecat id nulla fugiat laborum elit laboris non est ex
+        nostrud occaecat. Commodo laboris veniam cillum in aute.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Cillum consequat velit est ea voluptate. Et elit irure magna
+        sit consequat mollit excepteur ad non excepteur velit exercitation aute.
+        Fugiat deserunt quis nulla cupidatat esse quis ex. Laborum eiusmod culpa
+        labore eu irure quis laborum. Irure veniam et nostrud do. Quis ut ea est
+        culpa tempor anim.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Dolore commodo ad veniam commodo aute voluptate est officia
+        sunt proident irure consectetur excepteur.
+      </BodyLong>
+      <Title level={2} size="xl" spacing>
+        Title lvl 2 xl
+      </Title>
+      <Ingress spacing>
+        Ingress: Mollit incididunt incididunt officia amet est et non aliqua
+        officia nulla et aute aliqua culpa.
+      </Ingress>
+      <BodyLong spacing>
+        BodyLong: Commodo veniam enim laborum pariatur excepteur commodo do
+        cillum. Nisi elit sunt commodo id in adipisicing cupidatat dolore dolore
+        et tempor cupidatat. Cillum quis sunt in dolor occaecat.
+      </BodyLong>
+      <BodyLong spacing>
+        BodyLong: Irure dolore laborum amet occaecat ex laboris mollit
+        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
+        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
+        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
+      </BodyLong>
+      <BodyLong size="s" spacing>
+        BodyLong small: Irure dolore laborum amet occaecat ex laboris mollit
+        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
+        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
+        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
+      </BodyLong>
+      <BodyShort spacing>
+        BodyShort: Id consectetur velit sunt laboris consequat ullamco
+        incididunt.
+      </BodyShort>
+      <BodyShort size="s" spacing>
+        BodyShort small: Sunt amet officia sit excepteur sit pariatur sit
+        reprehenderit irure ipsum.
+      </BodyShort>
+    </div>
  );
 };
@@ -0,0 +1,14 @@
+const StyleDictionary = require("style-dictionary");
+const kebabCase = require("./kebabCase");
+
+StyleDictionary.registerTransform({
+  name: "name/cti/kebab",
+  type: "name",
+  transformer: (prop, options) =>
+    kebabCase([options.prefix].concat(prop.path).join(" ")),
+});
+
+const StyleDictionaryExtended = StyleDictionary.extend(
+  __dirname + "/config.json"
+);
+StyleDictionaryExtended.buildAllPlatforms();
@@ -0,0 +1,4 @@
+const _ = require("lodash");
+
+module.exports = (string) =>
+  _.kebabCase(string).replace(/(^|-)(\d+)-(x[ls])/g, "$1$2$3");
@@ -0,0 +1,26 @@
+const kebabCase = require("./kebabCase");
+
+describe("kebabCase", () => {
+  [
+    "foo bar",
+    "Foo bar",
+    "foo Bar",
+    "Foo Bar",
+    "FOO BAR",
+    "fooBar",
+    "--foo-bar--",
+    "__foo_bar__",
+  ].forEach((string) =>
+    test(`${string} is converted to foo-bar`, () => {
+      expect(kebabCase(string)).toBe("foo-bar");
+    })
+  );
+
+  test(`spacing 3xl is converted to spacing-3xl`, () => {
+    expect(kebabCase("spacing 3xl")).toBe("spacing-3xl");
+  });
+
+  test(`3xs is converted to 3xs`, () => {
+    expect(kebabCase("3xs")).toBe("3xs");
+  });
+});
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.2.1",
+  "version": "0.3.1",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -17,9 +17,10 @@
    "/src"
  ],
  "scripts": {
-    "build": "style-dictionary build",
+    "build": "node ./build.js",
    "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
-    "token": "style-dictionary build"
+    "token": "style-dictionary build",
+    "test": "jest"
  },
  "repository": {
    "type": "git",
@@ -28,6 +29,8 @@
  },
  "devDependencies": {
    "color": "^3.1.3",
+    "jest": "^26.6.3",
+    "lodash": "^4.17.21",
    "nodemon": "^2.0.6",
    "style-dictionary": "^2.10.2"
  }
@@ -1,5 +1,8 @@
 const Color = require("color");

+const baseFontSize = 16;
+
+const getFontSize = (size) => `${size / baseFontSize}rem`;
 // https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
 const mixColors = (color, step, amount, mixColor) => {
  const saturation = Math.round(Color(color).hsl().color[1]);
@@ -92,7 +95,7 @@ module.exports = {
      border: { value: "{navds.color.gray.40.value}" },
      background: { value: "{navds.color.white.value}" },
      text: {
-        primary: { value: "{navds.color.darkgray.value}" },
+        primary: { value: "{navds.color.gray.90}" },
        inverse: { value: "{navds.color.white.value}" },
        disabled: { value: "{navds.color.gray.60.value}" },
        link: { value: "{navds.color.blue.50.value}" },
@@ -134,35 +137,45 @@ module.exports = {
    },
    font: {
      family: { value: '"Source Sans Pro", Arial, sans-serif' },
+      line: {
+        height: {
+          "2xl": { value: getFontSize(52) },
+          xl: { value: getFontSize(40) },
+          l: { value: getFontSize(36) },
+          m: { value: getFontSize(32) },
+          s: { value: getFontSize(28) },
+          xs: { value: getFontSize(24) },
+          "2xs": { value: getFontSize(20) },
+        },
+      },
      size: {
-        heading: {
-          xxl: { value: "2.5rem" },
-          xl: { value: "2rem" },
-          large: { value: "1.5rem" },
-          medium: { value: "1.25rem" },
-          small: { value: "1.125rem" },
-        },
-        large: { value: "1.25rem" },
-        medium: { value: "1.125rem" },
-        small: { value: "1rem" },
-        xs: { value: "0.875rem" },
-        article: {
-          lead: { value: "1.25rem" },
-          paragraph: { value: "1.125rem" },
+        title: {
+          "2xl": { value: getFontSize(40) },
+          xl: { value: getFontSize(32) },
+          l: { value: getFontSize(28) },
+          m: { value: getFontSize(24) },
+          s: { value: getFontSize(20) },
        },
+        xl: { value: getFontSize(20) },
+        l: { value: getFontSize(18) },
+        m: { value: getFontSize(16) },
+        s: { value: getFontSize(14) },
+      },
+      spacing: {
+        "3xl": { value: getFontSize(40) },
+        "2xl": { value: getFontSize(36) },
+        xl: { value: getFontSize(32) },
+        l: { value: getFontSize(28) },
+        m: { value: getFontSize(24) },
+        s: { value: getFontSize(20) },
+        xs: { value: getFontSize(16) },
+        "2xs": { value: getFontSize(12) },
+        "3xs": { value: getFontSize(8) },
      },
      weight: {
        bold: { value: "600" },
        regular: { value: "400" },
      },
-      line: {
-        height: {
-          large: { value: "1.625rem" },
-          medium: { value: "1.5rem" },
-          small: { value: "1.375rem" },
-          xs: { value: "1.25rem" },
-        },
-      },
    },
    shadow: {
      focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
@@ -1,5 +1,5 @@
 import { ErrorFilled, Settings, SuccessFilled } from "@navikt/ds-icons";
-import { Alert, Heading, Link, Paragraph } from "@navikt/ds-react";
+import { Alert, Title, Link, BodyLong } from "@navikt/ds-react";
 import Alertstripe from "nav-frontend-alertstriper";
 import Chevron from "nav-frontend-chevron";
 import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
@@ -94,11 +94,11 @@ import Proptable from "./props/Proptable";
 import TableOfContents from "./table-of-contents/TableOfContents";

 const components = {
-  h1: (props) => <Heading size="xxl" level={1} {...props} />,
-  h2: (props) => <Heading size="large" level={2} {...props} />,
-  h3: (props) => <Heading size="small" level={3} {...props} />,
-  h4: (props) => <Heading size="small" level={4} {...props} />,
-  p: (props) => <Paragraph size="medium" {...props} />,
+  h1: (props) => <Title size="2xl" level={1} spacing {...props} />,
+  h2: (props) => <Title size="l" level={2} spacing {...props} />,
+  h3: (props) => <Title size="s" level={3} spacing {...props} />,
+  h4: (props) => <Title size="s" level={4} spacing {...props} />,
+  p: (props) => <BodyLong size="m" spacing {...props} />,
  a: (props) => <Link {...props} />,
  code: (props) => <Inline {...props} />,
  SuccessIcon: () => (
@@ -30,7 +30,9 @@ const Header = ({
      <Link href="/">
        <button className={"header__link"}>
          <NavLogo />
-          <span className={"header__link-title"}>NAV Designsystem</span>
+          <span className="header__link-title navds-title navds-title--m">
+            NAV Designsystem
+          </span>
        </button>
      </Link>
    </header>
@@ -67,9 +67,6 @@

 .header__link-title {
  color: white;
-  font-size: var(--navds-font-size-heading-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
 }

 .sidebar {
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { Next } from "@navikt/ds-icons";
-import { Heading } from "@navikt/ds-react";
+import { Title } from "@navikt/ds-react";
 import { PagePropsContext } from "../../pages/_app";
 import "./tableOfContents.css";

@@ -9,12 +9,12 @@ const TableOfContents = () => {

  return (
    <>
-      <Heading size="large" level={2}>
+      <Title size="l" spacing level={2}>
        Innhold
-      </Heading>
+      </Title>
      <ul className={"toc__ul"}>
        {tableOfContents?.map(({ heading, slug }) => (
-          <li key={slug} className={"toc__li"}>
+          <li key={slug} className={"toc__li navds-body-short"}>
            <Next
              aria-label="Pil peker på lenke"
              focusable="false"
@@ -7,8 +7,6 @@
 .toc__li {
  list-style: none;
  margin: 0;
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
  color: var(--navds-color-blue-50);
  display: flex;
  align-items: center;
@@ -250,11 +250,11 @@ const IconPage = () => {
            <Systemtittel>{selectedIcon.name}</Systemtittel>
            <div className="iconPage__modal--wrapper">
              <div>
-                <p className="iconPage__modalTitle">Fargevelger</p>
+                <p className="iconPage__modalTitle navds-label">Fargevelger</p>
                <ColorSwitch onChange={(c) => setColor(c)} />
              </div>
              <div style={{ marginLeft: "2rem" }}>
-                <p className="iconPage__modalTitle">Last ned</p>
+                <p className="iconPage__modalTitle navds-label">Last ned</p>
                <div className="iconPage__modalButton--wrapper">
                  <Button
                    size="small"
@@ -107,9 +107,6 @@

    &Title {
      margin: 0 0 0 0.2rem;
-      font-size: var(--navds-font-size-heading-small);
-      line-height: var(--navds-font-line-height-small);
-      font-weight: var(--navds-font-weight-bold);
    }

    &Icons {
@@ -3,7 +3,7 @@ import Panel from "./../";
 ## Normal

 Paneler brukes til å ramme inn innhold. På hvit bakgrunn bør paneler få en 1px tykk border med farge
-[@navGra20](/resources/colors) (#C6C2BF). Intern avstand fra panelkant til innhold skal være
+[@navGra20](/resources/colors) (#C9C9C9). Intern avstand fra panelkant til innhold skal være
 minimum `16px` (`1rem`).

 <Example>
@@ -260,11 +260,11 @@ const IconPage = () => {
            <Systemtittel>{selectedIcon.name}</Systemtittel>
            <div className="iconPage__modal--wrapper">
              <div>
-                <p className="iconPage__modalTitle">Fargevelger</p>
+                <p className="iconPage__modalTitle navds-label">Fargevelger</p>
                <ColorSwitch onChange={(c) => setColor(c)} />
              </div>
              <div style={{ marginLeft: "2rem" }}>
-                <p className="iconPage__modalTitle">Last ned</p>
+                <p className="iconPage__modalTitle navds-label">Last ned</p>
                <div className="iconPage__modalButton--wrapper">
                  <Button
                    size="small"
@@ -107,9 +107,6 @@

    &Title {
      margin: 0 0 0 0.2rem;
-      font-size: var(--navds-font-size-heading-small);
-      line-height: var(--navds-font-line-height-small);
-      font-weight: var(--navds-font-weight-bold);
    }

    &Icons {
@@ -1,5 +1,5 @@
 import { MDXProvider } from "@mdx-js/react";
-import { Heading, Paragraph } from "@navikt/ds-react";
+import { Title, BodyLong } from "@navikt/ds-react";
 import cl from "classnames";
 import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
@@ -55,12 +55,12 @@ const BetaLayout = (props) => {
                code: (props) => <Codeblock {...props} />,
                inlineCode: (props) => <InlineCode {...props} />,
                Example,
-                h1: (props) => <Heading {...props} level={1} size="xxl" />,
-                h2: (props) => <Heading {...props} level={2} size="xl" />,
-                h3: (props) => <Heading {...props} level={3} size="large" />,
-                h4: (props) => <Heading {...props} level={4} size="medium" />,
-                h5: (props) => <Heading {...props} level={5} size="small" />,
-                p: (props) => <Paragraph {...props} />,
+                h1: (props) => <Title {...props} level={1} size="2xl" />,
+                h2: (props) => <Title {...props} level={2} size="xl" />,
+                h3: (props) => <Title {...props} level={3} size="l" />,
+                h4: (props) => <Title {...props} level={4} size="m" />,
+                h5: (props) => <Title {...props} level={5} size="s" />,
+                p: (props) => <BodyLong {...props} />,
              }}
            >
              {props.children}
@@ -1,91 +0,0 @@
---
-title: Typografi
-rank: 1
---
-
-import { Heading, Text, Paragraph, Lead } from "@navikt/ds-react";
-
-# Typografi
-
-NAVs font på nett er Google-fonten Source Sans Pro, med Arial og sans-serif som fallback.
-
-```css
-font-family: "Source Sans Pro", Arial, sans-serif;
-```
-
-Fonten kan lastes ned her: https://fonts.google.com/specimen/Source+Sans+Pro
-
-## Komponenter
-
-Foreslått tredeling av typografi-komponenter: overskrifter, artikkel-stiler, småtester.
-
-### Heading
-
-Merk at størrelse er frikoblet hierarkisk nivå. (Her gir det mening å si noe om tiltent bruk i ulike sammenhenger som eksterne flater, saksbehandlingsløsninger osv.)
-
-<Example>
-  <Heading level={1} size="xxl">
-    Heading xxl 40px semibold (line-height: 44px)
-  </Heading>
-  <Heading level={2} size="xl">
-    Heading xl 32px semibold (line-height: 36px)
-  </Heading>
-  <Heading level={3} size="large">
-    Heading large 24px semibold (line-height: 28px)
-  </Heading>
-  <Heading level={4} size="medium">
-    Heading medium 20px semibold (line-height: 24px)
-  </Heading>
-  <Heading level={5} size="small">
-    Heading small 18px semibold (line-height: 22px)
-  </Heading>
-</Example>
-
-Spørsmål: Burde overskriftene ha margin?
-
-### Text
-
-Text er en typografikomponent som brukes for alle tekster som ikke er en overskirft, eller er en del av en artikkel (paragraf o.l.).
-
-<Example style={{ display: "grid" }}>
-  <Text size="large">Text large 20px normal (line-height: 26px)</Text>
-  <Text size="medium">Text medium 18px normal (line-height: 24px)</Text>
-  <Text size="small">Text small 16px normal (line-height: 22px)</Text>
-  <Text size="xs">Text xs 14px normal (line-height: 20px)</Text>
-</Example>
-
-### Paragraph
-
-Paragraph er komponenten for brødtekst.
-
-<Example>
-  <Paragraph>Heading xxl 40px semibold</Paragraph>
-</Example>
-
-### Lead
-
-Lead er komponenten for ingress i artikler.
-
-<Example>
-  <Lead>Heading xxl 40px semibold</Lead>
-</Example>
-
-### Flere?
-
-## Størrelse
-
-Alle font-størrelser faller innenfor denne skalaen:
-
-<span style="font-size: 14px">14px, </span>
-<span style="font-size: 16px">16px, </span>
-<span style="font-size: 18px">18px, </span>
-<span style="font-size: 20px">20px, </span>
-<span style="font-size: 24px">24px, </span>
-<span style="font-size: 32px">32px, </span>
-<span style="font-size: 40px">40px</span>
-
-Spørsmål: For øyeblikket skalerer tekstene avhengig av skjembredde. Jeg mener vi ikke trenger den ekstra kompleksiteten.
-
-## Linjehøyde
-
-Spørsmål: Burde linjehøyden heller være en relativ størrelse (f.eks. 1.3)?
@@ -17361,6 +17361,28 @@ natural-compare@^1.4.0:
  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

+nav-frontend-core@^5.0.11, nav-frontend-core@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/nav-frontend-core/-/nav-frontend-core-5.1.1.tgz#564df53fdfa61f084950841bd6e3668fab41bfeb"
+  integrity sha512-oK6VFJggnMIHsEBWXArsv+d9IO9uqUc1dp4kplHrRmTeYT2tN+pb1DA6BUOHXplGe062DIe241zYz4/lrGsmAg==
+
+nav-frontend-knapper-style@^1.0.17:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/nav-frontend-knapper-style/-/nav-frontend-knapper-style-1.1.2.tgz#700c3ee14f8e757d0d4e706a4b1ee5488eae9a40"
+  integrity sha512-A8y4PkjAUBTjs4HzWJuGvk1rwXHE5Slz2SsnedqPt79Oyy+/msp+f/WyIRSsCyzp2qcMQyhcj1JSccqglpBbBA==
+
+nav-frontend-knapper@^2.0.32:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/nav-frontend-knapper/-/nav-frontend-knapper-2.1.4.tgz#8eea6a82a5f014987e22a4aba02f847a1382e220"
+  integrity sha512-qq4d6mZ1wlvo62cNe4rwWbTgupEyJlaQzZNuYLWCCkIbSDNR6vz/pkfAue57lsFgeAXAWK4YC13r/8MbMu6f+w==
+
+nav-frontend-typografi-style@^1.0.35:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/nav-frontend-typografi-style/-/nav-frontend-typografi-style-1.1.1.tgz#cfcfd6c9650ef3a1176e0954645feaf494723808"
+  integrity sha512-AaXOmWMX+7kU/bFlzKgb4fLzUBEqedZfV00ri8TChWOoP+fR9t9cdBaWKkFiMQqlttA6n6IRrTCKYXhuquQWzQ==
+  dependencies:
+    nav-frontend-core "^5.1.1"
+
 needle@^2.5.2:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/needle/-/needle-2.6.0.tgz#24dbb55f2509e2324b4a99d61f413982013ccdbe"
Author	SHA1	Message	Date
github-actions[bot]	3795a1e8fa	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.1 - @navikt/ds-react@0.5.1 - @navikt/ds-tokens@0.3.1	2021-06-02 09:19:08 +00:00
KenandAndreas Nordahl	c526873cd3	Vnext: Nytt Typo-oppsett(#1079 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-06-02 11:04:12 +02:00
github-actions[bot]	8ee6ce93e4	Lerna versionbump [ci skip] - @navikt/ds-css@0.4.2 - @navikt/ds-react@0.4.3	2021-05-28 11:23:29 +00:00
KenandAndreas Nordahl	a086727d19	Vnext: paneler komponent (#1108 ) * laget panel komponent * default panel border to false Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-05-28 13:08:14 +02:00
Ken	2e9099c1a9	Update Panel.overview.mdx	2021-05-26 13:27:17 +02:00