@navikt/ds-react 7.21.1 → 7.23.0

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/date/monthpicker/index.ts

@@ -1,7 +1,7 @@
 "use client";
 export { useMonthpicker, type MonthValidationT } from "./hooks/useMonthPicker";
 export { default as MonthPicker } from "./MonthPicker";
-export { type MonthPickerProps } from "./MonthPicker.types";
+export type { MonthPickerProps } from "./MonthPicker.types";
 export {
   MonthPickerStandalone,
   type MonthPickerStandaloneProps,

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/checkbox/index.ts

@@ -4,4 +4,4 @@ export {
   default as CheckboxGroup,
   type CheckboxGroupProps,
 } from "./CheckboxGroup";
-export { type CheckboxProps } from "./types";
+export type { CheckboxProps } from "./types";

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/combobox/index.ts

@@ -1,3 +1,3 @@
 "use client";
 export { default as UNSAFE_Combobox } from "./ComboboxProvider";
-export { type ComboboxProps } from "./types";
+export type { ComboboxProps } from "./types";

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

@@ -31,6 +31,7 @@ export interface ConfirmationPanelProps
 
 /**
  * A component that displays a confirmation checkbox with a label.
+ * @deprecated Use `Checkbox` instead. See [new pattern documentation](https://aksel.nav.no/monster-maler/soknadsdialog/introside-for-soknadsdialoger#8346a8cb849b) for more information.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/confirmationpanel)
  * @see 🏷️ {@link ConfirmationPanelProps}
@@ -59,7 +60,7 @@ export const ConfirmationPanel = forwardRef<
 
   const id = useId();
 
-  const currentRole = hasError
+  const currentColor = hasError
     ? "danger"
     : props.checked
       ? "success"
@@ -72,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/file-upload/index.ts

@@ -1,21 +1,21 @@
 "use client";
 export { default as FileUpload } from "./FileUpload";
 export { default as FileUploadDropzone } from "./parts/dropzone/Dropzone";
-export { type FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
+export type { FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
 export {
   default as FileUploadTrigger,
   type FileUploadTriggerProps,
 } from "./parts/Trigger";
-export {
-  type FileObject,
-  type FileRejected,
-  type FileAccepted,
-  type FileRejectedPartitioned,
-  type FilesPartitioned,
-  type FileRejectionReason,
+export type {
+  FileObject,
+  FileRejected,
+  FileAccepted,
+  FileRejectedPartitioned,
+  FilesPartitioned,
+  FileRejectionReason,
 } from "./FileUpload.types";
 export {
   default as FileUploadItem,
   type FileUploadItemProps,
 } from "./parts/item/Item";
-export { type FileItem, type FileMetadata } from "./parts/item/Item.types";
+export type { FileItem, FileMetadata } from "./parts/item/Item.types";

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/radio/index.ts

@@ -1,4 +1,4 @@
 "use client";
 export { default as Radio } from "./Radio";
 export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";
-export { type RadioProps } from "./types";
+export type { RadioProps } from "./types";

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,12 +155,14 @@ 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")}
           hidden={!showClearButton}
           onClick={(event) => handleClear({ trigger: "Click", event })}
+          type="button"
         />
       ) : (
         <button

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,11 +1,10 @@
 import React, { forwardRef } from "react";
 import type {
-  BorderColorKeys,
-  BorderColorWithRoleKeys,
-  BorderRadiusKeys,
-  ShadowKeys,
-  StaticBgKeys,
-  StaticDefaultBgKeys,
+  AkselColoredBorderToken,
+  AkselColoredStatelessBackgroundToken,
+  AkselRootBackgroundToken,
+  AkselRootBorderToken,
+  AkselShadowToken,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { useRenameCSS } from "../../theme/Theme";
@@ -17,7 +16,11 @@ import BasePrimitive, {
 } from "../base/BasePrimitive";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
-import { ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types";
+import {
+  BorderRadiusScale,
+  ResponsiveProp,
+  SpaceDelimitedAttribute,
+} from "../utilities/types";
 
 export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
@@ -25,25 +28,27 @@ 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)
    * or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
-   * borderRadius='0 full large small'
-   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   * borderRadius='0 full 12 2'
+   * borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
    * @see {@link BorderRadiusKeys}
    */
   borderRadius?: ResponsiveProp<
-    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+    SpaceDelimitedAttribute<BorderRadiusScale | "0">
   >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
@@ -57,7 +62,7 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * shadow='small'
    * @see {@link ShadowKeys}
    */
-  shadow?: ShadowKeys;
+  shadow?: AkselShadowToken;
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 
@@ -126,8 +131,8 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
         ...getResponsiveProps(
           "ax",
           "box",
-          "border-radius",
-          "border-radius",
+          "radius",
+          "radius",
           borderRadius,
           false,
           ["0"],
@@ -146,7 +151,7 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
               "navds-box-bg": background,
               "navds-box-border-color": borderColor,
               "navds-box-border-width": borderWidth,
-              "navds-box-border-radius": borderRadius,
+              "navds-box-radius": borderRadius,
               "navds-box-shadow": shadow,
             })}
           >

package/src/layout/box/Box.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
@@ -13,6 +12,7 @@ import { getResponsiveProps } from "../utilities/css";
 import {
   BackgroundColorToken,
   BorderColorToken,
+  BorderRadiusScale,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
@@ -37,11 +37,11 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
    * or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
-   * borderRadius='0 full large small'
-   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   * borderRadius='0 full 12 2'
+   * borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
    */
   borderRadius?: ResponsiveProp<
-    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+    SpaceDelimitedAttribute<BorderRadiusScale | "0">
   >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
@@ -153,8 +153,8 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
         ...getResponsiveProps(
           prefix,
           "box",
-          "border-radius",
-          "border-radius",
+          "radius",
+          "radius",
           borderRadius,
           false,
           ["0"],

package/src/layout/utilities/css.ts

@@ -1,4 +1,9 @@
-import type { LegacySpacingKeys, SpaceKeys } from "@navikt/ds-tokens/types";
+import type {
+  AkselBorderRadiusToken,
+  AkselLegacyBorderRadiusToken,
+  AkselLegacySpacingToken,
+  AkselSpaceToken,
+} from "@navikt/ds-tokens/types";
 import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
@@ -29,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",
@@ -55,10 +60,21 @@ const legacySpacingTokenLookup: Record<
   "--ax-spacing-0": "--ax-space-0",
 };
 
+const legacyBorderRadiusNameTokenLookup: Record<
+  `${AkselLegacyBorderRadiusToken}`,
+  `${AkselBorderRadiusToken}`
+> = {
+  full: "full",
+  xlarge: "12",
+  large: "8",
+  medium: "4",
+  small: "2",
+};
+
 const translateTokenStringToCSS = (
   specialLayout: string,
   tokenString: string,
-  tokenSubgroup: "spacing" | "border-radius",
+  tokenSubgroup: "spacing" | "radius",
   tokenExceptions: string[],
   invert: boolean,
   prefix: string,
@@ -91,6 +107,9 @@ const translateTokenStringToCSS = (
         output = `var(${
           legacySpacingTokenLookup[spacingTokenName] ?? spacingTokenName
         })`;
+      } else if (tokenSubgroup === "radius") {
+        const name = legacyBorderRadiusNameTokenLookup[propValue] ?? propValue;
+        output = `var(--${prefix}-radius-${name})`;
       }
 
       // Handle inversion for negative values
@@ -107,7 +126,7 @@ export function getResponsiveProps<T extends string>(
   prefix: string,
   componentName: string,
   componentProp: string,
-  tokenSubgroup: "spacing" | "border-radius",
+  tokenSubgroup: "spacing" | "radius",
   responsiveProp?: ResponsiveProp<T>,
   invert = false,
   tokenExceptions: string[] = [],

package/src/layout/utilities/types.ts

@@ -1,24 +1,29 @@
 import type {
-  BreakPointKeys,
-  LegacyBgColorKeys,
-  LegacyBorderColorKeys,
-  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 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;