Give typesafety for data-*

[Barsnes]

We don't need to add this to our package, but we can tell our users how to ensure they have typesafety and autocomplete for our data attributes.

declare global {
  namespace React.JSX {
    interface IntrinsicAttributes {
      'data-color-scheme'?: 'dark' | 'light'
    }
  }
  namespace React {
    interface HTMLAttributes<T> {
      'data-color-scheme'?: 'dark' | 'light';
    }
  }
}

We already do this for popover (popovertarget), and this is just something we need to add to our docs

Same goes for size:

Since all components (and HTML elements) will support data-size and data-color, we should expose this as props also in React and thus avoiding confusion on when size is available and when it is not.
We can however provide type safety by creating a shared props definition, which all components can extend:

/** Recommended sizes */
'data-size'?: 'sm' | 'md' | 'xl';

and those components with more sizes (Avatar, Spinner, Heading) can extend with more sizes in data-size

Note: data-color-scheme has been separated out to #2812

[unekinn]

My suggestion:

• Add a file types.d.ts with any types that are not dependent on tokens/themes to @digdir/designsystemet-react which can be imported in the consuming library
• Output a types.d.ts from the CLI build command with any types that depend on token values / modes etc, which then becomes a part of @digdir/designsystemet-theme or an organization's own theme package
• Add documentation on how/where to import these, and why, to README.md
  • Can be imported in an entry point file, or added to "types" array in tsconfig.json

[unekinn]

I'm handling this as part of #2703.