@digdir/[email protected]

Minor Changes

• React components and css now support custom colors through the data-color attribute. (#2703)

  BREAKING CHANGE: All React components that had a color prop have been changed to use data-color.

  All¹ css targeting data-color has been changed to work with all custom colors generated by the CLI.

  Avatar, Badge, Button, and Link use --ds-color-accent-*², unless data-color is set directly on the element.

  For components that had a color prop, but defaulted to something other than "accent", data-color must also be set directly on the element.

  All other components that defaulted to "accent", or previously only existed in "accent" color, now support data-color. They will also inherit their color from the closest data-color attribute. If none is found, they use --ds-color-accent-*².

  ¹: ...except Alert, which only supports info, warning, danger and success colors.
  ²: If an "accent" color is not defined in the theme, the --ds-color-accent-* variables will point to the first main-color.

• CSS variables: --ds-color-*-{1,2,...,13,contrast-1,contrast-2}, which were generated from the primitives layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead (#2641)

  Example, for the neutral scale:

    var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
    var(--ds-color-neutral-background-subtle);  /* instead of: var(--ds-color-neutral-2) */
    var(--ds-color-neutral-surface-default);    /* instead of: var(--ds-color-neutral-3) */
    var(--ds-color-neutral-surface-hover);      /* instead of: var(--ds-color-neutral-4) */
    var(--ds-color-neutral-surface-active);     /* instead of: var(--ds-color-neutral-5) */
    var(--ds-color-neutral-border-subtle);      /* instead of: var(--ds-color-neutral-6) */
    var(--ds-color-neutral-border-default);     /* instead of: var(--ds-color-neutral-7) */
    var(--ds-color-neutral-border-strong);      /* instead of: var(--ds-color-neutral-8) */
    var(--ds-color-neutral-base-default);       /* instead of: var(--ds-color-neutral-9) */
    var(--ds-color-neutral-base-hover);         /* instead of: var(--ds-color-neutral-10) */
    var(--ds-color-neutral-base-active);        /* instead of: var(--ds-color-neutral-11) */
    var(--ds-color-neutral-text-subtle);        /* instead of: var(--ds-color-neutral-12) */
    var(--ds-color-neutral-text-default);       /* instead of: var(--ds-color-neutral-13) */
    var(--ds-color-neutral-contrast-default);   /* instead of: var(--ds-color-neutral-contrast-1) */
    var(--ds-color-neutral-contrast-subtle);    /* instead of: var(--ds-color-neutral-contrast-2) */

  ...and similarly for accent, brand1, brand2 and brand3.

• CLI now supports creating themes with 1 or more "main" colors, a neutral color, and 1 or more "support" colors. The "main" and "support" colors can have arbitrary names. There can not be more than 4 colors of each category unless you're using Figma on the Enterprise plan, due to plan-based restrictions on the number of variable modes per collection. (#2733)

• Implemented a more flexible system of semantic border-radius tokens. (#2497)

Patch Changes

• Removed init command. Use tokens create instead. (#2616)

• Update global colors (#2662)

• chore: change default tokens build output folder (f8986b8316894ef5cd55f6ee232e4f6aaae6486a)