@navikt/ds-react 7.22.0 → 7.23.0

package/src/chat/Chat.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
 import Bubble from "./Bubble";
 
@@ -94,6 +95,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       toptextPosition,
       size = "medium",
       toptextHeadingLevel = "3",
+      "data-color": color,
       ...rest
     }: ChatProps,
     ref,
@@ -111,7 +113,9 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
           `navds-chat--${size}`,
           `navds-chat--${variant}`,
         )}
+        data-color={color ?? variantToColor(variant)}
         {...rest}
+        data-variant={variant}
       >
         {avatar && (
           <div className={cn("navds-chat__avatar")} aria-hidden>
@@ -139,6 +143,19 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
   },
 ) as ChatComponent;
 
+function variantToColor(variant: ChatProps["variant"]): AkselColor {
+  switch (variant) {
+    case "neutral":
+      return "neutral";
+    case "subtle":
+      return "neutral";
+    case "info":
+      return "info";
+    default:
+      return "neutral";
+  }
+}
+
 Chat.Bubble = Bubble;
 
 export default Chat;

package/src/chips/Removable.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -25,27 +26,40 @@ export const RemovableChips = forwardRef<
   (
     {
       children,
-      variant = "action",
+      variant,
       onDelete,
       className,
       onClick,
       type = "button",
+      "data-color": color,
       ...rest
     },
     ref,
   ) => {
     const translate = useI18n("Chips");
+    const themeContext = useThemeInternal(false);
     const { cn } = useRenameCSS();
 
+    let localVariant: ChipsRemovableProps["variant"] | undefined;
+
+    if (themeContext) {
+      localVariant = variant;
+    } else {
+      localVariant = variant ?? "action";
+    }
+
     return (
       <button
+        data-color={color ?? variantToColor(localVariant)}
         {...rest}
         ref={ref}
         type={type}
         className={cn(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
-          `navds-chips__removable--${variant}`,
+          {
+            [`navds-chips__removable--${localVariant}`]: localVariant,
+          },
         )}
         aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
@@ -59,4 +73,17 @@ export const RemovableChips = forwardRef<
   },
 );
 
+function variantToColor(
+  variant?: ChipsRemovableProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 
 export interface ChipsToggleProps
@@ -30,25 +31,33 @@ export const ToggleChips: OverridableComponent<
       className,
       children,
       selected,
-      variant = "action",
+      variant,
       checkmark = true,
       as: Component = "button",
+      "data-color": color,
       ...rest
     },
     ref,
   ) => {
     const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
+    let localVariant: ChipsToggleProps["variant"] | undefined;
+
+    if (themeContext) {
+      localVariant = variant;
+    } else {
+      localVariant = variant ?? "action";
+    }
 
     return (
       <Component
+        data-color={color ?? variantToColor(localVariant)}
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-chips__chip navds-chips__toggle",
-          className,
-          `navds-chips__toggle--${variant}`,
-          { "navds-chips__toggle--with-checkmark": checkmark },
-        )}
+        className={cn("navds-chips__chip navds-chips__toggle", className, {
+          "navds-chips__toggle--with-checkmark": checkmark,
+          [`navds-chips__toggle--${localVariant}`]: localVariant,
+        })}
         aria-pressed={selected}
         data-pressed={selected}
       >
@@ -77,11 +86,7 @@ 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(${
-                  variant === "action"
-                    ? "--ax-text-accent"
-                    : "--ax-text-neutral"
-                }, var(--ac-chip-toggle-circle-border, var(--a-border-default)))`}
+                fill="var(--ax-text-default, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
               />
             )}
           </svg>
@@ -92,4 +97,17 @@ export const ToggleChips: OverridableComponent<
   },
 );
 
+function variantToColor(
+  variant?: ChipsToggleProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 export default ToggleChips;

package/src/expansion-card/ExpansionCard.tsx

@@ -113,6 +113,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
       open,
       defaultOpen = false,
       size = "medium",
+      "data-color": color = "neutral",
       ...rest
     },
     ref,
@@ -138,6 +139,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
         }}
       >
         <section
+          data-color={color}
           {...rest}
           className={cn(
             "navds-expansioncard",

package/src/form/checkbox/Checkbox.tsx

@@ -27,6 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "navds-checkbox--readonly": readOnly,
           },
         )}
+        data-color={hasError ? "danger" : props["data-color"]}
       >
         <input
           {...omit(props, [

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -27,7 +27,12 @@ const Option = ({ option }: { option: ComboboxOption }) => {
 
   if (readOnly || inputProps.disabled) {
     return (
-      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+      <Chips.Toggle
+        data-color="neutral"
+        variant="neutral"
+        checkmark={false}
+        as="div"
+      >
         {option.label}
       </Chips.Toggle>
     );

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -60,7 +60,7 @@ export const ConfirmationPanel = forwardRef<
 
   const id = useId();
 
-  const currentRole = hasError
+  const currentColor = hasError
     ? "danger"
     : props.checked
       ? "success"
@@ -73,7 +73,7 @@ export const ConfirmationPanel = forwardRef<
         "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
-      data-color-role={currentRole}
+      data-color={currentColor}
     >
       <div className={cn("navds-confirmation-panel__inner")}>
         {children && (

package/src/form/error-summary/ErrorSummary.tsx

@@ -105,7 +105,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         <Heading
           className={cn("navds-error-summary__heading")}
           as={headingTag}
-          size="small"
+          size={size === "medium" ? "small" : "xsmall"}
           ref={headingRef}
           tabIndex={-1}
         >

package/src/form/form-summary/FormSummaryAnswers.tsx

@@ -12,18 +12,29 @@ export interface FormSummaryAnswersProps
 export const FormSummaryAnswers = forwardRef<
   HTMLDListElement,
   FormSummaryAnswersProps
->(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => {
-  const { cn } = useRenameCSS();
+>(
+  (
+    {
+      children,
+      className,
+      "data-color": color = "info",
+      ...rest
+    }: FormSummaryAnswersProps,
+    ref,
+  ) => {
+    const { cn } = useRenameCSS();
 
-  return (
-    <dl
-      ref={ref}
-      {...rest}
-      className={cn("navds-form-summary__answers", className)}
-    >
-      {children}
-    </dl>
-  );
-});
+    return (
+      <dl
+        ref={ref}
+        data-color={color}
+        {...rest}
+        className={cn("navds-form-summary__answers", className)}
+      >
+        {children}
+      </dl>
+    );
+  },
+);
 
 export default FormSummaryAnswers;

package/src/form/radio/Radio.tsx

@@ -21,6 +21,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         "navds-radio--disabled": inputProps.disabled,
         "navds-radio--readonly": readOnly,
       })}
+      data-color={hasError ? "danger" : props["data-color"]}
     >
       <input
         {...omit(props, ["children", "size", "description", "readOnly"])}

package/src/form/search/Search.tsx

@@ -91,7 +91,7 @@ interface SearchComponent
  * @example
  * ```jsx
  * <form role="search">
- *   <Search label="Søk alle Nav sine sider" variant="primary" />
+ *   <Search label="Søk i alle Nav sine sider" variant="primary" />
  * </form>
  * ```
  */
@@ -155,7 +155,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       themeContext ? (
         <Button
           className={cn("navds-search__button-clear")}
-          variant="tertiary-neutral"
+          variant="tertiary"
+          data-color="neutral"
           size={size === "medium" ? "small" : "xsmall"}
           icon={<XMarkIcon aria-hidden />}
           title={clearButtonLabel || translate("clear")}

package/src/guide-panel/GuidePanel.tsx

@@ -35,12 +35,23 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
-  ({ children, className, illustration, poster, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      illustration,
+      poster,
+      "data-color": color = "info",
+      ...rest
+    },
+    ref,
+  ) => {
     const { cn } = useRenameCSS();
     const themeContext = useThemeInternal(false);
 
     return (
       <div
+        data-color={color}
         {...rest}
         ref={ref}
         className={cn("navds-guide-panel", className, {
@@ -81,7 +92,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M0 20C-2.87106e-10 19.9934 3.21047e-05 19.987 9.68646e-05 19.9804C0.0494722 14.9659 0.299239 11.5341 0.964025 8.68212C1.64231 5.77217 2.72947 3.56367 4.28501 0.971094C4.71185 0.259692 5.53358 -0.114327 6.35038 0.0310157C7.16718 0.176359 7.80944 0.810884 7.96467 1.62586C8.84145 6.22896 11.9453 10.3172 16.2599 13.2908C20.5715 16.2623 25.9294 18.0001 31 18.0001C32.1046 18.0001 33 18.8954 33 20L0 20ZM6.755 4.70521C8.97688 10.7068 14.4934 15.469 20.8803 18.0001C24.1345 19.2897 27.6146 20.0001 31 20.0001L2 20.0001C2.00689 19.3003 2.01774 18.6346 2.033 18.0001C2.19625 11.2107 2.86405 7.98363 4.58479 4.54371C4.9944 3.72487 5.46367 2.89399 6 2.00011C6.17639 2.92619 6.43058 3.82889 6.755 4.70521Z"
-                fill="var(--ax-border-info)"
+                fill="var(--ax-border-default)"
               />
             </svg>
           )}

package/src/guide-panel/Illustration.darkside.tsx

@@ -16,12 +16,7 @@ export const DarksideGudiepanelIllustration = () => {
       role="img"
     >
       <g clipPath="url(#clip0_1387_21067)">
-        <rect
-          width="80"
-          height="80"
-          rx="40"
-          fill="var(--ax-bg-info-moderate)"
-        />
+        <rect width="80" height="80" rx="40" fill="var(--ax-bg-moderate)" />
 
         <path
           fillRule="evenodd"

package/src/help-text/HelpText.tsx

@@ -44,6 +44,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       title,
       onClick,
       wrapperClassName,
+      "data-color": color = "info",
       ...rest
     },
     ref,
@@ -58,7 +59,10 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const titleWithFallback = title || translate("title");
 
     return (
-      <div className={cn("navds-help-text", wrapperClassName)}>
+      <div
+        className={cn("navds-help-text", wrapperClassName)}
+        data-color={color}
+      >
         <button
           {...rest}
           ref={mergedRef}

package/src/layout/box/Box.darkside.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from "react";
 import type {
-  BorderColorKeys,
-  BorderColorWithRoleKeys,
-  ShadowKeys,
-  StaticBgKeys,
-  StaticDefaultBgKeys,
+  AkselColoredBorderToken,
+  AkselColoredStatelessBackgroundToken,
+  AkselRootBackgroundToken,
+  AkselRootBorderToken,
+  AkselShadowToken,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { useRenameCSS } from "../../theme/Theme";
@@ -28,13 +28,15 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
    * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
    */
-  background?: StaticDefaultBgKeys | StaticBgKeys;
+  background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
   /**
    * CSS `border-color` property.
    * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
    * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
    */
-  borderColor?: Exclude<BorderColorKeys, "focus"> | BorderColorWithRoleKeys;
+  borderColor?:
+    | Exclude<AkselRootBorderToken, "focus">
+    | AkselColoredBorderToken;
   /**
    * CSS `border-radius` property.
    * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
@@ -60,7 +62,7 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * shadow='small'
    * @see {@link ShadowKeys}
    */
-  shadow?: ShadowKeys;
+  shadow?: AkselShadowToken;
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 

package/src/layout/utilities/css.ts

@@ -1,8 +1,8 @@
 import type {
-  BorderRadiusKeys,
-  LegacyBorderRadiusKeys,
-  LegacySpacingKeys,
-  SpaceKeys,
+  AkselBorderRadiusToken,
+  AkselLegacyBorderRadiusToken,
+  AkselLegacySpacingToken,
+  AkselSpaceToken,
 } from "@navikt/ds-tokens/types";
 import { ResponsiveProp } from "./types";
 
@@ -34,8 +34,8 @@ export function getResponsiveValue<T = string>(
  * Temporary lookup for mapping legacy spacing tokens to new space tokens.
  */
 const legacySpacingTokenLookup: Record<
-  `--ax-spacing-${LegacySpacingKeys}`,
-  `--ax-${SpaceKeys}`
+  `--ax-spacing-${AkselLegacySpacingToken}`,
+  `--ax-${AkselSpaceToken}`
 > = {
   "--ax-spacing-32": "--ax-space-128",
   "--ax-spacing-24": "--ax-space-96",
@@ -61,8 +61,8 @@ const legacySpacingTokenLookup: Record<
 };
 
 const legacyBorderRadiusNameTokenLookup: Record<
-  `${LegacyBorderRadiusKeys}`,
-  `${BorderRadiusKeys}`
+  `${AkselLegacyBorderRadiusToken}`,
+  `${AkselBorderRadiusToken}`
 > = {
   full: "full",
   xlarge: "12",

package/src/layout/utilities/types.ts

@@ -1,27 +1,29 @@
 import type {
-  BorderRadiusKeys,
-  BreakPointKeys,
-  LegacyBgColorKeys,
-  LegacyBorderColorKeys,
-  LegacyBorderRadiusKeys,
-  LegacyShadowKeys,
-  LegacySpacingKeys,
-  LegacySurfaceColorKeys,
-  SpaceKeys,
+  AkselBorderRadiusToken,
+  AkselBreakpointToken,
+  AkselLegacyBackgroundColorToken,
+  AkselLegacyBorderColorToken,
+  AkselLegacyBorderRadiusToken,
+  AkselLegacyShadowToken,
+  AkselLegacySpacingToken,
+  AkselLegacySurfaceColorToken,
+  AkselSpaceToken,
 } from "@navikt/ds-tokens/types";
 
-export type BackgroundColorToken = LegacyBgColorKeys;
-export type SurfaceColorToken = LegacySurfaceColorKeys;
-export type BorderColorToken = LegacyBorderColorKeys;
-export type ShadowToken = LegacyShadowKeys;
+export type BackgroundColorToken = AkselLegacyBackgroundColorToken;
+export type SurfaceColorToken = AkselLegacySurfaceColorToken;
+export type BorderColorToken = AkselLegacyBorderColorToken;
+export type ShadowToken = AkselLegacyShadowToken;
 
 export type BreakpointsAlias = Extract<
-  BreakPointKeys,
+  AkselBreakpointToken,
   "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 >;
 
-export type SpacingScale = LegacySpacingKeys | SpaceKeys;
-export type BorderRadiusScale = LegacyBorderRadiusKeys | BorderRadiusKeys;
+export type SpacingScale = AkselLegacySpacingToken | AkselSpaceToken;
+export type BorderRadiusScale =
+  | AkselLegacyBorderRadiusToken
+  | AkselBorderRadiusToken;
 
 export type SpaceDelimitedAttribute<T extends string> =
   | T

package/src/link/Link.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 
 export interface LinkProps
@@ -56,18 +57,35 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
         as: Component = "a",
         className,
         underline = true,
-        variant = "action",
+        variant,
         inlineText = false,
+        "data-color": color,
         ...rest
       },
       ref,
     ) => {
+      const themeContext = useThemeInternal(false);
       const { cn } = useRenameCSS();
+
+      /*
+       * We avoid defaulting to "action" in darkside.
+       */
+      let localVariant: LinkProps["variant"];
+
+      if (themeContext) {
+        localVariant = variant;
+      } else {
+        localVariant = variant ?? "action";
+      }
+
       return (
         <Component
+          data-color={color ?? variantToColor(localVariant)}
+          data-variant={localVariant}
           {...rest}
           ref={ref}
-          className={cn("navds-link", className, `navds-link--${variant}`, {
+          className={cn("navds-link", className, {
+            [`navds-link--${localVariant}`]: localVariant,
             "navds-link--remove-underline": !underline,
             "navds-link--inline-text": inlineText,
           })}
@@ -76,4 +94,19 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
     },
   );
 
+function variantToColor(
+  variant?: LinkProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    case "subtle":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 export default Link;

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;