Merge 52334e5 into 19b16ff

.changeset/gorgeous-emus-exercise.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-tailwind": minor
+"@navikt/ds-tokens": minor
+---
+
+Breakpoint-tokens for ds-tokens og ds-tailwind

@navikt/core/tailwind/src/getBreakpoints.ts

@@ -0,0 +1,11 @@
+import Reducer from "./reducer";
+
+export const getBreakpoints = (tokens: { [key: string]: string | number }) => {
+  const breakpoints = Reducer(tokens, ["breakpoint"]);
+
+  return Object.keys(breakpoints)
+    .filter((key) => !key.includes("xs") && !key.includes("-down"))
+    .reduce((cur, key) => {
+      return Object.assign(cur, { [key]: breakpoints[key] });
+    }, {});
+};

@navikt/core/tailwind/src/index.ts

@@ -2,6 +2,7 @@
 import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
 import { getColors } from "./colors";
+import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
 import Reducer from "./reducer";
 
@@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce(
 const config = {
   theme: {
     colors: getColors(tokens),
+    screen: getBreakpoints(tokens),
     extend: {
       spacing: Reducer(tokens, ["spacing"]),
       zIndex: Reducer(tokens, ["z-index"]),

@navikt/core/tokens/docs.json

@@ -1,4 +1,15 @@
 {
+  "breakpoints": [
+    { "name": "--a-breakpoint-xs", "value": "0" },
+    { "name": "--a-breakpoint-sm", "value": "480px" },
+    { "name": "--a-breakpoint-sm-down", "value": "479px" },
+    { "name": "--a-breakpoint-md", "value": "768px" },
+    { "name": "--a-breakpoint-md-down", "value": "767px" },
+    { "name": "--a-breakpoint-lg", "value": "1024px" },
+    { "name": "--a-breakpoint-lg-down", "value": "1023px" },
+    { "name": "--a-breakpoint-xl", "value": "1280px" },
+    { "name": "--a-breakpoint-xl-down", "value": "1279px" }
+  ],
   "font": [
     {
       "name": "--a-font-family",

@navikt/core/tokens/src/index.js

@@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`;
 
 module.exports = {
   a: {
+    breakpoint: {
+      xs: { value: "0" },
+      sm: { value: "480px" },
+      "sm-down": { value: "479px" },
+      md: { value: "768px" },
+      "md-down": { value: "767px" },
+      lg: { value: "1024px" },
+      "lg-down": { value: "1023px" },
+      xl: { value: "1280px" },
+      "xl-down": { value: "1279px" },
+    },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -63,7 +63,7 @@ export const Hamburger = () => {
           aria={{ modal: true }}
           overlayClassName="header-modal__overlay"
           contentLabel="Meny"
-          className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
+          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden"
         >
           <nav aria-label="hovedmeny">
             <ul>

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -55,7 +55,7 @@ export const Header = ({
         })}
       >
         <div className="mx-auto flex h-full max-w-screen-2xl items-center  pr-4 pt-3 lg:pr-6">
-          <div className="xs:pr-6 xs:pl-4 flex h-11 items-center pr-4 pl-4">
+          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
             <Link
               href="/"
               passHref

aksel.nav.no/website/components/layout/page-templates/AkselPrinsipp.tsx

@@ -73,7 +73,7 @@ const AkselPrinsippTemplate = ({
       >
         <article className="overflow-x-clip">
           <div
-            className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
+            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
               "pb-32": mainPage,
             })}
           >
@@ -123,7 +123,7 @@ const AkselPrinsippTemplate = ({
               "bg-gray-100": mainPage,
             })}
           >
-            <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
               <div className="pb-16 md:pb-32">
                 <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
                   <TableOfContents
@@ -135,7 +135,7 @@ const AkselPrinsippTemplate = ({
                     {data?.hero_bilde && (
                       <Bilde
                         node={data.hero_bilde as any}
-                        className="xs:-mt-72 -mt-36 mb-10"
+                        className="-mt-36 mb-10 sm:-mt-72"
                       />
                     )}
                     <SanityBlockContent

aksel.nav.no/website/components/layout/page-templates/WithSidebar.tsx

@@ -77,7 +77,7 @@ export const WithSidebar = ({
             <main
               tabIndex={-1}
               id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar xs:pl-6 xs:pr-6 relative w-full px-4 focus:outline-none md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
             >
               <div
                 className={cl(
@@ -145,12 +145,12 @@ export const WithSidebar = ({
                   </div>
                 )}
                 {variant === "landingPage" && (
-                  <div className="xs:block pointer-events-none absolute top-0 right-0 hidden">
+                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
                     <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
                   </div>
                 )}
               </div>
-              <div className={cl("xs:px-6 md:px-10", { flex: withToc })}>
+              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                 {withToc && (
                   <TableOfContentsv2
                     changedState={pageProps["content"]}

aksel.nav.no/website/components/layout/page-templates/wrappers/NoSidebar.tsx

@@ -19,7 +19,7 @@ export const NoSidebarLayout = ({
         id="hovedinnhold"
         className="aksel-artikkel bg-gray-50 pt-4 focus:outline-none"
       >
-        <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
           <article className="pt-12 pb-16 md:pb-32">{children}</article>
         </div>
         {aside}

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -43,7 +43,7 @@ const Element = ({
   return (
     <figure
       className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[440px]",
+        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
         {
           "basis-full": block?.fullwidth,
           "max-w-sm": !block?.fullwidth,

aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx

@@ -28,7 +28,7 @@ const Bilde = ({
     <>
       <figure
         className={cl("m-0 mb-8 flex flex-col", style.figure, className, {
-          "sm:max-w-text": node?.small,
+          "md:max-w-text": node?.small,
         })}
       >
         <div

aksel.nav.no/website/components/sanity-modules/cards/InnholdsKort.tsx

@@ -15,7 +15,7 @@ const InnholdsKort = ({
   }
 
   return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium xs:p-8 group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring">
+    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
       <Heading
         spacing
         size="small"

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -27,7 +27,7 @@ const RelatertInnhold = ({
       className={cl(
         "relatedCard",
         "mb-8 max-w-4xl gap-4",
-        "xs:grid-cols-2 grid w-full"
+        "grid w-full sm:grid-cols-2"
       )}
     >
       {node.lenker.map((x) => (

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -116,7 +116,7 @@ const ComponentExamples = ({
                     title="Kode-eksempler"
                   />
                 </div>
-                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />
                   <Link
                     href={`/eksempler/${node.dir.title}/${fil.navn.replace(

aksel.nav.no/website/components/sanity-modules/icon-search/ModalContent.tsx

@@ -74,7 +74,7 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
 
   return (
     <div className="flex min-w-[300px] max-w-xl shrink flex-col">
-      <div className="xs:flex-row mr-16 inline-flex flex-col justify-between gap-4">
+      <div className="mr-16 inline-flex flex-col justify-between gap-4 sm:flex-row">
         <div>
           <Heading
             spacing

aksel.nav.no/website/components/sanity-modules/tips/index.tsx

@@ -17,7 +17,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
       <div
         className={cl(
           style.tips,
-          "linear xs:px-8 my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4"
+          "linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8"
         )}
       >
         <Detail
@@ -71,7 +71,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
     <div
       className={cl(
         style.tips,
-        "xs:px-6 my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)]"
+        "my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)] sm:px-6"
       )}
     >
       <Detail

aksel.nav.no/website/components/website-modules/TOCv2.tsx

@@ -131,7 +131,7 @@ export function TableOfContentsv2({
   return (
     <aside
       className={cl(
-        "algolia-ignore-index xs:-mr-6 sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start md:-mr-10",
+        "algolia-ignore-index sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start sm:-mr-6 md:-mr-10",
         {
           hidden: !renderToc,
           "hidden xl:flex": renderToc,

aksel.nav.no/website/pages/god-praksis/[slug].tsx

@@ -115,7 +115,7 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
                 />
                 <div
                   className={cl(
-                    "max-w xs:w-96 relative z-10 mb-2 h-fit xl:mt-[10px]",
+                    "max-w relative z-10 mb-2 h-fit sm:w-96 xl:mt-[10px]",
                     { invisible: !hasAnsvarlig }
                   )}
                   aria-hidden={!hasAnsvarlig}

aksel.nav.no/website/pages/index.tsx

@@ -111,7 +111,7 @@ const introcards = [
 
 const IntroCards = () => {
   return (
-    <ul className="centered-layout xs:mb-36 mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 md:gap-6">
+    <ul className="centered-layout mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 sm:mb-36 md:gap-6">
       {introcards.map(({ icon: Icon, title, desc, href }) => (
         <li key={title} className="grid">
           <Link
@@ -126,7 +126,7 @@ const IntroCards = () => {
               )
             }
           >
-            <span className="xs:flex items-center gap-2">
+            <span className="items-center gap-2 sm:flex">
               <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
               <span className="text-xl font-semibold group-hover:underline">
                 {title}
@@ -175,7 +175,7 @@ const GetStarted = ({
         style={{
           gridTemplateColumns: `repeat(${links.length}, minmax(0, 1fr))`,
         }}
-        className="xs:grid mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 md:gap-8"
+        className="mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 sm:grid md:gap-8"
       >
         {links.map((x) => (
           <li key={x.title}>
@@ -270,11 +270,11 @@ const Forside = ({
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-8">
-            <div className="centered-layout xs:mt-36 xs:mb-18 xs:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center">
+            <div className="centered-layout sm:mb-18 sm:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36">
               <Heading
                 level="1"
                 size="xlarge"
-                className="text-deepblue-800 xs:text-[3.5rem] leading-[1.2]"
+                className="text-deepblue-800 leading-[1.2] sm:text-[3.5rem]"
               >
                 {page.title}
               </Heading>
@@ -291,7 +291,7 @@ const Forside = ({
                 <Heading
                   level="2"
                   size="xlarge"
-                  className="text-deepblue-800 xs:text-[3.25rem] mb-8 text-center"
+                  className="text-deepblue-800 mb-8 text-center sm:text-[3.25rem]"
                 >
                   God praksis
                 </Heading>

aksel.nav.no/website/pages/produktbloggen/[slug].tsx

@@ -88,7 +88,7 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose text-center">
@@ -195,7 +195,7 @@ const Page = ({
               <Heading level="2" size="large">
                 Flere blogginnlegg
               </Heading>
-              <ul className="mt-12 grid gap-x-6 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+              <ul className="mt-12 grid gap-x-6 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                 {morePosts.map((post) => (
                   <BloggCard key={post._id} blog={post} />
                 ))}

aksel.nav.no/website/pages/produktbloggen/index.tsx

@@ -72,7 +72,7 @@ const Page = (props: PageProps): JSX.Element => {
                 <Heading level="2" size="xlarge" className="text-deepblue-800">
                   Flere blogginnlegg
                 </Heading>
-                <ul className="mt-12 grid gap-x-3 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+                <ul className="mt-12 grid gap-x-3 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                   {remainingPosts.map((blog) => (
                     <BloggCard key={blog._id} blog={blog} />
                   ))}

aksel.nav.no/website/pages/side/[slug].tsx

@@ -41,7 +41,7 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 bg-gray-50 pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel bg-gray-50 pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose">

aksel.nav.no/website/styles/layout.css

@@ -7,13 +7,13 @@
 }
 
 .content-box {
-  @apply max-w-content-w-padding xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply max-w-content-w-padding w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .content-box--full {
-  @apply xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .centered-layout {
-  @apply xs:px-6 mx-auto w-full px-4;
+  @apply mx-auto w-full px-4 sm:px-6;
 }

aksel.nav.no/website/styles/utilities.css

@@ -15,23 +15,23 @@ p.override-text-no-max {
 }
 
 .dynamic-wrapper {
-  @apply max-w-aksel xs:w-[90%] mx-auto;
+  @apply max-w-aksel mx-auto sm:w-[90%];
 }
 
 .dynamic-wrapper-prose {
-  @apply xs:w-[90%] mx-auto max-w-prose;
+  @apply mx-auto max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-left {
-  @apply xs:w-[90%] max-w-prose;
+  @apply max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-2xl {
-  @apply xs:w-[90%] mx-auto max-w-2xl;
+  @apply mx-auto max-w-2xl sm:w-[90%];
 }
 
 .card-grid-3-1 {
-  @apply grid gap-3 sm:grid-cols-2 md:gap-6 lg:grid-cols-3;
+  @apply grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3;
 }
 
 .card-grid-2-1 {

aksel.nav.no/website/tailwind.config.js

@@ -8,15 +8,6 @@ module.exports = {
     "./stories/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    /* Flytt ut fra extend og refactor bruk av screen */
-    screens: {
-      xs: "480px",
-      sm: "648px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1440px",
-    },
     extend: {
       colors: {
         pink: {