@digdir/designsystemet 1.16.1 → 1.17.0

package/dist/src/{config.js → schemas/v1/schema.js}

@@ -1,64 +1,9 @@
-import { baseColorNames, colorNames } from "./colors/colorMetadata.js";
-import { convertToHex } from "./colors/utils.js";
-import { RESERVED_COLORS } from "./colors/theme.js";
-import "./colors/index.js";
-import { cliOptions } from "./tokens/create.js";
-import pc from "picocolors";
-import * as R from "ramda";
+import { baseColorNames, colorNames } from "../../colors/colorMetadata.js";
+import { convertToHex } from "../../colors/utils.js";
+import { RESERVED_COLORS } from "../../colors/theme.js";
+import "../../colors/index.js";
 import { z } from "zod";
-import { fromError } from "zod-validation-error";
-//#region src/config.ts
-function mapPathToOptionName(path) {
-	const normalisedPath = path[0] === "themes" ? ["theme", ...R.drop(2, path)] : path;
-	const option = R.path(normalisedPath, cliOptions);
-	if (typeof option !== "string") return;
-	return option;
-}
-function makeFriendlyError(err) {
-	try {
-		return fromError(err, { messageBuilder: (issues) => issues.map((issue) => {
-			const issuePath = issue.path.join(".");
-			const optionName = mapPathToOptionName(issue.path);
-			const errorCode = `(error code: ${issue.code})`;
-			const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
-			return `  - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
-      ${issue.message} ${pc.dim(errorCode)}`;
-		}).join("\n") });
-	} catch (_err2) {
-		console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
-		console.error(err instanceof Error ? err.stack : "No stack trace available");
-	}
-}
-/**
-* Validates a configuration object against a provided Zod schema.
-*
-* @template T - The expected type of the validated configuration.
-* @param schema - A Zod schema used to validate the configuration object.
-* @param unvalidatedConfig - The configuration object to validate.
-* @returns The validated configuration object, typed as T.
-* @throws Exits the process with code 1 if validation fails, after logging a friendly error message.
-*/
-function validateConfig(schema, unvalidatedConfig, configFilePath) {
-	try {
-		return schema.parse(unvalidatedConfig);
-	} catch (err) {
-		console.error(pc.redBright(`Invalid config file at ${pc.red(configFilePath)}`));
-		const validationError = makeFriendlyError(err);
-		console.error(validationError?.toString());
-		process.exit(1);
-	}
-}
-function parseConfig(configFile, configFilePath) {
-	if (!configFile) return {};
-	try {
-		return JSON.parse(configFile);
-	} catch (err) {
-		console.error(pc.redBright(`Failed parsing config file at ${pc.red(configFilePath)}`));
-		const validationError = makeFriendlyError(err);
-		console.error(validationError?.toString());
-		process.exit(1);
-	}
-}
+//#region src/schemas/v1/schema.ts
 const hexPatterns = [
 	`#[0-9a-fA-F]{3}`,
 	`#[0-9a-fA-F]{4}`,
@@ -115,4 +60,4 @@ const configFileCreateSchema = z.object({
 	themes: z.record(z.string(), themeSchema).meta({ description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name." })
 }).required().extend(commonConfig.shape);
 //#endregion
-export { colorRegex, commonConfig, configFileCreateSchema, parseConfig, validateConfig };
+export { colorRegex, commonConfig, configFileCreateSchema };

package/dist/src/schemas/v1.1/schema.d.ts

@@ -0,0 +1,162 @@
+import { z } from 'zod';
+export declare const colorRegex: RegExp;
+declare const overridesSchema: z.ZodOptional<z.ZodObject<{
+    colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+        "background-default": "background-default";
+        "background-tinted": "background-tinted";
+        "surface-default": "surface-default";
+        "surface-tinted": "surface-tinted";
+        "surface-hover": "surface-hover";
+        "surface-active": "surface-active";
+        "border-subtle": "border-subtle";
+        "border-default": "border-default";
+        "border-strong": "border-strong";
+        "text-subtle": "text-subtle";
+        "text-default": "text-default";
+        "base-default": "base-default";
+        "base-hover": "base-hover";
+        "base-active": "base-active";
+        "base-contrast-subtle": "base-contrast-subtle";
+        "base-contrast-default": "base-contrast-default";
+    }> & z.core.$partial, z.ZodObject<{
+        light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+    }, z.core.$strip>>>>;
+    severity: z.ZodOptional<z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+        danger: "danger";
+        info: "info";
+        success: "success";
+        warning: "warning";
+    }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+    linkVisited: z.ZodOptional<z.ZodObject<{
+        light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+    }, z.core.$strip>>;
+    focus: z.ZodOptional<z.ZodObject<{
+        inner: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
+        outer: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>>;
+declare const themeSchema: z.ZodObject<{
+    colors: z.ZodRecord<z.ZodString, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+    typography: z.ZodOptional<z.ZodObject<{
+        fontFamily: z.ZodString;
+    }, z.core.$strip>>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+    overrides: z.ZodOptional<z.ZodObject<{
+        colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+            "background-default": "background-default";
+            "background-tinted": "background-tinted";
+            "surface-default": "surface-default";
+            "surface-tinted": "surface-tinted";
+            "surface-hover": "surface-hover";
+            "surface-active": "surface-active";
+            "border-subtle": "border-subtle";
+            "border-default": "border-default";
+            "border-strong": "border-strong";
+            "text-subtle": "text-subtle";
+            "text-default": "text-default";
+            "base-default": "base-default";
+            "base-hover": "base-hover";
+            "base-active": "base-active";
+            "base-contrast-subtle": "base-contrast-subtle";
+            "base-contrast-default": "base-contrast-default";
+        }> & z.core.$partial, z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>>>;
+        severity: z.ZodOptional<z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+            danger: "danger";
+            info: "info";
+            success: "success";
+            warning: "warning";
+        }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+        linkVisited: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
+        focus: z.ZodOptional<z.ZodObject<{
+            inner: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
+            outer: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export declare const commonConfig: z.ZodObject<{
+    clean: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+/**
+ * This defines the structure of the final configuration file
+ */
+export declare const configFileCreateSchema: z.ZodObject<{
+    outDir: z.ZodNonOptional<z.ZodString>;
+    themes: z.ZodNonOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+        colors: z.ZodRecord<z.ZodString, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        typography: z.ZodOptional<z.ZodObject<{
+            fontFamily: z.ZodString;
+        }, z.core.$strip>>;
+        borderRadius: z.ZodOptional<z.ZodNumber>;
+        overrides: z.ZodOptional<z.ZodObject<{
+            colors: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodEnum<{
+                "background-default": "background-default";
+                "background-tinted": "background-tinted";
+                "surface-default": "surface-default";
+                "surface-tinted": "surface-tinted";
+                "surface-hover": "surface-hover";
+                "surface-active": "surface-active";
+                "border-subtle": "border-subtle";
+                "border-default": "border-default";
+                "border-strong": "border-strong";
+                "text-subtle": "text-subtle";
+                "text-default": "text-default";
+                "base-default": "base-default";
+                "base-hover": "base-hover";
+                "base-active": "base-active";
+                "base-contrast-subtle": "base-contrast-subtle";
+                "base-contrast-default": "base-contrast-default";
+            }> & z.core.$partial, z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>>>;
+            severity: z.ZodOptional<z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+                danger: "danger";
+                info: "info";
+                success: "success";
+                warning: "warning";
+            }> & z.core.$partial, z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>>>;
+            linkVisited: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
+            focus: z.ZodOptional<z.ZodObject<{
+                inner: z.ZodOptional<z.ZodObject<{
+                    light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                    dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                }, z.core.$strip>>;
+                outer: z.ZodOptional<z.ZodObject<{
+                    light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                    dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                }, z.core.$strip>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>>;
+    clean: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+export type CommonConfigSchema = z.infer<typeof commonConfig>;
+export type BuildConfigSchema = z.infer<typeof commonConfig>;
+export type CreateConfigSchema = z.infer<typeof configFileCreateSchema>;
+export type ConfigSchemaTheme = z.infer<typeof themeSchema>;
+export type ColorOverrideSchema = z.infer<typeof overridesSchema>;
+export {};
+//# sourceMappingURL=schema.d.ts.map

package/dist/src/schemas/v1.1/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schemas/v1.1/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAYxB,eAAO,MAAM,UAAU,QAA2C,CAAC;AAsDnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAQR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/src/schemas/v1.1/schema.js

@@ -0,0 +1,54 @@
+import { baseColorNames, colorNames } from "../../colors/colorMetadata.js";
+import { convertToHex } from "../../colors/utils.js";
+import "../../colors/index.js";
+import { z } from "zod";
+const colorRegex = new RegExp(`^${[
+	`#[0-9a-fA-F]{3}`,
+	`#[0-9a-fA-F]{4}`,
+	`#[0-9a-fA-F]{6}`,
+	`#[0-9a-fA-F]{8}`
+].join("|")}$`);
+const colorSchema = z.string().regex(colorRegex).transform(convertToHex).describe(`A hex color, which is used for creating a color scale.`);
+const colorModeOverrideSchema = z.object({
+	light: colorSchema.optional().describe("A hex color that overrides light mode"),
+	dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe("Override values for semantic color tokens like \"background-subtle\", \"border-default\", etc.");
+const colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe("The name of the color to add overrides for, e.g. \"accent\"");
+const semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+const severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
+const linkVisitedOverrideSchema = z.object({
+	light: colorSchema.optional().describe("A hex color that overrides light mode"),
+	dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe("Overrides for the \"link-visited\" color");
+const focusOverrideSchema = z.object({
+	inner: z.object({
+		light: colorSchema.optional().describe("A hex color that overrides light mode"),
+		dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+	}).optional().describe("Overrides for the \"focus-inner\" color"),
+	outer: z.object({
+		light: colorSchema.optional().describe("A hex color that overrides light mode"),
+		dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+	}).optional().describe("Overrides for the \"focus-outer\" color")
+}).describe("Overrides for the focus colors");
+const overridesSchema = z.object({
+	colors: semanticColorOverrideSchema.optional(),
+	severity: severityColorOverrideSchema.optional(),
+	linkVisited: linkVisitedOverrideSchema.optional(),
+	focus: focusOverrideSchema.optional()
+}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
+const themeSchema = z.object({
+	colors: z.record(z.string(), colorSchema).refine((c) => typeof c.neutral === "string", { message: "Theme colors must include a \"neutral\" color." }).meta({ description: "Defines the colors for this theme" }),
+	typography: z.object({ fontFamily: z.string().meta({ description: "Sets the font-family for this theme" }) }).describe("Defines the typography for a given theme").optional(),
+	borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+	overrides: overridesSchema
+}).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
+const commonConfig = z.object({ clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional() });
+/**
+* This defines the structure of the final configuration file
+*/
+const configFileCreateSchema = z.object({
+	outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
+	themes: z.record(z.string(), themeSchema).meta({ description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name." })
+}).required().extend(commonConfig.shape);
+//#endregion
+export { colorRegex, commonConfig, configFileCreateSchema };

package/dist/src/tokens/build.js

@@ -1,6 +1,6 @@
 import { dsfs } from "../utils/filesystem.js";
-import { processThemeObject } from "./process/utils/getMultidimensionalThemes.js";
 import { processPlatform } from "./process/platform.js";
+import { processThemeObject } from "./process/utils/getMultidimensionalThemes.js";
 import { createTypeDeclarationFiles } from "./process/output/declarations.js";
 import { createTailwindCSSFiles } from "./process/output/tailwind.js";
 import { createThemeCSSFiles, defaultFileHeader } from "./process/output/theme.js";

package/dist/src/tokens/create/files.d.ts

@@ -1,8 +1,8 @@
-import type { ColorNamesByCategory, OutputFile, TokenSetDimensions, TokenSets } from '../types.js';
+import type { OutputFile, TokenSetDimensions, TokenSets } from '../types.js';
 export declare const stringify: (data: unknown) => string;
 type CreateTokenFilesOptions = {
     tokenSetDimensions: TokenSetDimensions;
-    colors: ColorNamesByCategory;
+    colorNames: string[];
     themeNames: string[];
 };
 /**

package/dist/src/tokens/create/files.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/files.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKnG,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,uBAAuB,GAAG;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAU,SAAS,uBAAuB,0BAiB5E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,SAAS,KAAG,UAAU,EAQjE,CAAC"}
+{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../src/tokens/create/files.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK7E,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAE1E,KAAK,uBAAuB,GAAG;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAU,SAAS,uBAAuB,0BAiB5E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,SAAS,KAAG,UAAU,EAQjE,CAAC"}

package/dist/src/tokens/create/files.js

@@ -9,13 +9,13 @@ const stringify = (data) => JSON.stringify(data, null, 2);
 * `$themes.json` and `$metadata.json` are essential for Token Studio and Style Dictionary to correctly interpret and manage the design tokens.
 */
 const createSystemTokenFiles = async (options) => {
-	const { colors, themeNames, tokenSetDimensions } = options;
+	const { colorNames, themeNames, tokenSetDimensions } = options;
 	const files = [];
 	const $themesPath = "$themes.json";
 	const $metadataPath = "$metadata.json";
 	const $designsystemetPath = "$designsystemet.jsonc";
-	const $themes = await generate$Themes(tokenSetDimensions, themeNames, colors);
-	const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colors);
+	const $themes = await generate$Themes(tokenSetDimensions, themeNames, colorNames);
+	const $metadata = generate$Metadata(tokenSetDimensions, themeNames, colorNames);
 	const $designsystemet = generate$Designsystemet();
 	files.push({
 		destination: $themesPath,

package/dist/src/tokens/create/generators/$metadata.d.ts

@@ -1,4 +1,4 @@
-import type { ColorNamesByCategory, TokenSetDimensions } from '../../types.js';
+import type { TokenSetDimensions } from '../../types.js';
 type Metadata = {
     tokenSetOrder: string[];
 };
@@ -7,6 +7,6 @@ type Metadata = {
  *
  * This is used to order tokens in Token Studio
  */
-export declare function generate$Metadata(tokenSetDimensions: TokenSetDimensions, themeNames: string[], colors: ColorNamesByCategory): Metadata;
+export declare function generate$Metadata(tokenSetDimensions: TokenSetDimensions, themeNames: string[], colorNames: string[]): Metadata;
 export {};
 //# sourceMappingURL=$metadata.d.ts.map

package/dist/src/tokens/create/generators/$metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"$metadata.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,MAAM,EAAE,EACpB,MAAM,EAAE,oBAAoB,GAC3B,QAAQ,CAoBV"}
+{"version":3,"file":"$metadata.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,MAAM,EAAE,EACpB,UAAU,EAAE,MAAM,EAAE,GACnB,QAAQ,CAkBV"}

package/dist/src/tokens/create/generators/$metadata.js

@@ -4,7 +4,7 @@
 *
 * This is used to order tokens in Token Studio
 */
-function generate$Metadata(tokenSetDimensions, themeNames, colors) {
+function generate$Metadata(tokenSetDimensions, themeNames, colorNames) {
 	const { colorSchemes, sizeModes } = tokenSetDimensions;
 	return { tokenSetOrder: [
 		"primitives/globals",
@@ -15,9 +15,7 @@ function generate$Metadata(tokenSetDimensions, themeNames, colors) {
 		...themeNames.map((theme) => `primitives/modes/typography/secondary/${theme}`),
 		...colorSchemes.flatMap((scheme) => [...themeNames.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
 		...themeNames.map((theme) => `themes/${theme}`),
-		"semantic/color",
-		...colors.main.map((color) => `semantic/modes/main-color/${color}`),
-		...colors.support.map((color) => `semantic/modes/support-color/${color}`),
+		...colorNames.map((color) => `semantic/color/${color}`),
 		"semantic/style"
 	] };
 }

package/dist/src/tokens/create/generators/$themes.d.ts

@@ -1,5 +1,5 @@
 import { type ThemeObject } from '@tokens-studio/types';
-import type { ColorNamesByCategory, TokenSetDimensions } from '../../types.js';
+import type { TokenSetDimensions } from '../../types.js';
 type ThemeObject_ = ThemeObject & {
     $figmaCollectionId?: string;
     $figmaModeId?: string;
@@ -20,6 +20,6 @@ type ThemeObject_ = ThemeObject & {
  - New collections/modes may cause users hitting the cap on Figma variable modes which is at time of writing 4 (or unlimited for enterprise).
 
 */
-export declare function generate$Themes(tokenSetDimensions: TokenSetDimensions, themeNames: string[], colors: ColorNamesByCategory): Promise<ThemeObject_[]>;
+export declare function generate$Themes(tokenSetDimensions: TokenSetDimensions, themeNames: string[], colorNames: string[]): Promise<ThemeObject_[]>;
 export {};
 //# sourceMappingURL=$themes.d.ts.map

package/dist/src/tokens/create/generators/$themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"$themes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,KAAK,EAAE,oBAAoB,EAAa,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAa1F,KAAK,YAAY,GAAG,WAAW,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;;;EAcE;AACF,wBAAsB,eAAe,CACnC,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,MAAM,EAAE,EACpB,MAAM,EAAE,oBAAoB,GAC3B,OAAO,CAAC,YAAY,EAAE,CAAC,CAWzB"}
+{"version":3,"file":"$themes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,KAAK,EAAa,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAWpE,KAAK,YAAY,GAAG,WAAW,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;;;EAcE;AACF,wBAAsB,eAAe,CACnC,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,MAAM,EAAE,EACpB,UAAU,EAAE,MAAM,EAAE,GACnB,OAAO,CAAC,YAAY,EAAE,CAAC,CAUzB"}

package/dist/src/tokens/create/generators/$themes.js

@@ -1,7 +1,6 @@
 import { TokenSetStatus } from "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js";
 import "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js";
 //#region src/tokens/create/generators/$themes.ts
-const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
 async function createHash(text, algo = "SHA-1") {
 	const crypto = globalThis.crypto;
 	return Array.from(new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))), (byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -21,7 +20,7 @@ async function createHash(text, algo = "SHA-1") {
 - New collections/modes may cause users hitting the cap on Figma variable modes which is at time of writing 4 (or unlimited for enterprise).
 
 */
-async function generate$Themes(tokenSetDimensions, themeNames, colors) {
+async function generate$Themes(tokenSetDimensions, themeNames, colorNames) {
 	const { colorSchemes, sizeModes } = tokenSetDimensions;
 	return [
 		...generateSizeGroup(sizeModes),
@@ -29,8 +28,7 @@ async function generate$Themes(tokenSetDimensions, themeNames, colors) {
 		...generateTypographyGroup(themeNames),
 		...generateColorSchemesGroup(colorSchemes, themeNames),
 		generateSemanticGroup(),
-		...await generateColorGroup("main", colors.main),
-		...await generateColorGroup("support", colors.support)
+		...await generateColorGroup(colorNames)
 	];
 }
 function generateSizeGroup(_sizes) {
@@ -122,7 +120,6 @@ function generateSemanticGroup() {
 		name: "Semantic",
 		selectedTokenSets: {
 			"semantic/style": TokenSetStatus.ENABLED,
-			"semantic/color": TokenSetStatus.ENABLED,
 			"primitives/globals": TokenSetStatus.SOURCE
 		},
 		$figmaCollectionId: "VariableCollectionId:34811:5976",
@@ -130,12 +127,12 @@ function generateSemanticGroup() {
 		group: "Semantic"
 	};
 }
-async function generateColorGroup(group, colors) {
-	return Promise.all(colors.map(async (color) => ({
-		id: await createHash(`${group}-${color}`),
+async function generateColorGroup(colorNames) {
+	return Promise.all(colorNames.map(async (color) => ({
+		id: await createHash(color),
 		name: color,
-		selectedTokenSets: { [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED },
-		group: `${capitalize(group)} color`
+		selectedTokenSets: { [`semantic/color/${color}`]: TokenSetStatus.ENABLED },
+		group: `Color`
 	})));
 }
 function generateTypographyGroup(themes) {

package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts

@@ -1,5 +1,5 @@
-import type { ColorScheme } from '../../../../colors/types.js';
-import type { ColorOverrideSchema } from '../../../../config.js';
-import type { Colors, TokenSet } from '../../../types.js';
-export declare const generateColorScheme: (themeName: string, colorScheme: ColorScheme, colors: Colors, overrides?: ColorOverrideSchema) => TokenSet;
+import type { ColorScheme, CssColor } from '../../../../colors/types.js';
+import type { ColorOverrideSchema } from '../../../../schemas/v1.1/schema.js';
+import type { TokenSet } from '../../../types.js';
+export declare const generateColorScheme: (themeName: string, colorScheme: ColorScheme, colors: Record<string, CssColor>, overrides?: ColorOverrideSchema) => TokenSet;
 //# sourceMappingURL=color-scheme.d.ts.map

package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/primitives/color-scheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgBjE,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAwFF,CAAC"}
+{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/primitives/color-scheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgBzD,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,EAChC,YAAY,mBAAmB,KAC9B,QAkFF,CAAC"}

package/dist/src/tokens/create/generators/primitives/color-scheme.js

@@ -31,29 +31,27 @@ const generateColorScheme = (themeName, colorScheme, colors, overrides) => {
 		});
 		return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
 	};
-	const main = R.mapObjIndexed((color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), colors.main);
-	const support = R.mapObjIndexed((color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), colors.support);
-	const neutralColorScale = generateColorScale(colors.neutral, colorScheme);
-	const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
+	const colorScales = R.mapObjIndexed((color, colorName) => {
+		if (colorName === "neutral") return generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
+		return generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName));
+	}, colors);
 	const baseColorsWithOverrides = {
 		...baseColors,
 		...overrides?.severity
 	};
-	const globalColors = R.mapObjIndexed((color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), baseColorsWithOverrides);
+	const severityColors = R.mapObjIndexed((color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)), baseColorsWithOverrides);
 	const defaultLinkVisited = generateColor(generateColorScale(dsLinkColor, colorScheme))[12];
 	const linkOverride = overrides?.linkVisited?.[colorScheme] ? {
 		$type: "color",
 		$value: overrides.linkVisited[colorScheme]
 	} : void 0;
-	const defaultFocusInner = neutralColorScale[0].hex;
-	const defaultFocusOuter = neutralColorScale[10].hex;
+	const defaultFocusInner = colorScales.neutral[1].$value;
+	const defaultFocusOuter = colorScales.neutral[11].$value;
 	const focusInnerOverride = overrides?.focus?.inner?.[colorScheme];
 	const focusOuterOverride = overrides?.focus?.outer?.[colorScheme];
 	return { [themeName]: {
-		...main,
-		...support,
-		neutral,
-		...globalColors,
+		...colorScales,
+		...severityColors,
 		link: { visited: linkOverride || defaultLinkVisited },
 		focus: {
 			inner: {

package/dist/src/tokens/create/generators/semantic/color.d.ts

@@ -1,5 +1,3 @@
-import type { Colors } from '../../../types.js';
-export declare const generateSemanticColors: (colors: Colors, _themeName: string) => {
-    color: any;
-};
+import type { TokenSet } from '../../../types.js';
+export declare const generateColorTokens: (colorNames: string[], _themeName: string) => Record<string, TokenSet>;
 //# sourceMappingURL=color.d.ts.map

package/dist/src/tokens/create/generators/semantic/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM;;CAiBxE,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,eAAO,MAAM,mBAAmB,GAAI,YAAY,MAAM,EAAE,EAAE,YAAY,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CASrG,CAAC"}

package/dist/src/tokens/create/generators/semantic/color.js

@@ -1,46 +1,17 @@
-import { baseColorNames } from "../../../../colors/colorMetadata.js";
-import { semanticColorMap } from "../../../../colors/types.js";
-import * as R from "ramda";
+import { semanticColorNames } from "../../../../colors/types.js";
 //#region src/tokens/create/generators/semantic/color.ts
-const generateSemanticColors = (colors, _themeName) => {
-	const mainColorNames = Object.keys(colors.main);
-	const supportColorNames = Object.keys(colors.support);
-	const semanticColorTokens = [...[
-		...mainColorNames,
-		"neutral",
-		...supportColorNames
-	], ...baseColorNames].map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
-	return {
-		...baseColorTemplate,
-		color: {
-			...Object.fromEntries(semanticColorTokens),
-			...baseColorTemplate.color
-		}
-	};
-};
-const baseColorTemplate = {
-	color: { focus: {
-		inner: {
-			$type: "color",
-			$value: "{color.focus.inner-color}"
-		},
-		outer: {
-			$type: "color",
-			$value: "{color.focus.outer-color}"
-		}
-	} },
-	link: { color: { visited: {
-		$type: "color",
-		$value: "{color.link.visited}"
-	} } }
+const generateColorTokens = (colorNames, _themeName) => {
+	const colorTokens = {};
+	for (const colorName of colorNames) colorTokens[colorName] = generateSemanticColorScaleTokens(colorName);
+	return colorTokens;
 };
-const generateColorScaleTokens = (colorName) => {
+const generateSemanticColorScaleTokens = (colorName) => {
 	const colorScale = {};
-	for (const [colorSemantic, colorNumber] of R.toPairs(semanticColorMap)) colorScale[colorSemantic] = {
+	for (const semanticColorName of semanticColorNames) colorScale[semanticColorName] = {
 		$type: "color",
-		$value: `{color.${colorName}.${colorNumber}}`
+		$value: `{color.${colorName}.${semanticColorName}}`
 	};
 	return colorScale;
 };
 //#endregion
-export { generateSemanticColors };
+export { generateColorTokens };

package/dist/src/tokens/create/generators/semantic/style.d.ts

@@ -1,3 +1,3 @@
 import type { TokenSet } from '../../../types.js';
-export declare function generateSemanticStyle(): TokenSet;
+export declare function generateSemanticStyle(colorNames: string[]): TokenSet;
 //# sourceMappingURL=style.d.ts.map

package/dist/src/tokens/create/generators/semantic/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,qBAAqB,IAAI,QAAQ,CA2XhD"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,QAAQ,CA4XpE"}