@navikt/ds-react 7.40.0 → 8.0.1

package/src/layout/box/Box.tsx

@@ -1,7 +1,15 @@
 import React, { forwardRef } from "react";
+import type {
+  AkselColoredBorderToken,
+  AkselColoredStatelessBackgroundToken,
+  AkselDynamicStatelessBackgroundToken,
+  AkselRootBackgroundToken,
+  AkselRootBorderToken,
+  AkselShadowToken,
+} from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -10,35 +18,39 @@ import BasePrimitive, {
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
 import {
-  BackgroundColorToken,
-  BorderColorToken,
   BorderRadiusScale,
   ResponsiveProp,
-  ShadowToken,
   SpaceDelimitedAttribute,
-  SurfaceColorToken,
 } from "../utilities/types";
 import BoxNew from "./Box.darkside";
 
 export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * CSS `background-color` property.
-   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
+   * @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
    */
-  background?: BackgroundColorToken | SurfaceColorToken;
+  background?:
+    | AkselRootBackgroundToken
+    | AkselColoredStatelessBackgroundToken
+    | AkselDynamicStatelessBackgroundToken;
   /**
    * CSS `border-color` property.
-   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
+   * @see {@link AkselColoredBorderToken}
    */
-  borderColor?: BorderColorToken;
+  borderColor?:
+    | Exclude<AkselRootBorderToken, "focus">
+    | AkselColoredBorderToken;
   /**
    * CSS `border-radius` property.
-   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#radius)
    * or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
    * borderRadius='0 full 12 2'
    * borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
+   * @see {@link BorderRadiusScale}
    */
   borderRadius?: ResponsiveProp<
     SpaceDelimitedAttribute<BorderRadiusScale | "0">
@@ -53,13 +65,19 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Shadow on box. Accepts a shadow token.
    * @example
    * shadow='small'
+   * @see {@link ShadowKeys}
    */
-  shadow?: ShadowToken;
+  shadow?: AkselShadowToken;
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 
 interface BoxComponentType
   extends OverridableComponent<BoxProps, HTMLDivElement> {
+  /**
+   * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
+   *
+   * **Run `npx @navikt/aksel@latest codemod v8-box-new`> to migrate.**
+   */
   New: typeof BoxNew;
 }
 
@@ -71,21 +89,21 @@ interface BoxComponentType
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ * <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <VStack gap="8">
- *  <Box padding="4">
+ * <VStack gap="space-32">
+ *  <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  *  </Box>
- *  <Box padding="4">
+ *  <Box padding="space-16">
  *    <BodyShort>Hei</BodyShort>
  *  </Box>
  * </VStack>
@@ -108,57 +126,24 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       }: BoxProps & { as?: React.ElementType },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
-      const { cn } = useRenameCSS();
-
-      if (
-        process.env.NODE_ENV !== "production" &&
-        themeContext?.isDarkside &&
-        (background || borderColor || shadow)
-      ) {
-        let errorText = ``;
-        if (background) {
-          errorText += `\n- background: "${background}"`;
-        }
-        if (borderColor) {
-          errorText += `\n- borderColor: "${borderColor}"`;
-        }
-        if (shadow) {
-          errorText += `\n- shadow: "${shadow}"`;
-        }
-        throw new Error(
-          `<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with Aksel <Theme /> (darkmode-support). \nTo continue using these properties, migrate to '<Box.New>' (BoxNew for RSC)\nUpdate these props:${errorText}`,
-        );
-      }
-
-      const prefix = themeContext?.isDarkside ? "ax" : "a";
-
       const style: React.CSSProperties = {
         ..._style,
-        [`--__${prefix}c-box-background`]: background
-          ? `var(--a-${background})`
-          : undefined,
-        [`--__${prefix}c-box-shadow`]: shadow
-          ? `var(--a-shadow-${shadow})`
+        "--__axc-box-background": background
+          ? `var(--ax-bg-${background})`
           : undefined,
-        [`--__${prefix}c-box-border-color`]: borderColor
-          ? `var(--a-${borderColor})`
+        "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined,
+        "--__axc-box-border-color": borderColor
+          ? `var(--ax-border-${borderColor})`
           : undefined,
-        [`--__${prefix}c-box-border-width`]: borderWidth
+        "--__axc-box-border-width": borderWidth
           ? borderWidth
               .split(" ")
               .map((x) => `${x}px`)
               .join(" ")
           : undefined,
-        ...getResponsiveProps(
-          prefix,
-          "box",
-          "radius",
-          "radius",
-          borderRadius,
-          false,
-          ["0"],
-        ),
+        ...getResponsiveProps("box", "radius", "radius", borderRadius, false, [
+          "0",
+        ]),
       };
 
       const Comp = asChild ? Slot : Component;
@@ -169,14 +154,12 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cn("navds-box", className, {
-              "navds-box-bg": background,
-              "navds-box-border-color": borderColor,
-              "navds-box-border-width": borderWidth,
-              "navds-box-border-radius":
-                borderRadius && !themeContext?.isDarkside,
-              "navds-box-radius": borderRadius && themeContext?.isDarkside,
-              "navds-box-shadow": shadow,
+            className={cl("aksel-box", className, {
+              "aksel-box-bg": background,
+              "aksel-box-border-color": borderColor,
+              "aksel-box-border-width": borderWidth,
+              "aksel-box-radius": borderRadius,
+              "aksel-box-shadow": shadow,
             })}
           >
             {children}

package/src/layout/grid/HGrid.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
+import { cl } from "../../util/className";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
   PrimitiveProps,
@@ -22,7 +22,7 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
   columns?: ResponsiveProp<number | string>;
   /**
    * Spacing between columns.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    * @example
    * gap="space-20"
@@ -43,19 +43,19 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
  * @see 🏷️ {@link HGridProps}
  *
  * @example
- * <HGrid gap="6" columns={3}>
+ * <HGrid gap="space-24" columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ * <HGrid gap={{xs: "space-8", md: "space-24"}} columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ * <HGrid gap="space-24" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
  *   <div />
  *   <div />
  *   <div />
@@ -77,15 +77,11 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
-      const prefix = themeContext?.isDarkside ? "ax" : "a";
-      const { cn } = useRenameCSS();
-
       const styles: React.CSSProperties = {
         ...style,
-        [`--__${prefix}c-hgrid-align`]: align,
-        ...getResponsiveProps(prefix, `hgrid`, "gap", "spacing", gap),
-        ...getResponsiveValue(prefix, `hgrid`, "columns", formatGrid(columns)),
+        "--__axc-hgrid-align": align,
+        ...getResponsiveProps(`hgrid`, "gap", "space", gap),
+        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
       };
 
       const Comp = asChild ? Slot : Component;
@@ -95,9 +91,9 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
           <Comp
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
-            className={cn("navds-hgrid", className, {
-              "navds-hgrid-gap": gap,
-              "navds-hgrid-align": align,
+            className={cl("aksel-hgrid", className, {
+              "aksel-hgrid-gap": gap,
+              "aksel-hgrid-align": align,
             })}
             style={styles}
           >

package/src/layout/page/Page.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
-import { OverridableComponent } from "../../util";
-import { BackgroundColorToken } from "../utilities/types";
+import { OverridableComponent, omit } from "../../util";
+import { cl } from "../../util/className";
 import { PageBlock } from "./parts/PageBlock";
 
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
@@ -10,13 +9,6 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * @default "div"
    */
   as?: "div" | "body";
-  /**
-   * Background color.
-   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
-   * @default "bg-default"
-   * @deprecated Use `<Box asChild background="...">` wrapped around `<Page>`.
-   */
-  background?: BackgroundColorToken;
   /**
    * Allows better positioning of footer
    */
@@ -30,6 +22,10 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * @default "end"
    */
   contentBlockPadding?: "end" | "none";
+  /**
+   * @deprecated Deprecated in v8 and no longer has any effect. Use `<Box asChild background="...">` wrapped around `<Page>`.
+   */
+  background?: string;
 }
 
 interface PageComponentType
@@ -43,48 +39,27 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       {
         as: Component = "div",
         className,
-        style: _style,
         footer,
         children,
         footerPosition,
-        background,
         contentBlockPadding = "end",
         ...rest
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
-      const { cn } = useRenameCSS();
-
-      if (
-        process.env.NODE_ENV !== "production" &&
-        themeContext?.isDarkside &&
-        background
-      ) {
-        console.warn(
-          `Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``,
-        );
-      }
-
-      const style: React.CSSProperties = {
-        ..._style,
-        "--__ac-page-background": `var(--a-${background ?? "bg-default"})`,
-      };
-
       const belowFold = footerPosition === "belowFold";
 
       return (
         <Component
-          {...rest}
-          className={cn("navds-page", className)}
+          {...omit(rest, ["background"])}
+          className={cl("aksel-page", className)}
           ref={ref}
-          style={style}
         >
           <div
-            className={cn({
-              "navds-page__content--fullheight": belowFold,
-              "navds-page__content--grow": !belowFold,
-              "navds-page__content--padding": contentBlockPadding === "end",
+            className={cl({
+              "aksel-page__content--fullheight": belowFold,
+              "aksel-page__content--grow": !belowFold,
+              "aksel-page__content--padding": contentBlockPadding === "end",
             })}
           >
             {children}

package/src/layout/page/parts/PageBlock.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { OverridableComponent } from "../../../util/types";
 
 export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
@@ -65,16 +65,14 @@ export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
   forwardRef(
     ({ as: Component = "div", gutters, className, width, ...rest }, ref) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
-          className={cn(
-            "navds-pageblock",
-            width && `navds-pageblock--${width}`,
+          className={cl(
+            "aksel-pageblock",
+            width && `aksel-pageblock--${width}`,
             className,
-            { "navds-pageblock--gutters": gutters },
+            { "aksel-pageblock--gutters": gutters },
           )}
           ref={ref}
         />

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
@@ -40,7 +40,6 @@ const Responsive = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
 
@@ -50,9 +49,9 @@ const Responsive = forwardRef<
       <Comp
         {...rest}
         ref={ref}
-        className={cn("navds-responsive", className, {
-          [`navds-responsive__above--${aboveProp}`]: aboveProp,
-          [`navds-responsive__below--${belowProp}`]: belowProp,
+        className={cl("aksel-responsive", className, {
+          [`aksel-responsive__above--${aboveProp}`]: aboveProp,
+          [`aksel-responsive__below--${belowProp}`]: belowProp,
         })}
       />
     );

package/src/layout/stack/Spacer.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useRenameCSS } from "../../theme/Theme";
 
 /**
  * Layout-primitive for auto-spacing between elements
@@ -14,8 +13,7 @@ import { useRenameCSS } from "../../theme/Theme";
  * </HStack>
  */
 export const Spacer = () => {
-  const { cn } = useRenameCSS();
-  return <span className={cn("navds-stack__spacer")} />;
+  return <span className="aksel-stack__spacer" />;
 };
 
 export default Spacer;

package/src/layout/stack/Stack.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -42,7 +42,7 @@ export type StackProps = HTMLAttributes<HTMLDivElement> & {
   wrap?: boolean;
   /**
    * CSS `gap` property.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    *
    * @example
@@ -83,16 +83,12 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
-      const prefix = themeContext?.isDarkside ? "ax" : "a";
-      const { cn } = useRenameCSS();
-
       const style: React.CSSProperties = {
         ..._style,
-        ...getResponsiveProps(prefix, `stack`, "gap", "spacing", gap),
-        ...getResponsiveValue(prefix, `stack`, "direction", direction),
-        ...getResponsiveValue(prefix, `stack`, "align", align),
-        ...getResponsiveValue(prefix, `stack`, "justify", justify),
+        ...getResponsiveProps(`stack`, "gap", "space", gap),
+        ...getResponsiveValue(`stack`, "direction", direction),
+        ...getResponsiveValue(`stack`, "align", align),
+        ...getResponsiveValue(`stack`, "justify", justify),
       };
 
       const Comp = asChild ? Slot : Component;
@@ -103,14 +99,14 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cn("navds-stack", className, {
-              "navds-vstack": direction === "column",
-              "navds-hstack": direction === "row",
-              "navds-stack-gap": gap,
-              "navds-stack-align": align,
-              "navds-stack-justify": justify,
-              "navds-stack-direction": direction,
-              "navds-stack-wrap": wrap,
+            className={cl("aksel-stack", className, {
+              "aksel-vstack": direction === "column",
+              "aksel-hstack": direction === "row",
+              "aksel-stack-gap": gap,
+              "aksel-stack-align": align,
+              "aksel-stack-justify": justify,
+              "aksel-stack-direction": direction,
+              "aksel-stack-wrap": wrap,
             })}
           >
             {children}

package/src/layout/utilities/css.ts

@@ -1,13 +1,8 @@
-import type {
-  AkselBorderRadiusToken,
-  AkselLegacyBorderRadiusToken,
-  AkselLegacySpacingToken,
-  AkselSpaceToken,
-} from "@navikt/ds-tokens/types";
 import { ResponsiveProp } from "./types";
 
+const TOKEN_PREFIX = "ax";
+
 export function getResponsiveValue<T = string>(
-  prefix: string,
   componentName: string,
   componentProp: string,
   responsiveProp?: ResponsiveProp<T>,
@@ -18,66 +13,25 @@ export function getResponsiveValue<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__${prefix}c-${componentName}-${componentProp}-xs`]: responsiveProp,
+      [`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-xs`]:
+        responsiveProp,
     };
   }
 
   return Object.fromEntries(
     Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`,
+      `--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-${breakpointAlias}`,
       responsiveValue,
     ]),
   );
 }
 
-/**
- * Temporary lookup for mapping legacy spacing tokens to new space tokens.
- */
-const legacySpacingTokenLookup: Record<
-  `--ax-spacing-${AkselLegacySpacingToken}`,
-  `--ax-${AkselSpaceToken}`
-> = {
-  "--ax-spacing-32": "--ax-space-128",
-  "--ax-spacing-24": "--ax-space-96",
-  "--ax-spacing-20": "--ax-space-80",
-  "--ax-spacing-18": "--ax-space-72",
-  "--ax-spacing-16": "--ax-space-64",
-  "--ax-spacing-14": "--ax-space-56",
-  "--ax-spacing-12": "--ax-space-48",
-  "--ax-spacing-11": "--ax-space-44",
-  "--ax-spacing-10": "--ax-space-40",
-  "--ax-spacing-9": "--ax-space-36",
-  "--ax-spacing-8": "--ax-space-32",
-  "--ax-spacing-7": "--ax-space-28",
-  "--ax-spacing-6": "--ax-space-24",
-  "--ax-spacing-5": "--ax-space-20",
-  "--ax-spacing-4": "--ax-space-16",
-  "--ax-spacing-3": "--ax-space-12",
-  "--ax-spacing-2": "--ax-space-8",
-  "--ax-spacing-1-alt": "--ax-space-6",
-  "--ax-spacing-1": "--ax-space-4",
-  "--ax-spacing-05": "--ax-space-2",
-  "--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" | "radius",
+  tokenSubgroup: "space" | "radius",
   tokenExceptions: string[],
   invert: boolean,
-  prefix: string,
 ) => {
   return tokenString
     .split(" ")
@@ -94,22 +48,14 @@ const translateTokenStringToCSS = (
       }
 
       // Handle exceptions and space tokens
-      let output = `var(--${prefix}-${tokenSubgroup}-${propValue})`;
+      let output = `var(--${TOKEN_PREFIX}-${tokenSubgroup}-${propValue})`;
 
       if (tokenExceptions.includes(propValue)) {
-        output = propValue === "px" ? "1px" : propValue;
-      } else if (tokenSubgroup === "spacing" && propValue.startsWith("space")) {
-        /* Use new "space-x" tokens */
-        output = `var(--${prefix}-${propValue})`;
-      } else if (tokenSubgroup === "spacing") {
-        /* Translate old "spacing" tokens to new "space" tokens */
-        const spacingTokenName = `--${prefix}-spacing-${propValue}`;
-        output = `var(${
-          legacySpacingTokenLookup[spacingTokenName] ?? spacingTokenName
-        })`;
+        output = propValue;
+      } else if (tokenSubgroup === "space") {
+        output = `var(--${TOKEN_PREFIX}-${propValue})`;
       } else if (tokenSubgroup === "radius") {
-        const name = legacyBorderRadiusNameTokenLookup[propValue] ?? propValue;
-        output = `var(--${prefix}-radius-${name})`;
+        output = `var(--${TOKEN_PREFIX}-radius-${propValue})`;
       }
 
       // Handle inversion for negative values
@@ -123,10 +69,9 @@ const translateTokenStringToCSS = (
 };
 
 export function getResponsiveProps<T extends string>(
-  prefix: string,
   componentName: string,
   componentProp: string,
-  tokenSubgroup: "spacing" | "radius",
+  tokenSubgroup: "space" | "radius",
   responsiveProp?: ResponsiveProp<T>,
   invert = false,
   tokenExceptions: string[] = [],
@@ -137,14 +82,13 @@ export function getResponsiveProps<T extends string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__${prefix}c-${componentName}-${componentProp}-xs`]:
+      [`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-xs`]:
         translateTokenStringToCSS(
           componentProp,
           responsiveProp,
           tokenSubgroup,
           tokenExceptions,
           invert,
-          prefix,
         ),
     };
   }
@@ -152,14 +96,13 @@ export function getResponsiveProps<T extends string>(
   const styleProps = {};
   Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
     styleProps[
-      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`
+      `--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-${breakpointAlias}`
     ] = translateTokenStringToCSS(
       componentProp,
       aliasOrScale,
       tokenSubgroup,
       tokenExceptions,
       invert,
-      prefix,
     );
   });
   return styleProps;