From 4ae2d938a0c813c12cc8a12b53cd638e8b82f105 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 13:29:14 +0100
Subject: [PATCH 01/14] :sparkles: Added brandvolume support in theme-component

---
 @navikt/core/react/src/provider/theme/AkselTheme.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
index 4fefbe06b7..1c0611d584 100644
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
@@ -3,7 +3,17 @@ import React, { forwardRef } from "react";
 import { createContext } from "../../util/create-context";
 
 type AkselThemeContext = {
+  /**
+   * Available color-themes
+   * @default "light"
+   */
   theme: "light" | "dark";
+  /**
+   * Brand volume
+   * @default "low"
+   * This is experimental and subject name changes
+   */
+  volume?: "high" | "low";
 };
 
 const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
@@ -27,6 +37,7 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
       children,
       className,
       theme = context?.theme ?? "light",
+      volume = context?.volume ?? "low",
       hasBackground: hasBackgroundProp = true,
     } = props;
 
@@ -41,6 +52,7 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
           ref={ref}
           className={cl("navds-theme", className, theme)}
           data-background={hasBackground}
+          data-volume={volume}
         >
           {children}
         </div>

From 890f44c65ca702b426d59ca46f39bdfe11b549c8 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 13:34:48 +0100
Subject: [PATCH 02/14] :memo: Added brandvolume story to readmore

---
 .../react/src/provider/theme/AkselTheme.tsx   |  2 +-
 .../react/src/read-more/readmore.stories.tsx  | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
index 1c0611d584..a626fcb179 100644
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
@@ -7,7 +7,7 @@ type AkselThemeContext = {
    * Available color-themes
    * @default "light"
    */
-  theme: "light" | "dark";
+  theme?: "light" | "dark";
   /**
    * Brand volume
    * @default "low"
diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 5434cdaaf9..1e2bca45c1 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -3,6 +3,7 @@ import { fn } from "@storybook/test";
 import React from "react";
 import { ReadMore } from ".";
 import { VStack } from "../layout/stack";
+import { UNSAFE_AkselTheme } from "../provider";
 
 export default {
   title: "ds-react/ReadMore",
@@ -58,8 +59,36 @@ export const Open: Story = {
   },
 };
 
+export const BrandVolumeLow: Story = {
+  args: {
+    ...Default.args,
+    open: true,
+  },
+  decorators: [
+    (StoryFn) => (
+      <UNSAFE_AkselTheme volume="low">
+        <StoryFn />
+      </UNSAFE_AkselTheme>
+    ),
+  ],
+};
+
+export const BrandVolumeHigh: Story = {
+  args: {
+    ...Default.args,
+    open: true,
+  },
+  decorators: [
+    (StoryFn) => (
+      <UNSAFE_AkselTheme volume="low">
+        <StoryFn />
+      </UNSAFE_AkselTheme>
+    ),
+  ],
+};
+
 export const Chromatic: Story = {
-  render: () => {
+  render: (...props) => {
     return (
       <VStack gap="4">
         <div>
@@ -82,6 +111,14 @@ export const Chromatic: Story = {
           {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
           <ReadMore {...Open.args} />
         </div>
+        <div>
+          <h2>BrandVolumeLow</h2>
+          {BrandVolumeLow?.render?.(...props)}
+        </div>
+        <div>
+          <h2>BrandVolumeHigh</h2>
+          {BrandVolumeHigh?.render?.(...props)}
+        </div>
       </VStack>
     );
   },

From 25d37324ae3a22ced75cda2cd6698f562e3a2e50 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 13:36:46 +0100
Subject: [PATCH 03/14] :sparkles: Added large size to readmore

---
 @navikt/core/react/src/read-more/ReadMore.tsx        |  2 +-
 .../core/react/src/read-more/readmore.stories.tsx    | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index 6c6cd7cac8..b860d7f2be 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -33,7 +33,7 @@ export interface ReadMoreProps
    * Changes fontsize for content.
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
 }
 
 /**
diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 1e2bca45c1..0e38f5eec0 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -38,6 +38,13 @@ export const Default: Story = {
   },
 };
 
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: "large",
+  },
+};
+
 export const Small: Story = {
   args: {
     ...Default.args,
@@ -101,6 +108,11 @@ export const Chromatic: Story = {
           {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
           <ReadMore {...Small.args} />
         </div>
+        <div>
+          <h2>Large</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...Large.args} />
+        </div>
         <div>
           <h2>DefaultOpen</h2>
           {/* @ts-expect-error Args are partial, leading to required prop mismatch */}

From 5bb555baee5a34b467ab15d1032d6204df289e7b Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 13:56:51 +0100
Subject: [PATCH 04/14] :sparkles: Added darkmode support for Readmore

---
 .../core/css/darkside/read-more.darkside.css  | 76 +++++++------------
 1 file changed, 28 insertions(+), 48 deletions(-)

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
index 21228d8494..f705b168f3 100644
--- a/@navikt/core/css/darkside/read-more.darkside.css
+++ b/@navikt/core/css/darkside/read-more.darkside.css
@@ -5,63 +5,51 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--a-spacing-05);
-  color: var(--ac-read-more-text, var(--a-text-action));
-  border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
+  gap: var(--ax-spacing-1);
+  color: var(--ax-text-accent);
+  border-radius: var(--ax-border-radius-medium);
+  padding-inline: 0 var(--ax-spacing-1);
+  padding-block: var(--ax-spacing-1);
   text-align: start;
-}
-
-.navds-read-more--small .navds-read-more__button {
-  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
-}
 
-@media (forced-colors: active) {
-  .navds-read-more__button {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
+  &:hover {
+    background-color: var(--ax-bg-neutral-hoverA);
+    color: var(--ax-text-accent-strong);
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
   }
 }
 
-.navds-read-more__button:hover {
-  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
-  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
-}
-
-.navds-read-more__button:active {
-  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+.navds-read-more--large .navds-read-more__button {
+  padding-block: var(--ax-spacing-3);
 }
 
-.navds-read-more__button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
+.navds-read-more--small .navds-read-more__button {
+  padding-block: var(--ax-spacing-05);
 }
 
-@supports not selector(:focus-visible) {
-  .navds-read-more__button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
   }
 }
 
 .navds-read-more__content {
-  margin-top: var(--a-spacing-1);
-  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
-  margin-left: 0.8125rem;
-  padding-left: 0.8125rem;
-  color: var(--a-text-default);
+  margin-top: var(--ax-spacing-2);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  margin-left: calc(0.75rem - 1px);
+  padding-left: calc(1rem - 1px);
+  color: var(--ax-text-default);
 }
 
 .navds-read-more--small .navds-read-more__content {
-  margin-left: 0.6875rem;
-  padding-left: 0.6875rem;
+  margin-left: calc(0.5rem + 1px);
+  padding-left: calc(0.75rem + 1px);
 }
 
 .navds-read-more__content--closed {
@@ -71,21 +59,13 @@
 .navds-read-more__expand-icon {
   font-size: 1.5rem;
   flex-shrink: 0;
+  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 .navds-read-more--small .navds-read-more__expand-icon {
   font-size: 1.25rem;
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  position: relative;
-  top: 1px;
-}
-
 .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
-}
-
-.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
-  top: -1px;
+  transform: rotateX(-180deg);
 }

From 9f06d7ee648ed087ecd0b22b86869bf9cea39601 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 14:03:18 +0100
Subject: [PATCH 05/14] :refactor: Updated CSS syntax

---
 .../core/css/darkside/read-more.darkside.css  | 62 +++++++++++--------
 @navikt/core/react/src/read-more/ReadMore.tsx |  2 +
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
index f705b168f3..d6e266d82d 100644
--- a/@navikt/core/css/darkside/read-more.darkside.css
+++ b/@navikt/core/css/darkside/read-more.darkside.css
@@ -1,3 +1,4 @@
+/* ----------------------------- ReadMore Button ---------------------------- */
 .navds-read-more__button {
   cursor: pointer;
   margin: 0;
@@ -21,39 +22,25 @@
     outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
   }
-}
-
-.navds-read-more--large .navds-read-more__button {
-  padding-block: var(--ax-spacing-3);
-}
 
-.navds-read-more--small .navds-read-more__button {
-  padding-block: var(--ax-spacing-05);
-}
-
-@media (forced-colors: active) {
-  .navds-read-more__button {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
+  &[data-state="open"] {
+    & > .navds-read-more__expand-icon {
+      transform: rotateX(-180deg);
+    }
   }
 }
 
+/* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
   margin-top: var(--ax-spacing-2);
   border-left: 2px solid var(--ax-border-neutral-subtleA);
   margin-left: calc(0.75rem - 1px);
   padding-left: calc(1rem - 1px);
   color: var(--ax-text-default);
-}
 
-.navds-read-more--small .navds-read-more__content {
-  margin-left: calc(0.5rem + 1px);
-  padding-left: calc(0.75rem + 1px);
-}
-
-.navds-read-more__content--closed {
-  display: none;
+  &[data-state="closed"] {
+    display: none;
+  }
 }
 
 .navds-read-more__expand-icon {
@@ -62,10 +49,33 @@
   transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-read-more--small .navds-read-more__expand-icon {
-  font-size: 1.25rem;
+/* ----------------------------- ReadMore Sizes ----------------------------- */
+.navds-read-more--large {
+  & .navds-read-more__button {
+    padding-block: var(--ax-spacing-3);
+  }
+}
+
+.navds-read-more--small {
+  & .navds-read-more__button {
+    padding-block: var(--ax-spacing-05);
+  }
+
+  & .navds-read-more__content {
+    margin-left: calc(0.5rem + 1px);
+    padding-left: calc(0.75rem + 1px);
+  }
+
+  & .navds-read-more__expand-icon {
+    font-size: 1.25rem;
+  }
 }
 
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotateX(-180deg);
+/* ------------------------- ReadMore high-contrast ------------------------- */
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
 }
diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index b860d7f2be..49d6e4598b 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -92,6 +92,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
+          data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
             className="navds-read-more__expand-icon"
@@ -107,6 +108,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
             "navds-read-more__content--closed": !_open,
           })}
           size={size}
+          data-state={_open ? "open" : "closed"}
         >
           {children}
         </BodyLong>

From 253aa37508d9fe22f5ad0b1caf9f4cd48aec54ad Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 14:06:16 +0100
Subject: [PATCH 06/14] :bug: Fixed brandvolume stories

---
 @navikt/core/react/src/read-more/readmore.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 0e38f5eec0..081b3a6a88 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -67,6 +67,7 @@ export const Open: Story = {
 };
 
 export const BrandVolumeLow: Story = {
+  render: () => <ReadMore header={Default.args?.header}>{Content}</ReadMore>,
   args: {
     ...Default.args,
     open: true,
@@ -81,10 +82,7 @@ export const BrandVolumeLow: Story = {
 };
 
 export const BrandVolumeHigh: Story = {
-  args: {
-    ...Default.args,
-    open: true,
-  },
+  render: () => <ReadMore header={Default.args?.header}>{Content}</ReadMore>,
   decorators: [
     (StoryFn) => (
       <UNSAFE_AkselTheme volume="low">

From bf800da3ad7891ec3c8ca78a3b608e17f2a2bdca Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 14:58:55 +0100
Subject: [PATCH 07/14] :sparkles: Implemented brandvolume in ReadMore

---
 .../core/css/darkside/read-more.darkside.css  | 74 +++++++++++++++++++
 .../react/src/provider/theme/AkselTheme.tsx   |  2 +-
 @navikt/core/react/src/read-more/ReadMore.tsx |  4 +
 .../react/src/read-more/readmore.stories.tsx  | 42 +++++++----
 4 files changed, 105 insertions(+), 17 deletions(-)

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
index d6e266d82d..d930809805 100644
--- a/@navikt/core/css/darkside/read-more.darkside.css
+++ b/@navikt/core/css/darkside/read-more.darkside.css
@@ -30,6 +30,80 @@
   }
 }
 
+.navds-read-more[data-volume="low"] {
+  &.navds-read-more--small {
+    & .navds-read-more__button {
+      padding-block: var(--ax-spacing-05);
+    }
+
+    & .navds-read-more__content {
+      margin-left: calc(0.5rem + 1px);
+      padding-left: calc(0.75rem + 1px);
+    }
+  }
+
+  &.navds-read-more--medium {
+    & .navds-read-more__button {
+      padding-block: var(--ax-spacing-1);
+    }
+  }
+
+  &.navds-read-more--large {
+    & .navds-read-more__button {
+      padding-block: var(--ax-spacing-3);
+    }
+  }
+
+  &:is(.navds-read-more--medium, .navds-read-more--large) {
+    & .navds-read-more__content {
+      margin-left: calc(0.75rem - 1px);
+      padding-left: calc(1rem - 1px);
+    }
+  }
+}
+
+.navds-read-more[data-volume="high"] {
+  & .navds-read-more__button {
+    background-color: var(--ax-bg-accent-moderate);
+    border-radius: var(--ax-border-radius-full);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-moderate-hoverA);
+    }
+  }
+
+  &.navds-read-more--small {
+    & .navds-read-more__content {
+      margin-left: calc(1rem + 1px);
+      padding-left: calc(0.75rem + 1px);
+    }
+  }
+
+  &.navds-read-more--medium {
+    & .navds-read-more__content {
+      margin-left: calc(1.25rem - 1px);
+      padding-left: calc(1rem - 1px);
+    }
+  }
+
+  &.navds-read-more--large {
+    & .navds-read-more__button {
+      padding-inline: var(--ax-spacing-3) var(--ax-spacing-6);
+    }
+
+    & .navds-read-more__content {
+      margin-left: calc(1.5rem - 1px);
+      padding-left: calc(1rem - 1px);
+    }
+  }
+
+  &:is(.navds-read-more--small, .navds-read-more--medium) {
+    & .navds-read-more__button {
+      padding-inline: var(--ax-spacing-2) var(--ax-spacing-4);
+    }
+  }
+}
+
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
   margin-top: var(--ax-spacing-2);
diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
index a626fcb179..226b40bc50 100644
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
@@ -47,7 +47,7 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
       hasBackgroundProp ?? (isRoot || props.theme !== undefined);
 
     return (
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme} volume={volume}>
         <div
           ref={ref}
           className={cl("navds-theme", className, theme)}
diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index 49d6e4598b..6336678aed 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -74,6 +75,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onChange: onOpenChange,
     });
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <div
         className={cl(
@@ -82,6 +85,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className,
           { "navds-read-more--open": _open },
         )}
+        data-volume={themeContext?.volume}
       >
         <button
           {...rest}
diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 081b3a6a88..4a543e9b64 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -67,29 +67,39 @@ export const Open: Story = {
 };
 
 export const BrandVolumeLow: Story = {
-  render: () => <ReadMore header={Default.args?.header}>{Content}</ReadMore>,
+  render: () => (
+    <UNSAFE_AkselTheme volume="low">
+      <VStack gap="4">
+        <ReadMore size="large" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+        <ReadMore header={Default.args?.header}>{Content}</ReadMore>
+        <ReadMore size="small" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+      </VStack>
+    </UNSAFE_AkselTheme>
+  ),
   args: {
     ...Default.args,
     open: true,
   },
-  decorators: [
-    (StoryFn) => (
-      <UNSAFE_AkselTheme volume="low">
-        <StoryFn />
-      </UNSAFE_AkselTheme>
-    ),
-  ],
 };
 
 export const BrandVolumeHigh: Story = {
-  render: () => <ReadMore header={Default.args?.header}>{Content}</ReadMore>,
-  decorators: [
-    (StoryFn) => (
-      <UNSAFE_AkselTheme volume="low">
-        <StoryFn />
-      </UNSAFE_AkselTheme>
-    ),
-  ],
+  render: () => (
+    <UNSAFE_AkselTheme volume="high">
+      <VStack gap="4">
+        <ReadMore size="large" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+        <ReadMore header={Default.args?.header}>{Content}</ReadMore>
+        <ReadMore size="small" header={Default.args?.header}>
+          {Content}
+        </ReadMore>
+      </VStack>
+    </UNSAFE_AkselTheme>
+  ),
 };
 
 export const Chromatic: Story = {

From b35647e2f1bd32edf8e3af72c1e88bd1157e9c56 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 20:11:22 +0100
Subject: [PATCH 08/14] :sparkles: Added large-variant of readmore to OG
 readmore

---
 @navikt/core/css/read-more.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/@navikt/core/css/read-more.css b/@navikt/core/css/read-more.css
index 21228d8494..2d10b572e3 100644
--- a/@navikt/core/css/read-more.css
+++ b/@navikt/core/css/read-more.css
@@ -16,6 +16,10 @@
   padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
 }
 
+.navds-read-more--large .navds-read-more__button {
+  padding: var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05);
+}
+
 @media (forced-colors: active) {
   .navds-read-more__button {
     background-color: ButtonFace;

From 359177414f332d0decbc798bb2293bca452a0ce6 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Thu, 14 Nov 2024 20:38:49 +0100
Subject: [PATCH 09/14] :refactor: Use tokens and calc to handle volume

---
 .../core/css/darkside/read-more.darkside.css  | 112 +++++-------------
 1 file changed, 29 insertions(+), 83 deletions(-)

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
index d930809805..5bc993ceae 100644
--- a/@navikt/core/css/darkside/read-more.darkside.css
+++ b/@navikt/core/css/darkside/read-more.darkside.css
@@ -1,3 +1,10 @@
+.navds-read-more {
+  --__axc-read-more-icon-size: 1.5rem;
+  --__axc-read-more-pi-start: 0px;
+  --__axc-read-more-pi-end: var(--ax-spacing-1);
+  --__axc-read-more-pb: var(--ax-spacing-1);
+}
+
 /* ----------------------------- ReadMore Button ---------------------------- */
 .navds-read-more__button {
   cursor: pointer;
@@ -8,56 +15,27 @@
   align-items: flex-start;
   gap: var(--ax-spacing-1);
   color: var(--ax-text-accent);
-  border-radius: var(--ax-border-radius-medium);
-  padding-inline: 0 var(--ax-spacing-1);
-  padding-block: var(--ax-spacing-1);
+  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
+  padding-block: var(--__axc-read-more-pb);
   text-align: start;
 
-  &:hover {
-    background-color: var(--ax-bg-neutral-hoverA);
-    color: var(--ax-text-accent-strong);
-  }
-
   &:focus-visible {
     outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
   }
 
-  &[data-state="open"] {
-    & > .navds-read-more__expand-icon {
-      transform: rotateX(-180deg);
-    }
+  &[data-state="open"] .navds-read-more__expand-icon {
+    transform: rotateX(-180deg);
   }
 }
 
-.navds-read-more[data-volume="low"] {
-  &.navds-read-more--small {
-    & .navds-read-more__button {
-      padding-block: var(--ax-spacing-05);
-    }
-
-    & .navds-read-more__content {
-      margin-left: calc(0.5rem + 1px);
-      padding-left: calc(0.75rem + 1px);
-    }
-  }
-
-  &.navds-read-more--medium {
-    & .navds-read-more__button {
-      padding-block: var(--ax-spacing-1);
-    }
-  }
-
-  &.navds-read-more--large {
-    & .navds-read-more__button {
-      padding-block: var(--ax-spacing-3);
-    }
-  }
+.navds-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .navds-read-more__button {
+    border-radius: var(--ax-border-radius-medium);
 
-  &:is(.navds-read-more--medium, .navds-read-more--large) {
-    & .navds-read-more__content {
-      margin-left: calc(0.75rem - 1px);
-      padding-left: calc(1rem - 1px);
+    &:hover {
+      background-color: var(--ax-bg-neutral-hoverA);
+      color: var(--ax-text-accent-strong);
     }
   }
 }
@@ -72,35 +50,15 @@
     }
   }
 
-  &.navds-read-more--small {
-    & .navds-read-more__content {
-      margin-left: calc(1rem + 1px);
-      padding-left: calc(0.75rem + 1px);
-    }
-  }
-
-  &.navds-read-more--medium {
-    & .navds-read-more__content {
-      margin-left: calc(1.25rem - 1px);
-      padding-left: calc(1rem - 1px);
-    }
-  }
-
   &.navds-read-more--large {
-    & .navds-read-more__button {
-      padding-inline: var(--ax-spacing-3) var(--ax-spacing-6);
-    }
-
-    & .navds-read-more__content {
-      margin-left: calc(1.5rem - 1px);
-      padding-left: calc(1rem - 1px);
-    }
+    --__axc-read-more-pi-start: var(--ax-spacing-3);
+    --__axc-read-more-pi-end: var(--ax-spacing-6);
   }
 
-  &:is(.navds-read-more--small, .navds-read-more--medium) {
-    & .navds-read-more__button {
-      padding-inline: var(--ax-spacing-2) var(--ax-spacing-4);
-    }
+  &.navds-read-more--small,
+  &.navds-read-more--medium {
+    --__axc-read-more-pi-start: var(--ax-spacing-2);
+    --__axc-read-more-pi-end: var(--ax-spacing-4);
   }
 }
 
@@ -108,9 +66,9 @@
 .navds-read-more__content {
   margin-top: var(--ax-spacing-2);
   border-left: 2px solid var(--ax-border-neutral-subtleA);
-  margin-left: calc(0.75rem - 1px);
-  padding-left: calc(1rem - 1px);
   color: var(--ax-text-default);
+  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
 
   &[data-state="closed"] {
     display: none;
@@ -118,31 +76,19 @@
 }
 
 .navds-read-more__expand-icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-read-more-icon-size);
   flex-shrink: 0;
   transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
 .navds-read-more--large {
-  & .navds-read-more__button {
-    padding-block: var(--ax-spacing-3);
-  }
+  --__axc-read-more-pb: var(--ax-spacing-3);
 }
 
 .navds-read-more--small {
-  & .navds-read-more__button {
-    padding-block: var(--ax-spacing-05);
-  }
-
-  & .navds-read-more__content {
-    margin-left: calc(0.5rem + 1px);
-    padding-left: calc(0.75rem + 1px);
-  }
-
-  & .navds-read-more__expand-icon {
-    font-size: 1.25rem;
-  }
+  --__axc-read-more-icon-size: 1.25rem;
+  --__axc-read-more-pb: var(--ax-spacing-05);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */

From 9a78e34c9797c392a6de16f218cbb44043018607 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 18 Nov 2024 14:36:58 +0100
Subject: [PATCH 10/14] :bug: Added text-accent-strong on hover to high
 brandvolume

---
 @navikt/core/css/darkside/read-more.darkside.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
index 5bc993ceae..7d49bc9b87 100644
--- a/@navikt/core/css/darkside/read-more.darkside.css
+++ b/@navikt/core/css/darkside/read-more.darkside.css
@@ -47,6 +47,7 @@
 
     &:hover {
       background-color: var(--ax-bg-accent-moderate-hoverA);
+      color: var(--ax-text-accent-strong);
     }
   }
 

From f3bd04356e56aff10956b535d8ac5cea5e710814 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 18 Nov 2024 14:43:49 +0100
Subject: [PATCH 11/14] :bug: Avoid adjusting readmore body when size is large

---
 @navikt/core/react/src/read-more/ReadMore.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index 6336678aed..61183f7252 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -77,6 +77,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     const themeContext = UNSAFE_useAkselTheme(false);
 
+    const typoSize = size === "small" ? "small" : "medium";
+
     return (
       <div
         className={cl(
@@ -111,7 +113,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className={cl("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}
-          size={size}
+          size={typoSize}
           data-state={_open ? "open" : "closed"}
         >
           {children}

From eaa326f662c1ad618c121885086471f80f137676 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 25 Nov 2024 11:04:49 +0100
Subject: [PATCH 12/14] :memo: CHangeset

---
 .changeset/shy-panthers-hide.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/shy-panthers-hide.md

diff --git a/.changeset/shy-panthers-hide.md b/.changeset/shy-panthers-hide.md
new file mode 100644
index 0000000000..602940db2a
--- /dev/null
+++ b/.changeset/shy-panthers-hide.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+ReadMore: Added size 'large'.

From 0ddb32da10e4dd76ce332ecd5221651f2fc893f2 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:18:13 +0100
Subject: [PATCH 13/14] Update
 @navikt/core/react/src/provider/theme/AkselTheme.tsx

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---
 @navikt/core/react/src/provider/theme/AkselTheme.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
index 67227564e2..26e5ca716b 100644
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
@@ -5,7 +5,7 @@ import { createContext } from "../../util/create-context";
 
 type AkselThemeContext = {
   /**
-   * Available color-themes
+   * Color theme
    * @default "light"
    */
   theme?: "light" | "dark";

From 70b58a840069db571b1c6cc78d18a45dd7b3d7c1 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:18:41 +0100
Subject: [PATCH 14/14] Update
 @navikt/core/react/src/provider/theme/AkselTheme.tsx

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---
 @navikt/core/react/src/provider/theme/AkselTheme.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
index 26e5ca716b..b620841a46 100644
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
@@ -12,7 +12,7 @@ type AkselThemeContext = {
   /**
    * Brand volume
    * @default "low"
-   * This is experimental and subject name changes
+   * This is experimental and subject to changes
    */
   volume?: "high" | "low";
 };