From d52e2bd5146f5b41607a6ddc84c2717f3a8fdcf0 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 17 Dec 2024 17:16:55 +0100
Subject: [PATCH 1/6] :truck: Rename and move theme-component

---
 .../react/src/accordion/AccordionContent.tsx  |  4 +-
 .../react/src/accordion/AccordionHeader.tsx   |  4 +-
 .../src/date/datepicker/parts/WeekNumber.tsx  |  4 +-
 @navikt/core/react/src/form/search/Search.tsx |  4 +-
 @navikt/core/react/src/form/switch/Switch.tsx |  4 +-
 .../core/react/src/guide-panel/GuidePanel.tsx |  4 +-
 @navikt/core/react/src/help-text/HelpText.tsx |  4 +-
 .../src/internal-header/InternalHeader.tsx    |  8 +--
 .../react/src/layout/base/BasePrimitive.tsx   |  4 +-
 @navikt/core/react/src/layout/bleed/Bleed.tsx |  4 +-
 @navikt/core/react/src/layout/box/Box.tsx     |  4 +-
 @navikt/core/react/src/layout/grid/HGrid.tsx  |  4 +-
 @navikt/core/react/src/layout/page/Page.tsx   |  4 +-
 @navikt/core/react/src/layout/stack/Stack.tsx |  4 +-
 .../src/overlays/action-menu/ActionMenu.tsx   |  4 +-
 .../react/src/pagination/PaginationItem.tsx   |  4 +-
 @navikt/core/react/src/popover/Popover.tsx    |  4 +-
 @navikt/core/react/src/provider/index.ts      |  4 --
 .../react/src/provider/theme/AkselTheme.tsx   | 70 -------------------
 @navikt/core/react/src/read-more/ReadMore.tsx |  5 +-
 @navikt/core/react/src/theme/Theme.tsx        | 60 ++++++++++++++++
 @navikt/core/react/src/theme/index.ts         |  2 +
 @navikt/core/react/src/timeline/Pin.tsx       |  4 +-
 .../src/timeline/period/ClickablePeriod.tsx   |  4 +-
 @navikt/core/react/src/tooltip/Tooltip.tsx    |  4 +-
 25 files changed, 105 insertions(+), 120 deletions(-)
 delete mode 100644 @navikt/core/react/src/provider/theme/AkselTheme.tsx
 create mode 100644 @navikt/core/react/src/theme/Theme.tsx
 create mode 100644 @navikt/core/react/src/theme/index.ts

diff --git a/@navikt/core/react/src/accordion/AccordionContent.tsx b/@navikt/core/react/src/accordion/AccordionContent.tsx
index 30b125f0bb..ba52711388 100644
--- a/@navikt/core/react/src/accordion/AccordionContent.tsx
+++ b/@navikt/core/react/src/accordion/AccordionContent.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -16,7 +16,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     if (context === null) {
       console.error(
diff --git a/@navikt/core/react/src/accordion/AccordionHeader.tsx b/@navikt/core/react/src/accordion/AccordionHeader.tsx
index 98e26ae47f..dd99b1de17 100644
--- a/@navikt/core/react/src/accordion/AccordionHeader.tsx
+++ b/@navikt/core/react/src/accordion/AccordionHeader.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
@@ -20,7 +20,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     if (itemContext === null) {
       console.error(
diff --git a/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx b/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
index 5a2ac8035b..93061bbeb4 100644
--- a/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
+++ b/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { Button as RDPButton, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
-import { UNSAFE_useAkselTheme } from "../../../provider";
+import { useThemeInternal } from "../../../theme/Theme";
 import { Detail } from "../../../typography";
 import { useDateTranslationContext } from "../../context";
 
@@ -21,7 +21,7 @@ function WeekNumber({
   dates,
 }: WeekNumberProps): JSX.Element {
   const { onWeekNumberClick, styles, classNames } = useDayPicker();
-  const themeContext = UNSAFE_useAkselTheme(false);
+  const themeContext = useThemeInternal();
   const translate = useDateTranslationContext().translate;
 
   if (!onWeekNumberClick) {
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index ce77637ddd..0a0eebcfb8 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -125,7 +125,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
index fe3d3bc385..12848eaf45 100644
--- a/@navikt/core/react/src/form/switch/Switch.tsx
+++ b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -69,7 +69,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     useEffect(() => {
       checkedProp !== undefined && setChecked(checkedProp);
diff --git a/@navikt/core/react/src/guide-panel/GuidePanel.tsx b/@navikt/core/react/src/guide-panel/GuidePanel.tsx
index a01abed4f8..e419cef20a 100644
--- a/@navikt/core/react/src/guide-panel/GuidePanel.tsx
+++ b/@navikt/core/react/src/guide-panel/GuidePanel.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { DefaultIllustration } from "./Illustration";
 import { DarksideGudiepanelIllustration } from "./Illustration.darkside";
 
@@ -37,7 +37,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   ({ children, className, illustration, poster, ...rest }, ref) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     return (
       <div
diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
index ff791f60b3..206af7a230 100644
--- a/@navikt/core/react/src/help-text/HelpText.tsx
+++ b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
@@ -52,7 +52,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
     const translate = useI18n("HelpText");
 
     const titleWithFallback = title || translate("title");
diff --git a/@navikt/core/react/src/internal-header/InternalHeader.tsx b/@navikt/core/react/src/internal-header/InternalHeader.tsx
index bb135378bb..6b9be66cd2 100644
--- a/@navikt/core/react/src/internal-header/InternalHeader.tsx
+++ b/@navikt/core/react/src/internal-header/InternalHeader.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_AkselTheme, UNSAFE_useAkselTheme } from "../provider";
+import { Theme, useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -78,20 +78,20 @@ interface InternalHeaderComponent
  * ```
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
-  const themeContext = UNSAFE_useAkselTheme(false);
+  const themeContext = useThemeInternal();
 
   /*
    * Component is always in "dark" mode, so we manually override global theme.
    */
   if (themeContext) {
     return (
-      <UNSAFE_AkselTheme theme="dark" asChild>
+      <Theme theme="dark" asChild>
         <header
           {...rest}
           ref={ref}
           className={cl("navds-internalheader", className)}
         />
-      </UNSAFE_AkselTheme>
+      </Theme>
     );
   }
 
diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx
index 064bd46f44..d687db0bd7 100644
--- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx
+++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -252,7 +252,7 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const themeContext = UNSAFE_useAkselTheme(false);
+  const themeContext = useThemeInternal();
   const prefix = themeContext ? "ax" : "a";
 
   const style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/bleed/Bleed.tsx b/@navikt/core/react/src/layout/bleed/Bleed.tsx
index 2aa5b83c73..2a677af488 100644
--- a/@navikt/core/react/src/layout/bleed/Bleed.tsx
+++ b/@navikt/core/react/src/layout/bleed/Bleed.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -81,7 +81,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
     const prefix = themeContext ? "ax" : "a";
 
     let style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx
index 0b79d1e2ab..8a1a83254c 100644
--- a/@navikt/core/react/src/layout/box/Box.tsx
+++ b/@navikt/core/react/src/layout/box/Box.tsx
@@ -1,8 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -109,7 +109,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal();
 
       if (
         process.env.NODE_ENV !== "production" &&
diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx
index e894968274..a462fca8cb 100644
--- a/@navikt/core/react/src/layout/grid/HGrid.tsx
+++ b/@navikt/core/react/src/layout/grid/HGrid.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal();
       const prefix = themeContext ? "ax" : "a";
 
       const styles: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/page/Page.tsx b/@navikt/core/react/src/layout/page/Page.tsx
index 598ec3b4af..f0d0555fbc 100644
--- a/@navikt/core/react/src/layout/page/Page.tsx
+++ b/@navikt/core/react/src/layout/page/Page.tsx
@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent } from "../../util";
 import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
@@ -54,7 +54,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal();
 
       if (process.env.NODE_ENV !== "production" && themeContext && background) {
         console.warn(
diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx
index 880b36cdb3..6b2af88c39 100644
--- a/@navikt/core/react/src/layout/stack/Stack.tsx
+++ b/@navikt/core/react/src/layout/stack/Stack.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal();
       const prefix = themeContext ? "ax" : "a";
 
       const style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx b/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
index c159cd0ccc..18331ff66a 100644
--- a/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
+++ b/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
@@ -2,8 +2,8 @@ import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createContext } from "../../util/create-context";
@@ -736,7 +736,7 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     return (
       <Menu.RadioItem
diff --git a/@navikt/core/react/src/pagination/PaginationItem.tsx b/@navikt/core/react/src/pagination/PaginationItem.tsx
index 1a5b6a3b78..16ac365d19 100644
--- a/@navikt/core/react/src/pagination/PaginationItem.tsx
+++ b/@navikt/core/react/src/pagination/PaginationItem.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -40,7 +40,7 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     return (
       <Button
diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx
index 9f2643cf55..5612418739 100644
--- a/@navikt/core/react/src/popover/Popover.tsx
+++ b/@navikt/core/react/src/popover/Popover.tsx
@@ -11,7 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateInputContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -125,7 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
 
     const {
       update,
diff --git a/@navikt/core/react/src/provider/index.ts b/@navikt/core/react/src/provider/index.ts
index bde0b5e2ac..5d86c8ee05 100644
--- a/@navikt/core/react/src/provider/index.ts
+++ b/@navikt/core/react/src/provider/index.ts
@@ -1,6 +1,2 @@
 "use client";
 export { default as Provider, type ProviderProps } from "./Provider";
-export {
-  AkselTheme as UNSAFE_AkselTheme,
-  useAkselTheme as UNSAFE_useAkselTheme,
-} from "./theme/AkselTheme";
diff --git a/@navikt/core/react/src/provider/theme/AkselTheme.tsx b/@navikt/core/react/src/provider/theme/AkselTheme.tsx
deleted file mode 100644
index b620841a46..0000000000
--- a/@navikt/core/react/src/provider/theme/AkselTheme.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { createContext } from "../../util/create-context";
-
-type AkselThemeContext = {
-  /**
-   * Color theme
-   * @default "light"
-   */
-  theme?: "light" | "dark";
-  /**
-   * Brand volume
-   * @default "low"
-   * This is experimental and subject to changes
-   */
-  volume?: "high" | "low";
-};
-
-const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
-  errorMessage: "useAkselTheme must be used within AkselThemeProvider",
-  hookName: "useAkselTheme",
-  name: "AkselThemeProvider",
-  providerName: "AkselThemeProvider",
-});
-
-type AkselThemeProps = {
-  children: React.ReactNode;
-  className?: string;
-  hasBackground?: boolean;
-  /* TODO: Handle this correctly with types */
-  asChild?: boolean;
-} & AkselThemeContext;
-
-const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
-  (props: AkselThemeProps, ref) => {
-    const context = useAkselTheme(false);
-
-    const {
-      children,
-      className,
-      asChild = false,
-      theme = context?.theme ?? "light",
-      volume = context?.volume ?? "low",
-      hasBackground: hasBackgroundProp = true,
-    } = props;
-
-    const isRoot = context === undefined;
-
-    const hasBackground =
-      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
-
-    const SlotElement = asChild ? Slot : "div";
-
-    return (
-      <ThemeProvider theme={theme} volume={volume}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-          data-volume={volume}
-        >
-          {children}
-        </SlotElement>
-      </ThemeProvider>
-    );
-  },
-);
-
-export { AkselTheme, useAkselTheme };
diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index 61183f7252..8e63c84193 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -1,7 +1,6 @@
 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";
@@ -75,8 +74,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onChange: onOpenChange,
     });
 
-    const themeContext = UNSAFE_useAkselTheme(false);
-
     const typoSize = size === "small" ? "small" : "medium";
 
     return (
@@ -87,7 +84,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className,
           { "navds-read-more--open": _open },
         )}
-        data-volume={themeContext?.volume}
+        data-volume="low"
       >
         <button
           {...rest}
diff --git a/@navikt/core/react/src/theme/Theme.tsx b/@navikt/core/react/src/theme/Theme.tsx
new file mode 100644
index 0000000000..28dea58217
--- /dev/null
+++ b/@navikt/core/react/src/theme/Theme.tsx
@@ -0,0 +1,60 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { Slot } from "../slot/Slot";
+import { createContext } from "../util/create-context";
+import { AsChildProps } from "../util/types";
+
+type ThemeContext = {
+  /**
+   * Color theme
+   * @default "light"
+   */
+  theme?: "light" | "dark";
+};
+
+const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
+  hookName: "useTheme",
+  name: "ThemeProvider",
+  providerName: "ThemeProvider",
+});
+
+type AkselThemeProps = {
+  className?: string;
+  hasBackground?: boolean;
+} & ThemeContext &
+  AsChildProps;
+
+const Theme = forwardRef<HTMLDivElement, AkselThemeProps>(
+  (props: AkselThemeProps, ref) => {
+    const context = useThemeInternal(false);
+
+    const {
+      children,
+      className,
+      asChild = false,
+      theme = context?.theme ?? "light",
+      hasBackground: hasBackgroundProp = true,
+    } = props;
+
+    const isRoot = context === undefined;
+
+    const hasBackground =
+      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
+
+    const SlotElement = asChild ? Slot : "div";
+
+    return (
+      <ThemeProvider theme={theme}>
+        <SlotElement
+          ref={ref}
+          className={cl("navds-theme", className, theme)}
+          data-background={hasBackground}
+        >
+          {children}
+        </SlotElement>
+      </ThemeProvider>
+    );
+  },
+);
+
+export { Theme, useThemeInternal };
diff --git a/@navikt/core/react/src/theme/index.ts b/@navikt/core/react/src/theme/index.ts
new file mode 100644
index 0000000000..3178633c2c
--- /dev/null
+++ b/@navikt/core/react/src/theme/index.ts
@@ -0,0 +1,2 @@
+"use client";
+export { Theme } from "./Theme";
diff --git a/@navikt/core/react/src/timeline/Pin.tsx b/@navikt/core/react/src/timeline/Pin.tsx
index 842e2bf009..e69f5d7e7a 100644
--- a/@navikt/core/react/src/timeline/Pin.tsx
+++ b/@navikt/core/react/src/timeline/Pin.tsx
@@ -15,7 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -48,7 +48,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
     const showArrow = !themeContext;
 
     const {
diff --git a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
index 288d8e555d..e68cb94367 100644
--- a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
+++ b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
@@ -15,7 +15,7 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useRef, useState } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -56,7 +56,7 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
     const showArrow = !themeContext;
 
     const {
diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx
index aebb885b3b..24c7d16ed3 100644
--- a/@navikt/core/react/src/tooltip/Tooltip.tsx
+++ b/@navikt/core/react/src/tooltip/Tooltip.tsx
@@ -15,8 +15,8 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
-import { UNSAFE_useAkselTheme } from "../provider";
 import { Slot } from "../slot/Slot";
+import { useThemeInternal } from "../theme/Theme";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -124,7 +124,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal();
     const showArrow = _arrow && !themeContext;
 
     const [_open, _setOpen] = useControllableState({

From cd8ca6021e8c49fc094f59eae9c8b0310b1e8251 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 17 Dec 2024 17:27:12 +0100
Subject: [PATCH 2/6] :bug: Portal now preserves theme when out of cascade

---
 .storybook/preview.tsx                        | 10 +++----
 @navikt/core/react/src/portal/Portal.tsx      | 17 ++++++++++++
 .../react/src/read-more/readmore.stories.tsx  | 26 +++++++++----------
 @navikt/core/react/src/theme/Theme.tsx        |  8 +++---
 4 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 34c267b981..4cab821b11 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -5,10 +5,8 @@ import React, { useLayoutEffect } from "react";
 import darksideCss from "../@navikt/core/css/darkside/index.css?inline";
 // @ts-expect-error - Temporary
 import defaultCss from "../@navikt/core/css/index.css?inline";
-import {
-  Provider,
-  UNSAFE_AkselTheme,
-} from "../@navikt/core/react/src/provider";
+import { Provider } from "../@navikt/core/react/src/provider";
+import { Theme } from "../@navikt/core/react/src/theme";
 import en from "../@navikt/core/react/src/util/i18n/locales/en";
 import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
 import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
@@ -31,9 +29,9 @@ const ModeDecorator = ({ children, mode, theme }) => {
   }, [mode]);
 
   return mode === "darkside" ? (
-    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+    <Theme theme={theme || undefined} hasBackground={false}>
       {children}
-    </UNSAFE_AkselTheme>
+    </Theme>
   ) : (
     children
   );
diff --git a/@navikt/core/react/src/portal/Portal.tsx b/@navikt/core/react/src/portal/Portal.tsx
index 1eaf255491..1f5acf7446 100644
--- a/@navikt/core/react/src/portal/Portal.tsx
+++ b/@navikt/core/react/src/portal/Portal.tsx
@@ -2,6 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
 import { Slot } from "../slot/Slot";
+import { Theme, useThemeInternal } from "../theme/Theme";
 import { AsChildProps } from "../util/types";
 
 interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
@@ -15,11 +16,27 @@ export type PortalProps = PortalBaseProps & AsChildProps;
 
 export const Portal = forwardRef<HTMLDivElement, PortalProps>(
   ({ rootElement, asChild, ...rest }, ref) => {
+    const themeContext = useThemeInternal();
     const contextRoot = useProvider()?.rootElement;
     const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
 
     const Component = asChild ? Slot : "div";
 
+    /**
+     * Portal can be mounted outside of theme-classNames.
+     * If a theme is present, we want to make sure that theme cascades to portaled element.
+     */
+    if (themeContext) {
+      return root
+        ? ReactDOM.createPortal(
+            <Theme theme={themeContext.theme} asChild hasBackground={false}>
+              <Component ref={ref} data-aksel-portal="" {...rest} />
+            </Theme>,
+            root,
+          )
+        : null;
+    }
+
     return root
       ? ReactDOM.createPortal(
           <Component ref={ref} data-aksel-portal="" {...rest} />,
diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 4a543e9b64..6711d80ff5 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -3,7 +3,6 @@ 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",
@@ -68,17 +67,15 @@ export const Open: Story = {
 
 export const BrandVolumeLow: Story = {
   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>
+    <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>
   ),
   args: {
     ...Default.args,
@@ -86,7 +83,8 @@ export const BrandVolumeLow: Story = {
   },
 };
 
-export const BrandVolumeHigh: Story = {
+/* High volume temp disabled until we agree on concept */
+/* export const BrandVolumeHigh: Story = {
   render: () => (
     <UNSAFE_AkselTheme volume="high">
       <VStack gap="4">
@@ -100,7 +98,7 @@ export const BrandVolumeHigh: Story = {
       </VStack>
     </UNSAFE_AkselTheme>
   ),
-};
+}; */
 
 export const Chromatic: Story = {
   render: (...props) => {
diff --git a/@navikt/core/react/src/theme/Theme.tsx b/@navikt/core/react/src/theme/Theme.tsx
index 28dea58217..f2523aa3b3 100644
--- a/@navikt/core/react/src/theme/Theme.tsx
+++ b/@navikt/core/react/src/theme/Theme.tsx
@@ -18,14 +18,14 @@ const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
   providerName: "ThemeProvider",
 });
 
-type AkselThemeProps = {
+type ThemeProps = {
   className?: string;
   hasBackground?: boolean;
 } & ThemeContext &
   AsChildProps;
 
-const Theme = forwardRef<HTMLDivElement, AkselThemeProps>(
-  (props: AkselThemeProps, ref) => {
+const Theme = forwardRef<HTMLDivElement, ThemeProps>(
+  (props: ThemeProps, ref) => {
     const context = useThemeInternal(false);
 
     const {
@@ -39,7 +39,7 @@ const Theme = forwardRef<HTMLDivElement, AkselThemeProps>(
     const isRoot = context === undefined;
 
     const hasBackground =
-      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
+      hasBackgroundProp ?? (isRoot && props.theme !== undefined);
 
     const SlotElement = asChild ? Slot : "div";
 

From 2046908a78f226afd19e20e202f271a03bc9bdc2 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 17 Dec 2024 17:40:05 +0100
Subject: [PATCH 3/6] :bug: useThemeInternal missing strict-mode false

---
 @navikt/core/react/src/accordion/AccordionContent.tsx       | 2 +-
 @navikt/core/react/src/accordion/AccordionHeader.tsx        | 2 +-
 @navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx | 2 +-
 @navikt/core/react/src/form/search/Search.tsx               | 2 +-
 @navikt/core/react/src/form/switch/Switch.tsx               | 2 +-
 @navikt/core/react/src/guide-panel/GuidePanel.tsx           | 2 +-
 @navikt/core/react/src/help-text/HelpText.tsx               | 2 +-
 @navikt/core/react/src/internal-header/InternalHeader.tsx   | 2 +-
 @navikt/core/react/src/layout/base/BasePrimitive.tsx        | 2 +-
 @navikt/core/react/src/layout/bleed/Bleed.tsx               | 2 +-
 @navikt/core/react/src/layout/box/Box.tsx                   | 2 +-
 @navikt/core/react/src/layout/grid/HGrid.tsx                | 2 +-
 @navikt/core/react/src/layout/page/Page.tsx                 | 2 +-
 @navikt/core/react/src/layout/stack/Stack.tsx               | 2 +-
 @navikt/core/react/src/overlays/action-menu/ActionMenu.tsx  | 2 +-
 @navikt/core/react/src/pagination/PaginationItem.tsx        | 2 +-
 @navikt/core/react/src/popover/Popover.tsx                  | 2 +-
 @navikt/core/react/src/portal/Portal.tsx                    | 2 +-
 @navikt/core/react/src/timeline/Pin.tsx                     | 2 +-
 @navikt/core/react/src/timeline/period/ClickablePeriod.tsx  | 2 +-
 @navikt/core/react/src/tooltip/Tooltip.tsx                  | 2 +-
 21 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/@navikt/core/react/src/accordion/AccordionContent.tsx b/@navikt/core/react/src/accordion/AccordionContent.tsx
index ba52711388..7350ed9291 100644
--- a/@navikt/core/react/src/accordion/AccordionContent.tsx
+++ b/@navikt/core/react/src/accordion/AccordionContent.tsx
@@ -16,7 +16,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     if (context === null) {
       console.error(
diff --git a/@navikt/core/react/src/accordion/AccordionHeader.tsx b/@navikt/core/react/src/accordion/AccordionHeader.tsx
index dd99b1de17..b7dfaa8351 100644
--- a/@navikt/core/react/src/accordion/AccordionHeader.tsx
+++ b/@navikt/core/react/src/accordion/AccordionHeader.tsx
@@ -20,7 +20,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     if (itemContext === null) {
       console.error(
diff --git a/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx b/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
index 93061bbeb4..38c22364c9 100644
--- a/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
+++ b/@navikt/core/react/src/date/datepicker/parts/WeekNumber.tsx
@@ -21,7 +21,7 @@ function WeekNumber({
   dates,
 }: WeekNumberProps): JSX.Element {
   const { onWeekNumberClick, styles, classNames } = useDayPicker();
-  const themeContext = useThemeInternal();
+  const themeContext = useThemeInternal(false);
   const translate = useDateTranslationContext().translate;
 
   if (!onWeekNumberClick) {
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index 0a0eebcfb8..b8a14faaaa 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -125,7 +125,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
index 12848eaf45..b63133e4b8 100644
--- a/@navikt/core/react/src/form/switch/Switch.tsx
+++ b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -69,7 +69,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     useEffect(() => {
       checkedProp !== undefined && setChecked(checkedProp);
diff --git a/@navikt/core/react/src/guide-panel/GuidePanel.tsx b/@navikt/core/react/src/guide-panel/GuidePanel.tsx
index e419cef20a..b35ff6b5a9 100644
--- a/@navikt/core/react/src/guide-panel/GuidePanel.tsx
+++ b/@navikt/core/react/src/guide-panel/GuidePanel.tsx
@@ -37,7 +37,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   ({ children, className, illustration, poster, ...rest }, ref) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     return (
       <div
diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
index 206af7a230..ffcd65f59e 100644
--- a/@navikt/core/react/src/help-text/HelpText.tsx
+++ b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -52,7 +52,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const translate = useI18n("HelpText");
 
     const titleWithFallback = title || translate("title");
diff --git a/@navikt/core/react/src/internal-header/InternalHeader.tsx b/@navikt/core/react/src/internal-header/InternalHeader.tsx
index 6b9be66cd2..654f7b5166 100644
--- a/@navikt/core/react/src/internal-header/InternalHeader.tsx
+++ b/@navikt/core/react/src/internal-header/InternalHeader.tsx
@@ -78,7 +78,7 @@ interface InternalHeaderComponent
  * ```
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
-  const themeContext = useThemeInternal();
+  const themeContext = useThemeInternal(false);
 
   /*
    * Component is always in "dark" mode, so we manually override global theme.
diff --git a/@navikt/core/react/src/layout/base/BasePrimitive.tsx b/@navikt/core/react/src/layout/base/BasePrimitive.tsx
index d687db0bd7..b679c2e8c8 100644
--- a/@navikt/core/react/src/layout/base/BasePrimitive.tsx
+++ b/@navikt/core/react/src/layout/base/BasePrimitive.tsx
@@ -252,7 +252,7 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const themeContext = useThemeInternal();
+  const themeContext = useThemeInternal(false);
   const prefix = themeContext ? "ax" : "a";
 
   const style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/bleed/Bleed.tsx b/@navikt/core/react/src/layout/bleed/Bleed.tsx
index 2a677af488..4d292ff28f 100644
--- a/@navikt/core/react/src/layout/bleed/Bleed.tsx
+++ b/@navikt/core/react/src/layout/bleed/Bleed.tsx
@@ -81,7 +81,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const prefix = themeContext ? "ax" : "a";
 
     let style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx
index 8a1a83254c..9f218026aa 100644
--- a/@navikt/core/react/src/layout/box/Box.tsx
+++ b/@navikt/core/react/src/layout/box/Box.tsx
@@ -109,7 +109,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
+      const themeContext = useThemeInternal(false);
 
       if (
         process.env.NODE_ENV !== "production" &&
diff --git a/@navikt/core/react/src/layout/grid/HGrid.tsx b/@navikt/core/react/src/layout/grid/HGrid.tsx
index a462fca8cb..9809d80528 100644
--- a/@navikt/core/react/src/layout/grid/HGrid.tsx
+++ b/@navikt/core/react/src/layout/grid/HGrid.tsx
@@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
+      const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
 
       const styles: React.CSSProperties = {
diff --git a/@navikt/core/react/src/layout/page/Page.tsx b/@navikt/core/react/src/layout/page/Page.tsx
index f0d0555fbc..24bddf0726 100644
--- a/@navikt/core/react/src/layout/page/Page.tsx
+++ b/@navikt/core/react/src/layout/page/Page.tsx
@@ -54,7 +54,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
+      const themeContext = useThemeInternal(false);
 
       if (process.env.NODE_ENV !== "production" && themeContext && background) {
         console.warn(
diff --git a/@navikt/core/react/src/layout/stack/Stack.tsx b/@navikt/core/react/src/layout/stack/Stack.tsx
index 6b2af88c39..68b8cfed95 100644
--- a/@navikt/core/react/src/layout/stack/Stack.tsx
+++ b/@navikt/core/react/src/layout/stack/Stack.tsx
@@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
+      const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
 
       const style: React.CSSProperties = {
diff --git a/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx b/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
index 18331ff66a..8d81e2bb13 100644
--- a/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
+++ b/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
@@ -736,7 +736,7 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     return (
       <Menu.RadioItem
diff --git a/@navikt/core/react/src/pagination/PaginationItem.tsx b/@navikt/core/react/src/pagination/PaginationItem.tsx
index 16ac365d19..2b929df2ef 100644
--- a/@navikt/core/react/src/pagination/PaginationItem.tsx
+++ b/@navikt/core/react/src/pagination/PaginationItem.tsx
@@ -40,7 +40,7 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     return (
       <Button
diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx
index 5612418739..ceb2961b8b 100644
--- a/@navikt/core/react/src/popover/Popover.tsx
+++ b/@navikt/core/react/src/popover/Popover.tsx
@@ -125,7 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
 
     const {
       update,
diff --git a/@navikt/core/react/src/portal/Portal.tsx b/@navikt/core/react/src/portal/Portal.tsx
index 1f5acf7446..96895ca2df 100644
--- a/@navikt/core/react/src/portal/Portal.tsx
+++ b/@navikt/core/react/src/portal/Portal.tsx
@@ -16,7 +16,7 @@ export type PortalProps = PortalBaseProps & AsChildProps;
 
 export const Portal = forwardRef<HTMLDivElement, PortalProps>(
   ({ rootElement, asChild, ...rest }, ref) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const contextRoot = useProvider()?.rootElement;
     const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
 
diff --git a/@navikt/core/react/src/timeline/Pin.tsx b/@navikt/core/react/src/timeline/Pin.tsx
index e69f5d7e7a..59899fe6da 100644
--- a/@navikt/core/react/src/timeline/Pin.tsx
+++ b/@navikt/core/react/src/timeline/Pin.tsx
@@ -48,7 +48,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const showArrow = !themeContext;
 
     const {
diff --git a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
index e68cb94367..8285ddfbeb 100644
--- a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
+++ b/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx
@@ -56,7 +56,7 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const showArrow = !themeContext;
 
     const {
diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx
index 24c7d16ed3..de8984d65d 100644
--- a/@navikt/core/react/src/tooltip/Tooltip.tsx
+++ b/@navikt/core/react/src/tooltip/Tooltip.tsx
@@ -124,7 +124,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal();
+    const themeContext = useThemeInternal(false);
     const showArrow = _arrow && !themeContext;
 
     const [_open, _setOpen] = useControllableState({

From 65e5de80e179d1131a5ffc67c8fb09d6bfe8fc85 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 17 Dec 2024 19:00:18 +0100
Subject: [PATCH 4/6] :bug: Removed unused storybook story

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

diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 6711d80ff5..5d60b137d5 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -133,10 +133,10 @@ export const Chromatic: Story = {
           <h2>BrandVolumeLow</h2>
           {BrandVolumeLow?.render?.(...props)}
         </div>
-        <div>
+        {/* <div>
           <h2>BrandVolumeHigh</h2>
           {BrandVolumeHigh?.render?.(...props)}
-        </div>
+        </div> */}
       </VStack>
     );
   },

From 764dc111b85c0833a9f888ecc93975634f912bfb Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:35:19 +0100
Subject: [PATCH 5/6] Update @navikt/core/react/src/theme/Theme.tsx

---
 @navikt/core/react/src/theme/Theme.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@navikt/core/react/src/theme/Theme.tsx b/@navikt/core/react/src/theme/Theme.tsx
index f2523aa3b3..416c30c072 100644
--- a/@navikt/core/react/src/theme/Theme.tsx
+++ b/@navikt/core/react/src/theme/Theme.tsx
@@ -9,7 +9,7 @@ type ThemeContext = {
    * Color theme
    * @default "light"
    */
-  theme?: "light" | "dark";
+  theme: "light" | "dark";
 };
 
 const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({

From 2a41a0f953db6f09a84e3277ec7b97d2c5cda304 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Fri, 20 Dec 2024 09:28:58 +0100
Subject: [PATCH 6/6] :memo: remove commented out code

---
 .../react/src/read-more/readmore.stories.tsx  | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 5d60b137d5..86d1cfe3ae 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -83,23 +83,6 @@ export const BrandVolumeLow: Story = {
   },
 };
 
-/* High volume temp disabled until we agree on concept */
-/* export const BrandVolumeHigh: Story = {
-  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 = {
   render: (...props) => {
     return (
@@ -133,10 +116,6 @@ export const Chromatic: Story = {
           <h2>BrandVolumeLow</h2>
           {BrandVolumeLow?.render?.(...props)}
         </div>
-        {/* <div>
-          <h2>BrandVolumeHigh</h2>
-          {BrandVolumeHigh?.render?.(...props)}
-        </div> */}
       </VStack>
     );
   },