@digdir/designsystemet 1.0.0-next.50 → 1.0.0

package/README.md

@@ -10,7 +10,98 @@ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to ge
 ## Usage
 
 ### Create tokens
-We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet. 
 
-### Build tokens
-Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.
+Use `npx @digdir/designsystemet tokens create <options>` to create design tokens for use with Designsystemet.
+
+This allows you to define themes including custom colors, font-family, and border-radius.
+We recommend using the [Designsystemet theme builder](https://theme.designsystemet.no/) for generating a valid command with correct options.
+
+#### Update tokens
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to update design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+To update design tokens, re-run `npx @digdir/designsystemet tokens create <options> --clean`. 
+If a [config file](#using-a-config-file) you can also re-run with `"clean": true`.
+
+> ⚠️ **WARNING** ⚠️  
+> The design tokens created by this tool are considered an implementation detail, and is subject
+> to change at any time without being considered a breaking change. We **only** support customisations
+> done through the CLI options. Direct editing of the design tokens are **not** supported.
+> 
+> Since tokens may be added or removed at any time, it is necessary to routinely re-run this
+> command when upgrading the libraries. This will remove any direct edits to the design tokens.
+
+### Build CSS from tokens
+
+Use `npx @digdir/designsystemet tokens build <options>` to build CSS from design tokens generated in the previous step.
+
+> ⚠️ **WARNING** ⚠️  
+> The CSS files from created by this tool are considered build artifacts. They should **not** be
+> edited directly. While the CSS will not change unexpectedly, new variables may be added at any
+> time. Therefore, it is necessary to routinely re-run this command when upgrading the libraries.
+> This will remove any direct edits to the CSS.
+
+#### Update built CSS
+
+Whenever a new version of the CLI is released, or you have done changes, we recommend to build a new set of CSS from design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
+
+
+### Using a config file
+
+> ⚠️ **WARNING** ⚠️  
+> This feature is experimental. The config schema may change at any time.
+
+
+The `tokens create` command supports a config file. It will auto-detect a `designsystemet.config.json` file in the current directory. You can also use the `--config <path>` option to supply a different config name and location.
+
+The main advantage of using a config file is for automation in scenarios with multiple themes.
+
+To get started, use this template for a `designsystemet.config.json` file:
+
+```jsonc
+{
+  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
+}
+```
+
+In editors which support JSON Schema, the `$schema` will then  give you editor hints for the structure of the file.
+
+#### Minimal config example
+As a minimal example, the following CLI snippet from the theme builder
+
+```
+npx @digdir/designsystemet tokens create \
+--main-colors "primary:#0062BA" "accent:#1E98F5" \
+--neutral-color "#1E2B3C" \
+--support-colors "extra1:#F45F63" "extra2:#E5AA20" \
+--border-radius 4 \
+--theme "theme"
+```
+
+...is equivalent to this `designsystemet.config.json` file
+```jsonc
+{
+  "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
+  "outDir": "../path/to/design-tokens",
+  "themes": {
+    "theme": {
+      "colors": {
+        "main": { "primary": "#0062BA", "accent": "#1E98F5" },
+        "neutral": "#1E2B3C",
+        "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
+      },
+      "borderRadius": 4
+    }
+  }
+}
+```
+To generate new design tokens and CSS files, you would then run.
+
+```
+npx @digdir/designsystemet tokens create
+npx @digdir/designsystemet tokens build
+```
+
+#### Complex config example
+
+Have a look at the `*.config.json` files under the `packages/cli` in the Github repo for more complex examples.

package/dist/bin/config.d.ts

@@ -9,16 +9,16 @@ export declare const configFileSchema: z.ZodObject<{
     clean: z.ZodOptional<z.ZodBoolean>;
     themes: z.ZodRecord<z.ZodString, z.ZodObject<{
         colors: z.ZodObject<{
-            main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
-            support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
+            main: z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>;
+            support: z.ZodDefault<z.ZodOptional<z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>>>;
             neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
         }, "strip", z.ZodTypeAny, {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         }, {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         }>;
         typography: z.ZodOptional<z.ZodObject<{
@@ -31,8 +31,8 @@ export declare const configFileSchema: z.ZodObject<{
         borderRadius: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         colors: {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         };
         typography?: {
@@ -41,8 +41,8 @@ export declare const configFileSchema: z.ZodObject<{
         borderRadius?: number | undefined;
     }, {
         colors: {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         };
         typography?: {
@@ -53,8 +53,8 @@ export declare const configFileSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     themes: Record<string, {
         colors: {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         };
         typography?: {
@@ -67,8 +67,8 @@ export declare const configFileSchema: z.ZodObject<{
 }, {
     themes: Record<string, {
         colors: {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         };
         typography?: {
@@ -88,16 +88,16 @@ export declare const combinedConfigSchema: z.ZodObject<{
     clean: z.ZodBoolean;
     themes: z.ZodRecord<z.ZodString, z.ZodObject<{
         colors: z.ZodObject<{
-            main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
-            support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
+            main: z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>;
+            support: z.ZodDefault<z.ZodOptional<z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>>>;
             neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
         }, "strip", z.ZodTypeAny, {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         }, {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         }>;
         typography: z.ZodOptional<z.ZodObject<{
@@ -110,8 +110,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
         borderRadius: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         colors: {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         };
         typography?: {
@@ -120,8 +120,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
         borderRadius?: number | undefined;
     }, {
         colors: {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         };
         typography?: {
@@ -133,8 +133,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
     clean: boolean;
     themes: Record<string, {
         colors: {
-            main: Record<string, `#${string}`>;
             neutral: `#${string}`;
+            main: Record<string, `#${string}`>;
             support: Record<string, `#${string}`>;
         };
         typography?: {
@@ -147,8 +147,8 @@ export declare const combinedConfigSchema: z.ZodObject<{
     clean: boolean;
     themes: Record<string, {
         colors: {
-            main: Record<string, string>;
             neutral: string;
+            main: Record<string, string>;
             support?: Record<string, string> | undefined;
         };
         typography?: {

package/dist/bin/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAUD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA+BnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA+CnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/bin/config.js

@@ -1,6 +1,7 @@
 import * as R from "ramda";
 import { z } from "zod";
 import { convertToHex } from "../src/colors/index.js";
+import { RESERVED_COLORS } from "../src/colors/theme.js";
 import { cliOptions } from "../src/tokens/create.js";
 function mapPathToOptionName(path) {
   const normalisedPath = path[0] === "themes" ? ["theme", ...R.drop(2, path)] : path;
@@ -17,9 +18,23 @@ const hexPatterns = [
   `#[0-9a-fA-F]{6}`,
   `#[0-9a-fA-F]{8}`
 ];
+const reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
 const colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
-const colorSchema = z.string({ description: "A hex color, which is used for creating a color scale" }).regex(colorRegex).transform(convertToHex);
-const colorCategorySchema = z.record(colorSchema, { description: "One or more color definitions" });
+const colorSchema = z.string({
+  description: `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
+}).regex(colorRegex).transform(convertToHex);
+const colorCategorySchema = z.record(
+  z.string().regex(new RegExp(reservedColorsPattern, "i"), {
+    message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
+  }),
+  colorSchema,
+  {
+    description: "One or more color definitions",
+    invalid_type_error: "Color definitions must be hex color values"
+  }
+).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
+  message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
+});
 const themeSchema = z.object(
   {
     colors: z.object(

package/dist/bin/designsystemet.js

@@ -12,7 +12,7 @@ import { cliOptions, createTokens } from "../src/tokens/create.js";
 import { cleanDir } from "../src/tokens/utils.js";
 import { writeTokens } from "../src/tokens/write.js";
 import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
-import { getDefaultOrExplicitOption } from "./options.js";
+import { getCliOption, getDefaultCliOption, getSuppliedCliOption } from "./options.js";
 program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
@@ -39,7 +39,7 @@ function makeTokenCommands() {
     `-o, --${cliOptions.outDir} <string>`,
     `Output directory for created ${chalk.blue("design-tokens")}`,
     DEFAULT_TOKENS_CREATE_DIR
-  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family`, DEFAULT_FONT).option(
+  ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
     `-b, --${cliOptions.theme.borderRadius} <number>`,
     `Unitless base border-radius in px`,
     (radiusAsString) => Number(radiusAsString),
@@ -86,17 +86,17 @@ function makeTokenCommands() {
       borderRadius: optionGetter(cmd, "borderRadius")
     });
     const unvalidatedConfig = noUndefined({
-      outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, "outDir"),
-      clean: propsFromJson?.clean ?? getDefaultOrExplicitOption(cmd, "clean"),
-      themes: propsFromJson?.themes ? (
-        // For each theme specified in the JSON config, we override the config values
-        // with the explicitly set options from the CLI.
-        R.map((theme) => R.mergeDeepRight(theme, getThemeOptions(getDefaultOrExplicitOption)), propsFromJson.themes)
-      ) : (
+      outDir: propsFromJson?.outDir ?? getCliOption(cmd, "outDir"),
+      clean: propsFromJson?.clean ?? getCliOption(cmd, "clean"),
+      themes: propsFromJson?.themes ? R.map((jsonThemeValues) => {
+        const defaultThemeValues = getThemeOptions(getDefaultCliOption);
+        const cliThemeValues = getThemeOptions(getSuppliedCliOption);
+        return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
+      }, propsFromJson.themes) : (
         // If there are no themes specified in the JSON config, we use both explicit
         // and default theme options from the CLI.
         {
-          [opts.theme]: getThemeOptions(getDefaultOrExplicitOption)
+          [opts.theme]: getThemeOptions(getCliOption)
         }
       )
     });

package/dist/bin/options.d.ts

@@ -6,11 +6,16 @@ export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
  * The difference between this and using the option directly is that we return undefined
  * instead of the default value if the option was not explicitly set.
  */
-export declare const getExplicitOptionOnly: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+export declare const getSuppliedCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
 /**
- * This function is basically the default behaviour, unlike {@link getExplicitOptionOnly}.
- * It is provided so that the program can choose its behaviour as needed.
+ * Get the default value specified for a CLI command option.
+ * Mostly useful for getting values which may later be overridden.
  */
-export declare const getDefaultOrExplicitOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+export declare const getDefaultCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
+/**
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
+ * for the option as defined in the {@link Command}
+ */
+export declare const getCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
 export {};
 //# sourceMappingURL=options.d.ts.map

package/dist/bin/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAjB/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAewD,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAvBpC,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqBwE,CAAC"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAjB9B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAeuD,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAvB7B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqB0D,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,YAAY,GA7BtB,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBA2B0D,CAAC"}

package/dist/bin/options.js

@@ -4,9 +4,11 @@ const getOptionIfMatchingSource = (...sources) => (command, option) => {
     return command.getOptionValue(option);
   }
 };
-const getExplicitOptionOnly = getOptionIfMatchingSource("cli");
-const getDefaultOrExplicitOption = getOptionIfMatchingSource("cli", "default");
+const getSuppliedCliOption = getOptionIfMatchingSource("cli");
+const getDefaultCliOption = getOptionIfMatchingSource("default");
+const getCliOption = getOptionIfMatchingSource("cli", "default");
 export {
-  getDefaultOrExplicitOption,
-  getExplicitOptionOnly
+  getCliOption,
+  getDefaultCliOption,
+  getSuppliedCliOption
 };

package/dist/config.schema.json

@@ -25,13 +25,15 @@
                 "additionalProperties": {
                   "type": "string",
                   "pattern": "^#[0-9a-fA-F]{3}|#[0-9a-fA-F]{4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}$",
-                  "description": "A hex color, which is used for creating a color scale"
+                  "description": "A hex color, which is used for creating a color scale. Invalid color names: neutral, success, warning, danger, info, blue, green, orange, purple, red"
+                },
+                "propertyNames": {
+                  "pattern": "^(?!(?:neutral|success|warning|danger|info|blue|green|orange|purple|red)$)"
                 },
                 "description": "One or more color definitions"
               },
               "support": {
                 "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main",
-                "description": "One or more color definitions",
                 "default": {}
               },
               "neutral": {

package/dist/src/colors/colorMetadata.d.ts

@@ -1,4 +1,53 @@
-import type { ColorMetadata, ColorNumber, CssColor, GlobalColors } from './types.js';
+import type { ColorMetadataByName, ColorNumber, CssColor, GlobalColors } from './types.js';
 export declare const baseColors: Record<GlobalColors, CssColor>;
-export declare const colorMetadata: Record<ColorNumber, ColorMetadata>;
+export declare const colorMetadata: ColorMetadataByName;
+export declare const getColorMetadataByNumber: (number: ColorNumber) => ({
+    name: "background-default";
+    number: 1;
+} & import("./types.js").ColorMetadata) | ({
+    name: "background-tinted";
+    number: 2;
+} & import("./types.js").ColorMetadata) | ({
+    name: "surface-default";
+    number: 3;
+} & import("./types.js").ColorMetadata) | ({
+    name: "surface-tinted";
+    number: 4;
+} & import("./types.js").ColorMetadata) | ({
+    name: "surface-hover";
+    number: 5;
+} & import("./types.js").ColorMetadata) | ({
+    name: "surface-active";
+    number: 6;
+} & import("./types.js").ColorMetadata) | ({
+    name: "border-subtle";
+    number: 7;
+} & import("./types.js").ColorMetadata) | ({
+    name: "border-default";
+    number: 8;
+} & import("./types.js").ColorMetadata) | ({
+    name: "border-strong";
+    number: 9;
+} & import("./types.js").ColorMetadata) | ({
+    name: "text-subtle";
+    number: 10;
+} & import("./types.js").ColorMetadata) | ({
+    name: "text-default";
+    number: 11;
+} & import("./types.js").ColorMetadata) | ({
+    name: "base-default";
+    number: 12;
+} & import("./types.js").ColorMetadata) | ({
+    name: "base-hover";
+    number: 13;
+} & import("./types.js").ColorMetadata) | ({
+    name: "base-active";
+    number: 14;
+} & import("./types.js").ColorMetadata) | ({
+    name: "base-contrast-subtle";
+    number: 15;
+} & import("./types.js").ColorMetadata) | ({
+    name: "base-contrast-default";
+    number: 16;
+} & import("./types.js").ColorMetadata);
 //# sourceMappingURL=colorMetadata.d.ts.map

package/dist/src/colors/colorMetadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAErF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAsLnD,CAAC"}
+{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAsM3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,WAAY,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC"}

package/dist/src/colors/colorMetadata.js

@@ -1,3 +1,4 @@
+import * as R from "ramda";
 const baseColors = {
   blue: "#0A71C0",
   green: "#068718",
@@ -6,8 +7,9 @@ const baseColors = {
   red: "#C01B1B"
 };
 const colorMetadata = {
-  1: {
-    name: "backgroundDefault",
+  "background-default": {
+    number: 1,
+    name: "background-default",
     group: "background",
     displayName: "Background Default",
     description: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
@@ -17,8 +19,9 @@ const colorMetadata = {
       contrast: 1e-3
     }
   },
-  2: {
-    name: "backgroundTinted",
+  "background-tinted": {
+    number: 2,
+    name: "background-tinted",
     group: "background",
     displayName: "Background Tinted",
     description: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
@@ -28,8 +31,9 @@ const colorMetadata = {
       contrast: 65e-4
     }
   },
-  3: {
-    name: "surfaceDefault",
+  "surface-default": {
+    number: 3,
+    name: "surface-default",
     group: "surface",
     displayName: "Surface Default",
     description: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
@@ -39,8 +43,9 @@ const colorMetadata = {
       contrast: 0.015
     }
   },
-  4: {
-    name: "surfaceTinted",
+  "surface-tinted": {
+    number: 4,
+    name: "surface-tinted",
     group: "surface",
     displayName: "Surface Tinted",
     description: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
@@ -50,8 +55,9 @@ const colorMetadata = {
       contrast: 0.015
     }
   },
-  5: {
-    name: "surfaceHover",
+  "surface-hover": {
+    number: 5,
+    name: "surface-hover",
     group: "surface",
     displayName: "Surface Hover",
     description: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
@@ -61,8 +67,9 @@ const colorMetadata = {
       contrast: 0.028
     }
   },
-  6: {
-    name: "surfaceActive",
+  "surface-active": {
+    number: 6,
+    name: "surface-active",
     group: "surface",
     displayName: "Surface Active",
     description: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
@@ -72,8 +79,9 @@ const colorMetadata = {
       contrast: 0.045
     }
   },
-  7: {
-    name: "borderSubtle",
+  "border-subtle": {
+    number: 7,
+    name: "border-subtle",
     group: "border",
     displayName: "Border Subtle",
     description: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
@@ -83,8 +91,9 @@ const colorMetadata = {
       contrast: 0.26
     }
   },
-  8: {
-    name: "borderDefault",
+  "border-default": {
+    number: 8,
+    name: "border-default",
     group: "border",
     displayName: "Border Default",
     description: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
@@ -94,8 +103,9 @@ const colorMetadata = {
       contrast: 0.4
     }
   },
-  9: {
-    name: "borderStrong",
+  "border-strong": {
+    number: 9,
+    name: "border-strong",
     group: "border",
     displayName: "Border Strong",
     description: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
@@ -105,8 +115,9 @@ const colorMetadata = {
       contrast: 0.6
     }
   },
-  10: {
-    name: "textSubtle",
+  "text-subtle": {
+    number: 10,
+    name: "text-subtle",
     group: "text",
     displayName: "Text Subtle",
     description: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
@@ -116,8 +127,9 @@ const colorMetadata = {
       contrast: 0.57
     }
   },
-  11: {
-    name: "textDefault",
+  "text-default": {
+    number: 11,
+    name: "text-default",
     group: "text",
     displayName: "Text Default",
     description: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
@@ -127,8 +139,9 @@ const colorMetadata = {
       contrast: 0.86
     }
   },
-  12: {
-    name: "baseDefault",
+  "base-default": {
+    number: 12,
+    name: "base-default",
     group: "base",
     displayName: "Base Default",
     description: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
@@ -138,8 +151,9 @@ const colorMetadata = {
       contrast: 1
     }
   },
-  13: {
-    name: "baseHover",
+  "base-hover": {
+    number: 13,
+    name: "base-hover",
     group: "base",
     displayName: "Base Hover",
     description: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
@@ -149,8 +163,9 @@ const colorMetadata = {
       contrast: 1
     }
   },
-  14: {
-    name: "baseActive",
+  "base-active": {
+    number: 14,
+    name: "base-active",
     group: "base",
     displayName: "Base Active",
     description: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
@@ -160,8 +175,9 @@ const colorMetadata = {
       contrast: 1
     }
   },
-  15: {
-    name: "contrastSubtle",
+  "base-contrast-subtle": {
+    number: 15,
+    name: "base-contrast-subtle",
     group: "base",
     displayName: "Contrast Subtle",
     description: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
@@ -171,8 +187,9 @@ const colorMetadata = {
       contrast: 1
     }
   },
-  16: {
-    name: "contrastDefault",
+  "base-contrast-default": {
+    number: 16,
+    name: "base-contrast-default",
     group: "base",
     displayName: "Contrast Default",
     description: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
@@ -183,7 +200,12 @@ const colorMetadata = {
     }
   }
 };
+const colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+const getColorMetadataByNumber = (number) => {
+  return colorMetadataByNumber[number];
+};
 export {
   baseColors,
-  colorMetadata
+  colorMetadata,
+  getColorMetadataByNumber
 };

package/dist/src/colors/theme.d.ts

@@ -1,12 +1,13 @@
 import type { CssColor } from './types.js';
-import type { ColorInfo, ColorNumber, ColorScheme, ThemeInfo } from './types.js';
+import type { Color, ColorNumber, ColorScheme, ThemeInfo } from './types.js';
+export declare const RESERVED_COLORS: string[];
 /**
  * Generates a color scale based on a base color and a color mode.
  *
  * @param color The base color that is used to generate the color scale
  * @param colorScheme The color scheme to generate a scale for
  */
-export declare const generateColorScale: (color: CssColor, colorScheme: ColorScheme) => ColorInfo[];
+export declare const generateColorScale: (color: CssColor, colorScheme: ColorScheme) => Color[];
 /**
  * Generates color schemes based on a base color. Light, Dark and Contrast scales are included.
  *