@navikt/ds-react 7.40.0 → 8.0.1

package/src/button/Button.tsx

@@ -1,12 +1,20 @@
 import React, { forwardRef } from "react";
 import { Loader } from "../loader";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { omit } from "../util";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { OverridableComponent } from "../util/types";
 
+type legacyVariants =
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger";
+
+type HiddenVariant = legacyVariants & { __brand?: never };
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
@@ -17,14 +25,7 @@ export interface ButtonProps
    * Changes design and interaction-visuals.
    * @default "primary"
    */
-  variant?:
-    | "primary"
-    | "primary-neutral"
-    | "secondary"
-    | "secondary-neutral"
-    | "tertiary"
-    | "tertiary-neutral"
-    | "danger";
+  variant?: "primary" | "secondary" | "tertiary" | HiddenVariant;
   /**
    * Changes padding, height, and font-size.
    * @default "medium"
@@ -50,6 +51,14 @@ export interface ButtonProps
    * @default "left"
    */
   iconPosition?: "left" | "right";
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent`, `neutral` and `danger`.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -81,8 +90,6 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled || loading ? omit(rest, ["href"]) : rest;
 
@@ -100,21 +107,15 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           {...filterProps}
           ref={ref}
           onKeyUp={composeEventHandlers(onKeyUp, handleKeyUp)}
-          className={cn(
-            className,
-            "navds-button",
-            `navds-button--${variant}`,
-            `navds-button--${size}`,
-            {
-              "navds-button--loading": loading,
-              "navds-button--icon-only": !!icon && !children,
-              "navds-button--disabled": disabled ?? loading,
-            },
-          )}
-          disabled={disabled ?? loading ? true : undefined}
+          className={cl(className, "aksel-button", `aksel-button--${size}`, {
+            "aksel-button--loading": loading,
+            "aksel-button--icon-only": !!icon && !children,
+            "aksel-button--disabled": disabled ?? loading,
+          })}
+          disabled={(disabled ?? loading) ? true : undefined}
         >
           {icon && iconPosition === "left" && (
-            <span className={cn("navds-button__icon")}>{icon}</span>
+            <span className="aksel-button__icon">{icon}</span>
           )}
           {loading && <Loader size={size} />}
           {children && (
@@ -123,7 +124,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
             </Label>
           )}
           {icon && iconPosition === "right" && (
-            <span className={cn("navds-button__icon")}>{icon}</span>
+            <span className="aksel-button__icon">{icon}</span>
           )}
         </Component>
       );

package/src/chat/Bubble.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail, Heading, HeadingProps } from "../typography";
+import { cl } from "../util/className";
 
 export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -39,17 +39,15 @@ const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
-      <div ref={ref} className={cn("navds-chat__bubble", className)} {...rest}>
+      <div ref={ref} className={cl("aksel-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <Heading
             size="xsmall"
             level={toptextHeadingLevel}
-            className={cn(
-              `navds-chat__top-text`,
-              toptextPosition && `navds-chat__top-text--${toptextPosition}`,
+            className={cl(
+              "aksel-chat__top-text",
+              toptextPosition && `aksel-chat__top-text--${toptextPosition}`,
             )}
           >
             {name && <Detail as="span">{name}</Detail>}

package/src/chat/Chat.tsx

@@ -1,7 +1,8 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
+import { cl } from "../util/className";
 import Bubble, { type ChatBubbleProps } from "./Bubble";
 
 export const VARIANTS = ["subtle", "info", "neutral"] as const;
@@ -28,9 +29,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    */
   avatar?: React.ReactNode;
   /**
-   * Changes background color on avatar and bubbles.
-   * Avoid using the same background as the surface behind Chat.
-   * @default "neutral"
+   * @deprecated Use `data-color` prop instead.
    */
   variant?: (typeof VARIANTS)[number];
   /**
@@ -53,6 +52,14 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "3"
    */
   toptextHeadingLevel?: Exclude<HeadingProps["level"], "1">;
+  /**
+   * Overrides inherited color.
+   *
+   * We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 interface ChatComponent
@@ -100,33 +107,27 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
     }: ChatProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={ref}
-        className={cn(
-          "navds-chat",
+        className={cl(
+          "aksel-chat",
           className,
-          `navds-chat--${position}`,
-          `navds-chat--top-text-${toptextPosition ?? position}`,
-          `navds-chat--${size}`,
-          `navds-chat--${variant}`,
+          `aksel-chat--${position}`,
+          `aksel-chat--top-text-${toptextPosition ?? position}`,
+          `aksel-chat--${size}`,
+          `aksel-chat--${variant}`,
         )}
         data-color={color ?? variantToColor(variant)}
         {...rest}
         data-variant={variant}
       >
         {avatar && (
-          <div className={cn("navds-chat__avatar")} aria-hidden>
+          <div className="aksel-chat__avatar" aria-hidden>
             {avatar}
           </div>
         )}
-        <BodyLong
-          as="div"
-          size={size}
-          className={cn("navds-chat__bubble-wrapper")}
-        >
+        <BodyLong as="div" size={size} className="aksel-chat__bubble-wrapper">
           {React.Children.map(children, (child, i) => {
             if (!React.isValidElement<ChatBubbleProps>(child)) {
               return null;

package/src/chips/Chips.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import RemovableChips, { ChipsRemovableProps } from "./Removable";
 import ToggleChips, { ChipsToggleProps } from "./Toggle";
@@ -39,35 +39,34 @@ interface ChipsComponent
  *
  * @example
  * ```jsx
-      <Chips size="small">
-        {options.map((c) => (
-          <Chips.Toggle
-            selected={selected.includes(c)}
-            key={c}
-            onClick={() =>
-              setSelected(
-                selected.includes(c)
-                  ? selected.filter((x) => x !== c)
-                  : [...selected, c]
-              )
-            }
-          >
-            {c}
-          </Chips.Toggle>
-        ))}
-      </Chips>
+ *    <Chips size="small">
+ *      {options.map((c) => (
+ *        <Chips.Toggle
+ *          selected={selected.includes(c)}
+ *          key={c}
+ *          onClick={() =>
+ *            setSelected(
+ *              selected.includes(c)
+ *                ? selected.filter((x) => x !== c)
+ *                : [...selected, c]
+ *            )
+ *          }
+ *        >
+ *          {c}
+ *        </Chips.Toggle>
+ *      ))}
+ *    </Chips>
  * ```
  */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
   ({ className, size = "medium", children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <ul
         {...rest}
         ref={ref}
-        className={cn("navds-chips", className, `navds-chips--${size}`, {
-          "navds-body-short navds-body-short--small": size === "medium",
-          "navds-detail navds-detail--small": size === "small",
+        className={cl("aksel-chips", className, `aksel-chips--${size}`, {
+          "aksel-body-short aksel-body-short--small": size === "medium",
+          "aksel-detail aksel-detail--small": size === "small",
         })}
       >
         {React.Children.map(children, (chip, index) => {

package/src/chips/Removable.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -9,14 +9,19 @@ export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
-   * Chip-variants
-   * @default "action"
+   * @deprecated Use `data-color` prop instead.
    */
   variant?: "action" | "neutral";
   /**
    * Click callback
    */
   onDelete?: () => void;
+  /**
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 export const RemovableChips = forwardRef<
@@ -37,35 +42,22 @@ export const RemovableChips = forwardRef<
     ref,
   ) => {
     const translate = useI18n("Chips");
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-
-    let localVariant: ChipsRemovableProps["variant"] | undefined;
-
-    if (themeContext?.isDarkside) {
-      localVariant = variant;
-    } else {
-      localVariant = variant ?? "action";
-    }
 
     return (
       <button
-        data-color={color ?? variantToColor(localVariant)}
+        data-color={color ?? variantToColor(variant)}
         {...rest}
         ref={ref}
         type={type}
-        className={cn(
-          "navds-chips__chip navds-chips__removable navds-chips--icon-right",
+        className={cl(
+          "aksel-chips__chip aksel-chips__removable aksel-chips--icon-right",
           className,
-          {
-            [`navds-chips__removable--${localVariant}`]: localVariant,
-          },
         )}
         aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
-        <span className={cn("navds-chips__chip-text")}>{children}</span>
-        <span className={cn("navds-chips__removable-icon")}>
+        <span className="aksel-chips__chip-text">{children}</span>
+        <span className="aksel-chips__removable-icon">
           <XMarkIcon aria-hidden />
         </span>
       </button>

package/src/chips/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface ChipsToggleProps
@@ -11,10 +11,15 @@ export interface ChipsToggleProps
    */
   selected?: boolean;
   /**
-   * Chip-variants
-   * @default "action"
+   * @deprecated Use `data-color` prop instead.
    */
   variant?: "action" | "neutral";
+  /**
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
   /**
    * Toggles display of checkmark on selected
    * @default true
@@ -39,24 +44,13 @@ export const ToggleChips: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
-    let localVariant: ChipsToggleProps["variant"] | undefined;
-
-    if (themeContext?.isDarkside) {
-      localVariant = variant;
-    } else {
-      localVariant = variant ?? "action";
-    }
-
     return (
       <Component
-        data-color={color ?? variantToColor(localVariant)}
+        data-color={color ?? variantToColor(variant)}
         {...rest}
         ref={ref}
-        className={cn("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips__toggle--with-checkmark": checkmark,
-          [`navds-chips__toggle--${localVariant}`]: localVariant,
+        className={cl("aksel-chips__chip aksel-chips__toggle", className, {
+          "aksel-chips__toggle--with-checkmark": checkmark,
         })}
         aria-pressed={selected}
         data-pressed={selected}
@@ -64,7 +58,7 @@ export const ToggleChips: OverridableComponent<
         {checkmark && (
           <svg
             aria-hidden
-            className={cn("navds-chips__toggle-icon")}
+            className="aksel-chips__toggle-icon"
             width="1.25em"
             height="1.25em"
             viewBox="0 0 20 20"
@@ -86,12 +80,12 @@ export const ToggleChips: OverridableComponent<
                 clipRule="evenodd"
                 d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
                 /* After removing old fallbacks, change to currentColor */
-                fill="var(--ax-text-default, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
+                fill="var(--ax-text-default)"
               />
             )}
           </svg>
         )}
-        <span className={cn("navds-chips__chip-text")}>{children}</span>
+        <span className="aksel-chips__chip-text">{children}</span>
       </Component>
     );
   },

package/src/collapsible/Collapsible.tsx

@@ -46,7 +46,7 @@ interface CollapsibleComponent
  *     <Button>Button</Button>
  *   </Collapsible.Trigger>
  *   <Collapsible.Content asChild>
- *     <Box padding="4" background="surface-alt-3-subtle">
+ *     <Box padding="4" background="info-soft">
  *       <div>lorem ipsum</div>
  *     </Box>
  *   </Collapsible.Content>

package/src/copybutton/CopyButton.tsx

@@ -1,8 +1,9 @@
 import React, { ButtonHTMLAttributes, forwardRef, useState } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { Label } from "../typography";
+import type { AkselColor } from "../types/theme";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
 import { useTimeout } from "../util/hooks/useTimeout";
@@ -12,9 +13,18 @@ export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">,
     Pick<ButtonProps, "iconPosition" | "size"> {
   /**
-   * @default "neutral"
+   * @deprecated Use `data-color` attribute instead.
    */
   variant?: "action" | "neutral";
+  /**
+   * Overrides color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @default "neutral"
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
   /**
    * Text to copy to clipboard.
    */
@@ -36,7 +46,7 @@ export interface CopyButtonProps
    */
   onActiveChange?: (state: boolean) => void;
   /**
-   *  Icon shown when button is not clicked.
+   * Icon shown when button is not clicked.
    * @default <FilesIcon />
    */
   icon?: React.ReactNode;
@@ -75,7 +85,8 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       copyText,
       text,
       activeText,
-      variant = "neutral",
+      variant,
+      "data-color": dataColor = "neutral",
       onActiveChange,
       icon,
       activeIcon,
@@ -92,10 +103,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     const translate = useI18n("CopyButton");
     const timeout = useTimeout();
 
-    const { cn } = useRenameCSS();
-
-    const themeContext = useThemeInternal();
-
     const handleClick = () => {
       copy(copyText);
       setActive(true);
@@ -109,98 +116,52 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
 
     const activeString = activeText || translate("activeText");
 
-    const copyIcon = (
-      <LegacyIconWrapper useLegacy={!themeContext?.isDarkside}>
-        {active
-          ? (activeIcon ?? (
-              <CheckmarkIcon
-                aria-hidden={!!text}
-                title={text ? undefined : activeString}
-                className={
-                  themeContext?.isDarkside
-                    ? cn("navds-copybutton__icon")
-                    : undefined
-                }
-              />
-            ))
-          : (icon ?? (
-              <FilesIcon
-                aria-hidden={!!text}
-                title={text ? undefined : title || translate("title")}
-                className={
-                  themeContext?.isDarkside
-                    ? cn("navds-copybutton__icon")
-                    : undefined
-                }
-              />
-            ))}
-      </LegacyIconWrapper>
-    );
-
-    if (themeContext?.isDarkside) {
-      return (
-        <Button
-          ref={ref}
-          type="button"
-          className={cn("navds-copybutton", className)}
-          {...rest}
-          variant={variant === "action" ? "tertiary" : "tertiary-neutral"}
-          onClick={composeEventHandlers(onClick, handleClick)}
-          iconPosition={iconPosition}
-          icon={copyIcon}
-          data-active={active}
-          size={size}
-        >
-          {text ? (active ? activeString : text) : null}
-        </Button>
-      );
-    }
-
     return (
-      <button
+      <Button
         ref={ref}
         type="button"
+        className={cl("aksel-copybutton", className)}
         {...rest}
-        className={cn(
-          "navds-copybutton",
-          className,
-          `navds-copybutton--${size}`,
-          `navds-copybutton--${variant}`,
-          {
-            "navds-copybutton--icon-only": !text,
-            "navds-copybutton--icon-right": iconPosition === "right",
-            "navds-copybutton--active": active,
-          },
-        )}
+        variant="tertiary"
+        data-color={variantToDataColor(variant) ?? dataColor}
         onClick={composeEventHandlers(onClick, handleClick)}
+        iconPosition={iconPosition}
+        icon={
+          active
+            ? (activeIcon ?? (
+                <CheckmarkIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : activeString}
+                  className="aksel-copybutton__icon"
+                />
+              ))
+            : (icon ?? (
+                <FilesIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : title || translate("title")}
+                  className="aksel-copybutton__icon"
+                />
+              ))
+        }
+        data-active={active}
+        size={size}
       >
-        <span className={cn("navds-copybutton__content")}>
-          {iconPosition === "left" && copyIcon}
-          {text && (
-            <Label as="span" size={size === "medium" ? "medium" : "small"}>
-              {active ? activeString : text}
-            </Label>
-          )}
-          {iconPosition === "right" && copyIcon}
-        </span>
-      </button>
+        {text ? (active ? activeString : text) : null}
+      </Button>
     );
   },
 );
 
-function LegacyIconWrapper({
-  children,
-  useLegacy,
-}: {
-  children: React.ReactNode;
-  useLegacy: boolean;
-}) {
-  const { cn } = useRenameCSS();
-
-  if (!useLegacy) {
-    return children;
+function variantToDataColor(
+  variant: CopyButtonProps["variant"],
+): Exclude<AkselColor, AkselStatusColorRole> | undefined {
+  if (variant === "action") {
+    return "accent";
+  }
+  if (variant === "neutral") {
+    return "neutral";
   }
-  return <span className={cn("navds-copybutton__icon")}>{children}</span>;
+  return undefined;
 }
 
 export default CopyButton;

package/src/date/Date.Dialog.tsx

@@ -4,7 +4,7 @@ import { useDialogContext } from "../dialog/root/DialogRoot.context";
 import { Modal } from "../modal";
 import { useModalContext } from "../modal/Modal.context";
 import { Popover } from "../popover";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { useMedia } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -43,7 +43,6 @@ const DateDialog = ({
   popoverProps,
 }: DateWrapperProps) => {
   const translateGlobal = useI18n("global", getGlobalTranslations(locale));
-  const { cn } = useRenameCSS();
 
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -61,13 +60,12 @@ const DateDialog = ({
   if (hideModal) {
     return (
       <Popover
-        arrow={false}
         anchorEl={anchor}
         open={open}
         onClose={onClose}
         placement="bottom-start"
-        className={cn("navds-date__popover", {
-          "navds-date": variant === "month",
+        className={cl("aksel-date__popover", {
+          "aksel-date": variant === "month",
         })}
         {...popoverProps}
       >
@@ -85,14 +83,14 @@ const DateDialog = ({
         onClose();
       }}
       aria-label={translate(variantToLabel[variant])}
-      className={cn("navds-date__modal", {
-        "navds-date__nested-modal": isInModal,
-        "navds-date": variant === "month",
+      className={cl("aksel-date__modal", {
+        "aksel-date__nested-modal": isInModal,
+        "aksel-date": variant === "month",
       })}
       closeOnBackdropClick
       placement="top"
     >
-      <div className={cn("navds-date__modal-body")}>
+      <div className="aksel-date__modal-body">
         {children}
         <Button
           variant="tertiary"