@navikt/ds-react 7.40.0 → 8.0.1

package/src/layout/base/BasePrimitive.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export type PrimitiveProps = {
   /**
    * Padding around children.
-   * 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
    * padding='space-16'
@@ -16,7 +16,7 @@ export type PrimitiveProps = {
   padding?: ResponsiveProp<SpacingScale>;
   /**
    * Horizontal padding around children.
-   * 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
    * paddingInline='space-16'
@@ -28,7 +28,7 @@ export type PrimitiveProps = {
   >;
   /**
    * Vertical padding around children.
-   * 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
    * paddingBlock='space-16'
@@ -40,7 +40,7 @@ export type PrimitiveProps = {
   >;
   /**
    * Margin around element.
-   * 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
    * margin='space-16'
@@ -49,7 +49,7 @@ export type PrimitiveProps = {
   margin?: ResponsiveProp<SpacingScale>;
   /**
    * Horizontal margin around element.
-   * 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
    * marginInline='space-16'
@@ -65,7 +65,7 @@ export type PrimitiveProps = {
   >;
   /**
    * Vertical margin around element.
-   * 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
    * marginBlock='space-16'
@@ -111,7 +111,7 @@ export type PrimitiveProps = {
   >;
   /**
    * CSS `inset`.
-   * 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
    * inset='space-16'
@@ -121,7 +121,7 @@ export type PrimitiveProps = {
   inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
   /**
    * CSS `top`
-   * 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
    * top='space-16'
@@ -130,7 +130,7 @@ export type PrimitiveProps = {
   top?: ResponsiveProp<SpacingScale>;
   /**
    * CSS `right`
-   * 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
    * right='space-16'
@@ -139,7 +139,7 @@ export type PrimitiveProps = {
   right?: ResponsiveProp<SpacingScale>;
   /**
    * CSS `bottom`
-   * 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
    * bottom='space-16'
@@ -148,7 +148,7 @@ export type PrimitiveProps = {
   bottom?: ResponsiveProp<SpacingScale>;
   /**
    * CSS `left`
-   * 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
    * left='space-16'
@@ -250,74 +250,70 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const themeContext = useThemeInternal();
-  const { cn } = useRenameCSS();
-  const prefix = themeContext?.isDarkside ? "ax" : "a";
-
   const style: React.CSSProperties = {
     /* Padding */
-    ...getResponsiveProps(prefix, "r", "p", "spacing", padding),
-    ...getResponsiveProps(prefix, "r", "pi", "spacing", paddingInline),
-    ...getResponsiveProps(prefix, "r", "pb", "spacing", paddingBlock),
+    ...getResponsiveProps("r", "p", "space", padding),
+    ...getResponsiveProps("r", "pi", "space", paddingInline),
+    ...getResponsiveProps("r", "pb", "space", paddingBlock),
     /* Margin */
-    ...getResponsiveProps(prefix, "r", "m", "spacing", margin),
-    ...getResponsiveProps(prefix, "r", "mi", "spacing", marginInline),
-    ...getResponsiveProps(prefix, "r", "mb", "spacing", marginBlock),
+    ...getResponsiveProps("r", "m", "space", margin),
+    ...getResponsiveProps("r", "mi", "space", marginInline),
+    ...getResponsiveProps("r", "mb", "space", marginBlock),
     /* Width & height */
-    ...getResponsiveValue(prefix, "r", "w", width),
-    ...getResponsiveValue(prefix, "r", "minw", minWidth),
-    ...getResponsiveValue(prefix, "r", "maxw", maxWidth),
-    ...getResponsiveValue(prefix, "r", "h", height),
-    ...getResponsiveValue(prefix, "r", "minh", minHeight),
-    ...getResponsiveValue(prefix, "r", "maxh", maxHeight),
+    ...getResponsiveValue("r", "w", width),
+    ...getResponsiveValue("r", "minw", minWidth),
+    ...getResponsiveValue("r", "maxw", maxWidth),
+    ...getResponsiveValue("r", "h", height),
+    ...getResponsiveValue("r", "minh", minHeight),
+    ...getResponsiveValue("r", "maxh", maxHeight),
     /* Positon & inset */
-    ...getResponsiveValue(prefix, "r", "position", position),
-    ...getResponsiveProps(prefix, "r", "inset", "spacing", inset),
-    ...getResponsiveProps(prefix, "r", "top", "spacing", top),
-    ...getResponsiveProps(prefix, "r", "right", "spacing", right),
-    ...getResponsiveProps(prefix, "r", "bottom", "spacing", bottom),
-    ...getResponsiveProps(prefix, "r", "left", "spacing", left),
+    ...getResponsiveValue("r", "position", position),
+    ...getResponsiveProps("r", "inset", "space", inset),
+    ...getResponsiveProps("r", "top", "space", top),
+    ...getResponsiveProps("r", "right", "space", right),
+    ...getResponsiveProps("r", "bottom", "space", bottom),
+    ...getResponsiveProps("r", "left", "space", left),
     /* Overflow */
-    ...getResponsiveValue(prefix, "r", "overflow", overflow),
-    ...getResponsiveValue(prefix, "r", "overflowx", overflowX),
-    ...getResponsiveValue(prefix, "r", "overflowy", overflowY),
+    ...getResponsiveValue("r", "overflow", overflow),
+    ...getResponsiveValue("r", "overflowx", overflowX),
+    ...getResponsiveValue("r", "overflowy", overflowY),
     /* Flex */
-    ...getResponsiveValue(prefix, "r", "flex-basis", flexBasis),
-    ...getResponsiveValue(prefix, "r", "flex-grow", flexGrow),
-    ...getResponsiveValue(prefix, "r", "flex-shrink", flexShrink),
+    ...getResponsiveValue("r", "flex-basis", flexBasis),
+    ...getResponsiveValue("r", "flex-grow", flexGrow),
+    ...getResponsiveValue("r", "flex-shrink", flexShrink),
     /* Grid */
-    ...getResponsiveValue(prefix, "r", "grid-column", gridColumn),
+    ...getResponsiveValue("r", "grid-column", gridColumn),
   };
 
   return (
     <Slot
-      className={cn({
+      className={cl({
         className,
-        "navds-r-p": padding,
-        "navds-r-pi": paddingInline,
-        "navds-r-pb": paddingBlock,
-        "navds-r-m": margin,
-        "navds-r-mi": marginInline,
-        "navds-r-mb": marginBlock,
-        "navds-r-w": width,
-        "navds-r-minw": minWidth,
-        "navds-r-maxw": maxWidth,
-        "navds-r-h": height,
-        "navds-r-minh": minHeight,
-        "navds-r-maxh": maxHeight,
-        "navds-r-position": position,
-        "navds-r-inset": inset,
-        "navds-r-top": top,
-        "navds-r-right": right,
-        "navds-r-bottom": bottom,
-        "navds-r-left": left,
-        "navds-r-overflow": overflow,
-        "navds-r-overflowx": overflowX,
-        "navds-r-overflowy": overflowY,
-        "navds-r-flex-basis": flexBasis,
-        "navds-r-flex-grow": flexGrow,
-        "navds-r-flex-shrink": flexShrink,
-        "navds-r-grid-column": gridColumn,
+        "aksel-r-p": padding,
+        "aksel-r-pi": paddingInline,
+        "aksel-r-pb": paddingBlock,
+        "aksel-r-m": margin,
+        "aksel-r-mi": marginInline,
+        "aksel-r-mb": marginBlock,
+        "aksel-r-w": width,
+        "aksel-r-minw": minWidth,
+        "aksel-r-maxw": maxWidth,
+        "aksel-r-h": height,
+        "aksel-r-minh": minHeight,
+        "aksel-r-maxh": maxHeight,
+        "aksel-r-position": position,
+        "aksel-r-inset": inset,
+        "aksel-r-top": top,
+        "aksel-r-right": right,
+        "aksel-r-bottom": bottom,
+        "aksel-r-left": left,
+        "aksel-r-overflow": overflow,
+        "aksel-r-overflowx": overflowX,
+        "aksel-r-overflowy": overflowY,
+        "aksel-r-flex-basis": flexBasis,
+        "aksel-r-flex-grow": flexGrow,
+        "aksel-r-flex-shrink": flexShrink,
+        "aksel-r-grid-column": gridColumn,
       })}
       style={style}
     >

package/src/layout/bleed/Bleed.tsx

@@ -1,16 +1,16 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
-export type BleedSpacingBlock = "0" | "px" | SpacingScale;
+export type BleedSpacingInline = "full" | SpacingScale;
+export type BleedSpacingBlock = SpacingScale;
 
 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * **Negative** horizontal margin around children.
-   * 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.
    *
    * The `px` value is useful to nudge by just 1px.
@@ -19,14 +19,14 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginInline='space-16'
    * marginInline='space-16 space-20'
-   * marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
+   * marginInline={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
    */
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
   >;
   /**
    * **Negative** vertical margin around children.
-   * 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.
    *
    * The `px` value is useful to nudge by just 1px.
@@ -35,7 +35,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginBlock='space-16'
    * marginBlock='space-16 space-20'
-   * marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
+   * marginBlock={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
    */
   marginBlock?: ResponsiveProp<
     BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`
@@ -62,7 +62,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * <Box padding="4">
- *   <Bleed marginInline="4" marginBlock="4">
+ *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>
  * </Box>
@@ -80,30 +80,22 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-    const prefix = themeContext?.isDarkside ? "ax" : "a";
-
     let style: React.CSSProperties = {
       ..._style,
       ...getResponsiveProps(
-        prefix,
         "bleed",
         "margin-inline",
-        "spacing",
+        "space",
         marginInline,
         true,
-        ["0", "full", "px"],
       ),
 
       ...getResponsiveProps(
-        prefix,
         "bleed",
         "margin-block",
-        "spacing",
+        "space",
         marginBlock,
         true,
-        ["0", "px"],
       ),
     };
 
@@ -111,22 +103,18 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
       style = {
         ...style,
         ...getResponsiveProps(
-          prefix,
           "bleed",
           "padding-inline",
-          "spacing",
+          "space",
           marginInline,
           false,
-          ["0", "full", "px"],
         ),
         ...getResponsiveProps(
-          prefix,
           "bleed",
           "padding-block",
-          "spacing",
+          "space",
           marginBlock,
           false,
-          ["0", "px"],
         ),
       };
     }
@@ -136,8 +124,8 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     return (
       <Comp
         {...rest}
-        className={cn("navds-bleed", className, {
-          "navds-bleed--padding": reflectivePadding,
+        className={cl("aksel-bleed", className, {
+          "aksel-bleed--padding": reflectivePadding,
         })}
         ref={ref}
         style={style}

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

@@ -2,13 +2,14 @@ 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 } from "../../theme/Theme";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -25,27 +26,30 @@ import {
 export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * CSS `background-color` property.
-   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-   * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
+   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
+   * @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
    */
-  background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
+  background?:
+    | AkselRootBackgroundToken
+    | AkselColoredStatelessBackgroundToken
+    | AkselDynamicStatelessBackgroundToken;
   /**
    * CSS `border-color` property.
-   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-   * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
+   * @see {@link AkselColoredBorderToken}
    */
   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 BorderRadiusKeys}
+   * @see {@link BorderRadiusScale}
    */
   borderRadius?: ResponsiveProp<
     SpaceDelimitedAttribute<BorderRadiusScale | "0">
@@ -67,29 +71,31 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   PrimitiveAsChildProps;
 
 /**
- *
  * Foundational Layout-primitive for generic encapsulation & styling.
+ * @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.**
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
  * @see 🏷️ {@link BoxProps}
  * @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>
@@ -112,7 +118,6 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
       }: BoxNewProps & { as?: React.ElementType },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const style: React.CSSProperties = {
         ..._style,
         "--__axc-box-background": background
@@ -128,15 +133,9 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
               .map((x) => `${x}px`)
               .join(" ")
           : undefined,
-        ...getResponsiveProps(
-          "ax",
-          "box",
-          "radius",
-          "radius",
-          borderRadius,
-          false,
-          ["0"],
-        ),
+        ...getResponsiveProps("box", "radius", "radius", borderRadius, false, [
+          "0",
+        ]),
       };
 
       const Comp = asChild ? Slot : Component;
@@ -147,12 +146,12 @@ export const BoxNew: OverridableComponent<BoxNewProps, 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-radius": borderRadius,
-              "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}