From ddf13d783b4c34f5c99ed6d8fd73cb1a2f7616fc Mon Sep 17 00:00:00 2001
From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:42:13 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Box:=20Forenkling=20av=20C?=
 =?UTF-8?q?SS-variabler=20(#2279)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/green-laws-grin.md                 |   5 +
 @navikt/core/css/primitives/box.css           | 108 ++--
 .../core/react/src/layout/box/Box.stories.tsx | 507 +++++++++---------
 yarn.lock                                     |  38 +-
 4 files changed, 308 insertions(+), 350 deletions(-)
 create mode 100644 .changeset/green-laws-grin.md

diff --git a/.changeset/green-laws-grin.md b/.changeset/green-laws-grin.md
new file mode 100644
index 0000000000..b4da8f4f69
--- /dev/null
+++ b/.changeset/green-laws-grin.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+:recycle: Box: Forenkling av CSS-variabler
diff --git a/@navikt/core/css/primitives/box.css b/@navikt/core/css/primitives/box.css
index b29a21649f..78faefe1d1 100644
--- a/@navikt/core/css/primitives/box.css
+++ b/@navikt/core/css/primitives/box.css
@@ -1,19 +1,19 @@
 .navds-box {
   --__ac-box-padding-xs: initial;
-  --__ac-box-padding-sm: initial;
-  --__ac-box-padding-md: initial;
-  --__ac-box-padding-lg: initial;
-  --__ac-box-padding-xl: initial;
-  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
+  --__ac-box-padding-md: var(--__ac-box-padding-sm);
+  --__ac-box-padding-lg: var(--__ac-box-padding-md);
+  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
   --__ac-box-padding-inline-xs: initial;
-  --__ac-box-padding-block-sm: initial;
-  --__ac-box-padding-inline-sm: initial;
-  --__ac-box-padding-block-md: initial;
-  --__ac-box-padding-inline-md: initial;
-  --__ac-box-padding-block-lg: initial;
-  --__ac-box-padding-inline-lg: initial;
-  --__ac-box-padding-block-xl: initial;
-  --__ac-box-padding-inline-xl: initial;
+  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
+  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
+  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
+  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
+  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
+  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
   --__ac-box-padding: var(--__ac-box-padding-xs);
   --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -22,10 +22,10 @@
   --__ac-box-shadow: initial;
   --__ac-box-border-width: initial;
   --__ac-box-border-radius-xs: initial;
-  --__ac-box-border-radius-sm: initial;
-  --__ac-box-border-radius-md: initial;
-  --__ac-box-border-radius-lg: initial;
-  --__ac-box-border-radius-xl: initial;
+  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
+  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
+  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
+  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -40,78 +40,36 @@
 
 @media (min-width: 480px) {
   .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
-    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
-    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+    --__ac-box-padding: var(--__ac-box-padding-sm);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-md,
-      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-md,
-      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-md,
-      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
-    );
+    --__ac-box-padding: var(--__ac-box-padding-md);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
   }
 }
 
 @media (min-width: 1024px) {
   .navds-box {
-    --__ac-box-padding: var(
-      --__ac-box-padding-lg,
-      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
-    );
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-lg,
-      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-lg,
-      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-lg,
-      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
-    );
+    --__ac-box-padding: var(--__ac-box-padding-lg);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .navds-box {
-    --__ac-box-padding: var(
-      --__ac-box-padding-xl,
-      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
-    );
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-xl,
-      var(
-        --__ac-box-padding-inline-lg,
-        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
-      )
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-xl,
-      var(
-        --__ac-box-padding-block-lg,
-        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
-      )
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-xl,
-      var(
-        --__ac-box-border-radius-lg,
-        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
-      )
-    );
+    --__ac-box-padding: var(--__ac-box-padding-xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
diff --git a/@navikt/core/react/src/layout/box/Box.stories.tsx b/@navikt/core/react/src/layout/box/Box.stories.tsx
index 777468d5ed..361032b00b 100644
--- a/@navikt/core/react/src/layout/box/Box.stories.tsx
+++ b/@navikt/core/react/src/layout/box/Box.stories.tsx
@@ -6,23 +6,22 @@ import { HGrid, HStack, VStack } from "../..";
 import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 
-export default {
+const meta: Meta<typeof Box> = {
   title: "ds-react/Primitives/Box",
   component: Box,
-} satisfies Meta<typeof Box>;
-
-export const Default = {
-  render: () => (
-    <Box>
-      <BodyLong>
-        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
-        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
-        Proident pariatur proident pariatur magna consequat velit id commodo
-        quis sunt tempor ullamco aliquip pariatur.
-      </BodyLong>
-    </Box>
-  ),
 };
+export default meta;
+
+export const Default = () => (
+  <Box>
+    <BodyLong>
+      This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+      nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+      Proident pariatur proident pariatur magna consequat velit id commodo quis
+      sunt tempor ullamco aliquip pariatur.
+    </BodyLong>
+  </Box>
+);
 
 const Card = ({
   background,
@@ -44,43 +43,38 @@ const Card = ({
   </Box>
 );
 
-export const AsCard = {
-  render: () => {
-    return (
-      <HStack gap="4" justify="center">
-        <Card>
-          <h1>Card one</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-        <Card>
-          <h1>Card two</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-        <Card>
-          <h1>Card three</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-      </HStack>
-    );
-  },
-};
+export const AsCard = () => (
+  <HStack gap="4" justify="center">
+    <Card>
+      <h1>Card one</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+    <Card>
+      <h1>Card two</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+    <Card>
+      <h1>Card three</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+  </HStack>
+);
 
-export const ThemingDemo = {
-  render: () => {
-    const LinkCard = () => {
-      return (
-        <>
-          <style>
-            {`
+export const ThemingDemo = () => {
+  const LinkCard = () => {
+    return (
+      <>
+        <style>
+          {`
             .link-card {
               color: var(--navds-color-text-primary);
               text-decoration: none;
@@ -103,99 +97,99 @@ export const ThemingDemo = {
               transition: transform 200ms;
             }
           `}
-          </style>
+        </style>
+        <Box
+          as="a"
+          href="#"
+          className="link-card"
+          borderRadius="small"
+          borderColor="border-default"
+          borderWidth="1"
+          padding="4"
+          onClick={() => alert("Clicked!")}
+        >
+          <HStack gap="4" align="center">
+            <VStack gap="2">
+              <Heading size="medium">
+                LinkCard som bruker Box, HStack og VStack
+              </Heading>
+              <BodyLong>This truly is inside a box!</BodyLong>
+            </VStack>
+            <ChevronRightIcon fontSize={24} className="link-card__chevron" />
+          </HStack>
+        </Box>
+      </>
+    );
+  };
+
+  const ChatBubble = () => {
+    return (
+      <>
+        <Box
+          background="surface-neutral-subtle"
+          shadow="xsmall"
+          padding="4"
+          borderRadius="xlarge xlarge xlarge 0"
+        >
+          <VStack gap="2">
+            <Detail>BOX • 01.01.21 14:00</Detail>
+            <BodyLong>
+              Hei! Dette er en chatbobble som bruker Box som base!
+            </BodyLong>
+          </VStack>
+        </Box>
+      </>
+    );
+  };
+
+  const PricePill = () => {
+    return (
+      <>
+        <style>
+          {`
+              .old-price {
+                text-decoration: line-through;
+              }
+            `}
+        </style>
+        <HStack>
           <Box
-            as="a"
-            href="#"
-            className="link-card"
-            borderRadius="small"
-            borderColor="border-default"
+            background="surface-success-subtle"
+            shadow="xsmall"
             padding="4"
-            onClick={() => alert("Clicked!")}
+            borderRadius="full 0 0 full"
           >
-            <HStack gap="4" align="center">
-              <VStack gap="2">
-                <Heading size="medium">
-                  LinkCard som bruker Box, HStack og VStack
-                </Heading>
-                <BodyLong>This truly is inside a box!</BodyLong>
-              </VStack>
-              <ChevronRightIcon fontSize={24} className="link-card__chevron" />
-            </HStack>
+            <VStack align="center">
+              <Detail>Episk ny pris</Detail>
+              <Heading size="medium">889.99 kr</Heading>
+            </VStack>
           </Box>
-        </>
-      );
-    };
-
-    const ChatBubble = () => {
-      return (
-        <>
           <Box
-            background="surface-neutral-subtle"
+            background="surface-danger-subtle"
             shadow="xsmall"
             padding="4"
-            borderRadius="xlarge xlarge xlarge 0"
+            borderRadius="0 full full 0"
           >
-            <VStack gap="2">
-              <Detail>BOX • 01.01.21 14:00</Detail>
-              <BodyLong>
-                Hei! Dette er en chatbobble som bruker Box som base!
-              </BodyLong>
+            <VStack align="center">
+              <Detail>Førpris</Detail>
+              <Heading className="old-price" size="medium">
+                399.99 kr
+              </Heading>
             </VStack>
           </Box>
-        </>
-      );
-    };
-
-    const PricePill = () => {
-      return (
-        <>
-          <style>
-            {`
-              .old-price {
-                text-decoration: line-through;
-              }
-            `}
-          </style>
-          <HStack>
-            <Box
-              background="surface-success-subtle"
-              shadow="xsmall"
-              padding="4"
-              borderRadius="full 0 0 full"
-            >
-              <VStack align="center">
-                <Detail>Episk ny pris</Detail>
-                <Heading size="medium">889.99 kr</Heading>
-              </VStack>
-            </Box>
-            <Box
-              background="surface-danger-subtle"
-              shadow="xsmall"
-              padding="4"
-              borderRadius="0 full full 0"
-            >
-              <VStack align="center">
-                <Detail>Førpris</Detail>
-                <Heading className="old-price" size="medium">
-                  399.99 kr
-                </Heading>
-              </VStack>
-            </Box>
-          </HStack>
-        </>
-      );
-    };
-
-    return (
-      <VStack gap="8">
-        <Card>Dette er et Card som bruker Box som base</Card>
-        <LinkCard />
-        <ChatBubble />
-        <PricePill />
-      </VStack>
+        </HStack>
+      </>
     );
-  },
+  };
+
+  return (
+    <VStack gap="8">
+      <Card>Dette er et Card som bruker Box som base</Card>
+      <LinkCard />
+      <ChatBubble />
+      <PricePill />
+    </VStack>
+  );
 };
 
 export const PaddingBreakpoints = {
@@ -203,14 +197,14 @@ export const PaddingBreakpoints = {
     <div>
       <Box
         padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
-        borderColor="border-default"
+        background="surface-neutral"
       >
-        <BodyLong>
+        <Box background="surface-alt-3-subtle">
           This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
           nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
           Proident pariatur proident pariatur magna consequat velit id commodo
           quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+        </Box>
       </Box>
     </div>
   ),
@@ -222,67 +216,74 @@ export const PaddingBreakpointsInherit1 = {
       <Box
         padding={{ xs: "2" }}
         paddingInline={{ md: "24 0" }}
-        borderColor="border-default"
+        background="surface-neutral"
       >
-        <BodyLong>
+        <Box background="surface-alt-3-subtle">
           This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
           nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
           Proident pariatur proident pariatur magna consequat velit id commodo
           quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+        </Box>
       </Box>
     </div>
   ),
 };
-export const PaddingBreakpointsInherit2 = {
-  render: () => (
-    <div>
-      <Box
-        padding={{ xs: "2", sm: "3" }}
-        paddingInline={{ sm: "4 0", md: "24 0" }}
-        borderColor="border-default"
-      >
-        <BodyLong>
-          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
-          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
-          Proident pariatur proident pariatur magna consequat velit id commodo
-          quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+export const PaddingBreakpointsInherit2 = () => (
+  <div>
+    <Box
+      padding={{ xs: "2", sm: "3" }}
+      paddingInline={{ sm: "4 0", md: "24 0" }}
+      background="surface-neutral"
+    >
+      <Box background="surface-alt-3-subtle">
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+        Proident pariatur proident pariatur magna consequat velit id commodo
+        quis sunt tempor ullamco aliquip pariatur.
       </Box>
-    </div>
-  ),
-};
+    </Box>
+  </div>
+);
 
-export const Padding = {
-  render: () => (
-    <>
-      <style>
-        {`
-          .navds-box {
-            width: fit-content;
-          }
-        `}
-      </style>
-      <VStack align="center">
-        <Box padding="20" borderColor="border-default">
-          <BodyLong>Padding all around</BodyLong>
-        </Box>
-        <Box padding="1" paddingBlock="20 0" borderColor="border-default">
-          <BodyLong>Padding to the North</BodyLong>
-        </Box>
-        <Box padding="1" paddingInline="0 20" borderColor="border-default">
-          <BodyLong>Padding to the East</BodyLong>
-        </Box>
-        <Box padding="1" paddingBlock="0 20" borderColor="border-default">
-          <BodyLong>Padding to the South</BodyLong>
-        </Box>
-        <Box padding="1" paddingInline="20 0" borderColor="border-default">
-          <BodyLong>Padding to the West</BodyLong>
+export const Padding = () => (
+  <VStack align="center" gap="2">
+    <Box padding="20" background="surface-alt-3-subtle">
+      <BodyLong>Padding all around</BodyLong>
+    </Box>
+    <Box padding="1" paddingBlock="20 0" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the North</BodyLong>
+    </Box>
+    <Box padding="1" paddingInline="0 20" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the East</BodyLong>
+    </Box>
+    <Box padding="1" paddingBlock="0 20" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the South</BodyLong>
+    </Box>
+    <Box padding="1" paddingInline="20 0" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the West</BodyLong>
+    </Box>
+  </VStack>
+);
+
+export const BoxInBox = () => (
+  <div>
+    <Box
+      padding={{ xs: "2", sm: "3" }}
+      paddingInline={{ sm: "4 1" }}
+      background="surface-alt-1-moderate"
+      shadow="small"
+      borderWidth="2"
+      borderColor="border-alt-3"
+      borderRadius="large"
+    >
+      <Box padding="8" paddingInline={{ sm: "12" }} background="bg-default">
+        <Box background="surface-alt-3-subtle">
+          CSS variables on a Box should not be inherited by children.
         </Box>
-      </VStack>
-    </>
-  ),
-};
+      </Box>
+    </Box>
+  </div>
+);
 
 export const WithHGrid = () => {
   return (
@@ -308,77 +309,71 @@ export const WithHGrid = () => {
   );
 };
 
-export const BorderWidth = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="1 2 3 4"
-        borderColor="border-strong"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="5 2 4 1"
-        borderColor="border-strong"
-        borderRadius="large"
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const BorderWidth = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="1 2 3 4"
+      borderColor="border-strong"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="5 2 4 1"
+      borderColor="border-strong"
+      borderRadius="large"
+    >
+      Box
+    </Box>
+  </VStack>
+);
 
-export const BorderRadius = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-        borderRadius="small medium large xlarge"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-        borderRadius={{
-          xs: "small medium large xlarge",
-          md: "medium small large full",
-          lg: "xlarge large",
-        }}
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const BorderRadius = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+      borderRadius="small medium large xlarge"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+      borderRadius={{
+        xs: "small medium large xlarge",
+        md: "medium small large full",
+        lg: "xlarge large",
+      }}
+    >
+      Box
+    </Box>
+  </VStack>
+);
 
-export const PaddingDemo = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="0"
-        paddingInline={{ xs: "20", lg: "10" }}
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const PaddingDemo = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="0"
+      paddingInline={{ xs: "20", lg: "10" }}
+    >
+      Box
+    </Box>
+  </VStack>
+);
diff --git a/yarn.lock b/yarn.lock
index 21dacc60bb..e31e81bb19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3585,7 +3585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.5.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3612,8 +3612,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.4.1
-    "@navikt/ds-tokens": ^5.4.1
+    "@navikt/ds-css": ^5.5.0
+    "@navikt/ds-tokens": ^5.5.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3631,7 +3631,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.4.1
+    "@navikt/ds-css": 5.5.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3655,11 +3655,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.4.1, @navikt/ds-css@^5.4.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.5.0, @navikt/ds-css@^5.5.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.4.1
+    "@navikt/ds-tokens": ^5.5.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3672,13 +3672,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.4.1, @navikt/ds-react@^5.4.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.5.0, @navikt/ds-react@^5.5.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.4.1
-    "@navikt/ds-tokens": ^5.4.1
+    "@navikt/aksel-icons": ^5.5.0
+    "@navikt/ds-tokens": ^5.5.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3712,11 +3712,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.4.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.4.1
+    "@navikt/ds-tokens": ^5.5.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3727,7 +3727,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8657,11 +8657,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.4.1
-    "@navikt/ds-css": ^5.4.1
-    "@navikt/ds-react": ^5.4.1
-    "@navikt/ds-tailwind": ^5.4.1
-    "@navikt/ds-tokens": ^5.4.1
+    "@navikt/aksel-icons": ^5.5.0
+    "@navikt/ds-css": ^5.5.0
+    "@navikt/ds-react": ^5.5.0
+    "@navikt/ds-tailwind": ^5.5.0
+    "@navikt/ds-tokens": ^5.5.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -23786,8 +23786,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.4.1
-    "@navikt/ds-react": 5.4.1
+    "@navikt/ds-css": 5.5.0
+    "@navikt/ds-react": 5.5.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0