@navikt/ds-react 7.21.1 → 7.23.0

package/src/loader/Loader.tsx

@@ -1,5 +1,6 @@
 import React, { SVGProps, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -33,6 +34,10 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
    * @default "neutral"
    */
   variant?: "neutral" | "interaction" | "inverted";
+  /**
+   * Overrides loader-color
+   */
+  "data-color"?: AkselColor;
 }
 
 /* Workaround for @types/react v17/v18 feil */
@@ -60,6 +65,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       transparent = false,
       variant = "neutral",
       id,
+      "data-color": color,
       ...rest
     },
     ref,
@@ -84,7 +90,9 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         focusable="false"
         viewBox="0 0 50 50"
         preserveAspectRatio="xMidYMid"
+        data-color={color ?? variantToColor(variant)}
         {...omit(rest, ["children"])}
+        data-variant={variant}
       >
         <title id={id ?? `loader-${internalId}`}>
           {title || translate("title")}
@@ -110,4 +118,20 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
   },
 );
 
+function variantToColor(
+  variant: LoaderProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "neutral":
+      return "neutral";
+    case "inverted":
+      return "neutral";
+    /* We assume "interaction" is the main app color in this instance */
+    case "interaction":
+      return undefined;
+    default:
+      return "neutral";
+  }
+}
+
 export default Loader;

package/src/loader/index.ts

@@ -1,3 +1,3 @@
 "use client";
 export { default as Loader } from "./Loader";
-export { type LoaderProps } from "./Loader";
+export type { LoaderProps } from "./Loader";

package/src/modal/index.ts

@@ -3,4 +3,4 @@ export { default as Modal } from "./Modal";
 export { default as ModalBody, type ModalBodyProps } from "./ModalBody";
 export { default as ModalFooter, type ModalFooterProps } from "./ModalFooter";
 export { default as ModalHeader, type ModalHeaderProps } from "./ModalHeader";
-export { type ModalProps } from "./types";
+export type { ModalProps } from "./types";

package/src/overlays/action-menu/ActionMenu.tsx

@@ -669,7 +669,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <rect
                   x="6"
@@ -685,7 +685,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <path
                   d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
@@ -808,7 +808,7 @@ export const ActionMenuRadioItem = forwardRef<
                     width="24"
                     height="24"
                     rx="12"
-                    fill="var(--ax-bg-accent-strong-pressed)"
+                    fill="var(--ax-bg-strong-pressed)"
                   />
                   <rect
                     x="8"
@@ -835,12 +835,12 @@ export const ActionMenuRadioItem = forwardRef<
                     width="22"
                     height="22"
                     rx="11"
-                    stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                    stroke="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
                     strokeWidth="2"
                   />
                   <path
                     d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                    fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                    fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
                   />
                 </g>
               )}

package/src/pagination/Pagination.tsx

@@ -150,6 +150,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       srHeading,
       "aria-labelledby": ariaLabelledBy,
       renderItem: Item = PaginationItem,
+      "data-color": color,
       ...rest
     },
     ref,
@@ -179,6 +180,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       <nav
         ref={ref}
         {...rest}
+        data-color={color}
         aria-labelledby={
           srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
@@ -201,6 +203,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         <ul className={cn("navds-pagination__list")}>
           <li>
             <Item
+              data-color={color}
               className={cn("navds-pagination__prev-next", {
                 "navds-pagination--invisible": page === 1,
                 "navds-pagination--prev-next--with-text": prevNextTexts,
@@ -238,6 +241,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               ) : (
                 <li key={step}>
                   <Item
+                    data-color={color}
                     /* Remember to update RenderItemProps if you make changes to props sent into Item */
                     onClick={() => onPageChange?.(n)}
                     selected={page === n}
@@ -252,6 +256,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           )}
           <li>
             <Item
+              data-color={color}
               className={cn("navds-pagination__prev-next", {
                 "navds-pagination--invisible": page === count,
                 "navds-pagination--prev-next--with-text": prevNextTexts,

package/src/pagination/PaginationItem.tsx

@@ -35,6 +35,7 @@ export const Item: PaginationItemType = forwardRef(
       selected = false,
       className,
       page,
+      "data-color": color,
       ...rest
     },
     ref,
@@ -46,8 +47,9 @@ export const Item: PaginationItemType = forwardRef(
       <Button
         as={Component}
         variant={themeContext ? "tertiary-neutral" : "tertiary"}
+        data-color={color}
         aria-current={selected}
-        data-selected={selected}
+        data-pressed={selected}
         ref={ref}
         className={cn("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,

package/src/panel/index.ts

@@ -1,2 +1,2 @@
 export { default as Panel } from "./Panel";
-export { type PanelProps } from "./Panel";
+export type { PanelProps } from "./Panel";

package/src/portal/Portal.tsx

@@ -29,7 +29,12 @@ export const Portal = forwardRef<HTMLDivElement, PortalProps>(
     if (themeContext) {
       return root
         ? ReactDOM.createPortal(
-            <Theme theme={themeContext.theme} asChild hasBackground={false}>
+            <Theme
+              theme={themeContext.theme}
+              asChild
+              hasBackground={false}
+              data-color={themeContext.color}
+            >
               <Component ref={ref} data-aksel-portal="" {...rest} />
             </Theme>,
             root,

package/src/react-css.d.ts

@@ -1,5 +1,4 @@
 import "react";
-import type { GlobalColorRoles } from "@navikt/ds-tokens/types";
 
 declare module "react" {
   interface CSSProperties {
@@ -8,7 +7,4 @@ declare module "react" {
     [key: `--axc-${string}`]: string | number | undefined;
     [key: `--__axc-${string}`]: string | number | undefined;
   }
-  interface HTMLAttributes {
-    "data-color-role"?: GlobalColorRoles;
-  }
 }

package/src/stepper/Stepper.tsx

@@ -100,16 +100,17 @@ export const Stepper: StepperComponent = forwardRef<
           const stepProps: Partial<StepperStepProps> =
             React.isValidElement<StepperStepProps>(step) ? step.props : {};
 
+          const isInteractive = stepProps.interactive ?? interactive;
+
           return (
             <li
               className={cn("navds-stepper__item", {
                 /* TODO: Remove these 3 classNames in darkmode update */
                 "navds-stepper__item--behind": activeStep > index,
                 "navds-stepper__item--completed": stepProps.completed,
-                "navds-stepper__item--non-interactive": !(
-                  stepProps.interactive ?? interactive
-                ),
+                "navds-stepper__item--non-interactive": !isInteractive,
               })}
+              data-color={isInteractive ? undefined : "neutral"}
               key={index + (children?.toString?.() ?? "")}
             >
               <span

package/src/table/index.ts

@@ -13,4 +13,4 @@ export { default as TableHeader, type HeaderProps } from "./Header";
 export { default as TableHeaderCell, type HeaderCellProps } from "./HeaderCell";
 export { default as TableRow, type RowProps } from "./Row";
 export { default as Table, type TableProps } from "./Table";
-export { type SortState } from "./types";
+export type { SortState } from "./types";

package/src/tabs/index.ts

@@ -1,6 +1,6 @@
 "use client";
 export { default as Tabs } from "./Tabs";
-export { type TabsProps } from "./Tabs.types";
+export type { TabsProps } from "./Tabs.types";
 export { default as TabsTab, type TabProps } from "./parts/tab/Tab";
 export {
   default as TabsList,

package/src/tag/Tag.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
@@ -62,14 +63,26 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      variant,
+      size = "medium",
+      icon,
+      "data-color": color,
+      ...rest
+    },
+    ref,
+  ) => {
     const { cn } = useRenameCSS();
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
-    const color = variant?.replace("-filled", "").replace("-moderate", "");
 
     return (
       <BodyShort
+        data-color={color ?? variantToColor(variant)}
+        data-variant={filledVariant || moderateVariant || "outline"}
         {...rest}
         ref={ref}
         as="span"
@@ -79,8 +92,6 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
           className,
           `navds-tag--${variant}`,
           `navds-tag--${size}`,
-          `navds-tag--${filledVariant || moderateVariant || "outline"}`,
-          `navds-tag--${color}`,
         )}
       >
         {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
@@ -90,4 +101,42 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
   },
 );
 
+function variantToColor(variant: TagProps["variant"]): AkselColor {
+  switch (variant) {
+    case "warning":
+    case "warning-filled":
+    case "warning-moderate":
+      return "warning";
+    case "error":
+    case "error-filled":
+    case "error-moderate":
+      return "danger";
+    case "info":
+    case "info-filled":
+    case "info-moderate":
+    case "alt3":
+    case "alt3-filled":
+    case "alt3-moderate":
+      return "info";
+    case "success":
+    case "success-filled":
+    case "success-moderate":
+      return "success";
+    case "neutral":
+    case "neutral-filled":
+    case "neutral-moderate":
+      return "neutral";
+    case "alt1":
+    case "alt1-filled":
+    case "alt1-moderate":
+      return "meta-purple";
+    case "alt2":
+    case "alt2-filled":
+    case "alt2-moderate":
+      return "meta-lime";
+    default:
+      return "neutral";
+  }
+}
+
 export default Tag;

package/src/theme/Theme.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../slot/Slot";
+import { AkselColor } from "../types";
 import { createContext } from "../util/create-context";
 import { AsChildProps } from "../util/types";
 
@@ -50,6 +51,7 @@ type ThemeContext = {
    * @default Inherits parent theme, or "light" if root
    */
   theme?: "light" | "dark";
+  color?: AkselColor;
 };
 
 const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
@@ -60,8 +62,15 @@ const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
 
 export type ThemeProps = {
   className?: string;
+  /**
+   * Sets default background when enabled
+   */
   hasBackground?: boolean;
-} & ThemeContext &
+  /**
+   * Sets default 'base'-color for application
+   */
+  "data-color"?: AkselColor;
+} & Omit<ThemeContext, "color"> &
   AsChildProps;
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
@@ -74,6 +83,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
       asChild = false,
       theme = context?.theme,
       hasBackground: hasBackgroundProp = true,
+      "data-color": color = context?.color,
     } = props;
 
     const isRoot = context === undefined;
@@ -84,12 +94,13 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
     const SlotElement = asChild ? Slot : "div";
 
     return (
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme} color={color}>
         <RenameCSS>
           <SlotElement
             ref={ref}
             className={cl("aksel-theme", className, theme)}
             data-background={hasBackground}
+            data-color={color}
           >
             {children}
           </SlotElement>

package/src/timeline/Pin.tsx

@@ -11,7 +11,6 @@ import {
   useFocus,
   useHover,
   useInteractions,
-  useRole,
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
@@ -79,13 +78,11 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     });
     const focus = useFocus(context);
     const dismiss = useDismiss(context);
-    const role = useRole(context, { role: "dialog" });
 
     const { getFloatingProps, getReferenceProps } = useInteractions([
       hover,
       focus,
       dismiss,
-      role,
     ]);
 
     const mergedRef = useMergeRefs(refs.setReference, ref);
@@ -135,6 +132,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
               className={cn("navds-timeline__popover")}
               data-placement={placement}
               ref={refs.setFloating}
+              role="dialog"
               {...getFloatingProps()}
               style={floatingStyles}
             >

package/src/timeline/period/ClickablePeriod.tsx

@@ -11,7 +11,6 @@ import {
   useFocus,
   useHover,
   useInteractions,
-  useRole,
 } from "@floating-ui/react";
 import React, { useRef, useState } from "react";
 import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
@@ -91,13 +90,11 @@ const ClickablePeriod = React.memo(
     });
     const focus = useFocus(context);
     const dismiss = useDismiss(context);
-    const role = useRole(context, { role: "dialog" });
 
     const { getFloatingProps, getReferenceProps } = useInteractions([
       hover,
       focus,
       dismiss,
-      role,
     ]);
 
     const mergedRef = useMergeRefs(refs.setReference, periodRef);
@@ -113,6 +110,7 @@ const ClickablePeriod = React.memo(
       <>
         <button
           {...restProps}
+          data-color={restProps?.["data-color"] ?? status}
           type="button"
           ref={(r) => {
             firstFocus && addFocusable(r, index);
@@ -169,6 +167,7 @@ const ClickablePeriod = React.memo(
               className={cn("navds-timeline__popover")}
               data-placement={placement}
               ref={refs.setFloating}
+              role="dialog"
               {...getFloatingProps()}
               style={floatingStyles}
             >

package/src/timeline/period/NonClickablePeriod.tsx

@@ -28,6 +28,7 @@ const NonClickablePeriod = ({
     <div
       ref={periodRef}
       {...restProps}
+      data-color={restProps?.["data-color"] ?? status}
       className={cn(
         getConditionalClasses(cropped, direction, status),
         restProps?.className,

package/src/timeline/utils/period.ts

@@ -6,7 +6,7 @@ import type { PeriodProps } from "../period/types";
 export const getConditionalClasses = (
   cropped: string,
   direction: string,
-  status: string,
+  status: PeriodProps["status"],
 ) => {
   /* Renaming to aksel-* happends where these are used, so no need to rename here */
   return cl(`navds-timeline__period navds-timeline__period--${status}`, {

package/src/toggle-group/ToggleGroup.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { useId } from "../util";
 import {
@@ -48,13 +49,15 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       value,
       defaultValue,
       "aria-describedby": userDescribedby,
-      variant = "action",
+      variant,
       fill = false,
+      "data-color": color,
       ...rest
     },
     ref,
   ) => {
     const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -81,6 +84,14 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       console.error("ToggleGroup needs either a value or defaultValue");
     }
 
+    let localVariant: ToggleGroupProps["variant"] | undefined;
+
+    if (themeContext) {
+      localVariant = variant;
+    } else {
+      localVariant = variant ?? "action";
+    }
+
     return (
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
@@ -88,6 +99,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             className={cn("navds-toggle-group__wrapper", className, {
               "navds-toggle-group__wrapper--fill": fill,
             })}
+            data-color={color ?? variantToColor(localVariant)}
           >
             {label && (
               <Label
@@ -104,7 +116,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               className={cn(
                 "navds-toggle-group",
                 `navds-toggle-group--${size}`,
-                `navds-toggle-group--${variant}`,
+                { [`navds-toggle-group--${localVariant}`]: localVariant },
               )}
               aria-describedby={
                 cl(userDescribedby, !!label && labelId) || undefined
@@ -120,6 +132,19 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   },
 ) as ToggleGroupComponent;
 
+function variantToColor(
+  variant?: ToggleGroupProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 ToggleGroup.Item = ToggleItem;
 
 export default ToggleGroup;

package/src/toggle-group/index.ts

@@ -1,6 +1,6 @@
 "use client";
 export { default as ToggleGroup } from "./ToggleGroup";
-export { type ToggleGroupProps } from "./ToggleGroup.types";
+export type { ToggleGroupProps } from "./ToggleGroup.types";
 export {
   default as ToggleGroupItem,
   type ToggleGroupItemProps,

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./theme";

package/src/types/theme.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import type { AkselColorRole } from "@navikt/ds-tokens/types";
+
+// biome-ignore lint/suspicious/noEmptyInterface: Users can/will augment this interface
+export interface CustomAkselColor {}
+
+export type AkselColor = AkselColorRole | keyof CustomAkselColor;
+
+declare global {
+  namespace React {
+    interface HTMLAttributes {
+      "data-color"?: AkselColor | (string & {});
+    }
+  }
+}